网上书店前台页面设计-----Web程序开发基础(常用版).doc

网上书店前台页面设计-----Web程序开发基础（常用版）
(可以直接使用，可编辑 完整版资料，欢迎下载）
网上书店前台页面设计
一、项目说明
1. 本项目针对《Web程序开发基础》设置，任务是完成“开心网”前台静态页面的规划和设计工作。
2. 希望通过本项目，提高练习者对网页设计技术，加固对网站结构、页面布局、HTML元素等知识的理解。
3. 本项目主要使用 HTML、CSS、XML 等技术。
二、网站结构

三、总体设计要求
1. 所有风格统一，简洁大方。
2. 所有显示样式全部采用 CSS 样式表，不使用 HTML 属性控制显示样式。
3. 设计浏览器分辨率为 1024*768，页面宽度为 1000px，当用户浏览器分辨率更高时，页面居中显示。
4. 页面使用到的图片素材应统一存放在 images 子文件夹下。
四、具体页面设计要求
1. 网站首页（index.html）
A. 参考界面：
B. 设计要求：
项目
要求
等级
整体要求
页面字体为12px宋体，利用表格进行页面布局
A
页面设计改进
利用DIV取代表格进行页面布局
B
网站Logo
点击网站Logo之后可以连接到首页（其他页面同样有此要求）。
A
Logo右侧链接
当鼠标放在每个连接上时，链接背景发生变化；当点击每个连接时，窗口专向到相应的网页：
1. “首页”链接到 index.html
2. “我的当当”链接到 login.html（登录）
3. “商品分类”链接到 good_list_1.html（图书）
B
顶部右侧链接
点击连接窗口专向到相应的网页：
1. “购物车”链接到 shopping.html
2. “帮助中心”链接到 help.html
3. “我的账户”链接到 login.html
4. “新用户注册”链接到 reg.html
A
搜索条
将请求发送给“search.aspx”进行处理
A
搜索条改进
用<ul>无序列表实现“搜索分类”和“搜索关键字”的排列
B
超前学习
点击搜索关键字后自动填入到关键字框
C
分类列表
左侧和右侧的列表用<ul>无序列表实现
A
推荐商品列表
点击推荐的商品图片时，打开该商品的信息展示页面
A
底部信息
页面底部声明版权信息，ICP备案查询链接到
A

2. 注册页面（reg.html）
A. 参考页面：

B. 设计要求：
项目
要求
等级
网站Logo、顶部连接、底部连接的设计要求与网站首页同（以下页面设计要求中将不再重复本项要求）。
A
页面布局
利用DIV进行页面布局
A
注册表单
注册表单的处理程序为 register.aspx，采用 POST 方式。
A
表单中文本框的字体大小为14px；边框粗细为1像素、边框颜色为淡蓝色。
A

3. 登录页面（login.html）
A. 参考页面：

B. 设计要求：
项目
要求
等级
页面布局
采用DIV进行页面布局
B
登录页面
通过Email和密码实现登录，处理登录的程序为login.aspx，采用POST方式。
A

4. 购物车（shopping.html）
A. 参考页面：

B. 设计要求：
项目
要求
等级
页面布局
采用表格进行页面布局
A

5. 商品分类页面（good_list_1.html）
A. 参考页面：

B. 设计要求：
项目
要求
等级
分类列表
左侧的商品分类列表用<ul>无序列表实现
A
商品展示
鼠标放到商品图片上时，图片出现边框；点击时在新窗口打开商品信息页面（good_show.html）
A

6. 商品信息页面（good_show.html）
A. 参考页面：

B. 设计要求：
项目
要求
等级
商品图片
点击商品图片时在新窗口中打开大图
A
购买
点击“购买”按钮后打开“购物车”页面
A
目录
图书的目录用<ul>无序列表实现
A
提升
用 XML + XSL 制作商品信息页面
C

7. 帮助中心（help.html）
A. 参考页面：

B. 设计要求：
项目
要求
等级
布局要求
用DIV+CSS实现页面布局
A

五、相关素材