HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.docx
《HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.docx》由会员分享,可在线阅读,更多相关《HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.docx(14页珍藏版)》请在冰豆网上搜索。
HTML5+CSS3网页美化与布局单元5网页超链接与导航栏的美化与布局
单元5 网页超链接与导航栏的美化与布局
一个完整的网站往往包含了多种不同形式的超链接,可能是文本,也可能是图像,单击网页中的超链接,就可以跳转到另一个网页,或者同一个网页中的不同位置。
网页中应用最广泛的是文本超链接,其默认的样式是蓝色并添加下划线。
导航栏可以理解为超链接的有序排列,导航栏的布局方式通常分为横向排列、纵向排列、弧形排列、浮动式和标签式等多种形式,导航栏也可做成弹出式菜单形式。
【知识预览】
1.HTML5的超链接与导航标签
(1)标签
标签用于定义超链接,用于从一张页面链接到另一张页面。
元素最重要的属性是href属性,它指示链接的目标。
(2)标签
标签用于定义页面导航,表示页面中导航链接的部分。
2.定义热点图像的标签
标签用于定义图像映射中的热点区域(图像映射是指带有可单击区域的图像)。
标签总是嵌套在标签中,标签中的usemap属性与map元素name属性相关联,创建图像与映射之间的联系。
3.CSS链接属性(Hyperlink)
(1)设置链接的样式
CSS为超链接标签a提供了四个伪类,表示链接的四种不同状态:
a:
link(普通的、未访问链接的状态)
visited(已访问链接的状态)
active(链接被单击激活的状态)
hover(鼠标指针停留在链接上的状态)。
(1)用id或类选择符对标签a进行定义
为标签a用id或类选择符进行定义,对于不同id或类的超链接对象定义a:
link、a:
visited、a:
hover、a:
active的属性。
(2)将标签a的类选择符与伪类组合使用
使用包含选择符,将标签a包含在其他对象之中,对包含在该对象中的标签a进行样式定义。
【注意】:
超链接伪类正确的定义顺序:
hover必须位于a:
link和a:
visited之后,a:
active必须位于a:
hover之后。
(2)常见的链接样式
①文本修饰
text-decoration属性大多用于去掉链接中的下划线。
②背景色
background-color属性用于设置链接的背景色。
4.CSS导航栏
导航栏基本上是一个链接列表,因此使用
设置样式从列表中去掉圆点和外边距的CSS代码如下:
ul{
list-style-type:
none;
margin:
0;
padding:
}
none表示删除圆点,导航栏不需要列表项标记。
把外边距和内边距设置为0可以去除浏览器的默认设定。
【验证训练】
【任务5-1】验证各种类型的超链接属性设置
【任务描述】
在网页中输入以下HTML标签及文字:
阿坝旅游
>> 大美阿坝
>> 九寨沟景区亮点
针对上述项目列表以及列表项验证各种类型的列表属性设置。
(1)为超链接的四种不同状态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
(2)创建网页文档0503.html,且链接外部样式文件base.css和main.css。
(3)在网页0503.html中添加必要的HTML标签、输入文字与插入图片。
(4)浏览网页0503.html的效果,如图5-4所示,该网页包含横向排列的主导航栏、纵向排列的导航栏和锚链接。
图5-4网页0503.html的浏览效果
在站点“单元5”中创建文件夹“5-3”,在该文件夹中创建子文件夹“CSS”。
(2)定义网页导航主体布局结构的CSS代码
在文件夹“CSS”中创建样式文件main.css,在该样式文件中编写样式代码,网页导航主体布局结构的CSS代码如表5-8所示。
在样式文件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所示。
保存网页文档0503.html,在浏览器GoogleChrome中的浏览效果如图5-4所示。
【任务5-4】创建包含纵向栏目导航栏和横向主导航栏的网页0504.html
(2)创建网页文档0504.html,且链接外部样式文件base.css和main.css。
(3)在网页0504.html中添加必要的HTML标签和输入文字。
(4)浏览网页0504.html的效果,如图5-5所示,该网页包含横向排列的主导航栏和纵向排列的栏目导航栏,还包含了位置导航超链接、标题形式的超链接、数字形式的超链接、底部版权信息超链接,本任务主要探讨主导航栏和栏目导航栏的布局与美化的实现。
图5-5网页0504.html的浏览效果
在站点“单元5”中创建文件夹“5-4”,在该文件夹中创建子文件夹“CSS”。
在文件夹“CSS”中创建样式文件main.css,在该样式文件中编写样式代码,网页主导航和栏目导航主体布局结构的CSS代码如表5-12所示。
在样式文件main.css添加样式代码美化超链接、主导航栏和栏目导航栏,CSS代码如表5-13所示。
(4)创建网页文档0504.html与链接外部样式表
在文件夹“5-4”中创建网页文档0504.html,切换到网页文档0504.html的【代码视图】,在标签“”的前面输入链接外部样式表的代码,如下所示:
网页0504.html主体布局结构的HTML代码如表5-14所示。
在网页文档0504.html中添加必要的HTML标签与输入文本内容,对应的HTML代码如表5-15所示。
保存网页文档0504.html,在浏览器GoogleChrome中的浏览效果如图5-5所示。
【任务5-5】创建包含图像热点链接的网页0505.html
(2)创建网页文档0505.html,且链接外部样式文件base.css和main.css。
(3)在网页0505.html中添加必要的HTML标签与输入当前位置导航文字。
(4)插入旅游地图,并在旅游地图绘制多个多边形形状的热点区域。
(5)输入各个热点区域的景点导航链接文字,并设置好超链接。
(6)编写JavaScript程序实现地图悬浮显示景区导航链接功能。
(7)浏览网页0505.html的效果,如图5-6所示,该网页包含当前位置的导航文字和景点导航地图。
图5-6网页0505.html的浏览效果
在站点“单元5”中创建文件夹“5-5”,在该文件夹中创建子文件夹“CSS”。
在文件夹“CSS”中创建样式文件main.css,在该样式文件中编写样式代码,网页主体结构如表5-16所示。
(3)定义美化图像热点链接的CSS代码
在样式文件main.css中添加样式代码美化图像热点链接,网页主体结构和美化导航栏的CSS代码如表5-17所示。
(4)创建网页文档0505.html与链接外部样式表
在文件夹“5-5”中创建网页文档0505.html,切换到网页文档0505.html的【代码视图】,在标签“”的前面输入链接外部样式表的代码,如下所示:
网页0505.html主体布局结构的HTML代码如表5-18所示。
(6)插入图片与绘制热点区域
在网页0505.html中HTML标签“”与“”之间插入旅游地图,并设置该图片的id、usemap等属性,在旅游地图绘制多个多边形形状的热点区域,并设置好标签的name、id等属性,对应的部分HTML代码如表5-19所示。
(7)输入各个热点区域的景点导航链接文字,并设置好超链接,对应的HTML代码如表5-20所示。
(8)编写JavaScript程序实现地图悬浮显示景区导航链接功能。
先在网页的头部输入以下代码链接已有的JS库文件jquery.min.js、jquery.easing-1.3.code.js和query-ui-ectrip.min.js。
然后在网页的头部编写表5-21所示的JavaScript代码实现地图悬浮显示景区导航链接功能。
(9)保存与浏览网页
保存网页文档0505.html,在浏览器GoogleChrome中的浏览效果如图5-6所示。
【同步训练】
【任务5-6】创建包含顶部横向导航栏的网页0506.html
(2)创建网页文档0506.html,且链接外部样式文件base.css和main.css。
(3)在网页0506.html中添加必要的HTML标签和输入导航文字。
(4)浏览网页0506.html的效果,如图5-10所示,该网页主要为横向排列的文本超链接。
图5-10网页0506.html的浏览效果
【任务5-7】创建包含锚链接和导航按钮的网页0507.html
(2)创建网页文档0507.html,且链接外部样式文件base.css和main.css。
(3)在网页0507.html中添加必要的HTML标签、输入导航文字、正文内容和插入多张图片。
(4)浏览网页0507.html的部分内容,如图5-11所示,该网页包含锚链接和导航按钮。
图5-11浏览网页0507.html的部分内容
【任务5-8】创建包含多个矩形图像链接的网页0508.html
(1)创建网页文档0508.html,在该页面的头部编写CSS代码。
(2)在网页0508.html中添加必要的HTML标签和插入1张图片。
(3)在图片中指点位置绘制矩形热点区域,且设置热点链接。
【单元小结】
本单元主要探讨超链接与导航栏的美化与布局,熟悉了横向导航栏、锚链接、纵向栏目导航栏、图像热点的美化方法,训练了导航栏的布局方法。
对HTML5的超链接与导航标签、定义热点图像的标签、CSS链接属性和导航栏等方面知识进行了全面介绍,同时对利用CSS样式定义各种不同形式的超链接、利用定义列表制作垂直导航栏、利用CSS样式实现水平导航栏及分隔小竖条、利用背景图像制作立体导航菜单和实现导航栏菜单自动伸缩和超链接的悬停交换效果等技术要点进行了详细说明。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1