网上书店前台页面设计-----Web程序开发基础

1、网上书店前台页面设计一、项目说明1. 本项目针对Web程序开发基础设置，任务是完成“开心网”前台静态页面的规划和设计工作。2. 希望通过本项目，提高练习者对网页设计技术，加固对网站结构、页面布局、HTML元素等知识的理解。3. 本项目主要使用 HTML、CSS、XML 等技术。二、网站结构三、总体设计要求1. 所有风格统一，简洁大方。2. 所有显示样式全部采用 CSS 样式表，不使用 HTML 属性控制显示样式。3. 设计浏览器分辨率为 1024*768，页面宽度为 1000px，当用户浏览器分辨率更高时，页面居中显示。4. 页面使用到的图片素材应统一存放在 images 子文件夹下。四、具体

2、页面设计要求1. 网站首页（index.html）A. 参考界面：B. 设计要求：项目要求等级整体要求页面字体为12px宋体，利用表格进行页面布局A页面设计改进利用DIV取代表格进行页面布局B网站Logo点击网站Logo之后可以连接到首页（其他页面同样有此要求）。ALogo右侧链接当鼠标放在每个连接上时，链接背景发生变化；当点击每个连接时，窗口专向到相应的网页：1. “首页”链接到 index.html2. “我的当当”链接到 login.html（登录）3. “商品分类”链接到 good_list_1.html（图书）B顶部右侧链接点击连接窗口专向到相应的网页：1. “购物车”链接到 sho

3、pping.html2. “帮助中心”链接到 help.html3. “我的账户”链接到 login.html4. “新用户注册”链接到 reg.htmlA搜索条将请求发送给“search.aspx”进行处理A搜索条改进用<ul>无序列表实现“搜索分类”和“搜索关键字”的排列B超前学习点击搜索关键字后自动填入到关键字框C分类列表左侧和右侧的列表用<ul>无序列表实现 A推荐商品列表点击推荐的商品图片时，打开该商品的信息展示页面A底部信息页面底部声明版权信息，ICP备案查询链接到 A2. 注册页面（reg.html）A. 参考页面：B. 设计要求：项目要求等级网站Logo

4、、顶部连接、底部连接的设计要求与网站首页同（以下页面设计要求中将不再重复本项要求）。A页面布局利用DIV进行页面布局A注册表单注册表单的处理程序为 register.aspx，采用 POST 方式。A表单中文本框的字体大小为14px；边框粗细为1像素、边框颜色为淡蓝色。A3. 登录页面（login.html）A. 参考页面：B. 设计要求：项目要求等级页面布局采用DIV进行页面布局B登录页面通过Email和密码实现登录，处理登录的程序为login.aspx，采用POST方式。A4. 购物车（shopping.html）A. 参考页面：B. 设计要求：项目要求等级页面布局采用表格进行页面布局A5. 商品分类页面（good_list_1.html）A. 参考页面：B. 设计要求：项目要求等级分类列表左侧的商品分类列表用<ul>无序列表实现A商品展示鼠标放到商品图片上时，图片出现边框；点击时在新窗口打开商品信息页面（good_show.html）A6. 商品信息页面（good_show.html）A. 参考页面：B. 设计要求：项目要求等级商品图片点击商品图片时在新窗口中打开大图A购买点击“购买”按钮后打开“购物车”页面A目录图书的目录用<ul>无序列表实现A提升用 XML + XS