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