项目3(八css美化网页)

1、项目3 主页制作（利用CSS美化网页）学习目标： 会使用CSS层叠样式对页面中文本等网页元素进行样式控制Cascading Style Sheets（层叠，级联样式表）【任务1】利用CSS美化网页【任务分析】5.12汶川大地震时为了表示对遇难同胞的哀悼，全国的大小网站页面都变灰了。如何实现这一功能？对于网站中页面较少时，可以一个页面一个页面进行设置，哀悼期过了后再恢复原样，若网站由几十个页面组成，这样设置工作量很大，有一种省时省力的方法可以达到这一功能，那就是层叠样式表CSS（Cascading Style Sheet）。这个方法最方便管理整个网站的网页风貌，它让网页的文字内容与版面设计分开，

2、只要在一个css文档中定义好网页的外观风格，所有链接到此css文档的网页，便会按照定义好的风格显示网页。【任务背景】回忆：纪念5.12，悼念四川地震死难者，整个网页变黑色(灰色)，这个特效持续一个月。代码：方法1：直接在html文档的head区域加上以下代码代码：html filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 方法2：在css文档中加入以下代码代码：html filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 演示：将上面

3、这段代码添加到newsview.asp文件，观察效果。【子任务1.1】利用CSS美化register1.asp网页【任务展示】实际网页演示。【操作步骤】1. 打开站点文件夹ClassWebloginregister.asp文件，双击进入设计视图。2. 选中“用户注册”，在属性面板设置样式，如图所示：进入代码视图，style1样式代码如图所示：3. 思考：（1）此方法可设置的属性类型有限，如不能给文字加下划线等； （2）若对单元格的内容进行设置，需逐个应用样式，操作繁琐。4通过CSS面板新建样式，对单元格进行设置：（1）单击“样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型

4、选择“标签”，标签名称选择为“td”，定义在选择“仅对该文档”。单击“确定”按钮。（2）在弹出的“td的CSS样式定义”对话框中，进行如图所示的样式定义：(3)为表格第一列的单元格设置样式为右对齐，操作如图所示：注意：此处选择器类型为“类”，名称为“.txt”,定义在“仅对该文档”。（4）选中第一列单元格（除最后一行），应用样式“.txt”。（5）类似上面操作，为表格最后一行单元格设置样式为居中对齐；为“*”设置样式为字体颜色是红色。【子任务1.2】利用CSS美化login.asp、newsview.asp、courseview.asp网页【任务分析】在上述制作的显示班级新闻标题（newsvi

5、ew.asp）、显示课件下载（courseview.asp）、管理员登录（login.asp）页面中，我们发现使用默认的字体显示效果不理想，需将页面进行美化：将页面中的字体大小设为12px，行间距设为14px，将管理员登录页面中的用户名、密码和验证码字体设为黑体，像这种多个页面文件中设置相同的效果使用CSS外部链接式的方法是较方便的做法。 【操作步骤】1. 在站点文件夹ClassWeb下新建css文件夹，并打开ClassWeb/news/newsview.asp文件。2. 单击CSS样式面板右下角【新建CSS规则】按钮。3. 在弹出的“新建CSS规则”对话框中，在“选择器类型”单选按钮中选取“

6、标签（重新定义特定标签的外观）”，在“标签”下拉列表框中选取“table”标签，在“定义在”单选按钮中选取“新建样式表文件”项，如图所示。图1“新建CSS规则”对话框4. 单击【确定】按钮，在弹出的“保存样式表文件为”对话框的“保存在”下拉列表框中选取步骤1中新建的css文件夹，在“文件名”文本框中输入文件名format，其它取默认设置，如图2所示。图2 “保存样式表文件为”对话框5. 单击【保存】按钮，在弹出的“table的CSS规则定义（在format.css中）”对话框的“类型”分类中设置字体大小为12px，行高设置为14px，其它选项取默认设置，如图3所示。图3 “table的CSS规

7、则定义”对话框6. 单击【确定】按钮，仔细观察newsview.asp文件中出现语句“”表示将format.css样式表外部链接入该文件中。同时出现打开的format.css文件，观察其代码，体会其含义，将format.css文件和newsview.asp文件存盘，预览。7. 将format.css文件中的样式应用于courseview.asp文件：打开courseview.asp文件，单击CSS样式面板右下侧的【附加样式表】按钮，在弹出的“链接外部样式表”对话框的“文件/URL”单击【浏览】按钮，选取format.css文件；“添加为”单选按钮取默认的“链接”，其它选项取默认设置，如图4所示

8、。图4“链接外部样式表”对话框8. 单击【确定】按钮，进入courseview.asp文件的代码视图，在标签的上方出现语句”表示将format.css样式表外部链接入该文件中，存盘预览。9. 为login.asp文件中的文本进行样式设置：字体为黑体，字体大小为12px。像这种还是为标签设置样式，但该样式又不同于courseview.asp文件和newsview.asp文件的情况下，我们通过设置“类选择符”来达到为把相同的元素分类定义不同样式的效果，需向format.css文件中再次定义样式。（1）检查format.css文件是否关闭，若没有关闭则关闭该文件。（2）在CSS样式面板中选中form

9、at.css文件，然后单击面板右下角【新建CSS规则】按钮。（3）在弹出的“新建CSS规则”对话框“选择器类型”单选按钮中选取“类（可应用于任何标签）”项，名称中输入为类所起的名字hh，检查“定义在”单选按钮是否选取了“format.css”选项，如所示。（4）单击【确定】按钮，在弹出的“.hh的CSS规则定义（在format.css中）”对话框“字体”框中选取“黑体”。（5）单击【确定】按钮，进入format.css文件，观察代码体会其含义，再将format.css文件存盘。10. 打开login.asp文件，单击CSS样式面板右下侧的【附加样式表】按钮，在弹出的“链接外部样式表”对话框的“

10、文件/URL”单击【浏览】按钮，选取format.css文件。11. 进入login.asp文件的“代码”视图方式，在原代码“table”标签后输入“class=hh”，即为，然后存盘预览。这里做一下区分： 把仅用于特定页面文档的CSS样式称为CSS样式单；把可以应用于多个文档的CSS称为CSS样式文件课堂练习1：1光晕字 1、在站点文件夹ClassWeb下新建exesise文件夹，并在此文件夹中新建exesise1.asp文件。打开新文档，在新文档中插入一个 11的表格，边框设置为0，然后在其中输入需要修饰的文字。 2、单击右面的浮动面板中的“设计CSS样式”打开这一浮动面板。 面板右下角的

11、四个按钮分别是：添加、新建、编辑以及删除CSS样式。3、单击新建CSS样式按钮，“类型”项选择“创建自定义样式”，“定义在”选择“仅对该文档”，点确定后弹出CSS样式定义对话框，在类型面板中我们可以定义字体、字号、颜色等内容，这里我们选择字体为隶书，大小50像素，颜色为白色。 注意：在Dreamweaver中，CSS滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接用于文字，所以我们要把所需要增加特效的文字事先放在表格中，然后对表格应用CSS样式，从而使文字产生特殊效果。4、要产生文字特效，最重要的是在扩展面板中的设置，在“视觉效果下”的过滤器中列出的就是所有的CSS滤镜，选择

12、Glow滤镜，它可以使文字产生边缘发光的效果。Glow滤镜的语法格式为：Glow(Color=?, Strength=?)，里面有两个参数：Color决定光晕的颜色，可以用如ffffff的十六进制代码，或者用Red、Yellow等单词表示;Strength表示发光强度，范围从0到255。 本例中我们设置颜色为红色(Red)，发光强度为8，然后确定。下面我们将这个CSS样式应用到表格中。把光标移到单元格中，在文档窗口左下角点击标签选中单元格，然后单击刚才在CSS样式面板中新建的样式，我们在文档窗口中看不出变化，按F12键在IE中预览，效果就出来了。 2 阴影字1、创建exesise2.asp文件

13、，输入文字“阴影字”2、Drowshadow滤镜的语法如下：DropShadow(Color=?, OffX=?, OffY=?, Positive=?) 。其中，Color表示投射阴影的颜色，用十六进制数来表示;OffX、OffY分别代表阴影偏离文字位置的量，单位为像素;Positive为一个逻辑值，1代表为所有不透明元素建立阴影，0代表为所有透明元素建立可见阴影。在过滤器中输入DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1) 3、动感字制作动感字我们要用到Blur滤镜，作用是产生模糊效果，它的语法格式为Blur(Add=?, Direction=?, Strength=?)。Add参数是一个布尔值，一般来说，当滤镜用于图片的时候取0，用于文字的时候取1;Direction代表模糊方向，单位是角度;Strength代表模糊移动值，单位为像素。比如我们定义Blur(Add=1, Direction=90, Strength=150)，在预览中就可以看到如图的效果。可以自己尝试修改过滤器的参数！课堂练习2：1、创建exesise3.asp，输入|首页|系部介绍|学生作品|网络课堂|交互学习”， 并将首页和系部介绍链接于站点文件夹下的inde