网页设计与制作案例教程-电子教案第21单元.ppt

第11章 HTML语言 前面各章都是通过过Dreamweaver 8提供 的可视视化设计环设计环 境来创创建和编辑编辑 网页页的， 但是对对于一个希望深入掌握网页页制作、对对代 码严码严 格控制的网页设计页设计 人员员来讲讲，了解和 掌握HTML语语言是非常必要的。 l 课程引导 Dreamweaver 8是一种非常优优秀的可视视 化网页页制作软软件，它也提供了丰富的源代码码 控件功能，可以让让网页页制作者随时查时查 看、 编辑编辑 HTML源代码码，Dreamweaver 8的快速标标 签编辑签编辑 器很好地协调协调 了可视视化操作和HTML 源代码编码编 写二者之间间的关系。 l 知识技能目标 （1）掌握Dreamweaver 8的HTML源代码编码编 辑辑功能。掌握快速标签编辑标签编辑 器、标签选择标签选择 器和标签编辑标签编辑 器的使用方法。 （2）掌握常用的HTML标记标记 的含义义及其应应 用。 （3）学会手工修改HTML代码码。 l 网页浏览效果展示 采用手工编编写HTML代码码制作的网页浏页浏 览览效果如图图11-1所示。 图图11-1 手工编编写HTML代码码所制作的网页预览页预览 效果 l 本章操作任务 制作一个表单单网页页，该该表单单网页页中包 括表单单域、文本域、文本区域、单选单选 按钮钮 、复选选框、列表/菜单单等表单单元素。 11.1HTML简介 11.2Dreamweaver 8的HTML源代码编辑功能 11.3HTML标记 1 11 1.1 .1 HTMLHTML简介简介 HTML语语言用来描述Web页页面文档的语语言 ，它不是一种编编程语语言，而是一种页页面描述 性标记语标记语 言。通过过各种标记标记 描述不同的内 容，说说明标题标题 、段落、字体、图图像等网页页 元素在浏览浏览 器中的显显示效果，浏览浏览 网页时页时 ，将根据HTML标记显标记显 示其内容。 11.1.111.1.1 HTMLHTML语言的特点语言的特点 一个最基本网页页的HTML代码码格式如下： 11.1.211.1.2 HTMLHTML语言的语法结构语言的语法结构 1 1HTMLHTML基本结构基本结构 网页标题页标题 网页页主体内容 在HTML网页页文档的基本结结构中主要包含 以下几种标记标记 ： （1）HTML标记标记 （2）HEAD头头部标记标记 （3）BODY主体标记标记 一个完整的HTML文档由各种网页页元素与 HTML标记组标记组 成的，网页页元素指标题标题 、段落 、图图像、表格、层层等各种对对象，标记标记 的功 能是逻辑逻辑 性地描述网页页的结结构。 HTML文档应应遵循以下语语法规则规则 。 2 2HTMLHTML语言的语法规则语言的语法规则 （1）HTML文档以纯纯文本形式存放，扩扩展 名为为“.html”或“.htm”。 （2）HTML文档中标记标记 采用“” 作为为分割字符。 （3）HTML标记标记 及属性不区分大小写，例 如和是相同的标记标记 。 （4）大多数HTML标记标记 可以嵌套，但不能 交叉，各层标记层标记 是全包容关系。 （5）HTML文档一行可以书书写多个标记标记 ， 一个标记标记 也可以分多行书书写，不用任何续续 行符号，显显示效果相同。 （6）HTML源代码码中的换换行、回车车符和多 个连续连续 空格在浏览时浏览时 都是无效的，浏览浏览 网 页时页时 ，会自动动忽略文档中的换换行符、回车车 符、空格，所以在文档中输输入的回车车符，并 不意味着在浏览浏览 器中将看到不同的段落。 （7）网页页中所有的显显示内容都应该应该 受限 于一个或多个标记标记 ，不能存在游离于标记标记 之外的文字或图图像等，以免产产生错误错误 。 （8）对对于浏览浏览 器不能分辨的标记标记 可以忽 略，不显显示其中的对对象。 在查查看HTML源代码码或编编写网页时页时 ，经经常 会遇到三种格式的HTML标记标记 。 （1）不带带属性的双标记标记 ：内 容 （2）带带有属性的双标记标记 ：网页对页对 象 （3）单标记单标记 ： 3 3HTMLHTML标记的类型标记的类型 11.211.2 Dreamweaver 8Dreamweaver 8的的HTMLHTML源代码编辑功能源代码编辑功能 Dreamweaver 8的编辑环编辑环 境中提供了三 种视图视图 模式：“代码码”、“拆分”、“设设 计计”，这这三种视图视图 都可以通过单击过单击 “文档 ”工具栏栏上左边边的按钮进钮进 行快速切换换。 11.2.111.2.1 Dreamweaver 8Dreamweaver 8的三种视图模式的三种视图模式 （1）在站点“长长沙世界之窗”下创创建文件 夹夹“12HTML语语言”，在“文件”面板中单单 击选击选 中刚刚才新建的子文件夹夹“12HTML语语言 ”，单击单击 鼠标标右键键，在弹弹出的快捷菜单单中 单击单击 【新建文件】，在子文件夹夹“12HTML 语语言”中便会创创建一个默认认名称为为 “untitled.html”的网页页文档。 11.2.211.2.2 利用代码视图制作 利用代码视图制作HTMLHTML网页网页 （2）将新建的网页页重命名为为“12.html” ，在“文件”面板中双击该击该 名称打开该该网 页页。 （3）在“文档”工具栏栏中单击单击 【代码码】 按钮钮，切换换到代码视图码视图 的编辑编辑 窗口。 （4）在代码码窗口中的标题标题 位置输输入新的 网页标题页标题 ：“公司部门门”，并按 “Ctrl+Enter”组组合键键，“文档”面板中的 标题标题 文本框中的标题标题 也同步变变化。 （5）在代码码窗口中与之间间 输输入文字“长长沙世界之窗实现总经实现总经 理领导领导 下的部门经门经 理负责负责 制，管理上采用垂直领领 导导、分层层管理、逐级负责级负责 。”，接着输输入 “” （6）回车换车换 行，然后输输入“”。 （7）保存该该网页页文档，且在浏览浏览 器中预预 览该览该 网页页。 代码视图码视图 会以不同的颜颜色显显示HTML源 代码码，以帮助用户户区分各种标签标签 ，同时时用 户户也可以自己指定标签标签 或代码码的显显示颜颜色 。 利用“编码编码 ”工具栏栏可以实现实现 以下操作： 11.2.311.2.3 Dreamweaver 8Dreamweaver 8的代码编辑工具的代码编辑工具 1 1代码视图代码视图 （1）代码码的折叠 对对于代码码非常长长的网页页，可以对对部分 代码码折叠起来。先选择选择 多行代码码，然后单单 击击所选选代码码左侧侧的折叠按钮钮或者单击单击 “编编 码码”工具栏栏中的【折叠所选选】按钮钮即可。 如果按住“Alt”键键的同时时，单击单击 【折叠所 选选】按钮钮，则则折叠没有选选中的代码码。 利用“编码编码 ”工具栏栏上的【折叠整个标标 签签】按钮钮可以对对某一个标签标签 首尾对应对应 的区 域进进行折叠，且无需选择选择 代码码。方法是： 将光标标定位在需要折叠的标签标签 中，然后单单 击击【折叠整个标签标签 】按钮钮，那么光标标所处处 位置的标签标签 区域被折叠。 如果按住“Alt”键键的同时时，单击单击 【折 叠整个标签标签 】按钮钮，则则会折叠外部的标签标签 。 打开部分已折叠的代码码，只要单击单击 列左侧侧 的展开按钮钮即可。如果要全部展开所有被折 叠的代码码，单击单击 “编码编码 ”工具栏栏中的【扩扩 展全部】按钮钮即可。 （2）选择选择 父标签标签 代码标签码标签 之间间一般都存在着嵌套关系 ，如何快速查查找某代码标签码标签 是属于另外哪 一个代码标签码标签 呢？可以直接将光标标置于该该 标签标签 代码码中，然后单击单击 【选择选择 父标签标签 】按 钮钮即可。可以单击单击 多次依次选择选择 父标签标签 。 （3）代码码的注释释 先选择选择 需要注释释的代码码行，然后单击单击 “编码编码 ”工具栏栏中的【应应用注释释】按钮钮， 再在弹弹出菜单单中选择选择 一种注释释方法即可。 要取消注释释，先选择选择 要取消注释释的代码码行 ，然后单击单击 “编码编码 ”工具栏栏中的【删删除注 释释】按钮钮即可。 （4）环绕标签环绕标签 环绕标签环绕标签 的主要功能是防止写标签时标签时 忽略结结束标签标签 。其操作方法是：先选择选择 内 容，然后单击单击 【环绕标签环绕标签 】按钮钮，从下拉 列表框中选择选择 或者直接输输入相应应代码码，在 选择选择 内容外围围会自动动添加完整的开始和结结 束标签标签 。 （5）代码码的缩进缩进 与凸出 先选择选择 一段代码码，然后按“Tab”键键或 单击单击 “编码编码 ”工具栏栏中的【缩进缩进 代码码】按 钮钮，即可实现实现 代码码的缩进缩进 。对对于已缩进缩进 的 代码码，如果想要凸出，可按“Shift+Tab” 组组合键键或者单击单击 “编码编码 ”工具栏栏中的【凸 出代码码】按钮实现钮实现 代码码的凸出。 （6）显显示/隐隐藏行号 在代码视图码视图 窗口中对对每个HTML语语句显显 示其行号，以便于定位。操作方法是：在代 码视图码视图 窗口单击单击 “编码编码 ”工具栏栏中的【行 号】按钮钮，或者在“文档”工具栏栏中单击单击 【视图选项视图选项 】按钮钮，然后在弹弹出的下拉菜 单单中单击单击 【行数】命令即可显显示或隐隐藏“ 行号”。 （7）自动换动换 行 在代码视图码视图 窗口中编辑编辑 代码时码时 ，常常 会发现发现 一行代码过长码过长 需要自动换动换 行，操作 方法是：单击单击 “文档”工具栏栏中的【视图视图 选项选项 】按钮钮，然后在弹弹出的下拉菜单单中单单 击击【自动换动换 行】命令。 快速标签编辑标签编辑 器的作用是让让用户户在文档 窗口中直接对对HTML标签进标签进 行编编写，无需使 用代码视图码视图 ，就可以编辑单编辑单 独的HTML标签标签 2 2快速标签编辑器快速标签编辑器 快速标签编辑标签编辑 器有插入HTML、编辑标签编辑标签 和环绕标签环绕标签 三种状态态，打开编辑编辑 器后，可 以通过过按“Ctrl+T”组组合键进键进 行状态态切换换 ，如图图11-11为编辑标签为编辑标签 状态态，如图图11-12 为为插入模式的快速标签编辑标签编辑 器。 为为了方便手工编码编码 ，可以使用标签选择标签选择 器和标签编辑标签编辑 器。使用标签选择标签选择 器，可以 在网页页代码码中插入新的标签标签 ；使用标签编标签编 辑辑器，可以对对网页页代码码中的标签进标签进 行添加 标签标签 的属性或修改属性值值。 3 3使用标签选择器和标签编辑器使用标签选择器和标签编辑器 （1）使用标签选择标签选择 器 （2）使用标签编辑标签编辑 器 打开“文件”面板组组，然后切换换到“代 码码片断”选项选项 卡即可进进入代码码片断子面板 。利用代码码片断面可以减少代码编辑码编辑 的工 作量，在该该面板中可以存储储HTML、 JavaScript的代码码片断，这样这样 当需要重复使 用这这些代码时码时 ，就可以很方便地重用这这些 代码码，或者创创建并存储储新的代码码片断。 4 4代码片断代码片断 （1）插入代码码片断 在代码码片断子面板中选择选择 需要插入的代 码码片断，例如“将竖线竖线 用作分隔线线”，然 后直接单击单击 面板上的【插入】按钮钮，即可将 代码码片断插入至页页面。 （2）自定义义代码码片断 如果自己编编写一段代码码，希望在其他页页 面中重复使用这这一段代码码，这时这时 就可以使 用代码码片断子面板自定义义代码码片断，轻轻松 实现实