divcss布局经典.pptVIP

《DIV+CSS布局基础经典》;课程大纲;1.1.1 传统Table布局;1.1.2 传统Table布局示意图;1.1.3 Table布局的缺点;2.2.0 Web标准的构成（选）;1.2.1 Web标准布局;1.2.2 DIV+CSS布局示意图;1.2.3 CSS布局代码示例;2.1.1 向Web标准过度 / XHTML 基础;2.1.2 选择合适的DTD;2.1.3 DreamweaverCS3中DTD;2.1.4 XHTML 语法规范;2.2.1 CSS语法基础;2.2.2 CSS选择器（符）;2.2.3 选择器的声明;2.2.4 如何应用CSS到网页中;2.2.5 实例代码:CSS按位置的分类;2.2.5 样式优先权问题;2.6 CSS开发环境与调试环境;3.1 被遗忘的主角 DIV;3.2 CSS盒子模型;3.3 文档流及浮动概念;3.4 浮动定位与绝对定位;4.0 一个简单的CSS布局实例;学习要点及; CSS（Cascading Style Sheet），中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 【本章学习目的】 本章通过多个CSS样式的应用实例，重点介绍了CSS样式表功能、定义CSS规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章的学习，读者应了解CSS样式表的用途，掌握创建和应用CSS样式表的方法，学会用CSS样式表进行网页的美化和网页布局。;5.1 利用CSS 样式表的网页实例;5.1 利用CSS 样式表的网页实例;;5.2 使用CSS样式表;5.2 使用CSS样式表; 1. 创建CSS样式 选择“窗口”菜单｜“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，或选择“文本”菜单｜“CSS样式”｜“新建”命令，弹出“新建CSS规则”对话框. ;5.2.2 在Dreamweaver中定义CSS;5.2.2 在Dreamweaver中定义CSS;定义的位置有以下三种情况： 选择“仅为该文档”，此时CSS样式的代码会嵌套在网页head和/head标签中。 选择“新建样式表文件”，则弹出“保存样式表文件为”对话框，如图5.5所示，选择样式文件的存储路径和文件名，单击“保存”按钮，将CSS样式代码单独存放在一个CSS文件。 选择“已有的某CSS文件”，将新建的CSS规则写入已有的css文件中。 比如：选择定义在“仅对该文档”，单击“确定”按钮后，弹出“H1的CSS规则定义”对话框，如图所示，在对话框中进行各项的格式设置，然后单击“确定”按钮。;;2.编辑和删除CSS样式 创建CSS样式后，如果要修改CSS样式，在“CSS样式”面板中，单击“CSS样式”面板右下角的“编辑”按钮，进入“CSS规则定义”的对话框，可进行修改。 某个CSS样式不再需要时，在“CSS样式”面板中，首先选中某个样式，单击CSS样式面板右下角的“删除”按钮。 ;5.3 CSS 样式的应用 ;;5.3.1 样式表的应用实例1：背景样式 　　　的应用; 5.3.2 样式表的实例应用2：文本及列　　表的应用 ;5.3.3 样式表的实例应3：方框和边框　 样式的应用;5.3.4 样式表的实例应用4：动态链接样式;;2. 调用CSS样式文件 其它网页要应用刚才建立的CSS样式文件，如何调用呢？单击“CSS样式”面板中的“附加样式表”按钮，弹出“链接外部样式表”的对话框，在“文件/URL”文本框中输入外部CSS文件路径和文件名，添加为选择“链接”选项，将新建的样式文件链接到此文件，如图所示。 ;5.3.5 样式的实例5：滤镜效果的应用;;;;;本 章 小 结