Dreamweaver第五篇可视化编辑与应用CSS样式.pptVIP

可视化编辑与应用CSS样式 可视化编辑与应用CSS样式 教学目标 知识目标 掌握样式表的创建方法，以及CSS面板的相关操作技巧 掌握样式表的应用 掌握样式表的编辑、修改等操作 掌握外部样式表文件的建立及调用方法 掌握CSS滤镜的使用方法 DreamweaverCS5快速入门 能力目标 a.掌握CSS应用 b.能用CSS+DIV布局页面 情感目标 （1）培养学生对本学科的学习兴趣。 （2）培养学生严谨求实的工作态度以及感受美、评价美的艺术情操。 （3）培养学生在进行自主学习的过程中勇于克服困难，体验到成功后的快乐。 教学重点与难点 CSS样式的调用方法 CSS样式的各种属性的应用 CSS面板的应用 应用DIV+CSS布局网页 常用的HTML标签 a 超链接 table 表格 tr 行 td 单元格 th 标题单元格 div 区块 (层) span 文本区域 很小 p 段落 h1-h6 标题 s 加强 em 强调 b 粗体 i 斜体 del 删除线 ul 项目列表 ol 编号列表 li 列表项 dl 定义列表 dd 定义说明 dt 定义术语 常用的HTML标签 img 图像 html html文档 head 文件头部 body 整个页面 title 网页标题 meta 网页附加信息 …… 了解什么叫CSS CSS中文名称 CSS是网页元素的修饰者 选择符｛属性１：属性值;属性2：属性值｝ CSS 什么叫CSS CSS的功能 CSS样式的语法结构 使用ＣＳＳ样式 ＣＳＳ样式（层叠样式表） ＣＳＳ样式的创建 方法１：外联式 方法２：内联式 方法３：内嵌式 CSS样式的创建方法 img src=“img/1.jpg” style=“width:120px; height:100px;” / style type=“text/css” img{ Width:120px; Height:100px; } /style link type=text/css rel=stylesheet href=common.css / A 标签内分隔符 C 外联方式 B 内联方式 CSS样式的结构 选择符｛ 属性1：属性值; 属性2：属性值; ………………………………… ｝ 例： img{ width:100px; height:100px; } 注：属性值的单位只有属性值为0时才能省。 CSS选择符 选择符就是HTML 留给CSS的接口，方便CSS样式修饰HTML元素 类选择符 符合选择符 ID选择符 标签选择符 使用ＣＳＳ样式 常用ＣＳＳ样式选择器（选择符） ＩＤ选择器 类选择器 标签选择器 关联选择器 组合选择器 通配符选择器 伪类选择器 使用ＣＳＳ样式 ＣＳＳ样式属性定义 关于伪类描述同一对象的不同状态 a:link a:visited a:hover a:active 描述超链接鼠标滑上去状态 描述超链接默认状态 描述超链接被 访问过的状态 描述超链接被 激活的状态 注：以上4个属性同时出现时，顺序不能错；依次是：link,visited,hover,active A标签的伪类 创建样式表 调出CSS样式面板（shift+F11） 点击CSS面板上“+”按钮，并选择“选择符” 填写相应属性值 创建样式表 创建样式表 创建样式表 样式面板 删除样式 禁用属性 修改属性 添加属性 链接外部属性 作业布置 作业布置：利用ＣＳＳ样式来做汽车用品主页,页面布局与特效制作 预习作业（带上问题去学习）网页上样式的编辑与修改？ Diagram Describe a vision of company or strategic contents. Describe a vision of company or strategic contents. Describe a vision of company or strategic contents. Title in here Title in here Title in here ThemeGallery is a Design Digital Content Contents mall developed by Guild Design Inc.