Web前端开发实例教程——HTML5 CSS3 JavaScript 第11章 珠宝商城前台页面.pptVIP

第11章 珠宝商城前台页面 Web前端开发实例教程 ——HTML5+CSS3+JavaScript 11.1 网站的开发流程 11.1.1 规划站点 1．规划站点目标 （1）确定建站的目的 （2）确定目标用户 （3）确定网站的内容 2．使用合理的文件夹保存文档 3．使用合理的文件名称 4．本地站点结构与远端站点结构保持相同 11.1 网站的开发流程 11.1.2 网站制作 完整的网站制作包括以下两个过程： 1．前台页面制作 当网页设计人员拿到美工效果图以后，编写HTML、CSS，将效果图转换为.html网页，其中包括图片收集、页面布局规划等工作。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程等。 11.1 网站的开发流程 11.1.3 测试网站 在把站点上传到服务器之前，要先在本地对其测试。可以通过运行站点报告来测试整个站点并解决出现的问题。 测试网页主要从以下3个方面着手。 ? 页面的效果是否美观。 ? 页面中的链接是否正确。 ? 页面的浏览器兼容性是否良好。 11.1 网站的开发流程 11.1.4 发布站点 当完成了网站的设计、调试、测试和网页制作等工作后，需要把设计好的站点上传到服务器来完成整个网站的发布。可以使用网站发布工具将文件上传到远程Web服务器以发布该站点，以及同步本地和远端站点上的文件。 11.2 设计首页布局 11.2.1 创建站点目录 1．创建站点根目录 本书所有章节的案例均建立在D:\web下的各个章节目录中。因此，本章讲解的综合案例建立在D:\web\ch11目录中，该目录做为站点根目录。 2．根目录下的通用目录 对于中小型网站，一般会创建如下通用的目录结构： ? images目录：存放网站的所有图片。 ? css目录：存放CSS样式文件，实现内容和样式的分离。 ? js目录：存放JavaScript脚本文件。 ? admin目录：存放网站后台管理程序。 11.2 设计首页布局 11.2.2 页面布局规划 网站首页包括网站的Logo、导航菜单、广告、产品系列、新品发布和体验中心等信息，效果如图11-2所示，布局示意图如图11-3所示。 11.3 制作首页 制作首页 1．页面整体的制作 2．页面顶部的制作 3．网站标志和购物车信息的制作 4．主导航菜单的制作 5．主体左侧区域的制作 6．主体右侧区域的制作 7．页面底部区域的制作 11.4 制作产品列表页 11.2.2 页面布局规划 产品列表页用于展示产品列表，页面效果如图11-10所示，布局示意图如图11-11所示。 11.5 制作产品明细页 制作产品明细页 产品明细页是浏览者查看产品细节时显示的页面，产品明细区域主要显示产品的图文说明和相关信息的链接，页面效果如图11-12所示，布局示意图如图11-13所示。 11.6 制作查看购物车页 制作查看购物车页 当客户单击产品明细页面中的“加入购物车”按钮时，将打开查看购物车页面。页面中显示添加到购物车中的商品信息及金额，客户可以修改购买商品的数量，页面效果如图11-14所示，布局示意图如图11-15所示。 习题11 习题11 1．综合使用Div+CSS技术制作珠宝商城礼品包装页（gift.html），如图11-16所示。 2．综合使用Div+CSS技术制作珠宝商城关于页（about.html），如图11-17所示。