Dreamweaver可视化编辑与应用CSS样式PPT课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第17页/共17页
DreamweaverCS5快速入门
能力目标
a.掌握CSS应用 b.能用CSS+DIV布局页面
情感目标
（1）培养学生对本学科的学习兴趣。 （2）培养学生严谨求实的工作态度以及感受美、评价美的艺 术情操。 （3）培养学生在进行自主学习的过程中勇于克服困难，体验 到成功后的快乐。
第1页/共17页
教学重点与难点
a:link
描述超链接鼠 标滑上去状态
a:hover
A标签的 伪类
a:visited a:active
描述超链接被 访问过的状态
-描述超链接被 激活的状态
注：以上4个属性同时出现时，顺序不能错；依次是：link,visited,hover,active
第12页/共17页
创建样式表
创建样式表
调出CSS样式面板（shift+F11）
第9页/共17页
使用ＣＳＳ样式
• 常用ＣＳＳ样式选择器（选择符） • ＩＤ选择器 • 类选择器 • 标选择器 • 关联选择器 • 组合选择器 • 通配符选择器 • 伪类选择器
第10页/共17页
使用ＣＳＳ样式
• ＣＳＳ样式属性定义
第11页/共17页
关于伪类
描述同一对象的不同状态
描述超链接 默认状态
CSS样式的调用方法 CSS样式的各种属性的应用 CSS面板的应用 应用DIV+CSS布局网页
第2页/共17页
常用的HTML标签
a 超链接
table 表格 tr 行 td 单元格 th 标题单元格
div 区块 (层) span 文本区域 很小 p 段落 h1-h6 标题
s 加强 em 强调 b 粗体 i 斜体 del 删除线
第7页/共17页
CSS样式的结构
选择符｛ 属性1：属性值; 属性2：属性值;
………………………………… ｝ 例： img{
width:100px; height:100px; }
注：属性值的单位只 有属性值为0时才能省。
第8页/共17页
CSS选择符
类选择符
ID选择符
符合选择符 标签选择符
选择符就是HTML 留给CSS的接口，方 便CSS样式修饰HTML元素
第15页/共17页
Diagram
ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.
Title in here
Describe a vision of company or strategic
创建样式表
点击CSS面板上“+”按钮，并选 择“选择符”
创建样式表
填写相应属性值
第13页/共17页
样式面板
删除样式
禁用属性 添加属性
链接外部属性 修改属性
第14页/共17页
作业布置
• 作业布置：利用ＣＳＳ样式来做汽车用品主页,页面布局与特效制作 • 预习作业（带上问题去学习）网页上样式的编辑与修改？
ul 项目列表 ol 编号列表 li 列表项
dl 定义列表 dd 定义说明 dt 定义术语
第3页/共17页
常用的HTML标签
img 图像
html html文档 head 文件头部 body 整个页面 title 网页标题 meta 网页附加信
息
第4页/共17页
了解什么叫CSS
什么叫 CSS
CSS中文名称
B
内联方式
C
外联方式
<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" />
CSS
CSS的功 能
CSS是网页元素的修饰者
CSS样式 的语法结
构
选择符｛属性１：属性值;属性2：属性值 ｝
第5页/共17页
使用ＣＳＳ样式
• ＣＳＳ样式（层叠样式表） • ＣＳＳ样式的创建
• 方法１：外联式 • 方法２：内联式 • 方法３：内嵌式
第6页/共17页
CSS样式的创建方法
A
标签内分 隔符
contents.
Title in here
Describe a vision of company or strategic
contents.
Title in here
Describe a vision of company or strategic
contents.
第16页/共17页
感谢您的欣赏！
DreamweaverCS5快速入门
能力目标
a.掌握CSS应用 b.能用CSS+DIV布局页面
情感目标
（1）培养学生对本学科的学习兴趣。 （2）培养学生严谨求实的工作态度以及感受美、评价美的艺 术情操。 （3）培养学生在进行自主学习的过程中勇于克服困难，体验 到成功后的快乐。
第1页/共17页
教学重点与难点
a:link
描述超链接鼠 标滑上去状态
a:hover
A标签的 伪类
a:visited a:active
描述超链接被 访问过的状态
-描述超链接被 激活的状态
注：以上4个属性同时出现时，顺序不能错；依次是：link,visited,hover,active
第12页/共17页
创建样式表
创建样式表
调出CSS样式面板（shift+F11）
第9页/共17页
使用ＣＳＳ样式
• 常用ＣＳＳ样式选择器（选择符） • ＩＤ选择器 • 类选择器 • 标选择器 • 关联选择器 • 组合选择器 • 通配符选择器 • 伪类选择器
第10页/共17页
使用ＣＳＳ样式
• ＣＳＳ样式属性定义
第11页/共17页
关于伪类
描述同一对象的不同状态
描述超链接 默认状态
CSS样式的调用方法 CSS样式的各种属性的应用 CSS面板的应用 应用DIV+CSS布局网页
第2页/共17页
常用的HTML标签
a 超链接
table 表格 tr 行 td 单元格 th 标题单元格
div 区块 (层) span 文本区域 很小 p 段落 h1-h6 标题
s 加强 em 强调 b 粗体 i 斜体 del 删除线
第7页/共17页
CSS样式的结构
选择符｛ 属性1：属性值; 属性2：属性值;
………………………………… ｝ 例： img{
width:100px; height:100px; }
注：属性值的单位只 有属性值为0时才能省。
第8页/共17页
CSS选择符
类选择符
ID选择符
符合选择符 标签选择符
选择符就是HTML 留给CSS的接口，方 便CSS样式修饰HTML元素
第15页/共17页
Diagram
ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.
Title in here
Describe a vision of company or strategic
创建样式表
点击CSS面板上“+”按钮，并选 择“选择符”
创建样式表
填写相应属性值
第13页/共17页
样式面板
删除样式
禁用属性 添加属性
链接外部属性 修改属性
第14页/共17页
作业布置
• 作业布置：利用ＣＳＳ样式来做汽车用品主页,页面布局与特效制作 • 预习作业（带上问题去学习）网页上样式的编辑与修改？
ul 项目列表 ol 编号列表 li 列表项
dl 定义列表 dd 定义说明 dt 定义术语
第3页/共17页
常用的HTML标签
img 图像
html html文档 head 文件头部 body 整个页面 title 网页标题 meta 网页附加信
息
第4页/共17页
了解什么叫CSS
什么叫 CSS
CSS中文名称
B
内联方式
C
外联方式
<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" />
CSS
CSS的功 能
CSS是网页元素的修饰者
CSS样式 的语法结
构
选择符｛属性１：属性值;属性2：属性值 ｝
第5页/共17页
使用ＣＳＳ样式
• ＣＳＳ样式（层叠样式表） • ＣＳＳ样式的创建
• 方法１：外联式 • 方法２：内联式 • 方法３：内嵌式
第6页/共17页
CSS样式的创建方法
A
标签内分 隔符
contents.
Title in here
Describe a vision of company or strategic
contents.
Title in here
Describe a vision of company or strategic
contents.
第16页/共17页
感谢您的欣赏！