网页制作课件第二单元

《网页制作课件第二单元》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、建立了首页空白文件“index.htm-l”，接下来就要为首页添加内容。文本是网页制作中最常用的内容，有着其他网页元素无法替代的功能。在网页上输入、编辑、格式化文本是网页制作者的重要工作之一。本任务将通过首页文本内容的输入与编辑，学习文本添加、插入空格、换行和分段等的操作方法。第二单元添加首页内容自己动手：1．启动DreamwearCS5，打开“幽幽我心的个人网站”。双击文件名称，打开首页文件Index.html。2．在文件面板中打开首页Index.html，如下图所示：任务一添加首页文本3．在文档工

3、具栏中修改首页标题并预览网页。⑴修改首页标题在“文档”工具栏中，将标题修改为“幽幽我心的个人网站”，如图所示（注意观察：修改前后，文档窗口左上角网页名称有何变化）：任务一添加首页文本文件标题修改后，文档窗口左上角网页名称有什么变化，表示什么？在这里重新输入标题“幽幽我心的个人网站”⑵预览网页在Windows任务栏和打开的IE浏览器窗口当中，可以看到刚刚更改的网页标题“幽幽我心的个人网站”。如右图所示。如何预览网页呢？4．输入首页文本内容并划分段落⑴输入首页文本将素材“index.txt”中的全部文本内

4、容复制粘贴到文档窗口。输入文本的方法有几种，是什么？任务一添加首页文本⑵强制换行与段落划分如何实现强制换行和分段换行，在网页中编辑文本共有哪些换行方式，它们各自的特点是什么？⑶为“青春寄语”部分每段正文的首行加入两个空格。默认情况下，DreamweaverCS5“文档”窗口中不允许直接输入连续的空格，那么如何完成？任务一添加首页文本a．“自我介绍”、“青春寄语”和“立志飞翔”部分进行段落划分；b．“立志飞翔”部分进行强制换行。效果如课本24页所示。5．保存网页保存网页的方法有哪些？任务一添加首页文本任

5、务总结：通过完成本任务学习了修改网页标题，以及添加和编辑文本的方法，重点掌握添加网页文本、编辑网页文本的方法，尤其是分段换行和强制换行，以及插入连续空格的方法必须熟练掌握，保存和预览网页的方法，也是必须掌握的。任务一添加首页文本举一反三：1．使用IE浏览器浏览各种类型的页面，分析各个页面中文本所起作用，并分析是否可以用其他网页元素代替。⑴启发思路：在互连网上有各种类型的网站，如搜索引擎类网站，商业类网站，个人网站等。网页设计中各种类型的页面都可以从这些网站中借鉴。⑵分组完成任务。2．新建一个网页“pr

6、actice2-1.html”，将本单元素材“举一反三”文件夹中“practice2-1.txt”的文本内容拷贝到页面中，使用插入空格的方法修改文本，使每一行文本中的“vs”字样达到对齐的效果。任务一添加首页文本⑴启发思路：新建网页“practice2-1.html”，可以这样完成：①借助所学知识；②借助互联网③借助Dreamweaver帮助④同学讨论。⑵分组完成任务。3．新建一个网页“practice2-2.html”，输入多行文字内容并进行分段和强制换行，修改网页标题为“换行效果预览”，保存后预览

7、页面，观察在IE浏览器中标题在什么位置，浏览器窗口大小发生变化时，对三种换行方式的影响。⑴启发思路：三种换行方式指的是自动换行、分段和强制换行，重点理解它们的区别。⑵分组完成任务。任务一添加首页文本任务一添加首页文本作业：1．如何预览和保存网页？2.如何对文档窗口中的文本进行段落的划分和强制换行操作？3.如何实现插入栏两种显示方式的转换？任务二编辑文本样式任务描述：完成首页文本样式设置，为首页添加水平分隔线与列表。任务分析：本任务主要是对首页文本样式进行编辑，包括文本样式（如文本字体、字号、颜色、加粗

8、、倾斜及对齐方式）的设置、文本样式的应用、样式的重命名和文本样式的修改。除此以外，还要为首页添加水平分隔线与列表操作。第二单元添加首页内容自己动手：1．启动DreamwearCS5，打开“幽幽我心的个人网站”。2．在文件面板中打开首页Index.html。3．文本样式设置与应用⑴设置文本样式①为首行文字“幽幽我心的个人网站”设置文本样式：A.如下页图所示：单击文本“属性”面板中的按钮，单击属性面板中的“编辑规则”按钮，打开“新建CSS规则”对话框，在选择