第10章--购物商城首页的制作.pptVIP

网页设计与制作教程〔HTML+CSS+JavaScript〕;10.1网站的开发流程

10.2设计首页布局

10.3首页的制作;典型的网站开发流程包括以下几个阶段。

①规划站点：包括确立站点的策略或目标、确定所面向的用户以及站点的数据需求。

②网站制作：包括设置网站的开发环境、规划页面设计和布局、创立内容资源等。

③测试站点：使用Dreamweaver测试页面的链接及网站的兼容性。

④发布站点：使用Dreamweaver将站点发布到效劳器上。;10.1.1规划站点

1．规划站点目标

〔1〕确定建站的目的

〔2〕确定目标用户〔浏览者〕

〔3〕确定网站的内容

商城前台页面主要功能包括：商城首页展示各种产品，帮助客户搜索到欲购置的产品，展示产品的详细信息，会员的注册与登录，商城的购物流程和指南，购置商品的购物车，客户确认订单并填写送货地址，选择支付方式和物流方式等。商城后台页面主要功能包括：商品管理，订单管理，促销管理，广告管理，文章管理，会员管理和系统设置等。本书只讲解商城前台的首页、搜索页面、商品详细信息页面和商城后台的登录页面、查询商品页面、添加商品页面。;10.1.1规划站点

2．使用合理的文件夹保存文档

首先为站点建立一个根文件夹〔根目录〕，在其中创立多个子文件夹，然后将文档分门别类存储到相应的文件夹下，如果必要，还可创立多级子文件夹，这样可以防止很多不必要的麻烦。设计合理的站点结构，能够提高工作效率，方便对站点的管理。

3．使用合理的文件名称

当网站的规模变得很大的时候，使用合理的文件名就显得十分必要，文件名应该容易理解且便于记忆，让人看文件名就能知道网页表述的内容。

4．本地站点结构与远端站点结构保持相同

为了方便维护和管理，本地站点的结构应该与远端站点结构保持相同。;10.1.2网站制作

完整的网站制作包括以下两个过程：

1．前台页面制作

当网页设计人员拿到美工效果图以后，编写HTML、CSS，将效果图转换为.html网页，其中包括图片收集、页面布局规划等工作。

2．后台程序开发

后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程等。本书主要讲解前台页面的制作，后台程序开发读者可以在动态网站设计的课程中学习。;10.1.3测试网站

在把站点上传到效劳器之前，要先在本地对其测试。实际上，在站点建设过程中，最好经常对站点进行测试并解决出现的问题，这样可以尽早发现问题并防止重犯错误。

应该确保在目标浏览器中，页面能够正常显示和正常使用，所有链接都正常，页面下载也不会占用太长时间，这几点很重要。在发布站点之前，还可以通过运行站点报告来测试整个站点并解决出现的问题。;10.1.3测试网站

在把站点上传到效劳器之前，要先在本地对其测试。实际上，在站点建设过程中，最好经常对站点进行测试并解决出现的问题，这样可以尽早发现问题并防止重犯错误。

应该确保在目标浏览器中，页面能够正常显示和正常使用，所有链接都正常，页面下载也不会占用太长时间，这几点很重要。在发布站点之前，还可以通过运行站点报告来测试整个站点并解决出现的问题。

10.1.4发布站点

在创立一个功能齐全的Web站点后，可以使用Dreamweaver将文件上传到远程Web效劳器以发布该站点。Dreamweaver中包含管理站点的工具，可以向远程效劳器和从远程效劳器传输文件，设置存回/取出过程来防止覆盖文件，以及同步本地和远端站点上的文件。;10.2.1使用Dreamweaver创立站点

1．建立站点

2．建立目录结构

在制作各网页前，用户需要确定整个网站的目录结构。对于中小型网站，一般会创立如下通用的目录结构：

images目录：存放网站的所有图片。

style目录：存放网站的CSS样式文件，实现内容和样式的别离。

js目录：存放JavaScript脚本文件。

admin目录：存放网站后台管理程序。;10.2.2页面布局规划

商城首页应当包括网站的Logo、导航、产品搜索、产品分类、热卖产品、推荐产品、购物车链接、消费指南以及广告位等栏目，是一个典型的三列布局页面。商城首页的效果如图10-8所示。;10.2.2页面布局规划

商城首页布局示意图如图10-9所示。;1．页面整体的制作

2．页面顶部的制作

3．页面导航区域的制作

4．左侧边栏区域的制作

;5．主体内容区域的制作6．右侧边栏区域的制作;7．页面底部区域的制作

8．页面结构代码

至此，电脑商城首页制作完毕，读者可以在此根底上根据自己的喜好修改相关的CSS规那么，进一步美化页面。;