网页相关设计和制作案例教程电子教案第21单元

1、网页相关设计和制作案例教程电子 教案第21单元 第第1111章章HTMLHTML语言语言 前面各章都是通过前面各章都是通过Dreamweaver 8Dreamweaver 8提供提供 的可视化设计环境来创建和编辑网页的，但的可视化设计环境来创建和编辑网页的，但 是对于一个希望深入掌握网页制作、对代码是对于一个希望深入掌握网页制作、对代码 严格控制的网页设计人员来讲，了解和掌握严格控制的网页设计人员来讲，了解和掌握 HTMLHTML语言是非常必要的。语言是非常必要的。 l 课程引导课程引导 网页相关设计和制作案例教程电子 教案第21单元 Dreamweaver 8 Dreamweaver 8是一

2、种非常优秀的可视是一种非常优秀的可视 化网页制作软件，它也提供了丰富的源代码化网页制作软件，它也提供了丰富的源代码 控件功能，可以让网页制作者随时查看、编控件功能，可以让网页制作者随时查看、编 辑辑HTMLHTML源代码，源代码，Dreamweaver 8Dreamweaver 8的快速标签的快速标签 编辑器很好地协调了可视化操作和编辑器很好地协调了可视化操作和HTMLHTML源代源代 码编写二者之间的关系。码编写二者之间的关系。 网页相关设计和制作案例教程电子 教案第21单元 l 知识技能目标知识技能目标 （1 1）掌握）掌握Dreamweaver 8Dreamweaver 8的的HTMLH

3、TML源代码编源代码编 辑功能。掌握快速标签编辑器、标签选择器辑功能。掌握快速标签编辑器、标签选择器 和标签编辑器的使用方法。和标签编辑器的使用方法。 （2 2）掌握常用的）掌握常用的HTMLHTML标记的含义及其应标记的含义及其应 用。用。 （3 3）学会手工修改）学会手工修改HTMLHTML代码。代码。 网页相关设计和制作案例教程电子 教案第21单元 l 网页浏览效果展示网页浏览效果展示 采用手工编写采用手工编写HTMLHTML代码制作的网页浏览代码制作的网页浏览 效果如图效果如图11-111-1所示。所示。 图图11-1手工编写手工编写HTML代码所制作的网页预览效果代码所制作的网页预览

4、效果 网页相关设计和制作案例教程电子 教案第21单元 l 本章操作任务本章操作任务 制作一个表单网页，该表单网页中包括制作一个表单网页，该表单网页中包括 表单域、文本域、文本区域、单选按钮、复表单域、文本域、文本区域、单选按钮、复 选框、列表选框、列表/ /菜单等表单元素。菜单等表单元素。 网页相关设计和制作案例教程电子 教案第21单元 11.111.1HTMLHTML简介简介 11.211.2Dreamweaver 8Dreamweaver 8的的HTMLHTML源代码编辑功能源代码编辑功能 11.311.3HTMLHTML标记标记 网页相关设计和制作案例教程电子 教案第21单元 HTML

5、HTML语言用来描述语言用来描述WebWeb页面文档的语言，页面文档的语言， 它不是一种编程语言，而是一种页面描述性它不是一种编程语言，而是一种页面描述性 标记语言。通过各种标记描述不同的内容，标记语言。通过各种标记描述不同的内容， 说明标题、段落、字体、图像等网页元素在说明标题、段落、字体、图像等网页元素在 浏览器中的显示效果，浏览网页时，将根据浏览器中的显示效果，浏览网页时，将根据 HTMLHTML标记显示其内容。标记显示其内容。 网页相关设计和制作案例教程电子 教案第21单元 一个最基本网页的一个最基本网页的HTMLHTML代码格式如下：代码格式如下： 网页标题网页标题 网页主体内容网页

6、主体内容 网页相关设计和制作案例教程电子 教案第21单元 在在HTMLHTML网页文档的基本结构中主要包含网页文档的基本结构中主要包含 以下几种标记：以下几种标记： （1 1）HTMLHTML标记标记 （2 2）HEADHEAD头部标记头部标记 （3 3）BODYBODY主体标记主体标记 网页相关设计和制作案例教程电子 教案第21单元 一个完整的一个完整的HTMLHTML文档由各种网页元素与文档由各种网页元素与 HTMLHTML标记组成的，网页元素指标题、段落、标记组成的，网页元素指标题、段落、 图像、表格、层等各种对象，标记的功能是图像、表格、层等各种对象，标记的功能是 逻辑性地描述网页的结

7、构。逻辑性地描述网页的结构。 HTMLHTML文档应遵循以下语法规则。文档应遵循以下语法规则。 网页相关设计和制作案例教程电子 教案第21单元 （1 1）HTMLHTML文档以纯文本形式存放，扩展文档以纯文本形式存放，扩展 名为名为“.html.html”或或“.htm.htm”。 （2 2）HTMLHTML文档中标记采用文档中标记采用“ ”作作 为分割字符。为分割字符。 （3 3）HTMLHTML标记及属性不区分大小写，例标记及属性不区分大小写，例 如如和和是相同的标记。是相同的标记。 网页相关设计和制作案例教程电子 教案第21单元 （4 4）大多数）大多数HTMLHTML标记可以嵌套，但不

8、能标记可以嵌套，但不能 交叉，各层标记是全包容关系。交叉，各层标记是全包容关系。 （5 5）HTMLHTML文档一行可以书写多个标记，文档一行可以书写多个标记， 一个标记也可以分多行书写，不用任何续行一个标记也可以分多行书写，不用任何续行 符号，显示效果相同。符号，显示效果相同。 网页相关设计和制作案例教程电子 教案第21单元 （6 6）HTMLHTML源代码中的换行、回车符和多源代码中的换行、回车符和多 个连续空格在浏览时都是无效的，浏览网页个连续空格在浏览时都是无效的，浏览网页 时，会自动忽略文档中的换行符、回车符、时，会自动忽略文档中的换行符、回车符、 空格，所以在文档中输入的回车符，并

9、不意空格，所以在文档中输入的回车符，并不意 味着在浏览器中将看到不同的段落。味着在浏览器中将看到不同的段落。 网页相关设计和制作案例教程电子 教案第21单元 （7 7）网页中所有的显示内容都应该受限）网页中所有的显示内容都应该受限 于一个或多个标记，不能存在游离于标记之于一个或多个标记，不能存在游离于标记之 外的文字或图像等，以免产生错误。外的文字或图像等，以免产生错误。 （8 8）对于浏览器不能分辨的标记可以忽）对于浏览器不能分辨的标记可以忽 略，不显示其中的对象。略，不显示其中的对象。 网页相关设计和制作案例教程电子 教案第21单元 在查看在查看HTMLHTML源代码或编写网页时，经常源代

10、码或编写网页时，经常 会遇到三种格式的会遇到三种格式的HTMLHTML标记。标记。 （1 1）不带属性的双标记：）不带属性的双标记： 内内 容容/ （2 2）带有属性的双标记：）带有属性的双标记： 网页对象网页对象/ （3 3）单标记：）单标记： / 网页相关设计和制作案例教程电子 教案第21单元 Dreamweaver 8 Dreamweaver 8的编辑环境中提供了三的编辑环境中提供了三 种视图模式：种视图模式：“代码代码”、“拆分拆分”、“设设 计计”，这三种视图都可以通过单击，这三种视图都可以通过单击“文档文档” 工具栏上左边的按钮进行快速切换。工具栏上左边的按钮进行快速切换。 网页相

11、关设计和制作案例教程电子 教案第21单元 （1 1）在站点）在站点“长沙世界之窗长沙世界之窗”下创建文件下创建文件 夹夹“12HTML12HTML语言语言”，在，在“文件文件”面板中单击面板中单击 选中刚才新建的子文件夹选中刚才新建的子文件夹“12HTML12HTML语言语言”， 单击鼠标右键，在弹出的快捷菜单中单击单击鼠标右键，在弹出的快捷菜单中单击 【新建文件新建文件】，在子文件夹，在子文件夹“12HTML12HTML语言语言” 中便会创建一个默认名称为中便会创建一个默认名称为 “untitled.htmluntitled.html”的网页文档。的网页文档。 网页相关设计和制作案例教程电子

12、 教案第21单元 （2 2）将新建的网页重命名为）将新建的网页重命名为“12.html12.html”， 在在“文件文件”面板中双击该名称打开该网页。面板中双击该名称打开该网页。 （3 3）在）在“文档文档”工具栏中单击工具栏中单击【代码代码】 按钮，切换到代码视图的编辑窗口。按钮，切换到代码视图的编辑窗口。 网页相关设计和制作案例教程电子 教案第21单元 （4 4）在代码窗口中的标题位置输入新的）在代码窗口中的标题位置输入新的 网页标题：网页标题：“公司部门公司部门”，并按，并按 “Ctrl+EnterCtrl+Enter”组合键，组合键，“文档文档”面板中的面板中的 标题文本框中的标题也同

13、步变化。标题文本框中的标题也同步变化。 网页相关设计和制作案例教程电子 教案第21单元 （5 5）在代码窗口中）在代码窗口中与与之间之间 输入文字输入文字“长沙世界之窗实现总经理领导下长沙世界之窗实现总经理领导下 的部门经理负责制，管理上采用垂直领导、的部门经理负责制，管理上采用垂直领导、 分层管理、逐级负责。分层管理、逐级负责。”，接着输入，接着输入“br /” 网页相关设计和制作案例教程电子 教案第21单元 （6 6）回车换行，然后输入）回车换行，然后输入“img height=303 /”。 （7 7）保存该网页文档，且在浏览器中预）保存该网页文档，且在浏览器中预 览该网页。览该网页。

14、网页相关设计和制作案例教程电子 教案第21单元 代码视图会以不同的颜色显示代码视图会以不同的颜色显示HTMLHTML源代源代 码，以帮助用户区分各种标签，同时用户也码，以帮助用户区分各种标签，同时用户也 可以自己指定标签或代码的显示颜色。可以自己指定标签或代码的显示颜色。 利用利用“编码编码”工具栏可以实现以下操作：工具栏可以实现以下操作： 网页相关设计和制作案例教程电子 教案第21单元 （1 1）代码的折叠）代码的折叠 对于代码非常长的网页，可以对部分代对于代码非常长的网页，可以对部分代 码折叠起来。先选择多行代码，然后单击所码折叠起来。先选择多行代码，然后单击所 选代码左侧的折叠按钮或者单

15、击选代码左侧的折叠按钮或者单击“编码编码”工工 具栏中的具栏中的【折叠所选折叠所选】按钮即可。如果按住按钮即可。如果按住 “AltAlt”键的同时，单击键的同时，单击【折叠所选折叠所选】按钮，按钮， 则折叠没有选中的代码。则折叠没有选中的代码。 网页相关设计和制作案例教程电子 教案第21单元 利用利用“编码编码”工具栏上的工具栏上的【折叠整个标折叠整个标 签签】按钮可以对某一个标签首尾对应的区域按钮可以对某一个标签首尾对应的区域 进行折叠，且无需选择代码。方法是：将光进行折叠，且无需选择代码。方法是：将光 标定位在需要折叠的标签中，然后单击标定位在需要折叠的标签中，然后单击【折折 叠整个标签叠

16、整个标签】按钮，那么光标所处位置的标按钮，那么光标所处位置的标 签区域被折叠。签区域被折叠。 网页相关设计和制作案例教程电子 教案第21单元 如果按住如果按住“AltAlt”键的同时，单击键的同时，单击【折叠折叠 整个标签整个标签】按钮，则会折叠外部的标签。按钮，则会折叠外部的标签。 打开部分已折叠的代码，只要单击列左侧的打开部分已折叠的代码，只要单击列左侧的 展开按钮即可。如果要全部展开所有被折叠展开按钮即可。如果要全部展开所有被折叠 的代码，单击的代码，单击“编码编码”工具栏中的工具栏中的【扩展全扩展全 部部】按钮即可。按钮即可。 网页相关设计和制作案例教程电子 教案第21单元 （2 2）

17、选择父标签）选择父标签 代码标签之间一般都存在着嵌套关系，代码标签之间一般都存在着嵌套关系， 如何快速查找某代码标签是属于另外哪一个如何快速查找某代码标签是属于另外哪一个 代码标签呢？可以直接将光标置于该标签代代码标签呢？可以直接将光标置于该标签代 码中，然后单击码中，然后单击【选择父标签选择父标签】按钮即可。按钮即可。 可以单击多次依次选择父标签。可以单击多次依次选择父标签。 网页相关设计和制作案例教程电子 教案第21单元 （3 3）代码的注释）代码的注释 先选择需要注释的代码行，然后单击先选择需要注释的代码行，然后单击 “编码编码”工具栏中的工具栏中的【应用注释应用注释】按钮，再按钮，再

18、在弹出菜单中选择一种注释方法即可。在弹出菜单中选择一种注释方法即可。 要取消注释，先选择要取消注释的代码行，要取消注释，先选择要取消注释的代码行， 然后单击然后单击“编码编码”工具栏中的工具栏中的【删除注释删除注释】 按钮即可。按钮即可。 网页相关设计和制作案例教程电子 教案第21单元 （4 4）环绕标签）环绕标签 环绕标签的主要功能是防止写标签时忽环绕标签的主要功能是防止写标签时忽 略结束标签。其操作方法是：先选择内容，略结束标签。其操作方法是：先选择内容， 然后单击然后单击【环绕标签环绕标签】按钮，从下拉列表框按钮，从下拉列表框 中选择或者直接输入相应代码，在选择内容中选择或者直接输入相应

19、代码，在选择内容 外围会自动添加完整的开始和结束标签。外围会自动添加完整的开始和结束标签。 网页相关设计和制作案例教程电子 教案第21单元 （5 5）代码的缩进与凸出）代码的缩进与凸出 先选择一段代码，然后按先选择一段代码，然后按“TabTab”键或单键或单 击击“编码编码”工具栏中的工具栏中的【缩进代码缩进代码】按钮，按钮， 即可实现代码的缩进。对于已缩进的代码，即可实现代码的缩进。对于已缩进的代码， 如果想要凸出，可按如果想要凸出，可按“Shift+TabShift+Tab”组合键或组合键或 者单击者单击“编码编码”工具栏中的工具栏中的【凸出代码凸出代码】按按 钮实现代码的凸出。钮实现代码

20、的凸出。 网页相关设计和制作案例教程电子 教案第21单元 （6 6）显示）显示/ /隐藏行号隐藏行号 在代码视图窗口中对每个在代码视图窗口中对每个HTMLHTML语句显示语句显示 其行号，以便于定位。操作方法是：在代码其行号，以便于定位。操作方法是：在代码 视图窗口单击视图窗口单击“编码编码”工具栏中的工具栏中的【行号行号】 按钮，或者在按钮，或者在“文档文档”工具栏中单击工具栏中单击【视图视图 选项选项】按钮，然后在弹出的下拉菜单中单击按钮，然后在弹出的下拉菜单中单击 【行数行数】命令即可显示或隐藏命令即可显示或隐藏“行号行号”。 网页相关设计和制作案例教程电子 教案第21单元 （7 7）自

21、动换行）自动换行 在代码视图窗口中编辑代码时，常常会在代码视图窗口中编辑代码时，常常会 发现一行代码过长需要自动换行，操作方法发现一行代码过长需要自动换行，操作方法 是：单击是：单击“文档文档”工具栏中的工具栏中的【视图选项视图选项】 按钮，然后在弹出的下拉菜单中单击按钮，然后在弹出的下拉菜单中单击【自动自动 换行换行】命令。命令。 网页相关设计和制作案例教程电子 教案第21单元 快速标签编辑器的作用是让用户在文档快速标签编辑器的作用是让用户在文档 窗口中直接对窗口中直接对HTMLHTML标签进行编写，无需使用标签进行编写，无需使用 代码视图，就可以编辑单独的代码视图，就可以编辑单独的HTML

22、HTML标签标签 网页相关设计和制作案例教程电子 教案第21单元 快速标签编辑器有插入快速标签编辑器有插入HTMLHTML、编辑标签、编辑标签 和环绕标签三种状态，打开编辑器后，可以和环绕标签三种状态，打开编辑器后，可以 通过按通过按“Ctrl+TCtrl+T”组合键进行状态切换，如组合键进行状态切换，如 图图11-1111-11为编辑标签状态，如图为编辑标签状态，如图11-1211-12为插入为插入 模式的快速标签编辑器。模式的快速标签编辑器。 网页相关设计和制作案例教程电子 教案第21单元 为了方便手工编码，可以使用标签选择为了方便手工编码，可以使用标签选择 器和标签编辑器。使用标签选择器，可以在器和标签编辑器。使用标签选择器，可以在 网页代码中插入新的标签；使用标签编辑器，网页代码中插入新的标签；使用标签编辑器， 可以对网页代码中的标签进行添加标签的属可以对网页代码中的标签进行添加标签的属 性或修改属性值。性或修改属性值。 网页相关设计和制作案例教程电子 教案第21单元 （1 1）使用标签选择器）使用标签选择器 （2 2）使用标签编辑器）使用标签编辑器 网页相关设计和制作案例教程电子 教案第21单元 打开打开“文件文件”面板组，然后切换到面板组，然后切换到“代代 码片断码片断”选项卡即可进入代码片断子