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

博学谷——让IT教学更简单，让IT学习更有效 PAGE 20 PAGE 1 补充案例—“儿童益智网”首页面制作 一、案例描述 考核知识点 节点的访问 数组的常用属性和方法 JavaScript常用事件 练习目标 掌握访问指定元素和相关元素的方法。 掌握通过触发事件完成JavaScript与对象之间的交互。 需求分析 采用事件驱动是JavaScript语言的一个最基本的特征。比如在浏览网页时，通过单击鼠标或按键，可以触发与这个事件相关联的JavaScript对象，从而实现不同的功能。通过学习本案例带领大家学习JavaScript对象、数组的常用属性和方法、节点的访问以及JavaScript常用事件等相关知识。 案例展示 效果如图8-1所示。 “儿童益智网”首页面效果展示 二、布局及定义基础样式 效果分析 （1）HTML结构分析 “儿童益智网”首页面从上到下可以分为4个模块，如图8-2所示。 “儿童益智网”首页面结构分析 （2）CSS样式分析 页面背景色为淡蓝色，各个模块居中显示，且页面版心为1000px。另外，页面中的所有字体均设置为微软雅黑，大小为12px，a链接访问前的文字颜色为黑色，访问后的文字颜色为蓝色。这些可以通过CSS公共样式进行定义。 页面布局 新建index08.html文件，在index08.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 !--head-- div id=head/div !--head-- !—banner-- div id=banner/div !-—banner -- !--content-- div id=content/div !--content-- !--footer-- div id=footer/div !--footer-- /div /body /html 在上述代码中，通过给div添加不同的id名称来定义页面中的各个模块。 定义公共样式 在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;} 引入js文件 在站点根目录下的js文件夹内新建js08.js文件，使用链入式在index08.html文件中引入该文件： script type=text/javascript src=js/js08.js/script 三、案例制作 制作头部及导航模块 （1）HTML结构分析 “头部及导航”模块整体由一个大盒子div进行控制。中间的内容由一个div定义，其中，logo部分使用h1标记定义，导航部门使用ul嵌套li搭建，右上角的选项部分使用div定义。“头部及导航”模块的具体结构如图8-3所示。 “头部及导航”模块结构图 （2）样式分析 “头部及导航”模块通栏显示，需要设置宽度100%显示。中间的内容部分宽1000像素，且居中显示。另外，需要设置h1左浮动，ul右浮动。此外，需要设置中间的大盒子相对定位，右上角的选项部分相对于大盒子绝对定位并设置偏移值。 （3）搭建结构 在index08.html文件内书写“头部及导航”模块的HTML结构代码。具体如下： !--head-- div id=head div class=top h1 class=logoimg src=images/logo.jpg width=159 height=89 //h1 div class=right a href=#span设为首页/span/a a href=#span加入收藏/spa