第9章 网络鞋城前台页面 经济管理学院
内 容 概 览 网站的开发流程 设计首页布局 首页的制作 制作商品展示页 制作商品详细信息页 制作查看购物车页
9.1 网站的开发流程 典型的网站开发流程包括以下几个阶段。 ① 规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。 9.1 网站的开发流程 典型的网站开发流程包括以下几个阶段。 ① 规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。 ② 网站制作：包括设置网站的开发环境、规划页面设计和布局、创建内容资源等。 ③ 测试站点：使用Dreamweaver测试页面的链接及网站的兼容性。 ④ 发布站点：使用Dreamweaver将站点发布到服务器上。
9.1 网站的开发流程 9.1.1 站点规划 1．网站结构规划 （1）网站结构图 （2）使用合理的文件夹保存文档 （3）使用合理的文件名称 9.1 网站的开发流程 9.1.1 站点规划 1．网站结构规划 （1）网站结构图 （2）使用合理的文件夹保存文档 （3）使用合理的文件名称 2．网站内容规划 3．网站界面规划 4．网站功能设置 鞋城前台页面的主要功能包括：鞋城首页展示各种鞋类商品，帮助客户搜索到欲购买的商品，展示商品的详细信息，会员的注册与登录，鞋城的购物流程和指南，购买商品的购物车，客户确认订单并填写送货地址，选择支付方式和物流方式等。 鞋城后台页面的主要功能包括：商品管理，订单管理，促销管理，广告管理，文章管理，会员管理和系统设置等。
9.1 网站的开发流程 9.1.2 网站制作 完整的网站制作包括以下两个过程： 1．前台页面制作 9.1 网站的开发流程 9.1.2 网站制作 完整的网站制作包括以下两个过程： 1．前台页面制作 当网页设计人员拿到美工效果图以后，编写HTML、CSS，将效果图转换为.html网页，其中包括图片收集、页面布局规划等工作。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程等。本书主要讲解前台页面的制作，后台程序开发读者可以在动态网站设计的课程中学习。
9.1 网站的开发流程 9.1.3 测试网站 在把站点上传到服务器之前，要先在本地对其测试。实际上，在站点建设过程中，最好经常对站点进行测试并解决出现的问题，这样可以尽早发现问题并避免重犯错误。测试网页主要从以下3个方面着手。 应该确保在目标浏览器中，页面能够正常显示和正常使用，所有链接都正常，页面下载也不会占用太长时间，这几点很重要。
9.1 网站的开发流程 9.1.4 发布站点 在创建一个功能齐全的Web站点后，可以使用Dreamweaver将文件上传到远程Web服务器以发布该站点。Dreamweaver中包含管理站点的工具，可以向远程服务器和从远程服务器传输文件，设置存回/取出过程来防止覆盖文件，以及同步本地和远端站点上的文件。
9.2 设计首页布局 9.2.1 使用Dreamweaver创建站点 1．建立站点 2．建立目录结构 9.2 设计首页布局 9.2.1 使用Dreamweaver创建站点 1．建立站点 2．建立目录结构 在制作各网页前，用户需要确定整个网站的目录结构。对于中小型网站，一般会创建如下通用的目录结构： images目录：存放网站的所有图片。 style目录：存放网站的CSS样式文件，实现内容和样式的分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。
9.2 设计首页布局 9.2.2 页面布局规划 鞋城首页包括网站的Logo、导航、分类、畅销排行榜、新品上架、购物车链接等信息，是一个典型的两列布局页面。鞋城首页的效果如图9-8所示。
9.2 设计首页布局 9.2.2 页面布局规划 布局示意图如图9-9所示。
9.3 首页的制作 1．页面整体的制作 2．页面顶部的制作 3．菜单区域的制作 4．左侧区域的制作
9.3 首页的制作 5．右侧区域的制作 6．页面底部区域的制作
9.3 首页的制作 7．页面结构代码 至此，网络书城首页制作完毕，读者可以在此基础上根据自己的喜好修改相关的CSS规则，进一步美化页面。
9.4 制作商品展示页 商品展示页用于显示商品展示列表，页面效果如图9-15所示，布局示意图如图9-16所示。
9.5 制作商品详细信息页 商品详细信息页面是客户查看商品细节时显示的页面，商品明细区域包括商品图文介绍和相关商品信息，页面效果如图9-17所示，布局示意图如图9-18所示。
9.6 制作查看购物车页 当客户单击页面中的“查看购物车”链接或“加入购物车”按钮时，将打开查看购物车页面。页面中显示添加到购物车中的商品信息及金额，客户可以修改购买商品的数量，还可以删除某款商品。页面的效果如图9-20所示，布局示意图如图9-21所示。