第二单元ppt课件

1、Dreamweaver网页制作第二单元 添加首页内容 主 编：王树平副主编：杜大志 李光宇 宋彦琴 目录上一页下一页退出第二单元 添加首页内容任务描述：上一个单元中，创建了“幽幽我心的个人网站” 。本单元将在这个站点中进行首页内容的制作，学习如何在网 页中添加文本和图像，使用CSS设置文本、图像和页面的样式 。任务完成后效果如图所示：目录上一页下一页退出第二单元 添加首页内容任务一 添加首页文本任务二 编辑文本样式 任务三 添加图像 任务四 创建与应用CSS美化网页 任务五 使用代码制作图文网页 目录上一页下一页退出任务一 添加首页文本任务描述：完成首页文本内容的输入与编辑。任务分析：在第一单元中建立了首页空白文件“index.htm-l” ，接下来就要为首页添加内容。文本是网页制作中最常用的内容，有着其他网页元素无法 替代的功能。在网页上输入、编辑、格式化文本是网页制作者 的重要工作之一。本任务将通过首页文本内容的输入与编辑，学习文本添加 、插入空格、换行和分段等的操作方法。第二单元 添加首页内容目录上一页下一页退出自己动手：1启动Dreamwear 8，打开“幽幽我心的个人网站”。

2、 双击击文件名称， 打开首页页文件 Index.html。2在文件面板中打开首页Index.html，如下图所示：任务一 添加首页文本目录上一页下一页退出3在文档工具栏中修改首页标题并预览网页。 修改首页标题在“文档”工具栏中，将标题修改为“幽幽我心的个人网站”， 如图所示（注意观察：修改前后，文档窗口左上角网页名称有 何变化）：任务一 添加首页文本文件标题修改后，文档窗口左上角 网页名称有什么变化，表示什么？在这里重新输入标题“ 幽幽我心的个人网站”目录上一页下一页退出 预览网页在Windows任务栏和打开 的IE浏览器窗口当中，可以看 到刚刚更改的网页标题“幽幽我 心的个人网站”。如右图所示。如何预览网页呢？4输入首页文本内容并划分段落 输入首页文本将素材“index.txt”中的全部文本内容复制粘贴到文档窗口。输入文本的方法有几 种，是什么？任务一 添加首页文本目录上一页下一页退出 强制换行与段落划分如何实现强制换行和分段换行 ，在网页中编辑文本共 有哪些换行方式，它们各自的特点是什么？ 为“青春寄语”部分每段正文的首行加入两个空格。默认情况下，Dreamweaver 8“文档”

3、窗口中不允许 直接输入连续的空格，那么如何完成？ 任务一 添加首页文本a“自我介绍”、“青春寄语”和“立志飞翔 ”部分进行段落划 分；b“立志飞翔 ”部分进行强制换行。效果如课本31页所示 。目录上一页下一页退出5保存网页 保存网页的方法有哪些？任务一 添加首页文本目录上一页下一页退出任务总结：通过完成本任务学习了修改网页标题，以及添加和编辑文 本的方法，重点掌握添加网页文本、编辑网页文本的方法，尤 其是分段换行和强制换行，以及插入连续空格的方法必须熟练 掌握，保存和预览网页的方法，也是必须掌握的。任务一 添加首页文本目录上一页下一页退出举一反三：1使用IE浏览器浏览各种类型的页面，分析各个页面中文 本所起作用，并分析是否可以用其他网页元素代替。 启发思路： 在互连网上有各种类型的网站，如搜索引擎类网站，商业 类网站，个人网站等。网页设计中各种类型的页面都可以从这 些网站中借鉴。 分组完成任务。2新建一个网页“practice2-1.html”，将本单元素材“举一反 三”文件夹中“practice2-1.txt” 的文本内容拷贝到页面中，使用 插入空格的方法修改文本，使每一行文本中的“

4、vs”字样达到对 齐的效果。 任务一 添加首页文本目录上一页下一页退出 启发思路： 新建网页“practice2-1.html”，可以这样完成：借助所学 知识；借助互联网借助Dreamweaver帮助同学讨论。 分组完成任务。3新建一个网页“practice2-2.html”，输入多行文字内容 并进行分段和强制换行，修改网页标题为“换行效果预览”，保 存后预览页面，观察在IE浏览器中标题在什么位置，浏览器窗 口大小发生变化时，对三种换行方式的影响。 启发思路： 三种换行方式指的是自动换行、分段和强制换行，重点理解 它们的区别。 分组完成任务。任务一 添加首页文本目录上一页下一页退出任务一 添加首页文本作业：1如何预览和保存网页？2. 如何对文档窗口中的文本进行段落的划分和强制换行操 作？3. 如何实现插入栏两种显示方式的转换？ 目录上一页下一页退出任务二 编辑文本样式任务描述：完成首页文本样式设置，为首页添加水平分隔 线与列表。任务分析：本任务主要是对首页文本样式进行编辑，包括 文本样式（如文本字体、字号、颜色、加粗、倾斜及对齐方式 ）的设置、文本样式的应用、样式的重命名和文本样式的修

5、改 。除此以外，还要为首页添加水平分隔线与列表操作。 第二单元 添加首页内容目录上一页下一页退出自己动手：1启动Dreamwear 8，打开“幽幽我心的个人网站”。2在文件面板中打开首页Index.html。3文本样式设置与应用设置文本样式为首行文字“幽幽我心的个人网站”设置文本样式：A.如下页图所示：选中文本，在文本属性面板中进行属性 设置，格式为默认“段落”，字体为“默认字体”， 大小为16，单 位为“点数”。观察“样式”列表，列表中将产生一个与被设置 文本具有同样外观的样式名称（本例为“STYLE1”）。 任务二 编辑文本样式目录上一页下一页退出任务二 编辑文本样式注意：Dreamweaver 8中的“属性”面板是设置和查看网 页元素属性的重要面板，当选中不同类型的网页元素时，“属 性”面板将显示不同的内容 。目录上一页下一页退出B.设置文本颜色为“#0099FF”。设置完成后，样式列表当 中的“STYLE1”也变成了与被设置文本相同的颜色。 任务二 编辑文本样式颜色调板的设置目录上一页下一页退出C.将所选文本设置为粗体，并将其对齐方式调整为“居中对 齐”。文本属性面板各部分 及

6、其功能是什么？“字体”列表项只有几种中英文字体， 如果想要添加其他的字体，该如何做 ？注意：在“样式”列表项中显示的名称是所选中文本的样 式名称。在文本属性设置过程中，最好选中文本后一气呵成完 成全部属性设置，否则如果反复选中并修改属性，可能会在“ 样式”列表中自动生成许多无用的样式。 任务二 编辑文本样式目录上一页下一页退出为第二段标题文字“自我介绍”设置文本样式。选中第二段标题文字“自我介绍”，在“属性”面板中设置文本 大小“14点数”、颜色“#996600”、粗体样式列表中生成一个新的 样式 “STYLE2” ，“STYLE2”和所设置的“自我介绍”几个字有同 样的样式。 应用文本样式：为“青春寄语”、“立志飞翔”两个标题，应 用“自我介绍”的样式“STYLE2”，应用方法如下图所示。将鼠标插入到段落 中或选中文字。在样式列表中选择 相应的样式进行应用 。任务二 编辑文本样式目录上一页下一页退出4 样式重命名任务二 编辑文本样式样式为什么要重命名？按下表，设置“青春寄语”与“立志飞翔”中的文本样式并 重命名。大小:14像素，斜体，颜色： “#669900”，居中Poem“立志飞翔

7、” 内容大小:12点数，颜色：“#0066CC”Normal“青春寄语” 内容设置内容样式名称应用范围在文本属性面板“样式”列表中重命名样式，将“STYLE1” 重命名为“title1”，将“STYLE2”重命名为“title2” 。目录上一页下一页退出5 修改文本样式：任务二 编辑文本样式单击“样式”列表旁的 按钮，打开“CSS样式”面板。 在“全部”选项卡中选择样式“title2”，在“title2”的属性中进行编辑 ，修改颜色值为#FF6600” ，如下图所示。注意观察应用了“title2”样式的 文本颜色是否会发生相应的变化。选中文字“青春寄语”（其样式为 “title2”），在属性面板中修改其颜色值 为“#990000”课堂讨论：可以通过属性面板修改样 式吗？以下做法对吗？CSS是什么?目录上一页下一页退出. 插入列表与水平线 为“自我介绍”部分插入项目 列表任务二 编辑文本样式如图所示，选中“自我介绍”部 分文本，选择“属性”面板中的“项目 列表”，为选中文本插入项目列表。各行前都可以插入项目列表吗？在“自我介绍”、“青春寄语” 、“青春寄语”和“立志飞翔”内 容之间各插入

8、一条水平线。 插入水平线的步骤 是什么？水平线的属性如何 设置？目录上一页下一页退出任务总结：通过完成本任务学习了文本样式的设置与应用，文本样式 的修改，添加水平分隔线与列表等知识，重点掌握通过文本属 性面板设置、应用文本样式，插入项目列表的方法，掌握通过 “CSS”面板修改文本样式的方法，掌握插入水平线的方法。任务二 编辑文本样式目录上一页下一页退出举一反三：将本单元素材“举一反三”文件夹中的网页“practice2-3.html” 拷贝到D:mysite目录下，给页面中的每一段文字设置一种不同 的文本样式。 1启发思路：要设置文字样式首先做什么，再通过什么 面板进行设置；文本样式设置后的效果要体现出醒目的标题， 样式既要各不相同又要有一致的风格。 2分组完成任务。任务二 编辑文本样式目录上一页下一页退出作业：1新建一个网页“practice2-4.html”，插入5条水平线，使 用属性面板进行不同的宽、高、对齐与阴影属性设置，预览页 面并比较不同属性的设置效果。2.新建“班级荣誉”页面，文件名为“practice2-5.html”，列举 班级成员所获奖励，设置为编号列表，修改文本样

9、式，用不同 的文本大小、颜色区分奖励的等级，保存并预览页面。尝试先 设文本样式后设编号列表有何区别。（要求各组课下搜集班级 成员获奖情况，并制定一个设置方案） 任务二 编辑文本样式目录上一页下一页退出任务三 添加图像任务描述：为首页添加图像内容。任务分析：图像是网页中经常使用的元素，图像的插入方 法比较简单，但需要区分图像的格式，并不是所有的图像都能 在网页中正常显示。插入图像后需要熟悉属性面板及其设置。第二单元 添加首页内容目录上一页下一页退出自己动手：1启动Dreamwear 8，打开“幽幽我心的个人网站”。2在文件面板中打开首页Index.html。3 插入图像三种格式的图像文件各自的特点是什 么呢？在网页中插入图像确实可以使网页增色不少，但并不是所 有的图像资源都可以在网页中使用，通常在网页中使用“.jpg”、 “.gif”和“.png”三种格式的图像文件，它们各有各的特点。任务三 添加图像目录上一页下一页退出 使用文件面板插入图像“top.jpg” ，插入位置为“自我介 绍”标题前，对齐属性为“右对齐，”效果如下图所示： 操作步骤：A.复制素材到站点根目录的“imags”（ D:mysiteimages ）文件夹下，复制后可以通 过“文件”面板查看“imags”文件夹中的图像资源 ，如右图所示。 任务三 添加图像目录上一页下一页退出B.如图所示，拖曳文件面板中的图像文件名称到文档窗口 相应文字前。C.选中图像，在属性面板中设置图像对齐方式为“右对齐” 。任务三 添加图像目录上一页下一页退出 使用Ctrl+Alt+I组合键插入图像“D:/mysite/images flying.gif” ，插入位置为立志飞翔”部分的第五段文字前，对齐 属性为“左对齐”。 使用菜单栏插入图像“D:/mysite/imagesflying.gi-f” ， 插入位置为立志飞翔”部分的第一段文字前 ，对齐属性为“左对 齐”。 使用插入栏常用类别中的按钮 插入图像 “D:/mysite/imagesflying.gif” ，插入位置为立志飞翔”部分的第 三段文字前， 对齐属性为“右对齐”。任务三 添加图像目录上一页下一页退出4.

《第二单元ppt课件》由会员飞***分享，可在线阅读，更多相关《第二单元ppt课件》请在金锄头文库上搜索。