（中职）第7章在互联网上发布信息nppt课件.ppt

《（中职）第7章在互联网上发布信息nppt课件.ppt》由会员分享，可在线阅读，更多相关《（中职）第7章在互联网上发布信息nppt课件.ppt（100页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题（中职）第（中职）第7章在互联网上发布信息章在互联网上发布信息PPTn2信息技术基础信息技术基础吴文虎吴文虎 主主 编编吕吕 品品 副主编副主编3目 录7.1 制作网页制作网页【任务任务7.1】 作作“自我介绍自我介绍”个人网页个人网页 7.2 规划网站结构规划网站结构【任务任务7.2】规划规划“班级网站班级网站”的结构的结构 7.3 为网页添加表格、文字和图片为网页添加表格、文字和图片 【任务任务7.3】制作制作“班级网站班级网站”的主页的主页 7.4 添加字幕和导航栏添加字幕和导航栏【任务任务7.4】为为“班级网站班级网站”添加字幕和导航栏添加字幕和导航栏 7.5 建

2、立超链接建立超链接【任务任务7.5】建立超链接建立超链接 7.6 制作框架网页制作框架网页 【任务任务7.6】制作制作“我们的作品我们的作品”框架网页框架网页 47.1 制作网页制作网页【任务任务7.1】制作制作“自我介绍自我介绍”个人网页个人网页任务分析任务分析动手实践动手实践一、观看一、观看“中国青年志愿网中国青年志愿网”网站上网网站上网二、二、Microsoft FrontPage 2003的窗口的窗口三、制作三、制作“自我介绍自我介绍”的个人网页的个人网页四、保存网页四、保存网页五、退出五、退出Microsoft FrontPage 2003归纳总结归纳总结拓展知识拓展知识自主练习自主

3、练习5【任务任务7.1】制作制作“自我介绍自我介绍”个人网个人网页页在科技月活动中，学校将开展了制作在科技月活动中，学校将开展了制作“班级网站班级网站”的比赛活动。各班同学摩拳擦掌，准备积极参加。的比赛活动。各班同学摩拳擦掌，准备积极参加。张为民同学想制作一张张为民同学想制作一张“自我介绍自我介绍”的个人网页，的个人网页，将来放在将来放在“班级网站班级网站”上。上。6任务分析任务分析 要想制作一张要想制作一张“自我介绍自我介绍”的个人网页，的个人网页，放在放在“班级网站班级网站”上，首先要初步了解网上，首先要初步了解网站与网页的基本概念。使用站与网页的基本概念。使用Microsoft Froi

4、ntPage 2003制作网页则要学会启动制作网页则要学会启动和关闭和关闭FrontPage，了解，了解FrontPage的窗的窗口，怎样在口，怎样在“设计设计”视图模式下制作一张视图模式下制作一张简单的网页。简单的网页。7一、观看一、观看“中国青年志愿网中国青年志愿网”网站上网网站上网二、Microsoft FrontPage 2003的窗口三、制作三、制作“自我介绍自我介绍”的个人网页的个人网页四、保存网页四、保存网页五、退出五、退出Microsoft FrontPage 2003动手实践动手实践8一、观看一、观看“中国青年志愿网中国青年志愿网”网站网站1.上网，输入网址：上网，输入网址：

5、，进入，进入“中国青中国青年志愿网年志愿网”网站。网站。2.观看这个网站。观看这个网站。3.讨论这个网站的组成。讨论这个网站的组成。9一、观看一、观看“中国青年志愿网中国青年志愿网”网站网站网站、网页与主页网站、网页与主页 网站网站(Web Site)是发布在网络服务器上的、具有域是发布在网络服务器上的、具有域名和独立存放空间的、为访问者提供信息和服务名和独立存放空间的、为访问者提供信息和服务的内容的集合。这些内容可以是网页，也可以是的内容的集合。这些内容可以是网页，也可以是程序或其他文件。一个大型的网站可能有数以百程序或其他文件。一个大型的网站可能有数以百万亿的网页，而一个小型的个人网站可能

6、只有一万亿的网页，而一个小型的个人网站可能只有一张网页。网页是网站的一个组成部分。张网页。网页是网站的一个组成部分。我们看到的我们看到的“中国青年志愿网中国青年志愿网”就是一个比较大型就是一个比较大型的网站。刚一开机看到的页面叫做主页。主页的的网站。刚一开机看到的页面叫做主页。主页的文件名一般是文件名一般是“index.htm”。知识窗知识窗10二、Microsoft FrontPage 2003的窗口1.启动Microsoft FrontPage 2003依次单击依次单击“开始开始”“所有程序所有程序”“Microsoft Office”“ Microsoft Office FrontPag

7、e 2003”112.FrontPage 2003的窗口12 几种页面视图模式“设计设计”视图模式：在视图模式：在“设计设计”视图模视图模式如图式如图7- 2所示，可以在编辑区里编辑所示，可以在编辑区里编辑和修饰网页。和修饰网页。13 几种页面视图模式代码视图模式：代码视图模式：“代码代码”视图模式如图视图模式如图7- 3所示。在编辑区中所示。在编辑区中可以使用可以使用HTML语言（超文本标记语言）编写网页，也可以语言（超文本标记语言）编写网页，也可以看到在看到在“设计设计”视图模式下编辑的网页的视图模式下编辑的网页的HTML语言代码。语言代码。14拆分视图模式：拆分视图模式如图拆分视图模式：

8、拆分视图模式如图7- 4所示。编辑区被分为上下两所示。编辑区被分为上下两部分，上面一部分是部分，上面一部分是“代码代码”视图窗口，下面一部分是视图窗口，下面一部分是“设计设计”视图窗口。可以在两部分之间对照和编辑网页。如果对一个窗口视图窗口。可以在两部分之间对照和编辑网页。如果对一个窗口中的内容进行了修改，另一个窗口中的内容也会有相应的改动。中的内容进行了修改，另一个窗口中的内容也会有相应的改动。 几种页面视图模式15 几种页面视图模式HTML语言简介 HTML语言是语言是hyter text markup language（超文本标记语言）的缩写，是制作网页的（超文本标记语言）的缩写，是制作

9、网页的专用语言。它的实质是用特殊的标记（或称专用语言。它的实质是用特殊的标记（或称标签）对文本中文字的字体、字号、颜色、标签）对文本中文字的字体、字号、颜色、字形以及文本的格式等进行标记。不论用什字形以及文本的格式等进行标记。不论用什么软件来制作网页，最后的代码一定是么软件来制作网页，最后的代码一定是HTML语言代码。语言代码。 知识窗知识窗16 进入进入FrontPage 2003后，选择后，选择“设计设计”视图模视图模式。式。 插入图片。插入图片。 设置图片的环绕方式、布局和大小。设置图片的环绕方式、布局和大小。 输入文字输入文字 5. 预览网页预览网页操作步骤见书操作步骤见书P246三、

10、制作“自我介绍”的个人网页17“自我介绍自我介绍”网页网页 18四、保存网页1.执行执行“文件文件保存保存”命令命令 网页文件的扩展名是：网页文件的扩展名是：htm2.保存嵌入式文件保存嵌入式文件 说明：说明： 制作一张网页时，可能要插入图形图像等其他制作一张网页时，可能要插入图形图像等其他文件，在保存文件时，一定要更改这些文件的文件，在保存文件时，一定要更改这些文件的文件夹，让它们与网页文件保存在同一个文件文件夹，让它们与网页文件保存在同一个文件夹中。这样便于将来把网页连接到网站中，也夹中。这样便于将来把网页连接到网站中，也便于移动网页到其它文件夹或其他计算机的硬便于移动网页到其它文件夹或其

11、他计算机的硬盘上。盘上。192.保存嵌入式文件保存嵌入式文件_1在屏幕弹出的在屏幕弹出的“保存嵌入式文件保存嵌入式文件”对话框中如图对话框中如图7- 7所示，单击所示，单击“更改文件夹更改文件夹”按钮。按钮。 20在屏幕弹出的在屏幕弹出的“打开打开”对话框中（如图对话框中（如图7- 8所所示），找到示），找到“My Webs”文件夹并选中它，单文件夹并选中它，单击击“打开打开”按钮。按钮。2.保存嵌入式文件保存嵌入式文件_221 回到回到“保存嵌入式文件保存嵌入式文件”对话对话框后，我们看到框后，我们看到“niu.gif”这这个文件所在的文件夹已经被更个文件所在的文件夹已经被更改。改。单击单击

12、“确定确定”按钮。按钮。2.保存嵌入式文件保存嵌入式文件_322退出退出FrontPage的方法与退出其的方法与退出其他应用软件的方法相同。他应用软件的方法相同。 五、退出五、退出Microsoft FrontPage 200323归纳总结归纳总结 本节我们学习了以下内容：本节我们学习了以下内容：1.了解了解FrontPage 2003的窗口。的窗口。2.启动和关闭启动和关闭FrontPage。3.网页、网站和主页的基本概念。网页、网站和主页的基本概念。4.“页面视图页面视图”的基本概念。的基本概念。5.在在“设计设计”视图模式下制作简单的网视图模式下制作简单的网页。页。6.学会了保存网页。学

13、会了保存网页。24设置网页的大小设置网页的大小在状态栏的右边，有一排按钮。其中是指当前网在状态栏的右边，有一排按钮。其中是指当前网页的大小，如果要改变网页的大小，可以单击页的大小，如果要改变网页的大小，可以单击这个按钮，屏幕弹出如图这个按钮，屏幕弹出如图7- 9所示的菜单，单击所示的菜单，单击需要的页面大小。需要的页面大小。这里采用系统默认的页面大小：这里采用系统默认的页面大小：781374。 拓展知识拓展知识25发挥自己的想象力，制作一张图文发挥自己的想象力，制作一张图文并茂的介绍自己的网页，并把它并茂的介绍自己的网页，并把它保存在自己的文件夹中。保存在自己的文件夹中。自主练习自主练习目录目

14、录267.2 规划网站结构 【任务任务7.2】规划规划“班级网站班级网站”的结构的结构任务分析任务分析动手实践动手实践一、创建一个空白网站一、创建一个空白网站二、利用二、利用“导航导航”视图，规划网站的结构视图，规划网站的结构 三、三、修改网站结构图修改网站结构图 归纳总结归纳总结拓展知识拓展知识自主练习自主练习27【任务7.2】规划“班级网站”的结构 学校发布了制作学校发布了制作“班级网站班级网站”的要求：的要求： 思想健康，体现新时代的精神风貌。思想健康，体现新时代的精神风貌。 突出校园气氛，反映班级特色和同学们的发展动向，与同学们突出校园气氛，反映班级特色和同学们的发展动向，与同学们的学

15、习、生活和参加各类有意义的活动密切结合。的学习、生活和参加各类有意义的活动密切结合。 色彩和谐，主题突出，有感染力。色彩和谐，主题突出，有感染力。 能够运用各种媒体，有独特的创意。能够运用各种媒体，有独特的创意。 注意保护知识产权，不得抄袭、复制他人作品。注意保护知识产权，不得抄袭、复制他人作品。 根据学校的要求，同学们认为：我们虽然是制作网站的初学者，根据学校的要求，同学们认为：我们虽然是制作网站的初学者，但我们制作的网站起码要反映出我们班欣欣向荣的精神面貌，但我们制作的网站起码要反映出我们班欣欣向荣的精神面貌，比如介绍我们都班级成员，介绍我们的生活，介绍我们的作品，比如介绍我们都班级成员，

16、介绍我们的生活，介绍我们的作品，介绍我们的爱好等。介绍我们的爱好等。28任务分析任务分析根据同学们的讨论，可以确定出这个根据同学们的讨论，可以确定出这个“班级网站班级网站”的主题是：反映班级欣的主题是：反映班级欣欣向荣的精神面貌。将要从班级成员、欣向荣的精神面貌。将要从班级成员、我们的生活、我们的作品、我们的爱我们的生活、我们的作品、我们的爱好等几个方面去反映。好等几个方面去反映。要制作网站，先要学会怎样创建一个空要制作网站，先要学会怎样创建一个空白网站，然后，可以利用白网站，然后，可以利用“导航导航”视视图，规划网站的结构。图，规划网站的结构。29一、创建一个空白网站一、创建一个空白网站启动

17、启动FrontPage 2003 新建网页新建网页二、利用二、利用“导航导航”视图，规划网站的结构视图，规划网站的结构 1, “文件夹文件夹”视图和视图和“导航导航”视图视图 创建空白主页创建空白主页3.创建网站结构创建网站结构4.修改网页文件名和网页标题修改网页文件名和网页标题5.刷新刷新“文件夹列表文件夹列表”三、三、修改网站结构图修改网站结构图1. 移动网页移动网页2. 删除网页删除网页动手实践动手实践30一、创建一个空白网站1.启动启动FrontPage 2003。2.新建网站新建网站执行执行“【文件文件】【新建新建】”命令，屏幕弹出命令，屏幕弹出“新建新建”任务窗格任务窗格 ，如右图

18、。，如右图。312.新建网站新建网站_2 单击单击“其他网站模板其他网站模板”，屏幕弹出，屏幕弹出“网站模板网站模板”对话框。对话框。在在“常规常规”选项中，选中选项中，选中“空白网站空白网站”。在。在“指定新网指定新网站位置站位置”下面的栏目中，输入新网站的位置。下面的栏目中，输入新网站的位置。一、创建一个空白网一、创建一个空白网站站322.新建网站新建网站_3单击单击“网站模板网站模板”上的上的“确定确定”按钮。按钮。屏幕显示出屏幕显示出“E:banjiwangzhan”的内的内容。容。一、创建一个空白网一、创建一个空白网站站33二、利用“导航”视图，规划网站的结构 1.“文件夹”视图和“

19、导航”视图见书见书P249“导航导航”视图视图34二、利用“导航”视图，规划网站的结构 创建空白主页进入导航视图模式进入导航视图模式单击视图栏上的单击视图栏上的“导航导航”按钮，就进入了导航视图按钮，就进入了导航视图模式。屏幕显示如图模式。屏幕显示如图7-13所示。主页的文件名一所示。主页的文件名一般是：般是：index.htm35二、利用“导航”视图，规划网站的结构 创建空白主页 创建空白主页。创建空白主页。 单击导航工具栏上的单击导航工具栏上的“新建网页新建网页”按钮。按钮。 “导航导航”视图窗口创建了一张空白主页，视图窗口创建了一张空白主页，如图如图7- 14所示。系统默认的主页文件名是

20、所示。系统默认的主页文件名是“index.htm”，标题名是，标题名是“主页主页”。36二、利用“导航”视图，规划网站的结构3.创建网站结构右击右击 “ “导航导航”视图中的视图中的“主页主页”, ,弹出快捷菜单弹出快捷菜单 执行执行“【新建新建】【网页网页】”命令。在主命令。在主页的下一层创建了一张新的网页页的下一层创建了一张新的网页 37二、利用“导航”视图，规划网站的结构4.修改网页文件名和网页标题执行执行“视图视图文件夹列表文件夹列表”命令，打开命令，打开“文件夹列表文件夹列表”窗格窗格 在在“文件夹列表文件夹列表”中，将中，将“new_page_1”修改为修改为“banjicheng

21、yuan”（班级成员）。（班级成员）。 说明：千万不能修改扩展名说明：千万不能修改扩展名“htm”。38二、利用“导航”视图，规划网站的结构5.刷新“文件夹列表”执行执行“视图视图刷新刷新”命令，命令，“文件夹列表文件夹列表”窗格中显示出新添加的窗格中显示出新添加的3张网页的文件名张网页的文件名 .39在在“导航导航”视图窗口中，把鼠标指针移到视图窗口中，把鼠标指针移到“我们的生活我们的生活”矩形框矩形框中，仿照第中，仿照第3步的操作方法，在步的操作方法，在“我们的生活我们的生活”的下一层添加的下一层添加一张新网页。一张新网页。将新添网页的标题改为将新添网页的标题改为“我们的班主任我们的班主任

22、”。在。在“文件夹列表文件夹列表”中，中，将与其相对应的文件名改为将与其相对应的文件名改为“wmdbzr.htm”（我们的班主任）（我们的班主任）（图（图7- 19所示）。所示）。二、利用“导航”视图，规划网站的结构5.刷新“文件夹列表”40父页和子页在上图中，我们看到网站的网页共有三层，第一层是主页。主页的在上图中，我们看到网站的网页共有三层，第一层是主页。主页的下一层有下一层有“班级成员班级成员”、“我们的生活我们的生活”、“我们的作品我们的作品”、“我们的爱好我们的爱好”四张网页。而四张网页。而“我们的生活我们的生活”的下一层又有的下一层又有“我我们的班主任们的班主任”一张网页。这就好像

23、文件夹的树状结构一样。当一一张网页。这就好像文件夹的树状结构一样。当一张网页含有下层网页时，这张网页叫做父网页（简称：张网页含有下层网页时，这张网页叫做父网页（简称：父页），），它的下一层网页叫做子网页（简称：它的下一层网页叫做子网页（简称：子页）。例如）。例如“主页主页”称为称为父页，父页，“班级成员班级成员”、“我们的生活我们的生活”、“我们的作品我们的作品”、“我我们的爱好们的爱好”都是主页的子页；网页都是主页的子页；网页“我们的生活我们的生活”是网页是网页“我们我们的班主任的班主任”的父页，的父页，“我们的班主任我们的班主任”则是则是“我们的生活我们的生活”的子的子页。页。一张网页在它

24、与子页的连线上方有一个图标，单击它，树状结构就一张网页在它与子页的连线上方有一个图标，单击它，树状结构就被折叠了，图标变成了，单击，可以展开网页的树状结构。被折叠了，图标变成了，单击，可以展开网页的树状结构。 知识窗知识窗41三、修改网站结构图三、修改网站结构图1.移动网页：在在“导航导航”视图窗口中，把鼠标视图窗口中，把鼠标指针移到指针移到“我们的班主任我们的班主任”矩形框中，按钮矩形框中，按钮鼠标左键，拖动矩形框到鼠标左键，拖动矩形框到“班级成员班级成员”矩形矩形框下，松开鼠标左键。框下，松开鼠标左键。2.删除网页：在删除网页：在“导航导航”视视图窗口，选中要删除的网图窗口，选中要删除的网

25、页矩形框，按键盘上的页矩形框，按键盘上的“Delete”键（或者将鼠键（或者将鼠标指针移到矩形框中没有标指针移到矩形框中没有文字的地方，右击鼠标，文字的地方，右击鼠标，在弹出的快捷菜单中单击在弹出的快捷菜单中单击“删除删除”命令）。屏幕弹命令）。屏幕弹出出“删除网页删除网页”对话框，对话框，如图如图7- 20所示。选择所示。选择“从从网站中删除此网页网站中删除此网页”后单后单击击“确定确定”按钮按钮 。42归纳总结归纳总结本节主要学习了以下内容：1. 建立一个空白网站。建立一个空白网站。2. “文件夹视图文件夹视图”和和”导航视图导航视图”基本概念。基本概念。3. 父页和子页的基本概念。父页和

26、子页的基本概念。4. 利用利用“导航导航”视图，规划网站的结构。视图，规划网站的结构。5. 打开打开“文件夹列表文件夹列表”6. 修改修改“文件夹列表文件夹列表”中网页的文件名和中网页的文件名和“导航导航”窗格中的网页标题名。窗格中的网页标题名。7 在在“导航导航”窗格中，添加、移动和删除网页。窗格中，添加、移动和删除网页。 43查看网站结构图查看网站结构图 进入进入“导航导航”视图，系统默视图，系统默认的网站结构认的网站结构图是横向的。图是横向的。单击单击“导航导航”工具栏上的工具栏上的“横向横向/纵向纵向”按钮，网站结按钮，网站结构图就变成横构图就变成横向的。向的。拓展知识拓展知识441.

27、自己规划一个班级网站，设计网站的结自己规划一个班级网站，设计网站的结构图。构图。2.搜集能反映自己班级生活的图片、文档搜集能反映自己班级生活的图片、文档等文件保存到硬盘里，以备后用。等文件保存到硬盘里，以备后用。 自主练习自主练习目录目录457.3 为网页添加表格、文字和图片为网页添加表格、文字和图片 【任务任务7.3】制作制作“班级网站班级网站”的主页的主页任务分析任务分析动手实践动手实践一、在网页中插入表格一、在网页中插入表格二、在表格中输入文字、插入图片二、在表格中输入文字、插入图片归纳总结归纳总结拓展知识拓展知识自主练习自主练习46【任务7.3】制作“班级网站”的主页为了制作为了制作“

28、班级网站班级网站”同学们事先已经准备了同学们事先已经准备了许多素材，有同学的文章，有同学的电脑绘许多素材，有同学的文章，有同学的电脑绘画作品，有同学的画作品，有同学的Flash作品等。作品等。把把“班级网站班级网站”的主页做成什么样呢？同学们的主页做成什么样呢？同学们讨论：内容的最主要的，应该有醒目的标题。讨论：内容的最主要的，应该有醒目的标题。认为主页中应该有反映同学们精神面貌的图认为主页中应该有反映同学们精神面貌的图片，应该有班里的新闻，校园的动态；应该片，应该有班里的新闻，校园的动态；应该有反映我们特点的文字等等。有反映我们特点的文字等等。47任务分析任务分析可以根据同学们的设想，为可以

29、根据同学们的设想，为“主页主页”画一张草图。画一张草图。 根据草图，制作这张主页应该完成下面的工作：根据草图，制作这张主页应该完成下面的工作：1. 为网页插入一张表格，比如计划插入一张为网页插入一张表格，比如计划插入一张13行行3列的表格。列的表格。2. 整理表格成为图整理表格成为图8-22的样子。的样子。3. 在单元格中插入照片在单元格中插入照片4. 在表格中输入文字在表格中输入文字48动手实践动手实践一、在网页中插入表格一、在网页中插入表格1.打开打开“班级网站班级网站”，进入主页，进入主页 2.插入表格插入表格3.整理表格整理表格二、在表格中输入文字、插入图片二、在表格中输入文字、插入图

30、片 1.在第二行第一列的单元格中输入文字在第二行第一列的单元格中输入文字 2.在单元格中插入图片在单元格中插入图片 3.保存网页保存网页4.设置图片的动态效果设置图片的动态效果 49一、在网页中插入表格一、在网页中插入表格1.打开打开“班级网站班级网站”，进入主页，进入主页 启动启动FrontPage 2003，执，执行行【文件文件】【打开打开】命令，命令，在在“打开文件打开文件”对话框中的对话框中的“E”盘根目录下，双击盘根目录下，双击“banjiwangzhan” 。在在“打开文件打开文件”对话框的对话框的“banjiwangzhan” 下，下，选中选中“index.htm”，单击，单击“

31、打开打开”按钮。按钮。选择选择“设计设计”视图模式。视图模式。50一、在网页中插入表格一、在网页中插入表格 2.插入表格插入表格把鼠标指针移到把鼠标指针移到“常用工具栏常用工具栏”上的上的“插入表格插入表格”按钮上，单击，按钮下方出现一个表格，按住鼠标左按钮上，单击，按钮下方出现一个表格，按住鼠标左键，向下拖动，选中的地方变成蓝色，表格下方显示键，向下拖动，选中的地方变成蓝色，表格下方显示“13乘乘3表格表格”时，松开鼠标左键。网页编辑屏幕上时，松开鼠标左键。网页编辑屏幕上出现了一个出现了一个13行行3列的表格。列的表格。3.整理表格整理表格把鼠标指针移到表格最后一行的表格线上，鼠把鼠标指针移

32、到表格最后一行的表格线上，鼠标指针变成，拖动指针，使表格充满整个屏幕。标指针变成，拖动指针，使表格充满整个屏幕。把鼠标指针移到第一列与第二列之间的表格线把鼠标指针移到第一列与第二列之间的表格线上，鼠标指针变成，拖动它，将表格线向左移动，上，鼠标指针变成，拖动它，将表格线向左移动，使第一列变窄，第二列加宽。使第一列变窄，第二列加宽。选中要合并的单元格，执行选中要合并的单元格，执行“表格表格合并单元合并单元格格”命令，可将选中的单元格合并。命令，可将选中的单元格合并。 51二、在表格中输入文字、插入图片二、在表格中输入文字、插入图片 1.在第二行第一列的单元格中输入文字在第二行第一列的单元格中输入

33、文字 例如输入：例如输入： 班级新闻班级新闻 我班刘维同学的的计算机绘画我班刘维同学的的计算机绘画照片获得区级计算机作品比赛二等照片获得区级计算机作品比赛二等奖奖 我班将举办班级乒乓球比赛我班将举办班级乒乓球比赛52二、在表格中输入文字、插入图片二、在表格中输入文字、插入图片 2.在单元格中插入图片在单元格中插入图片 把插入点光标放在放照片的单元格。把插入点光标放在放照片的单元格。单击图片，图片四周出现控制点和单击图片，图片四周出现控制点和“图片操作图片操作”按按钮钮 。把鼠标指针移到控制点上，鼠标指针变为双。把鼠标指针移到控制点上，鼠标指针变为双箭头形，拖动它改变图片的大小。箭头形，拖动它改

34、变图片的大小。调整列表格线，使各列的宽度看上去合适。调整列表格线，使各列的宽度看上去合适。把鼠标指针移到把鼠标指针移到“图片操作图片操作”按钮上，单击右边下按钮上，单击右边下拉按钮，打开图片操作选项列表，选择拉按钮，打开图片操作选项列表，选择“重新对重新对图片取样以匹配大小图片取样以匹配大小”。选中图片，单击选中图片，单击“居中居中”按钮，使图片在单元格中按钮，使图片在单元格中居中显示。居中显示。53二、在表格中输入文字、插入图片二、在表格中输入文字、插入图片 3.保存网页保存网页执行执行“【文件文件】【保存保存】”命令，屏幕弹出如图命令，屏幕弹出如图7- 25所示的所示的“保存嵌入式文件保存

35、嵌入式文件”对话框。单对话框。单击击“更改文件夹更改文件夹”按钮。按钮。屏幕弹出屏幕弹出“更改文件夹更改文件夹”对话框。搜对话框。搜索栏显示出当前网站的位置索栏显示出当前网站的位置“E:banjiwangzhan”，在文件夹列，在文件夹列表窗口中，选择表窗口中，选择“images”文件夹后，文件夹后，单击单击“确定确定” 。54二、在表格中输入文字、插入图片二、在表格中输入文字、插入图片 4.设置图片的动态效果设置图片的动态效果 单击单击“升国旗升国旗”图片，选中它。图片，选中它。 执行执行“【视图视图】【工具栏工具栏】【DHTML 效果效果】”命命令，屏幕显示出如图令，屏幕显示出如图7- 2

36、7所示的对话框。所示的对话框。 单击单击“”右边的下拉按钮，打开事件右边的下拉按钮，打开事件列表，如图列表，如图7- 28所示。单击所示。单击“鼠标悬停鼠标悬停”。55二、在表格中输入文字、插入图片二、在表格中输入文字、插入图片 4.设置图片的动态效果设置图片的动态效果 选择了事件之后，选择了事件之后，栏栏被栏栏被“点亮点亮”，单击单击“”右边的下拉按钮，选择右边的下拉按钮，选择“交交换图片换图片” 。 选择了效果之后，选择了效果之后，栏被栏被“点亮点亮”，单击，单击“”右边的下拉按钮，在列表中单击右边的下拉按钮，在列表中单击“选选择图片择图片”。 56二、在表格中输入文字、插入图片二、在表格

37、中输入文字、插入图片 4.设置图片的动态效果设置图片的动态效果 屏幕弹出屏幕弹出“图片图片”对话框中。假设要交换的图片的对话框中。假设要交换的图片的文件名是文件名是“yuelan.jpg”，保存在，保存在“桌面桌面图片收藏图片收藏班级网站用班级网站用”路径下，在路径下，在“查找范围查找范围”栏找到图片栏找到图片所在的文件夹名，在文件窗口中选中文件名，单击所在的文件夹名，在文件窗口中选中文件名，单击“打开打开”按钮（如图按钮（如图7- 31所示）。所示）。57更改文件夹 制作网站，当利用制作网站，当利用“导航导航”，制作完成网站的结构，制作完成网站的结构图，而其中的每一张网页都是空的时，系统会自

38、动图，而其中的每一张网页都是空的时，系统会自动将网站的结构保存起来。但是，当制作了其中的一将网站的结构保存起来。但是，当制作了其中的一张或几张网页时，就需要保存了。如果在网页中插张或几张网页时，就需要保存了。如果在网页中插入了图片、文档等其他文件时，屏幕还会弹出入了图片、文档等其他文件时，屏幕还会弹出“保保存嵌入式文件存嵌入式文件”和和“更改文件夹更改文件夹”对话框。这时应对话框。这时应该把插入的图片、文档等文件保存到网站与之相应该把插入的图片、文档等文件保存到网站与之相应的文件夹中。这是为了使网站的结构更加清晰、有的文件夹中。这是为了使网站的结构更加清晰、有条理，更便于移动。条理，更便于移动

39、。知识窗知识窗58知识窗知识窗： 静态网页和动态网页静态网页是用静态网页是用HTML语言编写的，当我们浏览这种语言编写的，当我们浏览这种网页时，网页看上去就像一幅画一样，不会发生网页时，网页看上去就像一幅画一样，不会发生改变。这样的网页就是静态网页。改变。这样的网页就是静态网页。动态网页即动态网页即DHTML（D是是dynamic的缩写，表示动的缩写，表示动态），它是利用态），它是利用CSS（层叠样式表）、（层叠样式表）、JavaScript（脚本语言）、（脚本语言）、HTML等技术建立的。等技术建立的。在浏览这种网页时，网页能自动变化产生动画效在浏览这种网页时，网页能自动变化产生动画效果，或

40、与访问者产生互动，这样的网页就是动态果，或与访问者产生互动，这样的网页就是动态网页。动态网页的交互是在客户端进行的，没有网页。动态网页的交互是在客户端进行的，没有使用到服务器技术。使用到服务器技术。 59归纳总结归纳总结 本节主要学习了以下内容：本节主要学习了以下内容： 打开网站。打开网站。 在网页中插入表格整理表格。在网页中插入表格整理表格。 在单元格中输入文字和插入图片。在单元格中输入文字和插入图片。 调整单元格中图片的大小。调整单元格中图片的大小。 保存网页文件时为什么要更改文件夹。保存网页文件时为什么要更改文件夹。 保存网页文件。保存网页文件。 7. 设置图片的设置图片的DHTML效果

41、。效果。 8. 什么是静态网页什么是动态网页。什么是静态网页什么是动态网页。 60拓展知识拓展知识_1一、为网页添加背景图案和音乐一、为网页添加背景图案和音乐 为主页设计一个好的背景图案和音乐，也可以使网站引人注目。为主页设计一个好的背景图案和音乐，也可以使网站引人注目。1.进入页面视图模式进入页面视图模式 双击双击“导航导航”视图窗口中的视图窗口中的“主页主页”。屏幕进入页面视图模式。屏幕进入页面视图模式。2. 执行执行“格式格式背景背景”命令命令, 执执行行“格式格式背景背景”命令，屏幕弹命令，屏幕弹出出“网页属性网页属性”对话框，如图对话框，如图7-33所示。所示。3. 设置背景图片设置

42、背景图片 在在“格式格式”选项中，设置网页选项中，设置网页的背景图片。在的背景图片。在“背景背景”框架下，框架下，选中选中“图片图片”和和“使其成为水使其成为水印印”，如图，如图7- 33所示。所示。 单击单击“浏览浏览”按钮，在按钮，在“选择选择背景图片背景图片”对话框中，找到背景对话框中，找到背景图片所在的文件夹，选中文件名图片所在的文件夹，选中文件名“背景图片背景图片.jpg”后单击后单击“打开打开”按钮，回到按钮，回到“网页属性网页属性”对话框。对话框。61拓展知识拓展知识_2二、设置背景音乐二、设置背景音乐在在“网页属性网页属性”对话框的对话框的“常规常规”选项中，设置网页的背景音乐

43、，选项中，设置网页的背景音乐，如图如图7- 34所示。所示。1. 输入音乐文件所在的位置输入音乐文件所在的位置单击单击“背景音乐背景音乐”框架下框架下的的“浏览浏览”按钮，在按钮，在“背背景音乐景音乐”对话框中，找到对话框中，找到背景音乐所在的文件夹，背景音乐所在的文件夹，选中文件名选中文件名“HD.MID”，单击单击“打开打开”按钮。回到按钮。回到网页属性对话框。网页属性对话框。2.设置循环次数设置循环次数在在“循环次数循环次数”栏设置循栏设置循环次数。例如在环次数。例如在“循环次循环次数数”栏中输入栏中输入“1”。 621.制作制作“班级网站班级网站”的主页的主页 为你的为你的“班级网站班

44、级网站”的主页插入自己设计的表的主页插入自己设计的表格。格。 设置表格的宽度和高度。设置表格的宽度和高度。 在表格中插入图片，整理图片。在表格中插入图片，整理图片。 写一段歌颂班集体的文章，输入到表格中。写一段歌颂班集体的文章，输入到表格中。 保存网页。保存网页。 温情提示：将图片保存到温情提示：将图片保存到“banjiwangzhan”（班级网站）文件夹的（班级网站）文件夹的“images”文件夹中。文件夹中。发挥自己的想象力，制作发挥自己的想象力，制作“banjichengyuan”（班（班级成员）网页。级成员）网页。要求：可以制作一张简单的网页，其中必须有关键字要求：可以制作一张简单的网

45、页，其中必须有关键字“班主任班主任”或班主任的名字，班级成员或班主任的名字，班级成员“张为民张为民”以及其他同学的名字。参考图以及其他同学的名字。参考图7- 36。自主练习自主练习目录目录637.4添加字幕和导航栏【任务任务7.4】为为“班级网站班级网站”添加字幕和导添加字幕和导航栏航栏任务分析任务分析动手实践动手实践一、将标题设置为字幕并设置动态效果一、将标题设置为字幕并设置动态效果二、建立二、建立“导航栏导航栏”三、三、在在“班级网站班级网站”中加入外部网页中加入外部网页 归纳总结归纳总结自主练习自主练习64【任务7.4】为“班级网站”添加字幕和导航栏 同学们认为，主页应该有醒目的标题，同

46、学们认为，主页应该有醒目的标题，最好还能动。而且在主页中能够很方便地浏最好还能动。而且在主页中能够很方便地浏览到下一层网页。而且，许多同学做好了自览到下一层网页。而且，许多同学做好了自己的个人网页，也希望能把它连到班级网站己的个人网页，也希望能把它连到班级网站上。上。65任务分析任务分析要达到同学们的意图，需完成以下要达到同学们的意图，需完成以下3件事：件事：1. 利用利用FrontPage 2003中的中的“插入字幕插入字幕”功能，功能，可以做出醒目的而且有动态效果的标题。可以做出醒目的而且有动态效果的标题。2. 在主页中，通过设置在主页中，通过设置“导航栏导航栏”就能方便、快捷就能方便、快

47、捷地浏览到下一层网页。地浏览到下一层网页。3. 张为民的个人网页对于张为民的个人网页对于“banjiwangzhan”（班（班级网站）来说属于外部网页，利用级网站）来说属于外部网页，利用“资源管理资源管理器器”和和FrontPage 2003加入外部网页的功能可加入外部网页的功能可以把张为民的个人网页加到班级网站中。以把张为民的个人网页加到班级网站中。66一、将标题设置为字幕并设置动态效果一、将标题设置为字幕并设置动态效果1.进入进入“班级网站班级网站”的主页的主页2.插入字幕插入字幕3.保存网页保存网页二、二、建立建立“导航栏导航栏”1.进入进入“导航导航”视图窗口视图窗口2.建立建立“导航

48、栏导航栏”3.整理表格线整理表格线4.预览网页预览网页三、在三、在“班级网站班级网站”中加入外部网页中加入外部网页1.利用利用“资源管理器资源管理器”。在。在“编辑网站编辑网站”中建立新的文件夹中建立新的文件夹2. 复制个人网页到班级网站中复制个人网页到班级网站中3.把个人网页加入到导航结构图中把个人网页加入到导航结构图中4. 保存网站保存网站动手实践动手实践67一、将标题设置为字幕并设置动态效果1.进入进入“班级网站班级网站”的主页的主页2.插入字幕插入字幕3.保存网页保存网页 操作步骤见书操作步骤见书P 261P262插入插入Web组件对话框组件对话框68“字幕属性字幕属性”对话框对话框6

49、9二、建立“导航栏”知识窗知识窗： 导航栏导航栏 导航栏是由一组按钮或文本超链接组成的。利用它，导航栏是由一组按钮或文本超链接组成的。利用它，可以快速、方便地浏览网站中的主要网页。可以快速、方便地浏览网站中的主要网页。 知识窗： 删除导航栏删除导航栏在在“设计设计”视图中，选中导航按钮，按键盘上的视图中，选中导航按钮，按键盘上的“Delete”键，可以删除导航栏。键，可以删除导航栏。把鼠标指针移到导航按钮中，右击，在屏幕弹出的快捷菜把鼠标指针移到导航按钮中，右击，在屏幕弹出的快捷菜单中选择单中选择“链接栏链接栏 属性属性”命令，在弹出的命令，在弹出的“链接栏属链接栏属性性”对话框中可以重新设置

50、对话框中可以重新设置“要添加到网页的超链接要添加到网页的超链接”。 701. 进入进入“导航导航”视图窗口视图窗口2. 建立建立“导航栏导航栏”3. 整理表格线整理表格线4. 预览网页预览网页操作步骤见书操作步骤见书P262P264二、建立“导航栏”71制作好的班级网站的主页制作好的班级网站的主页 72三、在“班级网站”中加入外部网页 1. 利用利用“资源管理器资源管理器”，在，在“编编辑网站辑网站”中建立新的文件夹中建立新的文件夹 2. 复制个人网页到班级网站中复制个人网页到班级网站中3. 把个人网页加入到导航结构图把个人网页加入到导航结构图中中 保存网站保存网站操作步骤见书操作步骤见书P2