《第1章信息与计算机.ppt》由会员分享，可在线阅读，更多相关《第1章信息与计算机.ppt（52页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第8章网页制作软件FrontPage2003的使用本章要点1.站点的创建与发布2.网页的基本编辑3.表格的操作和利用表格布局4.文本的设置5.网页元素的插入6.超链接的基本操作7.表单的基本概念和操作8.框架式网页的制作9.几种特殊动态效果的制作目录8.1引言8.2预备知识和技能8.3案例学生个人就职网站8.3.1案例综述8.3.2站点的创建8.3.3网页的基本编辑8.3.4表格8.3.5文本设置8.3.6网页元素的插入8.3.7超链接8.3.8表单8.3.9框架式网页8.3.10动态效果8.4讨论与提高8.1引言FrontPage2003的特点：1.更容易建立专业、精确的网站。2.Front
2、Page2003不仅可以用来制作网页，用户可以使用它来建设和维护整个网站，更简单的检测、更新你的网站。工作组用户可以通过FrontPage2003使分布在世界各地的子公司一起工作。3.FrontPage2003与其他Office组件的整合性更加提高，打开和运行的速度比FrontPage2000更快。一、一、FrontPage2003FrontPage2003概述概述 FrontPage2003是Office2003组件之一，运行与启动Office其他软件相同。启动成功后，出现的初始画面可能因机器使用情况的不同而不同，一般的界面如图8-1所示，菜单部分与Office中的其他软件相似，最大区别是工
3、作区的左端有一个视图栏，包含：网页、文件夹、报表、导航、超链接、任务。8.2预备知识和技能8.2.1 预备知识预备知识 图8-1 FrontPage2003启动后显示页面 二、视图栏二、视图栏 1网网页页。编编辑辑网网页页需需在在“网网页页”视视图图中中进进行行。在在“网网页页”视视图图中中，有有“设设计计”、“拆拆分分”、“代码代码”和和“预览预览”4张选项卡。张选项卡。2远远程程网网站站视视图图。同同步步此此网网站站和和远远程程网网站站之之间间的的文件。文件。3文件夹视图。用于管理站点中的文件和文件夹。文件夹视图。用于管理站点中的文件和文件夹。4报表视图。分析网站并管理其内容。报表视图。分
4、析网站并管理其内容。5导导航航视视图图。显显示示站站点点的的导导航航结结构构，用用于于对对站站点点结构的管理。结构的管理。6超链接视图。用于显示站点中每一页的超链接。超链接视图。用于显示站点中每一页的超链接。7任务视图。用于创建和管理站点中的任务。任务视图。用于创建和管理站点中的任务。8.2.2 技能技能 通过本章的学习，应具有以下技能：具有站点及HTML文档的创建和保存的技能 具有文本操作的技能 具有图像操作的技能 具有表格操作的技能 具有表单操作的技能 具有框架操作的技能 具有超链接操作的技能 具有动态效果制作的技能 具有综合运用的技能8.3 案例案例学生个人就职网站学生个人就职网站 本章
5、案例“个人就业网站”，该网站的主页上有5个板块，分别是：学习经历、求职简历、求职须知、课程成绩、作品图片。学生个人就职网站结构图如图8-2所示。图8-2 学生个人就职网站结构图8.3.1案例综述案例综述 用FrontPage2003开发本案例，用到的知识点主要有：创建站点、文本的格式化，网页属性的设置(网页背景颜色、背景图片、网页标题、背景音乐)，插入层，水平线与图像的插入，表格的制作及用表格布局，超链接(文本超链接、图像超链接、热点超链接、书签超链接)，表单的制作，框架网页制作，几种动态效果(字幕、交互式按钮、动态DTML、站点计数器)，插入Flash影片等。如图8-3是用这些知识点制作的个
6、人就职网站主页。图8-3 个人就职网站主页8.3.2 站点的站点的创建创建 所谓站点，就是多个相关网页通过各种链接关联起来的集合。在使用FrontPage 2003设计网页之前，应建立一个本地站点，用来管理创建的网页。用户可以选择以下三种方式创建一个新的站点：（1）站点向导。包括“导入网站向导”、“公司展示向导”、“数据库界面向导”、“讨论网站向导”。（2）站点模板。包括“个人网站”、“客户支持网站”、“项目网站”。（3）自定义站点。包括“只有一个网页的站点”、“空白网站”、“SharePoint工作组网站”。使用“只有一个网页的站点”创建学生个人就职网站。在FrontPage2003的主窗口
7、下，单击菜单栏上的“文件”，在弹出的下拉菜单中选中“新建”，在窗口的右边出现“新建”面板，在新建项中选择“其他网站模板”。在“站点”列表框中，选中“只有一个网页的网站”图标，并在右边“指定新网站的位置”框中，输入新站点的名称。如图8-4“网站模板”对话框。图8-4“网站模板”对话框 8.3.3网页的基本编辑网页的基本编辑 一、新建一个网页一、新建一个网页 在FrontPage2003的主窗口中，单击“视图”栏上的“网页”视图，使当前处于网页视图模式下。单击菜单栏上的“文件”，在弹出的下拉菜单中选中“新建”，在窗口的右边出现“新建”面板，在新建网页项中选择“其他网页模板”。打开如图8-4所示的“
8、网站模板”对话框。单击“常规”选项卡，在列表框中显示了FrontPage2003提供的创建网页的11种模板，包括有普通网页、表单网页向导、常见问题、目录、确认表单等。使用各类模板可以创建不同的网页。二、保存网页二、保存网页 当前网页是新建的网页并且尚未保存，则单击“常用”工具栏中的“保存”按钮，在弹出的“另存为”对话框中找到并双击要保存网页的文件夹，然后在“文件名”下拉列表框中输入网页的文件名“index.htm”，再单击“保存”按钮即可。如果当前网页是从当前网站打开的，则单击“常用”工具栏中的“保存”按钮即可。如果当前网页是从当前网站之外的位置打开的，则单击“文件”|“另存为”命令，在弹出的
9、“另存为”对话框中找到并双击要保存网页的文件夹，并在“文件名”下拉列表框中输入网页的文件名，最后单击“保存”按钮即可。三、网页属性设三、网页属性设置置 网页的属性包括网页的背景颜色、图片、网页的标题和网页的页边距等。选择菜单“文件”“属性”命令或在页面空白处右键单击选择“页面属性”命令则可以在弹出的对话框中进行设置，如图8-5所示，或者在没有选中任何对象的情形下，选菜单“格式”“背景”，直接进行背景颜色图片的设置。图8-5网页属性对话框8.3.4表格表格 一、插入表格一、插入表格在“表格”菜单“插入”级联式菜单中选择“表格”命令，出现如图8-6所示。单击“确定”就可以网页中插入表格。图8-6插
10、入表格属性对话框 二、设置表格二、设置表格属性属性 表格属性设置若想设置表格的边框粗细、颜色以及表格的背景可指向表格，用鼠标右键单击表格，在弹出快捷菜单中选择“表格属性”命令，打开“表格属性”对话框如图8-6所示。大小：设置表格的行列数目。布局：设置表格的对齐方式、边框粗细（无边框为0）、单元格边距（表格内单元边框线之间的距离）、单元格间距（单元格内容与边框线之间的距离）。指定宽度：指定宽度前，则在复选框前打上“”，宽度单位有两种分别为像素和百分比，百分比是相对浏览器而言，像素则为绝对值。三、编辑表三、编辑表格格 1.选定表格对象 选定单元格，执行“表格”“选定”“单元格”命令；选定行、列或整
11、个表格，在“表格”“选定”中选择相应的命令即可。2.插入、删除表格对象 插入行或列，可以使用“表格”“插入”“行或列”命令，也可以用鼠标右击表格后在快捷菜单中选择相应的命令。如果要删除行或列，只要选定行或列后单击“表格”“删除单元格”命令即可删除。3.合并、拆分单元格 合并、拆分单元格的操作可以通过“表格”菜单的“合并单元格”或“拆分单元格”命令来完成。也可以通过右击鼠标后在弹出的快捷菜单中选择相应的命令进行。4.设置表格或单元格属性 将打开“表格属性”或“单元格属性”对话框，或右击鼠标弹出快捷菜单。8.3.5文本设文本设置置一、输入文本一、输入文本可选择两种方式：第一种是和在Word一样，可
12、以直接在FrontPage2003的普通视图中输入文字，文字的编辑修改和Word基本一样；第二种是可以通过复制和粘贴从其他地方复制文字。二、设置文字及段落格式二、设置文字及段落格式文字格式，包括“字体”、“字型”、“大小”、“颜色”、“效果”以及字符间距的设置，以直接在格式工具栏中进行，也可以选择菜单“格式”“字体”命令，也可以选择字符后右键单击选择“字体”命令。弹出如图8-7所示对话框。图8-7文字格式对话框 8.3.6网页元素的网页元素的插入插入一、插入换行符一、插入换行符网页中插入换行符可将网页中的一段网页内容断开。FrontPage中的换行分成“隔行换行“（两行之间有空行）和“紧凑换行
13、”（两行间没有空行）两种，这两种换行符的插入方法分别是：（1）插入“隔行换行”。直接在插入点按Enter键。（2）插入“紧凑换行”。先定位插入点，选择“插入”菜单“换行符”命令，或按Shift+Enter组合键。二、插入水平线方法：光标定位于表格第二行，单击“插入”菜单“水平线”命令，就可以在第二行中插入水平线。单击刚插入的水平线，右键单击在快捷菜单中选择“水平线属性”。如图8-8水平线属性对话框。图8-8水平线属性对话框 三、插入图片和背景图片1插入图片插入图片将插入点定位欲插入图片位置，选择“插入”菜单上的“图片”命令。从“图片”子菜单中选择“来自文件”命令，在对话框寻找需要的图片文件，单
14、击“确定”按钮插入图片。在图片上右键单击，在快捷菜单中选择“图片属性”，在图片属性对话框中可以设置图片属性。如图8-9插入图片对话框。图8-9 插入图片对话框2设置背景背景可由“背景图片”和“背景颜色”构成，其设置在网页属性、表格属性或单元格属性中设置：（1）背影图片的设置：在“背景”选项卡中，选中“背景图片”复选框，然后在与之相关的文本框中指定图片文件的位置。单击“浏览”按钮可以快速定位图像文件。（2）背景颜色的设置：在“背景”框中可以设置网页的背景颜色。如果同时使用背景颜色和背景图片，则背景图片将覆盖背景颜色。（3）文字和超链接的颜色：在“文本”、“超链接”等框架中可以设置普通文本、超链接
15、文本的颜色。四、层操作四、层操作1插入层插入层方法是：“插入”菜单“层”命令。然后鼠标在1行2列上拖动即可。2选择层选择层可以单击层的选择手柄、单击层边界等方法，选择多层时候可以使用shift键来配合使用。3调整层大小调整层大小选中层，然后在属性面板中输入宽度和高度值。或直接用鼠标的在层的八个控点上拖动调整大小。4移动层移动层无论是移动一个或多个层，先选中层，用鼠标拖住最后一个选中层的手柄随意移动。五、插入插件五、插入插件操作方法：移动鼠标在层中单击，选择“插入”菜单上的“Web组件”，在“插入Web组件”对话框中“组件类型”选择“高级控件”。选择“一个控件”中选择“插件”，弹出“插件属性”对
16、话框。六、插入背景音乐六、插入背景音乐具体操作步骤为：在网页视图模式下，单击“文件”菜单“属性”命令或“格式”菜单“背景”命令或右键单击网页快捷菜单中选择“页面属性命令”。选择“常规”选项卡，在“背景音乐”栏下“位置”框中输入播放的声音文件的位置，若选中“不限次数”复选框，表示在浏览器中该音频文件将持续地播放。8.3.7超链超链接接超链接概念：超链接是指站点内不同网页之间、站点与站点之间的一种链接关系，它不仅使站点内的每一个网页有机地联系在一起上，而且使不同的站点之间建立了联系。使用超链接，浏览者可以从一个网页转到另一个网页，从一个站点转到其他的站点。除了指向网页和和站点，超链接还可以指向图片
17、、电子邮件地址、多媒体文件，甚至可以指向一个程序。一、为文本创建超链接1 1链接到网页链接到网页首先选定要建立超链接的文本，单击“插入”“超链接”命令，或右键单击选定的文本在快捷菜单中选择“超链接”，打开如图8-10所示的“插入超链接”对话框。根据超链接的目标，用户可以从列表框中选定某个网页文件，也可以直接在“地址”文本框（URL）中输入要链接的目标地址，还可以单击图标，从弹出的“选择文件”对话框中选定链接的目标文件。选定的目标文件地址均会出现在地址文本框（URL）中。图8-10插入超链接对话框 2链接到其他网站的网页 方法如下：（1）首先选定要建立超链接的文本，单击“插入”“超链接”命令，或
18、右键单击选定的文本在快捷菜单中选择“超链接”，打开如图8-10所示的“插入超链接”对话框。（2）在“编辑超链接”对话框中的地址文本框中输入所需要链接的其他网站的网页如“http:/ 方法如下：（1）选中要电子邮件链接的文本，单击工具栏中的“插入超链接”按钮，打开“插入超链接”对话框；（2）单击“电子邮件地址”选项，对话框变成图8-10所示；（3）在“要显示的文字”文本框中输入要显示的文字，在“电子邮件地址”文本框中输入邮件地址，在“主题”文本框中输入主题；（4）单击“确定”按钮。二、为图像创建超链接二、为图像创建超链接1 1图像的默认超链接图像的默认超链接先选中图片，单击鼠标右键，在弹出的快捷
19、菜单中选择“超链接”菜单项，会弹出一个“编辑超链接”对话框或者单击“插入”菜单上的“超链接”。（1）如果要链接的是当前站点中的文件或计算机中某个目录下的文件，则从列表框中选择网页文件，查找该文件，单击“确定”按钮。（2）如果要链接的网页或文件夹来自Web，在“插入超链接”对话框中的地址文本框中输入所需要链接的网站,单击“确定”按钮。（3）如果要链接的是电子邮件，打开“插入超链接”对话框，单击左边的电子邮件地址，在“电子邮件地址”文本框中输入邮件地址，单击“确定”按钮。2图像的热点链接 热点是图像上具有超链接的区域，一幅图片上可以包含若干个热点，单击图片中的这些热点可以跳转到不同的目标。热点形状
20、可以是矩形、圆形或多边形，热点位置可自行确定。设置热点的方法如下：（1）选定图片后，在编辑区的底部会自动弹出如图8-11所示的图片工具栏。（2）单击图片工具栏的热点形状按钮（例如长方形按钮），这时鼠标变成铅笔形状，将光标定位到需创建热点区域的左上角或右下角，然后拖动鼠标形成一个热点区域，松开鼠标后会自动弹出“创建超链接”对话框。（3）在“创建超链接”对话框中设定链接目标。图8-11图片工具栏三、书签的设置和三、书签的设置和使用使用 利用书签实现网页内部跳转。（1）选定要插入书签的位置。（2）单击“插入”“书签”命令，弹出“书签”对话框。在对话框内输入书签名后单击“确定”按钮，即可创建一个书签。
21、（3）建立书签后，就可以创建链接到该书签的超链接。创建的方法和建立超链接的方法相同，只是选择书签作为超链接的目标。8.3.8表单表单 表单是用来收集浏览者的用户名、密码、E-mail地址、个人爱好和联系地址等用户信息的输入区域集合。图8-12公司概况表单。FrontPage2003提供了文本框、文本区、单选按钮、复选框、下拉框、提交按钮和重置按钮等丰富的表单域。图8-12公司概况表单 一、插入表单单击“插入”“表单”“表单”命令，在网页上插入一个表单。在表单内输入所需的文本，例如“姓名”、“性别”等，然后在对应的位置插入表单对象。图8-13表单域类型 二、表单域的类型表单域的类型1 1文本框文
22、本框 2下拉菜单下拉菜单 3复选框复选框 4选项按钮选项按钮 5文本区文本区6按钮按钮8.3.9框架式网框架式网页页 框架网页是种特殊的网页，它可将浏览器窗口分成不同的区域，每个区域都可以显示不同的网页。1创建框架单击菜单栏上的“文件”，在弹出的下拉菜单中选中“新建”，在窗口的右边出现“新建”面板，在新建项中选择“其他网站模板”。然后在弹出的“网页模板”对话框中选择“框架网页”选项卡，如图8-14所示。2设置框架属性鼠标右击某个框架后，在弹出的快捷菜单中可以设置“框架属性”。图8-14新建框架网页对话框 二、二、显示或隐藏框架显示或隐藏框架线线 在创建网页时，有时为了达到特殊的显示效果，可以将
23、框架线去掉。选择“文件”菜单上“属性”命令，打开“网页属性”对话框，然后选择“框架”选项卡。用户还可以在设置每个框架的属性时，单击“框架属性”对话框中的“框架网页”按钮，显示边框前“”去掉就可以隐藏框架线。三、框架网页的保三、框架网页的保存存在多框架网页中，每个框架都将单独形成一个文件，整个网页也需要一个文件。在图8-15中建立的框架网页含有3个框架，将产生4个文件。保存时，单击“文件”“保存”命令，会出现4次“另存为”对话框，“另存为”对话框预览区将指示所保存的框架对象。保存一个框架的网页后，FrontPage 2003会对每一个尚未保存的新网页或框架网页重复进行此操作，直到全部网页和框架网
24、页都保存为止。图8-15保存框架网页对话框 8.3.10动态效动态效果果 二、特殊效果FrontPage2003的组件功能可以为网页加入动态效果，设计出生动活泼的Web网页。1字幕2站点计数器3交互式按钮4设置网页过渡方式5.设置动态HTML效果8.3.11站点的发布站点的发布 一、测试网页网页制作完成后还需要对网页进行测试，以检查每个网页的功能是否实现，超链接是否正确等。1拼写检查拼写检查是网页测试时最基本的一项检查，可以使用FrontPage2000自带的拼写检查功能，它可以检查并修改整个站点所有页面的英文拼写及语法错误。2检查网站的超链接要检查网站中每一处超链接是否正确，其步骤如下：（1
25、）启动FrontPage2000，打开站点，单击视图栏的“超链接”按钮，切换到超链接视图。双击其主页图标打开主页。（2）单击工具栏中的“在浏览器中预览”按钮，并把浏览器窗口最大化。依次点击网页中的超链接，检查它们的指向是否正确。（3）使用“工具”栏中的“重新计算超链接”选项，将所有超链接状态视图变成激活状态，能同时进行超链接验证。若发现某个超链接出现问题，应做好记录并到相应网页中修改。二、发布站点网页制作完成并经过测试后，就可以把站点网页发布到Internet的某个Web服务器上，使Internet上的每个用户都能访问到该站点。1巧用层功能设计出美观的网页2插入交互式按钮使页面丰富多彩3使用行为使网页更精彩4快速检查网页中的错误5布局表格和单元格使页面布局更方便8.4讨论与提高【本章小结】通过本章学习，应理解和掌握：1.站点的创建与发布。2.网页的基本编辑。3.表格的操作和利用表格布局。4.文本的设置。5.网页元素的插入。6.超链接的基本操作。7.表单的基本概念和操作。8.框架式网页的制作。9.几种特殊动态效果的制作。