《Dreamweaver MX网页设计与制作 教学课件 ppt 作者 曾立 第5章》由会员分享，可在线阅读，更多相关《Dreamweaver MX网页设计与制作 教学课件 ppt 作者 曾立 第5章（29页珍藏版）》请在金锄头文库上搜索。
1、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
2、】键即可打开“CSS样式”面板 ：可打开“附加样式表”对话框。选择要链接到或导入到当前文档中的外部样式表。 ：可新建CSS样式。 ：打开“编辑样式表”对话框，在对话框中可对当前文档或外部样式表中的任何样式进行编辑。 ：选中面板中的样式，再单击该按钮可删除所选的样式，并删除该样式应用于任何对象中的设置。,创建CSS样式,在“CSS样式”面板中单击 按钮，打开如下对话框。,创建自定义样式：创建自定义样式，选中该单选项可以创建一个应用于文本和文本块的CSS样式。但需要注意的是，在“名称”下拉列表框中输入的自定义样式名称要以英文句点开头，如果没有输入，则Dreamweaver将自动添加。 重定义HTM
3、L标签：选中该单选项可以重新定义HTML标签，表示为现有HTML标签赋上新的样式。选中该单选项后“名称”下拉列表框变为“标签”下拉列表框。,使用CSS选择器：只要用来设置超级链接的属性。 a:link 链接未被访问时 a:visited 链接被访问后 a:hover 当鼠标放在链接上时 a:active 当鼠标点在链接上时,设置CSS样式格式,CSS格式共有8种类型，如下图： 类型、背景、区块、盒子、边框、列表、定位、扩展,类型格式 字体：输入字体类型，从下拉列表中选择需要的字体。 大小：设置字体大小。 粗细：字体的粗细程度。 样式：字体的特殊格式。 变量：选择字体的变形方式。 行高：选择“正
4、常”或“值”选项，当选择“值”选择项时可在右侧的下拉列表框中选择值的单位。 大小写：设置文本的大小写方式。 修饰：设置文本的修饰效果。 颜色：选择需要的颜色，也可在文本框中直接输入颜色值。,背景格式 背景颜色：选择需要的颜色，也可在文本框中直接输入颜色值。 背景图像：可选择背景图像。 重复：图像重复放置的方式。 附件： 设置该背景图像是固定在原始位置还是可以滚动。 水平位置：设置应用样式对象的水平位置。 垂直位置：设置应用垂直对象的水平位置。,区块格式 单词间距：设置单词的间距方式，若选择“值”选项，则在该下拉列表框中输入数值来确定单词的间距，并在右侧的下拉列表中设置数值的单位。 字母间距：设
5、置字母间的间距。垂直对齐：设置指定对象相对于其父级对象在垂直方向上的对齐方式。 文本对齐：该下拉列表框用于指定文本在应用该样式对象中的对齐方式。 文本缩进：设置第一行的缩进距离。 空格：设置处理空格的方式。 显示：设置区块中要显示的格式。,盒子格式 宽和高：设置对象的宽度和高度。 浮动：设置应用样式对象的浮动位置。利用该参数可以将元素移到页面之外，如在下拉列表框中选择“右对齐”选项，则将元素放置到页面右侧的空白处。 清除：设置层不允许在应用样式对象的某个侧边。如在下拉列表框中选择“左对齐”选项，则层不能出现在应用样式元素的左侧。 填充：设置应用样式元素的内容和元素的边框之间的空白大小，如果没有
6、边框，则为与边距之间的空白大小。 边界：设置应用样式的元素边界和其他元素之间的空白大小。,边框格式 样式：在该栏中设置边框的样式外观，该栏中各项下拉列表框中的选项都相同。若选中复选框，就可将“上”下拉列表框中的设置应用于元素的所有边。若取消该复选框的选中状态，就可分别在“上”、“右”、“下”和“左”下拉列表框中设置对应边的边框格式。 宽度：该栏中设置元素边框的粗细。其设置方法与“样式”栏类似。 颜色：该栏中设置元素边框的颜色。其设置方法与“样式”栏类似。,列表格式 类型：设置无序列表的项目符号类型及有序列表的编号类型。 项目符号图像：指定图像作为无序列表的项目符号，可直接输入指定图像的路径。
7、位置：选择列表文本是否换行和缩进。如选择“内”选项，则当列表过长而自动换行时，不缩进，若选择“外”选项，则当列表过长而自动换行时以缩进方式显示。,定位格式 类型：设置浏览器如何定位层。 “绝对” ：绝对坐标定位层位置 “相对”：相对坐标定位层位置 “静态” ：层定位在文本本身的位置上 宽和高：设置层的宽度和高度。 显示：设置层的初始显示条件。如果不指定可见性属性，默认情况下大多数浏览器都继承父级的属性。若选择“继承”选项，则继承层父级的可见性属性；若选择“可见”选项，则无论层父级是否可见，都显示层的内容；若选择“隐藏”选项，则无论层父级是否可见，都隐藏层的内容。 Z轴：设置层的堆叠顺序。,溢出
8、：设置当层的内容超出层的大小时其内容的放置位置。 “可见” ：当层的内容超出层的范围时，层自动向下或向右扩展，使其内容显示在层中； “隐藏” ：当层的内容超出层的范围时，保持层的大小并剪辑任何超出的内容，不提供任何滚动条； “滚动”：不管层中的内容是否溢出层范围，层上都出现滚动条，因此当层内容超出层的范围时，可通过拖动滚动条来浏览； “自动”：则当层的内容超出层的范围时，就出现滚动条，通过滚动条进行浏览。 定位：设置层在固定的位置显示。 剪辑：设置层的可见部分。,扩展格式 分页：设置在打印页面时强制分页的位置。在“之前”和“之后”下拉列表框中，可以分别设置分页前和分页后位置。 视觉效果：设置样
9、式的可视效果。,编辑CSS样式,在“CSS样式”面板中，单击面板底部的 按钮 在列表中选中要编辑的样式 对选择的样式进行编辑,删除CSS样式,在“CSS样式”面板中，选中要删除的样式。 单击面板底部的 按钮。,链接外部CSS样式表,在“CSS样式”面板中，单击 按钮。 在“文件/URL”下拉列表框中指定外部样式表的路径。 选择了要链接的样式表文件后，单击确定按钮返回“链接外部样式表”对话框。,应用CSS样式表,在页面中选中要应用样式的对象。 在“CSS样式”面板的“样式”列表框中，选中要作为样式应用的样式表，单击鼠标右键，在弹出的快捷菜单中选择“套用”命令。,实战,1、创建一个CSS样式表文件，将网站中所有的网页均链接应用该样式表文件。 2、使用CSS选择器创建4种不同的具有动态效果的文本链界，并且将超级链接的下划线去掉。,
