静态网页练习
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 页