第5章网页页面布局-YS.pptVIP

第1章 网页设计概述 　第2章 HTML语言基础 　　第3章 Dream weaver 基础 　　　第4章 网页中的基础元素 　　　　第5章 网页页面布局 　　　　　第6章 网页中的层和时间轴 　　　　　　第7章 表单的应用 第8章 在网页中使用行为 　第9章 CSS样式使用 　　第10章 网页中的多媒体应用 　　　第11章 模板和库 　　　　第12章 站点测试和发布 　　　　　第13章 Flash 简介 　　　　　　第14章 Fireworks 简介 第5章 网页页面布局 第5章 网页页面布局 网页页面布局主要技术： 框架： 大概布局 表格： 简略布局 层： 精细布局 CSS+DIV布局 : 样式布局 CSS+DIV布局具有易维护,易整体控制网站,易见效网页大小,易节省流量,易推广等优势 。 第5章 网页页面布局 5.1 表格 5.2 表格布局 5.3 框架布局 本章小结 5.1 表格 5.1 表格 5.1 表格 5.1 表格 5.1 表格 5.1 表格 5.1 表格 5.1 表格 5.1 表格 5.1 表格 5.1 表格 5.1 表格 5.1 表格 5.1 表格 5.2 表格布局 5.2 表格布局 5.2 表格布局 5.2 表格布局 5.2 表格布局 5.2 表格布局 5.2 表格布局 5.2 表格布局 5.2 表格布局 5.2 表格布局 5.2 表格布局 5.2 表格布局 5.3 框架布局 5.3 框架布局 5.3 框架布局 5.3 框架布局 5.3 框架布局 5.3 框架布局 5.3 框架布局 5.4 CSS布局 Dreamweaver提供了多种示例样式表，包括文本样式、表单样式、链接样式、颜色样式等多种样式表。用户可以借鉴示例样式表，在其基础上加以修改，形成符合自己要求的样式表。也可定义自己的布局模板。 5.4 CSS布局 CSS布局是一种弹性布局提： 1. 由于弹性布局的总体大小取决于用户的默认字体大小，因此弹性布局更难预测。如果正确使用的话，弹性布局对于那些需要较大字体的用户更为方便，因为行的长度仍保持适当比例。 2. 此布局中 div 的大小取决于 body 元素中的 100% 字体大小。如果您通过对 body 元素或 #container 使用“font-size: 80%”来减小文本的总体大小，请记住整体布局将按比例缩小。您最好增加各个 div 的宽度以对此进行补偿。 3. 如果字体大小在每个 div 中按不同的量进行更改（例如，#sidebar1 上的字体大小为 70%，#mainContent 上的字体大小为 85%），而不是对总体设计进行更改，则将按比例更改每个 div 的总体大小。您最好根据最终的字体大小来进行调整。 5.4 CSS布局 5.4 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 / title2列固定宽度左窄右宽型+头部/title link href=layout.css rel=stylesheet type=text/css / /head body div id=container div id=headerThis is the Header/div div id=mainContent div id=sidebarThis is the sidebar/div div id=content2列固定宽度左窄右宽型+头部 /div /div /div /body /html 5.4 CSS布局 layout.css 文件 body { font-family:Verdana; font-size:14px; margin:0;} #container {margin:0 auto; width:900px;} #header { height:100px; background:#6cf; margin-bottom:5px;} #mainContent { margin-bottom:5px;} #sidebar { float:left; width:200px; height:500px; background:#9ff;} #content { float:right; width