1、第 八 章 网 页 制 作,2018/10/12,1,计算机文化基础,第八章 网页制作,8.1 概述 8.2 HTML简介 8.3 网页制作 8.4 网页布局 8.5 创建表单页面 8.6 网页的发布,2018/10/12,2,计算机文化基础,8.1 概 述,8.1.1 网站 8.1.2 服务器与浏览器 8.1.3 网页 8.1.4 网页制作工具 8.1.5 网页设计的相关计算机语言,2018/10/12,3,计算机文化基础,8.1.1 网站,网站是一组相关网页和有关文件的集合，一般有一个特殊的网页作为浏览的起始点，称为主页（Homepage），用来引导用户访问其他网页。网站中的内容通常包括网
2、页和相关的文件，一般被存储在同一个目录中，并根据网站栏目或资源类型进行分类，分别存放在不同的子目录中。本地网站在制作完成后，不经过发布是不能被其他浏览者访问的。发布就是将本地网站的内容传输到连接Internet的Web服务器上。网站发布后，即获得一个网站地址。,2018/10/12,4,计算机文化基础,8.1.2 服务器与浏览器,网站通常位于Web服务器上，Web服务器又称WWW服务器、网站服务器或站点服务器。从本质上讲，Web服务器就是一个软件系统，它通过网络接收HTTP请求，然后提供HTTP响应给请求者。HTTP响应一般包含一个HTML文件，但也可以包含文本文件、图像或其他类型的文件。要使
3、一台计算机成为一台Web服务器，就需要安装专门的服务程序 。要浏览Web页面，必须在本地计算机上安装浏览器软件。浏览器就是Web客户端，它是一个应用程序，用于与Web服务器建立连接，并与之进行通信。 浏览器和服务器之间通过超文本传送协议（HyperText Transfer Protocol，HTTP）进行通信。,2018/10/12,5,计算机文化基础,8.1.3 网页,网页一般又称为HTML文件，是一种可以在WWW上传输，能被浏览器认识和翻译成页面并显示出来的文件。通常用户看到的网页大多是以.htm和.html为扩展名的文件。,2018/10/12,6,计算机文化基础,8.1.3 网页,1
4、. 网页内容一般来说，网页主要由文字、图片、动画、超链接和特殊组件等元素构成。 2. 静态网页和动态网页根据网页的生成方式，大致可以分为静态网页和动态网页两种。,2018/10/12,7,计算机文化基础,8.1.4 网页制作工具,1. 网页制作三剑客 Dreamweaver、Flash、Fireworks被称为网页制作“三剑客” 。 （1）Dreamweaver是美国著名的软件开发商Macromedia公司推出的一个所见即所得的可视化网站开发工具，该软件同时适用于初学者和专业网页设计师。 （2）Fireworks也是由Macromedia公司开发的一种工具，它以处理网页图片为特长，并可以轻松创
5、造GIF动画。 （3）Flash是当今Internet最流行的动画作品的制作工具，并成为事实上的交互式矢量动画标准。,2018/10/12,8,计算机文化基础,8.1.4 网页制作工具,2. Microsoft FrontPage 2003FrontPage 2003是微软公司推出的Microsoft Office 2003家族的成员之一，与Office的其他组件高度融合，界面友好，功能强大，易学易用。FrontPage 2003的主要功能是设计、制作、管理网页或站点。,2018/10/12,9,计算机文化基础,8.1.5 网页设计的相关计算机语言,1. HTMLHTML是Hypertext
6、Markup Language的缩写，是WWW技术的基础，它使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制文本的显示。我们把用HTML语言编写的文件称为HTML文件，把HTML文档称为网页（Web Page）。用HTML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名。,2018/10/12,10,计算机文化基础,8.1.5 网页设计的相关计算机语言,2. XMLXML是Extensible Markup Language的缩写，中文名为可扩展标记语言。其主要用途是在Internet上传递或处理数据。XML与HTML不是并列的概念
7、，它可以说是HTML的补丁，以弥补HTML的不足。比如，在HTML中不允许用户自定义控制标识符，而在XML中允许用户这样做。XML文件的扩展名为.xml。,2018/10/12,11,计算机文化基础,8.1.5 网页设计的相关计算机语言,3. CSSCSS是Cascading Style Sheets的缩写，中文名为层叠样式表，主要用来对网页数据进行编排、格式化、显示、特效等。传统的HTML不能对网页数据进行随心所欲的格式化，而CSS语言却满足了这种要求，它对网页的特殊显示、特殊效果提供了很大的帮助。目前，大多数网页都用了CSS。,2018/10/12,12,计算机文化基础,8.1.5 网页设
8、计的相关计算机语言,4. DHTMLDHTML是动态的HTML，这种技术要求网页具备动态功能，如动态交互、动态更新等。事实上，这是要求我们应该掌握Web中所包含的对象、对象集，以及对象的属性、方法、事件等，然后用程序处理这些对象相关的属性、方法，让事件去完成一定的处理程序，以达到网页的动态效果。,2018/10/12,13,计算机文化基础,8.1.5 网页设计的相关计算机语言,5. 脚本语言脚本（Script）语言是嵌入到HTML代码中的程序，根据运行的位置不同把它分为客户端脚本和服务器端脚本。客户端脚本是运行在客户端的程序，服务器端脚本是运行在服务器端的程序。这里所说的客户端指的是浏览器，服
9、务器端指的是Web服务器。目前较为流行的脚本语言有JavaScript和VBScript。,2018/10/12,14,计算机文化基础,8.2 HTML简介,HTML文件是一种纯文本文件，我们可以使用任何文本处理软件（如记事本）来创建或处理HTML文件。8.2.1 HTML语言概述8.2.2 常用的HTML标记,2018/10/12,15,计算机文化基础,8.2.1 HTML语言概述,HTML语言是由世界性的标准化组织W3C（World Wide Web Consortium）制定的，通过浏览http:/www.w3.org可以了解到HTML标准的最新动态。 下面介绍HTML文件的基本构成和层
10、次结构。,2018/10/12,16,计算机文化基础,1. HTML文件标记 Internet中的每一个HTML文件都包括文本内容和HTML标记两部分。其中，HTML标记负责控制文本显示的外观和版式，并为浏览器指定各种链接的图像、声音和其他对象的位置。多数HTML标记的书写格式如下： 文本内容 标记名写在“”内。多数HTML标记同时具有起始和结束标记，并且成对出现，但也有些HTML标记没有结束标记。另外，HTML标记不区分大小写。,8.2.1 HTML语言概述,2018/10/12,17,计算机文化基础,某些HTML标记还具有一些属性，这些属性指定对象的特性，如背景颜色、文本字体及大小、对齐方
11、式等。属性一般放在“起始标记”中，格式如下：文本内容 其中标记名和属性之间用空格分隔。如果标记有多种属性，属性之间也要用空格分隔。,8.2.1 HTML语言概述,2018/10/12,18,计算机文化基础,2. HTML网页的结构现在我们先看一个简单的HTML文件，从中体会用HTML语言编写网页时的层次结构。【例8-1】用HTML语言编写一个简单的网页。我的第一个Web页欢迎进入HTML世界！ 这里我们首先介绍HTML语言的基本知识和语法。然后，讲授如何使用HTML语言编写您的Web页面。,8.2.1 HTML语言概述,2018/10/12,19,计算机文化基础,将上述代码用文本编辑器编辑并保
12、存为一个扩展名为.htm的文件，双击该文件图标，在浏览器中看到如下图所示的结果。,图9-1,8.2.1 HTML语言概述,2018/10/12,20,计算机文化基础,从上例可以看出，一般HTML文件都是以开头，以结束。其文件结构由以下两部分组成： 1）头部（Head）HTML文件的头部由和标记定义。通常情况下，文件的标题、语言字符集信息等都放在头部信息中。最常用到的标记是，它用于定义网页文件的标题，当该网页文件被打开后，网页文件的标题将出现在浏览器的标题栏中。,8.2.1 HTML语言概述,2018/10/12,21,计算机文化基础,2）正文主体（Body）正文主体是HTML文件的核心内容，由
13、和标记定义。标记具有一些常用的属性，格式如下： 其中，bgcolor为背景颜色，color为文本颜色。n为六位十六进制数。 如果网页使用背景图像，格式如下： HTML对格式的要求并不严格，当HTML文件被浏览器扫描时，所有包含在文件中的空格、回车等均被忽略。因此你可以将一行写成两行或多行，在浏览器中结果是相同的。,返 回,8.2.1 HTML语言概述,2018/10/12,22,计算机文化基础,8.2.2 常用的HTML标记,1. 文本布局1）段落标记 标记指定文档中一个独立的段落。通过设置align属性，控制段落的对齐方式，其值可以是left、center、right、justify，分别表
14、示左对齐、居中、右对齐和两端对齐，默认值为左对齐。 使用格式如下： 2）换行标记 标记可以强制文本换行。该标记只有起始标记。 3）水平线标记 水平线标记用于在网页中插入一条水平线。,2018/10/12,23,计算机文化基础,2. 文字格式HTML语言中用于文字格式化的标记有：1）标题标记 格式为： 标题文字内容 其中n说明大小级别，取值范围为1到6的数字。把标题分为 6级，即h1h6，其中h1文字最大，h6文字最小。,2018/10/12,24,计算机文化基础,2）字体标记字体标记用来对文字格式进行设置，主要具有以下属性：（1）size属性：控制文字的大小，格式如下： 其中n的取值范围为17
15、的数字，默认值为3。标记和标记都可以控制文字的大小。一般情况下，文章的标题最好由标记控制，而其余的文字由标记控制。相比较而言，对字体的控制更加灵活。（2）color属性：控制文字的颜色，格式如下：其中n是一个十六进制的六位数。 （3）face属性：指明文字使用的字体，格式如下： 其中字体名的选择由Windows操作系统安装的字体决定。如：宋体、楷体_GB2312、Times New Roman、Arial等。,2018/10/12,25,计算机文化基础,3）字形标记字形标记用于设置文字的粗体、斜体、下划线、上标、下标等，如表所示：,2018/10/12,26,计算机文化基础,3. 图片标记将图
16、片插入网页中，用于设置图片的大小以及相邻文字的排列方式。该标记具有以下属性： （1）src属性：指明图片文件所在的位置。格式如下：其中URL指图片文件存放的位置。 （2）alt属性：图片的文字说明，当鼠标指针指向图片时，该图片的说明性文字弹出。格式如下：（3）width和height属性：设置图片显示区域的宽度和高度。格式如下：其中width和height属性的取值n1和n2，可以是像素数或百分比。,2018/10/12,27,计算机文化基础,（4）border属性：设置图片文件的边框。格式如下：其中n为像素数。（5）align属性：设置图片相对于文本的位置关系。格式为：对齐方式可以是：top
17、（顶端对齐）、middle（相对垂直居中）、bottom（相对底边对齐）、left（左对齐）、right（右对齐）、texttop（文本上方）等。,2018/10/12,28,计算机文化基础,4. 超链接在HTML语言中，和标记用于设置网页中的超链接，href属性指明被超链接的文件地址。格式如下：超链接文本用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该超链接的地址。若使用图片做超链接，可使用如下格式完成：,2018/10/12,29,计算机文化基础,5. 表格在网页中插入一个表格，需要用到一组HTML标记。定义表格的
18、有关标记如下： 定义表格区域。 定义表格标题。 定义表格头。 定义表格行。 定义表格单元格。,返 回,2018/10/12,30,计算机文化基础,常用的标记属性中，border属性用于设置表格边框的宽度；width、height属性用于设置表格或单元格的宽度、高度；cellspacing和cellpadding属性分别用于设置单元格之间的间隙和单元格内部空白；align属性用于设置表格或单元格的对齐方式；bgcolor和background属性分别用于设置表格的背景颜色和背景图像。,表格属性,2018/10/12,31,计算机文化基础,8.3 网 页 制 作,8.3.1 FrontPage 2
19、003概述 8.3.2 创建站点 8.3.3 网页编辑 8.3.4 插入对象 8.3.5 创建超链接,2018/10/12,32,计算机文化基础,8.3.1 FrontPage 2003概述,FrontPage 2003可以按下列方法启动：单击“开始”按钮，在“开始”菜单中指向“程序”“Microsoft Office”“Microsoft Office FrontPage 2003”；通过创建FrontPage 2003的快捷方式启动。FrontPage 2003的退出可以使用以下几种方式：选取“文件”菜单中的“退出”；单击窗口右上角的“关闭”按钮；按快捷键Alt+F4等。,2018/10/
20、12,33,计算机文化基础,8.3.1 FrontPage 2003概述,启动FrontPage 2003后，可以看到以下几种视图，用户可以在不同的视图中进行相应的操作。 1. 网页视图网页视图是FrontPage 2003中最常用的工作界面，网页的创建、编辑、预览等基本操作都是在此视图中进行的。FrontPage 2003提供了四种网页视图模式，即设计、拆分、代码、预览。 2. 文件夹视图文件夹视图用于管理文件和文件夹，使用它可以直接处理文件和文件夹以及组织网站内容。在此视图中，可以创建、删除、复制和移动文件夹，具体操作与在Windows资源管理器中类似。 3. 远程网站视图远程网站视图用于
21、站点和站点内文件的发布。在远程网站视图中查看文件时，文件将用图标和描述性文字进行标记以表示发布状态 。,2018/10/12,34,计算机文化基础,8.3.1 FrontPage 2003概述,4. 报表视图报表视图用于查看站点的各种情况，如文件内容、更新链接、文件列表及变化情况等。 5. 导航视图 利用导航视图可以清晰地看到当前站点的主页和其他网页的链接关系，也可以设置站点的导航结构或添加、删除网页。 6. 超链接视图超链接视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。利用超链接视图可以管理站点中各个网页的超链接。 7. 任务视图任务视图主要用于创建和管
22、理任务。任务视图以列格式显示网站中的所有任务，并在各个标题下提供有关各项任务的当前信息。,2018/10/12,35,计算机文化基础,8.3.2 创建站点,使用FrontPage 2003的模板和向导，用户可以轻松地创建出各种用途和风格的站点。新建站点时，可以根据自己的需求选择不同的模板和向导。对于不同的模板和向导，其新建站点的步骤略有不同。下面以“由一个网页组成的网站”模板为例，介绍新建站点的方法。 （1）单击“文件”菜单的“新建”命令，在“新建”任务窗格中选择“新建网站”中的“由一个网页组成的网站”； （2）在弹出的“网站模板”对话框的“指定新网站的位置”框中输入新站点要保存的位置，也可使
23、用“浏览”按钮指定新站点的位置；,2018/10/12,36,计算机文化基础,（3）单击 “确定”按钮，新建站点如下图所示,返 回,该站点只有一个空白网页index.htm（主页）和用于存储图片的文件夹images，你可以打开index.htm进行编辑，也可以进一步根据网站规划创建文件夹和新建其他网页。选择“文件”菜单的“退出”命令，可以关闭FrontPage 2003。,2018/10/12,37,计算机文化基础,1. 新建网页要根据“网页模板”创建一个新的网页，可以按下面的步骤： （1）单击“文件”菜单的“新建”命令，在“新建”任务窗格中选择“新建网页”中的“其他网页模板”。 （2）在弹出
24、的“网页模板”对话框中选择所需的网页模板，可以在“说明”及“预览”区域查看该模板的说明及预览图。 （3）单击“确定”按钮，系统新建一个基于所选模板的网页。 （4）单击“文件”菜单，选择“保存”命令，弹出“另存为”对话框。在此对话框中，输入文件名进行保存。,返 回,8.3.3 网页编辑,2018/10/12,38,计算机文化基础,2. 打开/保存网页FrontPage 2003中，编辑某个网页之前，需要先打开该网页。打开网页的方法有多种，常用的有以下几种： （1）使用“文件”菜单的“打开”命令，或“常用”工具栏的“打开”按钮，在弹出的“打开文件”对话框中选择相应的网页； （2）如需要打开的文件已
25、在打开的网站中，在文件夹视图中双击该网页图标即可将其打开。实际上，在其他视图中双击网页图标，同样会打开指定网页。要保存一个网页，可以使用“文件”菜单的“保存”命令，或“常用”工具栏的“保存”按钮，如需另存可使用“文件”菜单的“另存为”命令。,返 回,8.3.3 网页编辑,2018/10/12,39,计算机文化基础,3. 预览网页 网页制作过程中，用户可以切换到“预览”视图预览网页，也可以使用“文件”菜单的“在浏览器中预览”命令预览网页。使用后者，系统会打开浏览器显示网页，如果该网页尚未保存，会弹出对话框提示用户保存网页。,返 回,8.3.3 网页编辑,2018/10/12,40,计算机文化基础
26、,8.3.3 网页编辑,4. 设置文字格式同其他Microsoft Office组件一样，在网页中可以输入文字，复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。在FrontPage 2003中，对文字的格式提供了相当完整的设定功能，文字格式的变化也因此多种多样。可以使用工具栏上的工具按钮或菜单命令快速地改变文字的外观。设置文字格式的一般操作步骤是：选中文字，单击“格式”菜单的“字体”命令，在弹出的“字体”对话框中设置字体的各种属性，也可以使用“格式”工具栏中相应的命令按钮。虽然可以设置各种美观的字体，但是由于用户只能使用本地计算机中安装的字体显示网页，因此还是使用常见的字体为好。,返 回
27、,2018/10/12,41,计算机文化基础,8.3.3 网页编辑,5. 设置段落格式文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage 2003通过按Enter键划分段落。值得注意的是，段落之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按Shift+Enter键即可。实际上，按Enter键在HTML代码中插入的是标记，而按Shift+Enter键则插入的是标记。段落格式主要包括对齐方式、缩进和段落间距等。设置段落格式的一般方法如下：将插入点移动到要设置格式的段落中，或是选中该段落，单击“格式”菜单的“段落”命令，在弹出的“段落”对话框中进行各种段落格式属性的设置
28、。,返 回,2018/10/12,42,计算机文化基础,8.3.3 网页编辑,6. 设置网页属性 网页属性包括网页的标题、格式、页边距等。要设置网页属性，用户可以使用“文件”菜单的“属性”命令，或者在网页的任意地方单击鼠标右键，在弹出的右键菜单中选择“网页属性”命令，FrontPage 2003将显示“网页属性”对话框。,2018/10/12,43,计算机文化基础,6. 设置网页属性,1）“常规”属性要设置网页的“常规”属性，单击“网页属性”对话框的“常规”选项卡。“标题”框用于给出网页的标题，网页标题将显示在浏览器的标题栏中。“背景音乐”框用于指定网页的背景音乐，当用浏览器打开网页时，将自动
29、播放背景音乐。背景音乐区域的“位置”框用于指定声音文件的位置，用户可以使用“浏览”按钮选择一个声音文件；“循环次数”框用于指定声音要反复播放的次数，如果选中“不限次数”复选框，表示一直不停地播放。,2018/10/12,44,计算机文化基础,6. 设置网页属性,2）“格式”属性 要设置网页的背景、颜色，可以使用“网页属性”对话框的“格式”选项卡。用户可以选中“背景图片”复选框，指定一个图片作为网页的背景图片。如果要将图片按水印形式添加，需要选中“使其成为水印”复选框。通过单击相应的下拉列表框，可以设置网页的背景颜色、文本颜色以及超链接文字的颜色。当同时设置背景图片和背景颜色时，背景图片将覆盖背
30、景色。,返 回,2018/10/12,45,计算机文化基础,8.3.4 插入对象,1.插入水平线在网页中输入文本内容后，还可在不同的段落、行之间添加水平线，水平线将网页分割成几个部分，使得网页更具条理性。具体操作步骤如下：（1）在准备插入水平线的位置设置插入点；（2）单击“插入”菜单的“水平线”命令，插入水平线。要修改水平线的外观，可以双击水平线，打开“水平线属性”对话框。“宽度”框用于设置水平线的宽度，“高度”框用于设置水平线的高度，“对齐方式”用于设置水平线在网页内水平对齐的方式，“颜色”列表框用于设置水平线的颜色，选中“实线（无阴影）”复选框时，水平线将被设成实心线。要为线条指定自定义样
31、式或其他格式，可以使用“样式”按钮进行设置。,返 回,2018/10/12,46,计算机文化基础,8.3.4 插入对象,2. 插入图片图片可以使网页变得生动活泼，并能吸引用户的注意。 1）图片文件的格式在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式，文件的信息量小，适合于网络传输，因此被广泛地应用在Web站点的设计中。 GIF（Graphical Interchange Format，图形交换格式）采用无损压缩方式，其主要特征是支持动画、透明度、图形渐进，但GIF图像包含的颜色不能超过256种。 JPEG（Joint Photograph Expert Group，联合
32、图像专家组）格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图片质量换取大的压缩比例。JPEG格式支持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。,2018/10/12,47,计算机文化基础,2. 插入图片,2）插入图片和设置图片属性（方法同Word） 3）编辑图片利用“图片”工具栏能够完成一些常用的图像编辑功能。 4）保存图片插入图片后保存网页，如果图片不在网站文件夹中，将出现“保存嵌入式文件”对话框。如果图片在网站文件夹中，就不会出现此对话框。,2018/10/12,48,计算机文化基础,8.3.4 插入对象,3. 插入字幕在制作网页时，可以将网页中的文
33、字做成由左至右，或由右至左移动的动态效果，使网页更加形象生动。具体操作步骤如下：（1）将插入点设置在要插入移动字幕的位置或者选中作为移动字幕的文本，单击“插入”菜单的“Web组件”命令，弹出“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“字幕”，单击“完成”按钮， 打开“字幕属性”对话框。,2018/10/12,49,计算机文化基础,（2）如果已经选择了作为移动字幕的文本，此文本就会出现在“文本”框中，如果没有选择文本，可在“文本”框中输入作为移动字幕的文本。 （3）“方向”区域用于指定文本的移动方向。“速度”区域用于指定文字的滚动速度，
34、“延迟”框中的数值表示字幕滚动一步的时间间隔是多少毫秒，“数量”框中的数值表示字幕滚动一步的距离是多少像素。“表现方式”区域用于指定文字的表现方式。选中“重复”区域的“连续”复选框，移动字幕将连续滚动；若要设置字幕滚动有限次，可以取消选中“连续”复选框并输入字幕重复的次数。“背景色”列表框用于设置移动字幕的背景颜色。“大小”区域用于设置字幕的宽度与高度。 （4）单击“确定”按钮，即可插入字幕。,3. 插入字幕,2018/10/12,50,计算机文化基础,8.3.4 插入对象,4. 插入交互式按钮交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮时，交互式按钮会改变颜色或形状。默认情况下，交互
35、式按钮是一个带有彩色方框的文字按钮，也可以应用图片创建交互式按钮。 （1）将插入点设置在要插入交互式按钮的位置，单击“插入”菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“交互式按钮”，单击“完成”按钮，打开“交互式按钮”属性对话框。 （2）设置 按钮 字体 图像 （3）单击“确定”按钮，即可插入交互式按钮。,2018/10/12,51,计算机文化基础,8.3.4 插入对象,5. 插入站点计数器（1）单击“插入”菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“计数器
36、”，在“选择计数器样式”列表中选择一种样式，单击“完成”按钮，打开“计数器属性”对话框；（2）设置计数器属性；（3）单击“确定”按钮，插入站点计数器。,返 回,2018/10/12,52,计算机文化基础,8.3.5 创建超链接,Web网页的强大之处就在于其超链接，使用超链接能够将Internet中的信息有机地组织起来，使人们在丰富多彩的WWW世界轻松地漫游。超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是图片、文件、电子邮件地址等。 超链接由链接载体和链接目标两部分组成。 根据链接载体的特点，可以把链接分为文本超链接与图片超链接两大类
37、。,2018/10/12,53,计算机文化基础,8.3.5 创建超链接,1. 创建文本超链接文本超链接是指在文本上定义的超链接，单击文本超链接，会自动跳转到指向的链接目标。创建文本超链接的具体操作步骤如下： （1）选定要定义超链接的文本，从“插入”菜单中选择“超链接”命令，或单击“常用”工具栏上的“超链接”按钮 ，打开“插入超链接”对话框，如下图所示；,2018/10/12,54,计算机文化基础,1. 创建文本超链接,（2）在“插入超链接”对话框中选择要链接的目标网页，单击“确定”按钮，插入超链接，可以看到所选定的文本变为蓝色，并且带有下划线，说明选定的文本已经被设置为超链接文本。保存网页，在
38、浏览器中预览效果。当鼠标移至链接文字时，鼠标指针变成手形，此时单击鼠标就跳转到目标网页。,2018/10/12,55,计算机文化基础,图片超链接是指在图片上创建的超链接，图片超链接比文本超链接显得更加生动活泼，单击图片超链接，会自动跳转到指向的链接目标。可以将整个图片设置为超链接，也可以为图片分配一个或多个热点。热点是图片上的超链接区域，包含热点的图片称为图像映射，用户单击热点区域可以转到相应的链接目标。,2. 创建图片超链接,2018/10/12,56,计算机文化基础,（1）选定要定义超链接的图片，从“插入”菜单中选择“超链接”命令，或单击“常用”工具栏上的“超链接”按钮，打开“插入超链接”
39、对话框； （2）在对话框中选择要链接的目标网页，单击“确定”按钮，即可插入超链接。保存网页，在浏览器中预览效果，当鼠标移至链接图片时，鼠标指针变成手形，此时单击鼠标就跳转到目标网页。,1）创建图片超链接,2018/10/12,57,计算机文化基础,热点可以是图片上具有某种形状的一块区域或文本，当用户单击该区域或文本时，超链接目标会显示在Web浏览器中。在FrontPage 2003中，热点的形状可以是长方形、圆形或多边形。例如我们通过山东省地图浏览山东省各城市的民俗风情，当鼠标移至地图上的各个城市时，鼠标指针变为手形，单击后打开描述该城市民俗风情的页面。,2）为图片添加热点,2018/10/1
40、2,58,计算机文化基础,为图片添加热点，具体操作步骤如下：,（1）选择需要添加热点的图片；（2）在“图片”工具栏中，单击长方形、圆形或多边形热点按钮匹配需要的形状；（3）在图片上，采用鼠标拖动操作画出所选形状（画多边形时，可单击多边形的第一个角，然后依次单击多边形其他角的位置，最后双击完成多边形）；（4）释放鼠标，弹出“插入超链接”对话框，按照插入超链接中所讲方法创建超链接即可。,2018/10/12,59,计算机文化基础,为图片添加热点,重复步骤（2）、（3）、（4），在图片上依次创建超链接到其他网页。当鼠标移动到热点区域时，光标变为手形，如下图所示。单击鼠标，超链接的目标网页就会显示在W
41、eb浏览器窗口中。,返 回,2018/10/12,60,计算机文化基础,3. 使用书签超链接,对于网页的超链接，往往使用户跳转到目标网页的顶端，应用书签能够更严格地控制用户到达网页内的某个具体位置。书签是网页中被标记的位置或被标记的文本。,1）插入书签 （1）选中作为书签的文本，或将光标定位在要插入书签的位置。 （2）选择“插入”菜单的“书签”命令，弹出“书签”对话框，如右图所示，所选文本自动出现在“书签名称”框中。 （3）单击“确定”按钮，插入书签，可以看到所选文本下方出现虚线。,2018/10/12,61,计算机文化基础,2）创建书签超链接（1）选定要定义超链接的文本或图片；（2）从“插入
42、”菜单中选择“超链接”命令，弹出“插入超链接”对话框，如下图所示，在对话框的“链接到”栏单击“本文档中的位置”，选择要链接的书签，单击“确定”按钮，插入书签超链接。保存网页，在浏览器中预览效果，单击页面中的书签超链接，页面会跳转到书签的位置。,2018/10/12,62,计算机文化基础,4. 创建电子邮件超链接,电子邮件超链接为用户发送电子邮件提供了极大的方便，单击电子邮件超链接后，允许用户书写电子邮件内容，并发往指定的地址。具体操作步骤如下：（1）选择作为电子邮件超链接的文本或图片；（2）从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对话框；（3）在对话框的“链接到”栏单击“电子邮件
43、地址”，在“电子邮件地址”框中输入所需电子邮件地址，还可以在“主题”框中键入电子邮件的主题；（4）单击“确定”按钮，完成电子邮件超链接的创建。,返 回,2018/10/12,63,计算机文化基础,5. 创建下载文件超链接 如果要在网站中提供资料下载功能，就需要创建下载链接，网站中每个用于下载的文件要对应一个下载链接。具体操作步骤如下：（1）选择作为文件超链接的文本或图片；（2）从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对话 框，在对话框中选择要下载的文件；（3）单击“确定”按钮，完成文件超链接的创建。保存网页，在浏览器中预览效果，单击创建的文件超链接时，弹出“文件下载”对话框，如下
44、图所示，用户可以根据需要打开或保存文件。,返 回,2018/10/12,64,计算机文化基础,8.4 网 页 布 局,网页的布局设计，是将文字、图片等网页元素，根据特定的内容和主题，在网页所限定的范围中进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。网页的布局一般使用表格或框架来实现。,2018/10/12,65,计算机文化基础,8.4 网 页 布 局,8.4.1 创建和使用表格 8.4.2 创建和使用框架,返 回,2018/10/12,66,计算机文化基础,8.4.1 创建和使用表格,表格由单元格构成的行和列组成，单元格中可以插入文本、图片以及其他对象。利用表格可以有条理地排列数据或
45、组织网页布局。表格的行、列和单元格都可以进行复制、粘贴，在表格中还可以插入表格，一层层的表格嵌套使设计更加方便。FrontPage 2003提供了与Word字处理软件类似的表格处理功能，在网页中可以轻松地创建和编辑表格。,2018/10/12,67,计算机文化基础,1. 创建表格,创建表格有以下三种常用方法：（1）使用“表格”菜单的“插入”子菜单中的“表格”命令，可以对插入的表格进行精确的设置，包括行和列的数目、对齐方式、单元格间距、单元格衬距、边框粗细和背景等。（2）使用“常用”工具栏的“插入表格”按钮 ，快速插入表格。（3）使用“表格”菜单的“绘制表格”命令，手动绘制表格。,2018/10
46、/12,68,计算机文化基础,2. 设置表格属性 插入表格后，为了使表格看上去更专业、更美观，需要设置表格的属性。,（1）设置表格行数和列数。 （2）设置表格布局，包括设置表格的对齐方式、浮动、宽度等。 （3）在“粗细”数值框中输入数值，即可设置表格边框的粗细。 （4）在背景区域，可以通过“颜色”框设置单一色彩的表格背景，也可选中“使用背景图片”复选框，用“浏览”按钮设置图片作为表格的背景。,2018/10/12,69,计算机文化基础,3. 设置单元格属性将光标放置在需要设置属性的单元格中，使用“表格”菜单的“表格属性”子菜单中的“单元格”命令，打开 “单元格属性”对话框，设置单元格属性。,在
47、“背景”区域中可以设置单元格的背景颜色，或使用图片作为背景。,在“布局”区域可以设置水平、垂直对齐方式，指定宽度、高度、标题单元格，设置行跨距、列跨距等。在“边框”区域中可以设置单元格边框的颜色、亮边框、暗边框。,2018/10/12,70,计算机文化基础,创建表格后，可以对表格单元格、行和列的布局和结构进行调整，以满足不同的需要。如调整行、列或单元格；插入行、列或单元格；删除行、列或单元格；合并、拆分单元格；平均分布行高、列宽；设置单元格属性等。,返 回,4. 调整表格,2018/10/12,71,计算机文化基础,8.4.2 创建和使用框架,框架的使用是进行网页布局设计的一种重要手段。框架将
48、浏览器窗口划分为几个区域，每个框架中都可以显示一个独立的网页。浏览器窗口中显示的网页实际是这些框架的集合，因此被称为框架网页。框架网页并不包含显示的内容，只是记录了该框架网页包含几个框架、其拆分方式以及每个框架中显示哪个网页（与其他网页的超链接）等。,2018/10/12,72,计算机文化基础,在FrontPage 2003中，可以使用框架网页布局模板轻松创建框架网页。具体操作步骤如下：（1）单击“文件”菜单的“新建”命令，在“新建”任务窗格中选择“新建网页”中的“其他网页模板”。（2）在弹出的“网页模板”对话框中，切换到“框架网页”选项卡，选择所需的模板，如“目录”模板，可在“说明”及“预览
49、”区域查看该模板的说明及预览图。,1. 创建框架网页,2018/10/12,73,计算机文化基础,（3）单击“确定”按钮，完成框架网页的创建，如下图所示；（4）每个框架中，单击“设置初始网页”按钮可以建立与已经存在网页的超链接，从而在此框架中显示该网页；单击“新建网页”按钮可以建立显示在该框架中的新网页。,在该图窗口底部新增了“无框架”视图模式，可以为不支持框架的浏览器创建替代网页。,2018/10/12,74,计算机文化基础,保存框架网页需要保存框架和各个框架中的网页。例如，使用“目录”模板创建的框架网页需要保存作为容器的框架网页和分别显示在两个框架中的两个网页。具体操作步骤如下：（1）使用
50、“文件”菜单的“保存”命令，或单击“常用”工具栏的“保存”按钮，弹出“另存为”对话框。（2）在“另存为”对话框右边的框架网页预览图中，深蓝色的区域或边框指明了框架中正在保存的网页。进行相应设置后，单击“保存”按钮，该网页保存完毕。（3）重复步骤（2），直至所有的框架网页都保存完毕，如使用“目录”模板创建的框架网页需要保存三次。如果某个框架网页通过单击“设置初始网页”按钮建立与已经存在网页的超链接，则不会弹出“另存为”对话框保存该网页。,2. 保存框架网页,2018/10/12,75,计算机文化基础,当使用模板创建的框架结构不能满足需要时，可以通过拆分框架制作出更为复杂的框架网页。具体操作步骤如下：（1）选择要拆分的框架，在“框架”菜单中选择“拆分框架”命令，打开“拆分框架”对话框；（2）根据需要选择“拆分为列”或“拆分成行”选项，单击“确定”按钮完成拆分。也可按住Ctrl键拖动框架的边框实现拆分框架。,
