223在 Dreamweaver下编辑HTML文档 在熟悉了 Dreamweaver创建站点以及HTML文档等操作之后,接下来将介绍如何在 Dreamweaver编写的HTML,以帮助同学们掌握 Dreamweaver的HTML网页编写技巧,在熟 悉了这些技巧之后,将会让同学们编写一个HTML文档,作为本部分实验的提交内容 插入HTML元素 前面提到工具栏是HTML网页开发人员最经常用到的部分,通过工具栏开发人员可以方 面快捷的插入HTML元素,而不用手写HTML代码。你可以在选择在代码或者页面设计 窗口中某个位置作为元素插入的位置。比如要插入一个超级链接,如下图所示: 文件①)编辑C)查看C)插入〔)修改)文本①T)命令〔)站点)窗口⑦)帮助Qo 插入常用布局表单文本m肌应用程序F1ash元索「收藏夹 回晶回国,·的助因助·回 tnT命thn1 回代码回拆分第二步:点击速无标题文档 p搶.c回圆 CTY里添知级链接 W3c//didXhiNl1.0Transitional//enhttp://ww.v3.org/ir/xhtmll/did/XhtNl <metahttp-equiv="content-type = text/html: charset=gb2312"/> tit1e)无标题文档 title head <body 109道本元素的位置 第一步:用标点击这里 插入基本元素的位置 或者点击这 在跳出来的窗口中设置该超级链接的属性 起级链接 文本:显示的名称 确定 链接:a2Fin2hm 取消 目标: parent 标题 访问键 Tab键索引
2.2.3 在 Dreamweaver 下编辑 HTML 文档 在熟悉了 Dreamweaver 创建站点以及 HTML 文档等操作之后，接下来将介绍如何在 Dreamweaver 编写的 HTML，以帮助同学们掌握 Dreamweaver 的 HTML 网页编写技巧，在熟 悉了这些技巧之后，将会让同学们编写一个 HTML 文档，作为本部分实验的提交内容。 z 插入 HTML 元素 前面提到工具栏是 HTML 网页开发人员最经常用到的部分，通过工具栏开发人员可以方 面快捷的插入 HTML 元素，而不用手写 HTML 代码。你可以在选择在代码或者页面设计 窗口中某个位置作为元素插入的位置。比如要插入一个超级链接，如下图所示： 在跳出来的窗口中设置该超级链接的属性：
点击确定,即可添加一个超级链接,注意黄色区域的代码(程序自动生成): a夏 acronedia Dreamweaver8-[c: Document\FUDA\082eb应用基础\LA1ab2\要ebS st htal 文件①)编辑)查看①插入〔)修改)文本①)命令c)站点您)窗口帮助QD H插入常用布局表单|文本|Hw.应用程序|nah元索收藏夹 回回回,自·的因助· Vate htnlTesthtml* 回代码回拆分设计十标题:无标题文档 p8@.c PUB //ww, w3, ore/1999/xhtml quiv="Content-Type" content="text/html; charset=gb2312"/> 8 <body> ∵小*元素的位置,21里开的 B10501050800800 插入基本元素的位置:显示的名秘 其他的元素添加方法类似,在工具栏中,可以被添加的常见元素见下表: 工具栏选项卡 HTML元素 说明 常用 <a></a> 超级链接、电子邮件链接以 及命名错定 <table></table> 表格 图像 布局 <table></table> 表单 <form></form> inp 全部的表单控件 文本 <B></B> 粗体文本 <|></> 斜体文本 <Strong></Strong> 加强文本 <P></P><PRE></PRE> 段落 </h2>等 标题 <u></u等 列表 你可以把鼠标放在相应的选项上,程序会有相应的提示: 插入常用|布局表单文本|m眈应用程序|門1sh元索|收藏夹 口欧 圖团国口网 表单 1 Sina html Vote. html Test.html* 代码程服示标题无题档 l PUBLIC"//W3C//DTD XHTML 1.0 Transitional//
点击确定，即可添加一个超级链接，注意黄色区域的代码（程序自动生成）： 其他的元素添加方法类似，在工具栏中，可以被添加的常见元素见下表： 工具栏选项卡 HTML 元素 说明 常用 <a></a> 超级链接、电子邮件链接以 及命名锚定 <table></table> 表格 <div></div> 层 <img></img> 图像 布局 <table></table> 表格 <div></div> 层 表单 <form></form> 表单 <input type=”></input> 全部的表单控件 文本 <B></B> 粗体文本 <I></I> 斜体文本 <Strong></Strong> 加强文本 <P></P><PRE></PRE> 段落 <h1></h2>等 标题 <ul></ul>等 列表 你可以把鼠标放在相应的选项上，程序会有相应的提示：
当然,在开发过程中一定要善于利用工作区下方的属性面板,通过它可以为我们修改 HTML元素属性带来很多方便,在代码或者设计面板中点击鼠标,程序会自动找到最近 的HTML元素(指鼠标点击的地方落在该元素的内部,即<a>…鼠标点击/a>),然后 属性面板中会显示该元素的属性,比如我们在刚刚插入超链接的地方点击鼠标,那么属 性面板将显示超链接的属性 c: Document\FUDAN082b用基础LAB\ab2 ebSite\Test. ht.…回回囟 文件①)编辑①)查看0插入①)修改)文本①)命令c)站点)菌口)帮助Q w插入常用布局表单文本M应用程序|Ph元素|收夹 口口四国回回目固团国口囡口 部正在 b2-LabList html Sina htal Vete htnlTesthtol 所选内容的摘要 回代码回拆分团设计十标题无标题文档 o.3t ..cB.a. 人丰元的位繁,如12FmBm:mm 插入基本元来的位置:显示的名称 L2本视图 c|會y Obody)<p>(a> lab2 TextFornat, ht 格式段落 式无 字体默认 Test. ht 页面属性,列表项自 O备妥 ●在浏览器中浏览HTML文档 在站点属性文件结构中选择要浏览的文件,按F12或者鼠标右键单击,选择在浏览器中 预览。如下图所示 a夏 acronedia Dreamweaver8=IC:1 Document \FUDAh1082Wb应用基础 文件①)编错()查看0)插入)修改)文本①)命令)站点区)面口①)助0)新建文件吧 ˇ描入常用|布局表单文聿H应用程序Hash元索|收瘰夹 回回图 选择 回代码回分国设计标题:千标题女档 8c获取 http://ww nlnlnsz"http://www.w3.org/1999/xhtal"> <neta 人基丰元赛的位置,he 2 Finale.1 位健 设计备 a10x50x151新本地文件0 格式段落 样式2 C面属性列项日
当然，在开发过程中一定要善于利用工作区下方的属性面板，通过它可以为我们修改 HTML 元素属性带来很多方便，在代码或者设计面板中点击鼠标，程序会自动找到最近 的 HTML 元素（指鼠标点击的地方落在该元素的内部，即<a>….鼠标点击….</a>），然后 属性面板中会显示该元素的属性，比如我们在刚刚插入超链接的地方点击鼠标，那么属 性面板将显示超链接的属性： z 在浏览器中浏览 HTML 文档 在站点属性文件结构中选择要浏览的文件，按 F12 或者鼠标右键单击，选择在浏览器中 预览。如下图所示：