Dreamweaver8讲义-广州市广播电视大学天河区分校.doc

教学讲义用纸 PAGE  《网页设计与制作 ——Mecromedia Dreamweaver 8》 讲 义 广州市广播电视大学 吴献彩 E-mail:dfwxc007@163.com 第八章 使用样式表制作高级页面 一、样式表基础 1、样式表：是一系列格式规则，简称CSS，它们控制网页内容的外观 2、CSS的特点： 1)将格式和结构分离 2)以前所未有的能力控制页面布局 3)制作体积更小，下载速度更快的网页 4)将许多网页同时更新 5)有很好的兼容性 3、CSS的基本类型 1)类样式 唯一可以应用于文档即网页中任何区域或文本的CSS样式 类样式名称必须以句点开头，并可包含任何字母和数字组合 如果没输入句点，Dreamweaver8会自动补上 应用样式的方法： 选中文本，在属性栏中选择CSS样式 选中文本，右击“CSS样式”面板中的CSS样式——套用 选中文本，文本菜单——CSS样式——选择样式 编辑样式： 先打开“CSS样式”面???，选择应用样式，单击样式再单击面板右下角的编辑样式表按钮 或者先打开“CSS样式”面板，单击编辑样式，再双击CSS样式表的名称。 应用时会出现span//span标签，其中包含class“样式名称” 2)标签样式 针对某一个HTML标签 网页中所有使用该标签的内容都将应用此样式 3)高级样式 伪类：某些标签具有不同的状态，这些不同的状态即伪类 可以为伪类分别定义不同的CSS样式 常用的伪类是超级链接标签a，它具有4种伪类 a:link（正常） a:active（单击即正在访问） a:visited（已访问过） a:hover（鼠标置于链接上） 4、CSS样式表的保存方式有2种，控制页面的方法有4种： 1)保存在网页元素内部： 行内样式：直接对HTML的标签使用style属性，然后将CSS代码直接写在标签其中。例：详见讲义文件夹中的文件“行内样式.htm” 内嵌式：将CSS样式定义信息写在〈head〉与〈/head〉之间，并且用style和/style标签进行声明。这种方法只对本网页的网页元素有效。例：详见讲义文件夹中的文件“内嵌式..htm” 2)保存在网页外部 链接式：将CSS样式定义信息写在另一个*.CSS文件中。在本网页的〈head〉和〈/head〉之间加上“link href=1.css type=text/css rel=stylesheet”语句，将CSS文件链接到页面中。例：详见讲义文件夹中的文件“链接式.htm” 导入式：将CSS样式定义信息写在另一个*.CSS文件中。在本网页的〈head〉和〈/head〉之间的style和/style标签之间加上@import语句。例：详见讲义文件夹中的文件“导入式.htm” 5、导入式样式表在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分。链接式样式表则是在HTML的标签需要格式时才以链接的方式引入。 6、优先级：①行内样式→②链接式→③内嵌式→④导入式 二、在页面中使用样式表 1、认识“CSS样式”面板 1)全部：显示网页中所有CSS样式规则的模式 所有规则： 2)正在：显示当前选择网页元素CSS样式信息模式 所选内容的摘要： 关于：显示在“所选内容的摘要”栏中选择的项目是在哪个CSS样式规则中定义的 3)属性：显示当前选择的规则的定义信息 4）“显示类别视图”按钮：在“属性”栏中分类显示所有的属性 5）“显示列表视图”按钮：在“属性”栏中按字母顺序显示所有的属性 6）“只显示设置属性”按钮：只显示设定了值的属性 7）“附加样式表”按钮：链接外部CSS文件 8）“新建CSS规则”按钮：新建CSS样式规则 9）“编辑样式”按钮：编辑选择的CSS样式规则 10）“删除CSS属性”按钮：删除选择的CSS样式规则 2、新建CSS样式规则：窗口——CSS样式——单击“新建CSS规则”按钮 3、定义CSS样式规则 1)类型设置：主要用于定义网页中文本的字体、颜色及字体的风格等 2)背景设置：主要是在网页的元素后面加入固定的背景色或图像 重复：设置背景图像的重复方式 附件：设置背景图像是固定/滚动 3）区块设置：（区块是文本、图像、层等网页元素）主要用于控制块中内容的间距、对齐方式和文字缩进等 单词间距：设置单词之间的间距：只适用于英文 空格：设置空格处理的方式，有正常/保留/不换行3种 正常：将多个空格显示为1个空格 保留：以文本本身的格式显示空格和回车 不换行：以文本本身的格式显示空格，但不显示回车 4)方框设置：CSS将网页中所有的块元素都看作是包含在一个方框中。这个方框分为4个部分，如下图所示。 方框组成示意图 宽、高：设置元素的宽度、高度 浮动：设置块元