本书编委会 编著实例版实例版第第23章章 综合案例综合案例23.1 HTML综合案例综合案例23.2 CSS综合案例综合案例23.3 网站开发流程网站开发流程23.4 大综合案例大综合案例HTML/CSS/JavaScript 标准教程实例版（第2版）HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1 HTML综合案例综合案例23.1.1 本例的设计流程本例的设计流程23.1.2 准备素材准备素材23.1.3 网页头部网页头部23.1.4 网页主体网页主体HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.1 本例的设计流程本例的设计流程 设计好网页效果图，准备好素材（图片、文档等）； 按照效果图用HTML实现页面布局； 将素材放到网页中，并添加链接或别的功能； 边做边预览效果，即时修改。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.2 准备素材准备素材（1）先用Photoshop将网页所有的内容设计好这一步需要前期需求分析，并有大量的美工设计。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.2 准备素材准备素材（1）先用Photoshop将网页所有的内容设计好这一步需要前期需求分析，并有大量的美工设计。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.2 准备素材准备素材HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.2 准备素材准备素材（2）单击Photoshop工具箱最下面的“转到ImageReady”按钮，在ImageReady中用切片工具将网页分成一个个小块，如图23-4所示。切分的原则是将按钮或图片完整地切出来，如果图片太大，比如横幅Bannezr，可切分成若干小图。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.2 准备素材准备素材HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.2 准备素材准备素材（3）切分好后，从菜单选择“文件将优化结果存储为”，如图23-5所示，将图片导出后的结果如图23-6所示，被切分的小图片全部被存放到一个文件夹下。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.2 准备素材准备素材HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.2 准备素材准备素材HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.3 网页头部网页头部HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.4 网页主体网页主体1规划布局规划布局2添加添加Banner图片图片3添加主要链接添加主要链接4比较复杂的表格嵌套的处理比较复杂的表格嵌套的处理HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2 CSS综合案例综合案例23.2.1 本案例的设计思路本案例的设计思路23.2.2 分析效果图分析效果图23.2.3 裁切图片裁切图片23.2.4 提取尺寸提取尺寸23.2.5 规划布局规划布局23.2.6 编写编写CSS样式文件样式文件23.2.7 插入图片和调整内容插入图片和调整内容HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.1 本案例的设计思路本案例的设计思路 第一步分析效果图 第二步裁切素材图片 第三步提取尺寸 第四步规划布局 第五步编写CSS样式文件 第六步插入图片和调整内容HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.2 分析效果图分析效果图观察网页可以发现，该网页的图和文字排放的位置都比较分明，要么就是一大段文字，要么就是一大块图。而且，网页的图标也放的很零散，很容易裁切和调整。所以我们首先要利用Photoshop的工具分析和制作效果图。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.3 裁切图片裁切图片因为网页的图片比较容易分离出来，所以我们在裁切图片时尽量将整个图片裁切下来。如图23-16所示，裁切的方法在HTML案例中已经详细讲解过，这里就不再赘述。我们在裁切过程中遵守的原则就是能用完整的图就用完整图，不要分开裁切。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.4 提取尺寸提取尺寸将这些图片都提取出来并放到了images的文件夹下。现在打开这个文件夹，然后选择“查看详细信息”，这时所有图片的尺寸就都显示到了窗口内，如图23-18所示。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.4 提取尺寸提取尺寸HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.5 规划布局规划布局规划布局实质就是怎样将这些内容完美地放到表格里，换句话说，就是用表格怎样将我们的网页内容控制得贴切、美观。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.6 编写编写CSS样式文件样式文件CSS样式文件的定义很灵活，可以放在HTML文件内，也可以单独定义一个CSS文件，然后再在HTML文件中调用。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.7 插入图片和调整内容插入图片和调整内容样式和布局都准备好，那剩下的事就是填充内容和调整细节。在插入图片和文字时，还有好多细节的问题需要考虑，如图片之间的距离，图片离边框的距离等。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.3 网站开发流程网站开发流程23.3.1 网站规划网站规划23.3.2 网站设计网站设计23.3.3 网站开发网站开发23.3.4 网站发布网站发布23.3.5 网站维护网站维护HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.3 网站开发流程网站开发流程HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.3.1 网站规划网站规划1确定网站主题确定网站主题2需求分析需求分析3确定网站的风格确定网站的风格4网站技术问题网站技术问题HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.3.2 网站设计网站设计1一致性一致性2可读性可读性HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.3.3 网站开发网站开发网站开发是网页设计的最重要阶段，前期的规划和设计都是为网站开发服务的，需要将收集的资料进行整理和合理的布局，添加网页中需要用到的元素，在网页制作开发阶段常常需要为网页添加交互性，以便更好的吸引用户并为用户提供更好的服务。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.3.4 网站发布网站发布1在测试网站时，除了需要对所有影响页面显示的细节元素进行测试外，关键是要检测页面中的链接是否正常跳转，以及改变文件的路径是否显示正常。2测试完成后，如果测试都正常了，那么就可以将网页发布到Internet上，可以让所有的用户进行浏览。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.3.5 网站维护网站维护网站维护即更新网站的信息，从用户的角度进一步完善网站信息，同时也是跳转到网站开发的第一步：网站规划，从而使网站的运行更加稳定。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.4 大综合案例大综合案例23.4.1 首页设计首页设计23.4.2 会员注册页面会员注册页面HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.4.1 首页设计首页设计第一步：编写简单的头部文件第二步：编写网页的主体布局文件第三步：在网页中添加网站显示信息第四步：给网页元素添加CSS样式，制作过程时，为了后期维护的方便，需要将样式表定义在网页的头部文件中，在网页主体文件部分需要使用样式时可以直接调用。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.4.2 会员注册页面会员注册页面第一步：将首页文件复制后，将首页文件的主体部分更改成表单的形式。第二步：在网页的头部文件插入有参函数，对用户输入的表单数据进行客户端验证。