第4章Web标准设计和网页布局（第59次课）主讲BigGuo.pptVIP

本章用1次课介绍Web标准、CSS技术和CSS＋Div布局等现代网页设计知识。 4.1 Web标准和CSS 4.2 CSS和DIV的结合 4.1 Web标准和CSS 一.Web标准的概念 1/3 一.Web标准的概念 2/3 一.Web标准的概念 3/3 二.CSS 4.2 CSS和DIV的结合 一.DIV标记 1/2 一.DIV标记 2/2 二.DIV＋CSS布局 1/5 二.DIV＋CSS布局 2/5 二.DIV＋CSS布局 3/5 二.DIV＋CSS布局 4/5 二.DIV＋CSS布局 5/5 课堂练习 首页 复习 讲授 练习 小结 作业 首页 复习 讲授 练习 小结 作业 首页 复习 讲授 练习 小结 作业 首页 复习 讲授 练习 小结 作业 首页 复习 讲授 练习 小结 作业 首页 复习 讲授 练习 小结 作业 第4章 Web标准设计和网页布局 （第5/9次课） 主讲: BigGuo 仲恺农业工程学院 ? 信息学院 中国 广州 传统的网页布局：使用Table进行布局。缺点： 网页的内容和修饰没有分离，导致改版的困难 页面代码的语义不明确，导致数据利用的困难 1.传统Web设计 2.Web标准的3个方面 结构标准 表现标准 行为标准 网页 Structure Presentation Behavior 结构标准语言包括两个部分：XML和XHTML XML：eXtensible Markup Language XHTML：eXtensible HyperText Markup Language(可扩展HTML) 3.结构标准 4.表现标准 CSS：Cascading Style Sheets（层叠样式表） 以CSS进行网页布局，控制网页的表现 CSS标准布局与XHTML结构语言相结合，可以实现表现与结构相分离 提高网站的实用性和可维护性 包括两个部分：DOM和ECMAScript DOM：Document Obiect Model ECMAScript：ECMA(European Computer Manufacturers Association)制定的标准脚本语言 5.行为标准 结构和表现分离，结构和行为分离 ∵表现的标准语言是CSS ∴CSS是Web标准的基础 1.Web标准的核心 2.CSS CSS是Cascading Style Sheets层叠样式表的缩写 创建CSS标准的目的是以CSS取代HTML表格式布局、框架和其他表现的语言 纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构 1.定义一个块 Division的简称，区分的意思 Div是用来为HTML文档内大块（block-level）的内容提供结构和背景的标记 DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的 例： Div标记是一个容器，可以 放页面中的任何元素 html head /head body div 一个块 /div /body /html 2.Div的作用 单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 br是一样的 例 Div真正有价值的应用在于和CSS结合，对网页进行布局 即大名鼎鼎的DIV＋CSS布局 html head /head body div 一个块 /div形成一个换行 /body /html IE浏览效果 相当于 一个块br形成一个换行 1.网页布局 网页内容在页面上所处位置的设计 传统的网页布局是使用网页“表格”，即 广为诟病的“Table布局” 2.Table布局的缺陷 table本来是用来组织表格状数据的有力工具 用来组织网页元素，即“Table布局”一开始就是“错”的 一些缺陷： 丑陋，臃肿 内容与修饰堆积在一起 不利于搜索引擎检索 ...... 3.Web标准推荐的网页布局是Div+CSS布局 Div组织内容，即结构 CSS控制修饰，即表现 优点： 大大缩减页面代码，提高页面浏览速度,缩减带宽成本 结构清晰，容易被搜索引擎搜索到 缩短改版时间 使用CSS可以结构化HTML，让标记回归本原 在几乎所有的浏览器上都可以使用 更好的控制页面布局 ...... 3.Div+CSS布局实例 ——导航菜单 本例用Div＋CSS实现一个导航条 (1)定义结构－使用li来制作导航菜单 div id= ul id=navlist lia href=http:// id=current首页/a/li lia href=http://学院概况/a/li