1 / 26

《 网页设计与制作 》 教学课件

《 网页设计与制作 》 教学课件. 第 12 章： 使用 CSS 美化网页. 一、课程引导. 二、明确知识技能目标. 三、展示网页浏览效果. 主要教学环节. 四、分析操作任务. 五、知识讲解与操作示范. 六、课堂模仿实践. 七、疑难解析. 八、归纳总结. 九、布置习题. （一）课程引导. 本次课讲解使用 CSS 美化页面，重点介绍应用外部样式。. （二）明确知识技能目标. （ 1 ）掌握样式的编辑方法。 （ 2 ）掌握如何使用 CSS 样式表美化页面。 （ 3 ）掌握如何使用外部样式美化页面。. （三）展示网页浏览效果. 1 ．预览网页.

keiran
Download Presentation

《 网页设计与制作 》 教学课件

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 《网页设计与制作》教学课件

  2. 第12章：使用CSS美化网页 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题

  3. （一）课程引导 本次课讲解使用CSS美化页面，重点介绍应用外部样式。

  4. （二）明确知识技能目标 （1）掌握样式的编辑方法。 （2）掌握如何使用CSS样式表美化页面。 （3）掌握如何使用外部样式美化页面。

  5. （三）展示网页浏览效果 1．预览网页 本章制作的网页13.html的浏览效果如图所示。 图12-1　　网页13.html的预览效果

  6. （四）分析操作任务 （1）建立多种CSS样式，对13.html进行美化。 （2）建立CSS外部样式文件，应用外部样式对13.html进行美化。

  7. （五）知识讲解与操作示范（1） 12.2　使用CSS美化页面 按以下要求定义CSS样式，且应用样式对网页进行美化。 （1）制作图文混排效果。 （2）制作特殊边框效果。 （3）建立自定义的链接样式。

  8. （五）知识讲解与操作示范（2） 4、建立实现图文混排效果的样式 （1）建立样式image_text1 单击菜单【文本】→【CSS样式】→【新建】，弹出一个 “新建CSS规则”对话框。 在“新建CSS规则”对话框中，“选择器类型”选项中选择“类” 单选按钮，在“名称”文本框中输入这个自定义样式的名称： “.image_text1”。在“定义在”选项中选择“仅对该文档” 按钮。 在“.image_text1的CSS样式定义”对话框中“分类”选择“方 框”选项卡，在“方框”选项卡中，“浮动”下拉列表框中选择“左 对齐”，取消“全部相同”复选框的选中状态，在“右”列表框中 输入“10”，单位为“像素”，其余选项保持默认设置。

  9. （五）知识讲解与操作示范（3） （2）应用样式 选中表格第三行中的左边的图像，单击菜单【文本】→【CSS样式】，在“CSS样式”菜单中选中“image_text1”样式，把样式套用到图片中。保存网页，浏览网页效果。 （3）建立样式image_text2 建立一个类似的样式image_text2，在“CSS的规则定义”对话框中，“浮动”列表框中选择“右对齐”，“左”列表框中输入“10”，其他的属性设置与image_text1相同。然后将该样式应用于另一幅图像。

  10. （五）知识讲解与操作示范（4） 5．建立实现特殊表格边框效果的样式 （1）建立样式border 建立一个名为“.border”，在“.border的CSS样式定义”对话框中“分类”选择“边框”选项卡，在“边框”选项卡中，“上”对应的“样式”下拉列表框中选择“凸出”，“宽度“下拉列表框选择“中”，“颜色”选择“#CCCC33”，其余选项保持默认设置。 （2）应用样式 选中网页中整个表格，单击鼠标右键，在弹出的快捷菜单中选择【CSS样式】→【border】，如图12-14所示，把样式套用到表格。

  11. （五）知识讲解与操作示范（5） 6．建立高级样式 将页面表格中最后一行的链接设置成以下样式：默认的链 接是蓝色、宋体、9pt、没有下划线，访问过的链接为紫色、宋 体、9pt、没有下划线,而鼠标经过时的链接变成橘黄色、宋体、 9pt、出现下划线。 具体的操作过程如下： （1）在CSS样式面板中单击“新建CSS规则”按钮，弹出“新 建CSS规则”对话框，在该对话框中“选择器类型”位置选择“高 级”单选按钮。

  12. （五）知识讲解与操作示范（6） （2）定义链接默认样式，在“选择器”列表框中输入“a.my.link”，其中my为自定义的链接样式。在“定义在”选项中，选择“仅对该文档”单选按钮，这样CSS样式就被定义在该文档中。 （3）单击【确定】按钮关闭对话框，这时会自动打开样式表编辑器，进入样式表的定义。 （4）在“CSS规则定义”对话框中，左边的分类选择“类型”，“字体”下拉列表框中选择“宋体”，“大小”列表框中选择字体大小为“9”，单位为“点数(pt)”，在“颜色”处定义文本颜色为“#0000FF”，在“修饰”处选择“无”复选框，其他属性使用默认设置，设置完成后，单击【确定】按钮关闭对话框。这时，在CSS样式面板中会出现建立好的样式。

  13. （五）知识讲解与操作示范（7） （5）重复上述（2）～（4）步骤定义“a.my.visited”样式，在“CSS规则定义”对话框中，“字体”设置为“宋体”，“大小”设置为“9pt”，“颜色”设置为“#CCCCCC”，“修饰”处选择“无”复选框，其他属性使用默认设置。 （6）重复上述（2）～（4）步骤定义“a.my.hover”样式，在“CSS规则定义”对话框中，“字体”设置为“宋体”，“大小”设置为“9pt”，“颜色”设置为“#FF9900”，“修饰”处选择“下划线”复选框，其他属性使用默认设置。

  14. （五）知识讲解与操作示范（8） （7）样式设置完成以后，对于自定义的高级样式，需要进行样式的应用。分别选中表格中最后一行的文字“返回首页”、“公司简介”、“ 民族建筑”，然后在属性面板上的“样式”下拉列表框中选择“mylink”，样式即被应用到链接上。 （8）保存网页文档，浏览网页效果，当鼠标指向链接后，可以看到链接设置的效果。

  15. （五）知识讲解与操作示范（9） 7．应用CSS滤镜制作文字特效 在Dreamweaver 8中，CSS滤镜只能作用于有区域限制的对象，例如表格、单元格、图片等，不能直接作用于文字，所以需要把设置特效的文字事先放在表格的单元格中，然后对单元格应用CSS样式，从而使文字产生特殊效果。 （1）插入一个1行1列的表格 在图12-3中原有表格的下一行插入一个1行1列的表格。

  16. （五）知识讲解与操作示范（10） （2）设置表格属性 表格宽度设置为95％，边框粗细设置为0，单元格边框设置为0，单元格间距设置0，对齐设置为“居中对齐”。 （3）输入文字 在表格中输入一行文字“长沙世界之窗欢迎你”。 （4）在Dreamweaver 8主窗口中，单击菜单【文本】→【CSS样式】→【新建】，弹出“新建CSS规则”对话框，在“选择器类型”位置选择“类”单选按钮，样式名称输入“.dropshadow_text”，在“定义在”选项中，选择“仅对该文档”，单击【确定】按钮。

  17. （五）知识讲解与操作示范（11） （5）在弹出的“.dropshadow_text的CSS规则定义”对话框中，先在左侧选择“类型”分类，在右侧设置字体为“隶书”，大小为“30px”，修饰为“无”，颜色为“#DDDD00”。 （6）接着在左侧选择“扩展”分类，在右侧的“滤镜”下拉列表框中，选择DropShadow滤镜，即“DropShadow(Color=?, OffX=?, OffY=?, Positive=?)”，这种滤镜能产生阴影文字效果。 （7）按“Ctrl”键单击选中新插入的1行1列表格，然后在属性面板“样式”列表框中选择“dropshadow_text”，对该单元格应用样式。 （8）保存网页文档，浏览其效果。

  18. （五）知识讲解与操作示范（12） 8．编辑样式 下面修改样式caption_text1，设置“区块”分类中的“文本对 齐”为“居中对齐”，“显示”为“表格标题”。 编辑CSS的步骤如下： （1）在CSS样式面板上，先单击选择样式“caption_text1”，然后单击【编辑样式】按钮，打开“.caption_text1的CSS规则定义”对话框。 （2）在对话框中左侧分类选择“区块”，然后在右侧区域内“文本对齐”列表框中选择“居中”，“显示”列表框中选择“表格标题”。然后单击【确定】按钮关闭对话框。 （3）在页面中选择表格标题，应用该CSS。

  19. （五）知识讲解与操作示范（13） 9．使用范例样式 应用范例样式表的步骤如下： （1）在“CSS样式”面板中，单击【附加样式表】按钮，打开“链接外部样式表”对话框。 （2）在“链接外部样式表”对话框中，单击“范例样式表”链接，出现“范式样式表”对话框。 （3）从左边的列表框中选择一个样式表，此时可以预览所选样式的效果。单击【预览】按钮，将会看到该样式应用到文本的效果。 （4）找到一种能满足需要的样式，单击【确定】按钮。

  20. （五）知识讲解与操作示范（14） 10．应用外部样式 要应用外部样式，应先创建CSS外部样式文件，然后附加或 链接外部样式文件以应用其中的样式。 从文档中导出内部样式 （1）在Dreamweaver 8主窗口，单击菜单【文件】→【导出】→【CSS样式】或者单击菜单【文本】→【CSS样式】→【导出】，也可以在“CSS样式”面板中单击右键，在弹出的快捷菜单中单击【导出】命令。 （2）在弹出的“导出样式为CSS文件”对话框中，选择存放外部样式表文件的路径，并输入样式表的名称，扩展名为“.css”，这里输入“style1.css”。 （3）单击【保存】按钮。 当前文档中所定义的内部样式表随即保存为外部CSS样式表。

  21. （五）知识讲解与操作示范（15） 链接或附加外部样式表 （1）单击“CSS样式”面板右下角的【附加样式表】按钮，打开“链接外部样式表”对话框。 （2）在“文件/URL”列表框输入外部样式表的路径和名称，也可以单击【浏览】按钮，打开 “选择样式表文件”对话框，在该对话框中选择外部样式文件。 （3）在“添加为”区域选择是“链接”外部样式表还是“导入”外部样式表，这里选择“链接”单选按钮。在“媒体”中可以根据网页应用的媒体类型做相应的选择。

  22. （五）知识讲解与操作示范（16） （4）设置完成后，单击【确定】按钮。所链接的外部样式就会出现在“CSS样式”面板中。所有的样式都会被附加到所创建的网页中，省去了重新建立样式的麻烦。 （5）对网页的对象应用样式。

  23. （六）课堂模仿实践 课堂实践 1．操作要求 （1）打开“课堂实践”网站文件夹“13美化网页”中的网页文档“13.html”。 （2）定义一个名为“mystyle1.css”的CSS样式文件，该样式文件的属性设置与前述的内部样式表相同。 （3）打开“课堂实践”网站文件夹“13美化网页”中的网页文档“13_1.html”，在该网页文档中链接外部样式文件“mystyle1.css”。

  24. （六）课堂模仿实践 2．效果展示 网页13.html和13_1.html的浏览效果相同，如图12-24所示。

  25. （六）课堂模仿实践 课外拓展实践 1．创建一个CSS样式文件，命名为“style1.css”，该样式包含了控制表格中的文字、图像格式的代码。 2．在网页文档13.html中链接CSS样式文件style1.css，然后对网页中的对象应用样式。

  26. （八）归纳总结 CSS样式弥补了HTML语言的不足，可以实现HTML代码一些无法实现的效果，使用CSS美化页面更加简洁、方便。通过本章的学习应该掌握CSS样式的建立、编辑和应用。

More Related