《HTML5网页设计》补充案例7（全文完整）
下面是小编为大家整理的《HTML5网页设计》补充案例7（全文完整）,供大家参考。
补充案例 — “ 儿童益智网 ” 首页 面制作 一、案例描述
1 、 考核知识点 节点的访问 数组的常用属性和方法 JavaScript 常用事件 2 、 练习目标 掌握访问指定元素和相关元素的方法。
掌握通过触发事件完成 JavaScript 与对象之间的交互。
3 、 需求分析 采用事件驱动是 JavaScript 语言的一个最基本的特征。比如在浏览网页时，通过单击鼠标或按键，可以触发与这个事件相关联的JavaScript对象，从而实现不同的功能。通过学习本案例带领大家学习JavaScript对象、数组的常用属性和方法、节点的访问以及 JavaScript 常用事件等相关知识。
4 、 案例 展示 效果如图 8-1 所示。
图 8-1 “儿童益智网”首页面效果展示 二、 布局及定义基础样式 1 、 效果分析 （ （1 ）HTML 结构分析 “儿童益智网”首页面从上到下可以分为 4 个模块，如图 8-2 所示。
头部及导航banner内容底部 图 8-2 “儿童益智网”首页面结构分析 （ （2 ）CSS 样式分析 页面背景色为淡蓝色，各个模块居中显示，且页面版心为 1000px。另外，页面中的所有字体均设置为微软雅黑，大小为 12px，a 链接访问前的文字颜色为黑色，访问后的文字颜色为蓝色。这些可以通过 CSS公共样式进行定义。
2 、 页面布局 新建 index08.html 文件，在 index08.html 文件内书写 HTML 结构代码，具体代码如下。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
6 <title>儿童益智网</title>
7 </head>
8 <body>
9 <!--head-->
10 <div id="head"></div>
11 <!--head-->
12 <!—banner-->
13 <div id="banner"></div>
14 <!-—banner -->
15 <!--content-->
16 <div id="content"></div>
17 <!--content-->
18 <!--footer-->
19 <div id="footer"></div>
20 <!--footer-->
21 </div>
22 </body>
23 </html> 在上述代码中，通过给 div 添加不同的 id 名称来定义页面中的各个模块。
3 、 定义公共样式 在 index08.html 文件所在的文件夹内新建 css 文件夹用于存放样式表文件 style08.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下：
/*重置浏览器的默认样式*/ *{margin:0; padding:0; list-style:none;
border:0;} /*全局控制*/ body{font-size:12px; font-family:"微软雅黑";background:#f0f9fe; } a:link,a:visited{color:#000; text-decoration:none; outline:none;} a:hover{text-decoration:none;color:#0882B1;} 4 、
引入 js 文件 在站点根目录下的 js 文件夹内新建 js08.js 文件，使用链入式在 index08.html 文件中引入该文件：
<script type="text/javascript" src="js/js08.js"></script>
三、案例制作 1 、 制作头部 及导航 模块 （ （1 ）HTML 结构分析 “头部及导航”模块整体由一个大盒子<div>进行控制。中间的内容由一个<div>定义，其中，logo 部分使用<h1>标记定义，导航部门使用<ul>嵌套<li>搭建，右上角的选项部分使用<div>定义。“头部及导航”模块的具体结构如图 8-3 所示。
<h1><div><ul>嵌套<li><div><div> 图 8-3
“头部及导航”模块结构图
（ （2）
）
样式 分析 “头部及导航”模块通栏显示，需要设置宽度 100%显示。中间的内容部分宽 1000 像素，且居中显示。另外，需要设置<h1>左浮动，<ul>右浮动。此外，需要设置中间的大盒子相对定位，右上角的选项部分相对于大盒子绝对定位并设置偏移值。
（ （3）
）
搭建结构 在 index08.html 文件内书写“头部及导航”模块的 HTML 结构代码。具体如下：
1 <!--head-->
2 <div id="head">
3
<div class="top">
4
<h1 class="logo"><img src="images/logo.jpg" width="159" height="89" /></h1>
5
<div class="right">
6
<a href="#"><span>设为首页</span></a>
7
<a href="#"><span>加入收藏</span></a>
8
</div>
9
<ul class="nav">
10
<li><a href="#">益智教育</a></li>
11
<li><a href="#">课程介绍</a></li>
12
<li><a href="#">创意展示</a></li>
13
<li><a href="#">学员中心</a></li>
14
<li><a href="#">新闻动态</a></li>
15
<li><a href="#">关于我们</a></li>
16
<li><a href="#">联系我们</a></li>
17
</ul>
18
</div>
19 </div>
20 <!--head--> （ （4）
）
定义样式 在样式表文件 style08.css 中书写 CSS 样式代码，用于控制“头部及导航”模块。具体如下：
1 /*head 开始*/
2 #head{
3
width:100%;
4
height:100px;
5
border-bottom:5px solid #3FB0DC;
6
}
7 #head .top{
8
width:1000px;
9
margin:0 auto;
10
position:relative;
11
}
12 .top h1{
13
padding:10px 0 5px 5px;
14
float:left;
15
}
16 .top .right{
17
position:absolute;
18
top:25px;
19
right:20px;
20
}
21 .top .right a{
22
display:block;
23
float:left;
24
margin-right:25px;
25
background:url(../images/xb.jpg) no-repeat 0 2px;
26
padding-left:20px;
27
}
28 .top .nav{
29
width:700px;
30
height:41px;
31
margin-top:59px;
32
float:right;
33
}
34 .top .nav li{
35
float:left;
36
font-size:16px;
37
font-weight:bold;
38
text-align:center;
39
margin-right:15px;
40
}
41 .top .nav a{
42
display:block;
43
width:83px;
44
height:41px;
45
line-height:41px;
46
}
47 .top .nav a:hover{
48
background:url(../images/bg_nav.png) no-repeat 0 0;
49
color:#FFF;
50
}
51 /*head 结束*/ 保存 index08.html 与 style08.css 文件，刷新页面，效果如图 8-4 所示。
图 8-4 “头部及导航”模块效果图
当鼠标移上导航中的文字链接时，文本颜色变为白色，同时添加蓝色的背景图像。如图 8-5 所示即为鼠标移上“课程介绍”时的效果。
图 8-5 鼠标移上“课程介绍”效果 2 、 制作 banner 模块 （ （1 ）HTML 结构分析 “banner”模块整体由一个大盒子控制，其内部包含图片和按钮两部分，焦点图由无序列表<ul>定义，内部嵌套<img>标记，按钮由有序列表<ol>定义。“banner”模块的具体结构如图 8-6 所示。
<ul><ol><div> 图 8-6 “banner”模块结构图 （ （2）
）
样式 分析 首先，需设置<div>的宽高样式，且相对于浏览器做相对定位，焦点图和按钮相对于<div>做绝对定位。然后，设置页面加载完成时图片的显示状态，第一张图片显示，其他图片设置为隐藏，最后，设置按钮的相关样式。
（ （3 ）JS 效果 分析 banner 焦点图可实现自动轮播，当鼠标移动到轮播按钮时停止轮播，并显示当前轮播按钮所对应的焦点图，同时按钮的样式也发生改变，当鼠标移出时继续执行自动轮播效果，如图 8-7 所示即为鼠标悬浮到第二个按钮时的网页效果。
图 8-7 鼠标悬浮到第二个按钮效果 （ （4）
）
搭建结构 在 index08.html 文件内书写“banner”模块的 HTML 结构代码。具体如下：
1 <!--banner-->
2 <div id="banner">
3
<ul class="banner_pic" id="banner_pic">
4
<li class="current"><img src="images/banner01.jpg" width="1007" height="379" /></li>
5
<li class="pic"><img src="images/banner02.jpg" width="1007" height="379" /></li>
6
<li class="pic"><img src="images/banner03.jpg" width="1007" height="379" /></li>
7
<li class="pic"><img src="images/banner04.jpg" width="1007" height="379" /></li>
8
</ul>
9
<ol id="button">
10
<li class="current"></li>
11
<li class="but"></li>
12
<li class="but"></li>
13
<li class="but"></li>
14
</ol>
15 </div>
16 <!--banner--> （ （5）
）
定义样式 在样式表文件 style08.css 中书写 CSS 样式代码，用于控制“banner”模块。具体如下：
1 /*banner 开始*/
2 #banner{
3
width:100%;
4
height:380px;
5
position:relative;
6
overflow:hidden;
7
}
8 #banner
ul{
9
width:1920px;
10
height:380px;
11
margin:0 auto;
12
background:#EBEAE6;
13
}
14 #banner .banner_pic li{
15
display:none;
16
position:absolute;
17
left:50%;
18
top:0;
19
margin-left:-503px;}
20 #banner .banner_pic .current{display:block;}
21 #banner ol{
22
position:absolute;
23
left:350px;
24
top:320px;
25
}
26 #button li{
27
float:left;
28
width:15px;
29
height:15px;
30
background:url(../images/flashbutton.gif) no-repeat -15px 0;
31
cursor:pointer;
32
margin-left:3px;
33
}
34 #button li.current{
35
background:url(../images/flashbutton.gif) no-repeat 0 0;
36
}
37 /*banner 结束*/ 上述代码中，第 5 行代码用于设置 id 名为 banner 的盒子相对定位，第 16 行代码用于设置焦点图相对于大盒子绝对定位，第 22 行代码用于设置按钮部分相对于大盒子绝对定位。第 26~33 行代码用于设置当前的轮播按钮样式。
保存 index08.html 与 style08.css 文件，刷新页面，效果如图 8-8 所示。
图 8-8 “banner”模块效果图
（ （6）
）加 添加 JS 效果 在 js08.js 中书写实现轮播图效果的 JavaScript 代码，具体如下：
1
//焦点图轮播
2 window.onload=function(){
3
//顶部的焦点图切换
4
function hotChange(){
5
var current_index=0;
6
var timer=window.setInterval(autoChange, 3000);
7
var button_li=document.getElementById("button").getElementsByTagName("li");
8
var pic_li=document.getElementById("banner_pic").getElementsByTagName("li");
9
for(var i=0;i<button_li.length;i++){
10
button_li[i].onmouseover=function(){
11
if(timer){
12
clearInterval(timer);
13
}
14
for(var j=0;j<pic_li.length;j++){
15
if(button_li[j]==this){
16
current_index=j;
17
button_li[j].className="current";
18
pic_li[j].className="current";
19
}else{
20
pic_li[j].className="li";
21
button_li[j].className="but";
22
}
23
}
24
}
25
button_li[i].onmouseout=function(){
26
timer=setInterval(autoChange,3000);
27
}
28
}
29
function autoChange(){
30
++current_index;
31
if (current_index==button_li.length) {
32
current_index=0;
33
}
34
for(var i=0;i<button_li.length;i++){
35
if(i==current_index){
36
button_li[i].className="current";
37
pic_li[i].className="current";
38
}else{
39
button_li[i].className="but";
40
pic_li[i].className="li";
41
}
42
}
43
}
44
}
45
hotChange();
46 } 在上面的 JavaScript 代码中，第 29-43 行代码用于实现图片的自动切换，第 7~28 行代码用于获取鼠标当前停留的轮播按钮时切换到指定图片。
保存 js08.js 文件刷新页面，即可实现焦点图自动轮播效果，当鼠标悬浮到某个按钮时，显示与按钮相对应的焦点图，例如当鼠标悬浮到第三个按钮时，效果如图 8-9 所示。
图 8-9 鼠标悬浮到第三个按钮效果 3 、 制作 内容 模块 （ （1 ）HTML 结构分析 “内容”模块整体上分为左右两部分，每部分主要由两个<div>大盒子构成。其中，左右两部分又分别分为上下两个模块，每个模块都分别使用<div>搭建结构。其中，每个模块中的标题使用<h2>标记定义，图文混排分别使用<dl>列表定义，图片使用<img>标记定义。“内容”模块的具体结构如图 8-10 所示。
<div><div><div><div><div><div><h2> <h2><dl> <dl><div><h2><span>a>img a>img a>img a>img a>img<div><dl><dl><div> <a> <a> 图 8-10 “内容”模块结构图 （ （2）
）
样式 分析
“内容”模块分为左右两部分，需要设置在浏览器中居中显示。另外，需要设置左右两部分的浮动属性。此外，需要设置标题和定义列表内的文字样式及无缝滚动模块的大小、外边距、溢出隐藏等样式。
（ （3 ）JS 效果 分析 创意展示模块中的图片展示是通过无缝滚动的效果完成的，当鼠标移动到图片上时停止滚动，当鼠标移出时继续滚动。
（ （4）
）
搭建结构 在 index08.html 文件内书写“内容”模块的 HTML 结构代码。具体如下：
1 <!--content-->
2 <div id="content">
3
<div class="le...
推荐访问:《HTML5网页设计》补充案例7 网页设计 补充 完整
下一篇：桥式双梁行车操作规程