03模块静态网页基础
静态网页是相对于动态网页而言的，是指没有后台数据库、不含程序和不可交互的网页。静态网页是网站建设的基础，静态网页和动态网页相互依存。本模块主要介绍网页设计工具——Dreamweaver CS5的常用操作，如插入表格、图像、视频和Flash动画等网页元素，同时介绍了HTML的常用标签。另外，讲解了CSS(层叠样式表)的基础知识，以及如何用CSS设计超链接的样式和实现网页换肤效果等。
(1) 能使用CSS定义网页样式。
(2) 常用网页元素的插入和编辑。
(3) 表单的制作。
(1) CSS的基本语法。
(2) CSS选择器的种类。
(3) CSS的使用方式。
(4) 常用HTML标签语法。
(5) HTML标签的属性设置。
知识储备
知识1Dreamweaver CS5的工作环境
启动Dreamweaver后，单击“新建”项目下的HTML，即可进入Dreamweaver的工作界面。Dreamweaver的工作窗口主要由应用程序栏、插入栏、文档工具栏、文档窗口、面板组、属性检查器和标签选择器等部分组成，如图31所示。
1) 应用程序栏
应用程序窗口顶部包含一个工作区切换器、菜单栏(主要包括“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”“帮助”等菜单)以及其他应用程序控件。单击菜单栏中的命令，在弹出的下拉菜单中选择要执行的命令。
图31Dreamweaver CS5工作界面
2) 插入栏
插入栏包含用于将各种类型的“对象”(如图像、表格和层)插入文档中的按钮。每个对象都是一段HTML［1］代码，使用户在插入时设置不同的属性。例如，可以在“插入”栏中单击“图像”按钮插入图像。也可以不使用插入栏而使用菜单“插入”|“图像”命令插入图像。
3) 文档工具栏
文档工具栏包含一些按钮，它们提供在各种“文档”窗口视图(如“设计”视图、“拆分”视图和“代码”视图)间快速切换的选项、各种查看选项和一些常用操作(如“在浏览器中预览/调试”“文件管理”“验证标记”“检查浏览器兼容性”等)。
用户可以在“标题”右侧的文本框中输入一个标题，它会显示在浏览器的标题栏中。单击“在浏览器中预览/调试”按钮，在弹出的菜单中选择一个浏览器，可以预览网页显示效果，快捷键是F12。
注意： 单击“查看”|“工具栏”|“文档”命令菜单，就会在Dreamweaver CS5中显示文档工具栏。若去掉“文档”选项前的对钩，就可以隐藏文档工具栏。
4) 文档窗口
文档窗口用于显示当前正在创建和编辑的文档。将鼠标在文档中单击，即可开始在光标位置输入网页元素并进行编辑。
5) 面板组
面板组是分组在某个标题下面的相关面板的集合，用来帮助用户监控和修改工作。主要包括“插入”面板、“行为”面板、“CSS样式”面板和“文件”面板等。用户可以根据自己的需要，选择隐藏和显示面板。若要展开某个面板，请双击其选项卡。
6) “属性”面板
属性检查器用于查看和更改所选对象或文本的各种属性。“属性”面板会随着选择对象的不同而有所不同。单击“属性”面板右下角的三角箭头可以折叠/展开“属性”面板。单击“属性”面板右上角的下拉菜单选择“关闭”或“关闭面板组”命令可以关闭“属性”面板。如果要重新打开，可以单击“窗口”|“属性”命令。
7) 标签选择器
标签选择器位于“文档”窗口底部的状态栏中。显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。
8) “文件”面板
“文件”面板类似于Windows资源管理器，用于管理文件和文件夹，无论它们是Dreamweaver站点的一部分还是位于远程服务器上。用户还可以通过“文件”面板访问本地磁盘上的全部文件。
知识2样式表的优点
样式设计是指应用HTML和CSS(层叠样式表)设计网页的外观样式。CSS是Cascading Style Sheet的缩写，译为“层叠样式表”或“级联样式表”。虽然CSS在网页里与HTML编写在一起，但是它不属于HTML。它可以扩展HTML的功能，如调整字间距、行间距，取消链接的下画线、多种链接效果和固定背景图像等。CSS可以实现原来HTML标签无法实现的效果。一个样式表又称为CSS，由样式规则组成，具有以下特点。
(1) 同时更新站点的多个页面，更快更容易。
在对多个网页文件设置同一种属性时，无须对所有的文件进行反复操作，只需给多个页面都应用相同的样式表就可以了。利用外部样式表，可以将站点上所有网页都指向同一个外部CSS文件，只要更改外部CSS文件的某一规则，整个站点的外观就会随之发生改变。
(2) 格式和结构分离。
CSS通过将定义结构的部分和定义格式的部分相分离，使用户对页面的布局可以施加更多的控制。
(3) 制作体积小，页面下载速度快。
样式表只包含简单的文字，不需要图像、执行程序及插件。使用CSS可以减少表格标签及其他加大HTML体积的代码，从而减小文件的大小。浏览页面时，外部样式表文件会被加载到浏览者的计算机缓存中，这样就大大提高了页面的下载速度。
知识3CSS的基本语法
CSS的样式规则由三部分构成： selector(选择器)、property(属性)和value(属性的取值)。基本的格式如下。
(1) selector： CSS选择器，用来定义样式类型并将其运用到特定的部分，有类选择器、标签选择器、ID选择器和关联选择器四种。
(2) property： 指将要被设置的属性，如color。
(3) value： 赋给property的值，例如赋给color的值可以为red或者#FF0000。下面是一个典型的例子。
body{background-color:#FFFFFF;color:#FF0000;}
a{color:red;}
该样式定义实现将页面背景颜色设置为白色、文字颜色设置为红色； 所有的链接都设置为红色。为了方便阅读，可以采用以下分行书写的格式。
body{
background-color:#FFFFFF;
color:#FF0000;
}
a{
color:red;
}
通常把所有的样式定义放在<style></style>标签里，然后再放到<head></head>标签中。如下面样式将设置网页背景色为白色，文字颜色为黑色，超链接的颜色为红色带下画线。
<style type="text/css">
body{
background-color:#FFFFFF;
color:#000000;
}
a{
color:#FF0000;
text-decoration:underline;
}
</style>
知识4常用CSS选择器
CSS通过定义规则并将其应用到文档中同一元素，这样就可以减少网页设计者的工作。每个样式都是由一系列规则组成，每条规则有两部分： 选择器和声明。每条声明又是属性和值的组合。通常规则左边是选择器，右边是CSS属性和值。CSS选择器指明文档中要应用此样式的元素，可以有多种形式。
1. 类选择器
类选择器能够把相同的元素分类定义成不同的样式，对HTML标签均可以使用class="类名"的形式对类属性进行名称指派，且允许重复使用。类选择器的名称可以由用户自己定义，需要注意的是在定义选择器时，名称前面要加一个点号(.)。例如，定义了一个类样式.text，用于给段落文本添加样式。在使用时只需设置应用样式的段落标签class属性为text即可(class="text")，设置完成的HTML代码如下。
<p class="text">网站建设与管理基础与实训</p>
2. ID选择器
ID选择器的使用方法和类选择器基本相同，不同之处主要在于ID选择器只能在HTML页面中使用一次，因此针对性更强，只用来对单一元素定义单独的样式。ID选择器使用时需要设置标签的ID属性，对于一个网页而言，每个标签均可以使用ID="ID名"的形式对ID属性进行名称的指派。
在定义ID选择器时，要在ID名称前面加一个#。例如，以下为网页中的层定义了样式。
#apDiv1 {
position:absolute;
left:37px;
top:12px;
width:137px;
height:135px;
z-index:1;
}
然后只需要在层(div)标签中设置ID属性为apDiv1，该层就具有了以上样式。设置完的层HTML代码如下。
<div id="apDiv1"></div>
3. 标签选择器
标签选择器也称标记选择器，一个HTML页面由很多不同的标签组成，标签选择器的CSS样式能让页面中的同一标签保持相同样式。HTML中的每个标签都有默认的样式，标签选择器的主要作用是提供重新定义HTML元素样式的方法。例如<p>选择器可以声明文档中的所有<p>标签的样式风格。HTML中的所有标签都可以作为标签选择器，通过标签选择器可以快速改变网页的外观样式。
例如，以下为给<p>标签定义的样式。
p {
font-family: "宋体";
font-size: 24px;
color: #FF0000;
}
以上样式定义文档中的p标签的样式为“字体为宋体，字号为24px，颜色为红色”。应用该样式的页面中的所有p标签都将具有“字体为宋体，字号为24px，颜色为红色”的样式。
4. 关联选择器
关联选择器可定义以上三种选择器样式和链接的四种样式a:link、a:visited、a:hover和a:active。此外，还可对选择器进行集体和嵌套声明。
知识5CSS的使用方式
CSS按其使用位置的不同，主要分为以下三种类型： 行内样式表(Inline Style Sheet)、内嵌样式表(Internal Style Sheet)和外部样式表(External Style Sheet)。
1. 行内样式表
行内样式表也叫内联样式表，行内样式直接定义在HTML标签内，只对所在标签有效，行内样式定义在HTML标签的style属性中。使用行内样式失去了样式表的优势，这样就将内容和外观形式混淆在一起了，一般这种方法在个别元素需要改变样式时使用。
例如，给一个段落添加样式，代码如下。
<p style="background-color:#0000FF; color:#FF0000; font-size:24px; ">这是
行内样式</p>
行内样式是最为简单的CSS使用方法，但由于需要为每个标签设置style属性，后期维护成本很高，而且网页代码容易“臃肿”，因此不推荐使用。
2. 内嵌样式表
内嵌样式表也叫内部样式表，内嵌样式表使用<style></style>标签在head区域内定义样式，内部样式表只对所在的网页有效，可针对具体页面进行具体调整，以下为内嵌样式表。
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:37px;
top:12px;
width:137px;
height:135px;
z-index:1;
}
-->
</style>
3. 外部样式表
外部样式表可以集中控制和管理多个网页的格式和布局，省去了对这些网页的每个标签都要进行格式的麻烦。外部样式表将CSS写成一个以css为扩展名的外部CSS文件，在HTML文档头部通过链接或导入的方式引用该文件进行样式控制。
第一种是通过链接的方式导入。
这种导入方式会在<head></head>标签内使用<link>标签将样式表文件链接到HTML文件内，如<link href="global.css" rel="stylesheet" type="text/css" />。
第二种是通过导入方式导入外部样式表。
这种导入方式会在<head></head>标签内添加一对<style></style>标签，然后通过@import方式导入外部样式表，完整代码如下所示。
<style type="text/css">
<!--
@import URL("global.css");
-->
</style>
通过@import方式导入外部样式表时，在HTML文件初始化时，会被导入HTML文件内，作为文件的一部分，类似内嵌式样式表效果。推荐使用链接的方式添加外部样式表。
知识6CSS选择器的嵌套与继承
在CSS选择器中，还可以通过嵌套的方式进行组合使用，页面中标签嵌套定义的代码如下所示，其规则为标签名、ID名或类名后空格再加下一级标签名。
p a {
font-family: "宋体";
font-size: 24px;
color: #F00;
text-decoration: none;
}
#bot a {
font-family: "隶书";
font-size: 18px;
color: #0F0;
text-decoration: underline;
}
.bot a {
font-family: "黑体";
font-size: 16px;
color: #00F;
text-decoration: overline;
}
以上样式分别在p、#bot和.bot三个选择器下定义了超链接(标签a)的样式，这样就可以实现网页样式的分块控制。
模拟制作任务
任务1插入和编辑表格
表格通常用于网页布局，因此熟练表格的相关操作是十分必要的。在网页中插入和编辑表格的步骤如下。
(1) 选择菜单“窗口”|“插入”命令，打开“插入”栏，在“插入”栏中单击“表格”按钮，或直接选择菜单“插入”|“表格”命令，弹出图32所示的对话框。在该对话框中可以设置表格的行数、列数、表格宽度和边框粗细等参数。
(2) 单击“确定”按钮即可在网页中插入一个宽度为200px的表格，如图33所示。
图32插入表格对话框
图33插入网页中的表格
(3) 图33中的表格已经被选中，此时可以在“属性”面板中设置表格的属性，如图34所示。
图34表格的“属性”面板
(4) 当然也可以选择表格的行、列或单元格进行属性设置，图35即为选择表格行后的“属性”面板。
图35表格中行的“属性”面板
(5) 其他属性的设置大体相似，在此不做赘述。插入的表格在浏览器中的浏览效果如图36所示。
图36在浏览器中浏览表格
任务2插入图像
图像是网页中的常用元素，在网页中插入图像和设置图像属性的步骤如下。
(1) 选择菜单“窗口”|“插入”命令，打开“插入”栏，在“插入”栏中单击“图像”按钮，或直接选择菜单“插入”|“图像”命令，在弹出的“选择图像源文件”对话框中选择要插入的图像后，单击“确定”按钮即可插入图像。
(2) 选中网页中的图像，在“属性”面板可以修改其相应的属性，如图37所示。
图37“属性”面板
(3) 在图37中可以设置图像的ID、宽、高和边框等属性，图38即为设置图像边框为10的浏览效果。
图38在浏览器中浏览图像
任务3插入音频和视频
在文档窗口中插入音频和视频文件的具体步骤如下。
(1) 将插入点定位到要嵌入音视频文件的位置，然后在“插入工具栏”的“常用”选项卡中单击“媒体”图标，选择“插件”命令。或者选择菜单“插入”|“媒体”|“插件”命令。在弹出的“选择文件”对话框中选择要嵌入的音视频文件(注意： 文件名必须使用英文，不能使用汉字)。
(2) 选中插入的音视频文件，通过在“属性”面板的“宽”和“高”文本框中输入数值或在“设计”视图中拖曳插件控制点来调整插件大小，最终确定播放器控件在浏览器中显示的大小，如图39所示。
图39插入音频和视频插件
(3) 将音视频文件插入到指定位置后，可以利用“属性”面板设置音视频文件的属性。插件使用的HTML标签为<embed>。
提示： 插件默认使用的是Windows Media Player播放器，浏览器在加载页面时会自动加载Windows Media Player的控制面板。不同的浏览器根据访问者安装的播放器插件不同，可能显示的播放器的界面有所不同。
(4) 插件插入之后，如果需要对音视频文件的播放进行更多的控制，还需要修改相应的参数。方法是单击“属性”面板的“参数”按钮，弹出“参数”对话框，常用的参数如下。
autostart： 是否在页面加载时自动开始播放，取值为true或者false。
loop： 重复播放，若值为true，则自动重复播放； 若值为false，则不重复播放； 若取值为n，则重复播放n次。
controls： 播放器控制面板设置，取值为一串英文逗号间隔的字符串，用于指定播放器控制的可见性。
参数设置如图310所示。
图310音视频播放参数设置
(5) 在浏览器中播放插入的视频，效果如图311所示。
图311播放插入的视频效果
任务4插入FLV格式视频
在文档窗口中插入FLV［2］格式视频的步骤如下。
(1) 将插入点定位到要嵌入音视频文件的位置，然后在“插入工具栏”的“常用”选项卡中单击“媒体”图标，选择FLV命令。或者选择菜单“插入”|“媒体”|FLV命令。在弹出的“插入FLV”对话框中选择要插入的FLV视频文件，在对话框中为要插入的视频设置相应的参数，如图312所示。
图312“插入FLV”对话框
(2) 单击“确定”按钮即可插入FLV视频，当保存网页时会弹出如图313所示的对话框。提示网站开发人员在发布网站时应该把FLV视频播放的支持文件一起发布。
图313复制FLV视频支持文件
(3) 在浏览器中预览，FLV视频的播放效果如图314所示。
图314FLV视频格式播放效果
任务5插入Flash动画
在文档窗口中插入Flash文件的步骤如下。
(1) 将插入点定位到要插入Flash动画的位置，然后在“插入工具栏”的“常用”选项卡中单击“媒体”图标，选择SWF命令。或者选择菜单“插入”|“媒体”|SWF命令。在弹出的“选择文件”对话框中选择要插入的SWF文件，单击“确定”按钮即可将Flash动画插入网页中。Flash动画不会在Dreamweaver文档窗口中显示具体动画内容，而是以一个带有字母F的灰色框来表示，如图315所示。
图315设计状态下插入网页中的Flash动画
(2) 在图315下方的“属性”面板中可以设置当前选中的Flash动画的参数，其中需要特别注意Wmode参数的运用，有时为了显示网页的背景颜色和背景图像，需要设置Flash动画的Wmode参数值为“透明”。如图316和图317即为设置Wmode参数值为“透明”前后的效果区别。
图316背景透明前的Flash动画
图317背景透明后的Flash动画
任务6制作超链接
在Dreamweaver中创建文字超链接的方法十分简单，首先选中要创建链接的文字或图像，然后为其指定被链接文档的访问路径，即URL。被链接文档可以是网址、网页、各类文档和压缩文档等。
选中文字后，给链接文字指定被链接文档访问路径有以下四种方法。
(1) 在“属性”面板上的“链接”文本框中手工输入被链接文档的路径。
(2) 首先用鼠标左键按住“属性”面板上“链接”文本框后的“指向文件”按钮不放，然后移动鼠标到“文件”面板中要链接的对象上即可。
(3) 单击“属性”面板上“链接”文本框后面的“浏览文件”按钮，在弹出的“打开文件”对话框中选择要链接的对象。
(4) 单击“插入”菜单下的“超级链接”命令，弹出如图318所示的“超链接”对话框。按要求设置完成后，单击“确定”按钮即可在网页中插入超链接。
图318“超链接”对话框
提示： 创建超链接时，“属性”面板和“超链接”对话框中的“目标”文本框用来设置超链接的打开方式。其下拉列表中包含四个选项，其含义如下。
_blank： 将被链接对象载入新的浏览器窗口中。
_parent： 将被链接对象载入父框架集或包含该链接的框架窗口中。
_self： 将被链接对象载入到与该链接相同的框架或窗口中(本选项也是默认打开方式)。
_top： 将被链接对象载入到整个浏览器窗口并取消所有框架。
任务7制作表单
表单是网站中收集信息的主要途径，只要是动态网站，基本上都会应用到表单。下面以一个用户注册表单为例，简单讲述表单的制作，制作表单的大致步骤如下。
(1) 切换“插入工具栏”到“表单”选项，该选项下列出了制作表单的所有表单元素。如图319所示，当把鼠标放到表单工具栏上具体的表单元素时，会提示相应的表单元素名称。
图319表单工具栏
(2) 单击“表单”按钮(第1个表单元素)往网页中插入一个表单，表单在设计状态下显示为红色虚线框，如图320所示。在浏览器中浏览表单时，表示表单的红色虚线框是不会显示的。
图320设计状态下的表单
(3) 接下来需要往表单中添加相应的表单元素，通常可以在表单中插入表格来布局表单元素。插入一个10行2列的400像素宽的表格，合并表格的第1行和第10行的两个单元格，并设置这两行居中对齐。插入表格后的表单如图321所示。
图321插入表格后的表单
(4) 在表格中添加相应的表单元素，表单如图322所示。
图322添加表单元素后的表单
(5) 在“标签选择器”中选择<form#form1>标签，然后就可以在“属性”面板中设置表单属性，如图323所示。
图323设置表单属性
(6) 至此，一个完整的表单设计完成，如果需要对表单数据进行相应处理，只需制作好表单处理页面(如formAction.asp)即可。
任务8超链接的四种状态的样式设计
通常在设计网页超链接时需要有样式变化，这样可以起到提示浏览者的作用。通过设置超链接的四种链接状态［3］(
a:link，a:visited，a:hover和a:active)可以实现链接样式的变化。
超链接的四种链接状态应该要有一定的差别，并且每种状态的文字颜色应该与背景颜色要有一定的反差。设置超链接四种链接样式的大致步骤如下。
(1) 编写如下代码设置网页超链接的四种状态的样式。
<style type="text/css">
<!--
a:link {
font-family: "宋体";
font-size: 16px;
color: #0000FF;
text-decoration: none;
}
a:visited {
font-family: "宋体";
font-size: 16px;
color: #FF0000;
text-decoration: line-through;
}
a:hover {
font-family: "宋体";
font-size: 24px;
color: #00FF00;
text-decoration: underline;
}
a:active {
font-size: 24px;
color: #FFFF00;
text-decoration: none;
font-family: "宋体";
}
-->
</style>
注意： 在定义链接样式时，一定要按照a:link、a:visited、a:hover和a:active的顺序书写，否则有些状态的样式不能正常显示。
(2) 也可以通过选择器的嵌套实现样式的分块控制，如下面的样式代码为网页中的两个层分别定义了样式的四种状态。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接样式的分块控制</title>
<style type="text/css">
<!--
#Layer1 a:link {
font-family: "宋体";
font-size: 16px;
color: #0000FF;
text-decoration: none;
}
#Layer1 a:visited {
font-family: "宋体";
font-size: 16px;
color: #FF0000;
text-decoration: line-through;
}
#Layer1 a:hover {
font-family: "宋体";
font-size: 24px;
color: #000000;
text-decoration: underline;
}
#Layer1 a:active {
font-size: 24px;
color: #FFFF00;
text-decoration: none;
font-family: "宋体";
}
#Layer2 a:link {
font-family: "宋体";
font-size: 16px;
color: #FFFF00;
text-decoration: none;
}
#Layer2 a:visited {
font-family: "宋体";
font-size: 16px;
color: #FF0000;
text-decoration: line-through;
}
#Layer2 a:hover {
font-family: "宋体";
font-size: 24px;
color: #00FF00;
text-decoration: underline;
}
#Layer2 a:active {
font-size: 24px;
color: #FFFF00;
text-decoration: none;
font-family: "宋体";
}
#Layer1 {
position:absolute;
left:68px;
top:59px;
width:197px;
height:203px;
z-index:1;
background-color: #00FF00;
}
#Layer2 {
position:absolute;
left:289px;
top:60px;
width:186px;
height:204px;
z-index:2;
background-color: #0000FF;
}
-->
</style>
</head>
<body>
<div id="Layer1"><a href="http://www.w3cschool.cn/">链接的四种状态</a></div>
<div id="Layer2"><a href="http://www.w3cschool.cn/">链接的四种状态</a></div>
</body>
</html>
任务9网页换肤效果的实现
有时网页为了满足用户更换网页风格的需要，可以为用户提供网页换肤功能。换肤功能的实现相对简单，通常的做法是提供多个外部样式表文件，用户选择不同的网页样式时通过程序修改网页依赖的样式文件，从而达到为网页换肤的效果。
本任务较为简单，只需制作多个外部样式表文件，然后使用脚本语言实现网页样式文件的切换，最终达到网页换肤的效果。制作网页换肤效果的大致步骤如下。
(1) 制作样式文件a.css，输入如下样式代码。
body {
margin:0;
padding:0;
background:url(bg1.jpg);
}
#wrap {
height:600px;
background:url(dw1.jpg) no-repeat center top;
margin-top:20px;
}
(2) 同样制作样式文件b.css，输入如下样式代码。
body {
margin:0;
padding:0;
background:url(bg2.jpg);
}
#wrap {
height:600px;
background:url(dw2.jpg) no-repeat center top;
margin-top:20px;
}
(3) 制作一个静态网页，代码如下。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>样式切换</title>
<link id="mycss" rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<input type=button value="风格一" onclick="document.all.mycss.href='a.css'">
<input type=button value="风格二" onclick="document.all.mycss.href='b.css'">
<div id="wrap">
</div>
</body>
</html>
(4) 在浏览器中预览的效果如图324和图325所示。
从图324和图325可以看出，当单击“风格二”按钮时，网页的显示风格发生了明显的变化。样式变化的原因是网页加载了另一个样式文件。从第(3)步的网页代码中可以看出，网页通过link标签加载外部CSS文件，代码如下所示。
图324样式效果——风格一
图325样式效果——风格二
<link id="mycss" rel="stylesheet" type="text/css" href="a.css">
当用户单击不同的按钮时可以通过代码document.all.mycss.href="cssName.css"来加载不同的外部CSS文件，从而实现样式的切换。
知识点拓展
［1］ HTML语言中的常用标签如下。
1） <html>标签
文档标识符，它是成对出现的。首标签<html>和尾标签</html>分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言(HTML)编写的。
2） <head>标签
习惯上把HTML文档分为文档头部和文档主体两部分。文档的主体部分是我们在浏览器用户区中看到的内容。而文档头部分用来规定该文档的标题(出现在浏览器窗口的标题栏中)和文档的其他一些属性。
3） <title>标签
<title>标签是成对标签，用来规定HTML文档的标题。在<title>和</title>之间的内容将显示在Web浏览器窗口的标题栏中。
4） <body>标签
<body>标签也是成对标签。在<body></body>之间的内容将显示在浏览器窗口的用户区内，它是HTML文档的主体部分。在<body>标签中可以规定整个文档的一些基本属性，如背景颜色、背景图片、字体和字号等。
5） 标题标签
一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<hn>，其中n为标题的等级，HTML总共提供6个等级的标题，n值越小，标题字号就越大，<h1>定义最大号标题，<h6>定义最小号标题。
6） 换行标签<br>
换行标签是个单标签，也叫空标签，不包含任何内容，在HTML文件中的任何位置只要使用了<br>标签，当文件显示在浏览器中时，该标签之后的内容将在下一行显示。<br>标签用于定义文本从新的一行显示，它不产生一个空行，但连续使用多个<br>标签可以产生多个空行的效果。
7） 水平线标签<hr>
使用<hr>标签可以在网页上画出一条横跨网页的水平分隔线，以分隔不同的文字段落。<hr>标签有size、width和color等属性。
8） 字体标签<font>
<font>标签是HTML里最常用的文字格式控制标签，通过改变<font>标签的属性可以改变文字的大小、颜色、字体等。<font>标签的主要属性如下。
size： <font>标签的size属性指定文字的大小，它的取值范围是1~7，当它取值为1时文字最小，取值为7时文字最大，默认值是3。
color： <font>标签的color属性可以指定文字的颜色，它的取值有用英文关键字、十六进制颜色代码、RGB函数三种类型。
face： <font>标签的face属性指定文字的字体。
如代码<font size="5" face="宋体" color="red">登鹳雀楼</font>设置了文字“登鹳雀楼”的字体为“宋体”，字号为“5”，颜色为“红色”。
9） 段落标签<p>
<p>标签用于划分段落，控制文本位置。<p>是成对标签，用于定义内容从新的一行开始，并与上段之间有一个空行，其align 属性定义新开始的一行内容在页面中的对齐位置，属性值可以是left(左对齐)、center(居中对齐)或者right(右对齐)。
10） 图片标签<img>
<img>是图像的标签，用来在网页中显示图像，其常用属性如下。
src属性指定浏览器图片的具体位置，类似超链接的href属性指定浏览器要链接的目标文件。
alt属性代表图片的替代文字。有些浏览者不想看到图片(如网速太慢)，有些早期的浏览器也不支持图片，还有一种可能是把图片的具体位置写错了，这些情况浏览者是看不到图片的，这时alt可以在图片的位置上显示出代替的文字，这是非常有用的，记得一定要加上。
title属性指示图片的提示文字，当鼠标停留到图片上时，会提示相关文字。
11） 超链接标签<a>
超链接是WWW的魅力所在，是超文本的一个重要特征。它可以链接文本、图片、程序、音乐和影像等文件。
<a>标签的语法为<a href="URL">显示的文字</a>，其常用属性如下。
href是链接属性，告诉浏览器链接到的网址(URL)，URL是要链接到的网页或者文件。URL可以是一个绝对的地址，如： http://www.sina.com.cn/； 或者是一个相对网页，如index.html。URL除了是网页外，还可以是其他的文件(如文本文件、PDF格式文件和ZIP格式文件等)、锚文本链接和Email地址。
target是链接的目标属性，target属性指定所链接的页面在浏览器窗口中的打开方式，它的参数值主要有： _blank、_parent、_self、_top。
如超链接<a href="http://www.sina.com.cn/">新浪</a>可以链接到新浪网站。
12） 表格标签<table>
HTML表格标签用<table>表示。一个表格可以分成若干行(row)，用<tr>表示； 每行又可以分成若干单元格(cell)，用<td>表示。
表格常用属性有宽、高、边框、背景颜色、背景图片、对齐方式、填充和间距等。下面分别对这些属性进行详细介绍。
表格的宽和高分别用width和height属性来表示。宽高默认的单位为像素（px），可以给表格设置固定像素的宽高值，如代码<table width=400 height=300></table>设置表格的宽度为400px，高度为300px。也可以给表格设置百分比的宽高值，如代码<table width=40%></table>设置表格的宽度为浏览器窗口的40%。
表格的边框用border属性来表示，边框的单位默认为像素(px)，给表格添加边框可通过给表格的<table>标签添加border属性实现。border属性设置的值越大，表格的边框就越粗。
表格的背景颜色是通过bgcolor属性来设置的，而背景图片则是通过background属性来进行设置的。
［2］ FLV格式是Flash Video格式的简称，随着Flash MX的推出，Macromedia公司开发了属于自己的流媒体视频格式——FLV格式。FLV流媒体格式是一种新的视频格式，由于它文件体积极小、加载速度极快，使得网络观看视频文件成为可能，FLV视频格式的出现有效地解决了视频文件导入Flash后，使导出的SWF格式文件体积庞大，不能在网络上很好的使用等缺点。目前各在线视频网站均采用此视频格式，如新浪博客、优酷网、土豆网等无一例外，FLV格式已经成为当前网络视频文件的主流格式。
提示： 本书由于篇幅限制不能展开讲述本章内容，如需详细熟悉Dreamweaver CS5的相关操作，可以参考《网页设计基础与实训(第二版)》(吴代文，清华大学出版社，2017)。
［3］ 在给文字或图像设置链接后，它们就会自动包含了4种链接状态，分别是a:link、a:visited、a:hover和a:active，每种状态代表的含义如下。
a:link链接的默认状态，即没有触发任何鼠标事件时所呈现的状态。
a:visited访问过的链接状态，即当该链接被单击后所呈现的状态。
a:hover鼠标经过时的链接状态，即当鼠标放置在有链接的对象时所呈现的状态。
a:active鼠标单击时的链接状态，即单击链接但未释放鼠标时所呈现的状态。
职业技能知识点考核
1. 填空题
(1) 图片标签<img>的属性指定浏览器图片的具体位置，类似超链接的href属性指定浏览器超链接要链接的目标文件一样。
(2) 用于设置网页标题的HTML标签是。
(3) HTML总共提供个等级的标题。
(4) CSS的样式规则由、和三部分构成。
(5) CSS选择器的种类有、、和。
2. 简答题
(1) 列举超链接标签<a>的target属性的四种可选参数值，并说明每种参数值的意义。
(2) 列举组成表格的HTML标签，并简要说明每种标签的意义。
(3) CSS按其使用位置的不同可分为哪些类型？
练习与实践
1. 练习Dreamweaver的基本操作，如插入表格、图像、视频和动画等。
2. 制作几个测试链接，并给这些测试链接设计a:link、a:visited、a:hover和a:active四种链接状态。
3. 模仿任务9制作一个具有换肤效果的网页。