CSS样式应用—网页制作.ppt

练习2 动画演示：设置超链接样式“a:link”。 操作提示： 单击右边图片，将全屏动画演示操作过程。 若要退出全屏演示，将按键盘上的“ESC”键，返回本页。 项目准备 练习1 　 练习2　 练习3 练习3 练习要求：修饰用户登录窗口。 比较：观察以下两个登录窗口的效果。 项目准备 图一 图二 比较结果 图一是我们通过制作表单所表现出的默认效果； 图二的样式与整个窗口风格协调一致，更加美观。 制作标准： 用户与密码文本框背景“黑色”，边框颜色为“橙色”； 三个按钮的背景为“橙色”，为了突出立体效果，左上与右下的边框颜色设置有所不同。 练习1 　 练习2　 练习3 练习3 相关知识： (一)认识“背景”属性设置。 项目准备 　使用 “背景”类别可以定义 CSS 样式的背景设置。可以对网页中的任何元素应用背景属性。例如，在文本、表格、页面等的后面。还可以设置背景图像的位置。 练习1 　 练习2　 练习3 练习3 相关知识： (一)认识“背景”分类设置。 项目准备 背景颜色：设置元素的背景颜色。 背景图像：设置元素的背景图像。 重复：定义是否重复以及如何重复背景图像。有以下选项： “不重复”在元素开始处显示一次图像。 “重复”在元素的后面水平和垂直平铺图像。 “横向重复”和“纵向重复”分别显示图像水平带区和垂直带区。图像被剪辑以适合元素的边界。 附件：确定背景图像是固定在它的原始位置还是随内容一起滚动。 水平位置和垂直位置：指定背景图像相对于元素的初始位置。这可以用于将背景图像与页面中心垂直和水平对齐。如果附件属性为“固定”，则位置相对于“文档”窗口而不是元素。 “背景”分类常用属性 练习1 　 练习2　 练习3 练习3 相关知识： (二)认识“边框”属性设置。 项目准备 使用 “边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。 练习1 　 练习2　 练习3 练习3 相关知识： (二)认识“边框”属性设置。 项目准备 “边框”分类常用属性 样式：设置边框的样式外观。 可设置的样式有点划线、虚线、实线、双线、槽状、脊状、凹陷、凸出。 样式的显示方式取决于浏览器。DW MX 2004在“文档”窗口中将所有样式呈现为实线。??? 全部相同：将相同的边框样式属性设置应用于的元素的“上”、“右”、“下”和“左”侧。取消选择“全部相同”可设置元素各个边的边框样式。 宽度：设置元素边框的粗细。 取消选择“全部相同”可设置元素各个边的边框宽度。 全部相同：将相同的边框宽度设置应用于的元素的“上”、“右”、“下”和“左”侧。 颜色：设置边框的颜色。 取消选择“全部相同”可设置元素各个边的边框颜色。 练习1 　 练习2　 练习3 练习3 操作步骤： 项目准备 1.设置并应用样式“.kuang”。 ①按“Shift+F11”键，打开“CSS样式”面板； ②单击面板右下角的“新建CSS样式”按钮，打开“新建CSS样式”对话框； ③ “选择器类型”选择为“类” ； ④在“名称”文本框中输入“.kuang”，单击“确定”，显示“CSS样式定义”对话框； ⑤在“CSS样式定义”对框中将“分类”栏选择为“背景”，将“背景颜色”设置为“黑色”； ⑥在“CSS样式定义”对话框中将“分类”栏选择为“边框”，相应设置如下图： 练习1 　 练习2　 练习3 练习3 操作步骤： 项目准备 1.设置并应用样式“.kuang”。 ⑦在页面中选择文本框； ⑧在“属性”面板中将“类”设置为”kuang“如下图。 练习1 　 练习2　 练习3 练习3 操作步骤： 项目准备 2.设置并应用样式“.annu”。 ①按“Shift+F11”键，打开“CSS样式”面板； ②单击面板右下角的“新建CSS样式”按钮，打开“新建CSS样式”对话框； ③ “选择器类型”选择为“类” ； ④在“名称”文本框中输入“.annu”，单击“确定”，显示“CSS样式定义”对话框； ⑤在“CSS样式定义”对框中将“分类”栏选择为“背景”，将“背景颜色”设置为“橙色（#FF6600）”； ⑥在“CSS样式定义”对话框中将“分类”栏选择为“边框”，相应设置如下图： 练习1 　 练习2　 练习3 * 2.项目准备 3.项目实施 4.项目展示 5.项目总结 返回 1.项目分析 2.项目准备 3.项目实施 4.项目展示 5.项目总结 返回 1.项目分析 2.项目准备 3.项目实施 4.项目展示 5.项目总结 返回 1.项目分析 项目展示 2.项目准备 3.项目实施 4.项目展示 5.项目总结 返回 1.项目分析 项目总结 技能型紧缺人才培养－－ 网页制作 奥运网站制作 青岛电子学校　　王辉 项目分析 项目准