学习单元4用CSS样式美化网页.ppt
保定职业技术学院传播技术系 广告设计与制作专业,学习单元四 用CSS样式美化网页,复习1：超级链接的创建,创建内部链接 创建锚点链接创建外部链接创建E-mail链接创建其他链接（空链接、脚本链接、文件下载链接）,创建锚点链接的过程分两步：首先创建命名锚记然后创建到命名锚记的链接,复习2:创建锚点链接,创建图像热区链接的过程分两步：首先创建热区然后创建热区到目标位置的链接,复习3:创建图像热区链接,“目标”项各个选项的含义：_blank，在一个新的未命名的浏览器窗口中打开链接的网页。_parent，如果是嵌套的框架，链接会在父框架或窗口中打开，如果不是嵌套框架，则等同于_top，在整个浏览器窗口中显示。_self是浏览器的默认值，会在当前网页所在的窗口中或框架中打开链接的网页。_top会在完整的浏览器窗口中打开网页。,注意:,授课内容,一、了解CSS样式,二、创建与编辑CSS样式,三、用CSS样式美化网页元素,了解CSS样式的功能、CSS选择器的类型,掌握创建CSS样式的技巧,灵活运用CSS美化网页。,教学目标,知识和技能目标（1）了解CSS样式的功能（2）CSS选择器的类型（3）创建CSS样式的技巧（4）用CSS样式美化网页,能力目标灵活运用CSS样式美化网页的能力,教学重点,教学难点,（一）CSS的概念（二）标记的概念（三）Html的缺陷（四）CSS的引入,一、了解CSS样式,例：4-1.html,例：4-2.html,例：4-3.html,（一）CSS的概念,CSS是Cascading Style Sheets（层叠样式表单）的简称，用于控制网页样式并允许将网页样式信息与网页内容分离的一种标记语言。CSS是格式化页面元素对象的一系列规则，利用这些规则控制网页元素的格式，不仅可以减少网页的体积，而且能快速更新网站的格式与设计，更方便、更精确地控制网页外观。一个样式表由样式规则组成，它告诉浏览器怎样去呈现一个文档。（类比：Word里的样式）,（二）标记的概念,HTML文件开始 HTML文件的头部开始 HTML文件的头部内容 定义显示在浏览器窗口标题栏的字符（即网页的标题）HTML文件的头部内容 HTML文件的头部结束 HTML文件的主体开始 HTML文件的主体内容 HTML文件的主体结束 HTML文件结束,CSS层叠样式,例：4-1.html,（一）认识CSS样式面板,二、创建与编辑CSS样式,（二）创建CSS样式,打开CSS样式面板的方法：快捷键Shift+F11或“窗口”菜单/“CSS样式”命令,认识CSS样式面板 通过CSS样式面板可以查看与当前文档相关联样式的定义及层次结构。,1、选择器类型（CSS样式分类）,（二）创建CSS样式,（1）类样式（自定义样式）,（2）标签样式,（3）高级样式（ID、上下文选择器等）,类样式的名称必须以英文句点“.”开始，然后是任何字母或字母和数字组合。如.bg、.border等，不能使用中文。如果没有输入句点，Dreamweaver会自动添加。为类命名不要使用HTML标签的名称。,对于HTML标签定义的样式称为标签样式。标签可以包括、等，标签是成对出现的，所以成对的标签对象之间的内容会应用CSS样式。对于不成对出现的标签，如就不能应用标签样式。,CSS选择器可以定义特殊的标签组合以及包含特殊序列号ID的样式。如：链接样式,“定义在”选项：选择样式表存放在位置。,2、创建类样式（自定义样式）,（二）创建CSS样式,例1：创建一个类样式给网页添加背景图像，使背景图像固定且平铺整个页面。(操作要点）,例2：创建一个类样式“.myfont”，设置字体大小为12pt，颜色为“蓝色”，行高为15pt。选择相应的文本应用样式。,注意：CSS样式表放置于文档的HEAD部分，包含网页的样式规则。,例3：更改网页中水平线的线型和颜色,例4：更改单元格td的文本颜色及背景颜色。,操作要点：,（1）单击“新建css规划按钮”，将样式命名为“.bg”；在“定义在”选项中选择“仅对该文档”，表示该样式规划只应用于当前文档（定义内部的CSS样式），单击“确定”按钮关闭对话框，打开样式表定义对话框，进行设置。（2）选定应用范围。注意：类样式需定义应用范围 如果应用样式的区域在某个HTML标签之中，可通过选定状态栏上的某个HTML标签选定应用范围。如果要将样式应用于整个段落，可将光标置于某个段落中。如果应用样式的区域是不规则的可用鼠标选定区域。（3）应用类样式 方法一：在属性面板中单击“样式”下拉列表，选择需要的样式.bg。如果选定状态栏的body，则标签变为“body.bg”；如果选择的是不规则区域，在应用样式时会在选定区域两端加标记，且状态栏的标签变为。注意：属性面板的“样式”列表中只列出了类样式，因为标签样式和高级样式不能应用于普通对象。方法二：在状态栏中右击应用样式的HTML标签，在弹出的菜单中选择“设置类”/“bg”。方法三：选中对象，在样式列表中选择所需的类样式，单击鼠标右键，选择“套用”。,（在此先介绍内部样式表的创建）,样式表定义对话框,样式表定义对话框-分类,1、类型定义文本样式（包含链接文本的样式）2、背景背景样式的定义类样式3、区块定义区块的样式 区块样式是精确定义整段文本中文字的字距、对齐方式等属性。4、方框定义方框的样式 定义特定元素的大小及其与周围元素的间距等属性。6、边框定义的边框样式7、列表定义的列表样式8、定位主要用来定义层在页面中布局的相关属性。注意：“溢出”选项可去掉页面中的滚动条。由于滚动条是页面主体中的内容，因此定义body标签，在“溢出”下拉列表中选择“隐藏”。9、扩展样式 主要包含3方面的CSS支持：鼠标指针、分页、滤镜。（能力进阶）,、创建标签样式,（二）创建CSS样式,例：更改网页中水平线的线型和颜色,例：更改单元格td的文本颜色及背景颜色。,注意：自动应用，不需要定义应用范围。,、创建高级样式,（二）创建CSS样式,可以设置超级链接的样式，分别设置a:link（链接的默认样式）、a:visited（访问过链接）、a:hover（鼠标上滚）、a:active（活动链接）的样式。,注意：自动应用，不需要定义应用范围。,例1：设置链接文本的颜色，修饰为“无”下划线。,思考：超链接访问过后hover样式不出现的问题？被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：L-V-H-A。,例2：实现将鼠标放在链接上时，链接文本改变颜色，同时出现下划线。,1、使用CSS样式定义对话框,（三）编辑修改样式,2、使用标签检查器,选定一个已定义的CSS样式，在CSS面板中执行下列操作之一：单击右下角的“编辑样式”按钮,打开CSS样式定义对话框修改样式。单击右上角的弹出菜单按钮，从弹出菜单中选择“编辑”，,在CSS样式面板中选择一个规则，“标签”面板将变为“规则”面板组，在“CSS属性”选项卡中显示相关的一些属性，可以修改标签的属性。,1、在CSS面板中新建外部的CSS样式,(四)创建外部的CSS样式,2、将内置的CSS样式导出为外部的CSS样式,1、用CSS样式美化网页,三、用CSS样式美化网页元素,2、用CSS样式制作网页导航条,课堂小结,阅读教材与本讲相关内容，理解CSS样式表的应用。制作个人网站。浏览优秀网站，分析网站的主要栏目、风格、页面布局、色彩搭配等设计技巧，绘制布局草图；模仿练习网站的主页。,课后作业,
