images目录：存放网站的所有图片。 css目录：存放CSS样式文件，实现内容和样式的分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。
11.2 设计首页布局
11.2.2 页面布局规划 首页的显示效果如图11-2所示，布局示意图如图11-3所示。
11.3 首页的制作
网页设计与制作教程 （HTML+CSS+JavaScript）
第2版
第11章 光影世界前台页面
机械工业出版社
11.1 网站的开发流程
11.1.1 规划站点
1．规划站点目标 （1）确定建站的目的 （2）确定目标用户 （3）确定网站的内容 2．使用合理的文件夹保存文档 3．使用合理的文件名称 4．本地站点结构与远端站点结构保持相同
作品欣赏列表页用于展示客户上传的作品，页面效果如图11-13所示，布 局示意图如图11-14所示。
11.5 制作新闻动态列表页
制作新闻动态列表页
新闻动态列表页用于展示网站最新发布的新闻，包括左侧的新闻分类列表、 客户服务信息和右侧的新闻列表，页面效果如图11-16所示，布局示意图如图 11-17所示。
11.1 网站的开发流程
11.1.2 网站制作
完整的网站制作包括以下两个过程： 1．前台页面制作 当网页设计人员拿到美工效果图以后，编写HTML、CSS，将效果图转换 为.html网页，其中包括图片收集、页面布局规划等工作。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程 等。
11.1 网站的传到服务器之前，要先在本地对其测试。可以通过运行站点报 告来测试整个站点并解决出现的问题。
测试网页主要从以下3个方面着手。 页面的效果是否美观。 页面中的链接是否正确。 页面的浏览器兼容性是否良好。
11.1 网站的开发流程
11.1.4 发布站点
当完成了网站的设计、调试、测试和网页制作等工作后，需要把设计好的 站点上传到服务器来完成整个网站的发布。可以使用网站发布工具将文件上传 到远程Web服务器以发布该站点，以及同步本地和远端站点上的文件。
11.2 设计首页布局
11.2.1 创建站点目录
1．创建站点根目录 本书所有章节的案例均建立在D:\web下的各个章节目录中。因此，本章 讲解的综合案例建立在D:\web\ch11目录中，该目录做为站点根目录。 2．根目录下的通用目录 对于中小型网站，一般会创建如下通用的目录结构：
首页的制作
1．页面整体的制作 2．页面顶部的制作 3．广告图片区域的制作 4．第一栏目区域的制作 5．特色美景栏目的制作 6．田园风光栏目的制作 7．海天一色栏目的制作 8．摄影常识栏目的制作 9．客照展示栏目的制作 10．页面底部版权区域的制作 11．页面结构代码
11.4 制作作品欣赏列表页
制作作品欣赏列表页
11.6 制作新闻明细页
制作新闻明细页
当浏览者单击新闻列表页中的新闻标题时，将打开新闻明细页，显示出新 闻的详细内容，页面的效果如图11-18所示，布局示意图如图11-19所示。
习题11
习题11
1．综合使用Div+CSS技术制作家具商城首页，如图11-20所示。 2．综合使用Div+CSS技术制作家具商城商品展示页，如图11-21所示。 3．综合使用Div+CSS技术制作家具商城商品详细信息页，如图11-22所 示。 4．综合使用Div+CSS技术制作家具商城联系页，如图11-23所示。