Dreamweaver可视化编辑与应用CSS样式

会计学1Dreamweaver可视化编辑与应用CSS样式DreamweaverCS5快速入门能力目标

a.掌握CSS应用

b.能用CSS+DIV布局页面情感目标（1）培养学生对本学科的学习兴趣。（2）培养学生严谨求实的工作态度以及感受美、评价美的艺术情操。（3）培养学生在进行自主学习的过程中勇于克服困难，体验到成功后的快乐。

第1页/共17页教学重点与难点CSS样式的调用方法CSS样式的各种属性的应用CSS面板的应用应用DIV+CSS布局网页

第2页/共17页常用的HTML标签a超链接table表格tr行td单元格th标题单元格div区块(层)span文本区域很小p段落h1-h6标题s加强em强调b粗体i斜体del删除线ul项目列表ol编号列表li列表项dl定义列表dd定义说明dt定义术语第3页/共17页常用的HTML标签

img图像htmlhtml文档head文件头部body整个页面title网页标题meta网页附加信息……第4页/共17页了解什么叫CSSCSS中文名称CSS是网页元素的修饰者选择符｛属性１：属性值;属性2：属性值｝CSS什么叫CSSCSS的功能CSS样式的语法结构第5页/共17页使用ＣＳＳ样式ＣＳＳ样式（层叠样式表）ＣＳＳ样式的创建方法１：外联式方法２：内联式方法３：内嵌式第6页/共17页CSS样式的创建方法<imgsrc=“img/1.jpg”style=“width:120px;height:100px;”/><styletype=“text/css”>img{Width:120px;Height:100px;}</style><linktype="text/css"rel="stylesheet"href="common.css"/>A

标签内分隔符C外联方式B

内联方式第7页/共17页CSS样式的结构选择符｛ 属性1：属性值;属性2：属性值;…………………｝例：img{ width:100px; height:100px;}注：属性值的单位只有属性值为0时才能省。第8页/共17页CSS选择符选择符就是HTML留给CSS的接口，方便CSS样式修饰HTML元素类选择符符合选择符ID选择符标签选择符第9页/共17页使用ＣＳＳ样式常用ＣＳＳ样式选择器（选择符）ＩＤ选择器类选择器标签选择器关联选择器组合选择器通配符选择器伪类选择器第10页/共17页使用ＣＳＳ样式ＣＳＳ样式属性定义第11页/共17页关于伪类

描述同一对象的不同状态a:linka:visiteda:hovera:active描述超链接鼠标滑上去状态描述超链接默认状态描述超链接被访问过的状态描述超链接被激活的状态注：以上4个属性同时出现时，顺序不能错；依次是：link,visited,hover,activeA标签的伪类第12页/共17页创建样式表调出CSS样式面板（shift+F11）点击CSS面板上“+”按钮，并选择“选择符”填写相应属性值创建样式表创建样式表创建样式表第13页/共17页样式面板删除样式禁用属性修改属性添加属性链接外部属性第14页/共17页作业布置作业布置：利用ＣＳＳ样式来做汽车用品主页,页面布局与特效制作预习作业（带上问题去学习）网页上样式的编辑与修改？第15页/共17页DiagramDescribeavisionofcompanyorstrategiccontents.Describeavisionofcompanyorstrategiccontents.Describeavisionofcompanyorstrategiccontents.TitleinhereTitleinhereTitleinher