网页设计与制作教程第5版,机械工业出版社同名教材 配套电子教案,9.1 网站的开发流程 9.2 设计首页布局 9.3 首页的制作 9.4 制作商品展示页 9.5 制作商品详细信息页 9.6 制作查看购物车页,第9章 网络鞋城前台页面,典型的网站开发流程包括以下几个阶段。 规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。 网站制作：包括设置网站的开发环境、规划页面设计和布局、创建内容资源等。 测试站点：使用Dreamweaver测试页面的链接及网站的兼容性。 发布站点：使用Dreamweaver将站点发布到服务器上。,9.1 网站的开发流程,9.1.1 站点规划 1网站结构规划 （1）网站结构图 （2）使用合理的文件夹保存文档 （3）使用合理的文件名称 2网站内容规划 3网站界面规划 4网站功能设置 鞋城前台页面的主要功能包括：鞋城首页展示各种鞋类商品，帮助客户搜索到欲购买的商品，展示商品的详细信息，会员的注册与登录，鞋城的购物流程和指南，购买商品的购物车，客户确认订单并填写送货地址，选择支付方式和物流方式等。 鞋城后台页面的主要功能包括：商品管理，订单管理，促销管理，广告管理，文章管理，会员管理和系统设置等。,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.1 网站的开发流程,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.2 设计首页布局,1页面整体的制作 2页面顶部的制作 3菜单区域的制作 4左侧区域的制作,9.3 首页的制作,5右侧区域的制作 7页面底部区域的制作,9.3 首页的制作,7页面结构代码 至此，网络书城首页制作完毕，读者可以在此基础上根据自己的喜好修改相关的CSS规则，进一步美化页面。,9.3 首页的制作,商品展示页用于显示商品展示列表，页面效果如图9-15所示，布局示意图如图9-16所示。,9.4 制作商品展示页,商品详细信息页面是客户查看商品细节时显示的页面，商品明细区域包括商品图文介绍和相关商品信息，页面效果如图9-17所示，布局示意图如图9-18所示。,9.5 制作商品详细信息页,当客户单击页面中的“查看购物车”链接或“加入购物车”按钮时，将打开查看购物车页面。页面中显示添加到购物车中的商品信息及金额，客户可以修改购买商品的数量，还可以删除某款商品。页面的效果如图9-20所示，布局示意图如图9-21所示。,9.6 制作查看购物车页,1综合使用Div+CSS技术制作什锦果园首页，如图9-23所示。 2综合使用Div+CSS技术制作什锦果园产品页，如图9-24所示。 3综合使用Div+CSS技术制作什锦果园新闻页，如图9-25所示。 4综合使用Div+CSS技术制作什锦果园联系页，如图9-26所示。,习题9,