第23章综合案例(HTML CSS JavaScript标准教程实例版(第2版)).ppt

《第23章综合案例(HTML CSS JavaScript标准教程实例版(第2版)).ppt》由会员分享，可在线阅读，更多相关《第23章综合案例(HTML CSS JavaScript标准教程实例版(第2版)).ppt（33页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、 本书编委会 编著实例版实例版第第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 本例的设计流程本例的设

2、计流程 设计好网页效果图，准备好素材（图片、文档等）；按照效果图用HTML实现页面布局；将素材放到网页中，并添加链接或别的功能；边做边预览效果，即时修改。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.2 准备素材准备素材（1）先用Photoshop将网页所有的内容设计好这一步需要前期需求分析，并有大量的美工设计。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.1.2 准备素材准备素材（1）先用Photoshop将网页所有的内容设计好这一步需要前期需求分析，并有大量的美工设计。HTML/CSS/JavaScript 标准教程实例版

3、（第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 准备素材准备素材（

4、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图片图片

5、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 本案例的设计思路本案例的设计思路 第一步分析效果图 第二步裁切素材图片

6、 第三步提取尺寸 第四步规划布局 第五步编写CSS样式文件 第六步插入图片和调整内容HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.2 分析效果图分析效果图观察网页可以发现，该网页的图和文字排放的位置都比较分明，要么就是一大段文字，要么就是一大块图。而且，网页的图标也放的很零散，很容易裁切和调整。所以我们首先要利用Photoshop的工具分析和制作效果图。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.3 裁切图片裁切图片因为网页的图片比较容易分离出来，所以我们在裁切图片时尽量将整个图片裁切下来。如图23-16所示，裁切的方法

7、在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 规划布局规划布局规划布局实质就是怎样将

8、这些内容完美地放到表格里，换句话说，就是用表格怎样将我们的网页内容控制得贴切、美观。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.6 编写编写CSS样式文件样式文件CSS样式文件的定义很灵活，可以放在HTML文件内，也可以单独定义一个CSS文件，然后再在HTML文件中调用。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.2.7 插入图片和调整内容插入图片和调整内容样式和布局都准备好，那剩下的事就是填充内容和调整细节。在插入图片和文字时，还有好多细节的问题需要考虑，如图片之间的距离，图片离边框的距离等。HTML/CSS/JavaS

9、cript 标准教程实例版（第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版）

10、第章2323.3.2 网站设计网站设计1一致性一致性2可读性可读性HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.3.3 网站开发网站开发网站开发是网页设计的最重要阶段，前期的规划和设计都是为网站开发服务的，需要将收集的资料进行整理和合理的布局，添加网页中需要用到的元素，在网页制作开发阶段常常需要为网页添加交互性，以便更好的吸引用户并为用户提供更好的服务。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2323.3.4 网站发布网站发布1在测试网站时，除了需要对所有影响页面显示的细节元素进行测试外，关键是要检测页面中的链接是否正常跳转，以及改变

11、文件的路径是否显示正常。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 会员注册页面会员注册页面第一步：将首页文件复制后，将首页文件的主体部分更改成表单的形式。第二步：在网页的头部文件插入有参函数，对用户输入的表单数据进行客户端验证。