Dreamweaver MX网页设计与制作 作者 曾立 第5章.pptVIP

Dreamweaver网页设计和制作 第5章 HTML样式和CSS样式 5.1 HTML格式 5.2 CSS格式 本章任务 创建HTML样式表 应用HTML样式表 编辑HTML样式表 清除HTML样式表 创建基于现有文本的HTML样式表 创建CSS样式表 应用CSS样式表 编辑CSS样式表 删除CSS样式表 引入 HTML样式是一些文字格式的组合，Dreamweaver MX为用户提供HTML样式是为了提高制作网页的效率。使用HTML样式可以设置字体属性和段落属性，也可以选择将创建的HTML样式应用于文本或段落。 “CSS”样式面板 选择“窗口”→“CSS样式”菜单命令，或按【Shift+F11】键即可打开“CSS样式”面板 ：可打开“附加样式表”对话框。选择要链接到或导入到当前文档中的外部样式表。 ：可新建CSS样式。 ：打开“编辑样式表”对话框，在对话框中可对当前文档或外部样式表中的任何样式进行编辑。 ：选中面板中的样式，再单击该按钮可删除所选的样式，并删除该样式应用于任何对象中的设置。 创建CSS样式 在“CSS样式”面板中单击 按钮，打开如下对话框。 创建自定义样式：创建自定义样式，选中该单选项可以创建一个应用于文本和文本块的CSS样式。但需要注意的是，在“名称”下拉列表框中输入的自定义样式名称要以英文句点开头，如果没有输入，则Dreamweaver将自动添加。 重定义HTML标签：选中该单选项可以重新定义HTML标签，表示为现有HTML标签赋上新的样式。选中该单选项后“名称”下拉列表框变为“标签”下拉列表框。 使用CSS选择器：只要用来设置超级链接的属性。 a:link 链接未被访问时 a:visited 链接被访问后 a:hover 当鼠标放在链接上时 a:active 当鼠标点在链接上时 设置CSS样式格式 CSS格式共有8种类型，如下图： 类型、背景、区块、盒子、边框、列表、定位、扩展 类型格式 字体：输入字体类型，从下拉列表中选择需要的字体。 大小：设置字体大小。 粗细：字体的粗细程度。 样式：字体的特殊格式。 变量：选择字体的变形方式。 行高：选择“正常”或“值”选项，当选择“值”选择项时可在右侧的下拉列表框中选择值的单位。 大小写：设置文本的大小写方式。 修饰：设置文本的修饰效果。 颜色：选择需要的颜色，也可在文本框中直接输入颜色值。 背景格式 背景颜色：选择需要的颜色，也可在文本框中直接输入颜色值。 背景图像：可选择背景图像。 重复：图像重复放置的方式。 附件： 设置该背景图像是固定在原始位置还是可以滚动。 水平位置：设置应用样式对象的水平位置。 垂直位置：设置应用垂直对象的水平位置。 区块格式 单词间距：设置单词的间距方式，若选择“值”选项，则在该下拉列表框中输入数值来确定单词的间距，并在右侧的下拉列表中设置数值的单位。 字母间距：设置字母间的间距。垂直对齐：设置指定对象相对于其父级对象在垂直方向上的对齐方式。 文本对齐：该下拉列表框用于指定文本在应用该样式对象中的对齐方式。 文本缩进：设置第一行的缩进距离。 空格：设置处理空格的方式。 显示：设置区块中要显示的格式。 盒子格式 宽和高：设置对象的宽度和高度。 浮动：设置应用样式对象的浮动位置。利用该参数可以将元素移到页面之外，如在下拉列表框中选择“右对齐”选项，则将元素放置到页面右侧的空白处。 清除：设置层不允许在应用样式对象的某个侧边。如在下拉列表框中选择“左对齐”选项，则层不能出现在应用样式元素的左侧。 填充：设置应用样式元素的内容和元素的边框之间的空白大小，如果没有边框，则为与边距之间的空白大小。 边界：设置应用样式的元素边界和其他元素之间的空白大小。 边框格式 样式：在该栏中设置边框的样式外观，该栏中各项下拉列表框中的选项都相同。若选中复选框，就可将“上”下拉列表框中的设置应用于元素的所有边。若取消该复选框的选中状态，就可分别在“上”、“右”、“下”和“左”下拉列表框中设置对应边的边框格式。 宽度：该栏中设置元素边框的粗细。其设置方法与“样式”栏类似。 颜色：该栏中设置元素边框的颜色。其设置方法与“样式”栏类似。 列表格式 类型：设置无序列表的项目符号类型及有序列表的编号类型。 项目符号图像：指定图像作为无序列表的项目符号，可直接输入指定图像的路径。 位置：选择列表文本是否换行和缩进。如选择“内”选项，则当列表过长而自动换行时，不缩进，若选择“外”选项，则当列表过长而自动换行时以缩进方式显示。 定位格式 类型：设置浏览器如何定位层。 “绝对” ：绝对坐标定位层位置 “相对”：相对坐标定位层位置 “静态” ：层定位在文本本身的位置上 宽和高：设置层的宽度和高度。 显示：设置层的初始显示条件。如果不指定