静态网页练习精选.pdfVIP

Web 网页设计项目案例 项目案例 Web 网页设计项目案例 主要内容  网页设计基础知识应用  采用CSS 美化页面设计效果  采用JavaScript 实现页面特效、用户 交互及进行表单验证 1 项目案例 Web 网页设计项目案例 1. 项目需求 模仿“腾讯软件中心”（）页面制作。 2. 项目分析 本次项目案例课需要我们完成该类似于“腾讯软件中心”（）的页面 制作，页面的大在体风格类似“腾讯软件中心”（）的页面于网页。网页 的布局采用表格布局与div+css 布局结合。 开发工具采用Macromedia Dreamweaver，开发周期240 分钟。 3. 知识点概述及目标 在完成该项目时，我们使用到的知识点如下： 1. Dreamweaver 工具的使用。熟悉并掌握采用Dreamweaver 工具制作HTML 网站的 一般方式，并且将采用后台代码与采用工具设计结合起来。 2. 通过本项目案例将能够深化理解并掌握课程中讲到的大部分的HMTL 标签的作用 及用法。 3. 布局方式练习。本项目案例中将会用到：流式布局、表格布局、绝对定位、div+css 布局。通过项目案例了解各种布局的特点、应用场合以及具体的使用方式，并总 结一些使用的技巧。 4. 学习各种常用的CSS 样式及使用技巧。本项目案例中将会采用大量的CSS 样式来 美化网页的效果，并通过CSS 进行主体风格的控制。 5. JavaScript 基本语法应用。 6. 在已有标签中，采用JavaScript 动态输出标签，并构造一定的算法能力。主要通过 标签对象的innerHTML 和innerText 的使用。 7. 通过JavaScript 动态操作标签的样式。主要通过对标签对象的style 属性操作。 8. 其它常用的JavaScript 应用：动态显示隐藏图层、图片漂移、透明度变换、广告图 片轮换、下拉选择框级联、表单验证、正则表达式、标签事件的JavaScript 处理、 采用JavaScript 构造一定的业务逻辑、多个窗体之间在客户端进行通信等。 9. 练习自我学习能力。在提供的帮助文档中查找标签的事件、属性、方法等，从提 供的阅读材料中查找相关的知识点等。 10.通过在IE 和Firefox 浏览器上运行的可能的效果差异，体会和深刻理解浏览器对于 2 项目案例 Web 网页设计项目案例 标签属性的解读方式及CSS 样式属性的具体含义。 下面我们来介绍主要的实现内容 4. 首页index.html  参考设计形式 图1 index.html 页面的参考设计形式  布局设计 难点一：布局设计 整体布局采用div+css，“更多推荐”区、“最新动态”区、“合作伙伴”区、“产品展 示”区采用表格布局，这些分区所在位置如图所图2 所示。 div+css 布局设计图及各图层的命名如图3 所示（仅供参考）。 3 项目案例 Web 网页设计项目案例 图2 index.html 页面中的部分分区 图3 index.html 页面的参考布局 其中，在整个页面的背后置一图层（layout），用于对整个网页进行一些操作，如居中