项目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层叠样式表可以使网站保持同样的风格。 如果要更换网页中的某种格式，只需修改

2、CSS层 叠样式表即可，为网页和站点的编辑节省大量时间。,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样式面板中单击“全部”按钮 ，可以看到 此网页文件

5、中已经包含了一些CSS样式。如右图所示。 由于之前我们在制作网页时设置过一些文本的字体、 大小等样式，面板中这四个样式就是在我们操作时由 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

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

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

9、S样式面板中单击“新建CSS规则”按钮 ，在打开的 “新建CSS规则”对话框中，设置“选择器类型”为“类”；在“标签” 中输入“.list”；在“定义在”选项中选择“仅对该文档”。单击 “确定”按钮。,2在“.list的CSS规则定义”对话框中选择“类型”选项，设置字体 为“宋体”，大小为“12像素”，行高为“2倍行高”。,28, 任务实施,任务1 使用CSS控制页面、段落、文本的布局,3选择“区块”选项，设置文字缩进为 “30像素”。如右图所示。,29, 任务实施,任务1 使用CSS控制页面、段落、文本的布局,4选择“列表”选项，设置项目符号图像 为“images/dot.gif”，位置为“

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

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

12、“新建CSS规则”按钮 ，在打开的“新建 CSS规则”对话框中，设置“选择器类型”为“类”；在“标签”中输入 “.tab_title”；在“定义在”选项中选择“仅对该文档”。单击“确定”按钮。,34, 任务实施,任务2 使用CSS控制表格元素的外观,4选择“类型”选项，设置背景图像为 “images/title01.jpg”，如右图所示。,35, 任务实施,任务2 使用CSS控制表格元素的外观,5选择“列表”选项，设置背景图像为 “images/dot1.jpg”，位置为“外”， 如右图所示。,36, 任务实施,任务2 使用CSS控制表格元素的外观,6通过“标签选择器”选中“栏目导航”所在的单

13、元格，在“属性”面板中 设置样式为“tab_title”。,7同样的方法设置“联系方式”单元格样式。,37,任务2 使用CSS控制表格元素的外观,网页的浏览效果,返回,38,任务分析 本任务要为company.html网页的导航菜单及各板块建立超链接。并为超链接设置美观的CSS样式，存储为外部样式表，不仅可将样式作用于当前网页，也可供其他网页所调用。,任务3 使用CSS设置超链接属性,39, 相关知识,任务3 使用CSS设置超链接属性,超链接有四种显示状态，含义如下： a:link超链接默认状态； a:visited已访问过的超链接状态； a:hover鼠标指向的超链接状态； a:active

14、鼠标正在点击的超链接状态。,40, 相关知识,任务3 使用CSS设置超链接属性,如果网页不同区块的内容超链接样式要求不同，则可以在“新建 CSS规则”对话框中将超链接样式名前加上该区块元素的ID名或者 类名，即可设置出专门针对某些区块或某些标记的超链接样式。这 样就能在同一个网页中制作出不同的超链接样式。,41, 任务实施,任务3 使用CSS设置超链接属性,1打开站点example中的company.html文件。,2在CSS样式面板中单击“新建CSS规则按钮” ，打开“新建CSS 规则”对话框。在“选择器类型”选项中选择“高级”，在“选择器”选项中 选择“a:link”，在“定义在”选项中选

15、择“”。设置 完毕后，单击“确定”按钮。,42, 任务实施,任务3 使用CSS设置超链接属性,3弹出“保存样式表文件为”对话框。 如右图所示。输入样式表文件名为 “a_css.css”，保存位置是站点 文件夹mwmw中的css文件夹。 单击“保存”按钮。,43, 任务实施,任务3 使用CSS设置超链接属性,4在弹出的“a:link的CSS规则定义” 对话框中，选择“类型”，设置字体为 “宋体”，大小为“12像素”，颜色为 “黄色（#FFFF00）”，修饰为“无”。 如右图所示。,44, 任务实施,任务3 使用CSS设置超链接属性,5同样的方法建立“a:visited”样式。属性设置与“a:li

16、nk”样式相同。,6再建立“a:hover”样式。属性设置中除颜色为“#FFFFFF”外， 其他属性与“a:link”样式相同。,7再建立“a:active”样式。属性设置中除颜色为“#66FF66”外， 其他属性与“a:link”样式相同。,45, 任务实施,任务3 使用CSS设置超链接属性,8选中导航菜单中的“网站首页”四个字，在“属性”面板的“链接”中 选择home.html文件。如下图所示。,46, 任务实施,任务3 使用CSS设置超链接属性,9按F12浏览网页。Dreamweaver会弹出一个提示对话框， 单击“是”，保存a_css.css样式表文件，并进行浏览。如下图所示。,10观

17、察鼠标操作超链接时，文字是否按我们设置的样式进行变化。,47, 任务实施,任务3 使用CSS设置超链接属性,导航菜单中的每一项目都对应着一个网页，虽然目前还没有创建这些 网页，为了学习的方便，我们在此先为这些项目创建超链接。如下表 所示。为以后的学习任务做好准备。,48, 任务实施,任务3 使用CSS设置超链接属性,1打开home.html文件。,2在“CSS样式”面板中单击右下方的“附加 样式表”按钮 ，打开“链接外部样式表” 对话框，如右图所示。定位到css文件夹中的 a_css.css，“添加为”使用“链接”方式， 单击“确定”即可。,49, 任务实施,任务3 使用CSS设置超链接属性,

18、3参照company.html中的超链接设置，为当前网页 的导航菜单设置超链接。,4为网页各区块右上方的“更多”设置相应的超链接，如下： “酒店简介”右侧的“更多”company.html； “今日推介”右侧的“更多”product.html； “餐馆环境”右侧的“更多”environment.html； “行业动态”右侧的“更多”news.html。,50, 任务实施,任务3 使用CSS设置超链接属性,5为网页右下方的各图像逐一设置超链接，均为 product.html。如下图所示。,51, 任务实施,任务3 使用CSS设置超链接属性,在home.html网页的左下方“行业动态”中有5行新闻

19、标题， 现在我们为其设置超链接目标为“article/read1.html”。并 将这块超链接的使用不同的样式。,52, 任务实施,任务3 使用CSS设置超链接属性,1将光标定位在新闻行中。再单击“CSS面板”右下方的“新建CSS规则” 按钮 ，打开“新建CSS规则”对话框。在“选择器类型”选项中选择“高级”， 在“选择器”中输入“.list a:link”，在“定义在”选项中选择“仅对该文档”。如 下图所示。单击“确定”按钮。,53, 任务实施,任务3 使用CSS设置超链接属性,2在弹出的“.list a:link的CSS规则定义”对话框中，选择“类型”，设置 字体为“宋体”，大小为“12像

20、素”，颜色为“黑色（#000000）”，修饰为 “无”。,54, 任务实施,任务3 使用CSS设置超链接属性,3同样的方法建立“.list a:visited”样式，设置字体为“宋体”，大小为 “12像素”，颜色为“黑色（#000000）”，修饰为“无”。,4同样的方法建立“.list a:hover”样式，设置字体为“宋体”，大小为 “12像素”，颜色为“#0000CC”，修饰为“无”。,55, 任务实施,任务3 使用CSS设置超链接属性,5同样的方法建立“.list a:active”样式，设置字体为“宋体”，大小为 “12像素”，颜色为“#000099”，修饰为“无”。,6保存，浏览网页

21、。,返回,56,任务分析 本任务使用CSS的Alpha滤镜来设置company.html中的图像显示效果和home.html中的文本显示效果。,任务4 使用CSS滤镜产生绚丽效果,57,任务4 使用CSS滤镜产生绚丽效果,CSS滤镜主要应用于IE浏览器，可以给网页中的文字、图像等 元素添加特殊效果。比如设置透明度、发光、翻转、阴影等。 滤镜在HTML中的语法是： filter：fiitername(parameters),58,任务4 使用CSS滤镜产生绚丽效果,1Alpha滤镜： 制作透明效果，其语法是： filter：Alpha(opacity=?，finishopacity=?，styl

22、e=?， startx=?，starty=?，finishx=?，finishy=?),59,任务4 使用CSS滤镜产生绚丽效果,2Blur滤镜 制作模糊效果，其语法是： filter：Blur(add=?，direction=?，strength=?),60,任务4 使用CSS滤镜产生绚丽效果,3Chroma 把指定的颜色设置为透明，其语法是： filter：Chroma(color=?),61,任务4 使用CSS滤镜产生绚丽效果,4.DropShadow 制作投射阴影效果，可以指定阴影的偏移量 filter：DropShadow(color=?，offx=?，offy=?,positive

23、=?),62,任务4 使用CSS滤镜产生绚丽效果,5FlipH滤镜 制作水平翻转效果，其语法是： filter：FlipH,6FlipV滤镜 制作垂直翻转效果，其语法是：filter：F1ipV,63,任务4 使用CSS滤镜产生绚丽效果,7Glow滤镜 制作发光效果，其语法是： Filter：Glow(color=?，strength=?),64,任务4 使用CSS滤镜产生绚丽效果,8Gray 将彩色图片转为灰度显示，其语法是：Filter：Gray,9Invert滤镜 将色彩、饱和度以及亮度值完全反转建立底片效果， 其语法是：Filter：Invert,65,任务4 使用CSS滤镜产生绚丽效

24、果,10Mask滤镜 设置遮罩效果，其语法是： Filter：Mask(Color=?),66,任务4 使用CSS滤镜产生绚丽效果,11.Shadow滤镜 制作阴影效果，可以指定阴影的方向，其语法是： filter：shadow(color=?，direction=?),67,任务4 使用CSS滤镜产生绚丽效果,12Wave滤镜 制作波纹效果，其语法是：filter：Wave(add=?，freq=?， lightstrength=?，phase=?，strength=?),68,任务4 使用CSS滤镜产生绚丽效果,13Xray 设置X光照效果，其语法是：filter：Xray,69,任务4

25、使用CSS滤镜产生绚丽效果,1打开站点example中的company.html文件。, 任务实施,2在CSS样式面板中单击新建CSS规则按钮 ，打开“新建 CSS规则”对话框。在“选择器类型”选项中选择“高级”，在“选 择器”选项中选择“.myfilter”，在“定义在”选项中选择“仅对 该文档”。如下图所示。单击“确定”按钮。,70,任务4 使用CSS滤镜产生绚丽效果,3在“.myfilter的CSS规则定义”对话框中选择“扩展”，设置过滤器为 “Alpha(Opacity=100, FinishOpacity=0, Style=3)”。如下图 所示。单击“确定”。, 任务实施,71,任务

26、4 使用CSS滤镜产生绚丽效果,4选中网页中的图像，在“属性”面板中设置“类”为“myfilter”。, 任务实施,5按F12，保存并游览网页。,72,任务4 使用CSS滤镜产生绚丽效果,6在IE浏览器窗口中会出现一行提示信息，如下图所示。这是IE浏览器 的安全设置提示，点击这行提示，在快捷菜单中选择“允许阻止的内容”， 即可正常显示滤镜效果了。, 任务实施,73,任务4 使用CSS滤镜产生绚丽效果,company.html中 的图像显示效果,74,任务4 使用CSS滤镜产生绚丽效果,1打开站点example中的company.html文件。, 任务实施,75,任务4 使用CSS滤镜产生绚丽效

27、果, 任务实施,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 !,