HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.docx
- 文档编号:24247715
- 上传时间:2023-05-25
- 格式:DOCX
- 页数:14
- 大小:1.07MB
HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.docx
《HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.docx》由会员分享,可在线阅读,更多相关《HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.docx(14页珍藏版)》请在冰豆网上搜索。
HTML5+CSS3网页美化与布局单元5网页超链接与导航栏的美化与布局
单元5 网页超链接与导航栏的美化与布局
一个完整的网站往往包含了多种不同形式的超链接,可能是文本,也可能是图像,单击网页中的超链接,就可以跳转到另一个网页,或者同一个网页中的不同位置。
网页中应用最广泛的是文本超链接,其默认的样式是蓝色并添加下划线。
导航栏可以理解为超链接的有序排列,导航栏的布局方式通常分为横向排列、纵向排列、弧形排列、浮动式和标签式等多种形式,导航栏也可做成弹出式菜单形式。
【知识预览】
1.HTML5的超链接与导航标签
(1)标签
(2)
2.定义热点图像的标签
标签用于定义图像映射中的热点区域(图像映射是指带有可单击区域的图像)。
标签总是嵌套在
3.CSS链接属性(Hyperlink)
(1)设置链接的样式
CSS为超链接标签a提供了四个伪类,表示链接的四种不同状态:
a:
link(普通的、未访问链接的状态)
a:
visited(已访问链接的状态)
a:
active(链接被单击激活的状态)
a:
hover(鼠标指针停留在链接上的状态)。
(1)用id或类选择符对标签a进行定义
为标签a用id或类选择符进行定义,对于不同id或类的超链接对象定义a:
link、a:
visited、a:
hover、a:
active的属性。
(2)将标签a的类选择符与伪类组合使用
使用包含选择符,将标签a包含在其他对象之中,对包含在该对象中的标签a进行样式定义。
【注意】:
超链接伪类正确的定义顺序:
a:
hover必须位于a:
link和a:
visited之后,a:
active必须位于a:
hover之后。
(2)常见的链接样式
①文本修饰
text-decoration属性大多用于去掉链接中的下划线。
②背景色
background-color属性用于设置链接的背景色。
4.CSS导航栏
导航栏基本上是一个链接列表,因此使用
- 和
- 元素是非常合适的,示例代码如下:
Home News Contact About
设置样式从列表中去掉圆点和外边距的CSS代码如下:
ul{
list-style-type:
none;
margin:
0;
padding:
0;
}
list-style-type:
none表示删除圆点,导航栏不需要列表项标记。
把外边距和内边距设置为0可以去除浏览器的默认设定。
【验证训练】
【任务5-1】验证各种类型的超链接属性设置
【任务描述】
在网页中输入以下HTML标签及文字:
阿坝旅游 阿坝旅游 >>
大美阿坝 >>
九寨沟景区亮点
针对上述项目列表以及列表项验证各种类型的列表属性设置。
(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标签“
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局 HTML5 CSS3 网页 美化 布局 单元 超链接 导航