《计算机应用基础》PPT课件第6章.ppt

《《计算机应用基础》PPT课件第6章.ppt》由会员分享，可在线阅读，更多相关《《计算机应用基础》PPT课件第6章.ppt（63页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、计算机应用基础计算机应用基础PPT课件第课件第6章章 创建于1975年的微软公司是个人和商用计算机软件行业的领袖。微软公司为用户提供范围广泛的产品和服务，并通过优秀的软件使人们能够不受时间、地点的限制进行沟通。其产品FrontPage 2003简单易用，采用图形化的界面，大大提高了网页制作人员的工作效率，是网页制作领域使用较广泛的一个工具软件。 FrontPage是20世纪90年代后期微软公司收购的一家小软件公司的产品，并非微软公司原创，微软将其收购后进行了全面的版本更新，使其融入了微软一贯的易学易用、功能强大、界面简洁等人性化设计，直至现在被全球广泛使用。 FrontPage 2003可以用

2、于网站的创建和管理，其主要功能如下。 l1.设计网站l2.开发数据组织的网站 l3.发布网站 l4.维护网站 6.2 网页的基本操作网页的基本操作 网站是万维网上的若干相关网页以及与这些网页相关的图像、声音和视频等的集合。网页是万维网上的基本文档，用HTML书写。网页是网站的一部分，也可以独立存在。 计算机应用基础为了创建专业、设计完善的网页，FrontPage 2003提供了多种网页模板，使用户能快速地创建具有各种布局和功能的网页。例如，可以使用FrontPage 2003的模板创建用户注册网页、留言簿、反馈表单以及带有搜索表单的网页等。也可以使用主题来创建设计一致的网页。主题包含了采用一种

3、配色方案的统一设计元素，如字体、图形、背景、导航栏、水平线及其他网页元素。 如果想自己设计并布置网页，可以从一个空白的网页开始，然后进行以下一项或多项操作：（1）使用框架、表格、布局或绝对定位来精确定位网页上的文本和图形。（2）添加文本、图形、网页横幅、表格、表单、超链接等网页元素。（3）添加Flash内容、视频、声音或GIF动画等动态。（4）添加可以变化的内容或功能，如字幕（字幕组件：网页上显示水平滚动文本消息的区域）、计数器（计数器组件：FrontPage中的组件，跟踪万维网网站的访问者的数目）、时间戳、网页过渡、交互式按钮以及使用动态HTML的表现方式等。 注意：动态HTML即DHTML

4、，它是超文本标记语言的扩展，添加多媒体、数据库访问以及对象模型，程序可使用它们更改页面元素（对象）的样式和属性并将现有元素（对象）替换为新的元素（对象）。 （5）应用样式或使用样式表来设置文本格式。（6）用颜色或图片来设置网页背景。（7）通过使用动态网页模板（它可以包括具有网页设置、格式设置和网页元素的网页）来创建自己的网页模板。 FrontPage 2003的各种编辑方法、段落和字体格式的设置等与Word 2003非常相似，操作非常简单，下面开始学习安装并使用FrontPage 2003制作网页。 6.2.1 获取途径和安装方法获取途径和安装方法 FrontPage 2003是微软公司Off

5、ice 2003的标准组件，将Office 2003安装光盘放入光驱，选择典型安装或者在自定义安装中选定组件“Microsoft FrontPage For Windows”即可进行安装，安装成功后，打开“开始”菜单，选择“程序”“Microsoft Office”“Microsoft Office Front Page 2003”命令，即可启动FrontPage 2003。因为网页编辑软件对系统性能的要求比较高，如CPU运算速度、内存大小等，所以使用性能较高的计算机进行网页制作，可以提高软件的运行速度。 6.2.2 网页的新建与保存网页的新建与保存 创建一个新网页的方法是：选择“文件”|“新

6、建”命令，在编辑区右侧显示“新建”任务窗格。单击“由一个网页组成的网站”超链接，弹出“网站模板”对话框，如下图所示。 FrontPage 2003提供了多种供选择的模板，用户可以根据需要选择一个适合自己的模板。在“网站模板”对话框的“常规”选项卡中，选择相应的模板，在“指定新网站的位置”下拉列表框中选择本地网站的地址，单击“确定”按钮，此时可在编辑区出现的空白区编辑网页。 保存网页的方法是：选择“文件”“保存”命令或者在常用工具栏中单击“保存”按钮，弹出“另存为”对话框，如下图所示，在“保存位置”下拉列表框中选择保存路径，在“文件名”文本框中输入文件名，单击“保存”按钮即可。 对编辑过的网页文

7、件，如果要存放在原处，选择“文件”|“保存”命令即可；如果要以另外的文件名保存或保存在另一位置，则需要选择“文件”|“另存为”命令，在弹出的“另存为”对话框中输入新的文件名及文件保存位置、保存类型，最后单击“保存”按钮。 注意：一般不把网页和网页中要用到的文件，如图像、声音、及与网页同类型的、网页可能会链接到的文件以中文名保存，而是采用英文或英文和数字组合文件名。这是因为多数服务器不支持中文文件名。 6.2.3 查看、修改源代码查看、修改源代码 FrontPage 2003带有直接显示网页HTML源代码的功能。这使得用户无须精通HTML编码，也能使用FrontPage方便地编辑代码。在网页编辑

8、状态，单击编辑区域左下方的“代码”按钮可直接查看HTML源代码，如下图所示。 在代码窗口中可以直接对HTML源代码进行编辑，而且可以看到不同的源代码用不同的颜色显示，HTML的标记或属性名用蓝色显示，各种属性值和正文文字用黑色显示。 6.2.4 预览网页预览网页 编辑完一个网页后，执行下列操作之一可以预览网页的实际显示效果。l1.在FrontPage 2003中预览网页 单击主编辑区左下方的“预览”按钮，弹出网页预览窗口，可对编辑的网页进行预览。在FrontPage 2003中进行预览，看到的是网页发布后的大致情况，不一定是网页在浏览器中打开时的真实情形。 l2.在浏览器中预览网页 在Fron

9、tPage 2003中可直接打开浏览器预览所编辑的网页，具体操作步骤如下：（1）选择“文件”“在浏览器中预览”命令，如下图所示。（2）设置浏览器窗口大小等参数即可查看网页在浏览器中的显示效果。 预览网页可以让网页制作者即时了解网页在浏览器中的效果，而不必启动浏览器来浏览网页，从而提高了网页制作的效率；在预览状态中，更有利于看到网页中的不合理结构、超链接设置错误等问题，方便用户改正。 6.3 表格、表单与框架表格、表单与框架 表格、表单及框架是制作网页时的常用元素，它们在网页中的作用不可忽视。表格由单元格构成的行、列组成，而且根据需要单元格中可以插入文本和图形。表单与网站之间的关系类似于表格与纸

10、张之间的关系，不同之处在于用户联机创建表单，并使用它与网站访问者交互以及从访问者那里收集信息。框架与表格完全不同,框架中的内容是另外一个网页,也可以理解为一个网页嵌套在另一个网页里。下面对这三种元素的应用进行详细介绍。 6.3.1 插入表格插入表格 表格在网页中的应用不可或缺，常用于对网页中其他元素进行精确定位，将复杂的元素有条理地分布到网页各个位置，另外在输入文字时，通过对表格列宽等进行限定，可以方便文字编辑。表格还可以用来设置网页布局，使凌乱的网页井井有条，方便浏览。 用FrontPage打开一个专业网站，如下图所示，可以看到很多由纵横交错的虚线组成的表格，这就是在网页中插入的表格。 l1

11、.建立表格 选择“表格”“插入”“表格”命令，打开“插入表格”对话框，如图66所示。在“插入表格”对话框里列出了表格的各个选项，如大小（最多可以插入一个25行、25列的表格）、布局、边框、背景等。l2.设置表格属性 表格属性设置到表格的美观，特别是用表格来组织网页时。 表格属性的设置方法如下：（1）打开一个含有表格的网页，选择“表格”“表格属性”“表格”命令，弹出如下图左所示的对话框。（2）属性设置。l大小：设置表格的行数和列数。l布局：设置对齐方式和单元格间距等。l边框：设置边框的大小和颜色。l背景：设置背景色和背景图像。 表格的修改和单元格设置：如果已经建立的表格单元格不够用或者多余时，可

12、以通过插入行、插入列、删除单元格、拆分单元格等操作来实现，如下图右所示。 6.3.2 插入表单插入表单 在浏览网页时经常可以看到网页中含有表单，例如，用户在某网站注册会员时，网站要求申请人填写的资料表，就是表单的一种应用。下面具体介绍表单的创建方法，步骤如下：（1）选择“插入”“表单”“表单”命令，即可插入一个空白的表单，如下图所示。 （2）根据需要可以在空白表单中添加其他元素。将光标放置于表单中，选择“插入”“表单”命令，即可将选择的表单元素添加到空白表单中，如下图所示。 6.3.3 创建框架网页创建框架网页 框架网页的每个框架中都可以显示不同的网页，而其本身并不包含可见内容，它只是一个容器

13、，用于指定要在框架中显示的其他网页及其显示方式。创建框架网页的步骤如下：（1）选择“文件”|“新建”命令，打开“新建”任务窗格，如下左图所示。单击“其他网页模板”超链接，打开“网页模板”对话框。 （2）在“网页模板”对话框中打开“框架网页”选项卡，如下右图所示。（3）选择一个模板后，可以在对话框右侧“预览”区域预览其布局。选择完成后单击“确定”按钮。 设置要显示在每个框架中的初始网页的操作步骤如下：（1）单击要设置初始网页的框架。（2）执行下列操作之一。选择一个已创建的网页。在框架中，单击“设置初始网页”，然后选择要显示的网页。创建新网页，并将其设置为该框架中显示的初始网页。在框架中，单击“新

14、建网页”，FrontPage 2003会在该框架中创建一个新网页，该新网页会自动设置为初始网页。 6.4 图像和超链接图像和超链接 图像和超链接是网页不可缺少的元素，合理的运用可以使网页更加完善，有利于在有限的空间表达更多的内容。 6.4.1 插入图像插入图像 为了更好地表达网页的内容，在制作网页时通常会在网页中插入图像，使网页变得美观。插入图片时必须从网站或网页的全局考虑，使得插入的图片与网页背景以及文本巧妙地融合。但在插入图像时要注意的是：过多的图像会使浏览速度受到影响。 网页图像的常用格式包括以下几种。（1）GIF格式：支持256色，可以做成逐帧动画，也可以设置透明背景，一般用于网页中的

15、小图标。（2）JPG格式：支持百万级真彩，一般用于网页中的照片。（3）PNG格式：具有GIF、JPG格式的所有优点，是网页图片发展的方向，但图片文件体积稍大。 下面介绍插入图像的方法，具体操作方法是：将光标移动到要插入图片的位置，然后选择“插入”“图片”“来自文件”命令，如下图所示，或者直接单击工具栏中的“插入图片”按钮。 6.4.2 建立、编辑超链接建立、编辑超链接 超链接可以说是网页中最重要的元素之一，通过链接可以访问其他的网站和网页。在网页中添加超链接的具体操作步骤如下：（1）选中要添加超链接的图标或文本，选择“插入”“超链接”命令，打开“插入超链接”对话框，如下图所示。（2）在“插入超

16、链接”对话框中设置超链接的地址，可以是列表框中所列的同一网站的网页，也可以是其他网站地址，还可以是网页中已存在的书签等。（3）设置完成后，单击“确定”按钮，完成超链接的建立。 如果在悬停按钮中加上超链接，悬停按钮将会具有类似于普通按钮的作用单击后，将打开一个网页或跳转到同一网页的不同位置。 超链接添加完成后，如果需要修改或更正，可以通过以下步骤完成：（1）在文档窗口的底部单击按钮。（2）右击超链接，在弹出的快捷菜单中选择“超链接属性”命令。（3）弹出“编辑超链接”对话框，如下图所示，在“地址”文本框中输入超链接的目标地址。 6.4.3 插入交互式按钮插入交互式按钮 交互式按钮色彩丰富并具有专业

17、化的外观，就像使用高级图像编辑工具创建的一样。与标准按钮不同，当鼠标指针移动至按钮上方或单击时，其外观会发生变化。l1.交互式按钮的添加 添加交互式按钮的步骤如下：（1）将光标定位在要插入交互式按钮的位置，然后选择“插入”“交互式按钮”命令，如下左图所示。（2）在弹出的“交互式按钮”对话框中，可以设置按钮的形状、颜色、装饰、边框、字体样式和字号等。形状包括圆形、矩形、胶囊状和标签状等，按钮可以发亮或不发亮，或具有倾斜的角度。如下右图所示，在“按钮”选项卡中设置按钮样式、按钮文本，并为按钮添加超链接。 （3）在“字体”选项卡中，除了可以设置按钮文本的字体样式和字号外，还可以设置按钮文本的对齐方式

18、，并设置每种按钮状态的字体颜色，如初始字体颜色、悬停（将鼠标指针悬停在按钮上）时字体颜色和按下时的字体颜色，如下左图所示。 （4）在“图像”选项卡中，可以调整按钮图像的尺寸，如下右图所示。 注意：最好将按钮图像保存为JPEG或GIF格式文件，这两种格式的优缺点见下表所示。 JPEG格式和GIF格式文件优缺点文件格式优点缺点JPEG格式让FrontPage能够提供颜色渐变以及更复杂的按钮样式的效果（如楔形样式、浮雕样式和发光样式）JPEG图像具有纯色背景。如果所作网页背景为纯色，则可以使按钮的背景色与网页的背景色吻合。但如果所作网页不具有纯色背景，则JPEG格式的按钮将无法正常显示G I F 格

19、式可以提供透明背景色GIF图像仅显示256种颜色，有时这不足以显示渐变颜色和更复杂的按钮样式的效果。与JPEG文件格式相比，按钮边缘和按钮上的部分颜色渐变可能比较粗糙l2.交互式按钮图像的状态 插入交互式按钮后，FrontPage会自动创建三个独立的图像，分别表示按钮的三种状态：初始状态、悬停时状态和按下时状态。保存网页时，FrontPage会给出提示同时保存按钮图像文件。 首次保存按钮时，FrontPage会自动提供三个默认的按钮图像文件名。这些文件名以单词button开头，并以惟一值（如某个数字或字母）结尾。建议适当重新命名图像文件，以便将来在图像文件名列表中区分不同的图像。 6.4.4

20、制作站内搜索引擎制作站内搜索引擎 在一个已建立的网站中制作站内搜索引擎的步骤如下：（1）选择“文件”“打开网站”命令，指定要设置站内搜索引擎的网站目录，在“网站”文件夹内双击打开需要添加站内搜索引擎入口的页面（一般是网站的首页）进入编辑状态。（2）根据页面布局将鼠标指针移动到添加搜索入口的位置，选择“插入”“Web组件”命令，打开“插入Web组件”对话框，在“组件类型”列表框中选择“Web搜索”，在“选择搜索类型”列表框中选择“当前网站”选项，如下图所示，最后单击“完成”按钮。 （3）弹出“搜索表单属性”对话框，在该对话框中设置搜索表单属性及搜索结果参数，如下左图和右图所示，单击“确定”按钮，

21、站内搜索引擎添加完成。 注意：如果其他页面也需要设置搜索入口，则将首页设置好的入口代码复制过去即可。另外，站内搜索引擎只有在网站空间支持FrontPage扩展服务器模块时才能正常运行。 6.5 实例解析实例解析 【实例6-1】为某家医疗服务公司创建一个Web网站。解析：制作网站是一个系统工程，至少需要按照以下步骤进行操作。l步骤1：需求分析 明确用户网站的基本功能，用户要向访问者发布哪些信息，提供哪些服务，并最终形成一个需求分析文档l步骤2：规划设计 在制作之前，首先深入了解该公司的特点、基本状况，弄清公司旨在发布的内容。经过了解，归纳如下： （1）作为一家医疗服务公司，体现用户第一的特点。（

22、2）体现现代医疗服务理念。（3）归纳出服务、产品、发展三个主题。（4）主页要反映的内容包括：公司名称、公司logo、公司概述、联系方式和用户反馈表。（5）主页布局为：将公司名称及公司logo放在主页的最上端，下面是三大主题的导航栏，再下面左半部分放置用户反馈表，右半部分放置公司概述及联系方式，如下图所示。 l3：创建网站 创建该网站的具体步骤如下：（1）选择“文件”“新建”命令，在“新建”任务窗格中，单击“其他网站模板”超链接，弹出“网站模板”对话框，在“常规”选项卡中选择“空白网站”模板，如下图所示，并在对话框中的“指定新网站的位置”下拉列表框中选择网站在磁盘中的位置，单击“确定”按钮，即可

23、在指定的位置建立站点。（2）“新建”任务窗格中的“空白网页”超链接，在网站中创建一个空白网页。（3）选择“文件”“保存”命令，将创建好的网页命名为“index.htm”，并保存在刚建好的网站目录中。（4）选择“视图”“导航”命令，切换到导航视图模式，这时看到刚建好的index.htm文件图标。右击该图标，在弹出的快捷菜单中选择“重命名”命令，将主页的主题重命名为“主页”，如下图所示 （5）在“主页”图标上右击，在弹出的快捷菜单中选择“新建”“网页”命令，则在“主页”图标下又创建了一个空白网页“新建网页1.htm”图标，在该图标上右击，将其主题重命名为“我们的服务”。（6）采用上述同样的方法，再

24、创建主题为“我们的产品”和“我们的发展”两个网页，网站结构如下图所示。 l步骤4：制作主页l1.建立网页布局（1）选择“文件”“打开”命令，打开网站的主页index.htm。（2）选择“表格”“绘制表格”命令，打开表格工具栏。在空白网页中绘制如下图所示的表格，并设置各边框颜色为无。 l2.插入公司logo（1）将光标定位到要插入logo的位置。（2）选择“插入”“图片”“来自文件”命令。（3）选择logo文件后，单击“确定”按钮。 logo的制作可以利用绘图软件，如Photoshop等来绘制，然后以图片的形式插入到网页中，也可以使用Flash制作动态logo，然后将其插入网页。l3.制作公司名

25、称字幕 将公司名称制作为滚动字幕，步骤如下：（1）选择“插入”“Web组件”命令，在弹出的对话框中依次选择“动态效果”、“字幕”，单击“完成”按钮，弹出“字幕属性”对话框，如下图所示。（2）在“文本”文本框中输入“阳光医疗服务公司关爱您的健康！”。（3）在“方向”选项组中选中“左”单选按钮，设定字幕由左向右滚动。（4）在“表现方式”选项组中选中“滚动条”单选按钮。（5）单击“样式”按钮，在弹出的对话框中定义字体、字号。 l4.制作导航栏 将光标定位到要插入导航栏的位置，选择“插入”“导航”命令，在弹出的“插入Web组件”对话框中，依次单击“链接栏”、“基于导航结构的链接栏”，然后单击“完成”按

26、钮，弹出“链接栏属性”对话框，如下图所示。在“链接栏属性”对话框中选中“子层”单选按钮，并在“样式”选项卡中选择导航栏样式，选择完成后单击“确定”按钮，导航栏插入完成。 l5.插入顾客信息反馈单选按钮组(1)依次选择三次“插入”“表单”“单选按钮”命令，插入三个单选按钮。(2)在各个单选按钮右边输入相应文字说明：“非常满意”、“一般满意”和“很不满意”。l6.输入公司概述 在插入公司概述及联系方式的地方输入相应内容，并设置适当的格式。 至此，该公司网站的主页已基本制作完成，按照同样的方法设计制作该公司网站的其他三个（即“我们的产品”、“我们的服务”、“我们的发展”）子网页，在实践的过程中对所学内容加以巩固。 最后的制作结果是否令人满意，取决于多重因素，多了解一些美工等方面的知识，对网站的制作会有很大帮助。 本章小结本章小结 通过本章的学习，理解网页的概念及网页制作的思想，掌握利用FrontPage制作网页的方法。除了FrontPage,还有很多制作网页的工具，读者可以尝试使用，经过大量网页制作的实践，读者一定可以制作出令人满意的网页。