《利用表格制作主页课件》由会员分享，可在线阅读，更多相关《利用表格制作主页课件（26页珍藏版）》请在金锄头文库上搜索。
1、第六章第六章 布局网页布局网页1 本次课任务本次课任务本次课任务本次课任务了解网页布局技术发展历程了解网页布局技术发展历程实例操作利用表格制作主页实例操作利用表格制作主页初步了解层布局作用初步了解层布局作用2 第四第四第四第四节节 利用表格制作主利用表格制作主利用表格制作主利用表格制作主页页表格布局 IT时代，几乎没有哪一行能和网络脱离关系，因此网站的规划与建设已经成为一项专门职业。在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接反映网站的点击率，而点击率正是网站的生命所在。所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。网网页布局布局历
2、史史内内容容 1 不得不提到的一个联盟：w3c4 第四第四第四第四节节 利用表格制作主利用表格制作主利用表格制作主利用表格制作主页页表格布局 1994 年，万维网联盟(W3C)成立，他们将 HTML 确立为网页的标准标记语言。这一举动阻断了任何独立公司想要开发专利的浏览器和相应的程序语言的野心，因为这会对网络的完整性产生不利的影响。W3C 一直致力于确立与维护网页编程语言的标准(例如 JavaScript)，随着这些标准的不断更新，网页布局热潮也是各领风骚几年。网网页布局布局历史史内内容容 1 随随意的无机意的无机构构化布局化布局表格布局表格布局DIV+CSS布局布局对应于于HTML标准准对应
3、于于XML标准准6 7 第四第四第四第四节节 利用表格制作主利用表格制作主利用表格制作主利用表格制作主页页表格布局 表格布局使网页设计师制作网站时有了更多选择。在 HTML 中表格标签的本意是为了显示表格化的数据，但是设计师很快意识到可以利用表格来构造他们设计的网页，这样就可以制作较以往作品更加复杂的，多栏目的网页。表格布局就这样流行了起来，融合了背景图片切片技术，常给人以看起来较实际布局简洁得多的结构。8 第四第四第四第四节节 利用表格制作主利用表格制作主利用表格制作主利用表格制作主页页表格布局 同一时期也是大量应用 GIF 占位图片控制留白的时期。一些主流的公司甚至训练设计师如何使用 GI
4、F 占位;如微软的“关于 HTML 表格中的 GIF 占位”。第一批主要应用表格布局的“所见即所得”网页设计软件的发展助长了表格的应用。另外，某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码(例如每行只有 1px 高却包含了几百列的表格)。即使是稍微复杂一点儿的网页(比如多栏目页面)，设计师们都要依赖于表格来创建。9 10 第四第四第四第四节节 利用表格制作主利用表格制作主利用表格制作主利用表格制作主页页表格布局 CSS设计受到关注始于21世纪初。虽然CSS已经存在很长一段时间了，但是在当时仍然缺乏主流浏览器的支持，并且许多设计师对它很是陌生(甚至感到恐惧)。与表格布局与Fla
5、sh网页相比，CSS有许多优势。首先它将网页的内容与样式相分离，这从本质上意味着视觉表现与内容结构的分离。11 第四第四第四第四节节 利用表格制作主利用表格制作主利用表格制作主利用表格制作主页页表格布局 CSS是网页布局的最佳实践，与CSS相比表格布局根本不值一提。CSS极大地缩减了标签的混乱还创造了简洁并语义化的网页布局。CSS还使得网站维护更加简便，因为网页的结构与样式是相互分离的。人们完全可以改变一个基于CSS设计的网站的视觉效果而不去改动网站的内容。12 第四第四第四第四节节 利用表格制作主利用表格制作主利用表格制作主利用表格制作主页页表格布局 由CSS设计的网页的文件体积往往小于基于
6、表格布局的网页，这也意味着页面响应时间的改善。虽然首次访问一个网站会下载样式表占用带宽，但CSS会缓存在访问者的浏览器里(默认情况下)，这样接下来的访问过程中，网页就都会迅速显示了。13 14 15 思考：我们初学者改如何选择学习这两种网页布局技术以时代发展的眼光辩证看待问题先从TABLE再到TABLE+CSS有了基础后深入学习DIV+CSS16 实例操作利用例操作利用表格表格制作主制作主页内内容容 2 Table of Contents17 实例操作利用例操作利用表格表格制作主制作主页内内容容 2 分析网页头部布局样式分析网页中部布局样式分析网页底部布局样式18 19 20 21 总结总结总结总结注意空格也需要单元格布局注意空格也需要单元格布局注意高度和宽度注意高度和宽度注意布局模式和标准模式的切换注意布局模式和标准模式的切换22 网网页布局布局历史史内内容容 1 00000025 3.00000000001.
