项目5使用CSS控制网元素.ppt

《项目5使用CSS控制网元素.ppt》由会员分享，可在线阅读，更多相关《项目5使用CSS控制网元素.ppt（78页珍藏版）》请在三一办公上搜索。

1、项目5 使用CSS控制网页元素,2,.,任务4 使用CSS滤镜产生绚丽效果,任务3 使用CSS设置超链接属性,任务2 使用CSS控制表格元素的外观,任务1 使用CSS控制页面、段落、文本的布局,项目5 使用CSS控制网页元素,3,任务分析 在项目4中制作网页时，我们通过“属性”面板为页面中的部分文本设置了大小和颜色等属性值。在浏览时，网页内的文本才会显得比较协调。这时我们已经在不知不觉中使用了CSS样式。,任务1 使用CSS控制页面、段落、文本的布局,4,相关知识,任务1 使用CSS控制页面、段落、文本的布局,通过CSS层叠样式表可以使网站保持同样的风格。如果要更换网页中的某种格式，只需修改C

2、SS层叠样式表即可，为网页和站点的编辑节省大量时间。,5,任务1 使用CSS控制页面、段落、文本的布局,CSS可以通常使用两种方法将指定的样式加载到网页元素上：嵌入式样式表和外部样式表。,相关知识,6,任务1 使用CSS控制页面、段落、文本的布局,CSS可以通常使用两种方法将指定的样式加载到网页元素上：嵌入式样式表和外部样式表。,相关知识,7,任务1 使用CSS控制页面、段落、文本的布局,单击“CSS”面板中的“新建CSS规则”按钮，可打开“新建CSS规则”对话框。如图所示。,相关知识,8,任务1 使用CSS控制页面、段落、文本的布局,高级（ID、伪类选择器等）：为特定的组合标签 定义层叠样式

3、表，可以使用ID作为属性，以保证 文档具有唯一可用的值。,类（可应用于任何标签）：可以在文档窗口的任何区域或文本中应用类样式。,标签（重新定义特定标签的外观）：重新定义 HTML标记的的默认格式。,相关知识,9,任务1 使用CSS控制页面、段落、文本的布局,进入“规则定义”对话框后，各选项的含义如下：,相关知识,10,任务1 使用CSS控制页面、段落、文本的布局,进入“规则定义”对话框后，各选项的含义如下：,相关知识,11,任务1 使用CSS控制页面、段落、文本的布局,进入“规则定义”对话框后，各选项的含义如下：,相关知识,12,任务1 使用CSS控制页面、段落、文本的布局,进入“规则定义”对

4、话框后，各选项的含义如下：,相关知识,13,任务1 使用CSS控制页面、段落、文本的布局,进入“规则定义”对话框后，各选项的含义如下：,相关知识,14,任务1 使用CSS控制页面、段落、文本的布局,进入“规则定义”对话框后，各选项的含义如下：,相关知识,15,任务1 使用CSS控制页面、段落、文本的布局,进入“规则定义”对话框后，各选项的含义如下：,相关知识,16,任务实施,任务1 使用CSS控制页面、段落、文本的布局,1打开站点example中的company.html文件。,2在CSS样式面板中单击“全部”按钮，可以看到此网页文件中已经包含了一些CSS样式。如右图所示。由于之前我们在制作网

5、页时设置过一些文本的字体、大小等样式，面板中这四个样式就是在我们操作时由Dreameaver自动生成的样式。,17,任务实施,任务1 使用CSS控制页面、段落、文本的布局,3选中此面板中的“样式”所在行，再单击此面板右下角的“删除样式表”按钮，删除这些样式。,4.逐一选中页面中曾经使用过样式的文本块、单元格等对象，通过“属性”面板将其样式设置为“无”。,18,任务实施,任务1 使用CSS控制页面、段落、文本的布局,5单击“属性”面板中的“页面属性”按钮，打开“页面属性”对话框，设置页面属性如右图所示。,6单击“确定”，这些样式就被建立到当前网页文件中了。网页中有了背景图片，且文字也设置成了宋体

6、、12像素，页面的四个边距均为2像素。,19,任务实施,任务1 使用CSS控制页面、段落、文本的布局,1在CSS样式面板中单击右下方的“新建CSS规则”按钮，打开“新建 CSS规则”对话框。,20,任务实施,任务1 使用CSS控制页面、段落、文本的布局,2在“p的CSS规则定义”对话框中选择“类型”选项，设置字体为“宋体”，大小为“12像素”，行高为“1.5倍行高”。如右图 所示。,21,任务实施,任务1 使用CSS控制页面、段落、文本的布局,3再选择“方框”选项，设置边界值：上、下均为0像素，左右均为8像素。如右图所示。,22,任务实施,任务1 使用CSS控制页面、段落、文本的布局,4单击“

7、确定”按钮完成段落的CSS设置。,23,任务实施,任务1 使用CSS控制页面、段落、文本的布局,1在CSS样式面板中单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中，设置“选择器类型”为“类”，在“标签”中输入“.text”，在“定义在”选项中选择“仅对该文档”。单击“确定”按钮。,24,任务实施,任务1 使用CSS控制页面、段落、文本的布局,2在“.text的CSS规则定义”对话框中选择“类型”选项，设置粗细为“粗体”，颜色为“#FFFFFF”（白色）。如右图所示。,25,任务实施,任务1 使用CSS控制页面、段落、文本的布局,3通过“标签选择器”选中导航菜单所在的表格，在“属

8、性”面板中设置样式为“text”。如右图所示。,26,任务实施,任务1 使用CSS控制页面、段落、文本的布局,用同样的方法再建立一个“.bottom”样式，如下：1新建“.bottom”类。如下图所示。2样式中的属性值分别是：字体为“宋体”；字号为“12像素”，行高 为“1.5倍行高”；颜色为“#FFFFFF”。3通过“标签选择器”选中网页底部的单元格，将其样式设置成.bottom。,27,任务实施,任务1 使用CSS控制页面、段落、文本的布局,1在CSS样式面板中单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中，设置“选择器类型”为“类”；在“标签”中输入“.list”；在“定

9、义在”选项中选择“仅对该文档”。单击“确定”按钮。,2在“.list的CSS规则定义”对话框中选择“类型”选项，设置字体为“宋体”，大小为“12像素”，行高为“2倍行高”。,28,任务实施,任务1 使用CSS控制页面、段落、文本的布局,3选择“区块”选项，设置文字缩进为“30像素”。如右图所示。,29,任务实施,任务1 使用CSS控制页面、段落、文本的布局,4选择“列表”选项，设置项目符号图像为“images/dot.gif”，位置为“外”。如右图所示。,30,任务实施,任务1 使用CSS控制页面、段落、文本的布局,5单击“确定”按钮完成段落的CSS设置。,6选中网页“栏目导航”中的列表（在“

10、标签选择器”中单击标记），在“属性”面板中设置其样式为“.list”。,31,任务1 使用CSS控制页面、段落、文本的布局,列表样式应用前后的效果是明显不同的，如下图所示。,返回,没有使用.list样式的效果,使用.list样式后的效果,32,任务分析 本任务我们将使用CSS对“栏目导航”和“联系方式”两个区域进一步进行美化。设置文本颜色为“白色”，对这行标题使用列表样式，并且用“imagestitle01.jpg”图片作单元格的背景。,任务2 使用CSS控制表格元素的外观,33,任务实施,任务2 使用CSS控制表格元素的外观,1打开站点example中的company.html文件。,2在C

11、SS样式面板中单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中，设置“选择器类型”为“类”；在“标签”中输入“.tab_title”；在“定义在”选项中选择“仅对该文档”。单击“确定”按钮。,3选择“类型”选项，设置文本字体为“宋体”，大小为“12像素”，行高为“1.5倍行高”，粗细为“粗体”，颜色为“#FFFFFF”。,1打开站点example中的company.html文件。,2在CSS样式面板中单击“新建CSS规则”按钮，在打开的“新建CSS规则”对话框中，设置“选择器类型”为“类”；在“标签”中输入“.tab_title”；在“定义在”选项中选择“仅对该文档”。单击“确定

12、”按钮。,34,任务实施,任务2 使用CSS控制表格元素的外观,4选择“类型”选项，设置背景图像为“images/title01.jpg”，如右图所示。,35,任务实施,任务2 使用CSS控制表格元素的外观,5选择“列表”选项，设置背景图像为“images/dot1.jpg”，位置为“外”，如右图所示。,36,任务实施,任务2 使用CSS控制表格元素的外观,6通过“标签选择器”选中“栏目导航”所在的单元格，在“属性”面板中设置样式为“tab_title”。,7同样的方法设置“联系方式”单元格样式。,37,任务2 使用CSS控制表格元素的外观,网页的浏览效果,返回,38,任务分析 本任务要为co

13、mpany.html网页的导航菜单及各板块建立超链接。并为超链接设置美观的CSS样式，存储为外部样式表，不仅可将样式作用于当前网页，也可供其他网页所调用。,任务3 使用CSS设置超链接属性,39,相关知识,任务3 使用CSS设置超链接属性,超链接有四种显示状态，含义如下：a:link超链接默认状态；a:visited已访问过的超链接状态；a:hover鼠标指向的超链接状态；a:active鼠标正在点击的超链接状态。,40,相关知识,任务3 使用CSS设置超链接属性,如果网页不同区块的内容超链接样式要求不同，则可以在“新建CSS规则”对话框中将超链接样式名前加上该区块元素的ID名或者类名，即可设

14、置出专门针对某些区块或某些标记的超链接样式。这样就能在同一个网页中制作出不同的超链接样式。,41,任务实施,任务3 使用CSS设置超链接属性,1打开站点example中的company.html文件。,2在CSS样式面板中单击“新建CSS规则按钮”，打开“新建CSS规则”对话框。在“选择器类型”选项中选择“高级”，在“选择器”选项中选择“a:link”，在“定义在”选项中选择“”。设置完毕后，单击“确定”按钮。,42,任务实施,任务3 使用CSS设置超链接属性,3弹出“保存样式表文件为”对话框。如右图所示。输入样式表文件名为“a_css.css”，保存位置是站点文件夹mwmw中的css文件夹。

15、单击“保存”按钮。,43,任务实施,任务3 使用CSS设置超链接属性,4在弹出的“a:link的CSS规则定义”对话框中，选择“类型”，设置字体为“宋体”，大小为“12像素”，颜色为“黄色（#FFFF00）”，修饰为“无”。如右图所示。,44,任务实施,任务3 使用CSS设置超链接属性,5同样的方法建立“a:visited”样式。属性设置与“a:link”样式相同。,6再建立“a:hover”样式。属性设置中除颜色为“#FFFFFF”外，其他属性与“a:link”样式相同。,7再建立“a:active”样式。属性设置中除颜色为“#66FF66”外，其他属性与“a:link”样式相同。,45,任

16、务实施,任务3 使用CSS设置超链接属性,8选中导航菜单中的“网站首页”四个字，在“属性”面板的“链接”中选择home.html文件。如下图所示。,46,任务实施,任务3 使用CSS设置超链接属性,9按F12浏览网页。Dreamweaver会弹出一个提示对话框，单击“是”，保存a_css.css样式表文件，并进行浏览。如下图所示。,10观察鼠标操作超链接时，文字是否按我们设置的样式进行变化。,47,任务实施,任务3 使用CSS设置超链接属性,导航菜单中的每一项目都对应着一个网页，虽然目前还没有创建这些网页，为了学习的方便，我们在此先为这些项目创建超链接。如下表所示。为以后的学习任务做好准备。,

17、48,任务实施,任务3 使用CSS设置超链接属性,1打开home.html文件。,2在“CSS样式”面板中单击右下方的“附加样式表”按钮，打开“链接外部样式表”对话框，如右图所示。定位到css文件夹中的a_css.css，“添加为”使用“链接”方式，单击“确定”即可。,49,任务实施,任务3 使用CSS设置超链接属性,3参照company.html中的超链接设置，为当前网页的导航菜单设置超链接。,4为网页各区块右上方的“更多”设置相应的超链接，如下：“酒店简介”右侧的“更多”company.html；“今日推介”右侧的“更多”product.html；“餐馆环境”右侧的“更多”environm

18、ent.html；“行业动态”右侧的“更多”news.html。,50,任务实施,任务3 使用CSS设置超链接属性,5为网页右下方的各图像逐一设置超链接，均为product.html。如下图所示。,51,任务实施,任务3 使用CSS设置超链接属性,在home.html网页的左下方“行业动态”中有5行新闻标题，现在我们为其设置超链接目标为“article/read1.html”。并将这块超链接的使用不同的样式。,52,任务实施,任务3 使用CSS设置超链接属性,1将光标定位在新闻行中。再单击“CSS面板”右下方的“新建CSS规则”按钮，打开“新建CSS规则”对话框。在“选择器类型”选项中选择“高

19、级”，在“选择器”中输入“.list a:link”，在“定义在”选项中选择“仅对该文档”。如下图所示。单击“确定”按钮。,53,任务实施,任务3 使用CSS设置超链接属性,2在弹出的“.list a:link的CSS规则定义”对话框中，选择“类型”，设置 字体为“宋体”，大小为“12像素”，颜色为“黑色（#000000）”，修饰为“无”。,54,任务实施,任务3 使用CSS设置超链接属性,3同样的方法建立“.list a:visited”样式，设置字体为“宋体”，大小为“12像素”，颜色为“黑色（#000000）”，修饰为“无”。,4同样的方法建立“.list a:hover”样式，设置字体

20、为“宋体”，大小为“12像素”，颜色为“#0000CC”，修饰为“无”。,55,任务实施,任务3 使用CSS设置超链接属性,5同样的方法建立“.list a:active”样式，设置字体为“宋体”，大小为“12像素”，颜色为“#000099”，修饰为“无”。,6保存，浏览网页。,返回,56,任务分析 本任务使用CSS的Alpha滤镜来设置company.html中的图像显示效果和home.html中的文本显示效果。,任务4 使用CSS滤镜产生绚丽效果,57,任务4 使用CSS滤镜产生绚丽效果,CSS滤镜主要应用于IE浏览器，可以给网页中的文字、图像等 元素添加特殊效果。比如设置透明度、发光、翻

21、转、阴影等。滤镜在HTML中的语法是：filter：fiitername(parameters),58,任务4 使用CSS滤镜产生绚丽效果,1Alpha滤镜：制作透明效果，其语法是：filter：Alpha(opacity=?，finishopacity=?，style=?，startx=?，starty=?，finishx=?，finishy=?),59,任务4 使用CSS滤镜产生绚丽效果,2Blur滤镜制作模糊效果，其语法是：filter：Blur(add=?，direction=?，strength=?),60,任务4 使用CSS滤镜产生绚丽效果,3Chroma 把指定的颜色设置为透明，

22、其语法是：filter：Chroma(color=?),61,任务4 使用CSS滤镜产生绚丽效果,4.DropShadow制作投射阴影效果，可以指定阴影的偏移量filter：DropShadow(color=?，offx=?，offy=?,positive=?),62,任务4 使用CSS滤镜产生绚丽效果,5FlipH滤镜 制作水平翻转效果，其语法是：filter：FlipH,6FlipV滤镜 制作垂直翻转效果，其语法是：filter：F1ipV,63,任务4 使用CSS滤镜产生绚丽效果,7Glow滤镜 制作发光效果，其语法是：Filter：Glow(color=?，strength=?),64

23、,任务4 使用CSS滤镜产生绚丽效果,8Gray将彩色图片转为灰度显示，其语法是：Filter：Gray,9Invert滤镜将色彩、饱和度以及亮度值完全反转建立底片效果，其语法是：Filter：Invert,65,任务4 使用CSS滤镜产生绚丽效果,10Mask滤镜 设置遮罩效果，其语法是：Filter：Mask(Color=?),66,任务4 使用CSS滤镜产生绚丽效果,11.Shadow滤镜 制作阴影效果，可以指定阴影的方向，其语法是：filter：shadow(color=?，direction=?),67,任务4 使用CSS滤镜产生绚丽效果,12Wave滤镜制作波纹效果，其语法是：fi

24、lter：Wave(add=?，freq=?，lightstrength=?，phase=?，strength=?),68,任务4 使用CSS滤镜产生绚丽效果,13Xray 设置X光照效果，其语法是：filter：Xray,69,任务4 使用CSS滤镜产生绚丽效果,1打开站点example中的company.html文件。,任务实施,2在CSS样式面板中单击新建CSS规则按钮，打开“新建CSS规则”对话框。在“选择器类型”选项中选择“高级”，在“选择器”选项中选择“.myfilter”，在“定义在”选项中选择“仅对该文档”。如下图所示。单击“确定”按钮。,70,任务4 使用CSS滤镜产生绚丽效

25、果,3在“.myfilter的CSS规则定义”对话框中选择“扩展”，设置过滤器为“Alpha(Opacity=100,FinishOpacity=0,Style=3)”。如下图所示。单击“确定”。,任务实施,71,任务4 使用CSS滤镜产生绚丽效果,4选中网页中的图像，在“属性”面板中设置“类”为“myfilter”。,任务实施,5按F12，保存并游览网页。,72,任务4 使用CSS滤镜产生绚丽效果,6在IE浏览器窗口中会出现一行提示信息，如下图所示。这是IE浏览器的安全设置提示，点击这行提示，在快捷菜单中选择“允许阻止的内容”，即可正常显示滤镜效果了。,任务实施,73,任务4 使用CSS滤镜

26、产生绚丽效果,company.html中的图像显示效果,74,任务4 使用CSS滤镜产生绚丽效果,1打开站点example中的company.html文件。,任务实施,75,任务4 使用CSS滤镜产生绚丽效果,任务实施,2在CSS样式面板中单击“新建CSS规则”按钮，打开“新建CSS规则”对话框。在“选择器类型”选项中选择“高级”，在“选择器”选项中选择“.myfilter”，在“定义在”选项中选择“仅对该文档”。如下图所示。单击“确定”按钮。,76,任务4 使用CSS滤镜产生绚丽效果,3在“.myfilter的CSS规则定义”对话框中选择“类型”，设置字体为“宋体”，大小为“12像素”，颜色为“#FFFFFF”。,任务实施,4在“.myfilter的CSS规则定义”对话框中选择“扩展”，设置过滤器为“Alpha(Opacity=50,FinishOpacity=100,Style=2)”。单击“确定”。,5在网页中选中“今日推介”所在的单元格，在“属性”面板中设置“样式”为“myfilter”，即可。,77,任务4 使用CSS滤镜产生绚丽效果,home.html中的文本显示效果,返回,78,Thank You!,