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