静态网页练习

《静态网页练习》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Web网页设计项目案例项目案例Web网页设计项目案例主要内容网页设计基础知识应用采用CSS美化页面设计效果采用JavaScript实现页面特效、用户交互及进行表单验证1项目案例Web网页设计项目案例1.项目需求模仿“腾讯软件中心”（http://pc.qq.com）页面制作。2.项目分析本次项目案例课需要我们完成该类似于“腾讯软件中心”（http://pc.qq.com）的页面制作，页面的大在体风格类似“腾讯软件中心”（http://pc.qq.com）的页面于网页。网页的布局采用表格布局与div+css布局结合。开发工具采用MacromediaDreamweaver，开发周期24

2、0分钟。3.知识点概述及目标在完成该项目时，我们使用到的知识点如下：1.Dreamweaver工具的使用。熟悉并掌握采用Dreamweaver工具制作HTML网站的一般方式，并且将采用后台代码与采用工具设计结合起来。2.通过本项目案例将能够深化理解并掌握课程中讲到的大部分的HMTL标签的作用及用法。3.布局方式练习。本项目案例中将会用到：流式布局、表格布局、绝对定位、div+css布局。通过项目案例了解各种布局的特点、应用场合以及具体的使用方式，并总结一些使用的技巧。4.学习各种常用的CSS样式及使用技巧。本项目案例中将会采用大量的CSS样式来美化网页的效果，并通过CSS进行主体风格的控

3、制。5.JavaScript基本语法应用。6.在已有标签中，采用JavaScript动态输出标签，并构造一定的算法能力。主要通过标签对象的innerHTML和innerText的使用。7.通过JavaScript动态操作标签的样式。主要通过对标签对象的style属性操作。8.其它常用的JavaScript应用：动态显示隐藏图层、图片漂移、透明度变换、广告图片轮换、下拉选择框级联、表单验证、正则表达式、标签事件的JavaScript处理、采用JavaScript构造一定的业务逻辑、多个窗体之间在客户端进行通信等。9.练习自我学习能力。在提供的帮助文档中查找标签的事件、属性、方法等，从提供的

4、阅读材料中查找相关的知识点等。10.通过在IE和Firefox浏览器上运行的可能的效果差异，体会和深刻理解浏览器对于2项目案例Web网页设计项目案例标签属性的解读方式及CSS样式属性的具体含义。下面我们来介绍主要的实现内容4.首页index.html参考设计形式图1index.html页面的参考设计形式布局设计难点一：布局设计整体布局采用div+css，“更多推荐”区、“最新动态”区、“合作伙伴”区、“产品展示”区采用表格布局，这些分区所在位置如图所图2所示。div+css布局设计图及各图层的命名如图3所示（仅供参考）。3项目案例Web网页设计项目案例图2index.html页面中的

5、部分分区图3index.html页面的参考布局其中，在整个页面的背后置一图层（layout），用于对整个网页进行一些操作，如居中等；顶部菜单栏（topHeader）用于实现向其它的一些功能模块的导航功能；网页中除去顶部导航菜单栏的其余部分，采用一个图层包起来（other），该部分划分为网页的页眉（header）、内容（content）和页脚（footer），其中页眉用于表现公司的logo图标及一段声明性的文字，内容区域为网页的主体内容所在，页脚部分显示版权信息；内容区域可进一步划分为上4项目案例Web网页设计项目案例（contentTop）、下（contentBottom）两部分，上部分

6、再划分为左（contentTopLeft）、右（conentTopRight）两部分，其中左部分用于显示广告信息，右部分用于显示更多的推荐产品信息，下部分再划分为左（conentBottomLeft）、右（conentBottomRright）两部分，左部分用于显示主要的产品展示信息，右部分可进一步划分，用于表现一些最新动态信息及合作伙伴链接信息。需要注意的是，在div+css的布局中，大量的采用的“层套层”的方式，如在图3中，contentTopLeft和contentTopRight被contentTop所包含。在应用中如果有两个或多个图层如果需要设置它们之间的关系，如左右排列成一行

7、，一般最好在它们的外围再套上一个层，这样的处理不论将来维护两个图层的风格一致性，还是将图层变为浮动元素来设置它们之间的位置关系等等，都是比较稳定的方式。实现要求顶部导航菜单栏的菜单不限制其实现方式，其中“QQ邮箱”项，点击后可链接到mail.html，用于登录QQ邮箱。页眉的导航菜单部分，光标移动到菜单项上方时要求字体放大。参考CSS样式代码如下（设光标移动到菜单项前菜单项的字体大小为14px，菜单项位于id为headerMe