大学计算机应用基础电子教案.ppt

第8章网页设计与制作FrontPage2003,8.1HTML简介8.2使用FrontPage2003制作网页8.3网页布局8.4创建表单网页8.5网站的发布,8.1HTML简介,HTML（HyperTextMarkupLanguage）的中文名称为“超文本标记语言”，是一种专门用来设计网页的标记语言。8.1.1HTML的基本语法1.标记符标记符是HTML的基本元素，一个HTML文件大部分是由字符信息加上一些标记符呈现出来的。关于标记符有以下语法规则：（1）HTML中所有的标记符都用尖括号“”括起来。例如：表示换行标记符。（2）绝大部分标记符都是成对出现的，包括开始标记符和和结束标记符。二者的区别是结束标记符比开始标记符多一个“/”，例如：、等。开始标记符和和结束标记符定义了标记符所影响的范围。（3）少部分标记符不是成对出现的，只有开始标记符。例如：。（4）标记符不区分大小写，但为了提高HTML文档的可读性，一般约定标记符用大写。,2.标记符的属性为了对标记符作用的内容进行更详细的控制，大多数标记符都包含一些属性。关于标记符的属性有以下语法规则：（1）所有的属性都必须放在相应开始标记符的尖括号里，属性与标记符用空格分隔。（2）一个标记符可以有多个属性，不同的属性之间用空格分隔。属性在HTML标识符中出现的顺序是不分先后。（3）属性值放在相应的属性之后，用等号分隔。通常属性值要加双引号或单引号，但如果属性值由字母、数字组成，双引号或单引号可以省略。（4）属性名不区分大小写，但为了提高HTML文档的可读性，一般约定属性名用小写。,8.1.2HTML文件的基本结构一个典型的HTML文件的基本结构形式如下所示：网页标题正文内容,对上述基本结构形式说明如下：（1）标记符。处于HTML文档的最前端，浏览器从开始解释。而位于文档的最后一行，表示HTML文档的结束。（2）标记符。标记符是HTML文档头部的容器标记符，用于页面的基本信息描述、定义和如Jscript、CSS文件的调用等控制整个页面的一些设置。所有头部信息不会在浏览器的窗体中显示出来。（3）标记符。标记符必须出现在标记符之间，用于指定显示在浏览器标题栏中网页的标题。（4）标记符。标记符表明HTML文档的主体部分，所有需要在浏览器窗体中显示的文本及标识符都必须包含在此标志对内。,8.1.3HTML文件的编辑环境1.使用文本编辑器编辑HTML文档HTML是纯文本类型的语言，因此使用HTML编写的网页也是纯文本文件，所以可以使用任何的文本编辑器（如Windows中的记事本）新建或编辑HTML文档，但是必须以htm或html作为扩展名保存。2.使用网页编辑软件编辑HTML文档目前常用的各种网页编辑软件，如：FrontPage、Dreamweaver等，都能在后台自动生成HTML代码，用户只要在此基础上做一些修改即可，这样能够节省大量时间。,8.2使用FrontPage2003制作网页,8.2.1FrontPage2003简介1.FrontPage2003概述2.FrontPage2003的工作界面,3.FrontPage2003的视图模式当打开一个网站时，FrontPage2003显示文件夹、报表、远程网站等视图模式；当打开一个网页时，则显示设计、代码、预览等视图模式。1）网站视图模式FrontPage2003有6种网站视图模式可供选择，分别为：（1）文件夹视图。可以使用文件夹视图来直接处理文件和文件夹，并组织网站内容。在此视图中可以打开、创建、复制、移动、删除文件和文件夹。（2）远程网站视图。可以使用远程网站视图发布整个网站，或有选择地发布个别文件，还可以在两个或多个位置之间同步文件。,（3）报表视图。通过报表视图，可以分析网站内容、计算文件的总大小、指出哪些文件没有和其他文件链接等。（4）导航视图。导航视图提供了网页的分层视图，通过此视图可以添加新的导航网页，或者修改导航网页之间的相互关系。（5）超链接视图。超链接视图将网站中超链接的状态显示在一个列表中，并用图标指示该超链接已通过验证或已中断。（6）任务视图。在制作一个网站时由于工作量大，往往需要预先制作一个计划，这样就可以有条不紊地进行网站设计。在任务视图中可以方便地建立任务或查看任务完成情况。,2）网页视图模式FrontPage2003提供4种网页视图模式可供选择，分别为：（1）设计视图。设计视图是新建及打开网页首先进入的视图，可以在其中输入文本、插入图片、插入表格等，网页设计视图如图8-3所示。（2）代码视图。在设计视图中进行的操作会在代码视图中由编辑器自动转换为HTML代码。用户也可以在代码视图中输入HTML语句来编辑网页。（3）拆分视图。拆分视图将工作区拆分成上下两部分，上半部分是代码区，下半部分是设计区；无论对哪一个区域进行修改，另一个区域都会做相应的改变。（4）预览视图。预览视图可以对设计出来的网页进行整体预览。,8.2.2创建网站和新建网页使用FrontPage2003设计网页，一般的工作方式是：首先创建新网站；然后，将网站中要用到的网页素材（如图片文件、音乐文件等）添加到网站中；最后在网站中创建并设计网页。1.创建新网站2.导入文件到当前网站在FrontPage2003中，网站设计者可以通过复制或导入文件的方法将网站中所要用到的网页素材添加到网站中。3.在网站中新建网页在FrontPage2003中，新建网页有两种方法：一种是单击工具栏中的“新建网页”按钮，另一种是选择“文件”“新建”命令，在“新建”任务面板中选择“新建网页”下的选项。,8.2.3网页文本的处理1.文本的创建无论多么复杂的网页，文本都是最基本的元素。由于文本具有产生信息量大、编辑方便、生成文件小和浏览下载便捷等特点，因此，熟练掌握文本的使用对制作网页来说尤为重要。（1）添加文本。在FrontPage2003中，网站设计者可以通过键入、复制及导入等方法将收集来的资料添加到网页中。（2）插入并编辑水平线。水平线可用来分隔网页中的不同内容。在标题和主题内容之间使用水平线可以使标题一目了然，同时主题部分的内容也独立成为一体。插入水平线可选择“插入”菜单中的“水平线”命令。,2.设置文本格式（1）设置标题级别。网页中的标题分为6级，1级标题字体最大，6级标题字体最小。使用标题级别可以区分各个主题的层次关系，突出重要主题。（2）设置字体格式。字体是网页中属性最多的元素之一，通过选择“格式”菜单中的“字体”命令或格式工具栏，可对字体的形状、大小、颜色等各项属性进行设置。（3）设置段落格式。段落格式主要用于控制段落的显示形式，如：对齐方式、首行缩进等，选择“格式”菜单中的“段落”命令，或格式工具栏，可对段落的对齐方式、间距等各项属性进行设置。（4）使用项目列表与编号。可以组合不同种类的项目列表来组织不同种类的信息，列表的特点是层次分明、重点突出、结构有序。在列表中每一项都是一个单独的段落，选择“格式”菜单中的“项目符号和编号”命令，可设置不同类型的项目列表与编号。（5）设置边框和底纹。在FrontPage中可以给文字和段落加上边框和底纹，边框的选择非常丰富，底纹可以是任意的图片。选择“格式”菜单中的“边框和底纹”命令，可设置不同类型的边框和底纹。,3.设置网页属性,图8-10“网页属性”的“常规”选项卡图8-11“网页属性”的“格式”选项卡,8.2.4在网页中插入图像、动画和声音1.在网页中使用图像（1）插入剪贴画。（2）插入来自文件的图像。（3）设置图像属性。（4）用图片作为网页背景。2.插入Flash影片和视频选择“插入”“图片”“Flash影片”命令，在弹出的“选择文件”对话框中选取Flash动画文件，可以在网页中加入Flash动画。选择“插入”“图片”“视频”命令，在弹出的“视频”对话框中选取视频文件则可在网页中插入视频。双击插入的Flash动画或视频，在弹出的属性对话框中可以对Flash动画或视频的对齐方式、循环次数等项目进行设置。3.插入音频4.使用字幕,8.2.5创建超链接超链接由两部分组成，一部分是在浏览网页时可以看到的部分，称为超级链接载体，文本、图像都可以成为超级链接的载体；另一部分是超链接的目标地址，它可以是另一个网页、另一个网站、一个用于打开电子邮箱的Email地址等。1.为文本创建超链接文本超链接是指使用文本作为载体的超链接，当单击文本超链接时，会自动跳转到链接所指向的目标。2.创建图像超链接图像超链接是指使用图像作为载体的超链接，图像超链接比文本超链接更显得生动活泼。图像超链接的创建方法和文本超链接基本相同。,3.创建图像热点超链接所谓图像热点超链接指的是在同一幅图像的不同位置设置不同的超链接。在FrontPage2003中，热点的形状可以是长方形、圆形或多边形。创建图像热点超链接的具体步骤如下：（1）单击图像后选择在图片工具栏右侧的如下图所示的长方形等热点按钮。（2）在图片的某些区域，拉动鼠标所选形状画上热点，当形状画完释放鼠标按钮时会自动弹出“插入超链接”对话框。（3）在对话框中选择要链接的文件，或在地址栏中输入链接的网站地址。,4.创建书签超链接书签超链接常常被用于跳转到特定的主题或文档的顶部，使访问者能够快速浏览到选定的位置。创建书签超链接，首先要创建一个书签，然后建立指向指定书签的链接。书签可以是字符串，也可以是光标所在位置。建立书签的具体步骤如下：（1）把光标置于需要设置书签的地方，或在该处选择一些文本。（2）选择“插入”“书签”命令，弹出“书签”对话框如图8-23所示。（3）输入书签的名称，单击【确定】按钮。建立书签超级链接的具体步骤如下：（1）选择要建立链接的文本，右击后在快捷菜单中选择“超链接”命令。（2）单击【书签】按钮选择书签，或直接在“插入超链接”对话框的地址栏中输入#号加上书签名。,5.创建电子邮件超链接电子邮件超链接为浏览者发送电子邮件提供了很大的方便，当单击电子邮件超链接时，能即时打开浏览器默认的电子邮件处理程序，用户书写内容后可直接发往指定地址。6.插入交互式按钮交互式按钮是一种有动画效果的按钮，当鼠标指向按钮上方时，按钮外观会发生变化。7.设置链接文本颜色在FrontPage2003可以分别对未访问过的超链接文字和已访问过的超链接文字设置不同的颜色，使它们相互区分，方便浏览者的浏览。,8.3网页布局,8.3.l创建表格及在网页布局中使用表格表格是网页中使用最频繁的工具，除了排列数据和图像外，更多的是用于网页的布局。1.创建表格在FrontPage2003中，创建表格的方法主要有以下三种：1）使用命令2）使用插入表格工具栏生成表格（1）单击表格工具栏中的表格工具。（2）用鼠标在设置框中框选表格的行、列数。3）手绘表格（1）选择“表格”“手绘表格”命令，鼠标指针就会变成铅笔形状。（2）使用鼠标在网页中直接绘制表格。,2.编辑表格表格创建后，可以根据需要插入新的行和列、合并和拆分单元格、删除不需要的行和列3.设置表格属性（1）设置表格对齐方式。（2）设置边框属性。（3）改变表格高度和宽度。（4）设置单元格边距和间距。（5）设置表格背景。4.设置单元格属性,8.3.2创建框架及框架链接框架是一种特殊的网页形式，它可以将一个网页分成两个或两个以上的区域，每个区域都是独立的，互不影响。各区域之间可以建立超链接，通过单击一个区域中的超级链接改变另一个区域中的内容。框架适用于建立目录、文章列表、导航栏等需要在一个窗口中显示多个网页的场合。1.框架网页的创建2.设置框架网页属性3.框架网页的保存,8.4创建表单网页,使用表单必须具备两个条件：一个是建立含有表单元素的网页文档；另一个是具备服务器端的表单处理应用程序。8.4.1创建表单1.用模板或表单网页向导创建表单在FrontPage2003中可以使用模板和表单向导创建表单网页，通过使用模板或表单向导，可以确定表单的外观与内容。方法如下：（1）选择“文件”“新建”命令，单击窗口右端“新建”面板中“新建网页”下的“其他网页模板”。（2）在“常规”选项卡中选择所需要的模板或表单向导。（3）单击【确定】按钮。2.使用“表单”命令创建表单使用“表单”命令创建表单的方法如下：（1）选择“插入”“表单”命令下的“表单”子命令，在网页中插入一个仅包含【提交】和【重置】两个按钮的表单。（2）选择“插入”“表单”命令下的“文本框”等子命令，在表单中插入其他表单控件。,8.4.2表单控件表单是由表单控件组成的，表单控件是用户输入信息的手段。在FrontPage2003中有11种表单控件，分别是：文本框、文本区、文件上载、单选按钮、复选框、下拉框、分组框、按钮、高级按钮、图片、标签。1.文本框1）作用文本框是最常用的表单控件，用于让用户输入少量的文字，如用户名、密码等。2）主要属性双击文本框控件，会弹出文本框属性对话框，如图8-33所示，主要属性如下：（1）名称：文本框控件的名字，默认为T加上不同的数字。（2）初始值：设置文本框内一开始显示的内容，一般可保持空白。,（3）宽度：输入数字，设置在文本框在表单中的宽度。（4）密码域：是否原样显示文本框内输入的字符，如果选择“是”，则输入的字符一律以“*”替代显示。（5）【验证有效性】按钮：单击此按钮会弹出如图8-34所示“文本框有效性验证”对话框，可用于设置所输入字符的类型、最大长度等限制性规则。,图8-33“文本框属性”对话框图8-34“文本框有效性验证”对话框,2.文本区文本区的作用和和属性与文本框基本类似，不同之处仅在于文本区可接受多行文本，且可出现滚动条。3.复选框1）作用复选框是一组可供勾选的表单控件，一次可以选中多个。2）主要属性双击复选框控件，会弹出“复选框属性”对话框，如图8-35所示，主要属性如下：（1）名称：复选框控件的名称字，默认为C加上不同的数字。（2）值：设置选中的复选框的值。当用户提交表单时，这个值会被发送至服务器端的应用程序中。（3）初始状态：设置在初始状态下该复选框是否选中。,4.单选按钮双击单选按钮控件，会弹出“选项按钮属性”对话框，如图8-36所示，单选按钮的作用和和属性与复选框基本类似，不同之处在于一组单选按钮中只能选中其中的一个，而且单选按钮的形状是圆的。5.下拉框1）作用下拉框不仅可以提供多个选项以供选择，而且能将这些选项隐藏在列表框内，只有打开下拉框才能看到全部选项。2）主要属性双击下拉框控件，会弹出“下拉框属性”对话框，如图8-37所示，主要属性如下（1）名称：下拉框的名字。（2）允许多重选项：按Ctrl+单击可以选中多个项目。（3）单击【添加】按钮，弹出“添加选项”对话框如图8-38所示，在“选项”文本框中输入要添加的选项。,图8-37“下拉框属性”对话框图8-38“添加选项”对话框,6.按钮1）作用建立表单时，默认提供【提交】和【重置】两个按钮，其中【提交】按钮用于将表单信息提交至处理信息的应用程序或脚本；【重置】按钮用于以原始值重新设置所有的表单控件。用户也可以使用“插入”“表单”“按钮”命令自行插入按钮。2）主要属性双击按钮控件，会弹出“按钮属性”对话框，如图8-39所示，主要属性如下：（1）名称：按钮的名字。（2）标签：按钮表面显示的文字。（3）按钮类型：提供了3种按钮以供选择。,8.5网站的发布,在自己的计算机上编辑完网站以后，可以把网站的文件复制到一个大家都可以访问的服务器上，这样别人就可以通过浏览这个服务器来来访问我们的网站。我们把这个过程叫做网站的发布。8.5.1申请主页空间网站的发布首先要申请域名及主页空间。申请的域名有两种类型，一种是收费的，另一种是免费的。目前接受收费域名申请的ISP很多，有的还提供一定的主页空间，可以直接上传发