HTML5,CSS3,javasript,网页制作,网页设计第9章网络花店前台页面选编.ppt

HTML+CSS+JavaScript网页制作;9.1 网站的开发流程 9.2 使用Dreamweaver创建站点 9.3 案例：制作网络花店首页 9.4 案例：制作商品展示页 9.5 案例：制作商品详细信息页 9.6 案例：制作查看购物车页;典型的网站开发流程包括以下几个阶段。 ① 需求分析：包括建站目的及目标定位分析。 ② 站点规划：包括结构规划、内容规划、界面规划及网站功能设置。 ③ 网站制作：包括设置网站的开发环境、创建内容资源、页面设计和布局等。 ④ 测试发布：测试页面的链接及网站的兼容性，并将站点发布到服务器上。 ;9.1.1 需求分析 1．建站目的 建立网站的目的要么是增加利润，要么是传播信息或观点。显然，创建网络书城网站的目的是第一种：增加利润。随着网上交易安全性方面的逐渐完善，网上购物已逐渐成为人们消费的时尚。同时，通过网上在线销售，可以扩展企业的销售渠??，提高公司的知名度，降低企业的销售成本，网络书城正是在这样的业务背景下建立的。 2．目标定位 提出目标定位是非常简单的事情，更重要的是如何实现目标。在很多Web网站项目中，有包容一切的倾向。实际上一个网站不可能满足所有人的需求，对设计者来说，网站一定要有特定的用户和特定的任务。;9.1.2 站点规划 1．网站结构规划 （1）网站结构图 （2）使用合理的文件夹保存文档 （3）使用合理的文件名称 2．网站内容规划 3．网站界面规划 4．网站功能设置 花店前台页面的主要功能包括：花店首页展示各种类型的鲜花，帮助客户搜索到欲购买的商品，展示商品的详细信息，会员的注册与登录，花店的购物流程和指南，购买商品的购物车，客户确认订单并填写送货地址，选择支付方式和物流方式等。 花店后台页面的主要功能包括：商品管理，订单管理，促销管理，广告管理，文章管理，会员管理和系统设置等。;9.1.3 网站制作 完整的网站制作包括以下两个过程： 1．前台页面制作 前台页面制作包括内容采集整理、图片的处理、背景设置、页面排版及样式设计等。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程等。本书主要讲解前台页面的制作，后台程序开发读者可以在动态网站设计的课程中学习。;9.1.4 测试发布 1．测试站点 网站测试与传统的软件测试不同，它不但需要检查是否按照设计的要求运行，而且还要测试系统在不同用户端的显示是否合适，最重要的是从最终用户的角度进行安全性和可用性测试。测试网页主要从以下3个方面着手。 ? 页面的效果是否美观。 ? 页面中的链接是否正确。 ? 页面的浏览器兼容性是否良好。 2．发布站点 当完成了网站的设计、调试、测试和网页制作等工作后，需要把设计好的站点上传到服务器来完成整个网站的发布。Dreamweaver内置了强大的FTP功能，可以帮助用户实现对站点文档的上传。 ;9.2.1 Dreamweaver基本工作界面;9.2.2 创建站点与目录结构 1．创建站点 2．创建目录结构 在制作各网页前，用户需要确定整个网站的目录结构。对于中小型网站，一般会创建如下通用的目录结构： images目录：存放网站的所有图片。 style目录：存放网站的CSS样式文件，实现内容和样式的分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。 ;【案例展示】制作网络花店首页，本例文件index.html在浏览器中的浏览效果如图9-8所示。; 布局示意图如图9-9所示。;制作过程如下： ① 页面布局规划。花店首页包括网站的Logo、导航、分类、特别推荐、花店简介、新品上架、购物车链接、会员登录、最新消息和友情链接等信息，是一个典型的三列布局页面。 ② 外部样式表。在文件夹css下新建一个名为style.css的样式表文件，样式表中各区域的样式设计如下。 ③ 网页结构文件。在当前文件夹中，用记事本新建一个名为index.html的网页文件。 ④ 浏览网页。; 【案例展示】制作商品展示页，本例文件product.html在浏览器中的浏览效果如图9-16所示，页面布局示意图如图9-17所示。; 【案例展示】制作商品详细信息页，本例文件productdetail.html在浏览器中的浏览效果如图9-23所示，页面布局示意图如图9-24所示。; 【案例展示】制作查看购物车页，本例文件cart.html在浏览器中的浏览效果如图9-26所示，页面布局示意图如图9-27所示。;