下面是小编为大家整理的《HTML5网页设计》补充案例6,供大家参考。
补充案例 — “ 传智播客 ” 首页 面制作 一、案例描述
1 、 考核知识点 运算符和表达式 条件语句、循环语句及跳转语句 2 、 练习目标 掌握运算符和表达式的使用方法。
掌握条件语句、循环语句及跳转语句。
3 、 需求分析 在浏览网页时，既能看到静态的文本、图像，也可以看到浮动的动画、信息框以及动态变换的时钟信息等。要想实现页面上这些实时的、动态的、可交互的网页效果就需要使用 JavaScript 语言来编写实现。通过学习本案例带领大家学习 JavaScript 编程基础以及变量、函数等相关知识。
4 、 案例 展示 效果如图 7-1 所示。
图 7-1
“传智播客”首页面效果展示 二、 布局及定义基础样式 1 、 效果分析 （ （1 ）HTML 结构分析 “传智播客”首页面从上到下可以分为 5 个模块，如图 7-2 所示。
头部导航banner内容底部 图 7-2
“传智播客”首页面结构分析 （ （2 ）CSS 样式分析 页面中的各个模块居中显示，页面的版心为 960px。另外，页面中的所有字体均为微软雅黑，字体大小为 12px，这些可以通过 CSS 公共样式进行定义。
2 、 页面布局 新建 index07.html 文件，在 index07.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 <!-- 头部 -->
10 <div class="topbar"></div>
11 <!-- 头部 -->
12 <!-- 导航 -->
13 <div class="nav"></div>
14 <!-- 导航 -->
15 <!—banner-->
16 <div id="banner"></div>
17 <!-—banner -->
18 <!-—内容 -->
19 <div class="content"></div>
20 <!-—内容 -->
21 <!-—底部-->
22 <div class="footer"></div>
23 <!--底部-->
24 </div>
25 </body>
26 </html> 在上述代码中，通过给 div 添加不同的类名或 id 名来定义页面中的各个模块。
3 、 定义公共样式 在 index07.html 文件所在的文件夹内新建 css 文件夹用于存放样式表文件 style07.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下：
/*重置浏览器的默认样式*/ *{ margin:0; padding:0; list-style:none; border:0;} /*全局控制*/ body{font-family:"微软雅黑";font-size:12px;} a:link,a:visited{text-decoration:none;} a:hover{outline:none;} 4 、
引入 js 文件 在站点根目录下的 js 文件夹内新建 js07.js 文件，使用链入式在 index07.html 文件中引入该文件：
<script type="text/javascript" src="js/js07.js"></script>
三、案例制作 1 、 制作头部模块 （ （1 ）HTML 结构分析 “头部”模块整体由一个大盒子<div>进行控制。中间的内容由一个<div>定义，左右两边的内容由两个<p>标记定义。“头部”模块的具体结构如图 7-3 所示。
<p><p><div> 图 7-3
“头部”模块结构图 （ （2）
）
样式 分析
“头部”模块通栏显示，需要设置宽度 100%显示。中间的内容部分宽 960 像素，且垂直居中显示。
（ （3）
）
搭建结构 在 index07.html 文件内书写“头部”模块的 HTML 结构代码。具体如下：
1 <!-- 头部 -->
2
<div class="topbar">
3
<div class="inner">
4
<p class="top_l">传智播客旗下品牌：<a href="#" target="_blank">黑马程序员</a>&nbsp; | &nbsp;<a href="#" target="_blank">博学谷</a></p>
5
<p class="top_r">改变中国 IT 教育，我们正在行动</p>
6
</div>
7
</div>
8 <!-- 头部 --> （ （4）
）
定义样式 在样式表文件 style07.css 中书写 CSS 样式代码，用于控制“头部”模块。具体如下：
1 .topbar{
2
width:100%;
3
height:40px;
4
border-bottom:1px solid #DDD;
5
background:#055C92;
6
}
7 .topbar .inner{
8
width:960px;
9
margin:0 auto;
10
font-size:12px;
11
line-height:40px;
12
color:#FFF;
13
}
14 .topbar .inner a{color:#FFF;}
15 .topbar .top_l{
16
float:left;
17
}
18 .topbar .top_r{
19
float:right;
20
} 保存 index07.html 与 style07.css 文件，刷新页面，效果如图 7-4 所示。
图 7-4
“头部”模块效果图
2 、 制作导航模块 （ （1 ）HTML 结构分析 “导航”模块整体由一个大盒子<div>进行控制，分为 logo 和导航列表两部分。logo 部分由<h1>标记定义，导航列表部分整体使用<ul>标记搭建结构，其中每个导航栏目分别使用<li>标记定义。“导航”模块的具体结构如图 7-5 所示。
<h1><ul>嵌套<li><div> 图 7-5
“导航”模块结构图 （ （2）
）
样式 分析 “导航”模块左右两部分并列显示，需要设置左右两部分分别左浮动。另外，定义<li>标记左浮动，并定义相关的文字样式。此外，设置鼠标移上超链接时，对应的导航文本颜色变为橙色。
（ （3）
）
搭建结构 在 index07.html 文件内书写“导航”模块的 HTML 结构代码。具体如下：
1 <!-- 导航 -->
2
<div class="nav">
3
<h1><a href="#"><img src="images/logo.png" alt="传智播客"></a></h1>
4
<ul class="nav_li">
5
<li><a href="#">免费学习资源</a></li>
6
<li><a href="#" target="_blank">课程中心</a></li>
7
<li><a href="#" target="_blank">原创教材</a></li>
8
<li><a href="#" target="_blank">学员故事</a></li>
9
<li><a href="#" target="_blank">传智社区</a></li>
10
</ul>
11
</div>
12 <!-- 导航 --> （ （4）
）
定义样式 在样式表文件 style07.css 中书写 CSS 样式代码，用于控制“导航”模块。具体如下：
1 .nav{
2
width:960px;
3
height:110px;
4
margin:0 auto;
5
}
6 .nav h1{
7
float:left;
8
padding:30px 0;
9
}
10 .nav_li{
11
width:560px;
12
float:left;
13
margin-left:65px;
14
}
15 .nav_li li{
16
float:left;
17
font-size:16px;
18
line-height:110px;
19
margin-right:35px;
20
}
21 .nav_li li a{color:#333333;}
22 .nav_li li a:hover{color:#F60;} 上述代码中，第 7 行和第 12 行代码分别用于设置导航模块 logo 部分和导航列表左浮动。第 16 行代码用于定义每个导航栏目左浮动，从而在一行内并列显示。
保存 index07.html 与 style07.css 文件，刷新页面，效果如图 7-6 所示。
图 7-6
“导航”模块效果图 当鼠标移上导航中的文字链接时，对应的导航文本颜色变为橙色。如图 7-7 所示即为鼠标移上“课程中心”时的效果。
图 7-7
鼠标移上“课程中心”效果 3 、 制作 banner 模块 （ （1 ）HTML 结构分析 “banner”模块整体上由<div>标记定义，包括左侧侧边栏和焦点图两部分。其中，左侧侧边栏使用无序列表<ul>定义，里面的每一行栏目使用<li>定义，栏目中的文字说明通过<a>标记定义。另外，焦点图使用<img>定义。“banner”模块的具体结构如图 7-8 所示。
<div><ul>嵌套<li><img><a><a><a><a><a><a><a><a><a><a> 图 7-8
“banner”模块结构图 （ （2）
）
样式 分析 “banner”模块需要设置控制整体的大盒子相对定位，焦点图相当于大盒子绝对定位，并通过边偏移值来确定具体位置。另外，需要定义左侧侧边栏中的文本样式。
（ （3 ）JS 效果 分析 观察效果图 7-1 可以看出，侧边栏的导航栏目奇数行的背景色为浅蓝色，可以通过在 CSS 样式中定义一个类，并使用 JavaScript 脚本给对应的导航栏添加类名实现。
另外，当鼠标移动到侧边栏的“Android 培训”时，在其右侧将出现一个背景色为灰色，并带有边框的下拉菜单，效果如图 7-9 所示；当鼠标移出后，侧边栏恢复原来的样式。
图 7-9
鼠标移到“Android 培训”效果图 （ （4）
）
搭建结构 在 index07.html 文件内书写“banner”模块的 HTML 结构代码。具体如下：
1 <!-- banner -->
2 <div id="banner">
3 <!-- 首页 slide 左侧导航 -->
4
<div class="sub_nav">
5
<ul class="nav_txt">
6
<li><a href="#"><span>JavaEE 培训</span><i>></i></a></li>
7
<li><a href="#"><span>Android 培训</span><i>></i></a></li>
8
<li><a href="#"><span>PHP 培训</span><i>></i></a></li>
9
<li><a href="#"><span>UI 设计培训</span><i>></i></a></li>
10
<li><a href="#"><span>iOS 培训</span><i>></i></a></li>
11
<li><a href="#"><span>前端与移动开发培训</span><i>></i></a></li>
12
<li><a href="#"><span>C/C++培训</span><i>></i></a></li>
13
<li><a href="#"><span>网络营销培训</span><i>></i></a></li>
14
<li><a href="#"><span>Python 培训</span><i>></i></a></li>
15
<li><a href="#"><span>云计算之大数据培训</span><i>></i></a></li>
16
</ul>
17
<div class="pic01"><img src="images/pic01.png" /></div>
18
</div>
19 </div>
20 <!-- banner --> （ （5）
）
定义样式 在样式表文件 style07.css 中书写 CSS 样式代码，用于控制“banner”模块。具体如下：
1 /*banner*/
2 #banner{
3
width:960px;
4
height:400px;
5
margin:0 auto;
6
position:relative;
7
}
8 .sub_nav{
9
width:235px;
10
height:400px;
11
background:#055c92;
12 }
13 .sub_nav .nav_txt{ height:400px;}
14 .sub_nav .nav_txt li a{
15
font-size:14px;
16
color:#FFF;
17
display:block;
18
height:40px;
19
line-height:38px;
20
padding:0 38px;
21
}
22 .sub_nav .nav_txt li a span{ float:left;}
23 .sub_nav .nav_txt li a i{
24
font-style:normal;
25
float:right;
26
}
27 #banner .pic01{
28
position:absolute;
29
left:235px;
30
top:0px;
31 } 上述代码中，第 6 行代码用于设置 id 名为 banner 的盒子相对定位，第 28 行代码用于设置焦点图相对于 banner 盒子绝对定位。
保存 index07.html 与 style07.css 文件，刷新页面，效果如图 7-10 所示。
图 7-10 “banner”模块效果图 （ （6）
）加 添加 JS 效果 下面，通过 JavaScript 控制左侧侧边栏奇数行列表的背景色。具体如下：
a) 定义 奇 数行 列表的 的 CSS 样式 .even{background-color:#0572b6;}
/*定义一个新类*/ 上述代码，用来设置左侧侧边栏奇数行列表的背景色为浅蓝色。
b) 书写 奇数行 列表的 的 JavaScript 代码
1 function changeColor(){
2
//获取所有行
3
var trs
= document.getElementById("banner").getElementsByTagName("li");
4
//为奇数行添加 class 属性
5
for(var i=0; i<trs.length; i=i+2){
6
trs[i].className="even";
7
}
8
} 在上面的 JavaScript 代码中，第 3 行代码用于获取 banner 盒子中所有的<li>列表行数。第 5~6 行代码用于设置 i 的初始值为 0，然后指定循环条件“i<trs.length;”，当“i<trs.length;”时，就会将 class 为 even的类赋给第 i 行，最后让变量 i 进行自增，当“i>trs.length;”时，循环结束。
保存 js 文件，刷新页面，此时，左侧侧边栏奇数行列表的背景色将会发生变化，效果如图 7-11 所示。
图 7-11 侧边栏奇数行背景色发生变化 接下来，通过 JavaScript 控制侧边栏下拉菜单的显示和隐藏。具体如下：
a) 添加 下拉 菜单结构代码 将下拉菜单的结构代码添加到“Android 培训”所在的<li>标签内部，代码修改如下：
1 <li class="list" onmouseover="change("list_cur","block")" onmouseout="change
2
("list_cur","none")"><a href="#"><span>Android 培训</span><i>></i></a>
3
<div id="list_cur">
4
<a href="#"><img src="images/icon01.png"/><span>课程详情</span></a>
5
<a href="#"><img src="images/icon02.png"/><span>就业薪资</span></a>
6
<a href="#"><img src="images/icon03.png"/><span>教学资料</span></a>
7
<a href="#"><img src="images/icon04.png"/><span>视频下载</span></a>
8
</div>
9
</li> b) 定义单 下拉菜单 CSS 样式
1 #list_cur{
2
width:125px;
3
height:398px;
4
position:absolute;
5
left:235px;
6
top:0;
7
z-index:999;
8
display:none;
9
}
10 #list_cur a{
11
display:block;
12
width:110px;
13
height:80px;
14
padding:9px;
15
color:#000;
16
}
17 #list_cur a:hover{color:#F60;}
18 #list_cur...
推荐访问:《HTML5网页设计》补充案例6 网页设计 补充 案例