Dreamweaver MX网页设计与制作 教学课件 作者 曾立 第5章.ppt

《Dreamweaver MX网页设计与制作 教学课件 作者 曾立 第5章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Dreamweaver网页设计和制作第5章HTML样式和CSS样式5.1HTML格式5.2CSS格式本章任务创建HTML样式表应用HTML样式表编辑HTML样式表清除HTML样式表创建基于现有文本的HTML样式表创建CSS样式表应用CSS样式表编辑CSS样式表删除CSS样式表引入HTML样式是一些文字格式的组合，DreamweaverMX为用户提供HTML样式是为了提高制作网页的效率。使用HTML样式可以设置字体属性和段落属性，也可以选择将创建的HTML样式应用于文本或段落。“CSS”样式面板选择“窗口”→“CSS样式”菜单命令，或按【Shift+F11】键即

2、可打开“CSS样式”面板：可打开“附加样式表”对话框。选择要链接到或导入到当前文档中的外部样式表。：可新建CSS样式。：打开“编辑样式表”对话框，在对话框中可对当前文档或外部样式表中的任何样式进行编辑。：选中面板中的样式，再单击该按钮可删除所选的样式，并删除该样式应用于任何对象中的设置。创建CSS样式在“CSS样式”面板中单击按钮，打开如下对话框。创建自定义样式：创建自定义样式，选中该单选项可以创建一个应用于文本和文本块的CSS样式。但需要注意的是，在“名称”下拉列表框中输入的自定义样式名称要以英文句点开头，如果没有输入，则Dreamweaver将自动添加。重

3、定义HTML标签：选中该单选项可以重新定义HTML标签，表示为现有HTML标签赋上新的样式。选中该单选项后“名称”下拉列表框变为“标签”下拉列表框。使用CSS选择器：只要用来设置超级链接的属性。a:link链接未被访问时a:visited链接被访问后a:hover当鼠标放在链接上时a:active当鼠标点在链接上时设置CSS样式格式CSS格式共有8种类型，如下图：类型、背景、区块、盒子、边框、列表、定位、扩展类型格式字体：输入字体类型，从下拉列表中选择需要的字体。大小：设置字体大小。粗细：字体的粗细程度。样式：字体的特殊格式。变量：选择字体的变形方式。行高：选

4、择“正常”或“值”选项，当选择“值”选择项时可在右侧的下拉列表框中选择值的单位。大小写：设置文本的大小写方式。修饰：设置文本的修饰效果。颜色：选择需要的颜色，也可在文本框中直接输入颜色值。背景格式背景颜色：选择需要的颜色，也可在文本框中直接输入颜色值。背景图像：可选择背景图像。重复：图像重复放置的方式。附件：设置该背景图像是固定在原始位置还是可以滚动。水平位置：设置应用样式对象的水平位置。垂直位置：设置应用垂直对象的水平位置。区块格式单词间距：设置单词的间距方式，若选择“值”选项，则在该下拉列表框中输入数值来确定单词的间距，并在右侧的下拉列表中设置数值的单位。

5、字母间距：设置字母间的间距。垂直对齐：设置指定对象相对于其父级对象在垂直方向上的对齐方式。文本对齐：该下拉列表框用于指定文本在应用该样式对象中的对齐方式。文本缩进：设置第一行的缩进距离。空格：设置处理空格的方式。显示：设置区块中要显示的格式。盒子格式宽和高：设置对象的宽度和高度。浮动：设置应用样式对象的浮动位置。利用该参数可以将元素移到页面之外，如在下拉列表框中选择“右对齐”选项，则将元素放置到页面右侧的空白处。清除：设置层不允许在应用样式对象的某个侧边。如在下拉列表框中选择“左对齐”选项，则层不能出现在应用样式元素的左侧。填充：设置应用样式元素的内容和元素的

6、边框之间的空白大小，如果没有边框，则为与边距之间的空白大小。边界：设置应用样式的元素边界和其他元素之间的空白大小。边框格式样式：在该栏中设置边框的样式外观，该栏中各项下拉列表框中的选项都相同。若选中复选框，就可将“上”下拉列表框中的设置应用于元素的所有边。若取消该复选框的选中状态，就可分别在“上”、“右”、“下”和“左”下拉列表框中设置对应边的边框格式。宽度：该栏中设置元素边框的粗细。其设置方法与“样式”栏类似。颜色：该栏中设置元素边框的颜色。其设置方法与“样式”栏类似。列表格式类型：设置无序列表的项目符号类型及有序列表的编号类型。项目符号图像：指定图像作为无

7、序列表的项目符号，可直接输入指定图像的路径。位置：选择列表文本是否换行和缩进。如选择“内”选项，则当列表过长而自动换行时，不缩进，若选择“外”选项，则当列表过长而自动换行时以缩进方式显示。定位格式类型：设置浏览器如何定位层。“绝对”：绝对坐标定位层位置“相对”：相对坐标定位层位置“静态”：层定位在文本本身的位置上宽和高：设置层的宽度和高度。显示：设置层的初始显示条件。如果不指定可见性属性，默认情况下大多数浏览器都继承父级的属性。若选择“继承”选项，则继承层父级的可见性属性；若选择“可见”选项，则无论层父级是否可见，都显示层的内容；若选择“隐藏”选项，则无论层父

8、级是否可见，都隐藏层的内容。Z轴：设置