项目七：网页制作软件frontpage+2003的应用

《项目七：网页制作软件frontpage+2003的应用》由会员分享，可在线阅读，更多相关《项目七：网页制作软件frontpage+2003的应用（47页珍藏版）》请在金锄头文库上搜索。

1、任务一：FrontPage2003的基本操作 任务二：创建简单的图文混排网页 任务三：使用表格布局网页 任务四：使用层布局网页 任务五：使用层布局网页 任务六:创建一个调查问卷 任务七:建立超级链接 任务八:HMTL语言,任务一： FrontPage2003的基本操作,任务描述：该任务主要是学习FrontPage 2003的启动与退出，熟悉FrontPage2003 的窗口界面，练习在FrontPage 2003中创建空白网页。 知识点：FrontPage 2003的启动与退出、FrontPage2003 的窗口界面的组成、新建空白网页 FrontPage2003是Microsoft公司推出的

2、Office2003组件之一，是一个网页制作和网站维护工具。它虽然没有Dreamweaver那么专业，但是它提供的“所见即所得”的网页创作环境却可以让我们轻松愉快地制作出自己喜爱的网页。它的工作方式与Word非常相似，有了使用Word的基础，FrontPage2003是很容易掌握的。,7.1.1 FrontPage 2003的启动与退出 1. FrontPage的启动 启动FrontPage2003有两种方法： （1）单击任务栏的【开始】按钮，在【开始】菜单中选择【程序】选项，再在级联菜单中选择【Microsoft FrontPage 2003】即可，如图7.1所示。 （2）如果在桌面上添加了

3、 Microsoft FrontPage2003 的快捷方式，双击其图标即可。,图7.1 FrontPage2003,任务一： FrontPage2003的基本操作,2FrontPage2003 的退出 使用结束需退出 FrontPage2003系统时，有五种方法： （1）单击【文件】菜单中的【退出】。 （2）单击标题栏中最左边的控制菜单图标，再单击菜单中的【关闭】命令。 （3）单击标题栏中最右边的按钮。 （4）双击FrontPage2003窗口左上角的控制菜单按钮。 （5）使用快捷键Alt+F4。,任务一： FrontPage2003的基本操作,7.1.2 FrontPage 的窗口界面 启

4、动FrontPage 2003后，出现 如图7.3 所示的窗口界面，它由标题栏、菜单栏、工具栏、视图栏、编辑区、滚动条和状态栏等组成。主要部分的功能及使用方法如下：,图7.3 FrontPage2003 的窗口界面,任务一： FrontPage2003的基本操作,1标题栏、菜单栏和工具栏 标题栏、菜单栏和工具栏的功能和使用方法和Word类似，在此不再赘述。 2编辑区 FrontPage2003窗口中的空白区域就是编辑区，如图7.4所示 。用户可以在该区域中输入文本、插入图片、表格以及各种组件。 打开一个新网页文件时，FrontPage2003在编辑区的左下方显示网页编辑状态切换标签：“设计”、

5、“拆分”、“代码”以及“预览”。单击某个标签后，系统将在对应的编辑状态中显示当前网页的内容。 （1）设计 它实现了网页编辑时“所见即所得”的功能，用户可以在网页中输入各种文本或插入各种组件，并可以轻松地对其进行编辑。,任务一： FrontPage2003的基本操作,（2）拆分 它实现了工作区窗口拆分的功能，用户可以在工作区上半个窗口中输入网页的HTML代码或插入各种组件，下半个窗口如同设计视图可以轻松地对网页进行编辑。如图7.5所示。 （3）代码 此标签用于显示网页的HTML代码。它实际上是一个文本编辑器，可以使用FrontPage提供的菜单命令和工具栏按钮进行复制、移动、粘贴、删除、查找、替

6、换等文本的基本操作。 （4）预览 它用于在制作网页的过程中随时查看实际效果。,任务一： FrontPage2003的基本操作,3任务窗格 任务窗格是Office 应用程序中提供常用命令的窗口。它的位置适宜，尺寸又小，您可以一边使用这些命令，同时继续处理文件。如图7.6所示。,图7.6 任务窗格,任务一： FrontPage2003的基本操作,4状态栏 状态栏位于窗口的最下端，显示出当前操作的相关信息、超链接的URL地址、预计的下载时间以及Num Lock键的状态。 7.1.3 空白网页与网站的创建 要使用FrontPage2003制作网页，首先要明确制作网页的目的是什么。比如你想通过网站推销自

7、己的产品，或者你想制作一个单纯的个人网站，这就是你首先要明确的制作目的。其次，要组织好网页素材。好素材的关键是要层次分明、条理清晰。而后，就是要确定网页的外观和特色，我们可以把照片和文本有机的结合在一起，让访客感觉耳目一新，最后开始着手制作网页。 1新建网页 启动Frontpage2003后，在工作区右方的任务窗格中选择【新建网页或网站】任务下的【空白网页】既完成新网页的创建。 在空白网页中先用鼠标在编辑区内单击，然后输入文字“你好，欢迎使用Frontpage2003 ”。,任务一： FrontPage2003的基本操作,2新建网站 启动Frontpage2003后，在工作区右方的任务窗格中选

8、择【新建网站或网站】任务下的【由一个网页组成的网站】，打开网站模板对话框，如图7.7所示。在该对话框中选择只有一个网页的网站，默认的保存位置为我的文档中的My Web Sitesmysite，单击【确定】就完成新网站的创建。 网站是组织和管理网页文件夹的工具。上网浏览网页时，首先要输入URL地址，才能进入某网站，其中的URL地址就相当于一个站点地址。站点地址也可以看作一个房间的门牌号，要把制作好的网站放在站点中才能在网上发布。 网站模板对话框中Frontpage2003自带一些网站的模板，根据需要，用户可以选择不同的模板轻松地创建出各种用途的新站点。如果想自己创建一个有自己风格的站点，需在左边

9、的模板选择窗里选择“空白网站”，然后在右边的“指定新站点的位置（S）”的下拉列表框中，输入你想保存自己站点的位置。,任务一： FrontPage2003的基本操作,图7.7网站模板对话框,任务一： FrontPage2003的基本操作,当一个新网站建立完成之后，会自动建立两个新文件夹：一个是“images”文件夹，用来保存本网站中的图片文件；另一个是“_private”文件夹，是系统用来做缓存的文件夹，切记不要轻易删除，它们对制作网站都是有用的。如图7.8所示。,图7.8网站文件夹,任务一： FrontPage2003的基本操作,注意：站点里的所有文件夹和所有文件，都必须是以英文或数字命名,不

10、然就会出现链接错误而不能正常浏览。 通过切换【网站】选项卡或【new_page_1.htm】选项卡可以完成网站和网页之间的管理。 3关闭站点 选择【文件】菜单中的【关闭网站】命令即可。,任务一： FrontPage2003的基本操作,任务二：创建简单的图文混排网页,知识点：空白网页的创建，文本的输入，文本格式的设置，图片的插入，图片格式的设置。 7.2.1文字的输入与编辑 FrontPage2003中对于文字与图像的处理与Word类似，用过Word的人对于FrontPage中文字部分的操作很容易掌握。FrontPage在Word的基础上增加了很多制作网页的功能，让初学者也能做出复杂而且美观的网

11、页。 1、文本的输入，文本格式的设置操作同Word相类似，不再赘述。 2、设置动态文字 即设置动态字幕 选择【插入】菜单中的【web组件】选项，在弹出的对话框中双击【字幕】命令，打开字幕属性对话框，如图7.13所示，其中： “方向”区域用来选择文字的移动方向；,“速度”区域用来指定文字的移动速度，其中“延迟”列表框中的数值用来设置两次连续运行之间暂停的毫秒数；“数量”列表框中的数值用来表示文本每次移动距离的像素数； “表现方式”区域用来选择文字的运动方式； “重复”区域用来指定文字的动态效果是否循环显示。若选中“连续”复选框，则移动字幕连续不停循环，否则手工设置重复次数； “背景颜色”列表框用

12、来选择移动字幕的背景颜色。在该对话框中选择合适的参数，点击【确定】即可。,图7.13字体属性对话框,任务二：创建简单的图文混排网页,操作实例：创建（如图7.14所示）自左向右的滚动字幕效果，并将字幕的背景颜色设为黄色。 步骤1. 将插入点设置在要插入移动字母的位置上或者选择作为移动字幕的文本； 步骤2. 选择【插入】菜单中的【web组件】选项，在级联菜单中选择【字幕】命令； 步骤3. 如果已经选择了作为移动字幕的文本，此文本就会出现在“文本”框中，如果没有选择文本，可在“文本”框中输入作为移动字幕的文本； 步骤4. 如图7.13所示， 选择“方向”为“右”，“速度延迟”为“86”、数量为“6”

13、，“表现方式”为“滚动条”， “重复”选项为“连续”，“背景颜色”为“黄色”。单击【确定】即可。,任务二：创建简单的图文混排网页,3、设置交互式按钮 选择【插入】菜单中的【交互式按钮】选项，在弹出的交互式按钮对话框中选择合适的动态按钮即可，如图7.15所示，,图7.15交互式按钮对话框,4、 图像处理 （同Word类似）,任务二：创建简单的图文混排网页,任务三：使用表格布局网页,知识点：插入表格，插入嵌套表格，表格的合并与拆分。 7.3.1插入表格 点击【表格】菜单中的【插入】选项，在级联菜单中选择【表格】命令，打开“插入表格”对话框，如图7.19所示。在对话框中设置表格的行、列数及布局属性、

14、边框属性和背景属性，单击【确定】按钮即可。,图7.19插入表格对话框,7.3.2表格的编辑 把光标定位到表格的任一单元格内，选择【表格】菜单下的【表格属性】选项，在级联菜单中选择【表格】命令，弹出“表格属性”对话框，如图7.20所示。与“插入表格”对话框类似在“表格属性”对话框中可以对表格的外观进行设置：包括表格的行高和列宽、表格的对齐方式、边框属性和背景颜色等。,图7.20表格属性对话框,任务三：使用表格布局网页,7.3.3表格的其它操作 表格的其它属性的设置如：合并/拆分单元格、插入行与列、删除行与列等操作与Word中的操作基本相同，在此不再赘述。,任务三：使用表格布局网页,任务四：制作框

15、架网页,知识点：框架页的建立，在框架中插入文本以及图片。 7.4.1创建框架 框架是在同一浏览器窗口中显示多个相互隔离的HTML页的结构。使用框架是进行网页布局设计的一种重要手段。也就是把Web浏览器的视窗分成几个部分，每个部分都是独立的Web页面，这样便可同时显示多个页面。 为了创建具有框架的Web页面，可从工作区右边的“新建任务窗格”中选择“其他网站模板”命令，弹出“新建”对话框，选择“框架网页”选项卡。如图7.22所示。在“网页模板”对话框中可选择不同类型的框架模板，选定合适的模板后，按“确定”按钮即可创建一个具有框架的网页。单击各个框架中的【新建网页】按钮，完成空白框架网页的创建，如图

16、7.23所示。,图7.22 “网页模板”对话框,任务四：制作框架网页,注意：在创建有框架的Web页面时，应注意有些web浏览器不支持框架。虽然使用不能显示框架的浏览器的用户已很少，为确保这些用户仍然能够浏览到Web站点上的内容，可以填上要告诉那些低版本浏览器的使用者的话，例如请对方更换浏览器等。 在新建的框架的窗口中，单击“设置初始页”按钮将会弹出“创建超链接”对话框，可以链接到一个指定页面；单击“新建网页”按钮将创建一个新页面，然后在该页面内对该页进行编辑。在编辑页面时，若感觉页面被放在一个狭窄的框架中太拥挤，可选择“框架”菜单中的“在新窗口中打开网页”命令，这样便打开一个新的满屏窗口，可以自由地在页面中增加内容。,任务四：制作框架网页,7.4.2增加新框架 要给框架页面增加新框架，就是像拆分表格的单元格一样，把一个框架分为两个框架。 其操作如下： （1）按住Ctrl键，将鼠标放在框架边框上，当鼠标变为上下箭头时，可把边框拖到一个新位置，当松开鼠标按钮时，一个新的空白内容的框架就形成了。 （2）也可以通过命令来操作：首先单击要拆分的框架内部，选“框架”菜单中的“拆