《综合案例(HTMLCSSJavaScript标准教程实例版(第2版.ppt》由会员分享,可在线阅读,更多相关《综合案例(HTMLCSSJavaScript标准教程实例版(第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/Ja
9、vaScript 标准教程实例版(第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 标准教程实例版(第
10、2版)第章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 会员注册页面会员注册页面第一步:将首页文件复制后,将首页文件的主体部分更改成表单的形式。第二步:在网页的头部文件插入有参函数,对用户输入的表单数据进行客户端验证。