1、计算机文化基础第8章网页制作第八章 网页制作教学目标： 掌握站点与网页的基本操作 掌握表格的使用以及使用表格布局页面，框架的创建和 编辑方法 熟练应用网页编辑的技术，包括网页文本的编辑和格式 化，设置段落格式，设置网页属性，插入和编辑图像等 全面掌握在FrontPage中网页超链接的创建、属性的设置 以及表单的创建等。 掌握动态网页的设计以及网页的发布。 8-1 HTML简介HTML是超文本标记语言（Hypertext Markup Language）的英文缩写，是WWW技术的基础。它使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制文本的显示。用HTM
2、L语言编写的文件，称为HTML文件。它通常存储在Web服务器上，客户端通过浏览器向Web服务器发出请求，服务器响应请求并将HTML文件发送给浏览器对文件中的标记做出相应解释，以页面的形式呈现在用户屏幕上。因此，HTML文档又称为网页（Web Page）。用HTML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名。HTML文件可用任何文本处理软件（如记事本）编写。8.1.1、HTML语言概述HTML语言是由世界性的标准化组织W3C制定的，通过htt:/www.w3.org网站可以了解HTML标准的最新动态。、HTML文件的基本构成1、HTML文件的组成：每一个HTML文件都包
3、括HTML标记和文本内容两部分。2、HTML标记：HTML标记负责控制文本显示的外观和版式，并为浏览器指定各种链接的图像、声音和其他对象的位置。其一般格式为： 文本内容多数HTML标记同时具有起始标记和结束标记，且成对出现；但也有些HTML标记没有结束标记。HTML标记不区分大小写。HTML标记还具有一些属性。指定对象的特性，如背景颜色、文本字体大小、对齐方式等。属性一般放在“开始标记”中，格式如下： 文本内容其中，标记名和属性、属性和属性之间用空格分隔。、HTML网页的结构【例1】从上例可看出，HTML文件一般都是以开头，以结束。其文件结构由两部分组成。头部（head）：以开始，以结束的部分
4、。通常文件的标题、语言字符集信息等，都放在头部信息中。最常用的标记是，它用来定义网页文件的标题。当网页文件被打开后，标题将显示在浏览器的标题栏中。正文主体（body）：正文主体是HTML文件的核心内容，它以开始，以结束。标记具有一些常用的属性，格式如下： 其中，bgcolor为背景颜色，color为文本颜色，n为六位十六进制数。如果网页使用背景图像，格式为： HTML对格式的要求并不严格，当HTML文件被浏览器扫描时，所有包含在文件中的空格、回车等均被忽略。因此，可将一行写为两行或多行，在浏览中结果是一样的。（3）.把记事本文档保存成1.htm或者1.html，结果如下图：8.1.2、HTML
5、语言的基本语法、文本布局1、段落标记用标记指定文档中一个独立的段落。标记定义的两个段落之间留有一个空行。2、换行标记标记强制文本换行。该标记只有开始标记，是单标记3、水平线标记标记用于在网页中插入条水平线，同样也是单标记。、文字格式1、 标题标记格式：标题文字内容运行结果如下图：2、 字体标记注意事项：#n其中后面的6位16进制数分别前两位为红色值，中间两位为绿色值，最后两位为蓝色值。3、字形标记字形标记用于设置文字的粗体、斜体、上标、下标、下划线等。：粗体：斜体：下划线：上标：下标、插入图片运行结果如下图：、超链接例子：把插入的福娃图片链接到搜狐网，程序如下图：运行结果如下图：、使用表格在网
6、页中可以插入表格。1、格式：定义表格；：定义表行；：定义表列。2、属性border属性：设置表格边框的宽度；Width、height属性：设置表格或表项的宽度、高度；cellspacing和cellpadding属性：设置单元格之间的间隙和单元格内部的空白；align属性：设置表格或表项的对齐方式；bgcolor和background属性：设置表格背景的颜色和背景图像。8-2 FrontPage 2003概述用FrontPage2003的“布局表格和单元格”功能布局网页时，需要通过两部分来完成。首先通过“布局表格”功能来为网页布局创建一个框架，然后通过“布局单元格”功能为该框架填充包含有网页内
7、容（包括文本、图像、Web部件和其他元素）的区域，也就是单元格。下面我们就以设置一个单位网站首页为例来了解一下用布局表格给网页布局的过程。 8.2.1frontpage基本属性设置1、首先打开Microsoft Office FrontPage2003（以下简称FRONTPAGE2003），点到设计页，见图1，先插入表格，在软件里做帖一定要熟练掌握表格，要养成用表格定位的好习惯。8-2-1图2、打开菜单拦里的表格-插入-表格，点击。8-2-2图3、 点击后出来表格属性的设置框，如图设置整个帖的外边框，8-2-3图4、 介绍一下表格属性的具体设置内容8-2-4图（1）设置表格的行数，本例设置的是
8、一行；（2）设置表格的列数，本例设置的是一列；（3）设置表格的对齐方式，本例设置了居中，大家可以根据自己的需要设置；（4）这里设置表格的宽度，有2种选择，当你需要一个固定大小的表格时，选像素单位，否则就选用%单位。本例设置了70%宽度，宽度下面设置的是高度，和宽度同样设置，一般软件做帖不设置高度；（5）单元格的衬距和间距，衬距是指表格里的内容和表格边的距离，间距是指弹元格与单元格间的距离，这个只要大家多试几次就会明白，本例选了4；（6）设置边框先条的粗细和颜色，大家也可以自己试着换个种数字和颜色看看效果。这样能加深理解，本例选边框粗细为1，颜色为黑色；（7）设置亮边框和暗边框的颜色，亮边框一般
9、指表格中朝阳的部分，暗边框一般指表格的阴影部分，这个大家可以随便设置下看看效果，本例没有选颜色；（8）设置背景，有2种选择，一个是颜色，一个是背景图片，本例是设置的背景图片，可以点开浏览选你硬盘里的图片，也可以直接填入图片链接，本例填了图片的链接；（9）别忘了点上折叠表格边框。5、确定后就插入了一个金黄色背景的表格，这就是整个贴的外边框，也就是我们看到的最外面的一个金边。8-2-5图6、例帖中最外面的金边是很窄的，和我们插入的表格看上去不一样，这就需要在前一个表格里再插入一个以红色为背景的表格，其实帖子的边框不管多复杂，都是一个一个表格套出来的，所以说熟练掌握表格是很重要的。现在我们在金色的表
10、格里再插入一个表格，把光标点在表格内，然后重复第2第3步，大家按照图片设置，确定后可以看见在金色的框里又插入了一个以红色为背景的表格。8-2-6图8-2-7图以此类推，例帖里还需要再插入2个表格才能有2条金边的效果，大家最好自己试着做，2个表格的属性设置见图，到此为止，边框设定就完成了。8-2-8图8-2-9图8-2-10图7、在frontpage里插入图片是很容易的，你只要点菜单上的插入-图片，就可以选择图片的来源了。8-2-11图8、为了定位整齐，建议在插入图片前先插入一个表格，然后在表格里插入图片。如果想在图片上添加透明的GIF、FLASH，就一定要先画表格了。本例就是在图片上加上了透明
11、的GIF图片，也可以换成透明的FLASH，现在开始讲解。本例插入了2张图片，一张漂亮MM的是作为了背景图，因为本例透明GIF、透明FLASH都是在背景图上显示的，另一张是透明的GIF图，现在看看漂亮MM图是怎么变成背景的，先要了解这张图的标准尺寸，本例图片尺寸为300*400，所以要先画一个300*400的一行一列表格，表格用图片做背景8-2-12图9、注意看图上的箭头，宽和高全选择了像速，这样才能准确设置表格的大小，下面一个箭头就是做为背景的漂亮MM图的链接，点确定后看看效果，这样一个以漂亮MM为背景的表格就画好了。8-2-13图10、再看看怎么插入透明FLASH，同样把光标放在表格内，点菜
12、单上的插入-图片-FLASH影片，插入FLASH后，一定要设置FLASH的属性，因为你插入的FLASH是不透明的，一定要设置成透明才行，在FLASH上点鼠标右键，选择FLASH影片属性，注意箭头的指向，（1）一定不能忘记，透明前要打勾；（2）（3）设置FLASH的大小，设置的时候可以把（4）前面的勾去掉，这样你才可以任意设置FLASH的大小数值。现在再回预览看看是不是透明FLASH效果出来了？到此图片上加透明GIF、透明FLASH就全完成了。8-2-14图8-2-15图8-2-16图 透明GIF和透明FLASH是怎么定位的，一般表格里的内容定位需要设置单元格属性，所以透明GIF和透明FLASH
13、的定位也需要设置单元格的属性，在表格里点鼠标右键，点开单元格属性，和表格属性的设置差不多，大家可以多数值几次看看效果，本例只设置了居中。8-2-17图8.2.2 怎么插入字和滚动字幕在FRONTPAGE里插入字是很容易的，一般在光标的位置输入字就可以了，不过为了准确定位，我建议要养成把字插入在表格里的习惯。看看图片的上方的几行字是怎么上去的，先在图片上方插入一个一行一列的表格。8-2-18图确定后效果：8-2-19图我们可以看见一个虚线的表格边框线，你可以点到预览看看，在预览里是不显示的。如果你不希望表格里的字居中，那么你就可以输入字了；如果想把字居中，那就还要设置这个表格的单元格属性。8-2
14、-20图确定后光标就居中了，然后，在这个表格里输入的每一行字全部都是相对表格居中的。字输入完毕，就可以设置字的属性了，选中需要设置的字，点右键找到字体点开。8-2-21图到此字的插入就完成了。8-2-22图8-2-23图现在看看怎么让字滚动，我们在图片下面做一行滚动字幕“影画世界教学帖一”，首先和插入一般字体一样，先插入一个一行一列的表格，如果选择菜单栏里插入-插入WEB组件。8-2-24图左面选动态效果，右面选字幕，然后点击完成，会出来一个设置字幕属性框8-2-25图点开样式后，我们还需要点开格式设置字的属性，全部确定后效果，在设计页里是看不到字动的，你可以切换到预览页看效果。到此左右移动的
15、字幕就完成了。8-2-26图8.2.3插入帖子的背景和音乐我们现在看到的帖子四周背景是空的，例帖中有很漂亮的花背景，现在就看看怎么做的，其实是很简单的，我们学到现在还没设置过网页属性，这些背景和音乐都是在网页背景里实现的，现在开始设置。在帖子上点右键，找到网页属性。8-2-27图点开后，一共有5页可以设置，在常规页里可以添加帖子的音乐。8-2-28图在格式页里添加背景，在高级页里设置帖子4面的距离，本例上下各设置了50，其他的一般用默认。8-2-29图8-2-30图8.2.4书签超连接制作如下图8-2-31图样的frontpage网页。 定义书签：对标题文字“计算机”以及水平线下方的文字“计算
16、机的诞生”、图片分别建立书签，书签名称依次为“计算机”、“诞生”、“CPU”； 选中文字“计算机的诞生”，选【插入】【书签】，出现“书签”对话框，由于书签名与文字内容正好一致，直接【确定】即可（如下图）； 选中文字“计算机的诞生”，选【插入】【书签】，出现“书签”对话框，修改书签名为“诞生”后【确定】（8-2-33图）。图5.49 设置图片书签 选中图片，选【插入】【书签】，出现“书签”对话框，输入书签名“CPU”后【确定】（如图8-2-34图）。 建立超级链接：将文字“计算机诞生”、名为“Pentium芯片”的悬停按钮以及“箭头”图片字依次分别超级链接到名为“诞生”、“CPU”、“计算机”的
17、书签处。 选中文字“计算机诞生”，选【插入】【超连接】，出现“创建超连接”对话框， 设置级链接到名为“诞生”的书签后【确定】（如8-2-35图）； 选中名为“Pentium芯片”的悬停按钮，【右击】【悬停按钮属性】，在出现的“悬停按钮属性”对话框中单击【浏览】按钮，出现“选择悬停按钮超连接”对话框，链接到名为“CPU”的书签后【确定】（图8-2-36图）；选中图片，选【插入】【超连接】，出现“创建超连接”对话框，设置级链接到名为“计算机”的书签后【确定】（图8-2-37图）；用同样的方法设置另一个图片的超连接。预览切换到【预览】窗口，分别单击各超连接，体会书签超链接的作用。8.2.5创建与保存
18、框架网页首先制作图8-2-38的网页。 新建一个模板为“横幅和目录框架网页”的框架网页（图8-2-38图）；制作方法 【文件】【新建】【网页】，出现“新建”对话框； 在“框架网页”页面中选“横幅和目录”模板，【确定】,出现一个新的框架网页。 设置每个框架中的内容：A) 在横幅框架中输入文字“计算机信息技术”，隶书、加粗、6号字、粉红色，并居中对齐；操作步骤 单击横幅中“新建网页”按钮，出现空白网页（图8-2-39图）； 在空白网页中输入文字“计算机信息技术”，并设置：隶书、加粗、6号、粉红色以及居中对齐等（图8-2-40图左图）。B) 在左框架中分行键入“简介”、“WORD文档”、“Excel
19、表格”、“PowerPoint”、“理论自学题目”；制作方法： 单击左框架中“新建网页”按钮，出现空白网页； 在空白网页中分行输入文字“简介”、“WORD文档”、“Excel表格”、“PowerPoint”、“理论自学题目”等。C) 右框架超连接到任意制作的hua.htm的网页；制作方法： 单击右框架中“设置初始网页”按钮，出现“创建超连接”对话框（图8-2-40图）； 在“创建超连接”对话框中选FP4文件夹、简介.htm文件，【确定】，。 保存框架网页。横幅命名为top.htm、左框架命名为left.htm、整个网页框架命名为index.htm，分别保存到制作的站点文件夹中。制作方法： 选【
20、文件】【另存为】，出现“另存为”对话框； 本框架由“横幅”、“左”、“右”框架三部分以及“主”框架组成，系统将会给每一个框架建立（链接）对应的网页文件，因此需要保存的网页文件原则上应该有四个。首先出现的是主框架的保存界面（图8-2-41图左图），选存放站点文件夹，在文件名框中输入index.htm，单击“保存”按钮；接着出现横幅框架的保存界面（图8-2-41图右图），选存放站点文件夹，在文件名框中输入Top.htm，单击“保存”按钮；再次出现的是左框架的保存界面（图8-2-42），选存放站点文件夹，在文件名框中输入left.htm，单击“保存”按钮。82.6框架属性打开站点中名为index.h
21、tm的网页，完成如下编辑操作后保存在站点中，样文见图8-2-43图。1、打开站点与网页： 【文件】【打开站点】，在“打开站点”对话框中选站点文件夹，【打开】。 【文件】【打开】，在“打开文件”对话框中选index.htm，【打开】。 设置横幅框架的高度为50像素，边距的高度6，不显示滚动条。设置框架间距为10，显示边框，见图8-2-44图；制作方法： 光标定位在横幅框架内，选【框架】【框架属性】，出现“框架属性”对话框； 在“框架属性”对话框中设置：“框架大小”栏中高度为50像素，“边距”栏中高度6，“选项”栏的“显示滚动条”文本框中选“从不”； 单击“框架网页”按钮，出现“网页属性”对话框；
22、 在“网页属性”对话框中选“框架”页面，设置：框架间距为10，选中“显示边框”（打勾）。说明边距的高度、宽度是指所选定的网页内容与所在框架的上边框、左边框的距离，是某框架的属性；在“网页属性”中的框架间距是指分割框架的框线的粗细程度，是整个框架的属性，见图8-2-45。 将右框架的初始网页更换为“简介.htm”,见图8-2-46图。制作方法： 光标定位在右框架内，选【框架】【框架属性】，出现“框架属性”对话框；图5.70 框架属性说明 在“框架属性”对话框中，单击“初始网页”文本框右侧的【浏览】按钮，出现“编辑超连接”对话框； 选中“hua.htm”文件，单击【确定】，返回“框架属性”对话框，
23、单击【确定】。 拆分框架。将左框架拆分为上下两个框架，并设定左上框架的高度为190像素，左下框架插入一个jpg图片；制作方法： 光标定位在左框架内，选【框架】【拆分框架】，出现“拆分框架”对话框。在“拆分框架”对话框中选“拆分成行”，【确定】（图8-2-47），结果见图8-2-48左图； 单击左下框架中【新建网页】按钮，出现空白网页。再选【插入】【图片】【来自文件】，出现“图片”对话框（图5.75）。在“图片”对话框中选FP4文件夹中图片FP002.JPG，【确定】(图5.76左图)； 光标定位在左上框架内，选【框架】【框架属性】，出现“框架属性”对话框，在“框架属性”对话框中设置“框架大小”
24、中的高度为190像素，【确定】（图8-2-48）。 保存修改结果，左下框架网页命名为left1.htm。制作方法: 【文件】【保存文件】，出现“另存为”对话框，这是因为拆分框架后增加了一个左下框架，因此系统要求用户输入对应的网页文件名（图8-2-49）； 选站点文件夹，在文件名框中输入LEFT1.HTM，单击【保存】。注意在【保存文件】操作会自动对主框架网页文件“index.htm”以及其他已经链接的网页进行保存！ 8.2.7编辑框架中的网页打开站点中名为index.htm的网页，完成如下编辑操作后保存在站点中，样文见图8-2-50。打开站点与网页： 【文件】【打开站点】，在“打开站点”对话框
25、中选站点文件夹，【打开】。 【文件】【打开】，在“打开文件”对话框中选index.htm，【打开】。 设置横幅框架中的网页背景音乐为FPYL02.WAV，背景为蓝绿色，对文字“计算机信息技术”应用DHTML效果：当网页加载时应用从左侧到右侧擦除效果；操作步骤 光标定位在横幅框架内，右击【网页属性】。分别在“常规”页面中设置背景音乐FPYL02.WAV，在“背景”页面中设置蓝绿色背景，【确定】（图8-2-51）； 【格式】【动态DHTML效果】，出现“DHTML效果”对话框，设置：开启为“网页加载”，应用为“擦除”、“从左侧到右侧”，关闭对话框（图8-2-52）； 保存修改结果。由于横幅框架链接
26、的top.htm网页文件进行了以上的修改，所以需要保存。具体操作是：在保证横幅框架被选中（有深蓝色粗边框）的前提下，选【框架】【保存网页】(图8-2-53)。 对左（上、下）框架建立超连接的操作分别如下：“简介”超连接到网页“简介.htm”，目标框架为“网页默认值(main)”；“WORD文档”超连接到文件名为“机器语言.doc”的WORD文档，目标框架为“新建窗口”；“EXCLEL表格”超连接到文件名为“房产信息.xls”的电子表格，目标框架为“contents1”（左下框架）；“理论自学题目”超连接到名为yl.exe的可执行文件，目标框架为“网页默认值(main)”； “POWERPOIN
27、T”超连接到文件名为“CPU外观.htm”的网页形式演示文稿(由“CPU外观.PPT”文件生成)，目标框架为“新建窗口”。操作步骤 选中文字“简介”，选【插入】【超连接】，出现“创建超连接”对话框，在对话框中选“简介.htm”,由于“目标框架”中已是“网页默认值(main)”不必改变，单击【确定】即可（图8-2-54）； 选中文字“WORD文档”，选【插入】【超连接】，出现“创建超连接”对话框，在对话框中选“机器语言.doc”,单击“目标框架”右侧的【更改目标框架】按钮，出现“目标框架”对话框，选“公用的目标区”中“新建窗口”（图8-2-55），单击【确定】返回“创建超连接”对话框，再单击“创
28、建超连接”对话框的【确定】按钮； 选中文字“EXCLEL表格”，选【插入】【超连接】，出现“创建超连接”对话框，在对话框中选“房产信息.xls”（图5.82）,单击“目标框架”右侧的【更改目标框架】按钮，出现“目标框架”对话框，单击“当前框架网页”中的左下框架（图8-2-55），单击【确定】返回“创建超连接”对话框，再单击“创建超连接”对话框的【确定】按钮； 选中文字“理论自学题目”，选【插入】【超连接】，出现“创建超连接”对话框，在对话框中选“yl.exe”,由于“目标框架”中已是“网页默认值(main)”不必改变，单击【确定】即可（图8-2-55）； 启动PowerPoint，打开“CPU外观.PPT”文件，【文件】【另存为web页】，在“文件名”框中系统会自动生成文件名相同、但扩展名为.htm的文件名“CPU外观.htm”，可以直接单击【保存】（图8-2-55），关闭PowerPoint；回到FrontPage界面，选中文字“POWERPOINT”，选【插入】【超连接】，出现“创建超连接”对话框；单击【更改目标框架】按钮，在“目标框架”中选“新建窗口”，【确定】，返回“创建超连接”对话框（图8-2-55）；在对话框中单击URL框右侧【制作一个指向您计算机上文件的超连接】按钮，出现“选择文件”对话框，选FP4文件夹、文件CPU外观.htm，【确定】（图8-2-56）。
