HTML基础第10章 购物商城首页的制作.ppt

第10章 购物商城首页的制作 典型的网站开发流程包括以下几个阶段。 ① 规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。 ② 网站制作：包括设置网站的开发环境、规划页面设计和布局、创建内容资源等。 ③ 测试站点：使用Dreamweaver测试页面的链接及网站的兼容性。 ④ 发布站点：使用Dreamweaver将站点发布到服务器上。 10.1 网站的开发流程 10.1.1 规划站点 1．规划站点目标 （1）确定建站的目的 （2）确定目标用户（浏览者） （3）确定网站的内容 商城前台页面主要功能包括：商城首页展示各种产品，帮助客户搜索到欲购买的产品，展示产品的详细信息，会员的注册与登录，商城的购物流程和指南，购买商品的购物车，客户确认订单并填写送货地址，选择支付方式和物流方式等。商城后台页面主要功能包括：商品管理，订单管理，促销管理，广告管理，文章管理，会员管理和系统设置等。本书只讲解商城前台的首页、搜索页面、商品详细信息页面和商城后台的登录页面、查询商品页面、添加商品页面。 10.1 网站的开发流程 10.1.1 规划站点 2．使用合理的文件夹保存文档 首先为站点建立一个根文件夹（根目录），在其中创建多个子文件夹，然后将文档分门别类存储到相应的文件夹下，如果必要，还可创建多级子文件夹，这样可以避免很多不必要的麻烦。设计合理的站点结构，能够提高工作效率，方便对站点的管理。 3．使用合理的文件名称 当网站的规模变得很大的时候，使用合理的文件名就显得十分必要，文件名应该容易理解且便于记忆，让人看文件名就能知道网页表述的内容。 4．本地站点结构与远端站点结构保持相同 为了方便维护和管理，本地站点的结构应该与远端站点结构保持相同。 10.1 网站的开发流程 10.1.2 网站制作 完整的网站制作包括以下两个过程： 1．前台页面制作 当网页设计人员拿到美工效果图以后，编写HTML、CSS，将效果图转换为.html网页，其中包括图片收集、页面布局规划等工作。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程等。本书主要讲解前台页面的制作，后台程序开发读者可以在动态网站设计的课程中学习。 10.1 网站的开发流程 10.1.3 测试网站 在把站点上传到服务器之前，要先在本地对其测试。实际上，在站点建设过程中，最好经常对站点进行测试并解决出现的问题，这样可以尽早发现问题并避免重犯错误。 应该确保在目标浏览器中，页面能够正常显示和正常使用，所有链接都正常，页面下载也不会占用太长时间，这几点很重要。在发布站点之前，还可以通过运行站点报告来测试整个站点并解决出现的问题。 10.1 网站的开发流程 10.1.3 测试网站 在把站点上传到服务器之前，要先在本地对其测试。实际上，在站点建设过程中，最好经常对站点进行测试并解决出现的问题，这样可以尽早发现问题并避免重犯错误。 应该确保在目标浏览器中，页面能够正常显示和正常使用，所有链接都正常，页面下载也不会占用太长时间，这几点很重要。在发布站点之前，还可以通过运行站点报告来测试整个站点并解决出现的问题。 10.1.4 发布站点 在创建一个功能齐全的Web站点后，可以使用Dreamweaver将文件上传到远程Web服务器以发布该站点。Dreamweaver中包含管理站点的工具，可以向远程服务器和从远程服务器传输文件，设置存回/取出过程来防止覆盖文件，以及同步本地和远端站点上的文件。 10.1 网站的开发流程 10.2.1 使用Dreamweaver创建站点 1．建立站点 2．建立目录结构 在制作各网页前，用户需要确定整个网站的目录结构。对于中小型网站，一般会创建如下通用的目录结构： images目录：存放网站的所有图片。 style目录：存放网站的CSS样式文件，实现内容和样式的分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。 10.2 设计首页布局 10.2.2 页面布局规划 商城首页应当包括网站的Logo、导航、产品搜索、产品分类、热卖产品、推荐产品、购物车链接、消费指南以及广告位等栏目，是一个典型的三列布局页面。商城首页的效果如图10-8所示。 10.2 设计首页布局 10.2.2 页面布局规划 商城首页布局示意图如图10-9所示。 10.2 设计首页布局 1．页面整体的制作 2．页面顶部的制作 3．页面导航区域的制作