20 使用Dreamweaver构建HTML结构

Presentation on theme: "20 使用Dreamweaver构建HTML结构"— Presentation transcript:

1 20 使用Dreamweaver构建HTML结构
Web设计和开发的工具众多。有小巧灵便的EditPlus（高手的最爱），也有功能庞大的Visual Studio（.NET开发的必备工具），还有新兴时尚的Aptana（支持Web 2.0的排头兵）等。但是总体来说，Dreamweaver应该算是比较经典、口碑尚佳的Web设计、开发和管理工具。横向比较，Dreamweaver的优势在于它对HTML技术和CSS技术支持比较完善。不管是成熟的工作流、强大的可视化操作界面，还是性能卓越的站点管理表现，都让专业人士和业余好手爱不释手。 从本章开始，我们将从HTML结构、CSS样式、JavaScript脚本三个方面来探索Dreamweaver工具使用，挖掘Dreamweaver为初学者提供的最佳操作流程，以及Web设计和开发整合功能。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

2 20.1 可视化网页编辑工作流 评价Web设计和开发工具的优劣不妨参考两点：第一，功能是否完善；第二，操作是否方便（即易用性）。从功能角度来分析，目前Dreamweaver还不是最优秀的集成工具，特别是相关脚本和Ajax技术框架的支持方面稍显落后，但是它的工作流是非常棒的，操作起来非常方便。 习惯的也是最好的，当然不同的用户都有自己的喜好，我也无意驳斥。但是综合比较，Dreamweaver应该是Web设计和开发人员最佳操作工具。无论是可视化设计、编码环境、网站集成开发、Web拓展功能服务等方面都是非常优秀的。本节将就Dreamweaver的可视化环境操作流程进行详细讲解。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

3 20.1 可视化网页编辑工作流 20.1.1 可视化构建HTML结构
20.1 可视化网页编辑工作流 可视化构建HTML结构 启动Dreamweaver，按常规步骤新建网页文档，Dreamweaver会在提示对话框中要求选择文件类型、模板类型、文档类型等。这在一般Web编辑器中是没有的功能，可谓服务细致入微。新建的文档在可视化编辑环境中显示为一块空白区域。 20-1.html 整个结构是一个三行单列版式（包括页眉区域、主体区域和页脚区域），页眉区域插入两个不同级别的标题文本。主体区域又包括两个子模块，在第一个子模块中插入一个列表结构，在第二个子模块在你哦个插入一个数据表格结构。页脚区域插入一个段落文本。如果在无CSS技术支持的情况显示如图20.2所示（本示例在演示中打开了CSS布局背景功能，方法是选择【查看】|【可视化助理】|【CSS布局背景】菜单项）。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

4 20.1 可视化网页编辑工作流 20.1.1 可视化构建HTML结构
20.1 可视化网页编辑工作流 可视化构建HTML结构 启动Dreamweaver，按常规步骤新建网页文档，Dreamweaver会在提示对话框中要求选择文件类型、模板类型、文档类型等。这在一般Web编辑器中是没有的功能，可谓服务细致入微。新建的文档在可视化编辑环境中显示为一块空白区域。 20-1.html 整个结构是一个三行单列版式（包括页眉区域、主体区域和页脚区域），页眉区域插入两个不同级别的标题文本。主体区域又包括两个子模块，在第一个子模块中插入一个列表结构，在第二个子模块在你哦个插入一个数据表格结构。页脚区域插入一个段落文本。如果在无CSS技术支持的情况显示如图20.2所示（本示例在演示中打开了CSS布局背景功能，方法是选择【查看】|【可视化助理】|【CSS布局背景】菜单项）。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

5 20.1 可视化网页编辑工作流 20.1.1 可视化构建HTML结构
20.1 可视化网页编辑工作流 可视化构建HTML结构 如果你比较熟悉代码编码流程，可能会感觉这种操作有点生硬，甚至觉得比较麻烦。但是学习和操作来说都是熟能生巧，只有当你熟悉了Dreamweaver的可视化操作环境，才能够如鱼得水。不过对于高手来说，代码编辑也许会更直接、更爽快。但对于初级入门者来说，如果结合可视化操作和代码编辑两种操作环境，也许开发的速度会更快些，很多时候对于初级读者来说，面对编辑窗口却不知如何下手，此时利用Dreamweaver可以帮助你找到设计的思路和灵感，如果再结合【代码】视图，可以更精确的进行设计，避免可视化设计所带来的缺陷。当然，对于一位生手来说，建议从可视化操作开始入门绝对是一个不错的点子，也许冰冷的代码会让你望而生畏。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

6 20.1 可视化网页编辑工作流 20.1.1 可视化构建HTML结构
20.1 可视化网页编辑工作流 可视化构建HTML结构 第一步，选择【插入】|【布局对象】|【Div 标签】菜单命令，在打开的【插入Div标签】对话框中设置div元素的id属性值为wrap。 第二步，继续执行上一步操作，插入一个子标签，ID名为“header”，插入点为“在选定内容旁换行”，设计网页标题区域。 在选定内容旁换行：把div标签插入到当前标签内。 在标签之前：把div标签插入到当前标签前面。 在开始标签之后：把div标签插入到当前标签内，且紧邻该标签的开始标记后。例如，对于<div id="wrap"><div id="header"></div</div>结构来说，则应该插入到<div id="wrap">标记的后面。 在结束标签之前：把div标签插入到当前标签内，且紧邻该标签的结束标记前。例如，对于<div id="wrap"><div id="header"></div</div>结构来说，则应该插入到</div</div>标记的中间。 在标签之后：把div标签插入到当前标签的后面。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

7 20.1 可视化网页编辑工作流 20.1.1 可视化构建HTML结构
20.1 可视化网页编辑工作流 可视化构建HTML结构 第三步，选中<div id=“header”>标签内文本（默认为选中状态），输入“标题文本”字符串，然后在【格式】|【段落格式】子菜单中设置文本为一级标题。按Enter键换行，并输入“网页副标题”，选中文本然后在【格式】|【段落格式】子菜单中设置二级标题。 第五步，插入Div标签，设置id值为main，插入点为“在选定内容旁换行”。然后在编辑区域的当前高亮显示文本（选中的“此处显示 id "body" 的内容”字符串）中输入“栏目标题”文本，此时“栏目标题”文本将覆盖临时提示字符串“此处显示 id "body" 的内容”。并在【格式】|【段落文本】子菜单中设置文本为三级标题。 第六步，按Enter键换行，输入“列表项1”段落文本，回车继续输入“列表项2”段落文本。选中段落文本“列表项1”和“列表项2”，在【格式】|【列表】子菜单中中选择【项目列表】菜单命令，将段落文本转换为列表结构。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

8 20.1 可视化网页编辑工作流 20.1.1 可视化构建HTML结构
20.1 可视化网页编辑工作流 可视化构建HTML结构 第七步，继续插入Div标签，设置id值为sub，插入点位置为<div id="main">标签的后面。在<div id="sub">标签内输入“栏目标题”段落文本，并在【格式】|【段落文本】子菜单中设置文本为三级标题。 第八步，选择【插入】|【表格】菜单命令，在【表格】对话框中设置2行2列的数据表格，第1行为列标题（即【标题】设置为“顶部”），设置如图20.9所示。 第九步，在编辑区域的表格内输入数据信息。最后插入一个Div标签，设置id值为footer，插入点为<div id="body">标签的后面，并输入文本“页脚区域”，并在【格式】|【段落文本】子菜单中设置文本格式为【段落】选项。此时取消CSS布局背景视图， 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

9 20.1 可视化网页编辑工作流 20.1.2 梳理Dreamweaver的可视化操作思路 《网页制作与网站开发从入门到精通》配套视频
20.1 可视化网页编辑工作流 梳理Dreamweaver的可视化操作思路 Dreamweaver的所有功能和服务都可以在菜单中找到。文档操作在【文档】菜单中选择，插入网页对象可以在【插入】菜单中选择，而修改网页对象只能够在【修改】和【格式】菜单中选择，网站管理应该选择【站点】菜单。其他菜单都是服务性的菜单，正如网页的服务性栏目一样。 菜单操作是不方便的，所以Dreamweaver把常用插入操作集成到【插入】工具栏中，【插入】工具栏又根据对象类型分成不同的选项卡。 很多网页对象的设置在菜单和工具栏中是无法实现，因为它们的操作空间有限，于是凡是有关网页对象的属性设置操作都被集成到【属性检查器】面板中，该面板默认位于窗口底部。选中一个对象，即可快速在该面板中进行修改，虽然我们可以在【修改】和【格式】菜单中完成其中大部分操作，但是面板的直观性还是赢得了设计师的喜爱。 而对于一些内容庞杂或功能复杂的对象来说，简单的【属性检查器】面板也难以胜任，于是Dreamweaver又根据不同对象设置了很多侧栏面板，这些面板分别根据功能分门别类的组合在一起，显示在窗口的右侧（或在左侧）。 对于任何面板来说，我们都可以通过【窗口】菜单来关闭和开启它们，此时【窗口】菜单就相当于面板管理中心。快速梳理Dreamweaver的可视化操作界面，就这么简单，根据这样的思路来学习Dreamweaver你是不是感觉更加轻松呢。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

10 20.1 可视化网页编辑工作流 20.1.3 亲近Dreamweaver可视化设计环境 《网页制作与网站开发从入门到精通》配套视频
20.1 可视化网页编辑工作流 亲近Dreamweaver可视化设计环境 Dreamweaver的编辑窗口模拟了图形图像编辑器的设计风格，以坐标尺的形式显示当前设计的页面。所以读者应该熟悉视图操作中常用辅助工具，如标尺、辅助线、缩放工具等各种辅助视图工具。 【文档】工具栏 【查看】主菜单 状态拦 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

11 20.2 HTML代码编辑工作流 《网页制作与网站开发从入门到精通》配套视频 Dreamweaver同时提供了强大的代码编辑环境和服务功能：
第一，代码编辑与可视化编辑可以自由、双向无缝对接。也就是说，当你输入某个标签时，切换到【设计】视图（可视化操作环境）下，光标会自动定位到当前输入的标签对象上。 第二，Dreamweaver提供了很多专业编码服务功能。例如，代码输入智能提示、代码语法纠错、分色显示、格式化排版、自动封闭标签等，可以说Dreamweaver提供的功能是比较专业和完善的。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

12 20.2 HTML代码编辑工作流 20.2.1 代码编辑环境 《网页制作与网站开发从入门到精通》配套视频 【文档】工具栏 【编码】工具栏
代码编辑环境 【文档】工具栏 【编码】工具栏 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

13 20.2 HTML代码编辑工作流 20.2.2 代码输入智能化提示 《网页制作与网站开发从入门到精通》配套视频
代码输入智能化提示 作为一款Web设计和开发工具，代码输入智能化提示应该是最基本、最核心的服务功能了。所谓智能化提示就是Web编辑工具能够实时侦测用户的输入，并根据输入信息的线索，即时准确提供相应信息的下拉提示，这对于关键字输入不准确或者容易忘记所要输入的关键字具有重要提醒和助选功能，免去了你再翻阅相关参考手册的烦恼。 Dreamweaver的智能化提示赶不上Visual Studio，但是在支持HTML、CSS语言智能化提示方面功能还是比较强大的。Dreamweaver的智能化提示需要在【代码】视图环境下才可以实现。 Dreamweaver还提供了个性化定义智能提示的功能。选择【编辑】|【首选参数】命令，打开【首选参数】对话框，在左侧【分类】列表中选择【代码提示】列表项，然后在右侧设置个性化智能提示方式 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

14 20.2 HTML代码编辑工作流 20.2.3 代码格式化与排版（ 20-3.html） 《网页制作与网站开发从入门到精通》配套视频
Dreamweaver也为用户提供了自动缩进输入的便利，当缩进输入子元素时，光标就以缩进位置为起始点进行输入，即使换行输入也会自动缩进到子元素的缩进位置进行显示。这在一定程度上避免用户每输入一行代码都需要按空格或Tab键进行缩进排版。当然这样也存在一个问题：当封闭上层结构，或者重新输入上一层结构时就会按空格键凸出光标位置。例如，对于下面未封闭的结构标签，当换行封闭时，需要按空格键慢慢来插入结束标记，这样反倒很繁琐。如果不希望Dreamweaver自动缩进，可以在【文档】工具栏的【视图选项】下拉菜单中取消勾选【自动缩进】选项。 另外，Dreamweaver也提供了格式化排版功能，只需要轻松单击【格式化源代码】按钮，系统会自动按预定义格式排版页面源代码（自动排版HTML和CSS源代码的缩进格式），对于其他脚本则暂时还不支持。该项功能对于整理编码格式混乱的文档来说非常实用。 如果是块状元素、列表元素、数据表元素，则每个元素将占据一行。 如果是行内元素、超链接、图像、文本等都将在一行内显示。 如果块状元素包含行内元素，则不进行缩排，都在一行内显示。如果行内元素包含块状元素，则块状元素单独一行显示，但是不进行缩排。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

15 20.2 HTML代码编辑工作流 20.2.4 代码分色显示 《网页制作与网站开发从入门到精通》配套视频
代码分色显示 Dreamweaver不仅提供代码分色显示功能，还可以允许用户进行定制代码分色显示样式。选择【编辑】|【首选参数】命令，打开【首选参数】对话框，在左侧【分类】列表中选择【代码颜色】项，然后在【文档类型】列表框中选择一种类型（如图20.28所示），如“HTML”选项。 单击【编辑颜色方案】按钮，打开【编辑HTML颜色编辑方案】对话框（如图20.29所示）。在【样式】列表框中可以分别为每一类标签置前景色和背景色，以及是否加粗、斜体或者下划线。在右下角的【预览】文本区域可以观看效果。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

16 20.2 HTML代码编辑工作流 20.2.5 选择代码（ 20-4.html） 《网页制作与网站开发从入门到精通》配套视频
Dreamweaver在代码选择操作中所提供的功能比较实用，可操作的途径也很多。首先，请记住几个快捷键，这几个快捷键在代码编辑中使用频率仅次于复制（Ctrl+C）、剪切（Ctrl+X）和粘贴（Ctrl+V）快捷键。 Ctrl+[：选择父标签。操作方法是：把光标置于标签内部，按Ctrl+[组合键即可选中该标签，以及包含的所有子对象和文本内容。如果连续按Ctrl+[组合键可以在当前选择的标签基础上选择上一层标签。利用这种方法，我们可以检查文档结构是否完整，嵌套是否正确。 Ctrl+]：选择子标签。操作方法是：在【设计】视图下，选择一个包含子对象的元素，然后按Ctrl+]组合键，将选中第一个子对象。可以连续按该组合键，直到最里层的文本。 选择操作还可以借助菜单命令来实现：选择【编辑】|【选择父标签】或【选择子标签】命令即可。 另外一个比较实用的方法是利用【标签选择器】栏来直观选择某层结构（如图20.30所示）。选择时在对应结构元素上单击即可。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

17 20.2 HTML代码编辑工作流 20.2.5 选择代码 《网页制作与网站开发从入门到精通》配套视频
选择代码 如果在【设计】视图环境下，单击选中某个对象，切换到【代码】视图环境下，你会发现所选对象的源代码被自动选择，反之依然。这样我们就可以在【设计】视图和【代码】视图之间进行自由切换，从而加快开发的速度。如果屏幕比较大，或者内容比较单一，使用【拆分】视图可以实现在一个编辑窗口中同时查看源代码和可视化效果，具体操作就不再演示。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

18 20.2 HTML代码编辑工作流 20.2.6 快速编辑代码 《网页制作与网站开发从入门到精通》配套视频
快速编辑代码 Dreamweaver提供了快速标签编辑器功能，它可以允许用户在不同模式下插入元素、编辑元素或嵌套元素。实际上它就是代码编辑的一种快捷方式，快速标签编辑器可以在【设计】视图和【代码】视图两种环境中工作，不过在【设计】视图下显得更为灵活，因为它可以弥补可视化操作的缺陷，直接使用代码来编辑可视化对象。 例如，在【代码】视图环境下，先快速选中某个标签，按Ctrl+T组合键将暂时进入环绕编辑模式中（如图20.31所示），在快速标签编辑模式下，文档处于被锁定状态。你也可以选择【修改】|【快速标签编辑器】命令，快速进入环绕编辑模式中。 在快速标签编辑文本框中输入div包含元素，并为包含元素定义属性。输入完毕，在快速标签编辑文本框外单击，即可快速切换到文档编辑状态，此时插入的元素自动嵌入到文档中，并包含选中的代码。 输入完毕，单击其他区域，关闭快速标签编辑器，输入的HTML代码就被添加到插入点所在位置。如果你只输入起始标记，而未输入结束标记，则Dreamweaver会自动补上结束标记，避免结构错误。 如果在【设计】视图中选中一个元素，要完整选择元素的标签，包括起始标签、结束标签、标签包含的内容，按Ctrl+T组合键将显示快速标签编辑文本框，这时自动进入编辑模式，编辑选中元素的属性和名称。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

19 20.2 HTML代码编辑工作流 20.2.6 快速编辑代码 《网页制作与网站开发从入门到精通》配套视频
快速编辑代码 如果在【设计】视图中仅选中文本内容，而未选择任何标签，那么按Ctrl+T组合键将显示快速标签编辑文本框，这时显示为环绕模式，即为该文本增加一个包含框。显然环绕模式没有在【代码】视图下功能强大。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

20 20.2 HTML代码编辑工作流 20.2.7 代码检查和修改 《网页制作与网站开发从入门到精通》配套视频
代码检查和修改 在手工输入代码时，有两种错误发生频率比较大：一是结构嵌套混乱（也称标记交迭），二是遗漏结束标记（也称未关闭标签）。不过Dreamweaver能够侦测到代码输入中的这种无效标记并进行提示。例如，在下面一行代码中，</h1>与</span>就发生交迭错误。 <h1><span>标题文本</h1></span> 这时在【代码】视图环境中，如果单击选中【编码】工具栏中的【高亮显示无效代码】按钮（ ），Dreamweaver会高亮显示这种标记交迭的错误（如图20.34所示）。如果切换到【设计】视图，你可以看到文档中包含无效的代码。在这两种视图的任一种视图中选择这些代码，属性检查器都会显示代码无效的原因，以及如何进行修正的信息。 另一类常见错误就是忘记关闭标签，在【代码】视图下Dreamweaver能够自动侦测到这种错误，根据提示我们可以快速进行修改。Dreamweaver也提供了一个自动修改此类问题的辅助功能，当需要开启。方法是：选择【编辑】|【首选参数】菜单命令，在打开的【首选参数】对话框左侧的列表框中选择【代码改写】项，最后在右侧勾选对应的代码改写项。勾选对应选项之后，如果再次打开含有无效标记的文档，则系统会自动修改并进行提示。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

21 20.2 HTML代码编辑工作流 20.2.7 代码检查和修改 《网页制作与网站开发从入门到精通》配套视频
代码检查和修改 根据提示我们可以快速进行修改。Dreamweaver也提供了一个自动修改此类问题的辅助功能，当需要开启。方法是：选择【编辑】|【首选参数】菜单命令，在打开的【首选参数】对话框左侧的列表框中选择【代码改写】项，最后在右侧勾选对应的代码改写项。 勾选对应选项之后，如果再次打开含有无效标记的文档，则系统会自动修改并进行提示。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（

22 20.2 HTML代码编辑工作流 20.2.8 代码验证服务 《网页制作与网站开发从入门到精通》配套视频
代码验证服务 除了检测代码输入中是否存在无效标记外，Dreamweaver还提供了更体贴的服务，即验证代码是否合法，所谓合法就是所输入的代码是否符合HTML语法规范，元素名和属性名是否符合标准等。上节曾经提及Dreamweaver的代码检查功能无法识别非法的HTML标签问题，现在使用验证服务可以快速帮你解决这些更加专业性的问题。 在【文档】工具栏中单击【验证标记】按钮（ ），从弹出的下拉菜单中选择【验证当前文档】项。你也可以选择【文件】|【验证】|【标记】菜单命令执行相同的操作。 20-7.html 、20-8.html、 20-9.html 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（