HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.docx

针对上述项目列表以及列表项验证各种类型的列表属性设置。

（1）为超链接的四种不同状态a:

link、a:

visited、a:

hover、a:

active设置color、text-decoration、font-family、font-size、font-weight、background等属性。

（2）尝试设置超链接的download、hreflang、media、rel、target和type等属性。

【任务实施】

（1）创建一个名称为“单元5”的站点，在该站点中创建文件夹“5-1”。

（2）在该站点的文件夹“5-1”中创建网页0501.html。

（3）在网页0501.html中插入所需的标签和输入所需的文字内容。

（4）定义CSS代码。

初始CSS定义代码如表5-1所示。

（5）浏览网页0501.html的效果，如图5-1所示。

图5-1网页0501.html的浏览效果

（6）然后按照任务描述的要求不断改变超链接的各个属性设置，重新浏览其效果。

【引导训练】

【任务5-2】创建包含横向主导航栏的网页0502.html

【任务描述】

（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。

（2）创建网页文档0502.html，且链接外部样式文件base.css和main.css。

（3）在网页0502.html中添加必要的HTML标签和输入导航文字。

（4）浏览网页0502.html的效果，如图5-2所示，该网页包含三种形式的横向排列的导航栏。

图5-2网页0502.html的浏览效果

（5）重新编写主导航的HTML代码，使其浏览效果如图5-3所示。

图5-3网页0502.html中主导航栏重新定义后的浏览效果

【任务实施】

（1）创建站点与文件夹

在站点“单元5”中创建文件夹“5-2”，在该文件夹中创建子文件夹“CSS”。

将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。

（2）定义网页主体布局结构的CSS代码

在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构的CSS代码如表5-2所示。

（3）定义美化超链接和导航栏的CSS代码

在样式文件main.css添加美化超链接和导航栏的样式代码，CSS代码如表5-3所示。

（4）创建网页文档0502.html与链接外部样式表

在文件夹“5-2”中创建网页文档0502.html，切换到网页文档0502.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：

（5）编写网页主体布局结构的HTML代码

网页0502.html主体布局结构的HTML代码如表5-4所示。

（6）在网页中添加必要的HTML标签与输入文本内容

在网页文档0502.html中添加必要的HTML标签与输入文本内容，对应的HTML代码如表5-5所示。

（7）保存与浏览网页

保存网页文档0502.html，在浏览器GoogleChrome中的浏览效果如图5-2所示。

（8）重新定义主导航的HTML代码与样式代码

对表5-6中“”与“

网页0502.html中主导航栏的HTML代码与CSS代码重新定义后，在浏览器GoogleChrome中的浏览效果如图5-3所示。

【任务5-3】创建包含横向主导航栏和锚链接的网页0503.html

【任务描述】

（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。

（2）创建网页文档0503.html，且链接外部样式文件base.css和main.css。

（3）在网页0503.html中添加必要的HTML标签、输入文字与插入图片。

（4）浏览网页0503.html的效果，如图5-4所示，该网页包含横向排列的主导航栏、纵向排列的导航栏和锚链接。

图5-4网页0503.html的浏览效果

【任务实施】

（1）创建站点与文件夹

在站点“单元5”中创建文件夹“5-3”，在该文件夹中创建子文件夹“CSS”。

将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。

（2）定义网页导航主体布局结构的CSS代码

在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页导航主体布局结构的CSS代码如表5-8所示。

（3）定义美化超链接和导航栏的CSS代码

在样式文件main.css中添加样式代码美化超链接和导航栏，CSS代码如表5-9所示。

（4）创建网页文档0503.html与链接外部样式表

在文件夹“5-3”中创建网页文档0503.html，切换到网页文档0503.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：

（5）编写网页导航主体布局结构的HTML代码

网页0503.html导航主体布局结构的HTML代码如表5-10所示。

（6）在网页中添加必要的HTML标签与输入文本内容实现导航结构

在网页文档0503.html中添加必要的HTML标签与输入文本内容实现导航结构，对应的HTML代码如表5-11所示。

（7）保存与浏览网页

保存网页文档0503.html，在浏览器GoogleChrome中的浏览效果如图5-4所示。

【任务5-4】创建包含纵向栏目导航栏和横向主导航栏的网页0504.html

【任务描述】

（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。

（2）创建网页文档0504.html，且链接外部样式文件base.css和main.css。

（3）在网页0504.html中添加必要的HTML标签和输入文字。

（4）浏览网页0504.html的效果，如图5-5所示，该网页包含横向排列的主导航栏和纵向排列的栏目导航栏，还包含了位置导航超链接、标题形式的超链接、数字形式的超链接、底部版权信息超链接，本任务主要探讨主导航栏和栏目导航栏的布局与美化的实现。

图5-5网页0504.html的浏览效果

【任务实施】

（1）创建站点与文件夹

在站点“单元5”中创建文件夹“5-4”，在该文件夹中创建子文件夹“CSS”。

将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。

（2）定义网页导航主体布局结构的CSS代码

在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主导航和栏目导航主体布局结构的CSS代码如表5-12所示。

（3）定义美化超链接和导航栏的CSS代码

在样式文件main.css添加样式代码美化超链接、主导航栏和栏目导航栏，CSS代码如表5-13所示。

（4）创建网页文档0504.html与链接外部样式表

在文件夹“5-4”中创建网页文档0504.html，切换到网页文档0504.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：

（5）编写网页主体布局结构的HTML代码

网页0504.html主体布局结构的HTML代码如表5-14所示。

（6）在网页中添加必要的HTML标签与输入文本内容

在网页文档0504.html中添加必要的HTML标签与输入文本内容，对应的HTML代码如表5-15所示。

（7）保存与浏览网页

保存网页文档0504.html，在浏览器GoogleChrome中的浏览效果如图5-5所示。

【任务5-5】创建包含图像热点链接的网页0505.html

【任务描述】

（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。

（2）创建网页文档0505.html，且链接外部样式文件base.css和main.css。

（3）在网页0505.html中添加必要的HTML标签与输入当前位置导航文字。

（4）插入旅游地图，并在旅游地图绘制多个多边形形状的热点区域。

（5）输入各个热点区域的景点导航链接文字，并设置好超链接。

（6）编写JavaScript程序实现地图悬浮显示景区导航链接功能。

（7）浏览网页0505.html的效果，如图5-6所示，该网页包含当前位置的导航文字和景点导航地图。

图5-6网页0505.html的浏览效果

【任务实施】

（1）创建站点与文件夹

在站点“单元5”中创建文件夹“5-5”，在该文件夹中创建子文件夹“CSS”。

将单元1已创建好的样式文件base.css拷贝至“CSS”文件夹中。

（2）定义网页主体布局结构的CSS代码

在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构如表5-16所示。

（3）定义美化图像热点链接的CSS代码

在样式文件main.css中添加样式代码美化图像热点链接，网页主体结构和美化导航栏的CSS代码如表5-17所示。

（4）创建网页文档0505.html与链接外部样式表

在文件夹“5-5”中创建网页文档0505.html，切换到网页文档0505.html的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：

（5）编写网页主体布局结构的HTML代码

网页0505.html主体布局结构的HTML代码如表5-18所示。

（6）插入图片与绘制热点区域

在网页0505.html中HTML标签“”与“