网上书店网站设计.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,网上书店网站设计,V1.0,讲解和分析需求,讲解和分析需求（,20,分钟）,学员首先阅读项目案例需求和实现步骤,教员讲解需求，学员理解需求并分析,问题描述,用户注册,用户登录,首页（网站内容的综合展示）,某类商品展示,详细商品展示,商品购买,购物车,用户注册帮助中心,网上书店网站设计，实现如下功能：,网站整体效果查看,问题分析,创建模板页：,index.dwt,（网页头部及底部）,用户注册页：,register.html,用户登录页：,login.html,帮助中心：,help.html,网站首页：,index.html,图书分类页：class.html,商品详细页：,product.html,百货,/,化妆品,/,玩具分类页：,class1.html,我的当当（购买结算页面）：,shopping.html,网上书店网站设计共有以下几个页面：,难点分析,-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;,鼠标离开时超链接背景图,鼠标停留在超链接上时背景图,超链接背景图宽度,超链接背景图高度,超链接背景图宽度,超链接背景图高度,查看链接效果,难点分析,-3,用户注册、登录页面表单中的文本框细边框样式,input border:1#D3EAF3 solid;,width:160px;,文本框宽度、颜色、样式设定,文本框宽度,难点分析,-4,.submit,border-bottom:1#,cccccc,solid;,border-right:1#,cccccc,solid;,border-top:0#,cccccc,solid;,border-left:0#,cccccc,solid;,background-color:#D3EAF3;,width:80px;height:25px;,提交按钮四个边框的宽度、颜色、样式设定,提交按钮背景色、宽、高设定,用户注册、登录页面表单中的提交按钮边框样式,难点分析,-5,提交按钮用图片实现，下面以商品购买按钮为例,提交按钮代码：,.sale background-,image:url(sale.gif,);,width:84px;height:24px;,border:0;,实现图片提交按扭样式：,按钮背景图,按钮样式,按钮背景图的宽、高设定,按钮背景图无边框,阶段划分,第一阶段（,40,分钟,）,制作模板页：,index.dwt,第二阶段（,4,0,分钟,）,用户注册及登录页面：,register.html,、,login.html,第三阶段（,40,分钟）,网站首页：,index.html,第四阶段（,60,分钟）,商品分类页面,class.html,及,class1.html,网页,第五阶段（,30,分钟）,商品详细页面,product.html,第六阶段（,30,分钟）,商品购买结算页面：,shopping.html,第七阶段（,20,分钟）,帮助中心页面：,help.html,第一阶段,第一阶段（,40,分钟）,利用,Dreamweaver,制作模板页：,index.dwt,要求学员自己动手操作，教员巡视，解答学员提出的问题,阶段检查,针对第一阶段抽查学员的操作结果,教员给出点评或集中演示难点部分,第二阶段,第二阶段（,40,分钟）,利用,Dreamweaver,制作用户注册页面及登录页面：,register.html,、,login.html,要求学员自己动手设计制作网页，教员巡视，解答学员提出的问题,注册页面效果查看,登录页面效果查看,阶段检查,针对第二阶段抽查学员的网页设计制作结果,教员给出点评或集中演示难点部分,注册页面效果查看,登录页面效果查看,第三阶段,第三阶段（,40,分钟）,利用,Dreamweaver,制作网站首页：,index.html,要求学员自己动手进行网页整体布局，制作网页，教员巡视，解答学员提出的问题,首页效果查看,阶段检查,针对第三阶段抽查学员的网页制作结果,抽查学员制作的整体页面，要求学员上台演示制作的网页并进行讲解,教员给出点评，集中问题讲解,首页效果查看,第四阶段,第四阶段（,60,分钟）,利用,Dreamweaver,制作分类页面,class.html,及,class1.html,网页,要求学员自己设计页面布局进行网页制作，教员巡视，解答学员提出的问题,图书分类页面效果查看,百货商品分类页面效果查看,阶段检查,针对第四阶段抽查学员的网页制作结果,抽查学员制作的整体网页，要求学员上台演示制作的网页并进行讲解,教员给出点评，集中问题讲解,图书分类页面效果查看,百货商品分类页面效果查看,第五阶段,第五阶段（,30,分钟）：,利用,Dreamweaver,制作商品详细页面,product.html,要求学员自己设计制作页面，教员巡视，解答学员提出的问题,商品详细页面效果查看,阶段检查,针对第五阶段抽查学员的网页制作,抽查学员制作的整体页面，要求学员上台演示制作的页面并进行讲解,教员给出点评，集中问题讲解,商品详细页面效果查看,第六阶段,第六阶段（,30,分钟）,利用,Dreamweaver,制作商品购买结算页面：,shopping.html,要求学员自己设计制作页面，教员巡视，解答学员提出的问题,商品购买结算页面效果查看,阶段检查,针对第六阶段抽查学员的网页制作结果,抽查学员制作的整体页面，要求学员上台演示制作的页面并进行讲解,教员给出点评，集中问题讲解,商品购买结算页面效果查看,第七阶段,第七阶段（,20,分钟）,利用,Dreamweaver,制作帮助中心页面：,help.html,要求学员自己设计制作页面，教员巡视，解答学员提出的问题,帮助中心页面效果查看,阶段检查,针对第七阶段抽查学员的网页制作结果,抽查学员制作的整体页面，要求学员上台演示制作的网页并进行讲解,教员给出点评，集中问题讲解,帮助中心页面效果查看,总结,教员对本次项目案例巩固的知识点总结（,20,分钟）,CSS,样式表在网页中的应用,HTML,基本标签的使用,DIV,套表格的网页布局,表单在网页中的应用,模板的使用,