网页设计与制作——Dreamweaver 8 马书群 第9章_综合网站实例－制作时尚购物网站新.pptVIP

9.1设计要求 网站设计要求如下： （1）网站定位。该网站是为“购物街”公司设计，以商品展示为主要内容，网站命名为“购物街”。由于公司销售的产品是女性服装和相关配饰等，因此要求设计突出时髦、大方、个性的特点，同时要求主页面、二级页面风格统一。 （2）网站规划。要求网站共分为5个栏目，包括：首页，主要放置一些最新的时尚资讯；公司简介，介绍公司的相关情况；产品秀场，包括商品分类展示页面和商品详细信息页面；联系我们，为客户提供多种联系方式；管理中心，获得授权的管理员在此可以添加、修改、删除商品记录，没有获得授权的浏览者无法进入。网站设计为三层结构。 （3）页面布局。首页采用横向切割划分的版式，顶部包括展示画面、网站名称、导航菜单，中间的左部是带有图标的导航菜单，中间的右部为内容展示区，页面底部为网站版权信息。二级和三级页面采用相同的“匡”字页面结构，顶部、中间的左部和底部与首页面相同。页面宽度采用通用的800×600显示模式。 （4）网站设计。进行网站规划、创建站点、页面制作、站点发布。 9.2 购物网站规划 根据网站要实现的功能和特点对其进行分析与设计，对需要制作的页面、页面之间的链接关系、网站的主题色等规划如下： 首页index.asp：显示当前最新的时尚资讯。 公司简介页面introduction.asp：介绍公司的相关情况。 产品秀场页面xiuchang.asp：提供商品的分类的类别信息。 商品详细信息页面spdetail.asp：通过单击产品秀场页面中的商品名称进入该页，可以这里了解到商品的图片、名称、市场价、会员价、材质等详细的信息。 联系我们页面conduction.asp：为客户提供地址、E-mail、电话等联系方式。 9.2 购物网站规划 管理员登录页面denglu.asp：只有在该页面输入正确用户名和密码的用户才能登录到后台的添加商品分类页面和商品列表管理页面。 商品列表管理页面guanli.asp：该页面显示商品的列表信息，可以选择添加、修改和删除相关的商品记录。 添加页面add.asp：通过单击商品列表管理页面的“添加”链接，进入该页面添加商品记录，添加后提交到后台数据库中。 修改页面modify.asp：通过单击商品列表管理页面的“修改”链接，进入该页面修改商品记录，修改后提交到后台数据库中。 删除页面delete.asp：通过单击商品列表管理页面的“删除”链接，进入该页面删除商品记录，从而删除后台数据库中对应信息。 9.2 购物网站规划 针对展示的产品特点，我们选择亮丽的玫红色为主题色，白色为点睛色，同时采用具有水晶质感的图标和带有时尚气息的矢量图，为其营造出时尚的氛围。 整个网站既包括静态页面又包括动态页面，而且要求各级页面风格统一，因此考虑使用动态模板制作各个页面。 9.3 建立站点 建立具体页面之前我们首先要创建站点，添加站点涉及的根目录和子文件夹，设置好相关的属性。 本例中先创建文件夹，然后再定义站点。 9.3 建立站点 【操作步骤】 1、创建文件夹 （1）在本地磁盘E中创建ch09文件夹作为根目录 （2）在ch09文件夹下创建子文件夹，分别为: images（用来放置图片） CSS（用来放置样式表） database（用来放置数据库） asp（用来放置除首页外的所有页面）” 2、定义站点——“时尚购物网站” （演示操作） 9.4 数据库设计与连接 数据库是动态网站的核心，建立好站点后我们接下来就要完成数据库的设计与连接。一个简单的网上购物系统需要多个数据库表，本章的案例主要创建3个表，包括：商品信息表shangpin、商品分类信息表fenlei、管理员信息表admin。 9.4 数据库设计与连接 【操作步骤】 1、利用Microsoft Access制作购物网站的后台数据库gouwu.mdb，其中包括商品信息表shangpin、商品分类信息表fenlei、管理员信息表admin，并保存到本地根目录下子文件夹database中 。 2、建立数据库连接 ，设置DNS。 （演示操作） 9.5 制作动态模板 【操作步骤】 1、新建一个名为gouwu.asp的ASP VBScript模板。 2、设置页面属性。 3、将光标放置在页面中，插入7行3列的表格。 4、插入图片并设置热点区域。 5、插入记录→模板对象→可编辑区域。 6、输入版权说明文字 。 9.6 制作各栏目页面 【操作步骤】 动态模板设计完成以后，接下来就可以利用模板来制作网站页面。 （1）制作首页面 （