(精品)网上书店网站设计.ppt

《(精品)网上书店网站设计.ppt》由会员分享，可在线阅读，更多相关《(精品)网上书店网站设计.ppt（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网上书店网站设计网上书店网站设计网上书店网站设计网上书店网站设计V1.0V1.0讲解和分析需求讲解和分析需求 讲解和分析需求（讲解和分析需求（20分钟）分钟）学员首先阅读项目案例需求和实现步骤学员首先阅读项目案例需求和实现步骤教员讲解需求，学员理解需求并分析教员讲解需求，学员理解需求并分析 问题描述问题描述 用户注册用户注册 用户登录用户登录 首页（网站内容的综合展示）首页（网站内容的综合展示）某类商品展示某类商品展示 详细商品展示详细商品展示 商品购买商品购买 购物车购物车 用户注册帮助中心用户注册帮助中心网上书店网站设计，实现如下功能：网上书店网站设计，实现如下功能：网站整体效果查看网站整

2、体效果查看问题分析问题分析创建模板页：创建模板页：index.dwt（网页头部及底部）（网页头部及底部）用户注册页：用户注册页：register.html用户登录页：用户登录页：login.html帮助中心：帮助中心：help.html网站首页：网站首页：index.html图书分类页：图书分类页：class.html商品详细页：商品详细页：product.html百货百货/化妆品化妆品/玩具分类页：玩具分类页：class1.html我的当当（购买结算页面）：我的当当（购买结算页面）：shopping.html网上书店网站设计共有以下几个页面：网上书店网站设计共有以下几个页面：难点分析难点分析

3、-1模板页用模板页用DIV套表格实现网页布局套表格实现网页布局网站头部网站头部网站可编辑区域网站可编辑区域网站底部网站底部难点分析难点分析-2超链接随鼠标悬停背景图改变超链接随鼠标悬停背景图改变.A background-image:url(top-bg11.jpg);width:131px;height:31px;.A:hover background-image:url(top-bg12.jpg);width:131px;height:31px;鼠标离开时超链接背景图鼠标离开时超链接背景图鼠标停留在超链接上时背景图鼠标停留在超链接上时背景图超链接背景图宽度超链接背景图宽度超链接背景图高度超

4、链接背景图高度超链接背景图宽度超链接背景图宽度超链接背景图高度超链接背景图高度查看链接效果查看链接效果难点分析难点分析-3用户注册、登录页面表单中的文本框细边框样式用户注册、登录页面表单中的文本框细边框样式input border:1#D3EAF3 solid;width:160px;文本框宽度、颜色、样式设定文本框宽度、颜色、样式设定文本框宽度文本框宽度难点分析难点分析-4.submitborder-bottom:1#cccccc solid;border-right:1#cccccc solid;border-top:0#cccccc solid;border-left:0#cccccc

5、solid;background-color:#D3EAF3;width:80px;height:25px;提交按钮四个边框的宽度、颜提交按钮四个边框的宽度、颜色、样式设定色、样式设定提交按钮背景色、宽、高设定提交按钮背景色、宽、高设定用户注册、登录页面表单中的提交按钮边框样式用户注册、登录页面表单中的提交按钮边框样式难点分析难点分析-5提交按钮用图片实现，下面以商品购买按钮为例提交按钮用图片实现，下面以商品购买按钮为例提交按钮代码：提交按钮代码：.sale background-image:url(sale.gif);width:84px;height:24px;border:0;实现图片提

6、交按扭样式：实现图片提交按扭样式：按钮背景图按钮背景图按钮样式按钮样式按钮背景图的宽、高设定按钮背景图的宽、高设定按钮背景图无边框按钮背景图无边框阶段划分阶段划分第一阶段（第一阶段（40分钟分钟）制作模板页：制作模板页：index.dwt第二阶段（第二阶段（40分钟分钟）用户注册及登录页面：用户注册及登录页面：register.html、login.html 第三阶段（第三阶段（40分钟）分钟）网站首页：网站首页：index.html 第四阶段（第四阶段（60分钟）分钟）商品分类页面商品分类页面class.html及及class1.html网页网页 第五阶段（第五阶段（30分钟）分钟）商品详细

7、页面商品详细页面product.html 第六阶段（第六阶段（30分钟）分钟）商品购买结算页面：商品购买结算页面：shopping.html 第七阶段（第七阶段（20分钟）分钟）帮助中心页面：帮助中心页面：help.html 第一阶段第一阶段第一阶段（第一阶段（40分钟）分钟）利用利用Dreamweaver制作模板页：制作模板页：index.dwt 要求学员自己动手操作，教员巡视，解答学员提出的问题要求学员自己动手操作，教员巡视，解答学员提出的问题阶段检查阶段检查针对第一阶段抽查学员的操作结果针对第一阶段抽查学员的操作结果教员给出点评或集中演示难点部分教员给出点评或集中演示难点部分第二阶段第二

8、阶段第二阶段（第二阶段（40分钟）分钟）利用利用Dreamweaver制作用户注册页面及登录页面：制作用户注册页面及登录页面：register.html、login.html 要求学员自己动手设计制作网页，教员巡视，解答学要求学员自己动手设计制作网页，教员巡视，解答学员提出的问题员提出的问题注册页面效果查看注册页面效果查看登录页面效果查看登录页面效果查看阶段检查阶段检查针对第二阶段抽查学员的网页设计制作结果针对第二阶段抽查学员的网页设计制作结果教员给出点评或集中演示难点部分教员给出点评或集中演示难点部分注册页面效果查看注册页面效果查看登录页面效果查看登录页面效果查看第三阶段第三阶段第三阶段（第

9、三阶段（40分钟）分钟）利用利用Dreamweaver制作网站首页：制作网站首页：index.html 要求学员自己动手进行网页整体布局，制作网页，教员巡要求学员自己动手进行网页整体布局，制作网页，教员巡视，解答学员提出的问题视，解答学员提出的问题首页效果查看首页效果查看阶段检查阶段检查针对第三阶段抽查学员的网页制作结果针对第三阶段抽查学员的网页制作结果抽查学员制作的整体页面，要求学员上台演示制作的网页抽查学员制作的整体页面，要求学员上台演示制作的网页并进行讲解并进行讲解教员给出点评，集中问题讲解教员给出点评，集中问题讲解首页效果查看首页效果查看第四阶段第四阶段第四阶段（第四阶段（60分钟）分

10、钟）利用利用Dreamweaver制作分类页面制作分类页面class.html及及class1.html网页网页 要求学员自己设计页面布局进行网页制作，教员巡视，解要求学员自己设计页面布局进行网页制作，教员巡视，解答学员提出的问题答学员提出的问题图书分类页面效果查看图书分类页面效果查看百货商品分类页面效果查看百货商品分类页面效果查看阶段检查阶段检查针对第四阶段抽查学员的网页制作结果针对第四阶段抽查学员的网页制作结果抽查学员制作的整体网页，要求学员上台演示制作的网页抽查学员制作的整体网页，要求学员上台演示制作的网页并进行讲解并进行讲解教员给出点评，集中问题讲解教员给出点评，集中问题讲解图书分类页

11、面效果查看图书分类页面效果查看百货商品分类页面效果查看百货商品分类页面效果查看第五阶段第五阶段第五阶段（第五阶段（30分钟）：分钟）：利用利用Dreamweaver制作商品详细页面制作商品详细页面product.html 要求学员自己设计制作页面，教员巡视，解答学员提出的问题要求学员自己设计制作页面，教员巡视，解答学员提出的问题商品详细页面效果查看商品详细页面效果查看阶段检查阶段检查针对第五阶段抽查学员的网页制作针对第五阶段抽查学员的网页制作抽查学员制作的整体页面，要求学员上台演示制作的页面抽查学员制作的整体页面，要求学员上台演示制作的页面并进行讲解并进行讲解教员给出点评，集中问题讲解教员给出

12、点评，集中问题讲解商品详细页面效果查看商品详细页面效果查看第六阶段第六阶段第六阶段（第六阶段（30分钟）分钟）利用利用Dreamweaver制作商品购买结算页面：制作商品购买结算页面：shopping.html 要求学员自己设计制作页面，教员巡视，解答学员提出的要求学员自己设计制作页面，教员巡视，解答学员提出的问题问题商品购买结算页面效果查看商品购买结算页面效果查看阶段检查阶段检查针对第六阶段抽查学员的网页制作结果针对第六阶段抽查学员的网页制作结果抽查学员制作的整体页面，要求学员上台演示制作的页面抽查学员制作的整体页面，要求学员上台演示制作的页面并进行讲解并进行讲解教员给出点评，集中问题讲解教

13、员给出点评，集中问题讲解商品购买结算页面效果查看商品购买结算页面效果查看第七阶段第七阶段第七阶段（第七阶段（20分钟）分钟）利用利用Dreamweaver制作帮助中心页面：制作帮助中心页面：help.html 要求学员自己设计制作页面，教员巡视，解答学员提出的问要求学员自己设计制作页面，教员巡视，解答学员提出的问题题帮助中心页面效果查看帮助中心页面效果查看阶段检查阶段检查针对第七阶段抽查学员的网页制作结果针对第七阶段抽查学员的网页制作结果抽查学员制作的整体页面，要求学员上台演示制作的网页抽查学员制作的整体页面，要求学员上台演示制作的网页并进行讲解并进行讲解教员给出点评，集中问题讲解教员给出点评，集中问题讲解帮助中心页面效果查看帮助中心页面效果查看总结总结教员对本次项目案例巩固的知识点总结（教员对本次项目案例巩固的知识点总结（20分钟）分钟）CSS样式表在网页中的应用样式表在网页中的应用 HTML基本标签的使用基本标签的使用 DIV套表格的网页布局套表格的网页布局 表单在网页中的应用表单在网页中的应用模板的使用模板的使用