项目三 网页文本与图像.ppt

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 操作三 创建与应用列表项样式 任务一 任务二 任务三 任务四 任务五 小 结 项目三： 网页文本与图像 1.新建“标签”样式“li” 类型选择：标签类型； 在下拉列表中选择标签名称“li”； 定义范围：“仅对该文档”。 2.完成样式“li”的参数设置 字体大小为14pt，颜色为#006699，项目符号图像为“D:/images/arrow.gif”。 3.应用样式 操作四 创建与应用水平线样式 任务一 任务二 任务三 任务四 任务五 小 结 项目三： 网页文本与图像 1.新建“类”样式“.line” 选择“类”； 输入标签名称“.line”； 定义范围：“仅对该文档”。 2.完成样式“.line”的参数设置 边框为虚线、细、颜色为#006699。 3.应用样式 最终预览效果 任务一 任务二 任务三 任务四 任务五 小 结 项目三： 网页文本与图像 通过完成以上任务，学习了如何使用CSS样式美化页面。 【任务总结】 任务一 任务二 任务三 任务四 任务五 小 结 任务四 创建与应用CSS美化网页 项目三： 网页文本与图像 打开“映像东京”站点的“about.htm”页面进行以下的编辑： （1）首先设置水平线和图像的间距。 创建名称为“hr”、“分类：方框”、“clear：both”的水平线CSS样式，将图像左边的水平线移到下方。 （2）接着要以图像的大小为基准，设置与段落文字的之间的间距。 选择图像编辑样式为“分类：方框”、“Width：100”、“Float：left”、“Clear：both”、“margin：Top：0px”、“margin：Bottom：5px”。 【举一反三】 任务一 任务二 任务三 任务四 任务五 小 结 任务四 创建与应用CSS美化网页 项目三： 网页文本与图像 （3）调整li的CSS样式为“分类：方框”、“Width：100”、“Float：left”、“Clear：both”、“margin：Top：0px”、“margin：Bottom：5px”。 （4）修改页面属性“分类：外观（CSS）”，将“tokyoimage\images”文件夹下的图像“about-bg.gif”设置为网页背景。 （5）保存后预览页面。 【举一反三】 任务一 任务二 任务三 任务四 任务五 小 结 A.启发思路： 插入后选中该图像并通过属性面板中完成。注意区分两种样式分别为“标签”样式和“类”样式。 B.分组完成任务。 任务四 创建与应用CSS美化网页 项目三： 网页文本与图像 任务一 任务二 任务三 任务四 任务五 小 结 举一反三完成的效果图如下： 项目三： 网页文本与图像 任务一 任务二 任务三 任务四 任务五 小 结 任务五 使用代码制作图文网页 项目三： 网页文本与图像 任务五 使用代码制作图文网页 使用HTML代码制作一个图文网页“唐诗赏析”。 【任务说明】 任务一 任务二 任务三 任务四 任务五 小 结 项目三： 网页文本与图像 使用HTML代码在网页中插入文本和图像，并进行简单的属性设置，了解相应标签的使用方法、位置和基本属性。 【任务分析】 任务一 任务二 任务三 任务四 任务五 小 结 项目三： 网页文本与图像 任务五 使用代码制作图文网页 操作一 完成本任务的目录结构 任务一 任务二 任务三 任务四 任务五 小 结 项目三： 网页文本与图像 操作二 修改页面标题并修改背景颜色 任务一 任务二 任务三 任务四 任务五 小 结 打开“poem.html”切换到“代码”视图，对“poem.html”的代码进行如下修改。 项目三： 网页文本与图像 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title唐诗赏析《山中》/title !--设置网页的标题 -- /head ? body bgcolor=00CCFF !--设置页面的背景颜色 --/body /html 注释的添加方法 操作二 修改页面标题并修改背景