23:44:43 徐州工程学院 1
第 6章 FrontPage网页制作
表格 可以使网页中的图片、文字资料之间的位置相对固定,在版面设计中正确使用表格,
可以轻松地设计出专业效果的网页。
网页表单 是一种输入界面,通过网页表单用户可以把商品订单传送给 Web服务器。采用框架可以在一个窗口中显示多个网页,建立特殊网页的转换效果,呈现出多样化的网页内容。
23:44:43 徐州工程学院 2
6.1 FrontPage2000简介
FrontPage2000是由 Microsot公司推出的新一代 Web网页制作工具,能够方便,快捷地在自己的服务器上创建和发布网页 。 借助 FrontPage2000可以创建,设计和管理自己的 Web。 可以像使用字处理软件写信那样轻松地制作 Web页面 。
有了 FrontPage2000,主页制作人员完全可以不用那些枯燥乏味的 HTML
标记语言,只需像在 Word里写文章一样输入文字,插入图形,制作表格,编辑超链接等,就能完成主页的制作 。
几乎所有的编辑工作都是以,所见即所得,的方式进行,这样,制作者可以将主要精力放在页面的内容,布局及美化等方面,而不必在具体的实现上耗费大量的时间和精力 。 FrontPage的界面和 Word,Excel及 PowerPoint等软件非常相似,易学易用 。 即使对 HTML语言一无所知,使用 FrontPage也能制作出具有专业水准的主页 。
尤 其 值 得 一 提 的 是,可 视 化 主 页 制 作 只 是 FrontPage 的 部 分 功 能,
FrontPage与其他主页制作工具的不同之处在于,它还是一个智能化的 Web
站点管理工具,帮助 Web管理人员以可视化的方式创建,组织,更新和维护网站 。 此外,FrontPage还自带一个 Web服务器,使用户在没有安装 Web服务器的计算机上也能通过浏览器测试刚才完成的网页,就像在 Web上浏览一样 。
23:44:43 徐州工程学院 3
FrontPage2000特点
1,直观形象的站点管理
用户可以利用 FrontPage 2000的图形界面设计和智能化管理,在直观形象的方式下创建站点的主页结构,组织站点的文件,输入输出主页或文件,测试修复超链接,将制作好的站点发布到 WWW服务器上 。
2,精心组织的图形界面
FrontPage提供的视图方式有:网页,文件夹,报表,导航和任务,每一种视图方式都为用户提供了 Web站点的不同信息 。
3,强大的模板和向导功能
FrontPage带有大量的模板和向导,使用它们可以通过一步步的选择和确认,便能完成网页主体结构的创作 。
23:44:43 徐州工程学院 4
FrontPage2000特点
4.智能化管理
FrontPage具有相当多的智能化特色。例如,当用户拖动一个新页面到导航视图中,或是从导航视图中删去一个页面,网站中所有相关页面的导航条都会自动更新;当用户改变了一个文件的文件名,或是将此文件移到另外一个文件夹时,FrontPage会自动修改网站中所有指向该文件的超链接;当站点制作完成,要发布到 WWW服务器或 Internet时,FrontPage只发布自上次发布以来被更新的文件,并自动验证网页和文件的地址。此外,在多用户环境中,
FrontPage还可以自动检测由其他用户所做的修改,以解决不同制作人员之间的冲突。
5.强大灵活的主页制作功能
FrontPage提供了一个“所见即所得”的主页制作工具 FrontPage Editor
在制作网页的同时,还生成对应的 HTML代码。 FrontPage Editor还支持几乎所有的高级页面特征,如帧、表格,CGI,Java Applet,JavaScript、
ActiveX控件、动态 HTML以及 Internet Explorer的频道定义格式等。此外,FrontPage Editor还提供了一系列 FrontPage组件,用以实现表单域处理、网站索引、搜索、计数器、导航条等复杂功能。
23:44:43 徐州工程学院 5
网页视图
1.网页视图
2.文件夹视图
3.报表视图
4.导航视图
5.超链接视图
6.任务视图
23:44:43 徐州工程学院 6
网页图片的基本概念
进行 WWW浏览之后,网页的巧妙编排,精美的图片会给人留下深刻印像,让大多数进入
WWW世界的人赞叹不已,因此图片在 Web网页中的重要性是无庸置疑的 。
网页设计者为了增添网页的风采,需要使用装饰图片 。 为了增加网页内容的可看性,需要添加说明图片 。 在网页中有些漂亮的图片带有超级链接,单击后你会发现另一片天空 。
虽然图片文件的种类相当多,但目前而言,
网页中最常使用的图片文件格式有三种:
23:44:43 徐州工程学院 7
GIF 图片格式
,GIF”是 Graphics Interchange Format的简称,是由
CompuServe公司制定的图片格式,其目的是作为网络上图片文件交换的标准,属于一种 256色,使用采用一种无损压缩方式压缩的图片文件格式,这意味着在压缩过程中,原始的图像数据并没有任何减少,图像质量不会有任何损害。
,失真”( Lossy)和“不失真”( Lossless )指的是图片在转换成此格式时,其图片品质是否和原来相问,通常为了增加压缩效果,一些肉眼看不出来的图片信息就会被删除掉。简单地说,这类图片在转换后就与原来的图片不同,而且是不可以恢复的。
GIF图片格式经过两次重大变革,最近的变革就是 GIF89a,
GIF89a允许将多个图片保存在同一个 GIF文件里,而且能以默认播放的顺序显示这些图片,用来创造动画的效果,经常用作 Web网页的广告。
23:44:43 徐州工程学院 8
JPEG图片格式
,JPEG”是其制定组织 Joint
Photographic Experts Group的简称,
这是一种能够压缩真彩色图片的文件格式,其压缩的方法属于一种失真的处理方式,
可以依所需的压缩比率调整图片品质,
以得到最小的图片尺寸,支持 24bits的真彩色图片。
23:44:43 徐州工程学院 9
PNG图片格式
,PNG”是 Portable Graphics Network的简称,在 1996年才由
W3C(World Wide Web Consortium)所制定的 Web标准图片格式,这是一种完全开放的图片格式,但其尺寸要比上述两种稍大,而且目前并没有普遍应用于网页设计 。
目前网页设计使用的图片文件,GIF和 JEPG格式是两大主流,
至于到底要选择何种格式,倒并非真正的重点,只需依所需品质和色彩数选择即可,为何使用这张图片才是网页设计首要考虑的关键 。 对于 Word 2000而言,只需选择其中之一即可,但重要的是 Word 2000保存成网页时有下列注意事项:
在网页中插入的图片,如果插入的为 JPEG格式的图片,保存时仍将它存成 JPEG格式;如果插入的为其他格式图片
(例如 TIFF或 BMP),此时 Word 2000将图片转存成 GIF
格式。 Word 2000默认使用的是 GIF格式,在 Web选项的图片选项卡可以设置输出成 PNG的格式。
23:44:43 徐州工程学院 10
图片处理参考
虽然只需插入图片即可马上让网页呈现精彩效果,但碍于 Internet网络的速度,太大或太多的图片对于拨号上网的用户反而会造成困扰,
因此如何衡量实用性和美观性便成为图片处理上考虑的重点,下面有些事项可供处理参考:
– 图片尺寸,您可以控制网页的尺寸,较小的图片当然便能更快地呈现在用户眼前。
– 图片的 颜色 数,例如操作按钮或提示图片,建议使用 16色,少用 256色图片。 16色和 256色的图片相比,256色的图片可呈现更逼真的效果,但尺寸也较大。
– 谨慎使用图片,务必使之能发挥其最大效用。
– 确定是否一定要使用图片,如能避免,尽量减少使用,因为并非所有用户都乐于见到它。
WWW幕后真正的功臣是精彩的图片。因为单纯的文字内容根本无法吸引住人们的目光,所以网络商店的网页需要加上图片、声音和影片等多媒体效果,让网络商店成为一个多媒体的资源服务点。
23:44:43 徐州工程学院 11
6.2 用表格进行版面设计
网页中可以采用表格显示系统信息,
表格也可用作版面配置工具,提供更好的信息表达方式,
将文字或图片资料以分类方式进行系统化处理,设计出具有专业效果的网页 。
23:44:43 徐州工程学院 12
表格的结构标题边框 单元格单元格间距单元格边框
23:44:43 徐州工程学院 13
利用表格构造网页
23:44:43 徐州工程学院 14
在网页中添加表单
在网站上发布信息的同时也能收集信息 。 表单在网页浏览中是相当重要的,因为您所访问的许多站点,要求在浏览的过程中,在客户登记表中进行注册,或输入本人或公司的信息 。 这些工作都可以利用表单的交互功能来实现 。
在 FrontPage 2000中容纳了更加丰富的表单工具,能轻松地使用表单控件如文本框,单选按钮,复选框和下拉式菜单等工具创建表单 。
23:44:43 徐州工程学院 15
表单的基本概念
表单元素,组成表单的最小单位,包括单行文本框,滚动文本框,复选框,单选按钮,下拉菜单,普通按钮,图片按钮以及标签 。 表单元素是表单必不可缺的组成部分 。
表单,表单在编辑页面时表现为用破拆线的框围起来的一个区域 。 表单由各种表单元素组成,同时也可以包含其他页面元素 。
在一个页面中可以有一个表单,也可以有多个表单 。
表单名称,表单名称可以作为区分不同表单的标志 。
表单元素名称,用于确定该表单元素的惟一标志 。 在同一个表单中,表单元素名称是不能相同的 。 处理表单结果时根据名称区别来自不同表单元素的信息 。
值,访问者在表单元素中提交的信息 。 根据不同的表单元素类型,值可以是访问者输入的内容或是访问者对给定的内容作出的某种选择 。
23:44:43 徐州工程学院 16
文本框滚动文本框单行文本框
23:44:43 徐州工程学院 17
下拉菜单
23:44:43 徐州工程学院 18
单选按钮
23:44:43 徐州工程学院 19
复选框
23:44:43 徐州工程学院 20
普通按钮
23:44:43 徐州工程学院 21
图片与标签
23:44:43 徐州工程学院 22
单页面向导
23:44:43 徐州工程学院 23
6.5动态网页制作
滚动字幕选择 【 插入 】 → 【 组件 】 → 【 字幕 】
网站记数器
【 插入 】 → 【 组件 】 → 【 站点计数器 】
动态广告选择 【 插入 】 → 【 组件 】 → 【 横幅广告管理器属性 】
23:44:43 徐州工程学院 24
6.6 HTML网页
超文本标识语言 HTML( Hypertext Markup
Language),一篇 HTML文档一般由两部分内容组成:
– 文档所要表达的内容信息
– 一系列 HTML的标识,通过这些标识,对文档的内容进行控制 。 大部分 HTML标识都具有起始标识和结束标识,它们成对出现构成一个,容器,,
将要控制的文档成分包含在内 。
编辑 HTML文档很简单,一般的纯文本编辑器就可以胜任。构成一篇 HTML文档,最少需要 4个标识。
23:44:43 徐州工程学院 25
HTML 4个标识
〈 HTML〉 … 〈 /HTML〉
在一个 HTML文档的主体里,最先出现的 HTML标识是 〈 HTML〉
标识,它的作用是告诉浏览器这是一个 HTML文档。文档中的所有内容和其它 HTML标识都包含在这个起始和结束标识中。
〈 HEAD〉 … 〈 /HEAD〉
这是网页头部的标识。写在 〈 HEAD〉 和 〈 /HEAD〉 之间的内容,如果又写在 〈 TITLE〉 识中,则该内容表示网页的名称,并作为窗口的名称,显示在这个网页窗口的上方。
〈 TITLE〉 … 〈 /TITLE〉
这对标识在书写时,要包含在 〈 HEAD〉 和 〈 /HEAD〉 标识之间。
〈 BODY〉 … 〈 /BODY〉
这个标识包含了文档的的正式内容,在非框架结构的文档中,该标识必不可少。在此标识中,可以定义文档内容的各种属性,如设定文本的背景色、前景色;根据链接文本的状态,定义该连接接的颜色等。
23:44:43 徐州工程学院 26
表格标识
建立一个完整的网页,灵活合理地使用列表标识也是十分重要的。列表标识可以使网页层次分明,结构清晰。
表格可以把许多相互关联的信息集中起来,便于用户分析、比较和使用;表格在网页元素的定位上也起着重要的作用,
我们可以利用表格对网页进行排版、分隔,对网页进行布局定位。
23:44:43 徐州工程学院 27
表格标识
<table>标识,定义了一个可以存放多维数据的表格。 <table>标记使用到的卷标属性如下:
23:44:43 徐州工程学院 28
表格标识
<tr>标识,定义了表格的一行。在 <tr>中又包含了 <td>标识。 <tr>的主要属性有,align属性,valign属性和 bgcolor属性,分别定义了每个单元格的水平对齐方式、单元格内容的垂直位置和表格行的背景颜色。
<td>标识,定义了表格中一个数据单元格。
rowspan属性和 colspan属性分别定义了单元格所占的行数和列数。 <td>的显示属性与上述标识的显示属性相类似。
23:44:43 徐州工程学院 29
在网页中插入表格
<table border="1" cellspacing="1" width="50%">
<tr>
<td width="50%">左上方 </td>
<td width="50%">右上方 </td>
</tr>
<tr>
<td width="50%">左下方 </td>
<td width="50%">右下方 </td>
</tr>
</table>
23:44:43 徐州工程学院 30
添加表单
表单的工作过程是将用户填写在表单中的文字内容通过浏览器发送到服务器端。
在服务器端先由表单确认程序进行检验,以确保用户的输入符合表单字段的要求,如果发现有输入错误,确认程序以确认网页的形式通知用户修改输入错误;
如果表单填写正确,数据将被传送给麦单处理程序,它接收到麦单的数据后,经过分析处理,输出用户所需的结果。
23:44:43 徐州工程学院 31
<form>…</form>标识
<form>标识定义了一个交互式表单,该标识中包括 <button>,<input>,<select>和
<textarea>控件,使用户可以通过控件向表单传递信息。
当用户发送表单时,通过 <input>或 <button>
标识完成,表单包含的数据将被发送到表单的 action属性所定义的目的 url上。
action属性的作用是将表单指向一个接收表单信息并完成信息处理功能的服务器脚本的
url上。
23:44:43 徐州工程学院 32
表单数据发送
还取决于 <form>的 method属性定义了向服务器处理程序发送表单信息的方法。
常用的方法是 post,该方法用表单的内容单独建立一个文件,并发送到服务器上。
还有一种方法是 get方法,它是将表单的输入内容作为一个,http get”请求,
然后把表单数据添加到服务器的 url上。
23:44:43 徐州工程学院 33
<input>
type属性,radiotext(简单文本行) checkbox(复选框),submit(提交按钮),reset(还原按钮)、
password(口令字段)。
name属性,为每个选项定义了文本标签;
size属性,决定了简单文本行和口令字段的长度,单位为字符;
value属性,对于简单文本行和口令字段定义了默认文本,对于复选框和单选按钮则指定了当该框被选中时返回服务器的值。而提交和还原按钮则定义了按钮内的文字;
checked属性,定义了控件的初始状态为选中状态;
maxlength属性,规定了简单文本行和口令字段内的最大字符数。
23:44:43 徐州工程学院 34
<select>…</select>
<select>标识建立了一个可以滚动的列表或菜单。
<select>的 name属性为所定义的列表或菜单提供了文本标签;
multiple属性允许多个选项值;
23:44:43 徐州工程学院 35
<option>…</option>
<option>标识定义了 <select>菜单中的菜单选项。在 <select>中,我们可以定义其中一个 <option>的 selected属性,
使得该选项为默认选项。
23:44:43 徐州工程学院 36
<textarea>…</textarea>
<textarea>标识定义了一个多行输入的文本域 。 <textarea>的主要属性是 rows
和 cols,它们分别定义了可显示的行数和列数 。 name属性为该文本域提供了一个文字标签 。
23:44:43 徐州工程学院 37
会员注册表单
23:44:43 徐州工程学院 38
自动生成的 HTML程序代码
<html><head><title>购物系统会员注册 </title></head>
<body><p align="center">购物系统会员注册 </p><hr>
<form method="POST" action="MemberIn.asp"
onSubmit="" name="Member">
<p>身份证号码,<input type="text" name="T2"
size="20"></p>
<p>姓名,<input type="text" name="T1" size="20"></p>
<p>地址,<input type="text" name="T3" size="20"></p>
<p>电子邮件,<input type="text" name="T4"
size="20"></p>
<p>会员名称,<input type="text" name="T5"
size="20"></p>
<p>会员密码,<input type="text" name="T6"
size="20"></p>
<p><input type="submit" value="发送 " name="B1"></p>
</form></body></html>
23:44:43 徐州工程学院 39
制作框架页面
前几节,我们制作的 Web页面都是一个窗口显示一个页面,这一类页面简单,
直观制作方便;
当要求在一个窗口内容纳大量信息时,
比如一个大型商务网站的首页,这种页面就很难胜任了 。
这时,我们就必须运用框架技术来解决问题 。
23:44:43 徐州工程学院 40
使用框架标识的 HTML页面
<html>
<head>
………………………
</head>
………………………
<frameset>
<noframeset>… </ noframeset>
<frame scr=”url”>
………………………
</frameset>
</html>
23:44:43 徐州工程学院 41
<frameset>标识
<frameset> 该标识是一个框架容器,它将窗口分成长方形的子区域,即框架 。 <frameset>是与 <body>平级的标识,而且它不与 <body>同时出现 。 在一个具有框架的页面内,
<frameset>取代了 <body>标识的位置,而且它还可以嵌套使用 。
<frameset> 标识可以包含一个或多个 <frameset> 或
<frame>标识 。 并且在浏览器不支持或禁用框架时,可以包含一个 <frameset>标识,用来替换浏览的内容 。 一般情况下,
为了提高页面的通用性,应提供一个有意义的 <noframeset>
标识而且包含到主框架页面的链接 。
<frameset>的 rows属性和 cols属性分别定义了该框架设置标识中每个框架的尺寸大小。每个属性用一个逗号隔开的长度列表。在长度列表中,各框架的长度可以用像素值、百分比值或相对长度来定义。
23:44:43 徐州工程学院 42
<noframeset>标识
<noframeset>标识定义了当框架不能被显示时的替换内容。
当 <noframeset>在 <frameset>内使用时,
它必须包含一个 <body>标识,
而 <body>标识内不能含有
<frameset>标识。
23:44:43 徐州工程学院 43
<frame>标识
<frame>标识定义了各个框架的外形和内容 。 一般情况下,当
<frameset>将页面分割为几个部分,就有几条 <frame>语句与之相对应 。 它与各个框架的对应顺序为现行后列 。
<frame>标识的属性有,scr属性,它定义了框架内容的 url,
通常是指向一个 HTML文件; name属性给出了框架的名字,
它的取值必须以大写或小写字母开始; marginwidth属性和
marginheight属性分别规定了框架内左右和上下边距的像素宽度值,其值必须大于 1; scrolling属性规定了行内框架是否要提供滚动条,默认值是 auto,即在需要时产生滚动条,可选值有 yes和 no; noresize属性表示禁止用户调整框架的大小;
frameborder属性定义了框架是否有边框,取值为 0是无边框,
l是有边框。
23:44:43 徐州工程学院 44
采用框架设计的网页
23:44:43 徐州工程学院 45
程序代码
<html>
<head>
………………………
<title>网络商店 </title>
</head>
<frameset rows="130,587" framespacing="0" border="1">
<frame name="top" scrolling="no" noresize target="contents"
src="index.htm" marginwidth="0" marginheight="0">
<frameset cols="82,505">
<frame name="contents" target="left" src="88sell.htm"
marginwidth="0" marginheight="0" scrolling="no" noresize>
<frame name="right" src="hotsale.htm" scrolling="yes"
marginwidth="2" marginheight="4" target="contents" noresize>
</frameset>
<noframes>
<body>
<p>此网页使用了框架,但您的浏览器不支持框架。 </p>
</body>
</noframes>
</frameset>
</html>