网页设计和制作案例教程-电子教案.pptVIP

（7）自动换行 在代码视图窗口中编辑代码时，常常会发现一行代码过长需要自动换行，操作方法是：单击“文档”工具栏中的【视图选项】按钮，然后在弹出的下拉菜单中单击【自动换行】命令。 快速标签编辑器的作用是让用户在文档窗口中直接对HTML标签进行编写，无需使用代码视图，就可以编辑单独的HTML标签 2．快速标签编辑器 快速标签编辑器有插入HTML、编辑标签和环绕标签三种状态，打开编辑器后，可以通过按“Ctrl+T”组合键进行状态切换，如图11-11为编辑标签状态，如图11-12为插入模式的快速标签编辑器。 为了方便手工编码，可以使用标签选择器和标签编辑器。使用标签选择器，可以在网页代码中插入新的标签；使用标签编辑器，可以对网页代码中的标签进行添加标签的属性或修改属性值。 3．使用标签选择器和标签编辑器 （1）使用标签选择器 （2）使用标签编辑器 打开“文件”面板组，然后切换到“代码片断”选项卡即可进入代码片断子面板。利用代码片断面可以减少代码编辑的工作量，在该面板中可以存储HTML、JavaScript的代码片断，这样当需要重复使用这些代码时，就可以很方便地重用这些代码，或者创建并存储新的代码片断。 4．代码片断 （1）插入代码片断 在代码片断子面板中选择需要插入的代码片断，例如“将竖线用作分隔线”，然后直接单击面板上的【插入】按钮，即可将代码片断插入至页面。 （2）自定义代码片断 如果自己编写一段代码，希望在其他页面中重复使用这一段代码，这时就可以使用代码片断子面板自定义代码片断，轻松实现代码的重用。 在Dreamweaver 8中打开代码视图窗口，然后单击【命令】→【清理HTML/XHTML】命令，这时会出现如图11-18所示的“清理HTML/XHTML”对话框，在其中可以选择优化方式。 5．代码优化 然后单击【确定】按钮，Dreamweaver 8会花一段时间进行优化处理。如果选择了“完成后显示记录”复选框，则处理结束时会弹出一个提示对话框，其中列出了修改的内容。 第11章　HTML语言 前面各章都是通过Dreamweaver 8提供的可视化设计环境来创建和编辑网页的，但是对于一个希望深入掌握网页制作、对代码严格控制的网页设计人员来讲，了解和掌握HTML语言是非常必要的。 课程引导 Dreamweaver 8是一种非常优秀的可视化网页制作软件，它也提供了丰富的源代码控件功能，可以让网页制作者随时查看、编辑HTML源代码，Dreamweaver 8的快速标签编辑器很好地协调了可视化操作和HTML源代码编写二者之间的关系。 知识技能目标 （1）掌握Dreamweaver 8的HTML源代码编辑功能。掌握快速标签编辑器、标签选择器和标签编辑器的使用方法。 （2）掌握常用的HTML标记的含义及其应用。 （3）学会手工修改HTML代码。 网页浏览效果展示 采用手工编写HTML代码制作的网页浏览效果如图11-1所示。 图11-1　　手工编写HTML代码所制作的网页预览效果 本章操作任务 制作一个表单网页，该表单网页中包括表单域、文本域、文本区域、单选按钮、复选框、列表/菜单等表单元素。 11.1 HTML简介 11.2 Dreamweaver 8的HTML源代码编辑功能 11.3 HTML标记 11.1　HTML简介 HTML语言用来描述Web页面文档的语言，它不是一种编程语言，而是一种页面描述性标记语言。通过各种标记描述不同的内容，说明标题、段落、字体、图像等网页元素在浏览器中的显示效果，浏览网页时，将根据HTML标记显示其内容。 11.1.1　HTML语言的特点 一个最基本网页的HTML代码格式如下： 11.1.2　HTML语言的语法结构 1．HTML基本结构 html head title网页标题/title /head body 网页主体内容 /body /html 在HTML网页文档的基本结构中主要包含以下几种标记： （1）HTML标记 （2）HEAD头部标记 （3）BODY主体标记 一个完整的HTML文档由各种网页元素与HTML标记组成的，网页元素指标题、段落、图像、表格、层等各种对象，标记的功能是逻辑性地描述网页的结构。 HTML文档应遵循以下语法规则。 2．HTML语言的语法规则 （1）HTML文档以纯文本形式存放，扩展名为“.html”或“.htm”。 （2）HTML文档中标记采用“”与“”作为分割字符。 （3）HTML标记及属性不区分大小