网页制作课件.

《网页制作课件.》由会员分享，可在线阅读，更多相关《网页制作课件.（81页珍藏版）》请在金锄头文库上搜索。

1、Dreamweaver网页制作,第二单元 添加首页内容,主 编：王树平 副主编：杜大志 李光宇 宋彦琴,第二单元 添加首页内容,任务描述：上一个单元中，创建了“幽幽我心的个人网站”。本单元将在这个站点中进行首页内容的制作，学习如何在网页中添加文本和图像，使用CSS设置文本、图像和页面的样式。任务完成后效果如图所示：,第二单元 添加首页内容,任务一 添加首页文本,任务二 编辑文本样式,任务三 添加图像,任务四 创建与应用CSS美化网页,任务五 使用代码制作图文网页,任务一 添加首页文本,任务描述：完成首页文本内容的输入与编辑。,任务分析：在第一单元中建立了首页空白文件“index.htm-l”，

2、接下来就要为首页添加内容。 文本是网页制作中最常用的内容，有着其他网页元素无法替代的功能。在网页上输入、编辑、格式化文本是网页制作者的重要工作之一。 本任务将通过首页文本内容的输入与编辑，学习文本添加、插入空格、换行和分段等的操作方法。,第二单元 添加首页内容,自己动手： 1启动Dreamwear 8，打开“幽幽我心的个人网站”。,双击文件名称，打开首页文件Index.html。,2在文件面板中打开首页Index.html，如下图所示：,任务一 添加首页文本,3在文档工具栏中修改首页标题并预览网页。, 修改首页标题,在“文档”工具栏中，将标题修改为“幽幽我心的个人网站”，如图所示（注意观察：修

3、改前后，文档窗口左上角网页名称有何变化）：,任务一 添加首页文本,文件标题修改后，文档窗口左上角 网页名称有什么变化，表示什么？,在这里重新输入标题“幽幽我心的个人网站”, 预览网页,在Windows任务栏和打开的IE浏览器窗口当中，可以看到刚刚更改的网页标题“幽幽我心的个人网站”。如右图所示。,如何预览网页呢？,4输入首页文本内容并划分段落, 输入首页文本 将素材“index.txt”中的全部文本内容复制粘贴到文档窗口。,输入文本的方法有几种，是什么？,任务一 添加首页文本, 强制换行与段落划分,如何实现强制换行和分段换行 ，在网页中编辑文本共有哪些换行方式，它们各自的特点是什么？, 为“青

4、春寄语”部分每段正文的首行加入两个空格。,默认情况下，Dreamweaver 8“文档”窗口中不允许直接输入连续的空格，那么如何完成？,任务一 添加首页文本,a“自我介绍”、“青春寄语”和“立志飞翔 ”部分进行段落划分； b“立志飞翔 ”部分进行强制换行。效果如课本31页所示。,5保存网页,保存网页的方法有哪些？,任务一 添加首页文本,任务总结： 通过完成本任务学习了修改网页标题，以及添加和编辑文本的方法，重点掌握添加网页文本、编辑网页文本的方法，尤其是分段换行和强制换行，以及插入连续空格的方法必须熟练掌握，保存和预览网页的方法，也是必须掌握的。,任务一 添加首页文本,举一反三： 1使用IE浏

5、览器浏览各种类型的页面，分析各个页面中文本所起作用，并分析是否可以用其他网页元素代替。, 启发思路： 在互连网上有各种类型的网站，如搜索引擎类网站，商业类网站，个人网站等。网页设计中各种类型的页面都可以从这些网站中借鉴。, 分组完成任务。,2新建一个网页“practice2-1.html”，将本单元素材“举一反三”文件夹中“practice2-1.txt” 的文本内容拷贝到页面中，使用插入空格的方法修改文本，使每一行文本中的“vs”字样达到对齐的效果。,任务一 添加首页文本, 启发思路： 新建网页“practice2-1.html”，可以这样完成：借助所学知识；借助互联网借助Dreamweav

6、er帮助同学讨论。, 分组完成任务。,3新建一个网页“practice2-2.html”，输入多行文字内容并进行分段和强制换行，修改网页标题为“换行效果预览”，保存后预览页面，观察在IE浏览器中标题在什么位置，浏览器窗口大小发生变化时，对三种换行方式的影响。, 启发思路： 三种换行方式指的是自动换行、分段和强制换行，重点理解它们的区别。, 分组完成任务。,任务一 添加首页文本,任务一 添加首页文本,作业： 1如何预览和保存网页？ 2. 如何对文档窗口中的文本进行段落的划分和强制换行操作？ 3. 如何实现插入栏两种显示方式的转换？,任务二 编辑文本样式,任务描述：完成首页文本样式设置，为首页添加

7、水平分隔线与列表。,任务分析：本任务主要是对首页文本样式进行编辑，包括文本样式（如文本字体、字号、颜色、加粗、倾斜及对齐方式）的设置、文本样式的应用、样式的重命名和文本样式的修改。除此以外，还要为首页添加水平分隔线与列表操作。,第二单元 添加首页内容,自己动手： 1启动Dreamwear 8，打开“幽幽我心的个人网站”。 2在文件面板中打开首页Index.html。 3文本样式设置与应用,设置文本样式,为首行文字“幽幽我心的个人网站”设置文本样式： A.如下页图所示：选中文本，在文本属性面板中进行属性设置，格式为默认“段落”，字体为“默认字体”， 大小为16，单位为“点数”。观察“样式”列表，

8、列表中将产生一个与被设置文本具有同样外观的样式名称（本例为“STYLE1”）。,任务二 编辑文本样式,任务二 编辑文本样式,注意：Dreamweaver 8中的“属性”面板是设置和查看网页元素属性的重要面板，当选中不同类型的网页元素时，“属性”面板将显示不同的内容 。,B.设置文本颜色为“#0099FF”。设置完成后，样式列表当中的“STYLE1”也变成了与被设置文本相同的颜色。,任务二 编辑文本样式,颜色调板的设置,C.将所选文本设置为粗体，并将其对齐方式调整为“居中对齐”。,文本属性面板各部分及其功能是什么？,“字体”列表项只有几种中英文字体，如果想要添加其他的字体，该如何做？,注意：在“

9、样式”列表项中显示的名称是所选中文本的样式名称。在文本属性设置过程中，最好选中文本后一气呵成完成全部属性设置，否则如果反复选中并修改属性，可能会在“样式”列表中自动生成许多无用的样式。,任务二 编辑文本样式,为第二段标题文字“自我介绍”设置文本样式。,选中第二段标题文字“自我介绍”，在“属性”面板中设置文本大小“14点数”、颜色“#996600”、粗体样式列表中生成一个新的样式 “STYLE2” ，“STYLE2”和所设置的“自我介绍”几个字有同样的样式。,应用文本样式：为“青春寄语”、“立志飞翔”两个标题，应用“自我介绍”的样式“STYLE2”，应用方法如下图所示。,将鼠标插入到段落中或选中

10、文字。,在样式列表中选择相应的样式进行应用。,任务二 编辑文本样式,4 样式重命名,任务二 编辑文本样式,样式为什么要重命名？,按下表，设置“青春寄语”与“立志飞翔”中的文本样式并重命名。,在文本属性面板“样式”列表中重命名样式，将“STYLE1”重命名为“title1”，将“STYLE2”重命名为“title2” 。,5 修改文本样式：,任务二 编辑文本样式,单击“样式”列表旁的 按钮，打开“CSS样式”面板。在“全部”选项卡中选择样式“title2”，在“title2”的属性中进行编辑，修改颜色值为#FF6600” ，如下图所示。,注意观察应用了“title2”样式的文本颜色是否会发生相应

11、的变化。,选中文字“青春寄语”（其样式为“title2”），在属性面板中修改其颜色值为“#990000”,课堂讨论：可以通过属性面板修改样式吗？以下做法对吗？,CSS是什么?,. 插入列表与水平线,为“自我介绍”部分插入项目列表,任务二 编辑文本样式,如图所示，选中“自我介绍”部分文本，选择“属性”面板中的“项目列表”，为选中文本插入项目列表。,各行前都可以插入项目列表吗？,在“自我介绍”、“青春寄语” 、“青春寄语”和“立志飞翔”内容之间各插入一条水平线。,插入水平线的步骤是什么？,水平线的属性如何设置？,任务总结： 通过完成本任务学习了文本样式的设置与应用，文本样式的修改，添加水平分隔线与

12、列表等知识，重点掌握通过文本属性面板设置、应用文本样式，插入项目列表的方法，掌握通过“CSS”面板修改文本样式的方法，掌握插入水平线的方法。,任务二 编辑文本样式,举一反三： 将本单元素材“举一反三”文件夹中的网页“practice2-3.html”拷贝到D:mysite目录下，给页面中的每一段文字设置一种不同的文本样式。,1启发思路：要设置文字样式首先做什么，再通过什么面板进行设置；文本样式设置后的效果要体现出醒目的标题，样式既要各不相同又要有一致的风格。,2分组完成任务。,任务二 编辑文本样式,作业： 1新建一个网页“practice2-4.html”，插入5条水平线，使用属性面板进行不同

13、的宽、高、对齐与阴影属性设置，预览页面并比较不同属性的设置效果。 2.新建“班级荣誉”页面，文件名为“practice2-5.html”，列举班级成员所获奖励，设置为编号列表，修改文本样式，用不同的文本大小、颜色区分奖励的等级，保存并预览页面。尝试先设文本样式后设编号列表有何区别。（要求各组课下搜集班级成员获奖情况，并制定一个设置方案）,任务二 编辑文本样式,任务三 添加图像,任务描述：为首页添加图像内容。,任务分析：图像是网页中经常使用的元素，图像的插入方法比较简单，但需要区分图像的格式，并不是所有的图像都能在网页中正常显示。插入图像后需要熟悉属性面板及其设置。,第二单元 添加首页内容,自己

14、动手： 1启动Dreamwear 8，打开“幽幽我心的个人网站”。 2在文件面板中打开首页Index.html。 3 插入图像,三种格式的图像文件各自的特点是什么呢？,在网页中插入图像确实可以使网页增色不少，但并不是所有的图像资源都可以在网页中使用，通常在网页中使用“.jpg”、“.gif”和“.png”三种格式的图像文件，它们各有各的特点。,任务三 添加图像, 使用文件面板插入图像“top.jpg” ，插入位置为“自我介绍”标题前，对齐属性为“右对齐，”效果如下图所示：,操作步骤： A.复制素材到站点根目录的“imags”（D:mysiteimages ）文件夹下，复制后可以通过“文件”面板

15、查看“imags”文件夹中的图像资源，如右图所示。,任务三 添加图像,B.如图所示，拖曳文件面板中的图像文件名称到文档窗口相应文字前。,C.选中图像，在属性面板中设置图像对齐方式为“右对齐” 。,任务三 添加图像, 使用Ctrl+Alt+I组合键插入图像“D:/mysite/imagesflying.gif” ，插入位置为立志飞翔”部分的第五段文字前，对齐属性为“左对齐”。, 使用菜单栏插入图像“D:/mysite/imagesflying.gi-f” ，插入位置为立志飞翔”部分的第一段文字前 ，对齐属性为“左对齐”。, 使用插入栏常用类别中的按钮 插入图像“D:/mysite/imagesf

16、lying.gif” ，插入位置为立志飞翔”部分的第三段文字前， 对齐属性为“右对齐”。,任务三 添加图像,4. 图像编辑,调整大小：宽度为300，高度为225，单位为像素。,调整大小：宽度为215，高度为161，单位为像素。,保持原始大小。,通过图像“属性”面板中分别调整“立志飞翔”部分的文本及图像 ，如图所示：,在设置图像对齐方式及其大小时都是通过图像“属性”面板完成的，那么图像属性面板各组成部分的功能是什么？,任务三 添加图像,任务总结： 通过完成本任务学习了为网页添加和编辑图像的方法，重点掌握四种添加图像的方法： 1使用“文件”面板插入图像； 2使用菜单栏插入图像； 3使用插入栏常用类别中的按钮插入图像； 4使用Ctrl+Alt+I组合键插入图像 。 其中，使用插入栏和菜单栏插入的方法比较常用，但使用快捷键和“文件”面板插入图像将更大地提高工作效率。如果图像在站点内，建议使用“文件”面板将图