第三章简单网页的形成.docx

1、第三章简单网页的形成第三章 简单网页的形成课题： 拥有自己的网页（3.1）教学分析与准备1教学任务FrontPage 2003启动与退出的方法网页的建立与保存的方法网页中字体和段落的设置2. 教学重点网页中字体和段落的设置3. 教学难点网页中字体和段落的设置4. 教学策略任务驱动学习和协作学习、探究学习相结合5. 教学环境多媒体网络教室6建议课时数6节三、学习过程教学环节及手段教学内容备注组织课堂：导入新课：随着Internet的普及和流行，上网冲浪，对于很多人来讲已经成为日常生活、工作中必不可少的一部分。人们已经不再满足于去浏览别人的网页，而是希望能拥有自己的网页，希望能亲手建造自己的网上家

2、园。讲述新课：讲授法操作演示知识点扩充讲授法讲解演示讲解操作举例演示提示讲授法讲解操作讲解操作讲解操作讲解操作讲解操作提示讲授法讲解操作讲解操作提示讲授法讲解演示讲解演示提示课堂小结师生问好整顿课堂纪律，检查书本情况，准备进入教学。任务 以FrontPage 2003为例，创建简单的个人网页一、 FrontPage 2003启动与退出1FrontPage 2003的启动认识FrontPage 2003的界面及主要部分名称2FrontPage 2003的退出介绍四种退出FrontPage 2003的方法方法一：鼠标左键单击“文件”菜单，弹出相应的下拉式菜单后，单击“退出”即可。方法二：鼠标左键单

3、击标题栏最左边的控制菜单图标，弹出相应的下拉式菜单后，单击“关闭”即可。方法三：鼠标左键双击标题栏最左边的控制菜单图标即可。方法四：鼠标左键单击标题栏最右边的关闭按钮即可。【注意事项】1由于安装操作的不同，启动FrontPage 2003时，“Microsoft FrontPage 2003”菜单有可能出现在“开始”菜单的其他位置；2“文件”菜单中的“关闭”用来关闭正在编辑的网页，不能用于退出FrontPage 2003；3标题栏中的关闭按钮用于退出FrontPage 2003，菜单栏中的关闭按钮用于关闭正在编辑的网页；【使用技巧】1如果经常使用FrontPage 2003，可以将其应用程序的

4、快捷方式建立在桌面或任务栏上，以方便启动。 （1）在桌面上建立快捷方式，双击即可启动FrontPage 2003。（2）在任务栏上建立快捷方式，单击即可启动FrontPage 2003。2退出FrontPage 2003时，所有正在编辑的网页均被自动关闭，若有网页没有存盘，系统会自动提示。若选择“是（Y）”，则存盘退出；若选择“否（N）”，则不存盘退出，会丢失部分或全部网页内容；若选择“取消”则取消本次退出操作，回到原来的编辑状态。二、 建立新文件【操作步骤】STEP 1 建立新网页：鼠标左键单击“文件”菜单，选择“新建”，再选择“空白网页”。STEP 2 输入网页的具体内容。STEP 3 存

5、盘：鼠标左键单击“文件”菜单，选择“保存”。举例操作：例1 做一页以“微型计算机组成”为主题的网页，保存在文件夹“c:Internet应用第3章例题”下，文件名3-1.htm具体操作：1鼠标左键单击“文件”菜单，选择“新建”，在弹出的“新建”对话框中再选择“空白网页”项，则出现一空白页面。2输入网页的具体文字内容，每输入一行文字后回车，再输入下一行文字。输入完毕后，单击“保存”按钮，出现“另存为”对话框后，在“保存位置”处选择文件夹“c:Internet应用第3章例题”，在“文件名”处填写3-1（扩展名可省略不写）；单击“更改标题”按钮，将网页标题改为“微型计算机的组成”。3设置文字格式：（1

6、）选择第一行（即拖动鼠标，使文字反显，下同），单击格式栏中“样式”按钮旁边的箭头，单击“标题1”；单击格式栏中“字体”按钮旁边的箭头，单击“隶书”；单击格式栏中“字号”按钮旁边的箭头，单击“7（36磅）”；（2）选择除第一行外的所有文字，用“字体”按钮改成“楷体GB2312，用“字号”按钮改成“5（18磅）”；（3）选择第二行，单击“加粗”按钮（4）选择所有文字，单击格式栏中“字体颜色”按钮旁边的箭头，选择蓝色。（5）单击“保存”按钮。4设置段落格式（1）选择除前两行外的所有文字，单击“项目符号”按钮；单击“格式”菜单中的“段落”，在“行距大小”下选择“1.5倍行距”，单击“确定”；（2）选择

7、第六行，单击“格式”菜单中的“段落”，在“段落间距”的“段前”中填写15；（3）选择第四、五行，两次单击“增加缩进量”按钮，同样处理第七、八行；（4）单击“保存”按钮。5设置背景单击“格式”菜单，单击“背景”，在“网页属性”的“格式”选项卡中背景下勾选“背景图片”，单击“浏览”按钮，选择图片“BK00030_.wmf”，单击“保存”按钮，若第一次保存会出现“保存嵌入式文件”对话框，单击“改变文件夹”按钮，将文件夹位置改为“c:Internet应用第3章例题images”，单击“确定”按钮。6检查是否有要修改的地方，如暂不修改，单击“保存”按钮。7单击“预览”选项卡或常用工具栏中的“在浏览器中预

8、览”按钮，查看最终效果。如不满意，可回到FrontPage 2003的“设计”选项卡下，模仿以上操作进行修改，直到满意为止。例2 做一页以“硬件系统简介”为主题的网页，一页以“软件系统简介”为主题的网页，保存在“c:Internet应用第3章例题”文件夹下，文件名分别为hard.htm和soft.htm。具体操作：1单击常用工具栏中的“新建”按钮，则出现一个空白页面。2输入网页的具体内容1) 选择“表格”菜单，再选“插入”，“表格”，插入一个2行5列，边框粗细为0的表格；2) 选择选择菜单“表格”“插入”“标题”，在光标显示的位置输入文字“硬件系统简介”；3) 选择第二行第一列的所有文字，输入

9、左侧部分的文字，保存文件；4) 将想要插入网页的图片（包括背景）复制到“c:Internet应用第3章例题images”文件夹下；5) 光标置于第一行第三列，依次选择“插入”、“图片”、“来自文件”，选择所要插入图片的文件名“computer.wmf”，单击确定，图片即被插入；6) 此时将插入一幅很大的图片，再用鼠标右键单击图片，选择快捷菜单中的“图片属性”，再选择“外观”选项卡，选中“指定大小”复选框（有对勾为选中），不选中“保持纵横比”（取消对勾），再将其中的“宽度”和“高度”改为100，单位为“象素”，再单击“确定”即可；7) 将光标定位在需要的位置，反复做（5）、（6）的操作，在相应位

10、置插入适当的图片，并在图片下输入相应的文字；8) 选择所有文字，利用“字体颜色”按钮将所有文字改为蓝色，利用“加粗”按钮将文字加粗；9) 模仿例1的具体操作4，设置段落格式，为使文字和图片所占篇幅基本一致，可将“行距大小”设为“2倍”10) 鼠标左键单击写有“Home”字样的图片，再单击“常用工具栏”中的“超链接”按钮，在“创建超链接”对话框中选择“浏览”按钮，选择被链接的文件例1所建立的文件3-1.htm，“确定”即可。在“预览”或“浏览”时，单击该图片页面即可转为3-1.htm.11) 保存文件。3模仿具体操作1、2，制作网页soft.htm4给3-1.htm（主页）增加链接（1）在Fro

11、ntPage2003中，用“常用工具栏”中的“打开”按钮打开3-1.htm；（2）选择文字“硬件系统”，用“超链接”按钮链接到网页hard.htm;（3）选择文字“软件系统”，用“超链接”按钮链接到网页soft.htm;（4）保存文件。【注意事项】1当第一次保存网页时，若存放网页的文件夹事先没有建立好，可以在出现“另存为”对话框时点击“新建文件夹”按钮来建立。2在例2中，我们可以利用表格让文字和图片并排显示，但如果直接插入图片，则图片只能和某一行文字对齐，而不能和多行文字并排显示。具体原因和处理方法，我们将在后面4.3节进行解释。【使用技巧】1把常用操作放到工具栏中从菜单栏中可以实现Front

12、Page 2003的所有功能，但操作步骤相对较多。FrontPage 2003将部分常用功能设计了很多“按钮”，按功能分类放在各种工具栏中，用户可根据自己的需要，把经常使用的工具栏显示在FrontPage2003的窗口界面上。显示/隐藏工具栏的方法：鼠标左键单击“视图”菜单，选择“工具栏”，此时已显示的项目前有对勾标识，选择需要显示或隐藏的项目即可。注意，每次操作只能显示或隐藏一种工具栏。2在“网页模板”对话框的“常规”选项卡中，提供了一些“半成品”的网页模板，用户只要像做填空一样，在相应位置填写适当的内容即可。3新建网页时，可直接单击“常用工具栏”中的“新建网页”按钮，但其默认模板为“普通网

13、页”，若想使用其他模板，必须用菜单命令。【学习提示】1工具栏的显示/隐藏，还可以利用鼠标右键来完成；2改变插入图片的属性、编辑图片，可以使网页更加美观，简单方法参见3.2.3。若想对图片本身进行更高手段的艺术加工，可使用PhotoSHOP、FreeHand等专门进行图像处理的软件进行处理；3在做例2的插入图片和修改图片属性时，还有其他方法，用户可以在实践中不断摸索，找出自己最快捷的方法。三、 保存文件【操作步骤】STEP 1 鼠标左键单击“文件”菜单。STEP 2 根据需要选择：“保存”或“另存为”。举例操作：例3 做一个以“圣诞节”为主题的网站，保存在文件夹“c:Internet应用第3章例

14、题christmas”下，主页文件名index.htm。具体操作：1鼠标左键单击“文件”菜单，选择“新建”，在弹出的“新建”对话框中再选择“其它网站模板”选项。2当出现“网站模板”对话框时选择“空白网站”，在“指定新网站的位置”中填写存盘的位置“c:Internet应用第3章例题christmas”，或者单击“浏览”按钮选择网站的文件夹，最后单击“确定”，在“文件夹”列表中看到“c:Internet应用第3章例题christmas”被自动建立，并在其下自动建立了两个文件夹_private和images。3建立主页index.htm（1）建立好站点后，然后再新建一个空白网页，将文件名改为inde

15、x.htm，网页标题改为“MARRY CHRISTMAS”，然后单击“确定”。（2）在第一行键入“MARRY CHRISTMAS”，选择本行，置字体为“Haettenschweiler”，字号为“7（36磅）”，字体为“红色”，段落为“居中”。（3）在第二行插入一个一行四列的表格：单击“表格”菜单，单击“插入”，单击“表格”，在出现的“插入表格”对话框中选择一行四列，对齐方式为“居中”，边框粗细为0；在四列表格中依次键入“主页”、“圣诞故事”、“圣诞风俗”、“网站推荐”，并设置为蓝色、居中。（4）将选择好的图片chr1.gif复制到本网站的文件夹images下（c:Internet应用第3章例

16、题christmas）；在第三行单击“插入”菜单，单击“图片”，单击“来自文件”，在出现的图片对话框中，双击文件夹images，出现具体图片名称后，再双击所要插入的图片文件chr1.gif（或单击图片文件chr1.gif，再单击“确定”按钮）；单击图片，拖动鼠标调整图片大小且设置为居中。 具体操作（4） 也可以直接单击“插入”、“图片”、“来自文件”，在出现的图片对话框后找到图片chr1.gif，双击图片文件名即可插入图片，当做“保存”操作时，会自动出现“保存嵌入式文件对话框”，单击“更改文件夹”按钮，在出现的“更改文件夹”对话框中双击“images”，再单击“更改文件夹”对话框中的“确定”，

17、该对话框关闭后，再单击“保存嵌入式文件对话框”中的“确定”。（5）为使页面美观，可将插入图片的背景设为透明：单击图片，单击图片工具栏中的“设置透明色”按钮，此时光标将变为吸管形状，单击图片内部白色部分，则图片背景变为透明，即透出页面的背景。注意，设置完透明后，只要做保存的操作，会自动出现“保存嵌入式文件”对话框，并且要求图片存成GIF格式，单击“确定”按钮即可覆盖原有文件。（6）在图片下一行键入“版权所有：Internet应用”，并设置为“居中”，颜色为蓝色。（7）制作和三个分页面的链接：选择“圣诞故事”，单击“超链接”按钮，在URL中填写story.htm，再单击确定；同样方法，可以将“圣诞

18、风俗”链接到custom.htm，将“网站推荐”链接到recommend.htm。（8）保存文件。4建立圣诞故事的分页面story.htm（1）单击“新建”按钮，单击“保存”按钮，文件名为“story.htm”，网页标题为“圣诞故事”。（2）在第一行输入“圣诞故事”，设置字体为“华文彩云”，字号为“7（36磅）”，字体颜色为“蓝色”，格式为“居中”。（3）单击“窗口”，单击“index.htm”，选择主页中第二行的表格，单击“复制”按钮；单击“窗口”菜单，单击“story.htm”，在第二行选择粘贴；将“主页”链接到“index.htm”，选择“圣诞故事”，单击右键，单击“超链接属性”，删除U

19、RL中的所有内容（即删除链接）。（4）光标置于第三行，单击“表格”，单击“插入”，单击表格，插入一个两行两列、边框粗细为0、指定宽度为60%的表格，在各单元格中依次键入“1.圣诞老人的故事”、“2.圣诞袜的故事”、“3.圣诞树的故事”、“4.平安夜的故事”，并设为“蓝色”。（5）在下面一行插入一个八行两列、边框粗细为0、指定宽度为100%的表格；在第一、三、五、七行，分别输入四个故事的标题“圣诞老人的故事”、“圣诞袜的故事”、“圣诞树的故事”、“平安夜的故事”，设为“加粗”，并在恰当的位置插入相应的图片chr2.gif、chr3.gif、chr4.gif、chr5.gif；选择表格的第二行，单

20、击“表格”，单击“合并单元格”，同理将第四、第六、第八行也合并单元格，并在相应位置分别键入四个故事。（6）光标放在“圣诞故事”前，单击“插入”，单击“书签”，在“书签名称”中填写“top”，单击“确定；同理在四个故事的标题“圣诞老人的故事”、“圣诞袜的故事”、“圣诞树的故事”、“平安夜的故事”前，分别插入书签“1”、“2”、“3”、“4”。（7）选择第三行“1.圣诞老人的故事”，单击“超连接”按钮，选择“本文档中的位置”，在弹出的“书签”对话框中选择“1”，最后单击“确定”，即把“1.圣诞老人的故事”链接到了书签“1”；同理将“2.圣诞袜的故事”、“3.圣诞树的故事”、“4.平安夜的故事”分别

21、链接到书签“2”、“3”、“4”；为使用方便，在每个故事的最后一行，键入“返回页首”，并链接到书签“top”。（8）单击“格式”菜单，单击“背景”，勾选背景下的“背景图片”，然后单击“浏览”按钮，选择要添加的图片。（9）保存文件。5建立分页面圣诞风俗custom.htm（1）单击“新建”按钮，单击“保存”按钮，文件名为“custom.htm”，网页标题为“圣诞风俗”。（2）在第一行输入“圣诞风俗”，设置字体为“华文彩云”,字号为“7（36磅）”，字体颜色为“蓝色”，格式为“居中”。（3）单击“窗口”，单击“index.htm”，选择主页中第二行的表格，单击“复制”按钮；单击“窗口”菜单，单击“

22、custom.htm”，在第二行选择粘贴；将“主页”链接到“index.htm”，选择“圣诞风俗”，单击右键，单击“超链接属性”，删除链接。（4）光标置于第三行，单击“表格”菜单，单击“插入”，单击表格，插入一个三行两列、边框粗细为0、指定宽度为80%的表格，依次键入“1.圣诞PARTY”、“2.圣诞大餐”、“3.圣诞帽”、“4.圣诞卡”，“5.报佳音”、“6.颂歌”，并设为“蓝色”。（5）在下面分别键入六段故事，插入相应的图片。（6）在“圣诞风俗”前插入书签“top”，在下面分别键入六段故事的标题前前，分别插入书签“1”、“2”、“3”、“4”、“5”、“6”。（7）分别将“1.圣诞PART

23、Y”、“2.圣诞大餐”、“3.圣诞帽”、“4.圣诞卡”，“5.报佳音”、“6.颂歌”依次链接到书签“1”、“2”、“3”、“4”、“5”、“6”；在每段故事的最后一行，键入“返回页首”，并链接到书签“top”。（8）单击“格式”菜单，单击“背景”，勾选背景下的“背景图片”，然后单击“浏览”按钮，选择要添加的图片。（9）保存文件。6建立分页面网站推荐recommend.htm（1）单击“新建”按钮，单击“保存”按钮，文件名为“recommend.htm”，网页标题为“网站推荐”。（2）在第一行输入“网站推荐”，设置字体为“华文彩云”，字号为“7（36磅）”，字体颜色为“蓝色”，格式为“居中”。（

24、3）单击“窗口”，单击“index.htm”，选择主页中第二行的表格，单击“复制”按钮；单击“窗口”菜单，单击“recommend.htm”，在第二行选择粘贴；将“主页”链接到“index.htm”，选择“圣诞风俗”，单击右键，单击“超链接属性”，删除链接。（4）从第三行开始键入被推荐的网站名称，并链接到相应的网址。（5）保存文件。【注意事项】1第一次做“保存”工作时，自动出现的是“另存为”对话框；以后再“保存”，则不再出现对话框，自动按原位置、原名称存盘。2若给文件起名时手动输入扩展名，注意要在英文标点符号的状态下输入“.”。3保存时文件的扩展名可不写，系统默认为.htm；若用户自己输入扩展

25、名，必须为.htm或.html，否则不能用浏览器正常浏览。4新建网页时，可以先输入内容再存盘，也可以先存盘再输入内容；在执行插入图片、设置链接等操作时，前一种方法默认路径为绝对路径，后一种方法默认为相对路径；推荐用后一种方法，即先存盘再输入内容。5当网站关闭后，下次再想修改，可以单击“文件”菜单，单击“打开站点”，选择好站点目录即可。【使用技巧】1若网页内容较多，应注意定时存盘，不要等最后再存盘，以免因以外而丢失全部内容。2若对本次修改不满意，可利用“不保存关闭”恢复上一次的存盘结果。3第一次保存文件或文件“另存为”时，可改变网页标题。网页标题一般被默认为“New Page 1”、“New P

26、age 2”等或文档中的第一行文字，当出现“另存为”对话框时，“网页标题”后显示着默认的标题，单击其后的“更改（C）”按钮，即可输入新的网页标题，但改标题只有在IE等浏览器中才能看到，在预览中是看不到的。【学习提示】1移动文档内容的位置，可选择要移动的内容，然后单击“剪切”按钮；将光标移至新位置，再单击“粘贴”按钮即可。2复制文档内容的位置，可选择要复制的内容，然后单击“复制”按钮；将光标移至新位置，再单击“粘贴”按钮即可。3“移动”或“复制”一次后，该内容可被“粘贴”多次，直到下一次“移动”或“复制”操作为止。4使用“撤消”按钮可以根据需要撤消前面所做的一系列操作；使用“恢复”按钮可以再次恢

27、复前面撤消的操作。5在站点中对文件或文件夹进行建立、移动、重命名等操作时，页面中的相关内容会被自动修改。四、 修改字体【操作步骤】STEP 1 选择要设置字体的部分。STEP 2 鼠标左键单击“格式”菜单，再单击“字体”，将出现“字体”对话框。STEP 3 根据需要设置“字体”对话框，再单击“确定”即可。举例操作：例4 修改“c:Internet应用第3章例题christmas”下的网页custom.htm，并另存为3-4.htm。具体操作：1打开要修改的网页：鼠标左键单击“文件”菜单，单击“打开”，选择文件c:Internet应用第3章例题Christmascustom.htm，单击“确定”

28、。2单击“文件”，单击“另存为”，在“另存为”对话框中，将网页保存为“c:Internet应用第3章例题3-4.htm”。3选择第一个故事的标题“圣诞PARTY”，单击“格式”菜单，再单击“字体”，在出现的“字体”对话框选择字体为“隶书”，字型为“加粗”，大小为“5（18磅”），颜色为“红色”，字符间距为“加宽”，间距大小为“6” ，单击“确定”。4选择第一个故事的正文，单击“格式”菜单，再单击“字体”，在出现的“字体”对话框选择字体为“楷体_GB2312”，大小为“4（14磅”），单击“确定”。5同理，对其他五个故事进行修改。6保存文件.例5 建立网页“c:Internet应用第3章例题3-

29、5.htm”，练习字体的各种设置方法（如字体、字号、颜色、上标、下标、字符间距等）。具体操作：1单击“新建”按钮，保存在文件夹“c:Internet应用第3章例题”下，文件名为3-5.htm。2键盘输入文字，给文字设置相应的字体，例如“蓝色5号字”即设置为蓝色5号字。3利用上标写出102，利用下标写出H2SO4。4保存文件【注意事项】1若不选择内容就对字体进行修改，则已输入的文字不会有所改变，从设置点之后输入的字体才会有所改变。2相同的字号，字体不同，则显示大小也不尽相同。3若在制作网页时使用了某些特殊字体，而浏览该网页的计算机若没安装该字体，则该字体以宋体显示。【学习提示】为了方便修改和统一

30、格式，FrontPage 2003给我们提供了一个工具格式刷，它可以复制对字体的各种设置，但不复制文字本身。具体用法如下：1选择已经设置好字体的标题“圣诞PARTY”；2单击“格式刷”按钮，此时鼠标将变成刷子的形状；3用该刷子，刷第二个标题“圣诞大餐”，格式即被复制。 若想连续多次复制格式，则需双击“格式刷”按钮，进入复制格式状态；复制完格式后，再单击“格式刷”按钮，回到普通的编辑状态。【使用技巧】1选择好被修改的内容后，可以通过格式工具栏中的相应按钮对字体、字号、字型、字体颜色等进行修改。2选择好被修改的内容后，用鼠标右键单击被选内容，可以出现快捷菜单，再单击其中的“字体”，也可调出字体对话框。五、修改段落格式【操作步骤】STEP 1 选择要设置段落格式的部分。STEP 2 鼠标左键单击“格式”菜单，再单击“段落”，将出现“段落”对话框。STEP 3 根据需要设置“段落”对话框，再单击“确定”即可。 可设置段落的对齐方式，有左对齐、右对齐、居中、两端对齐； 可设置段落的缩进量，有文本之前、文本之后、首行缩进； 可设置段落间距，有段前、段后、单字间距、行距大小。举例操作：例6 修改“c:Internet应用第3章例题Christmas3-5.htm”的段落设置，并另