html教学文档.ppt

23.3.5 网站维护 网站维护即更新网站的信息，从用户的角度进一步完善网站信息，同时也是跳转到网站开发的第一步：网站规划，从而使网站的运行更加稳定。 23.4 大综合案例 23.4.1 首页设计 23.4.2 会员注册页面 23.4.1 首页设计 第一步：编写简单的头部文件 第二步：编写网页的主体布局文件 第三步：在网页中添加网站显示信息 第四步：给网页元素添加CSS样式，制作过程时，为了后期维护的方便，需要将样式表定义在网页的头部文件中，在网页主体文件部分需要使用样式时可以直接调用。 23.4.2 会员注册页面 第一步：将首页文件复制后，将首页文件的主体部分更改成表单的形式。 第二步：在网页的头部文件插入有参函数，对用户输入的表单数据进行客户端验证。 HTML/CSS/JavaScript 标准教程实例版（第3版） 第 章 23 本书编委会 编著 第23章 综合案例 23.1 HTML综合案例 23.2 CSS综合案例 23.3 网站开发流程 23.4 大综合案例 HTML/CSS/JavaScript 标准教程实例版（第3版） 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.