【教学课件】第八章网页制作.ppt

《【教学课件】第八章网页制作.ppt》由会员分享，可在线阅读，更多相关《【教学课件】第八章网页制作.ppt（98页珍藏版）》请在三一办公上搜索。

1、第 八 章 网 页 制 作,1,第八章 网页制作,8.1 概述8.2 HTML简介 8.3 网页制作 8.4 网页布局 8.5 创建表单页面 8.6 网页的发布,2,8.1 概 述,8.1.1 网站8.1.2 服务器与浏览器8.1.3 网页8.1.4 网页制作工具8.1.5 网页设计的相关计算机语言,3,8.1.1 网站,网站是一组相关网页和有关文件的集合，一般有一个特殊的网页作为浏览的起始点，称为主页（Homepage），用来引导用户访问其他网页。网站中的内容通常包括网页和相关的文件，一般被存储在同一个目录中，并根据网站栏目或资源类型进行分类，分别存放在不同的子目录中。本地网站在制作完成后，

2、不经过发布是不能被其他浏览者访问的。发布就是将本地网站的内容传输到连接Internet的Web服务器上。网站发布后，即获得一个网站地址。,4,8.1.2 服务器与浏览器,网站通常位于Web服务器上，Web服务器又称WWW服务器、网站服务器或站点服务器。从本质上讲，Web服务器就是一个软件系统，它通过网络接收HTTP请求，然后提供HTTP响应给请求者。HTTP响应一般包含一个HTML文件，但也可以包含文本文件、图像或其他类型的文件。要使一台计算机成为一台Web服务器，就需要安装专门的服务程序。要浏览Web页面，必须在本地计算机上安装浏览器软件。浏览器就是Web客户端，它是一个应用程序，用于与We

3、b服务器建立连接，并与之进行通信。浏览器和服务器之间通过超文本传送协议（HyperText Transfer Protocol，HTTP）进行通信。,5,8.1.3 网页,网页一般又称为HTML文件，是一种可以在WWW上传输，能被浏览器认识和翻译成页面并显示出来的文件。通常用户看到的网页大多是以.htm和.html为扩展名的文件。,6,8.1.3 网页,1.网页内容 一般来说，网页主要由文字、图片、动画、超链接和特殊组件等元素构成。2.静态网页和动态网页 根据网页的生成方式，大致可以分为静态网页和动态网页两种。,7,8.1.4 网页制作工具,1.网页制作三剑客Dreamweaver、Flash

4、、Fireworks被称为网页制作“三剑客”。（1）Dreamweaver是美国著名的软件开发商Macromedia公司推出的一个所见即所得的可视化网站开发工具，该软件同时适用于初学者和专业网页设计师。（2）Fireworks也是由Macromedia公司开发的一种工具，它以处理网页图片为特长，并可以轻松创造GIF动画。（3）Flash是当今Internet最流行的动画作品的制作工具，并成为事实上的交互式矢量动画标准。,8,8.1.4 网页制作工具,2.Microsoft FrontPage 2003 FrontPage 2003是微软公司推出的Microsoft Office 2003家族的

5、成员之一，与Office的其他组件高度融合，界面友好，功能强大，易学易用。FrontPage 2003的主要功能是设计、制作、管理网页或站点。,9,8.1.5 网页设计的相关计算机语言,1.HTML HTML是Hypertext Markup Language的缩写，是WWW技术的基础，它使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制文本的显示。我们把用HTML语言编写的文件称为HTML文件，把HTML文档称为网页（Web Page）。用HTML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名。,10,8.1.5 网页设计的相关计

6、算机语言,2.XML XML是Extensible Markup Language的缩写，中文名为可扩展标记语言。其主要用途是在Internet上传递或处理数据。XML与HTML不是并列的概念，它可以说是HTML的补丁，以弥补HTML的不足。比如，在HTML中不允许用户自定义控制标识符，而在XML中允许用户这样做。XML文件的扩展名为.xml。,11,8.1.5 网页设计的相关计算机语言,3.CSS CSS是Cascading Style Sheets的缩写，中文名为层叠样式表，主要用来对网页数据进行编排、格式化、显示、特效等。传统的HTML不能对网页数据进行随心所欲的格式化，而CSS语言却满

7、足了这种要求，它对网页的特殊显示、特殊效果提供了很大的帮助。目前，大多数网页都用了CSS。,12,8.1.5 网页设计的相关计算机语言,4.DHTML DHTML是动态的HTML，这种技术要求网页具备动态功能，如动态交互、动态更新等。事实上，这是要求我们应该掌握Web中所包含的对象、对象集，以及对象的属性、方法、事件等，然后用程序处理这些对象相关的属性、方法，让事件去完成一定的处理程序，以达到网页的动态效果。,13,8.1.5 网页设计的相关计算机语言,5.脚本语言 脚本（Script）语言是嵌入到HTML代码中的程序，根据运行的位置不同把它分为客户端脚本和服务器端脚本。客户端脚本是运行在客户

8、端的程序，服务器端脚本是运行在服务器端的程序。这里所说的客户端指的是浏览器，服务器端指的是Web服务器。目前较为流行的脚本语言有JavaScript和VBScript。,14,8.2 HTML简介,HTML文件是一种纯文本文件，我们可以使用任何文本处理软件（如记事本）来创建或处理HTML文件。8.2.1 HTML语言概述 8.2.2 常用的HTML标记,15,8.2.1 HTML语言概述,HTML语言是由世界性的标准化组织W3C（World Wide Web Consortium）制定的，通过浏览可以了解到HTML标准的最新动态。下面介绍HTML文件的基本构成和层次结构。,16,1.HTML文

9、件标记Internet中的每一个HTML文件都包括文本内容和HTML标记两部分。其中，HTML标记负责控制文本显示的外观和版式，并为浏览器指定各种链接的图像、声音和其他对象的位置。多数HTML标记的书写格式如下：文本内容标记名写在“”内。多数HTML标记同时具有起始和结束标记，并且成对出现，但也有些HTML标记没有结束标记。另外，HTML标记不区分大小写。,8.2.1 HTML语言概述,17,某些HTML标记还具有一些属性，这些属性指定对象的特性，如背景颜色、文本字体及大小、对齐方式等。属性一般放在“起始标记”中，格式如下：文本内容 其中标记名和属性之间用空格分隔。如果标记有多种属性，属性之间

10、也要用空格分隔。,8.2.1 HTML语言概述,18,2.HTML网页的结构 现在我们先看一个简单的HTML文件，从中体会用HTML语言编写网页时的层次结构。【例8-1】用HTML语言编写一个简单的网页。我的第一个Web页欢迎进入HTML世界！这里我们首先介绍HTML语言的基本知识和语法。然后，讲授如何使用HTML语言编写您的Web页面。,8.2.1 HTML语言概述,19,将上述代码用文本编辑器编辑并保存为一个扩展名为.htm的文件，双击该文件图标，在浏览器中看到如下图所示的结果。,图9-1,8.2.1 HTML语言概述,20,从上例可以看出，一般HTML文件都是以开头，以结束。其文件结构由

11、以下两部分组成：1）头部（Head）HTML文件的头部由和标记定义。通常情况下，文件的标题、语言字符集信息等都放在头部信息中。最常用到的标记是，它用于定义网页文件的标题，当该网页文件被打开后，网页文件的标题将出现在浏览器的标题栏中。,8.2.1 HTML语言概述,21,2）正文主体（Body）正文主体是HTML文件的核心内容，由和标记定义。标记具有一些常用的属性，格式如下：其中，bgcolor为背景颜色，color为文本颜色。n为六位十六进制数。如果网页使用背景图像，格式如下：HTML对格式的要求并不严格，当HTML文件被浏览器扫描时，所有包含在文件中的空格、回车等均被忽略。因此你可以将一行写

12、成两行或多行，在浏览器中结果是相同的。,返 回,8.2.1 HTML语言概述,22,8.2.2 常用的HTML标记,1.文本布局1）段落标记标记指定文档中一个独立的段落。通过设置align属性，控制段落的对齐方式，其值可以是left、center、right、justify，分别表示左对齐、居中、右对齐和两端对齐，默认值为左对齐。使用格式如下：2）换行标记 标记可以强制文本换行。该标记只有起始标记。3）水平线标记水平线标记用于在网页中插入一条水平线。,23,2.文字格式 HTML语言中用于文字格式化的标记有：1）标题标记 格式为：标题文字内容 其中n说明大小级别，取值范围为1到6的数字。把标题

13、分为 6级，即h1h6，其中h1文字最大，h6文字最小。,24,2）字体标记 字体标记用来对文字格式进行设置，主要具有以下属性：（1）size属性：控制文字的大小，格式如下：其中n的取值范围为17的数字，默认值为3。标记和标记都可以控制文字的大小。一般情况下，文章的标题最好由标记控制，而其余的文字由标记控制。相比较而言，对字体的控制更加灵活。（2）color属性：控制文字的颜色，格式如下：其中n是一个十六进制的六位数。（3）face属性：指明文字使用的字体，格式如下：其中字体名的选择由Windows操作系统安装的字体决定。如：宋体、楷体_GB2312、Times New Roman、Arial

14、等。,25,3）字形标记 字形标记用于设置文字的粗体、斜体、下划线、上标、下标等，如表所示：,26,3.图片 标记将图片插入网页中，用于设置图片的大小以及相邻文字的排列方式。该标记具有以下属性：（1）src属性：指明图片文件所在的位置。格式如下：其中URL指图片文件存放的位置。（2）alt属性：图片的文字说明，当鼠标指针指向图片时，该图片的说明性文字弹出。格式如下：（3）width和height属性：设置图片显示区域的宽度和高度。格式如下：其中width和height属性的取值n1和n2，可以是像素数或百分比。,27,（4）border属性：设置图片文件的边框。格式如下：其中n为像素数。（5）

15、align属性：设置图片相对于文本的位置关系。格式为：对齐方式可以是：top（顶端对齐）、middle（相对垂直居中）、bottom（相对底边对齐）、left（左对齐）、right（右对齐）、texttop（文本上方）等。,28,4.超链接 在HTML语言中，和标记用于设置网页中的超链接，href属性指明被超链接的文件地址。格式如下：超链接文本 用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该超链接的地址。若使用图片做超链接，可使用如下格式完成：,29,5.表格 在网页中插入一个表格，需要用到一组HTML标记。定义表格

16、的有关标记如下：定义表格区域。定义表格标题。定义表格头。定义表格行。定义表格单元格。,返 回,30,常用的标记属性中，border属性用于设置表格边框的宽度；width、height属性用于设置表格或单元格的宽度、高度；cellspacing和cellpadding属性分别用于设置单元格之间的间隙和单元格内部空白；align属性用于设置表格或单元格的对齐方式；bgcolor和background属性分别用于设置表格的背景颜色和背景图像。,表格属性,31,8.3 网 页 制 作,8.3.1 FrontPage 2003概述8.3.2 创建站点8.3.3 网页编辑8.3.4 插入对象8.3.5 创

17、建超链接,32,8.3.1 FrontPage 2003概述,FrontPage 2003可以按下列方法启动：单击“开始”按钮，在“开始”菜单中指向“程序”“Microsoft Office”“Microsoft Office FrontPage 2003”；通过创建FrontPage 2003的快捷方式启动。FrontPage 2003的退出可以使用以下几种方式：选取“文件”菜单中的“退出”；单击窗口右上角的“关闭”按钮；按快捷键Alt+F4等。,33,8.3.1 FrontPage 2003概述,启动FrontPage 2003后，可以看到以下几种视图，用户可以在不同的视图中进行相应的操作

18、。1.网页视图 网页视图是FrontPage 2003中最常用的工作界面，网页的创建、编辑、预览等基本操作都是在此视图中进行的。FrontPage 2003提供了四种网页视图模式，即设计、拆分、代码、预览。2.文件夹视图 文件夹视图用于管理文件和文件夹，使用它可以直接处理文件和文件夹以及组织网站内容。在此视图中，可以创建、删除、复制和移动文件夹，具体操作与在Windows资源管理器中类似。3.远程网站视图 远程网站视图用于站点和站点内文件的发布。在远程网站视图中查看文件时，文件将用图标和描述性文字进行标记以表示发布状态。,34,8.3.1 FrontPage 2003概述,4.报表视图 报表视

19、图用于查看站点的各种情况，如文件内容、更新链接、文件列表及变化情况等。5.导航视图 利用导航视图可以清晰地看到当前站点的主页和其他网页的链接关系，也可以设置站点的导航结构或添加、删除网页。6.超链接视图 超链接视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。利用超链接视图可以管理站点中各个网页的超链接。7.任务视图 任务视图主要用于创建和管理任务。任务视图以列格式显示网站中的所有任务，并在各个标题下提供有关各项任务的当前信息。,35,创建站点,使用FrontPage 2003的模板和向导，用户可以轻松地创建出各种用途和风格的站点。新建站点时，可以根据自己的需

20、求选择不同的模板和向导。对于不同的模板和向导，其新建站点的步骤略有不同。下面以“由一个网页组成的网站”模板为例，介绍新建站点的方法。（1）单击“文件”菜单的“新建”命令，在“新建”任务窗格中选择“新建网站”中的“由一个网页组成的网站”；（2）在弹出的“网站模板”对话框的“指定新网站的位置”框中输入新站点要保存的位置，也可使用“浏览”按钮指定新站点的位置；,36,（3）单击“确定”按钮，新建站点如下图所示,返 回,该站点只有一个空白网页index.htm（主页）和用于存储图片的文件夹images，你可以打开index.htm进行编辑，也可以进一步根据网站规划创建文件夹和新建其他网页。选择“文件”

21、菜单的“退出”命令，可以关闭FrontPage 2003。,37,1.新建网页 要根据“网页模板”创建一个新的网页，可以按下面的步骤：（1）单击“文件”菜单的“新建”命令，在“新建”任务窗格中选择“新建网页”中的“其他网页模板”。（2）在弹出的“网页模板”对话框中选择所需的网页模板，可以在“说明”及“预览”区域查看该模板的说明及预览图。（3）单击“确定”按钮，系统新建一个基于所选模板的网页。（4）单击“文件”菜单，选择“保存”命令，弹出“另存为”对话框。在此对话框中，输入文件名进行保存。,返 回,8.3.3 网页编辑,38,2.打开/保存网页 FrontPage 2003中，编辑某个网页之前，

22、需要先打开该网页。打开网页的方法有多种，常用的有以下几种：（1）使用“文件”菜单的“打开”命令，或“常用”工具栏的“打开”按钮，在弹出的“打开文件”对话框中选择相应的网页；（2）如需要打开的文件已在打开的网站中，在文件夹视图中双击该网页图标即可将其打开。实际上，在其他视图中双击网页图标，同样会打开指定网页。要保存一个网页，可以使用“文件”菜单的“保存”命令，或“常用”工具栏的“保存”按钮，如需另存可使用“文件”菜单的“另存为”命令。,返 回,8.3.3 网页编辑,39,3.预览网页网页制作过程中，用户可以切换到“预览”视图预览网页，也可以使用“文件”菜单的“在浏览器中预览”命令预览网页。使用后

23、者，系统会打开浏览器显示网页，如果该网页尚未保存，会弹出对话框提示用户保存网页。,返 回,8.3.3 网页编辑,40,8.3.3 网页编辑,4.设置文字格式 同其他Microsoft Office组件一样，在网页中可以输入文字，复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。在FrontPage 2003中，对文字的格式提供了相当完整的设定功能，文字格式的变化也因此多种多样。可以使用工具栏上的工具按钮或菜单命令快速地改变文字的外观。设置文字格式的一般操作步骤是：选中文字，单击“格式”菜单的“字体”命令，在弹出的“字体”对话框中设置字体的各种属性，也可以使用“格式”工具栏中相应的命令按钮。

24、虽然可以设置各种美观的字体，但是由于用户只能使用本地计算机中安装的字体显示网页，因此还是使用常见的字体为好。,返 回,41,8.3.3 网页编辑,5.设置段落格式 文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage 2003通过按Enter键划分段落。值得注意的是，段落之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按Shift+Enter键即可。实际上，按Enter键在HTML代码中插入的是标记，而按Shift+Enter键则插入的是标记。段落格式主要包括对齐方式、缩进和段落间距等。设置段落格式的一般方法如下：将插入点移动到要设置格式的段落中，或是选中该段落，单击

25、“格式”菜单的“段落”命令，在弹出的“段落”对话框中进行各种段落格式属性的设置。,返 回,42,8.3.3 网页编辑,6.设置网页属性网页属性包括网页的标题、格式、页边距等。要设置网页属性，用户可以使用“文件”菜单的“属性”命令，或者在网页的任意地方单击鼠标右键，在弹出的右键菜单中选择“网页属性”命令，FrontPage 2003将显示“网页属性”对话框。,43,6.设置网页属性,1）“常规”属性 要设置网页的“常规”属性，单击“网页属性”对话框的“常规”选项卡。“标题”框用于给出网页的标题，网页标题将显示在浏览器的标题栏中。“背景音乐”框用于指定网页的背景音乐，当用浏览器打开网页时，将自动播

26、放背景音乐。背景音乐区域的“位置”框用于指定声音文件的位置，用户可以使用“浏览”按钮选择一个声音文件；“循环次数”框用于指定声音要反复播放的次数，如果选中“不限次数”复选框，表示一直不停地播放。,44,6.设置网页属性,2）“格式”属性要设置网页的背景、颜色，可以使用“网页属性”对话框的“格式”选项卡。用户可以选中“背景图片”复选框，指定一个图片作为网页的背景图片。如果要将图片按水印形式添加，需要选中“使其成为水印”复选框。通过单击相应的下拉列表框，可以设置网页的背景颜色、文本颜色以及超链接文字的颜色。当同时设置背景图片和背景颜色时，背景图片将覆盖背景色。,返 回,45,8.3.4 插入对象,

27、1.插入水平线 在网页中输入文本内容后，还可在不同的段落、行之间添加水平线，水平线将网页分割成几个部分，使得网页更具条理性。具体操作步骤如下：（1）在准备插入水平线的位置设置插入点；（2）单击“插入”菜单的“水平线”命令，插入水平线。要修改水平线的外观，可以双击水平线，打开“水平线属性”对话框。“宽度”框用于设置水平线的宽度，“高度”框用于设置水平线的高度，“对齐方式”用于设置水平线在网页内水平对齐的方式，“颜色”列表框用于设置水平线的颜色，选中“实线（无阴影）”复选框时，水平线将被设成实心线。要为线条指定自定义样式或其他格式，可以使用“样式”按钮进行设置。,返 回,46,8.3.4 插入对象

28、,2.插入图片 图片可以使网页变得生动活泼，并能吸引用户的注意。1）图片文件的格式 在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式，文件的信息量小，适合于网络传输，因此被广泛地应用在Web站点的设计中。GIF（Graphical Interchange Format，图形交换格式）采用无损压缩方式，其主要特征是支持动画、透明度、图形渐进，但GIF图像包含的颜色不能超过256种。JPEG（Joint Photograph Expert Group，联合图像专家组）格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图片质量换取大的压缩比例。JPEG格式支

29、持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。,47,2.插入图片,2）插入图片和设置图片属性（方法同Word）3）编辑图片 利用“图片”工具栏能够完成一些常用的图像编辑功能。4）保存图片 插入图片后保存网页，如果图片不在网站文件夹中，将出现“保存嵌入式文件”对话框。如果图片在网站文件夹中，就不会出现此对话框。,48,8.3.4 插入对象,3.插入字幕 在制作网页时，可以将网页中的文字做成由左至右，或由右至左移动的动态效果，使网页更加形象生动。具体操作步骤如下：（1）将插入点设置在要插入移动字幕的位置或者选中作为移动字幕的文本，单击“插入”菜单的“Web组件”命令，弹出“插入We

30、b组件”对话框，在对话框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“字幕”，单击“完成”按钮，打开“字幕属性”对话框。,49,（2）如果已经选择了作为移动字幕的文本，此文本就会出现在“文本”框中，如果没有选择文本，可在“文本”框中输入作为移动字幕的文本。（3）“方向”区域用于指定文本的移动方向。“速度”区域用于指定文字的滚动速度，“延迟”框中的数值表示字幕滚动一步的时间间隔是多少毫秒，“数量”框中的数值表示字幕滚动一步的距离是多少像素。“表现方式”区域用于指定文字的表现方式。选中“重复”区域的“连续”复选框，移动字幕将连续滚动；若要设置字幕滚动有限次，可以取消选中“连

31、续”复选框并输入字幕重复的次数。“背景色”列表框用于设置移动字幕的背景颜色。“大小”区域用于设置字幕的宽度与高度。（4）单击“确定”按钮，即可插入字幕。,3.插入字幕,50,8.3.4 插入对象,4.插入交互式按钮 交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮时，交互式按钮会改变颜色或形状。默认情况下，交互式按钮是一个带有彩色方框的文字按钮，也可以应用图片创建交互式按钮。（1）将插入点设置在要插入交互式按钮的位置，单击“插入”菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“交互式按钮”，单击“完成”按

32、钮，打开“交互式按钮”属性对话框。（2）设置按钮字体图像（3）单击“确定”按钮，即可插入交互式按钮。,51,8.3.4 插入对象,5.插入站点计数器（1）单击“插入”菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“计数器”，在“选择计数器样式”列表中选择一种样式，单击“完成”按钮，打开“计数器属性”对话框；（2）设置计数器属性；（3）单击“确定”按钮，插入站点计数器。,返 回,52,创建超链接,Web网页的强大之处就在于其超链接，使用超链接能够将Internet中的信息有机地组织起来，使人们在丰富多彩的WWW世界轻松地漫游。超链接是指从一个网页指向一

33、个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是图片、文件、电子邮件地址等。超链接由链接载体和链接目标两部分组成。根据链接载体的特点，可以把链接分为文本超链接与图片超链接两大类。,53,8.3.5 创建超链接,1.创建文本超链接 文本超链接是指在文本上定义的超链接，单击文本超链接，会自动跳转到指向的链接目标。创建文本超链接的具体操作步骤如下：（1）选定要定义超链接的文本，从“插入”菜单中选择“超链接”命令，或单击“常用”工具栏上的“超链接”按钮，打开“插入超链接”对话框，如下图所示；,54,1.创建文本超链接,（2）在“插入超链接”对话框中选择要链接的目标网页

34、，单击“确定”按钮，插入超链接，可以看到所选定的文本变为蓝色，并且带有下划线，说明选定的文本已经被设置为超链接文本。保存网页，在浏览器中预览效果。当鼠标移至链接文字时，鼠标指针变成手形，此时单击鼠标就跳转到目标网页。,55,图片超链接是指在图片上创建的超链接，图片超链接比文本超链接显得更加生动活泼，单击图片超链接，会自动跳转到指向的链接目标。可以将整个图片设置为超链接，也可以为图片分配一个或多个热点。热点是图片上的超链接区域，包含热点的图片称为图像映射，用户单击热点区域可以转到相应的链接目标。,2.创建图片超链接,56,（1）选定要定义超链接的图片，从“插入”菜单中选择“超链接”命令，或单击“

35、常用”工具栏上的“超链接”按钮，打开“插入超链接”对话框；（2）在对话框中选择要链接的目标网页，单击“确定”按钮，即可插入超链接。保存网页，在浏览器中预览效果，当鼠标移至链接图片时，鼠标指针变成手形，此时单击鼠标就跳转到目标网页。,1）创建图片超链接,57,热点可以是图片上具有某种形状的一块区域或文本，当用户单击该区域或文本时，超链接目标会显示在Web浏览器中。在FrontPage 2003中，热点的形状可以是长方形、圆形或多边形。例如我们通过山东省地图浏览山东省各城市的民俗风情，当鼠标移至地图上的各个城市时，鼠标指针变为手形，单击后打开描述该城市民俗风情的页面。,2）为图片添加热点,58,为

36、图片添加热点，具体操作步骤如下：,（1）选择需要添加热点的图片；（2）在“图片”工具栏中，单击长方形、圆形或多边形热点按钮匹配需要的形状；（3）在图片上，采用鼠标拖动操作画出所选形状（画多边形时，可单击多边形的第一个角，然后依次单击多边形其他角的位置，最后双击完成多边形）；（4）释放鼠标，弹出“插入超链接”对话框，按照插入超链接中所讲方法创建超链接即可。,59,为图片添加热点,重复步骤（2）、（3）、（4），在图片上依次创建超链接到其他网页。当鼠标移动到热点区域时，光标变为手形，如下图所示。单击鼠标，超链接的目标网页就会显示在Web浏览器窗口中。,返 回,60,3.使用书签超链接,对于网页的超

37、链接，往往使用户跳转到目标网页的顶端，应用书签能够更严格地控制用户到达网页内的某个具体位置。书签是网页中被标记的位置或被标记的文本。,1）插入书签（1）选中作为书签的文本，或将光标定位在要插入书签的位置。（2）选择“插入”菜单的“书签”命令，弹出“书签”对话框，如右图所示，所选文本自动出现在“书签名称”框中。（3）单击“确定”按钮，插入书签，可以看到所选文本下方出现虚线。,61,2）创建书签超链接（1）选定要定义超链接的文本或图片；（2）从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对话框，如下图所示，在对话框的“链接到”栏单击“本文档中的位置”，选择要链接的书签，单击“确定”按钮，插

38、入书签超链接。保存网页，在浏览器中预览效果，单击页面中的书签超链接，页面会跳转到书签的位置。,62,4.创建电子邮件超链接,电子邮件超链接为用户发送电子邮件提供了极大的方便，单击电子邮件超链接后，允许用户书写电子邮件内容，并发往指定的地址。具体操作步骤如下：（1）选择作为电子邮件超链接的文本或图片；（2）从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对话框；（3）在对话框的“链接到”栏单击“电子邮件地址”，在“电子邮件地址”框中输入所需电子邮件地址，还可以在“主题”框中键入电子邮件的主题；（4）单击“确定”按钮，完成电子邮件超链接的创建。,返 回,63,5.创建下载文件超链接 如果要在

39、网站中提供资料下载功能，就需要创建下载链接，网站中每个用于下载的文件要对应一个下载链接。具体操作步骤如下：（1）选择作为文件超链接的文本或图片；（2）从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对话 框，在对话框中选择要下载的文件；（3）单击“确定”按钮，完成文件超链接的创建。保存网页，在浏览器中预览效果，单击创建的文件超链接时，弹出“文件下载”对话框，如下图所示，用户可以根据需要打开或保存文件。,返 回,64,8.4 网 页 布 局,网页的布局设计，是将文字、图片等网页元素，根据特定的内容和主题，在网页所限定的范围中进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。网页的布局

40、一般使用表格或框架来实现。,65,8.4 网 页 布 局,8.4.1 创建和使用表格8.4.2 创建和使用框架,返 回,66,创建和使用表格,表格由单元格构成的行和列组成，单元格中可以插入文本、图片以及其他对象。利用表格可以有条理地排列数据或组织网页布局。表格的行、列和单元格都可以进行复制、粘贴，在表格中还可以插入表格，一层层的表格嵌套使设计更加方便。FrontPage 2003提供了与Word字处理软件类似的表格处理功能，在网页中可以轻松地创建和编辑表格。,67,1.创建表格,创建表格有以下三种常用方法：（1）使用“表格”菜单的“插入”子菜单中的“表格”命令，可以对插入的表格进行精确的设置，

41、包括行和列的数目、对齐方式、单元格间距、单元格衬距、边框粗细和背景等。（2）使用“常用”工具栏的“插入表格”按钮，快速插入表格。（3）使用“表格”菜单的“绘制表格”命令，手动绘制表格。,68,2.设置表格属性插入表格后，为了使表格看上去更专业、更美观，需要设置表格的属性。,（1）设置表格行数和列数。（2）设置表格布局，包括设置表格的对齐方式、浮动、宽度等。（3）在“粗细”数值框中输入数值，即可设置表格边框的粗细。（4）在背景区域，可以通过“颜色”框设置单一色彩的表格背景，也可选中“使用背景图片”复选框，用“浏览”按钮设置图片作为表格的背景。,69,3.设置单元格属性 将光标放置在需要设置属性的

42、单元格中，使用“表格”菜单的“表格属性”子菜单中的“单元格”命令，打开“单元格属性”对话框，设置单元格属性。,在“背景”区域中可以设置单元格的背景颜色，或使用图片作为背景。,在“布局”区域可以设置水平、垂直对齐方式，指定宽度、高度、标题单元格，设置行跨距、列跨距等。在“边框”区域中可以设置单元格边框的颜色、亮边框、暗边框。,70,创建表格后，可以对表格单元格、行和列的布局和结构进行调整，以满足不同的需要。如调整行、列或单元格；插入行、列或单元格；删除行、列或单元格；合并、拆分单元格；平均分布行高、列宽；设置单元格属性等。,返 回,4.调整表格,71,创建和使用框架,框架的使用是进行网页布局设计

43、的一种重要手段。框架将浏览器窗口划分为几个区域，每个框架中都可以显示一个独立的网页。浏览器窗口中显示的网页实际是这些框架的集合，因此被称为框架网页。框架网页并不包含显示的内容，只是记录了该框架网页包含几个框架、其拆分方式以及每个框架中显示哪个网页（与其他网页的超链接）等。,72,在FrontPage 2003中，可以使用框架网页布局模板轻松创建框架网页。具体操作步骤如下：（1）单击“文件”菜单的“新建”命令，在“新建”任务窗格中选择“新建网页”中的“其他网页模板”。（2）在弹出的“网页模板”对话框中，切换到“框架网页”选项卡，选择所需的模板，如“目录”模板，可在“说明”及“预览”区域查看该模板

44、的说明及预览图。,1.创建框架网页,73,（3）单击“确定”按钮，完成框架网页的创建，如下图所示；（4）每个框架中，单击“设置初始网页”按钮可以建立与已经存在网页的超链接，从而在此框架中显示该网页；单击“新建网页”按钮可以建立显示在该框架中的新网页。,在该图窗口底部新增了“无框架”视图模式，可以为不支持框架的浏览器创建替代网页。,74,保存框架网页需要保存框架和各个框架中的网页。例如，使用“目录”模板创建的框架网页需要保存作为容器的框架网页和分别显示在两个框架中的两个网页。具体操作步骤如下：（1）使用“文件”菜单的“保存”命令，或单击“常用”工具栏的“保存”按钮，弹出“另存为”对话框。（2）在

45、“另存为”对话框右边的框架网页预览图中，深蓝色的区域或边框指明了框架中正在保存的网页。进行相应设置后，单击“保存”按钮，该网页保存完毕。（3）重复步骤（2），直至所有的框架网页都保存完毕，如使用“目录”模板创建的框架网页需要保存三次。如果某个框架网页通过单击“设置初始网页”按钮建立与已经存在网页的超链接，则不会弹出“另存为”对话框保存该网页。,2.保存框架网页,75,当使用模板创建的框架结构不能满足需要时，可以通过拆分框架制作出更为复杂的框架网页。具体操作步骤如下：（1）选择要拆分的框架，在“框架”菜单中选择“拆分框架”命令，打开“拆分框架”对话框；（2）根据需要选择“拆分为列”或“拆分成行”

46、选项，单击“确定”按钮完成拆分。也可按住Ctrl键拖动框架的边框实现拆分框架。,3.拆分框架,76,可以从框架结构中删除指定的框架。此时系统只是把框架从框架网页中删去，而此框架中的网页文件仍然存在。删除了一个框架后，其余框架会加宽以填充删除框架留下的空间。若框架网页只有一个框架，则不能删除该框架。删除框架的具体操作方法是：选择要删除的框架，在“框架”菜单中选择“删除框架”命令。,4.删除框架,77,在框架网页中可以设置框架的大小、框架的边距和在框架中是否显示滚动条等属性。具体操作方法是：选择框架，从“框架”菜单中选择“框架属性”命令，弹出“框架属性”对话框，如右图所示。,在“名称”框中输入新的

47、框架名称，即可对该框架进行重命名。在“框架大小”区域中设置宽度和高度，可以改变框架的大小，也可用鼠标拖动框架的边框直接调整框架的宽度和高度。,返 回,5.设置框架属性,78,6 创建框架超链接,框架超链接的使用使网页之间的组织更加灵活、有效。1).创建框架超链接 若要设置框架超链接，执行下列操作：（1）选择要创建超链接的文字或图片，从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对话框；（2）在“插入超链接”对话框中选择要链接的目标网页，单击“目标框架”按钮，出现“目标框架”对话框；（3）在“当前框架网页”区域中单击要用作目标的框架，单击“确定”按钮，返回到“插入超链接”对话框，在对话框

48、底部标签“目标框架”后显示设置的目标框架名称；（4）单击“确定”按钮，完成框架超链接的创建。,79,2).使用特殊的目标框架 在指定目标框架时，除了当前框架外，还提供了一些特殊的框架来创建不同效果的目标框架。这些特殊框架位于“目标框架”对话框的“公用的目标区”区域中，有以下几种：相同框架：将链接的网页显示在包含该超链接的同一个框架内。整页：将框架展开为整个窗口，显示链接网页。新建窗口：打开另外一个新窗口，显示链接网页。父框架：在当前框架的上层框架内显示链接网页。,返 回,80,8.5 创建表单页面,表单是Web服务器与客户交互的手段。表单的作用就是收集用户的输入信息，从而实现网站与用户的交互。

49、例如，用户可以用表单收集用户的个人资料，也可以用表单设计一个订货单，让用户指定要购买的商品名称、型号、数量等。,81,8.5 创建表单页面,8.5.1 插入表单域8.5.2 提交表单,返 回,82,插入表单域,表单中至少要有一个供用户输入信息的域，一个用来把信息发送给服务器的“提交”按钮，以及一个用来清除域中现有内容的“重置”按钮。当用户在表单中输入信息，单击“提交”按钮后，这些信息将被发送到服务器，服务器端程序将对这些信息进行处理。使用“插入”菜单的“表单”子菜单的“表单”命令，将插入一个非常简单的表单。该表单只有“提交”和“重置”两个按钮，但这是所有复杂表单的基础，可以在其中插入更多的表单

50、域。在FrontPage 2003中，可以插入文本框、文本区、复选框、选项按钮、分组框、下拉框、按钮、高级按钮等表单域。,83,文本框用于让用户输入一行文字。将光标放在要插入文本框的位置，使用“插入”菜单的“表单”命令，再选择“文本框”子命令，即可插入一个文本框，如下图所示。,要设置文本框的属性，可以使用“格式”菜单中的“属性”命令，也可以使用右键菜单中的“表单域属性”命令，或直接双击文本框，打开“文本框属性”对话框。在“文本框属性”对话框中，“名称”用于设置该文本框的名称，“初始值”用于设置文本框内一开始显示的内容，“宽度”用于设置文本框所能输入字符的个数，“密码域”用于设置是否让文本框内输