网页布局49971.pptVIP

网页布局 万红波 烟台大学 网络中心 网页布局 将页面中的各个内容按照设计图的设计组装成HTML文档 表格布局 层布局 表格布局 为什么采用表格布局 考虑到早期浏览器的兼容性问题 表格中可以控制单元格的宽度和高度，可以互相嵌套 表格布局的问题 对于复杂的网页来说，表格的逻辑过于复杂 表格在互相嵌套中，变的比较冗余 HTML代码冗肿，难以修改 网页的构成 网页主要由3部分组成 结构 表现 行为 内容、表现、结构 内容就是网页上真正想让访问者浏览的信息 内容、表现、结构 结构就是对内容进行格式化，分成标题、正文和列表等 内容、表现、结构 内容具有结构后，但是外观没有改变，比如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。 所有这些用来改变内容外观的东西，称之为“表现” 传统HTML的滥用问题 传统的HTML标签 控制结构的标签，如p 控制表现的标签，如font 结构标签与表现标签混杂使用 Web标准 使结构和表现进行分离 定义结构的标准语言： XML XHTML 目的是逐渐取代HTML 定义表现的标准语言： CSS 目的是为了取代HTML表格式布局、帧和其他表现的语言。CSS布局与结构式XHMTL相结合来分离表现与结构。 定义行为的标准语言： DOM（文档对象模型） 对结构化的文档建立对象模型，使得用户可以通过程序语言来控制其内部结构，解决了JavaScript和JScript之间的冲突。 ECMAScript 标准的脚本语言 div标签 层div标签，主要是用来进行定位，把内容放到层中，然后通过CSS来控制层的位置。 span标签 应用在行内，用来定义一小快需要标识的内容 iframe标签 iframe标签，IE专用的，在一个页面中插入一个框架以显示另一个文件。 XHTML XHTML是对HTML的升级，使得传统的HTML既符合XML的标准，又能适应大部分的HTML浏览器。 XHTML是基于HTML的，它是更严格、代码更整洁的HTML版本 XHTML与HTML的区别 选择DTD定义文档的类型 在XHTML中必须声明文档的类型，以便浏览器知道正浏览的文档是什么类型。 设定一个名字空间 定义语言编码 XHTML与HTML的区别 XHTML与HTML的区别 XHTML元素一定要被正确的嵌套使用 biThis text is bold and italic!/b/i biThis text is bold and italic!/i/b 标签名字一定要用小写字母 所有的XHTML元素一定要关闭 属性名字必须小写 属性值必须带上英文双引号 CSS的重要性 页面中仅仅包含对访问者有用的内容以及一个定义良好的结构，所有的表现成分都放在CSS文件中定义。 对于动态效果，可以通过脚本或者程序语言修改对象的CSS的属性从而改变页面的显示效果。 * * !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / titleUntitled Document/title /head body /body /html *