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

教师：都亚京保定职业技术学院传播技术系广告设计与制作专业教师：都亚京学习单元四用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是CascadingStyleSheets（层叠样式表单）的简称，用于控制网页样式并允许将网页样式信息与网页内容分离的一种标记语言。CSS是格式化页面元素对象的一系列规则，利用这些规则控制网页元素的格式，不仅可以减少网页的体积，而且能快速更新网站的格式与设计，更方便、更精确地控制网页外观。一个样式表由样式规则组成，它告诉浏览器怎样去呈现一个文档。（类比：Word里的样式）（二）标记的概念htmlHTML文件开始headHTML文件的头部开始···HTML文件的头部内容title···/title定义显示在浏览器窗口标题栏的字符（即网页的标题）···HTML文件的头部内容/headHTML文件的头部结束bodyHTML文件的主体开始······HTML文件的主体内容···/bodyHTML文件的主体结束/htmlHTML文件结束styletype=text/css!--body{margin-left:0px;margin-top:0px;background-image:url(images/bg.jpg);background-repeat:no-repeat;}--/styleCSS层叠样式例：4-1.html（一）认识CSS样式面板二、创建与编辑CSS样式（二）创建CSS样式打开CSS样式面板的方法：快捷键Shift+F11或“窗口”菜单/“CSS样式”命令认识CSS样式面板通过CSS样式面板可以查看与当前文档相关联样式的定义及层次结构。1、选择器类型（CSS样式分类）（二）创建CSS样式（1）类样式（自定义样式）（2）标签样式（3）高级样式（ID、上下文选择器等）类样式的名称必须以英文句点“.”开始，然后是任何字母或字母和数字组合。如.bg、.border等，不能使用中文。如果没有输入句点，Dreamweaver会自动添加。为类命名不要使用HTML标签的名称。对于HTML标签定义的样式称为标签样式。标签可以包括body、p、table、td、tr等，标签是成对出现的，所以成对的标签对象之间的内容会应用CSS样式。对于不成对出现的标签，如br就不能应用标签样式。CSS选择器可以定义特殊的标签组合以及包含特殊序列号ID的样式。如：链接样式“定义在”选项：选择样式表存放在位置。2、创建类样式（自定义样式）（二）创建CSS样式例1：创建一个类样式给网页添加背景图像，使背景图像固定且平铺整个页面。(操作要点）例2：创建一个类样式“.myfont”，设置字体大小为12pt，颜色为“蓝色”，行高为15pt。选择相应的文本应用样式。注意：CSS样式表放置于文档的HEAD部分，包含网页的样式规则。例3：更改网页中水平线的线型和颜色例4：更改单元格td的文本颜色及背景颜色。３、创建标签样式（二）创建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美化网页了解CSS样式创建CSS样式CSS的概念标记的概念HTML的缺陷CSS样式面板选择器类型创建不同样式编辑CSS样式阅读教材与本讲相关内容，理解CSS样式表的应用。制作个人网站。浏览优秀网站，分析网站的主要栏目、风格、页面布局、色彩搭配等设计技巧，绘制布局草图；模仿练习网站的主页。课后作业