《HTML5网页设计》补充案例6.docVIP

博学谷——让IT教学更简单，让IT学习更有效 PAGE 16 PAGE 2 补充案例—“传智播客”首页面制作 一、案例描述 考核知识点 运算符和表达式 条件语句、循环语句及跳转语句 练习目标 掌握运算符和表达式的使用方法。 掌握条件语句、循环语句及跳转语句。 需求分析 在浏览网页时，既能看到静态的文本、图像，也可以看到浮动的动画、信息框以及动态变换的时钟信息等。要想实现页面上这些实时的、动态的、可交互的网页效果就需要使用JavaScript语言来编写实现。通过学习本案例带领大家学习JavaScript编程基础以及变量、函数等相关知识。 案例展示 效果如图7-1所示。 “传智播客”首页面效果展示 二、布局及定义基础样式 效果分析 （1）HTML结构分析 “传智播客”首页面从上到下可以分为5个模块，如图7-2所示。 “传智播客”首页面结构分析 （2）CSS样式分析 页面中的各个模块居中显示，页面的版心为960px。另外，页面中的所有字体均为微软雅黑，字体大小为12px，这些可以通过CSS公共样式进行定义。 页面布局 新建index07.html文件，在index07.html文件内书写HTML结构代码，具体代码如下。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml xml:lang=en head meta http-equiv=Content-Type content=text/html;charset=UTF-8 title传智播客/title /head body !-- 头部 -- div class=topbar/div !-- 头部 -- !-- 导航 -- div class=nav/div !-- 导航 -- !—banner-- div id=banner/div !-—banner -- !-—内容 -- div class=content/div !-—内容 -- !-—底部-- div class=footer/div !--底部-- /div /body /html 在上述代码中，通过给div添加不同的类名或id名来定义页面中的各个模块。 定义公共样式 在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;} 引入js文件 在站点根目录下的js文件夹内新建js07.js文件，使用链入式在index07.html文件中引入该文件： script type=text/javascript src=js/js07.js/script 三、案例制作 制作头部模块 （1）HTML结构分析 “头部”模块整体由一个大盒子div进行控制。中间的内容由一个div定义，左右两边的内容由两个p标记定义。“头部”模块的具体结构如图7-3所示。 “头部”模块结构图 （2）样式分析 “头部”模块通栏显示，需要设置宽度100%显示。中间的内容部分宽960像素，且垂直居中显示。 （3）搭建结构 在index07.html文件内书写“头部”模块的HTML结构代码。具体如下： !-- 头部 -- div class=topbar div class=inner p class=top_l传智播客旗下品牌：a href=# target=_blank黑马程序员/anbsp; | nbsp;a href=# target=_blank博学谷/a/p p class=top_r改变中国IT教育，我们正在行动/p /div /div !-- 头部 -- （4）定义样式 在样式表文件style07.css中书写CSS样式代码，用于控制“头部”模块。具体如下： .topbar{ width:100%; height:40px; border-bottom:1px solid #DDD; background:#055C92; } .topbar .inner{ wi