九章网页制作

《九章网页制作》由会员分享，可在线阅读，更多相关《九章网页制作（81页珍藏版）》请在金锄头文库上搜索。

1、蔼腿睛霖尉赡筐氨凌掖箭峦炎剃雪傣挫平平宏贪坎察券围纺沈皮珊顷竭梧九章网页制作九章网页制作第九章第九章 网页制作网页制作 稿褐讳痊猫寞腔坤种扮藻焊褂式臀沥楞拙匹鹰娄诱救亮以需省瓮隆芥苯傀九章网页制作九章网页制作目 录上一页下一页退 出第九章 网页制作9.1 HTML9.1 HTML简介简介 9.2 FrontPage9.2 FrontPage概述概述 9.39.3网页制作网页制作 9.49.4网页布局网页布局 9.59.5创建表单页面创建表单页面 9.69.6网页的发布网页的发布商昔缉闽他获砚禹尘帘梳科招以汰鞍术增试辫馋测迢砷狄慑业禁猜朱根刚九章网页制作九章网页制作7/21/20242第九章网页

2、制作目 录上一页下一页退 出9.1 HTML简介 HTML即HyperText Markup Language 的缩写。它使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制文本的显示。 我们把用HTML语言编写的文件称为HTML文件。它通常被存储在Web服务器上，客户端通过浏览器向Web服务器发出请求，服务器响应请求并将HTML文件发送给浏览器，然后由浏览器对文件中的标记作出相应的解释，以页面的形式呈现在用户屏幕上。因此，我们又把HTML文档在Web浏览器中的这种表现形式称为Web页面 (Web Page)。 HTML语言是一种标记语言，简单易学。用HT

3、ML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名，我们可以使用任何文本处理软件（例如：记事本）编写。 惹愈缠畏恋喊笋函随逝讲凛辊蹋浦骋忧串牌竿张掳宗玲藐募戳记址贪规黍九章网页制作九章网页制作7/21/20243第九章网页制作目 录上一页下一页退 出9.1.1HTML语言概述9.1.2HTML语言的基本语法9.1 HTML简介帮或伯赐泥潜锋逸樱鹰滴图画津缝屁寄菜夫博垦靛赋卯欲呈憾砸场蛆蟹烩九章网页制作九章网页制作7/21/20244第九章网页制作目 录上一页下一页退 出9.1.1 HTML9.1.1 HTML语言概述语言概述 HTML语 言 是 由 世 界 性 的 标 准

4、 化 组 织 W3C(Wortd Wide Web Consortium)制定的。目前，其最新的标准版本是HTML 4.0。1. HTML1. HTML文件的基本构成文件的基本构成Internet中的每一个HTML文件都包括两部分：（1）文本内容：含有需要展现的具体信息。（2）HTML标记：负责控制文本显示的外观和版式。多数HTML标记的书写格式如下： 标记名文本内容标记名标记名文本内容标记名 某些HTML标记还具有一些的属性（Attribute）。这些属性指定文本的一些特性，如背景颜色、字体大小、对齐方式等。标记属性的使用格式如下：标记名标记名 属性属性1=值值1 属性属性2=值值2 文本内

5、容文本内容 标记名标记名靛汉同燃挪蔓毯守垄齐碴烙斥方衰共藤备刊章兜西勇酸乾痰敷新兼乏战韧九章网页制作九章网页制作7/21/20245第九章网页制作目 录上一页下一页退 出9.1.1 HTML9.1.1 HTML语言概述语言概述标记名通常写在“”内。一般的HTML标记都具有起始和结束标记，并且成对出现，两者控制中间的文本，结束标记前要加“”。但并不是所有的HTML标记都具有起始和结束标记，有些则没有结束标记。HTML标记不区分大小写。如：HTML、html或HtMl，其结果都是一样的。标记名称和属性之间用空格分隔。如果标记有多种属性，属性之间也要用空格分开。栈宫骨附渤神靶社滋椭剑嘴相蛰罪莉燃众粗

6、涟云叠国诫成蔡皮调慌街轮疾九章网页制作九章网页制作7/21/20246第九章网页制作目 录上一页下一页退 出9.1.1 HTML9.1.1 HTML语言概述语言概述2. HTML2. HTML网页的结构网页的结构HTML文件的层次结构：一般HTML文件都是以开头，又以结束。其文件结构由以下两部分组成：（1）头部（Head）HTML文件的头部由和标记定义。通常情况下，文件的标题、搜索引擎所用的关键字以及语言字符集信息等都放在头部信息中。（2）正文主体（Body） 由和标记定义。标记具有一些常用的属性，格式为：其中，bgcolor为背景颜色；text为文本颜色。n为六位十六进制数。如果网页使用背景

7、图像，格式为：翔逛扭扇敝竖誉蕊蒋圃样蛔顶间贵死产肺疼亥宪痢勘奔衔咕伴抉逻莆迢矾九章网页制作九章网页制作7/21/20247第九章网页制作目 录上一页下一页退 出9.1.2 HTML9.1.2 HTML语言的基本语法语言的基本语法1. 1. 文本布局文本布局(1)段落标记标记指定文档中一个独立的段落。使用格式如下：标记定义的两个段落之间留有一个空行。(2)换行标记标记可以强制文本换行。该标记只有开始标记。(3)水平线标记水平线标记用于在网页中插入一条水平线。使用格式如下：(4)居中标记标记中包含的内容显示在页面中央。揖喻汐翠酉纬募服埃砧逝冀抢宝查紧潞掸滑绵狙酪鞍景抡冕秩奈白继厂涩九章网页制作九章

8、网页制作7/21/20248第九章网页制作目 录上一页下一页退 出9.1.2 HTML9.1.2 HTML语言的基本语法语言的基本语法例例9-2 9-2 在网页中设置段落和页面格式。 文本布局 在这里我们首先向您介绍有关HTML语言的基本知识和基本语法。然后，讲授如何使用HTML语言编写您的Web页面。段落左对齐段落居中段落右对齐 恶头冬腆殴慨蛛皇醉切惠预无层校羌医景阔傲屹躲奥拇惑枚铆蜒浙滦昌蚕九章网页制作九章网页制作7/21/20249第九章网页制作目 录上一页下一页退 出9.1.2 HTML9.1.2 HTML语言的基本语法语言的基本语法2. 文字格式文字格式HTML语言中用于文字格式化的

9、标记有：（1）标题标记标记定义文字标题。标题文字将以指定大小，黑体居中显示。格式： 标题文字标题文字 其中，n为1到6的数字，表示字体大小。（2）字体标记字体标记用来对文字格式进行设置，主要具有以下属性：1)size属性用来控制文字的大小，其格式为：，n=1,2,3,4,5,6,7，默认值为3。2)color属性用来控制文字的颜色，其格式为：，n是一个十六进制的六位数。3)face属性用来指明文字使用的字体，其格式为：霜贿连膀迅梳玫叭雕厉帕绣吗搞市或胚镑绸伪亿糠卯卞衰境钳绽辉坟泳咐九章网页制作九章网页制作7/21/202410第九章网页制作目 录上一页下一页退 出9.1.2 HTML9.1.2

10、 HTML语言的基本语法语言的基本语法（3）字形标记 设置文字的粗体、斜体、上标、下标、下划线等。标记格式 字形结果 粗体 斜体 下划线 株俄藩胶撤铲肿箍邢百旦荒提梢时辉骏烩状咆酞蠢场俱捡锨价夫藐葱蚂撒九章网页制作九章网页制作7/21/202411第九章网页制作目 录上一页下一页退 出9.1.2 HTML9.1.2 HTML语言的基本语法语言的基本语法3. 插入图片插入图片标记将图片插入网页中。该标记具有以下属性：(1)src属性：指明图片文件所在的位置。格式：其中URL是指图片文件存放的位置。(2)alt属性：图片的文字说明，当鼠标指针指向该图片时，该说明性文字弹出。格式：(3)height

11、和width属性：设置图片显示区域的高度和宽度。格式：其中height和width属性中n1、n2的取值为像素数，像素数越大，图片显示越大。(4)border属性：设置图片文件的边框。格式：设置图片的边框。其中n为像素数。(5)align属性：设置图片相对于文本的位置关系。格式：顶边对齐/垂直居中/底边对齐/左对齐/右对齐盅坯荚截秩鹰柞汇谨疙矿归讶复搐傣贸恐率黎某馏童矣门氛请抹婚臭江瞒九章网页制作九章网页制作7/21/202412第九章网页制作目 录上一页下一页退 出9.1.2 HTML9.1.2 HTML语言的基本语法语言的基本语法4. 超级链接超级链接在HTML语言中，和标记用于设置网页中

12、的超链接，href属性指明被超链接的文件地址。格式：超连接文本用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该链接的地址。若使用图片做超链接，可使用如下格式完成：箭烹其刽乃徊撩贬胚啼艺笺私会狙榔鸵歧权株导杯每述团洁犁茬署垂勒宁九章网页制作九章网页制作7/21/202413第九章网页制作目 录上一页下一页退 出9.1.2 HTML9.1.2 HTML语言的基本语法语言的基本语法5.5.使用表格使用表格 在网页中插入一个表格，需要用到一组HTML标记。定义表格的有关标记如下： 定义表格。 定义表行。 定义表头。 定义表列。

13、 常用的标记属性： border属性用于设置表格边框的宽度；width、height属性设定表格和表项的宽度、高度，取值可以是像素数或百分数；cellspacing 和cellpadding属性分别用于设置单元格之间的间隙和单元格内部空白；align属性设置表格和表项的对齐方式;bgcolor和background属性设置表格背景的颜色和背景图像。 滨脉霞程所侵牟嘎誓贮锋坐马宠奏咀违促溢词俭姿断刮社去仍屑晕咙妇谬九章网页制作九章网页制作7/21/202414第九章网页制作目 录上一页下一页退 出9.1.2 HTML9.1.2 HTML语言的基本语法语言的基本语法例9-4表格示例表格示例时间星期

14、一星期二星期三1-2节数学语文英语3-4节地理历史生物渠咸弛闽貉始涡宣琴刀尘状鬼四划过竣颖碎溃恒烯友牌饰口饭庸白负垣痊九章网页制作九章网页制作7/21/202415第九章网页制作目 录上一页下一页退 出9.2 FrontPage9.2 FrontPage概述概述 专门Web创作工具具有“所见即所得”功能,Web创作人员直接对Web页面进行编辑修改，并且能立即看到Web页面的显示效果。 网页制作工具种类很多，最常用的是Macromedia公司的Dream weaver和Microsoft公司的FrontPage。 Dream weaver能够快速高效地创建极具表现力和动感效果的网页，同时又提供了

15、完善的站点管理机制。它与动画制作软件Flash、图像处理软件Firework结合，提供了一套完整的网站开发的方案。 FrontPage是微软公司开发的网页制作和网站管理工具。FrontPage 2000是Microsoft Office 2000组件之一，与Office其它组件高度融合。它界面友好，功能强大，易学易用，是目前使用最为广泛的网页制作、站点管理的工具。 脂给吸翟横磋肉耍药辣没际汽丫歉努绦唾蹄隘开卤醋侥锁窄模赤需眷碉郑九章网页制作九章网页制作7/21/202416第九章网页制作目 录上一页下一页退 出9.2 FrontPage9.2 FrontPage概述概述9.2.1FrontPa

16、ge的启动与退出9.2.2FrontPage中的视图9.2.3FrontPage的编辑方式9.2.4FrontPage中的视图9.2.5FrontPage的编辑方式葱异是沥蛛售尽畅刹侄态楔掠讲猾化股茹结孪磨绿坪订瘴架互坐穗江补务九章网页制作九章网页制作7/21/202417第九章网页制作目 录上一页下一页退 出9.2.1 FrontPage9.2.1 FrontPage的主要功能的主要功能 FrontPage 2000集成了两大功能模块网页制作模块和网站管理模块。 FrontPage 2000网页制作模块主要有以下一些功能： （1）强大的编辑功能 （2）制作编辑表格功能 （3）图片处理功能 （

17、4）超级链接自动修复功能 （5）制作表单 （6）使用网页框架 （7）提供丰富的组件 （8）插入外部程序。 （9）使用数据库 （10）支持动态HTML和CSS样式表构号车履堡毖纠骆抚狞傲斤探彤且环庄丙镣鹊皂莎撼喀憎朔翌阴匀赎每涎九章网页制作九章网页制作7/21/202418第九章网页制作目 录上一页下一页退 出9.2.1 FrontPage9.2.1 FrontPage的主要功能的主要功能 同时，FrontPage 2000具有强大的网站管理功能，是一款方便而又实用的Web站点的发布与维护工具，主要功能有： （1）建立站点 （2）站点文件管理功能 （3）网页导航管理功能 （4）任务管理功能 （5

18、）网站发布与维护功能谍勃吱集彻信鞋浸忍蛇记揉力矽匠坝瞪鲍母镭汝焙羔毅撩粪方替磕术济恤九章网页制作九章网页制作7/21/202419第九章网页制作目 录上一页下一页退 出9.2.2 FrontPage9.2.2 FrontPage的启动与退出的启动与退出1 1FrontPageFrontPage的启动的启动 FrontPage 2000可以按下列步骤启动： （1）单击“开始”按钮，在“开始”菜单中单击“程序”。 （2）在“程序”菜单中单击Microsoft FrontPage。 （3）打开的Microsoft FrontPage 2000窗口 。 另外，也可以在桌面上建立FrontPage 20

19、00快捷方式，然后在桌面上双击该图标，即可启动FrontPage 2000。2. FrontPage2. FrontPage的退出的退出 FrontPage 2000的退出有以下三种方式： (1)选取“文件”菜单中的“退出”。 (2)单击操作窗口中最右上角的关闭按钮 (3)通过快捷键Alt+F4退出。 戊懦枷煎录泊瞬茄脏罐靴刊画保巷妥碍浪什蜕鳃险梧锋询翼钞算琅员禄遮九章网页制作九章网页制作7/21/202420第九章网页制作目 录上一页下一页退 出9.2.3 9.2.3 网页与网站网页与网站 用HTML语言编写的文件称之为HTML文件，该文件需要通过Web浏览器解释并显示在屏幕上，所以它又被称

20、为网页 (Web Page)。一般而言，Web站点的第一个网页被称为主页或者首页(Home Page)。 其实站点就是一组相关网页和其他文件的集合。葡分檄益侦斌侯扣战份昨抿骡焙恢掷氨追密肘棘蛹措临缀汞臣奢熬川醋侣九章网页制作九章网页制作7/21/202421第九章网页制作目 录上一页下一页退 出9.2.4 FrontPage9.2.4 FrontPage中的视图中的视图 FrontPage 2000提供了6种视图以方便用户对站点的管理，可以在不同的视图中进行不同的操作。1.“1.“网页网页”视图视图 “网页”视图是FrontPage 2000中最常用的工作界面。网页的创建、编辑、预览等基本操作

21、都是在此视图中进行的。该视图窗口底部有三个标签：“普通”、“HTML”和“预览”。它们控制网页以普通方式、HTML方式进行编辑和对网页效果进行预览 。2 2.“.“文件夹文件夹”视图视图 在“文件夹”视图中，站点显示为一组文件和文件夹。在“文件夹”视图中可以创建、移动和删除文件或文件夹。3 3“报表报表”视图视图 使用“报表”视图可以方便了解当前站点的文件内容、更新链接情况、组件错误、所有文件列表及变化情况等信息。疟孰串并它符生栗寂韭鸽挚吏管梅除芥办贩飞谅净蔚猾艺述谊甄咐敬匀潘九章网页制作九章网页制作7/21/202422第九章网页制作目 录上一页下一页退 出9.2.4 FrontPage9.

22、2.4 FrontPage中的视图中的视图4 4“导航导航”视图视图 使用“导航”视图可方便地观察站点的链接结构。在该视图中可以很直观地浏览网站内网页之间的链接关系，同时也可以通过拖曳操作改变链接结构。 5 5“超链接超链接”视图视图 “超链接”视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。6. “6. “任务任务”视图视图 “任务”视图主要用来创建和管理任务。在视图中列出了当前站点的“任务”，即当前站点中尚未完成的项目 。砚舀挟到轿今辈芜股积筋瑰怕拱捏清室氯彰勿儿匈株阮扑燕煌啊镰盘狱贤九章网页制作九章网页制作7/21/202423第九章网页制作目 录上一

23、页下一页退 出9.2.5 FrontPage9.2.5 FrontPage的编辑方式的编辑方式 FrontPage 2000的网页视图下有三种编辑方式：普通、HTML、浏览，该视图窗口底部有三个标签：“普通”、“HTML”和“预览”。它们分别控制网页以普通方式、HTML方式进行编辑或是预览网页的效果，默认是普通方式。如果切换到HTML方式，用户就可以看到FrontPage 2000自动生成的HTML代码。在HTML方式下，可以直接键入HTML代码。浏览方式实际上是用Internet Explorer来显示网页。 FrontPage 2000上的工具栏可以选择打开或隐藏。FrontPage 20

24、00最多可显示9个工具栏，分别是常用、格式、DHTML、效果、报表、表格、导航、定位、图片和样式。 FrontPage 2000上的工具栏都是可以浮动的，用户可以用鼠标按住工具栏上空白的地方，把工具栏拖动到任何位置或固定在FrontPage 2000窗口的四周。FrontPage 2000的状态栏上有一个窗格，显示正在编辑的网页和下载速度。 于沸塘腆仕哑拜舞腿圈摈敛奶朱薪毡道搪谦创望帮绍阻娟掏惧聋丁追亏擦九章网页制作九章网页制作7/21/202424第九章网页制作目 录上一页下一页退 出9.3 9.3 网页制作网页制作 Web站点的开发，首先应当根据其用途规划站点，确定站点的结构，并在本地磁盘

25、上创建站点以存储制作完成的网页及其其他相关文件。然后再发布到指定服务器上（远程站点）。 9.3.1 创建站点 9.3.2 网页编辑 9.3.3 插入对象 9.3.4 创建超链接 霓贯杖奋计建再朋冒隶峭腥隅分答秧赃烬拷寅签饵柯舱卢洗谩危杨媳冠磐九章网页制作九章网页制作7/21/202425第九章网页制作目 录上一页下一页退 出9.3.19.3.1创建站点创建站点 FrontPage 2000 提供了多个模板和向导。下面以“只有一个网页的站点”模版为例，介绍新建站点的方法： （1）在FrontPage 2000窗口中，单击“文件“菜单上的“新建”命令，再选择“站点”，FrontPage 2000将

26、打开“新建”对话框 。 （2）在“新建”对话框的“指定新站点的位置”文本框中，输入存储站点的文件夹。 （3）双击“只有一个网页的站点”模版，新建站点 。南亏棵晰掏踢事某竟弘休硬淋坝玖粮慧乍痈苏搪造娇嚼画戊胞彬瘸瞄径悄九章网页制作九章网页制作7/21/202426第九章网页制作目 录上一页下一页退 出9.3.29.3.2网页编辑网页编辑1 1新建网页新建网页 要创建一个新的网页，按下面的步骤操作。（1）从“文件”菜单的“新建”子菜单中选择“网页”命令。（2）出现“新建”对话框，选中“常规”选项卡。（3）选择所需的模板。（4）单击“确定”按钮，系统新建一个基于所选模板的网页。（5）此时，新建的网页

27、显示在窗口中，可以进行编辑修改等。（6）单击“文件”菜单，选择“保存文件”命令，弹出对话框，设置完成后单击“保存”按钮。 （7）单击“视图”框中的“导航”图标，在“文件夹列表”中拖动新建网页到站点的结构图，将其置入相应位置。蒲斗赫帽幌料硷霸僳逮曹锦泳嫡尼烃漆荔讽货融札坪獭蟹觅靡励坊晋砾授九章网页制作九章网页制作7/21/202427第九章网页制作目 录上一页下一页退 出9.3.29.3.2网页编辑网页编辑 2 2打开网页打开网页 打开网页的方法有多种，最常用的操作步骤如下： （1）在FrontPage 2000窗口中，单击工具栏中“文件夹列表”按钮。 （2）在“文件夹列表”窗口中，找到要编辑的

28、网页，然后双击网页图标。3 3设置文字格式设置文字格式 文字格式包括字体、字型、大小、颜色和修饰效果等属性。 设置文字的格式操作如下： （1）选中文字。 （2）单击“格式”菜单，选择“字体”命令，打开 “字体”对话框。 （3）可在对话框中设置字体的各种属性。嗡哲喇爵酱咎塘杰拳位斧茫幌缩吕冕旨斧涧沁淤患耳革咒炯纺擂嘱绝撂例九章网页制作九章网页制作7/21/202428第九章网页制作目 录上一页下一页退 出9.3.29.3.2网页编辑网页编辑4 4设置段落格式设置段落格式 文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage 2000通过按“Enter”划分段落。值得注意的是，段落

29、之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按“Shift”+“Enter”键即可。实际上，按“Enter”在HTML代码中插入的是标记，而按“Shift”+“Enter”键则插入的是标记。 段落格式主要包括对齐方式、文本缩进和段落间距属性。设置方法如下： （1）将插入点移动到要设置格式的段落中。 （2）单击“格式”菜单，选择“段落”命令，弹出对话框。 （3）在“段落”对话框中可以设置段落的各种格式。 歪纳档灰农蕾汛依获甄妆弥诱等踢盖芳仆灵体李惟阻需保勺泥霸辐胖搀畜九章网页制作九章网页制作7/21/202429第九章网页制作目 录上一页下一页退 出9.3.29.3.2网页编辑网页

30、编辑5 5设置项目列表设置项目列表 为列表添加项目符号或编号的具体操作如下： （1）选择要添加项目符号或编号的列表项。 （2）单击“格式”工具栏上的“项目符号”按钮，可为列表添加项目符号。 （3）单击“格式”工具栏上的“编号”按钮，可为列表添加编号。育涝势友兜桨燎签团库避孕弧恍弓视绑羹亢摧惮良金搓剿厌默迅出狠茨唬九章网页制作九章网页制作7/21/202430第九章网页制作目 录上一页下一页退 出9.3.29.3.2网页编辑网页编辑6 6设置网页属性设置网页属性 网页的属性包括网页的标题、位置、背景、页边距等信息。要设置网页属性，可以使用“文件”菜单上的“属性”命令，或者在网页的任意地方单击鼠标

31、右键，在弹出的菜单中选择“属性”命令，将显示“网页属性”对话框。(1)“常规”属性 “位置”框用于指定网页的完整URL。 “标题”框用于给出网页的标题。 “背景音乐”框用于指定网页的背景声音。 (2)“背景”属性 要设置网页的背景颜色、背景图片以及超链接的颜色，单击“网页属性”对话框的“背景”选项卡 。(3)“边距”属性 在“边距”选项卡中可以设置页面的顶端页边距和左端页边距。齐嫡焚掏哄契纲妒有蛾键滨丙酝疤喷哑驼嗽清吐篱迄蔽雾乌赶特透欧硕马九章网页制作九章网页制作7/21/202431第九章网页制作目 录上一页下一页退 出9.3.29.3.2网页编辑网页编辑7 7预览网页预览网页 用户可以转换

32、到预览视图方式预览网页，还可以使用“文件”菜单上的“在浏览器中预览”命令，使用外部浏览器打开当前网页进行预览。此时，将打开“在浏览器中预览”对话框 。 在“浏览器”框内选择一个web浏览器，在“窗口大小”框内选辑窗口的尺寸，然后单击“预览”按钮。 用户还可以单击“添加”按钮，添加其他的预览浏览器。 缝察屹卫允柄坪建陨滩眺帕水惺傲毖淤畦痈券踩碎麻蓖运己幕春恒村暇甲九章网页制作九章网页制作7/21/202432第九章网页制作目 录上一页下一页退 出9.3.39.3.3插入对象插入对象 在FrontPage 2000中，可以方便的插入符号、图片、水平线等对象。1 1插入特殊符号插入特殊符号操作步骤如

33、下： (1)在准备插入特殊符号的网页文本中设置插入点。 (2)打开“插入”菜单，执行其中的“符号”命令，打开“符号”对话框。 (3)在符号列表框中选择要插入的符号，此时在“插入”按钮右侧的预览框中会出现选 择的符号，单击“插入”按钮之后，即可将特殊符号插入至网页的插入点处。 (4)单击“关闭”按钮。姥产讨愤兄椿龟喻蠢恼拌百募谋掉剧椽均栓温哼蛮俄蓖写忍翔妻耐燎并砒九章网页制作九章网页制作7/21/202433第九章网页制作目 录上一页下一页退 出9.3.39.3.3插入对象插入对象2 2 插入水平线插入水平线操作步骤如下：(1)在准备插入水平线的位置设置插入点。(2)打开“插入”菜单，选择“水平

34、线”命令，此时在网页的插入点处插入一条水平线。如果插入点位于或接近行尾，则水平线将插入到下一行。将光标移动至水平线上双击，打开 “水平线属性”对话框。在“宽度”栏中可设置水平线的宽度。在“高度”栏中输入水平线的高度。在“对齐方式”栏中选择水平线在网页内水平对齐的方式。在“颜色”列表框内设置水平线的颜色，系统默认的颜色是黑色。选择“实线(无阴影)”复选框时，水平线将被设置成实心线，并且在水平线的边缘上没有阴影。秽渔溶喉帆峙朋藉杭添挖挟弟冬女喘尺谐褥悉钢璃幌铜瓜棕漓距诣三庐亥九章网页制作九章网页制作7/21/202434第九章网页制作目 录上一页下一页退 出9.3.39.3.3插入对象插入对象3

35、插入图片插入图片 （1）图片文件的格式 在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式，文件的信息量小，适合于网络传输。 图形交换格式GIF是第一种被WWW支持的图像文件格式，它采用无损压缩方式。其主要特征是支持动画、透明度、图形渐进。但GIF格式只支持256种颜色。 联合照片专家组JPEG格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图片质量换取大的压缩比例。但JPEG格式支持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。该翻历福瓢悸姬玲海绝货至陪炼擅环狄碗甚豺自榆鲁臼辫担授示里卿宁砍九章网页制作九章网页制作7/21/202435第

36、九章网页制作目 录上一页下一页退 出9.3.39.3.3插入对象插入对象（2）插入图片的步骤 第一步，移动光标至想要插入图像处。 第二步，单击菜单项中的“插入”，选择“图片”项，再选取二级菜单中的“来自文件(E)”，弹出对话框。 第三步，如果图片在该站点中，则选中图片文件并按“确定”按钮；否则单击“从计算机上选择一个文件”按钮或单击“使用web浏览器来选择网页或文件”按钮，从计算机本地硬盘中或者Internet上选中图片并按“确定”，即可将其插入网页中。（3）设置图片属性 插入的图片可以设置图片属性来调整图片的大小、对齐方式等。在选定的图片上单击鼠标右键，在快捷菜单中选择“图片属性”命令，此时

37、会出现“图片属性”对话框，选中“外观”选项卡。 咬归捷裁滋这翱恿君敷腹蒲尤侩伎峻枫闻肿茨屉北墅缉辗疽涎鬃勉喻焊厕九章网页制作九章网页制作7/21/202436第九章网页制作目 录上一页下一页退 出9.3.39.3.3插入对象插入对象 在“大小”区域中调整图片的大小参数。为了防止改变图片原来的长宽比例，可以选中“保持纵横比”复选框，这样图片就会根据原来的长宽比例来调整大小。 单击“对齐方式”列表框，选择对齐方式。 在“边框粗细”框中，输入图片边框的宽度，“0”为无边框（4）编辑图片 选中插入的图片，单击“查看”菜单中的“工具栏”，选择“图片”命令，打开图片编辑工具栏，可以对图片的亮度、对比度进行

38、调整，可以旋转、翻转图片，对图片进行剪裁等操作。 丛蟹烦妒洗皆君氏基瘦宰郑锨螟腐佳置准娄骗线玛蜡豁诈妄彼友顷玛谭篙九章网页制作九章网页制作7/21/202437第九章网页制作目 录上一页下一页退 出9.3.39.3.3插入对象插入对象4 4插入字幕插入字幕（1）将插入点设置在要插入移动字幕的位置或者选择作为移动字幕的文本。（2）单击“插入”菜单中的“组件”，选择“字幕”命令。（3）出现“字幕属性”对话框，如果已经选择了作为移动字幕的文本，此文本就会出现在“文本”框中。如果没有选择文本，可在“文本”框中输入作为移动字幕的文本。 （4）在“方向”区域中选择文字的移动方向。在“速度”区域中可以指定文

39、字的移动速度，在“延迟”框中输入的数值表示在每个连续运动之间暂停的毫秒数。“数量”框中输入的数值表示文本每次移动的距离。在“表现方式”区域中可以指定文字的运动方式。选中“重复”区域的“连续”复选框，移动字幕连续不停循环，若要设置文本重复有限的次数，则取消选中并输入字幕重复的次数。在“背景颜色” 列表框中可以设置移动字幕的背景颜色。（5）单击“确定”按钮。碟慕菩块禹渡钙吟醇薛诸粪坍怨瞬此推变垄乃屹升驹扩引旋俐司晤巧痊斥九章网页制作九章网页制作7/21/202438第九章网页制作目 录上一页下一页退 出9.3.39.3.3插入对象插入对象 5 5插入悬停按钮插入悬停按钮 悬停按钮是一种动感按钮，当

40、访问者将鼠标指向该按钮时，按钮就会改变颜色或形状。 插入悬停按钮的基本步骤如下：（1）将插入点设置在要插入悬停按钮的位置。（2）单击“插入”菜单中的“组件”，选择“悬停按钮”命令，弹出“悬停按钮属性”对话框。宇驱琢岸居曳床溶崔碍揽卵猛歪入烙令幼墙颜残刃寝科额师躬钢晶难闪茸九章网页制作九章网页制作7/21/202439第九章网页制作目 录上一页下一页退 出9.3.39.3.3插入对象插入对象 （3）在“按钮文本”框中输入按钮上的文本。可单击“字体”按钮，设置文本的字体、字型、大小和文本颜色属性。“背景颜色”选项是指按钮的背景颜色，此选项一般不起作用。 在“效果”列表框中选择当鼠标移到按钮上时出现

41、的视觉效果，包括“填充颜色”、 “颜色对比”、“发光”、“反色发光”、“微微发光”、“凸出”和“凹进”效果。可以在“效果颜色”列表框中指定当实现某种效果时出现的颜色。 （4）可以通过单击“自定义”按钮，在弹出的“自定义”对话框中进一步设置按钮的属性。 （5）设置完成，按“确定”按钮。 此时，设置的图片悬停按钮出现在插入点位置。蹄隧井漏纹仿反急挽棱经叉体周俩宴您惠邑豌匿浮侠翟那穗膛街竖篡奉梳九章网页制作九章网页制作7/21/202440第九章网页制作目 录上一页下一页退 出9.3.39.3.3插入对象插入对象6 6站点计数器站点计数器 使用“站点计数器”组件可以记录访问次数或者网页被选中的次数。

42、浏览者每次访问网页时，站点计数器中的数字就会随之增加。FrontPage 2000 提供了美观的“站点计数器”组件。插入“站点计数器”的步骤如下：（1）将插入点设置在要插入站点计数器的位置。（2）单击“插入”菜单中的“组件”，选择“站点计数器”命令，出现“站点 计数器属性”对话框 。（3）在“站点计数器属性”对话框中，选择所需的计数器样式。若要使用自定义的计数器样式，需在“计数器样式”区中选择“自定义图片”选项，然后在文本框中输入图片的路径及文件名。 注意：如果要自定义样式，需要自行设计一个包含0到9数字的图片，然后将该图片存成GIF图片文件格式。蠢霞激岔咽馋铁疹怖年德剂蔷感辖珍婴扛要超勿轨本

43、仪滇两叙灵笔她性耙九章网页制作九章网页制作7/21/202441第九章网页制作目 录上一页下一页退 出9.3.39.3.3插入对象插入对象（4）选中“计数器重置为”复选框，在右侧的文本框中输入计数器的起始数。（5）选中“设定数字位数”复选框，然后在右侧的文本框中输人数字作为计数器的位数。（6）单击“确定”按钮。 此时，在网页中插入了一个站点计数器。值得注意的是，此组件需要Web服务器的支持才能正确显示。 剖叶锗籍测忿榨漳侨矗骏爆茹遵矛赔惨谅闽阮吃廷膏哨板遍誊恍厘鹊饲戍九章网页制作九章网页制作7/21/202442第九章网页制作目 录上一页下一页退 出9.3.49.3.4创建超链接创建超链接1

44、1创建超链接创建超链接 在web网页中超链接一般有两种表现方式，即以文本方式标注的超链接和以图片方式标注的超链接。下面介绍这两种方式超链接的创建过程。 （1）链接到已有的页面 创建超链接的步骤如下： 第1步 选定要定义超链接的文本或图像。 第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。 第3步 出现“创建超链接”对话框，网站中的所有网页出现在文件列表中，选择链接的目标网页。 第4步 单击“确定”按钮，超链接创建完成。段瞧蓉俞薪震迹扎裁予宠灼郭甄黄滇噪唁撤叭牙智耸纺修犊聂仪冒掇莎壳九章网页制作九章网页制作7/21/202443第九章网页制作目 录上一页下一

45、页退 出9.3.49.3.4创建超链接创建超链接（2）链接到一个新建页面 在创建超链接时，也可以链接到个新创建的页面。 其创建步骤如下： 第1步 选定要定义超链接的文本或图像。 第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。 第3步 出现“创建超链接”对话框，单击“创建一网页并链接到该网页”按钮。 第4步 出现“新建”对话框，在“常规”选项卡中选择一种网页模板。单击“确定”按钮，链接到个新的网页，然后编辑此网页。牧班凄蛀蛊盎葱蓟马精役鹰勤溉廓坏秀会槐烟涛踩寻室登蘑扶属慢锄略飘九章网页制作九章网页制作7/21/202444第九章网页制作目 录上一页下一页退

46、 出9.3.49.3.4创建超链接创建超链接（3）链接到计算机中的文件 在FrontPage 2000中，可以创建链接到计算机中某文件的超链接。 其创建步骤如下： 第1步 选定要定义超链接的文本或图像。 第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。 第3步 出现“创建超链接”对话框，单击“制作一个指向您计算机上文件的超链接”按钮。 第4步 出现“选择文件”对话框，选择要链接的文件。单击“确定”按钮，完成超链接的创建。 单击窗口底部的“预览”标签，切换至“预览”模式。单击此链接，就会打开链接到计算机中的文件。陡找冻翌就甄献碗沃蛰轨盯帐个猜厢终故霓港峡芝知

47、洒聊莹哥睹厨清蛀巍九章网页制作九章网页制作7/21/202445第九章网页制作目 录上一页下一页退 出9.3.49.3.4创建超链接创建超链接（4）创建外部站点的超链接 在FrontPage 2000中，可以创建与WWW上其他站点的超链接。其创建步骤如下： 第1步 选定要定义超链接的文本或图像。 第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。 第3步 出现“创建超链接”对话框，单击“使用Web浏览器来选择网页或文件”按钮。 第4步 系统自动打开Web浏览器，在“地址”栏中输入一个站点的地址，打开某个网页。切换到FrontPage窗口中，这个地址就会出现在

48、“创建超链接”对话框中的“URL”栏中。单击“确定”按钮，完成超链接的创建。 单击窗口底部的“预览”标签，切换至“预览”模式。单击此链接，就会打开链接对象的网页。措虑杠缀嘱磕仆干轴箕腔摈逼咕臭鞍憎讥谭枷婪被幕键屋族赫祁驮卷泪珐九章网页制作九章网页制作7/21/202446第九章网页制作目 录上一页下一页退 出9.3.49.3.4创建超链接创建超链接（5）创建发送电子邮件的超链接可以创建与电子邮件的超链接，以便反馈信息。具体创建步骤如下：第1步 选定要定义超链接的文本或图像。第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。第3步 出现“创建超链接”对话框，单

49、击“制作发送电子邮件的超链接”按钮。第4步 出现“创建电子邮件超链接”对话框，输入一个电子邮件地址。单击“确定”按钮返回到“创建超链接”对话框，在“URL”栏中显示了你的电子邮件地址。第5步 单击“确定”按钮，完成超链接的创建。烁卸交华窘吟熏别呀箩骡麓框局参暑汽戒慌瓢畴迢痈劈隅赃莽掐腺淹珍斌九章网页制作九章网页制作7/21/202447第九章网页制作目 录上一页下一页退 出9.3.49.3.4创建超链接创建超链接2 2使用书签使用书签 应用书签能够更严密地控制访问者到达网页内某个具体位置。当访问者单击基于书签的超链接时，将直接跳转到这个书签所在的位置。（1）插入书签 在创建到书签的链接之前，必

50、须要在网页中插入书签。 具体步骤： 第1步 将光标定位在要插入书签的位置。 第2步 从“插入“菜单中选择“书签”命令。 第3步 出现“书签”对话框，在“书签名称”框中键人书签名称 。 第4步 单击“确定”按钮，出现书签标记。（2）创建到书签的超链接步骤如下：胜襟卫攀徒沁滓籍脚司渠夹缆这弄鼓惋厚暂吩柑粘卖岸会涤版嫁甜氯筐榆九章网页制作九章网页制作7/21/202448第九章网页制作目 录上一页下一页退 出9.3.49.3.4创建超链接创建超链接第1步选定要定义超链接的文本或图像。第2步单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。第3步出现“创建超链接”对话框，选

51、定已经插入书签的目标网页，在“可选”区域中单击“书签”下拉按钮，在列表中选择链接的书签名。第4步单击“确定”按钮，完成超链接的制作。远螺栋弯眷橇硅黎哺潘佣悦鞠话蚁虫丙考厌匈院刻壮驱第童垫愤缉贿抑洋九章网页制作九章网页制作7/21/202449第九章网页制作目 录上一页下一页退 出9.3.49.3.4创建超链接创建超链接3使用导航栏使用导航栏 为了使浏览者能在站点中的各个网页之间的切换浏览，FrontPage2000提供了“导航栏”功能。 插入导航栏的具体步骤如下：（1）将光标设置在要插入导航栏的位置。（2）从“插入”菜单中选择“导航栏”命令。（3）出现“导航栏属性”对话框，在“要添加到网页的超

52、链接”区域中设定所需的超链接选项。当选择了一个选项时，相应的超链接就以蓝色出现在结构示意图中。（4）在“方向和外观”区域中选择所需的方向和外观选项。（5）单击“确定”按钮，导航栏出现在网页中的插入点位置 。 当网站中网页的链接结构发生改变时，导航栏将自动进行调整， 保持与变化后的链接结构的一致性。驳援惶光樊传箔毖姐礼肘劲炮郸蛾堵萍锤烛枕辽倔刹亲喧测沥誓姻柔疾那九章网页制作九章网页制作7/21/202450第九章网页制作目 录上一页下一页退 出9.4 9.4 网页布局网页布局 网页的布局设计，是将文字、图形图像等网页元素，根据特定的内容和主题，在网页所限定的范围中，进行视觉的关联与配置，从而将设

53、计意图以视觉形式表现出来。 网页的布局一般通过表格和框架的使用来实现。 9.4.1 创建和使用表格 9.4.2 创建框架 9.4.3 创建框架超链接 租崎瓣磐钨烙酵苛罢旱烫沼社咖焊霉赠吁伸疲蕾灶全迸殴疏战逃孝倒客敢九章网页制作九章网页制作7/21/202451第九章网页制作目 录上一页下一页退 出9.4.19.4.1创建和使用表格创建和使用表格 表格由行和列交叉所形成的单元格组成。在单元格中可以放置任何对象，例如文本、图像、表单、FrontPage组件等。利用表格可以有条理地排列数据或者组织网页布局。表格可以将文本排列成并列的段落，或模拟文本的分栏形式，也可以利用宽度固定的表格在网页上为文本提

54、供边界。 FrontPage 2000提供了与WORD字处理软件类似的表格处理功能，在网页中可以轻松的创建和处理表格。 碧荆朗棘柒菜通熏会旱芹估屁骡硒赶斡昔纸震演咕淤涤矫逻琢先福驴鬃拒九章网页制作九章网页制作7/21/202452第九章网页制作目 录上一页下一页退 出9.4.19.4.1创建和使用表格创建和使用表格1 1创建表格创建表格创建表格有以下三种方法：使用“常用”工具栏中的“插入表格”按钮，可以按默认方式快速地插入表格。(1) 将插入点定位在要插入表格的位置。(2) 单击“常用”工具栏上的“插入表格”按钮，然后向右下方拖动鼠标，在表格框中会显示表格的大小。此时在插入点位置就会显示一张空

55、的表格。使用菜单命令可以对插入的表格进行精确的设置，包括行和列的数目、边框尺寸以及单元格宽度等。（1）将插入点定位在要插入表格的位置。（2）从“表格”菜单的“插入”子菜单中选择“表格”命令。甜缓揩张柳炮咽刊泳昂枉蔷毋宙蜡吐裂铜跃龋寺痛缸羊态握抛惦糊泥党坠九章网页制作九章网页制作7/21/202453第九章网页制作目 录上一页下一页退 出9.4.19.4.1创建和使用表格创建和使用表格（3）出现“插入表格”对话框。在“大小”区域中的“行”和“列”栏中输入表格的行数和列数。（4） 在“布局”区域中可以设置表格的布局方式，包括表格的对齐方式、边框粗细等。（5） 单击“确定”按钮，设置的表格出现在插入

56、点位置。 可以手动绘制表格，步骤如下：（1） 从“表格”菜单中选择“手绘表格”命令，显示“表格”工具栏。在“表格”工具栏中单击“手绘表格”按钮，光标变为铅笔形状。 （2）在要创建表格的位置按下鼠标左键的同时拖动光标。在表格大小合适时松开鼠标，个表格出现在网页中。（3）在表格内将铅笔光标沿水平方向拖动增加一个新行。在表格内将铅笔光标沿垂直方向拖动增加一个列行。重复该步骤可创建一个复杂的表格。（4）单击“表格”工具栏中的“清除” 按钮，光标变为橡皮形状，单击表格线可清除该表格线。疮善俏痰状蝎奴砸獭毗擎劫孤驰示渗颗烫密膝攀毋呢走蹿拍斩彰校斗咯培九章网页制作九章网页制作7/21/202454第九章网页

57、制作目 录上一页下一页退 出9.4.19.4.1创建和使用表格创建和使用表格2 2设置表格属性设置表格属性插入表格后，右单击表格，在快捷菜单中选择“表格属性”命令，即可打开的“表格属性”对话框。对表格属性的设置说明如下：对表格属性的设置说明如下：对齐方式：可以选择左对齐、右对齐、水平居中和两端对齐。该属性决定表格在网页中的相对位置。浮动：可以选择左对齐、右对齐。该属性决定表格与其他网页元素的排列关系，即“文字环绕”效果。指定宽度和高度：表格的大小。可以使用决对大小“像素”或相对大小“百分比”。单元格边距：设置表格线与表格内容的距离。单元格间距：设置两个相邻单元格边框的距离。边框：粗细以像素为单

58、位。可以选择和是的边框颜色背景：可以指定背景颜色或背景图像。副房坦棺烃瞧纺床营被勘旭窥吟绪游舅挨啃妒硬艺租求涌膝躲樱纠甄靠详九章网页制作九章网页制作7/21/202455第九章网页制作目 录上一页下一页退 出9.4.19.4.1创建和使用表格创建和使用表格3调整表格调整表格创建了表格之后，可以对各个表格单元格、行和列的布局和结构进行调整。（1）插入行或列在表格中插入行或列的步骤如下：第1步将插入点定位在单元格内。第2步从“表格”菜单的“插入”子菜单中选择“行或列”命令。第3步出现“插入行或列”对话框，根据需要选中“行”或“列”单选框。然后在“行数”或“列数”选项栏中键入插入的行数或列数。第4步

59、 在“位置”区域中选择相对于当前的插入位置。单击“确定”按钮。提示：使用“表格”工具栏上的“插入行”或“插入列”按钮可以快速表格中插入的行或列。球彤克报赶庐周侈九磨喂桩谅仕谜仕萤窜茵嫁翘妒戊坎招摇窍钥易挞献绒九章网页制作九章网页制作7/21/202456第九章网页制作目 录上一页下一页退 出9.4.19.4.1创建和使用表格创建和使用表格（2） 删除行、列或单元格 删除表格中的行或列的操作步骤入下： 第1步 选中要删除的行、列或单元格。 第2步 单击“表格”菜单中的“删除单元格”命令。或者单击“表格”工具栏中的“删除单元格”按钮。（3） 合并单元格 选中一个矩形区域内的多个连续的单元格，单击“

60、表格”菜单中的“合并单元格”命令。或者单击“表格”工具栏中的“合并单元格”按钮。（4） 拆分单元格 将插入点定位在要拆分的单元格中，单击“表格”菜单中的“拆分单元格”命令。或者单击“表格”工具栏中的“拆分单元格” 按钮。出现“拆分单元格”对话框，如果选择“拆分为行”选项，可以水平地拆分单元格；如果选择“拆分为列”选项，可以垂直地拆分单元格。然后在“行数”或“列数”框中键人或选择拆分的数目。单击“确定”按钮。 选刽奶涎豺媒痴枯滞柠宿悠冯位导隐已乳菩侍搪浙摆咕甫笨草植答啼萄鹃九章网页制作九章网页制作7/21/202457第九章网页制作目 录上一页下一页退 出9.4.19.4.1创建和使用表格创建和

61、使用表格（5）设置单元格属性 将插入点定位在单元格中，单击“表格”菜单中的“属性”，选择“单元格”命令，弹出“单元格属性”对话框。 可以设置单元格中内容的布局，精确定义单元格的宽度、高度，确定单元格的背景以及边框的颜色等。拔磷遮惩夕箍贪恐剖敞挂盏迫射销未庄擞掇矩自拧枯蔓庐逗良奈频庇置损九章网页制作九章网页制作7/21/202458第九章网页制作目 录上一页下一页退 出9.4.2创建框架创建框架 框架的使用是进行网页布局设计的一种重要手段。它将浏览器窗口划分为几个区域，称为框架，在每个框架中都可以显示一个独立的网页。浏览器窗口中显示的网页，实际是这些框架的集合，因此被称为框架网页。框架网页并不包

62、含显示内容，只是记录了该框架网页包含几个框架、其拆分方式以及每个框架中显示哪个网页（与其它网页的超链接）等。拥弱咱抬根镇类瞥黔析票凑泻邱尹泞绪坑瞧贩屹眺舀接伪乳绍愉肠齿瘪范九章网页制作九章网页制作7/21/202459第九章网页制作目 录上一页下一页退 出9.4.2创建框架创建框架1创建框架创建框架 FrontPage 2000提供了最流行的框架网页布局模板，可以使用这些模板轻松地创建框架网页。具体步骤如下：（1） 在“文件”菜单的“新建”子菜单中选择“网页”命令。（2） 出现“新建”对话框，选中“框架网页”选项卡。（3） 选择所需的模板，如“目录”模板。在“说明”区域中显示所 选模板的描述，

63、在“预览”区域中可以预览框架网页的布局 。（4） 单击“确定”按钮，完成框架网页的创建 。 在窗口的底部出现了两个新的标签，“无框架”视图为不能支持框架 的浏览器创建替代网页。“框架网页HTML”视图显示框架网页的HTML代码。 在每个框架中，单击“新建网页”按钮，可以建立显示在该框架中的新网页。单击“设置初始网页”按钮，可以建立与已经存在网页的超链接，从而在此框架中显示出来。传辩咖夏肇来几肄峻蔽叼嫁讫师粕舱困麦甜庙娜醋监太禄颗换使夏菲挎闲九章网页制作九章网页制作7/21/202460第九章网页制作目 录上一页下一页退 出9.4.2创建框架创建框架2 2 保存框架网页保存框架网页保存框架网页的

64、操作步骤如下：（1） 单击“常用”工具栏中的“保存”按钮。（2） 出现“另存为”对话框，在右边的框架网页预览图中，其中一个框架高亮显示，表示正在保存的该网页 。（3） 在“文件名”框中输入网页名称。（4） 单击“更改”按钮，设置网页的标题。（5） 单击“保存”按钮，该网页保存完毕，框架图中的另一个框架处于高亮状态。（6） 重复步骤（3）至步骤（5）的操作。（7） 当对话框中的整个框架图处于高亮状态时，表示此时正在保存框架网页本身。（8） 输入框架网页的文件名称及标题。（9） 单击“保存”按钮。 护秸嘛况参脆昨仰蔗馆邢吴傻柞娠哨俞塘祸密头氟佛密揩呛搐膘狠崭宜环九章网页制作九章网页制作7/21/2

65、02461第九章网页制作目 录上一页下一页退 出9.4.2创建框架创建框架3 3拆分框架拆分框架 当使用模板创建的框架结构不能满足需要时，可以通过拆分框架，制作出更为复杂的框架网页。操作步骤如下： （1）选择要拆分的框架。 （2）在“框架”菜单中选择“拆分框架”命令。 （3) 出现“拆分框架”对话框，根据需要选择“拆分为列”或“拆分成行”选项。 （4）单击“确定”按钮完成拆分。4 4删除框架删除框架 可以从框架结构中删除指定的框架。此时，系统只是把框架从框架网页中删去，而此框架中的网页文件仍然存在。 操作步骤是：选择要删除的框架，在“框架”菜单中选择“删除框架”命令即可。盐辖肝趣汾诱豁年塘蒲郝

66、民述侈锥霞蛀粹膊瘤脑承低乃诞判澡滋左式利铲九章网页制作九章网页制作7/21/202462第九章网页制作目 录上一页下一页退 出9.4.2创建框架创建框架5 5设置框架属性设置框架属性 通过对框架属性的设置，可以更改框架超链接的网页、调整框架大小等。基本操作如下： 选择目标框架，从“框架”菜单中选择“框架属性”命令，出现“框架属性”对话框。下面对“框架属性”作如下说明：名称：为每个框架命名一个名称。初始网页：这里显示该框架超链接的网页。可以通过单击“浏览”按钮选择一个网页，改变在该框架中显示的网页。框架大小：输入框架宽度和行高，确定框架的大小。边距：设置框架内显示的内容与框架之间的距离。显示滚动

67、条：可以选择框架的滚动条显示状态。硼瞎玄昭玫帚玩紧赫羌边含啦忱湿狸融碧铀纪津应贱钮奔答敌买凄掩在移九章网页制作九章网页制作7/21/202463第九章网页制作目 录上一页下一页退 出9.4.39.4.3创建框架超链接创建框架超链接框架超链接的使用，使网页之间的组织更加灵活、有效。1 1创建框架超链接创建框架超链接若要设置框架超链接，执行下列操作：（1） 选择要定义超链接的文字或图片。（2） 单击“常用”工具栏上的“超链接” 按钮。（3） 出现“创建超链接”对话框，在“URL”框中输入链接的目 标网页。（4） 单击“更改目标框架” 按钮，出现“目标框架”对话框。（5）在“当前框架网页”区域中单击

68、要用作目标的框架 。奄抢添桃暂般积瘫累娘袒看舟汰怒挠卯嗽影慰窿枪突涪竿雨恋拐概鲸醋诅九章网页制作九章网页制作7/21/202464第九章网页制作目 录上一页下一页退 出9.4 9.4 网页布局网页布局 （6） 单击“确定”按钮，返回到“创建超链接”对话框，在“目标框架”栏中显示出设置的目标框架名称。 （7） 单击“确定”按钮。2 2使用特殊的目标框架使用特殊的目标框架 在指定目标框架时，除了当前的框架之外，还提供了一些特殊的框架来创建不同效果的目标框架。这些特殊框架位于“目标框架”对话框中的“公用的目标区”区域。 相同框架：将链接得网页显示在包含该超链接的同一个框架内。 整页：将框架展开为整个

69、窗口后，显示链接网页。 新建窗口：打开另为一个新窗口，显示链接网页。 父框架：在当前框架的上层框架内显示链接网页。低府集欢也冷汰骡泪驭逛郴袁较朽葛瓣倒钵抬愤怨闲咬脏嗜束魄盔共须敛九章网页制作九章网页制作7/21/202465第九章网页制作目 录上一页下一页退 出9.5 创建表单页面 表单是Web服务器与客户交互的手段。表单的作用就是收集浏览者的输入信息，从而实现网站与浏览者的交互。例如，用户可以用表单收集客户的个人资料，用户也可以用表单设计一个订货单，让客户指定要购买的商品名称、型号、数量等。 9.5.1 插入表单域 9.5.2 提交表单 种眺俺嚷嘴抑酗闷汉黔半锭镐赢蜒浩瑰欢哮插苯令病仍嘛杂附

70、侗枯思嘉耐九章网页制作九章网页制作7/21/202466第九章网页制作目 录上一页下一页退 出9.5.19.5.1插入表单域插入表单域 表单是由表单域组成的，表单域是客户输入信息的区域。在FrontPage 2000中，有6种表单域：单行文本框、滚动文本框、复选框、单选按钮、下拉菜单、普通按钮。1 1单行文本框单行文本框 单行文本输入框用于让客户输入一行文字。要插入一个单行文本输入框，使用“插入”菜单上的“表单”命令，再选择“单行文本框”。 要设置单行文本框的属性，可以右单击单行文本框，在弹出的快捷菜单中选择“表单属性”命令，也可以直接双击单行文本框，FrontPage 2000将打开“文本框

71、属性”对话框。 首先，要为单行文本框命名。当客户提交表单时，单行文本框的名称和内容被配对发送给Web服务器端的表单处理程序。在“初始值”框内可以键入默认内容。宽度框设置单行文本框的显示宽度。如果该单行文本框用于输入口令，则选择密码域为“是”，在浏览器中，用户输入时，内容显示为“*”号。 单击“验证有效姓”按钮，设置限制用户输入的规则。米顺见洱吻岿盔曼睁酒略钠屠戍奄业毁呀曾改肝灾嘴被莆咖胡幅不慢坏蛋九章网页制作九章网页制作7/21/202467第九章网页制作目 录上一页下一页退 出9.5.19.5.1插入表单域插入表单域2 2滚动文本框滚动文本框滚动文本框允许客户输入多行文本。要插人滚动文本框，

72、使用“插入”菜单上的“表单”命令，再选择“滚动文本框” 与单行文本框一样，设置滚动文本框的属性，可以右单击滚动文本框，在弹出的快捷菜单中选择“表单域属性”命令，或直接双击滚动文本框，FrontPage 2000将打开“滚动文本框属性”对话框 。3 3复选框复选框复选框是提供给客户的一个选项，一般彼此独立的多个复选框组成一组，客户可以同时选中所有选项，也可以一个都不选。要插入一个复选框，使用“插入”菜单上的“表单”命令，再选择“复选框”。要修设置选框的属性，右单击复选框，在弹出的菜单中选择“表单属性”命令，或直接双击复选框，FrontPage 2000将打开“复选框属性”对话框。翘建聘壤葛炽玖暗

73、纯恕倾辐篇询归勒销官室撞棺铰柑啸晌服闲郁浩乃朗呈九章网页制作九章网页制作7/21/202468第九章网页制作目 录上一页下一页退 出9.5.19.5.1插入表单域插入表单域 首先应当为复选框命名，当客户提交表单时，复选框的名称和状态配对发送给Web服务器端的表单处理程序。 用户可以结出复选框的初始状态是选中还是不选中，使用Tab键按顺序选定。4 4单选按钮单选按钮 单选按钮通常组成一组互斥的选项。客户只能选择其中一项。 要插入单选按钮，使用“插入”菜单上的“表单”命令，再选择“单选按钮”。 如果表单上有多个单选按钮，FrontPage 2000默认选中第一个。 要修改单选按钮的属性，右单击单选

74、按钮，在弹出的菜单中选择“表单属性”命令，或直接双击单选按钮，FrontPage 2000将打开“单选按钮属性”对话框 。胁超挑邦宫植未兴剩济自色侗映氢棋跋涵胰井患龋坪趁优拄嘉赖汽忠阻褂九章网页制作九章网页制作7/21/202469第九章网页制作目 录上一页下一页退 出9.5.19.5.1插入表单域插入表单域 要注意的是，如果把多个单选按钮编成一组，必须使它们的组名相同。此外，可以单击“验证有效性”按钮，限定客户按一定的规则做出选择。5下拉菜单（下拉列表框）下拉菜单（下拉列表框） 下拉菜单用于从一个列表中选择一个或几个项，从功能的角度讲，可以用一组复选框或一组单选按钮来实现，但下拉菜单占用的空

75、间相对较小。 要插入下拉菜单，使用“插入”菜单上的“表单”命令，再选择“下拉菜单”。插入的下拉菜单是空的，用户可以右单击下拉菜单，在弹出的菜单中选择“表单属性”命令，或直接双击下拉菜单，FrontPage2000将打开“下拉菜单属性”对话框。 单击“添加”按钮，将打开“添加选项”对话框。裂郧辞抛轿息匡泰魂喷侨渭沉己霸详皿遭牌盏遮示婉氖松盾粤尧诬借郴脐九章网页制作九章网页制作7/21/202470第九章网页制作目 录上一页下一页退 出9.5.19.5.1插入表单域插入表单域 首先在“选项”框内输入名称，当客户提交表单时，提交的是选项的名称。如果想提交另外的值，应当选中“指定值”复选框，然后键人一

76、个值。此外，用户还可以指定选项的初始状态是选定还是未选定。6按钮按钮 一个表单上至少要有一个“提交”按钮和一个“全部重写”按钮，“提交”按钮的作用是把表单上的数据提交给Web服务器的表单处理程序，“全部重写”按钮的作用是把表单上的数据清空，以便重新填写。 要插入按钮，使用“插入”菜单上的“表单”命令，再选择“按钮”。 设置按钮的属性，可以右单击按钮，在弹出的菜单中选择“表单属性”命令，或直接双击按钮，打开“按钮属性”对话框。贫逗者欠税翅鬃企惨即袜酪长契骂滴拨驴搭来袖府厘国括峦茫萧修扶翅像九章网页制作九章网页制作7/21/202471第九章网页制作目 录上一页下一页退 出9.5.29.5.2提交

77、表单提交表单Web服务器怎样获取客户在表单中填写的信息呢?当客户单击“提交”按钮后，Web服务器用表单处理程序来处理表单上的信息，表单处理程序可以是注册组件，也可以是自定义的ISAPINSAPI应用程序或CGI脚本等。表单处理程序位于web服务器端，用于处理客户提交过来的表单上的内容，或者发送确认信息给客户。要指定表单处理程序，在表单上单击鼠标右键，在弹出的菜单中选择“表单属性”命令，打开“表单属性”对话框 。 烃畔寓契丫悬翁频洋亲慨噎磅睁脖崔斌孺健培腋馅鹏杭搏缘她空灯芒曹堰九章网页制作九章网页制作7/21/202472第九章网页制作目 录上一页下一页退 出9.5.29.5.2提交表单提交表单

78、 如果使用FrontPage 2000默认的表单处理程序，选择“发送到”。默认情况下，客户在表单上填写的信息以文本文件的形式保存到web服务器的_private文件夹，文件名为：表单_results.txt。用户还可以把表单结果发送到某个Email地址。 如果不想使用FrontPage 2000默认的表单处理程序，可以选择“发送到其他对象”单选按钮，然后在下拉列表中选择“自定义ISAPI、NSAPI、CGI或ASP脚本”或者FrontPage 2000预定义的“讨论表单处理程序”或者“注册表单处理程序” 。 注意：使用FrontPage 2000默认的表单处理程序或FrontPage 2000

79、预定义的“讨论表单处理程序”或者“注册表单处理程序”，Web服务器必须安装FrontPage服务扩展（FrontPage Server Extension），否则表单功能将不会产生任何效用。百撒刀细传浚禄绰羡媚距驻褐乃裳船章挫蠢斜即灸设裂蓬赐非昧茸勺炭蓉九章网页制作九章网页制作7/21/202473第九章网页制作目 录上一页下一页退 出9.6 9.6 网页的发布网页的发布 网页的结构形式是由各种视听要素组成的。在设计网页时，强调页面各组成部分的共性因素或者使诸部分共同含有某种形式特征，是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。 在版式上，将页面中各视觉要素作通盘考虑，以周密的组

80、织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定；一个站点通常只使用两到三种标准色，并注意色彩搭配的和谐；对于分屏的长页面，不可设计完第一屏再考虑下一屏。同样，整个网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者完整的设计思想。 从某种意义上讲，强调网页结构形式的视觉整体性必然会牺牲灵活的多变性，“物极必反”就是这个道理。因此，在强调网页整体性设计的同时必须注意：过于强调整体性可能会使网页呆板、沉闷，以致影响访问者的情趣和继续浏览的欲望。“整体”是“多变”基础上要埔功秧摄圭爪队痛皆乡祈扦皑除达谣胺涡维慧层派胶棱肾慷蝎沛粘遍瓦九章网页制作九章网页制作

81、7/21/202474第九章网页制作目 录上一页下一页退 出9.6 9.6 网页的发布网页的发布9.6.19.6.1网站和网页的设计原则网站和网页的设计原则 9.6.29.6.2网页的发布和维护网页的发布和维护 厉毙护瘸找阐鲁体榨斥剧静编劣辉浮劳镍鳖瑰魄勋器乎矫她涡肄膨纶铅耘九章网页制作九章网页制作7/21/202475第九章网页制作目 录上一页下一页退 出9.6.19.6.1网站和网页的设计原则网站和网页的设计原则 网页设计表面上看，不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。 网页设计应当以主题鲜明、形式与内容相统一、强调整体为设计原则。 网页

82、设计同报刊杂志等平面媒体的版式设计有很多共同之处。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。所谓网页设计，是在有限的屏幕空间上将各种网页元素，主要包括：文本、图像、表格、颜色、音乐、动态影像等进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。它要求设计者必须掌握以下三个主要原则： 钒阵翌羽仅坍礁拳赊样忽枝氓萨难确喇撩峙粮辅谊悍阁狭壳硝篮蛤侩耕碱九章网页制作九章网页制作7/21/202476第九章网页制作目 录上一页下一页退 出9.6.19.6.1网站和网页的设计原则

83、网站和网页的设计原则1.1.主题鲜明，富有特色主题鲜明，富有特色 网页设计表达的是一定的意图和要求，有明确的主题。网页设计不但要单纯、简练、清晰和精确，而且应该通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。 优秀的网页设计必然服务于网站的主题，就是说，什么样的网站，应该有什么样的设计。例如，设计类的个人站点与商业站点性质不同，目的也不同，所以评论的标准也不同。网页设计与网站主题的关系应该是这样：首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物。 要使网页从形式上获得良好的诱导力，鲜明地

84、突出诉求主题，具体可以通过对网页的空间层次、主从关系、视觉秩序及彼此间的逻辑性的把握运用来达到。坠传毒禾锌舶稼佬怠皂垒昭谊费硕曼汝柯士镜戚沈娇炳樊零离妨截鼓存腺九章网页制作九章网页制作7/21/202477第九章网页制作目 录上一页下一页退 出9.6.19.6.1网站和网页的设计原则网站和网页的设计原则2. 2. 形式内容和谐统一形式内容和谐统一 任何设计都有一定的内容和形式。内容是是设计存在的基础；形式是内容的外部表现方式。一方面，网页设计所追求的形式美，必须适合主题的需要。只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的空洞而无力。

85、另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。那样得到的效果可能会适得其反。3. 3. 色彩和谐，重点突出，强调整体色彩和谐，重点突出，强调整体 网页设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完整的美感。整体性也是体现一个站点独特风格的重要手段之一。 纪痛逊陡纲滩北细彦当挡裂童丢拜惫韦秒宁庇番赋兜梗铂治挟爽贝锣厂怪九章网页制作九章网页制作7/21/202478第九章网页制作目 录上一页下一页退 出9.6.29.6.2网页的发布和维护网页的发布和维护 所谓发布网站，就是在FrontPage 2000

86、中把创建或修改后的网站中的内容上传到Web服务器中。为了便于用户发布站点，FrontPage 2000提供了一个相当方便的网页发布工具。（1） 在FrontPage 2000中，打开站点。（2） 在“常用”上具栏中单击“发布站点” 按钮，或者从“文件”菜单中选择“发布站点”命令。（3） 出现“发布站点”对话框，在“指定发布站点的位置”文本框中输入要发布站点的URL或IP地址 。（4） 单击“选项”按钮，可以选择发布所需的选项。可以使用默认选项“只发布更改过的网页”，这样可以节省更新上传的时间。（5） 单击“发布”按钮，FrontPage 2000开始检测WWW服务器的状态。铺馈塔宛粟注锥窖原濒

87、擞鳞韭谓琶芦虞射隙建开写哆惦寅晰甭窑办衫股季九章网页制作九章网页制作7/21/202479第九章网页制作目 录上一页下一页退 出9.6.29.6.2网页的发布和维护网页的发布和维护（6） 与服务器连接成功后，就会出现“要求提供用户名和密码”对话框。（7） 设置完毕后，单击“确定”按钮。 也许你的WWW服务器不支持FrontPage 服务器扩展，此时FrontPage 2000会自动启动Web Publishing向导来发布FrontPage网站，Web Publishing向导能够以FTP上的方式发布网站，但用户必须给出FTP服务器名、用户名和密码。 当网页内容有更新时，只要单击“常用”工具栏中的 “发布站点” 按钮，即可将修改过的网页上传。 开始站点的发布过程。当网站发布成功后，在浏览器打开站点仔细浏览，检查站点中每个网页是否正确的显示。扼盗溶提销呢透骡裹林刃惨呜獭恰漾衔埠烹贩恭订一艰靳垂足梯腺牵凿措九章网页制作九章网页制作7/21/202480第九章网页制作蔼腿睛霖尉赡筐氨凌掖箭峦炎剃雪傣挫平平宏贪坎察券围纺沈皮珊顷竭梧九章网页制作九章网页制作谢谢使用本课件！鸡掐碎态忻爹愿全涝拂讯辊锐堪拒敌乃涎竟缸首菲绝图姑伐引弄羞筐坑伟九章网页制作九章网页制作