第5讲 使用CSS样式和Div标签.ppt

DreamweaverCS4中文版基础培训教程 主讲 XXX老师 从零开始 人民邮电出版社 第5讲使用CSS样式和Div标签 教学目标5 1CSS样式5 1 1功能讲解5 1 2范例解析 设置 理想与人生 CSS样式5 1 3课堂实训 设置 文竹 CSS样式5 2Div标签5 2 1功能讲解5 2 2范例解析 插入Div标签5 2 3课堂实训 插入Div标签5 3综合案例 使用Div CSS布局网页 教学目标 了解CSS样式的类型 了解CSS样式的属性 掌握创建和应用CSS样式的方法 返回目录 5 1CSS样式 5 1 1功能讲解5 1 2范例解析 设置 理想与人生 CSS样式5 1 3课堂实训 设置 文竹 CSS样式 返回目录 5 1 1功能讲解 CSS CascadingStyleSheet 可译为 层叠样式表 或 级联样式表 是一组格式设置规则 用于控制Web页面的外观 通过使用CSS样式设置页面的格式 可将页面的内容与表现形式分离 页面内容存放在HTML文档中 而用于定义表现形式的CSS规则则存放在另一个独立的样式表文件中或HTML文档的某一部分 通常为文件头部分 具体内容如下 创建CSS样式 CSS属性 应用CSS样式 附加样式表 返回目录 一 创建CSS样式 选择 窗口 CSS样式 命令 打开 CSS样式 面板 如图所示 返回目录 单击 CSS样式 面板底部的按钮 打开 新建CSS规则 对话框 如图所示 返回目录 在 选择器类型 下拉列表中选择一种类型后 需要在 选择器名称 列表框中选择或输入相应的选择器名称 最后需要在 规则定义 列表框中选择所定义规则的位置 共两个选项 仅限该文档 和 新建样式表文件 返回目录 二 CSS属性 DreamweaverCS4将CSS属性分为8大类 类型 背景 区块 方框 边框 列表 定位和扩展 可以在CSS规则定义对话框中进行设置 返回目录 1 类型 类型属性主要用于定义网页中文本的字体 大小 颜色 样式 行高及文本链接的修饰效果等 如图所示 返回目录 2 背景 背景属性主要用于设置背景颜色或背景图像 其属性对话框如图所示 返回目录 3 区块 区块属性主要用于控制网页元素的间距 对齐方式等 其属性对话框如图所示 返回目录 4 方框 CSS将网页中所有的块元素都看作是包含在一个方框中的 方框 分类对话框如图所示 该分类对话框中包含以下6种CSS属性 返回目录 5 边框 网页元素边框的效果是在 边框 分类对话框中进行设置的 如图所示 返回目录 6 列表 列表属性用于控制列表内的各项元素 其分类对话框如图所示 返回目录 7 定位 定位属性可以使网页元素随处浮动 这对于一些固定元素 如表格 来说 是一种功能的扩展 而对于一些浮动元素 如层 来说 却是有效地 用于精确控制其位置的方法 其分类对话框如图所示 返回目录 8 扩展 扩展 分类对话框包含两部分 如图所示 返回目录 三 应用CSS样式 在已经创建好的CSS样式中 标签CSS样式 ID名称CSS样式 复合CSS样式基本上都是自动应用的 重新定义了标签的CSS样式 凡是使用该标签的内容将自动应用该标签CSS样式 如重新定义了段落标签的CSS样式 凡是使用标签的内容都将应用其样式 定义了ID名称CSS样式 拥有该ID名称的对象将应用该样式 复合内容CSS样式将自动应用到所选择的内容上 类样式的应用需要进行手动设置 方法有以下几种 返回目录 1 通过 属性 面板 首先选中要应用CSS样式的内容 然后在HTML 属性 面板的 类 下拉列表中选择已经创建好的样式 或者在CSS 属性 面板的 目标规则 下拉列表中选择已经创建好的样式 如图所示 返回目录 2 通过菜单栏中的 格式 CSS样式 命令 首先选中要应用CSS样式的内容 然后选择 格式 CSS样式 命令 从下拉菜单中选择一种设置好的样式 这样就可以将被选择的样式应用到所选的内容上 如图所示 返回目录 3 通过 CSS样式 面板下拉菜单中的 套用 命令 首先选中要应用CSS样式的内容 然后在 CSS样式 面板中选中要应用的样式 再在面板的右上角单击按钮 或者直接单击鼠标右键 从弹出的下拉菜单中选择 套用 命令即可应用样式 返回目录 四 附加样式表 外部样式表通常是供多个网页使用的 其他网页文档要想使用已创建的外部样式表 必须通过 附加样式表 命令将样式表文件链接或者导入到文档中 附加样式表通常有两种途径 链接和导入 在 CSS样式 面板中单击 附加样式表 按钮 打开 链接外部样式表 对话框 如图所示 在对话框中选择要附加的样式表文件 然后选择 导入 单选按钮 最后单击按钮将文件导入 返回目录 5 1 2范例解析 设置 理想与人生 CSS样式 首先将 范例解析 素材 第5讲 5 1 2 文件夹下的内容复制到站点根文件夹下 然后创建CSS样式控制网页外观 最终效果如图所示 这是使用CSS样式控制网页外观的一个例子 可以通过 CSS样式 面板创建相应的样式 具体操作步骤参考教材 返回目录 返回目录 5 1 3课堂实训 设置 文竹 CSS样式 首先将 课堂实训 素材 第5讲 5 1 3 文件夹下的内容复制到站点根文件夹下 然后创建CSS样式控制网页外观 最终效果如图所示 这是使用CSS样式控制网页外观的一个例子 可以通过 CSS样式 面板创建相应的样式 返回目录 返回目录 5 2Div标签 5 2 1功能讲解5 2 2范例解析 插入Div标签5 2 3课堂实训 插入Div标签 返回目录 5 2 1功能讲解 在现代网页布局中 Div标签是经常使用到的 但Div本身只是一个区域标签 不能定位与布局 真正定位的是CSS代码 插入Div标签的方法是 选择 插入 布局对象 Div标签 命令 打开 插入Div标签 对话框进行设置即可 如图所示 返回目录 5 2 2范例解析 插入Div标签 先插入一个Div标签 然后在该标签内再插入3个并排的Div标签 最终效果如图所示 这是使用CSS样式和Div标签的一个例子 具体操作步骤参考教材 返回目录 5 2 3课堂实训 插入Div标签 首先将 课堂实训 素材 第5讲 5 2 3 文件夹下的内容复制到站点根文件夹下 然后使用Div标签进行简单的页面区域划分 最终效果如图所示 这是使用CSS样式和Div标签的一个例子 仍然需要先插入Div标签 然后创建CSS样式进行控制 返