网页设计与制作教程第11章 光影世界前台页面
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
当完成了网站的设计、调试、测试和网页制作等工作后，需要把设计好的 站点上传到服务器来完成整个网站的发布。可以使用网站发布工具将文件上传 到远程Web服务器以发布该站点，以及同步本地和远端站点上的文件。
11.2 设计首页布局
11.2.1 创建站点目录
1．创建站点根目录 本书所有章节的案例均建立在D:\web下的各个章节目录中。因此，本章 讲解的综合案例建立在D:\web\ch11目录中，该目录做为站点根目录。 2．根目录下的通用目录 对于中小型网站，一般会创建如下通用的目录结构：
作品欣赏列表页用于展示客户上传的作品，页面效果如图11-13所示，布 局示意图如图11-14所示。
11.5 制作新闻动态列表页
制作新闻动态列表页
新闻动态列表页用于展示网站最新发布的新闻，包括左侧的新闻分类列表、 客户服务信息和右侧的新闻列表，页面效果如图11-16所示，布局示意图如图 11-17所示。
images目录：存放网站的所有图片。 css目录：存放CSS样式文件，实现内容和样式的分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。
11.2 设计首页布局
11.2.2 页面布局规划 首页的显示效果如图11-2所示，布局示意图如图11-3所示。
11.3 首页的制作
首页的制作
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所示。
11.1 网站的开发流程
11.1.2 网站制作
完整的网站制作包括以下两个过程： 1．前台页面制作 当网页设计人员拿到美工效果来自百度文库以后，编写HTML、CSS，将效果图转换 为.html网页，其中包括图片收集、页面布局规划等工作。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程 等。
网页设计与制作教程 （HTML+CSS+JavaScript）
第2版
第11章 光影世界前台页面
机械工业出版社
11.1 网站的开发流程
11.1.1 规划站点
1．规划站点目标 （1）确定建站的目的 （2）确定目标用户 （3）确定网站的内容 2．使用合理的文件夹保存文档 3．使用合理的文件名称 4．本地站点结构与远端站点结构保持相同
11.1 网站的开发流程
11.1.3 测试网站
在把站点上传到服务器之前，要先在本地对其测试。可以通过运行站点报 告来测试整个站点并解决出现的问题。
测试网页主要从以下3个方面着手。 页面的效果是否美观。 页面中的链接是否正确。 页面的浏览器兼容性是否良好。
11.1 网站的开发流程
11.1.4 发布站点
11.2 设计首页布局
11.2.1 创建站点目录
1．创建站点根目录 本书所有章节的案例均建立在D:\web下的各个章节目录中。因此，本章 讲解的综合案例建立在D:\web\ch11目录中，该目录做为站点根目录。 2．根目录下的通用目录 对于中小型网站，一般会创建如下通用的目录结构：
作品欣赏列表页用于展示客户上传的作品，页面效果如图11-13所示，布 局示意图如图11-14所示。
11.5 制作新闻动态列表页
制作新闻动态列表页
新闻动态列表页用于展示网站最新发布的新闻，包括左侧的新闻分类列表、 客户服务信息和右侧的新闻列表，页面效果如图11-16所示，布局示意图如图 11-17所示。
images目录：存放网站的所有图片。 css目录：存放CSS样式文件，实现内容和样式的分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。
11.2 设计首页布局
11.2.2 页面布局规划 首页的显示效果如图11-2所示，布局示意图如图11-3所示。
11.3 首页的制作
首页的制作
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所示。
11.1 网站的开发流程
11.1.2 网站制作
完整的网站制作包括以下两个过程： 1．前台页面制作 当网页设计人员拿到美工效果来自百度文库以后，编写HTML、CSS，将效果图转换 为.html网页，其中包括图片收集、页面布局规划等工作。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程 等。
网页设计与制作教程 （HTML+CSS+JavaScript）
第2版
第11章 光影世界前台页面
机械工业出版社
11.1 网站的开发流程
11.1.1 规划站点
1．规划站点目标 （1）确定建站的目的 （2）确定目标用户 （3）确定网站的内容 2．使用合理的文件夹保存文档 3．使用合理的文件名称 4．本地站点结构与远端站点结构保持相同
11.1 网站的开发流程
11.1.3 测试网站
在把站点上传到服务器之前，要先在本地对其测试。可以通过运行站点报 告来测试整个站点并解决出现的问题。
测试网页主要从以下3个方面着手。 页面的效果是否美观。 页面中的链接是否正确。 页面的浏览器兼容性是否良好。
11.1 网站的开发流程
11.1.4 发布站点