学习单元4用CSS样式美化网页.ppt

《学习单元4用CSS样式美化网页.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、保定职业技术学院传播技术系广告设计与制作专业学习单元四用CSS样式美化网页复习1：超级链接的创建创建内部链接创建锚点链接创建外部链接创建E-mail链接创建其他链接（空链接、脚本链接、文件下载链接）创建锚点链接的过程分两步：首先创建命名锚记然后创建到命名锚记的链接复习2:创建锚点链接创建图像热区链接的过程分两步：首先创建热区然后创建热区到目标位置的链接复习3:创建图像热区链接“目标”项各个选项的含义：_blank，在一个新的未命名的浏览器窗口中打开链接的网页。_parent，如果是嵌套的框架，链接会在父

2、框架或窗口中打开，如果不是嵌套框架，则等同于_top，在整个浏览器窗口中显示。_self是浏览器的默认值，会在当前网页所在的窗口中或框架中打开链接的网页。_top会在完整的浏览器窗口中打开网页。注意:授课内容一、了解CSS样式二、创建与编辑CSS样式三、用CSS样式美化网页元素了解CSS样式的功能、CSS选择器的类型,掌握创建CSS样式的技巧,灵活运用CSS美化网页。教学目标[知识和技能目标]（1）了解CSS样式的功能（2）CSS选择器的类型（3）创建CSS样式的技巧（4）用CSS样式美化网页[能力目标

3、]灵活运用CSS样式美化网页的能力教学重点教学难点（一）CSS的概念（二）标记的概念（三）Html的缺陷（四）CSS的引入一、了解CSS样式例：4-1.html例：4-2.html例：4-3.html（一）CSS的概念CSS是CascadingStyleSheets（层叠样式表单）的简称，用于控制网页样式并允许将网页样式信息与网页内容分离的一种标记语言。CSS是格式化页面元素对象的一系列规则，利用这些规则控制网页元素的格式，不仅可以减少网页的体积，而且能快速更新网站的格式与设计，更方便、更精确地控制网页

4、外观。一个样式表由样式规则组成，它告诉浏览器怎样去呈现一个文档。（类比：Word里的样式）（二）标记的概念HTML文件开始HTML文件的头部开始···HTML文件的头部内容定义显示在浏览器窗口标题栏的字符（即网页的标题）···HTML文件的头部内容HTML文件的头部结束HTML文件的主体开始······HTML文件的主体内容···HTML文件的主体结束HTML文件结束

5、text/css">CSS层叠样式例：4-1.html（一）认识CSS样式面板二、创建与编辑CSS样式（二）创建CSS样式打开CSS样式面板的方法：快捷键Shift+F11或“窗口”菜单/“CSS样式”命令认识CSS样式面板通过CSS样式面板可以查看与当前文档相关联样式的定义

6、及层次结构。1、选择器类型（CSS样式分类）（二）创建CSS样式（1）类样式（自定义样式）（2）标签样式（3）高级样式（ID、上下文选择器等）类样式的名称必须以英文句点“.”开始，然后是任何字母或字母和数字组合。如.bg、.border等，不能使用中文。如果没有输入句点，Dreamweaver会自动添加。为类命名不要使用HTML标签的名称。对于HTML标签定义的样式称为标签样式。标签可以包括、

、

7、SS样式。对于不成对出现的标签，如
就不能应用标签样式。CSS选择器可以定义特殊的标签组合以及包含特殊序列号ID的样式。如：链接样式“定义在”选项：选择样式表存放在位置。2、创建类样式（自定义样式）（二）创建CSS样式例1：创建一个类样式给网页添加背景图像，使背景图像固定且平铺整个页面。(操作要点）例2：创建一个类样式“.myfont”，设置字体大小为12pt，颜色为“蓝色”，行高为15pt。选择相应的文本应用样式。注意：CSS样式表放置于文档的HEAD部分，包含网页的样式规则。例3：更改网页中水

8、平线的线型和颜色例4：更改单元格td的文本颜色及背景颜色。操作要点：（1）单击“新建css规划按钮”，将样式命名为“.bg”；在“定义在”选项中选择“仅对该文档”，表示该样式规划只应用于当前文档——（定义内部的CSS样式），单击“确定”按钮关闭对话框，打开样式表定义对话框，进行设置。（2）选定应用范围。注意：类样式需定义应用范围如果应用样式的区域在某个HTML标签之中，可通过选定状态栏上的某个HTML标签选定应用范围。如果要将样式应用于整个