(网页设计与制作)实验8综合网页制作.ppt

文档介绍：
(1)综合利用框架、表格和CSS样式对网页元素进行布局。
(2)利用JavaScript技术实现导航网页的切换和导航菜单的展示和隐藏。
(3)掌握链接外部CSS样式表和外部JavaScript脚本文件的方法。
实验8 综合网页制作

本次实验的浏览效果如图A-11所示。
图A-11 “硬件网站”首页的浏览效果
图A-12
选择大类菜单
图A-13
DIY配件导航菜单
图A-14
显示设备导航菜单
图A-15
数码产品导航菜单
图A-13
DIY配件导航菜单

(1)puterDiy”根文件夹中新建一个子文件夹“08实验8”,在该子文件夹中创建一个命名为“”的网页文档。
(2),利用框架、表格和CSS样式表相结合的方式布局页面元素,输入文本、插入输入图片、插入Flash动画,如图A-11所示。
(3)在文件夹“08实验8”创建一个子文件夹“link”,、、,这三个网页外观如图A-13至A-15所示。
(4)编写程序代码实现导航网页的切换和导航菜单的展示和隐藏。

(1)导航网页的切换的实现方法。
在导航网页添加如下代码:
<select name="select" onChange="javascript:reSelect();" >
<option value="0">==请选择大类==</option>
<option value="1" selected>DIY配件</option>
<option value="2" >显示设备</option>
<option value="3">消费数码</option>
</select>
在JavaScript脚本文件中编写如下代码,实现其功能。
function reSelect(id)
{
if (id!=0) { document .location = "../link/left0" + id + ".html"; }
}
(2)导航菜单展示或隐藏的实现方法
实现导航菜单的展示或隐藏的程序代码如下:
<script language="javascript" type="text/javascript">
var cache_sub_id = 0;
var id = 11;
("subTable"+