网页设计与制作教程第11章-光影世界前台页面课件.ppt

1、网页设计与制作教程（HTML+CSS+JavaScript）第2版机械工业出版社第11章 光影世界前台页面11.1 网站的开发流程网站的开发流程 11.1.1 规划站点1规划站点目标规划站点目标（1）确定建站的目的）确定建站的目的（2）确定目标用户）确定目标用户（3）确定网站的内容）确定网站的内容2使用合理的文件夹保存文档使用合理的文件夹保存文档3使用合理的文件名称使用合理的文件名称4本地站点结构与远端站点结构保持相同本地站点结构与远端站点结构保持相同11.1 网站的开发流程网站的开发流程 11.1.2 网站制作完整的网站制作包括以下两个过程：完整的网站制作包括以下两个过程：1前台页面制作前台

2、页面制作当网页设计人员拿到美工效果图以后，编写当网页设计人员拿到美工效果图以后，编写HTML、CSS，将效果图转换，将效果图转换为为.html网页，其中包括图片收集、页面布局规划等工作。网页，其中包括图片收集、页面布局规划等工作。2后台程序开发后台程序开发后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程等。等。11.1 网站的开发流程网站的开发流程 11.1.3 测试网站在把站点上传到服务器之前，要先在本地对其测试。可以通过运行站点报在把站点上传到服务器之前，要先在本地对其测试。可以通过运行站点报告来测试整个站点并

3、解决出现的问题。告来测试整个站点并解决出现的问题。测试网页主要从以下测试网页主要从以下3个方面着手。个方面着手。页面的效果是否美观。页面的效果是否美观。页面中的链接是否正确。页面中的链接是否正确。页面的浏览器兼容性是否良好。页面的浏览器兼容性是否良好。11.1 网站的开发流程网站的开发流程 11.1.4 发布站点当完成了网站的设计、调试、测试和网页制作等工作后，需要把设计好的当完成了网站的设计、调试、测试和网页制作等工作后，需要把设计好的站点上传到服务器来完成整个网站的发布。可以使用网站发布工具将文件上传站点上传到服务器来完成整个网站的发布。可以使用网站发布工具将文件上传到远程到远程Web服务

4、器以发布该站点，以及同步本地和远端站点上的文件。服务器以发布该站点，以及同步本地和远端站点上的文件。11.2 设计首页布局设计首页布局11.2.1 创建站点目录1创建站点根目录创建站点根目录本书所有章节的案例均建立在本书所有章节的案例均建立在D:web下的各个章节目录中。因此，本章下的各个章节目录中。因此，本章讲解的综合案例建立在讲解的综合案例建立在D:webch11目录中，该目录做为站点根目录。目录中，该目录做为站点根目录。2根目录下的通用目录根目录下的通用目录对于中小型网站，一般会创建如下通用的目录结构：对于中小型网站，一般会创建如下通用的目录结构：images目录：存放网站的所有图片。目

5、录：存放网站的所有图片。css目录：存放目录：存放CSS样式文件，实现内容和样式的分离。样式文件，实现内容和样式的分离。js目录：存放目录：存放JavaScript脚本文件。脚本文件。admin目录：存放网站后台管理程序。目录：存放网站后台管理程序。11.2 设计首页布局设计首页布局11.2.2 页面布局规划首页的显示效果如图首页的显示效果如图11-2所示，布局示意图如图所示，布局示意图如图11-3所示。所示。11.3 首页的制作首页的制作 首页的制作1页面整体的制作页面整体的制作2页面顶部的制作页面顶部的制作3广告图片区域的制作广告图片区域的制作4第一栏目区域的制作第一栏目区域的制作5特色美

6、景栏目的制作特色美景栏目的制作6田园风光栏目的制作田园风光栏目的制作7海天一色栏目的制作海天一色栏目的制作8摄影常识栏目的制作摄影常识栏目的制作9客照展示栏目的制作客照展示栏目的制作10页面底部版权区域的制作页面底部版权区域的制作11页面结构代码页面结构代码11.4 制作作品欣赏列表页制作作品欣赏列表页 制作作品欣赏列表页作品欣赏列表页用于展示客户上传的作品，页面效果如图作品欣赏列表页用于展示客户上传的作品，页面效果如图11-13所示，布所示，布局示意图如图局示意图如图11-14所示。所示。11.5 制作新闻动态列表页制作新闻动态列表页 制作新闻动态列表页新闻动态列表页用于展示网站最新发布的新

7、闻，包括左侧的新闻分类列表、新闻动态列表页用于展示网站最新发布的新闻，包括左侧的新闻分类列表、客户服务信息和右侧的新闻列表，页面效果如图客户服务信息和右侧的新闻列表，页面效果如图11-16所示，布局示意图如图所示，布局示意图如图11-17所示。所示。11.6 制作新闻明细页制作新闻明细页 制作新闻明细页当浏览者单击新闻列表页中的新闻标题时，将打开新闻明细页，显示出新当浏览者单击新闻列表页中的新闻标题时，将打开新闻明细页，显示出新闻的详细内容，页面的效果如图闻的详细内容，页面的效果如图11-18所示，布局示意图如图所示，布局示意图如图11-19所示。所示。习题习题11习题111综合使用综合使用Div+CSS技术制作家具商城首页，如图技术制作家具商城首页，如图11-20所示。所示。2综合使用综合使用Div+CSS技术制作家具商城商品展示页，如图技术制作家具商城商品展示页，如图11-21所示。所示。3综合使用综合使用Div+CSS技术制作家具商城商品详细信息页，如图技术制作家具商城商品详细信息页，如图11-22所所示。示。4综合使用综合使用Div+CSS技术制作家具商城联系页，如图技术制作家具商城联系页，如图11-23所示。所示。