计算机应基础使用样式修饰页面

5.7 使用样式修饰页面 本节学习目标 熟悉CSS样式面板 掌握创建和使用一些常用的CSS样式的方法 掌握通过CSS样式管理和修饰页面的方法 5.7.1 CSS样式的创建 CSS的全称是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表。 CSS可以扩展HTML的功能，美化页面 展开“设计”面板，并选中“CSS样式”标签，出现 “CSS样式”面板 单击面板右下角的“新建CSS样式”按钮 ，创建CSS样式，弹出“新建CSS样式”对话框。 5.7.2 CSS样式对话框的设置 类 型 背 景 区 块 方 框 边 框 列 表 定 位 扩 展 类型：主要用于定义文字的属性。 背景：主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等 。 区块：主要用于设置文本的文字间距、对齐方式、排列方式、文字缩进等。 方框：主要用于设置元素在页面中的位置。包括元素的边界、宽度、高度和浮动方式等。 边框：主要用于设置边框的样式。 列表：主要用于设置文本列表的类型、列表项图片等。 定位：主要设置对象在网页中的具体位置。 扩展：主要用于制作鼠标样式、图片特殊效果 5.7.3 CSS样式的管理 新建样式 应用样式 编辑样式 删除样式 附加样式 套用：选择希望应用所选样式的对象，右键点击样式名称，在菜单中选择”套用” 编辑 ：修改、添加样式的具体内容 删除 ：删除选择的样式 附加 ：链接外部样式表 实例1：重定义特定标签 定义“source/7”目录下的文件夹“7-2-1” 为站点目录。打开7-2-1.htm页面。 新建CSS样式，保存样式在text1.css样式文件中 应用样式 实例2：使用CSS选择器 定义文件夹“7-2-2” 为站点目录。打开7-2-2.htm页面。 新建CSS样式，选择“高级(ID、上下文选择器等)” 类型。 选中文本“我的第一个链接”，然后在属性面板中设置其链接为“#”。 新建CSS样式，选择“高级(ID、上下文选择器等)” 类型。在选择器栏中直接输入a.link2:link 同样设置其他三种状态：a.link2:visited、a.link2:hover、 a.link2:active 的颜色和效果 选中文本“我的第二个链接”，然后在属性面板中设置其链接为“#”。 实例3：CSS控制网页背景 定义文件夹“7-2-3” 为站点目录。打开7-2-3.htm页面。 新建CSS样式，命名为textback，仅对该文档生效。 单击上面一个单元格，应用该样式 新建tdback样式，设置“背景”类别下的背景图像，选择“重复”，并应用到下面一个单元格中。 实例4：CSS区块排列文本 定义文件夹“7-2-4” 为站点目录。打开7-2-4.htm页面。 新建CSS样式，命名为block1，保存在font.css样式文件中。 对中文文本应用该样式。 新建block2样式， “类型” 中设置字体为Verdana，大小为16px。在“区块” 中设置文本对齐为两端对齐。对英文文本应用该样式。 实例5：CSS方框对齐对象 定义文件夹“7-2-5” 为站点目录。打开7-2-5.htm页面。 新建CSS样式，命名为box1，仅对该文档生效。 对图片应用该样式。 实例6：CSS边框创建漂亮按钮 定义文件夹“7-2-6” 为站点目录。打开7-2-6.htm页面。 新建CSS样式，命名为border1，仅对该文档生效。 以同样的方法设置CSS样式border2、border3 对三个按钮分别应用样式。 5.8.1 Dreamweaver辅助工具 本节学习目标 掌握摸板的基本操作及应用 掌握库的基本操作及应用 了解插件的含义 掌握插件的使用方法 1. 模板的使用 模板最强大的用途是： 可以设计出风格一致的页面，省去重复劳动部分。 一次更新多个页面。从模板创建的文档与该模板保持连接状态(除非您以后分离该文档)。可以修改模板并立即更新基于该模板的所有文档中的设计。 创建模板 创建可编辑区域 模板的使用 创建模板 通过Dreamweaver MX 2004的新建模板页来全新的创建一个模板页面 把现有HTML文档通过适当的修改另存为一个模板，以使其应用于其它WEB文档。 选择菜单“【文件】→【新建】”，弹出“新建文档”对话框，选择“模板页”→“HTML模板”，单击“创建”按钮生成一个空的模板页面。 编辑该模板页面，加入图片、文字等元素。 选择菜单“【文件】→【保存】/【另存为】”，在弹出“另存为模板”对话框中输入english。 注意内容的改变 资源面板 5.8.2 添加可编辑