静态网页设计与制作 教学课件 作者 胡汉辉 模块五.pptVIP

5.3.7 使用CSS样式表美化页面案例 5)上述操作完成之后，选中段落后在“样式”中选择“word”样式，在浏览器中预览的效果如图5-53所示，可以看到段落中的数字的字体都变成了“Verdana”，背景也添加了图像。6)双击“CSS样式”面板中的“.word”样式，在“区块”项中做如图5-54所示的设置，并在“类型”项中设置“行高”为“20pt”。 正文_Embed_245.png 5.3.7 使用CSS样式表美化页面案例 正文_Embed_246.png 图5-53 完成之后的效果 图5-54 “区块”参数设置 5.3.7 使用CSS样式表美化页面案例 7)上述操作完成之后，保存文件并按【F12】键在浏览器中预览，效果如图5-55所示。 正文_Embed_247.png 5.3.7 使用CSS样式表美化页面案例 正文_Embed_248.png 图5-55 完成之后的效果 图5-56 排版前的效果 5.3.7 使用CSS样式表美化页面案例 正文_Embed_249.png 5.3.7 使用CSS样式表美化页面案例 正文_Embed_250.png 图5-57 在“方框”分类中进行设置 图5-58 浏览器中预览效 5.3.7 使用CSS样式表美化页面案例 果 5.4拓展训练 创建“雷锋精神宣传”网页 设计要求设计思路参考效果 设计要求  设计思路 1)建立站点，放置好素材。2)创建框架文件，选择“上面固定，左侧嵌套”的结构形式。3)依次建立top页面、left页面、right页面，并对页面进行样式设计。4)根据个人喜好，调整框架属性窗口的相关设置。5)分别选中top页面、left页面、right页面；依次保存top、left、right框架页。6)选中框架集，保存框架集为index文件。7)对right页面进行修改，进行雷锋精神内容布局；保存修改内容为框架页right2。8)依次修改right页面为雷锋事迹、学习雷锋内容并分别保存为right3、right4。 设计思路 9)将left页面按钮与right页面链接，目标选择mainframe。10)运行观察，根据实际情况如调整。 参考效果 图5-59 最终效果图 5.2.7 使用框架布局网页案例 正文_Embed_227.png 图5-34 保存框架所在网页的菜单命令 图5-35 保存上部框架所 5.2.7 使用框架布局网页案例 在网页文件6)按【F12】键，预览添加了框架集的网页界面效果，如图5-36所示。 图5-36 预览效果 5.2.7 使用框架布局网页案例 1)为框架集中的顶部框架添加个人网站的“一级导航栏”。 正文_Embed_229.png 图5-37 “属性”面板中的“页面属性”按钮 5.2.7 使用框架布局网页案例 正文_Embed_230.png 5.2.7 使用框架布局网页案例 正文_Embed_231.png 图5-38 设置网页的页边距 图5-39 添加个人网站的“一级 5.2.7 使用框架布局网页案例 导航栏”2)为下部框架集中左侧框架所在网页文件添加“在线歌曲”栏目的“二级导航栏”。 正文_Embed_232.png 5.2.7 使用框架布局网页案例 图5-40 在下部框架集的左侧框架中添加“在线歌曲”二级导航栏3)为下部框架集中右侧框架所在网页文件添加3首MP3文件的播放器及其歌词。 正文_Embed_233.png 5.2.7 使用框架布局网页案例 图5-41 在下部框架集的右边框架中输入在线点播的3首歌曲的播放器和歌词4)在左侧的二级导航栏中歌曲标题增加超级链接。 正文_Embed_234.png 5.2.7 使用框架布局网页案例 正文_Embed_235.png 图5-42 设置框架集中超级链接的属性 图5-43 保存框架集中所有框架网页文件中的修改 5.2.7 使用框架布局网页案例 5)测试、预览结果。 图5-44 预览和测试的结果界面 5.3任务三 CSS的应用—— 重新布局“在线求诊”页面 任务分析相关知识任务实施5.3.1 标签样式与类样式的定义5.3.2 实现图文混排效果样式的定义5.3.3 实现特殊表格边框效果样式的定义5.3.4 高级样式的定义5.3.5 应用CSS滤镜制作文字特效5.3.6 样式的编辑5.3.7 使用CSS样式表美化页面案例 任务分析 图5-45 最终效果图 相关知识  任务实施  5.3.1 标签样式与类样式的定义 (1)定义标签样式