2创新杯说课大赛国赛说课课件

《2创新杯说课大赛国赛说课课件》由会员分享，可在线阅读，更多相关《2创新杯说课大赛国赛说课课件（64页珍藏版）》请在金锄头文库上搜索。

1、Dreamweaver网页制作,第二单元 添加首页内容,主讲：周瑞华,第二单元 添加首页内容,任务描述：上一个单元中，创建了“幽幽我心的个人网站”。本单元将在这个站点中进行首页内容的制作，学习如何在网页中添加文本和图像，使用CSS设置文本、图像和页面的样式。任务完成后效果如图所示：,第二单元 添加首页内容,任务一 添加首页文本,任务二 使用CSS规则美化文本,任务三 添加图像,任务四 创建与应用CSS美化网页,任务一 添加首页文本,任务描述：完成首页文本内容的输入与编辑。,任务分析：在第一单元中建立了首页空白文件“index.htm-l”，接下来就要为首页添加内容。 文本是网页制作中最常用的内

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

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

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

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

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

7、页文本样式进行编辑，包括文本样式（如文本字体、字号、颜色、加粗、倾斜及对齐方式）的设置、文本样式的应用、样式的重命名和文本样式的修改。除此以外，还要为首页添加水平分隔线与列表操作。,第二单元 添加首页内容,自己动手： 1启动Dreamwear CS5，打开“幽幽我心的个人网站”。 2在文件面板中打开首页Index.html。 3文本样式设置与应用,设置文本样式,为首行文字“幽幽我心的个人网站”设置文本样式： A.如下页图所示：单击文本“属性”面板中的按钮，单击属性面板中的“编辑规则”按钮，打开“新建CSS规则”对话框，在选择器名称项中输入新样式名称“title1”，其他项保持默认选择，单击“确

8、定”按钮。,任务二 编辑文本样式,任务二 编辑文本样式,注意：Dreamweaver CS5中的“属性”面板是设置和查看网页元素属性的重要面板，当选中不同类型的网页元素时，“属性”面板将显示不同的内容 。,B.设置文本颜色为“#09F”。,任务二 编辑文本样式,颜色调板的设置,为第二段标题文字“自我介绍”设置文本样式。,选中第二段标题文字“自我介绍”，按照上文方法定义规则“title2”，设置文本大小14点数、颜色#960、粗体 。,应用文本样式：为“青春寄语”、“立志飞翔”两个标题，应用“自我介绍”的样式“title2”，应用方法如下图所示。,将鼠标插入到段落中或选中文字。,在样式列表中选择

9、相应的样式进行应用。,任务二 编辑文本样式,任务二 编辑文本样式,按下表，设置“青春寄语”与“立志飞翔”中的文本样式并重命名。,3 修改文本样式：,任务二 编辑文本样式,选中“青春寄语”标题，在CSS模式下“属性”面板中可以看到其目标规则为“title2”，此时如果将颜色属性修改为#900，则所有应用了该样式的标题将都发生改变 。还可以通过通过CSS样式面板修改样式。,选中文字“青春寄语”（其样式为“title2”），在属性面板中修改其颜色值为“#900”,CSS是什么?,. 插入列表与水平线,为“自我介绍”部分插入项目列表,任务二 编辑文本样式,如图所示，选中“自我介绍”部分文本，选择“属性

10、”面板中的“项目列表”，为选中文本插入项目列表。,各行前都可以插入项目列表吗？,在“自我介绍”、“青春寄语” 、“青春寄语”和“立志飞翔”内容之间各插入一条水平线。,插入水平线的步骤是什么？,水平线的属性如何设置？,任务总结： 通过完成本任务学习了文本样式的设置与应用，文本样式的修改，添加水平分隔线与列表等知识，重点掌握通过文本属性面板设置、应用文本样式，插入项目列表的方法，掌握通过“CSS”面板修改文本样式的方法，掌握插入水平线的方法。,任务二 编辑文本样式,举一反三： 将本单元素材“举一反三”文件夹中的网页“practice2-3.html”拷贝到D:mysite目录下，给页面中的每一段文

11、字设置一种不同的文本样式。,1启发思路：要设置文字样式首先做什么，再通过什么面板进行设置；文本样式设置后的效果要体现出醒目的标题，样式既要各不相同又要有一致的风格。,2分组完成任务。,任务二 编辑文本样式,作业： 1新建一个网页“practice2-4.html”，插入5条水平线，使用属性面板进行不同的宽、高、对齐与阴影属性设置，预览页面并比较不同属性的设置效果。 2.新建“班级荣誉”页面，文件名为“practice2-5.html”，列举班级成员所获奖励，设置为编号列表，修改文本样式，用不同的文本大小、颜色区分奖励的等级，保存并预览页面。尝试先设文本样式后设编号列表有何区别。（要求各组课下搜

12、集班级成员获奖情况，并制定一个设置方案）,任务二 编辑文本样式,任务三 添加图像,任务描述：为首页添加图像内容。,任务分析：图像是网页中经常使用的元素，图像的插入方法比较简单，但需要区分图像的格式，并不是所有的图像都能在网页中正常显示。插入图像后需要熟悉属性面板及其设置。,第二单元 添加首页内容,自己动手： 1启动Dreamwear 8，打开“幽幽我心的个人网站”。 2在文件面板中打开首页Index.html。 3 插入图像,三种格式的图像文件各自的特点是什么呢？,在网页中插入图像确实可以使网页增色不少，但并不是所有的图像资源都可以在网页中使用，通常在网页中使用“.jpg”、“.gif”和“.

13、png”三种格式的图像文件，它们各有各的特点。,任务三 添加图像, 使用文件面板插入图像“top.jpg” ，插入位置为“自我介绍”标题前，对齐属性为“右对齐，”效果如下图所示：,操作步骤： A.复制素材到站点根目录的“imags”（D:mysiteimages ）文件夹下，复制后可以通过“文件”面板查看“imags”文件夹中的图像资源，如右图所示。,任务三 添加图像,B.如图所示，拖曳文件面板中的图像文件名称到文档窗口相应文字前。,C.选中图像，在属性面板中设置图像对齐方式为“右对齐” 。,任务三 添加图像, 使用Ctrl+Alt+I组合键插入图像“D:/mysite/imagesflyin

14、g.gif” ，插入位置为立志飞翔”部分的第五段文字前，对齐属性为“左对齐”。, 使用菜单栏插入图像“D:/mysite/imagesflying.gi-f” ，插入位置为立志飞翔”部分的第一段文字前 ，对齐属性为“左对齐”。, 使用插入栏常用类别中的按钮 插入图像“D:/mysite/imagesflying.gif” ，插入位置为立志飞翔”部分的第三段文字前， 对齐属性为“右对齐”。,任务三 添加图像,4. 图像编辑,调整大小：宽度为300，高度为225，单位为像素。,调整大小：宽度为215，高度为161，单位为像素。,保持原始大小。,通过图像“属性”面板中分别调整“立志飞翔”部分的文本及

15、图像 ，如图所示：,在设置图像对齐方式及其大小时都是通过图像“属性”面板完成的，那么图像属性面板各组成部分的功能是什么？,任务三 添加图像,任务总结： 通过完成本任务学习了为网页添加和编辑图像的方法，重点掌握四种添加图像的方法： 1使用“文件”面板插入图像； 2使用菜单栏插入图像； 3使用插入栏常用类别中的按钮插入图像； 4使用Ctrl+Alt+I组合键插入图像 。 其中，使用插入栏和菜单栏插入的方法比较常用，但使用快捷键和“文件”面板插入图像将更大地提高工作效率。如果图像在站点内，建议使用“文件”面板将图像文件拖拽到插入位置的方法。在网页当中插入同一张图像的时候，可以使用复制粘贴的方法提高工

16、作效率 。,任务三 添加图像,举一反三： 1将本单元素材文件夹中的“jyfs1.jpg”插入到一个新建页面“practice2-7.html”中，裁剪后宽度为200像素，高度为100像素，并设置边框宽度为5，完成后预览页面。, 启发思路： 插入后选中该图像并通过属性面板中图像的“裁剪”及边框宽度选项完成。, 分组完成任务。,任务三 添加图像, 启发思路： 插入后选中该图像并通过属性面板中亮度、对比度及锐化选项完成。, 分组完成任务。,2新建网页“practice2-8.html”，插入本单元素材文件夹中的“jyfs2.jpg”，尝试使用Dreamweaver 8的图像编辑功能修改图像的亮度并进行锐化设置。,任务三 添加图像,作业： 通过网络下载3张图片，文件类型分别为“jpg”、“gif”、“bmp”，使用不同的方法插入到一个新建页面 “practice2-6.html”中。,任务三 添加图像,任务四 创建与