Web 网页设计项目案例
项目案例
Web 网页设计项目案例
主要内容
网页设计基础知识应用 采用 CSS 美化页面设计效果 采用 JavaScript 实现页面特效、用户
交互及进行表单验证
1
项目案例 Web 网页设计项目案例
1. 项目需求
模仿“腾讯软件中心”（）页面制作。
广告区的实现，采用 JavaScript 实现 4 幅广告轮换。参考实现代码如下：
代码演示：JavaScript 实现广告轮换
5
项目案例 Web 网页设计项目案例
<script type="text/javascript"> var index = 0; //广告轮换 function ad() { //记录要轮换的四幅广告图片 var ary = new Array("images/ad_doctor.jpg","images/ad_qqpinyin.jpg","images/ad_tt.jpg","ima ges/ad_ttmobile.jpg"); var url = ary[index]; //ad 为显示广告图片的<img>标签的 id var img = document.getElementById("ad"); img.src = url; index++; if(index>3) {
需要注意的是，在 div+css 的布局中，大量的采用的“层套层”的方式，如在图 3 中， contentTopLeft 和 contentTopRight 被 contentTop 所包含。在应用中如果有两个或多个图层如 果需要设置它们之间的关系，如左右排列成一行，一般最好在它们的外围再套上一个层，这 样的处理不论将来维护两个图层的风格一致性，还是将图层变为浮动元素来设置它们之间的 位置关系等等，都是比较稳定的方式。
其中样式选择器“#contentBottomLeft table#products td”是一个“E F”型选择器，表 示 id 为 contentBottomLeft 的标签下如有<table>标签且其 id 为 products，则其中的<td>应 用上述样式。
“最新动态”区，主体采用表格布局，标题及标题下的横线可以采用层布局。主 体的表格布局中，可以采用<ul>标签实现列表数据。
代码演示：记录产品信息的各数组
//记录各个产品的产品信息 var ary11 = ["1","images/products.html.files/15139625.gif","QQ","免费的即时通讯 平台，带来更多沟通乐趣！","products/qq.exe"]; var ary12 = ["1","images/products.html.files/14662071.gif","TM","具有办公特色的 即时通讯平台，效率更出众！","products/qq.exe"]; var ary13 = ["1","images/products.html.files/14662051.gif","和悦","用电脑打电话， 网络电话新体验！","products/qq.exe"]; var ary14 = ["1","images/products.html.files/14662069.gif","RTX","企业即时沟通 平台，提高效率，降低成本！","products/qq.exe"]; var ary15 = ["1","images/products.html.files/14662073.gif","Foxmail","功能强大的 邮件管理工具，支持各种网络邮箱！","products/qq.exe"]; var ary21 = ["2","images/products.html.files/15114854.gif","QQ 软件管理","轻松、 方便的管理系统和软件！","products/qq.exe"]; var ary22 = ["2","images/products.html.files/qqplayerlogo.gif","QQ 影音","全能绿 色的播放器，五星级的视听享受！","products/qq.exe"]; var ary23 = ["2","images/products.html.files/15291924.gif","QQ 拼音","更快、更准、 更绿色，让书写成为享受！","products/qq.exe"]; var ary24 = ["2","images/products.html.files/14660890.gif","TT 浏览器","快速、稳 定、安全的多页面浏览器！","products/qq.exe"]; var ary25 = ["2","images/products.html.files/32.gif","QQ 旋风 2","极速清爽绿色下载 工具，海量资源，一网打尽！","products/qq.exe"]; var ary31 = ["3","images/products.html.files/14629865.gif","手机 QQ","免费手机聊 QQ，带给您随时随地沟通乐趣！","products/qq.exe"]; var ary32 = ["3","images/products.html.files/14660890.gif","QQ 浏览器(手机版)","
index = 0; } //每 2000ms 轮换一次 setTimeout("ad()",2000); } </script>
“更多推荐”区，主体采用表格布局，标题及标题下的横线可以采用层布局。 “产品展示”区（“腾讯软件”区），主体采用表格布局，标题及标题下的横线可
以采用层布局。主体的表格布局中，不同产品的分隔划线段可以通过设置表格中 单元格的下边框的 CSS 样式来实现，此样式可参考如下代码实现：
4
项目案例 Web 网页设计项目案例
（ contentTop ）、 下 （ contentBottom ） 两 部 分 ，上 部分 再 划 分 为 左（ contentTopLeft ）、 右 （conentTopRight）两部分，其中左部分用于显示广告信息，右部分用于显示更多的推荐产 品信息，下部分再划分为左（conentBottomLeft）、右（conentBottomRright）两部分，左部 分用于显示主要的产品展示信息，右部分可进一步划分，用于表现一些最新动态信息及合作 伙伴链接信息。
2
项目案例 Web 网页设计项目案例
标签属性的解读方式及 CSS 样式属性的具体含义。 下面我们来介绍主要的实现内容
4. 首页 index.html
参考设计形式
图 1 index.html 页面的参考设计形式
布局设计
难点一：布局设计 整体布局采用 div+css，“更多推荐”区、“最新动态”区、“合作伙伴”区、“产品展 示”区采用表格布局，这些分区所在位置如图所图 2 所示。 div+css 布局设计图及各图层的命名如图 3 所示（仅供参考）。
编号
所在图层编号
区域名称
1
div1
联络沟通
2
div2
装机工具
3
div3
无线新生活
4
div4
生活品味
5
div5
安全效率
6
div6
休闲游戏
表 1 产品区域及其所在图层编号表
将所有的产品区域所在图层及产品标题名称信息包装到 hash 对象中，参考代码如 下：
9
项目案例 Web 网页设计项目案例
代码演示：记录区域及其所在图层的编号
3
项目案例 Web 网页设计项目案例
图 2 index.html 页面中的部分分区
图 3 index.html 页面的参考布局
其中，在整个页面的背后置一图层（layout），用于对整个网页进行一些操作，如居中等； 顶部菜单栏（topHeader）用于实现向其它的一些功能模块的导航功能；网页中除去顶部导 航菜单栏的其余部分，采用一个图层包起来（other），该部分划分为网页的页眉（header）、 内容（content）和页脚（footer），其中页眉用于表现公司的 logo 图标及一段声明性的文字， 内容区域为网页的主体内容所在，页脚部分显示版权信息；内容区域可进一步划分为上
“合作伙伴”区，主体采用表格布局，标题及标题下的横线可以采用层布局实现。 index.html 页面中的超链接部分除上面说明的外，其余不用实现。
5. 产品大全页 products.html
参考设计形式
7
项目案例 Web 网页设计项目案例
图 4 products.html 页