项目七：网页制作软件FrontPage+2003的应用.ppt

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站点上的内容，可以填上要告诉那些低版本浏览器的使用者的话，例如请对方更换浏览器等。 在新建的框架的窗口中，单击“设置初始页”按钮将会弹出“创建超链接”对话框，可以链接到一个指定页面；单击“新建网页”按钮将创建一个新页面，然后在该页面内对该页进行编辑。在编辑页面时，若感觉页面被放在一个狭窄的框架中太拥挤，可选择“框架”菜单中的“在新窗口中打开网页”命令，这样便打开一个新的满屏窗口，可以

17、自由地在页面中增加内容。,任务四：制作框架网页,7.4.2增加新框架 要给框架页面增加新框架，就是像拆分表格的单元格一样，把一个框架分为两个框架。 其操作如下： （1）按住Ctrl键，将鼠标放在框架边框上，当鼠标变为上下箭头时，可把边框拖到一个新位置，当松开鼠标按钮时，一个新的空白内容的框架就形成了。 （2）也可以通过命令来操作：首先单击要拆分的框架内部，选“框架”菜单中的“拆分框架”命令，在弹出的“拆分框架”对话框中单击“拆分成列”或“拆分成行”单选按钮，单击“确定”按钮即可。 7.4.3删除框架 若框架页面看起来太乱，可删除某些框架。要删除一个框架，可先单击该框架选择它，再选择“框架”菜单

18、中的“删除框架”命令即可。,任务四：制作框架网页,7.4.4改变框架属性 在设置好框架的整体布局后，我们还可以对每一框架的具体属性进行设置，操作如下： （1）单击需设置属性的框架，选择“框架”菜单中的“框架属性”，则弹出“框架属性”对活框。如图7.24所示。 （2）在对话框的“名称”文本框中可输入框架名，这样便于识别不同的框架；在“选项”区域中，若选中“在例览器中可以调大小”复选框，则客户在浏览站点时，可重新定义框架尺寸，通过在“显示滚动条”下拉列表框中选择不同的描述项，可设置让滚动条是否出现。 （3）在“框架大小”区域中，可设置框架大小，可以定义一个绝对像素值或相对于浏览器窗口的百分比，若要

19、用浏览器来设置相对于该页面中框架的尺寸，可选“相对”；在“边距”区域中，可设置内容页面与框架边框分隔的像素数值。 （4）要改变开始页面，可以在“初始网页”文本框中输入一个新的页面名字或URL。,任务四：制作框架网页,（5）单击“框架网页”按钮，则弹出“网页属性”对话框。 （6）在该对话框的“框架”选项卡中，在“框架间距”文本框中，可输入以像素为单位的边框宽度；若要使框架边框消失，则不要选中“显示边框”复选框。 （7）单击“确定”按钮，关闭“网页属性”对话框，再单击“确定”按钮，关闭“框架属件”对话框，完成框架属性设置。,图7.24框架网页,任务四：制作框架网页,任务五：使用层布局网页,知识点：

20、层的操作，在层中插入文本与图片，使用层布局网页，层属性的调整。 7.5.1插入层 层的应用是FrontPage2003的新增功能，层的优点是：具有灵活性，无论是在移动位置还是改变大小的方面，层都具有非常好的可调性。况且层的背景为透明，因此就可以在网页的任意位置上添加新层，并在层中插入文字或图片。 选择【插入】菜单中的【层】选项，即可插入一个新层，如图7.26所示。单击层的标签“Layer1”通过周围的蓝色调整柄拖动控制层的大小。,图7.26插入层,选择【插入】菜单中的【层】选项，即可插入一个新层，如图7.26所示。单击层的标签“Layer1”通过周围的蓝色调整柄拖动控制层的大小。 一个页面中可

21、以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过双击 “Layer” 标签打开，在层面板中显示了一共有几个层。层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。比如层数为的层在层数为的层的上面。改变层数就可以改变层的重叠顺序。 这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性，通过单击层面板列表的左边，可以打开和关闭眼睛。眼睛打开和关闭表示层的显示和隐藏。如图7.27所示。,任务五：使用层布局网页,7.5.2应用层 在层中可以插入其他任何元素包括图片、文字、链接、表格等。将光标放置在层内，就可以直接输入文字，或者是选择【插入

22、】菜单中的【图片】选项，来插入想要的图片等。 7.5.3移动层 用鼠标拖动层左上角的标签“Layer1”，就可以将层移动到任意位置。,图7.27层面板,任务五：使用层布局网页,任务六：创建一个调查问卷,知识点：表格的插入，表单中各个控件的插入及属性的设置。 7.6.1表单的应用 表单，是用来采集浏览信息的一段网页，它包括反馈信息的一些表单域，是获得用户反馈信息的重要工具。一般地，用户不只是简单地要求网页具有宣传功能，还要求它能够反馈浏览者的信息。FrontPage中提供的表单就是实现这种信息反馈的较好工具之一。 表单中一般会包含一个【提交】按钮和一个【重置】按钮。站点访问者在填好表单后单击【提

23、交】按钮，之前所输入的数据就会被提交到您所设置的表单处理程序中（在默认情况下，表单结果会被保存为文本文件）。站点访问者也可以单击【重置】按钮，将之前所输入的所有文本内容删除并清除做过的所有选择，恢复到表单的默认状态。,7.6.2创建表单 首先将光标定位到要插入表单的位置，然后在【插入】菜单中选取【表单】命令，在其级联菜单中选取你想插入的表单样式，如图7.29所示。共有以下9种样式：【表单】、【单行文本框】、【滚动文本框】、【复选框】、【单选按钮】、【下拉菜单】、【按钮】、【图片】和【标签】。 如图7.30、7.31显示的是文本框样式的表单和按钮样式的表单。,图7.29 插入表单,图7.30插入

24、多行文本框,图7.31插入按钮,任务六：创建一个调查问卷,7.6.3表单属性的修改 各种样式的表单根据其用途不同可以对它们的属性进行设置，例如：对文本框的名称和宽度进行设置，可以在如图7.30的文本框上单击右键选择【表单域属性】来进行修改。其它各种样式的表单属性的修改与此类似。 7.6.4表单的提交 用户设置表单的目的是获得并保存浏览者提供的信息。浏览者提交表单时把它交给服务器的表单处理器进行处理，然后表单处理器将表单放入适当的邮箱或文件中，用户可以从中获取信息。 在网页的空白处单击鼠标右键，在弹出的菜单中单击【表单属性】命令,出现“表单属性”对话框，如图7.32所示 用户可以在“发送到”单选

25、按钮下的“文件名称”和“电子邮件地址”选取框中选择要发送的文件和电子邮件地址。,任务六：创建一个调查问卷,图7.32表单属性对话框,任务六：创建一个调查问卷,任务七：建立超级链接,知识点：链接的创建，文本链接的创建。 网页的强大之处就在它的超链接，在浏览器中通过点击网页中的超链接，可以很方便地打开另外一个网页，或者是图片、文件、邮件地址。一个网页中的链接分成两个部分：“链接的载体”和“链接的目标地址”。 “链接的载体”就是网页中的文字和图片，凡是包含链接的文字和图片都称为“超链接”。“链接的目标地址”就是超链接指向的网页,7.7.1设置文字的超链接 打开网页文件，拖动鼠标选择要超链接的文字，单

26、击常用工具栏中的【插入超链接】按钮，或者是单击鼠标右键，在弹出的菜单中选择【超链接】命令，弹出创建超链接对话框，然后在列表中选择要超链接的网页文件，单击【确定】按钮即可，如图7.38所示。 注意：在网页编辑窗口中，可以按住【Ctrl】键，单击超链接就可以打开超链接指向的网页。,图7.38创建超链接对话框,任务七：建立超级链接,7.7.2.设置图片的超链接 选中要建立链接的图片，单击常用工具栏中的【插入超链接】按钮，或者是鼠标右键单击要设置超链接的图片，在右键菜单中选择【超链接】命令，然后设置要链接的文件，也可以链接图片、音乐、EMail地址等。 7.7.3管理超链接 一个网站的超链接就像一张网

27、一样，网住了网站的所有文件。在【视图】菜单中点击【超链接】命令，打开超链接对话框，可以看到各个文件相互间的链接情况，文件中链接了哪些文件，又被哪些文件链接。也可以在超链接的示意窗口中直接展开某个文件的上、下超链接。,任务七：建立超级链接,7.7.4.设置同一页面中的书签 选中文字或者图片，选择【插入】菜单中的【书签】命令，打开“书签”对话框，输入书签名，例如“书签1”，点击【确定】按钮，完成书签的设置；然后在作为书签标记的地方插入超链接，在打开的“超链接”对话框中，选择欲指向的书签名即可，如图7.39所示。,图7.39创建超链接对话框,任务七：建立超级链接,7.7.5在图片上添加热区 选中要添

28、加热区的图片，在图片工具栏中选择【插入热区】按钮，可以插入“矩形热区”、“圆形热区”或“多边形热区”。 注意：插入热区的方法和插入超链接类似，两者之间的区别是：热区可以在同一图片中完成多个链接，如图7.40插入的就是圆形热区。,图7.40圆形热点区域,任务七：建立超级链接,任务八： HMTL语言,任务描述：该任务主要是学习HTML语言的书写规则，以及HTML语言的语法规则和常用标签。 知识点： HTML语言的概念 HTML语言的语法规则 HTML语言的常用标签 无论用哪种工具制作网页，最终生成的网页文件均是HTML文档；而且制作网页也可以直接使用HTML语言书写脚本。 HTML（Hyperte

29、xt Markup Language）语言就是超文本标记语言，是网页制作的基础，也是最基本的工具。 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。一个HTML文件的后缀名是.htm或者是.html。 用文本编辑器就可以编写HTML文件。,7.8.1 HTML语言概述 HTML脚本都是以标记开头，标记结尾。 在标记之间是HTML的脚本内容，一般情况下它分为两部分：“头部”和“主体”。 头部是由标记组成的，其中包含了该HTML脚本的标题和说明信息（如编码方式、关键字、编辑软件、作者信息等）。 主体部分是由作为起始标记，作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。,任务八： HMTL语言,做一个简单的例子打开一个文本文档，输入如下代码，然后将这个文件存成first.html。 Title of page This is my first homepage. This text is bold 可以看到这些文本在网页中的效果。,任务八： HMTL语言,7.8.2 HTML脚本中的标记 1标记有三种语法格式 （1）内容 （2）内容 （3） 不同的标记采用不同的语法格式，其中的参数要加引号。 2常用的标记 （1） 使用的格式是：