div css经典布局实例,DIV+CSS布局经典电子教案.ppt

5.2 使用CSS样式表 5.2.1 CSS样式表概述 1、样式表的使用 CSS样式表的使用常用的方法有以下两种： 页面内嵌法。将样式表代码直接写在HTML标签的head区。 外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面

和之间用以下代码调用。 5.2 使用CSS样式表 2、CSS样式表语法选择符 { 属性1：值1；属性2：值2…… } 参数说明： 属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开。 1. 创建CSS样式 选择“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，或选择“文本”菜单｜“CSS样式”｜“新建”命令，弹出“新建CSS规则”对话框. 5.2.2 在Dreamweaver中定义CSS 5.2.2 在Dreamweaver中定义CSS 选择器类型有以下三种： (1) 类 自定义 CSS 规则，它的特点是灵活多变，可以重复将样式应用于网页元素。在应用时，它会在HTML标签内加入一个类(class)的定久来规定标签中的格式。比如将类的样式mystyle定义于某个标题，那么代码为：

标题1应用自定义的样式

(2) 标签 重新定义指定标签的外观，例如：创建或更改 h1 标签的 CSS 样式时，所有用 h1 标签设置了格式的文本都会立即更新，实现了批量快速更改格式的特点。 5.2.2 在Dreamweaver中定义CSS (3) 高级 在CSS 选择器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置(例如：body,table,td，用逗号隔开)，定义嵌套的样式(td img　空格隔开)，定义包含特定 id 属性的标签的格式设置。 定义的位置有以下三种情况： 选择“仅为该文档”，此时CSS样式的代码会嵌套在网页和标签中。 选择“新建样式表文件”，则弹出“保存样式表文件为”对话框，如图5.5所示，选择样式文件的存储路径和文件名，单击“保存”按钮，将CSS样式代码单独存放在一个CSS文件。 选择“已有的某CSS文件”，将新建的CSS规则写入已有的css文件中。 比如：选择定义在“仅对该文档”，单击“确定”按钮后，弹出“H1的CSS规则定义”对话框，如图所示，在对话框中进行各项的格式设置，然后单击“确定”按钮。 * 《DIV+CSS布局基础经典》 讲师:赵海海 课程大纲 1 2 3 传统布局与CSS布局 XHTML与CSS基础 4 CSS网页布局与定位 实例：三栏居中式布局 1.1.1 传统Table布局 传统Table布局方式只是利用了HTML的table元素所具有的零边框特性 因此，Table布局的核心是： 设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格(有时候会出现多次嵌套)，显然，这样不利于设计和修改。 1.1.2 传统Table布局示意图 1.1.3 Table布局的缺点 设计复杂，改版时工作量巨大 表现代码与内容混合，可读性差 不利于数据调用分析 网页文件量大，浏览器解析速度慢如蜗牛 2.2.0 Web标准的构成(选) 表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等.. 主要技术就是CSS,目前版本2.0 行为：是指对整个文档内部的一个模型进行定义及交互行为的编写 主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言) 结构：用来对网页中的信息进行整理与分类， 常用的技术有：HTML、XHTML、XML 1.2.1 Web标准布局 基于Web标准的网站设计的核心目的： 如何使网页的表现与内容分离！ 这样做的好处： 高效率的开发与简单维护 信息跨平台的可用性 降低服务器成本；加快网页解析速度 更良好的用户体验 那么，CSS2.0从真正意义实现了设计代码与内容分离 1.2.2 DIV+CSS布局示意图 真正的表现与内容完全分离，代码可读性强，样式可重复应用 1.2.3 CSS布局代码示例