Download presentation
Presentation is loading. Please wait.
2
单元8： DIV+CSS技术的应用 授课教师：张俊辉
3
Dreamweaver中样式的创建、编辑及应用的具体方法
重点 Dreamweaver中样式的创建、编辑及应用的具体方法 难点 CSS样式设置的方法，及各属性的含义
5
操作演示
6
.rh { font-size: 9pt;//字号为9磅 color: #FFFFFF;//文字颜色 text-decoration: none;//无修饰 } .zr { font-size: 9pt; color: #FF6600; text-decoration: none; }
7
.z { font-size: 9pt; color: #006600; text-decoration: none; }
.zr1 { font-size: 9pt; color: #000066; } .z { font-size: 9pt; color: #006600; text-decoration: none; }
8
.rk { font-size: 9pt; color: #009900;//文字颜色 text-decoration: none; background-color: #FFFFFF;//背景颜色为白色 height: 16px;//方框高度为16象素 border: 1px solid #006600;//边框为实线，宽度为1象素，颜色代码 }
9
.k { font-size: 9pt; color: #009900; text-decoration: none; border: 1px solid #666666; }
10
a:hover { font-size: 9pt; color: #FF6600;//超级链接的颜色 text-decoration: none;
11
CSS类型包括三种：类、标签和高级。在Dreamweaver中可以轻松设定不同类型的CSS样式。 1．类（可用于任何标签） 可作为 class 属性应用于文本范围或文本块的自定义样式。注意类名称必须以句点开头，可以包含任何字母和数字组合。如果没有输入开头的句点，Dreamweaver 将自动输入句点。
12
标签（重新定义特定标签的外观） 重定义特定 HTML 标签的默认格式设置。当读者选择该选项时，可以在“标签”项的下拉菜单中选择一个标签或直接输入一个标签。 。
13
使用css选择器，用于对超级链接的四种状态进行设置。 A:active活动超级链接状态，即击下鼠标时的状态。 A:hover鼠标指向超级链接时的状态。 A:link默认的超级链接状态，即没有任何动作是的状态。 A:visited被访问过的超级链接状态。
14
“定义在”有两个单选项： 新建样式表文件，生成专门的.css文件此样式可应用于多个文档，即为外部链接式样式。 仅对该文档，只在当前文档中应用，即为嵌入式样式。
15
链接一个外部样式表的操作步骤如下： （1）选择“窗口”|“CSS样式”命令，打开CSS样式面板。 （2）单击该面板上的“附加样式表”按钮，或单击该面板顶部右边的三角按钮，从弹出的菜单中选择“附加样式表”命令，出现“链接外部样式表”对话框。 （3）在该对话框中选择添加为“链接”或“导入”，并在“文件/URL”文本框中输入外部样式表文件名，或单击“浏览”按钮选择外部样式表文件（外部样式表文件必须以.css为扩展名），单击“确定”按钮。
16
现在，对于一个高质量的网站来说，应用CSS样式表是必不可少的。CSS样式表的主要优点是便于对网页整体风格进行控制，当更新一处的 CSS 规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式，并且CSS还可以制作网页特性。
17
模仿练习题： 把前边的班级网页利用建立的css样式同一风格。 要求： （1）建立超级链接的css样式； （2）为所有图片加上边框； （3）设置字号统一为9磅字，字体为宋体。 （4）建立外部样式表，将外部样式表导入
Similar presentations
