网页设计第九章网页制作初步

第九章网页制作初步

第九章网页制作初步

9.1HTML语言

9.2Web技术

9.3FrontPage2000

■■■I|x

第九章网页制作初步

Web网页是一个文本文件，其中包含文本、图

形和超链接等元素。制作网页的基本技术标准是

超文本标记语言(HTML,HyperTextMarkup

Language)o

HTML是根据国际标准化组织（ISO）的广义置

标语言SGML(StandardGeneralizedMarkup

Language）标准定义的，它规定了文档的逻辑组

织格式，包含了文本、图像、动画、表单和链接

等多种形式。

aiBaBS

第九章网页制作初步

9.1HTML语言

由至ML雷理erT筋tMarkupLanguage燧，

文本标记语言）是标准文档格式化系统，乏

使用HTML控制信息的文本文件被称为HTMll

:交件在西楸eb文件。至爰其全二毒爰三叁；

第九章网页制作初步

1.创建简单Web页

使用普通的文本编辑器就可以创建

Web文件。方法是：在文本编辑器中，

输入一段文本，再给文本加上HTML标记

，然后以扩展名htm或html存盘。

HTML文件由控制部分和正文部分组成。HTML的

控制标记对大小写不敏感，同时控制标记用“<

〉”进行区分。

第九章网页制作初步

(1)〈HTML〉和〈/HTML〉标记，把全部源代码“

括起来“，就像括号一样。

⑵〈HEAD〉和〈/HEAD〉标记，把全部控制部分

括起来。

⑶〈TITLE〉和〈/TITLE》标记，把页面标题括

起来。

(4)〈BODY〉和〈/BODY〉标记，把全部正文部分

括起来。

第九章网页制作初步

HTML标记一般配对使用，只有少数标记单独使用。

厂例如：]

⑴〈P〉表示一个自然段落的结束，一般加在两

个自然段落之间，此时〈/P〉被省略。

⑵<BR〉表示转行（断行），不表示自然段落的

结束。与〈P>标记相比，〈BR〉标记因为产生的行间

距较小，被广泛使用。

J⑶〈HR〉表小固水半线。J

第九章网页制作初步

2.超级链接

超级链接是指多个Web页面通过关键字或

图像连结起来，通过关键字或图的单击操作

,可以自动切换内容的技术。带有“链接”

的文本文件叫做超文本。链接所使用的关键

字一般为蓝色下划线的文字标志，通过＜A

HREF二….〉和〈”〉标记实现。

留01IF

第九章网页制作初步

⑴本地链接。本地链接与网络无关，通过链接

把本地的HTML文件链接起来构成信息整体。

例如：包含〈ahref=〃hl.htm〃〉单击此处

</A>

⑵异地链接。通过Internet的统一资源定位器

(URL),链接远程其它计算机上的HTML文件。

例如：〈AHREF="http://www.xju.edu.cn〃〉

新疆大学主页〈/A〉。

演示例9

3

第九章网页制作初步

9.1.1文字控制］

有关控制文字的HTML标记是：〈FONT〉…〈/FONT〉

常见的属性参数如下：

规定字体的大小尺寸

COLORS规定文字的颜色。

FACE二规定字体

ir

第九章网页制作初步

/^HTML标记中，下列标记也能进行字体显示效果\

的控制：

<SMALL></SMALL>规定〃'字体显示

<BIG>……</BIG>规定大字体显示

<B></B>规定黑体字显示

<Center></Center>规定文字居中

\©齐显示

aiBaBS

第九章网页制作初步

9.1.2图像和动画

__插__入.__图__形__或__动__画__的__标__记__是__：._＜__IM_G__S._R_C_二__〃_文_件_名__〃__》_/

有以下属性:

SRC=〃...〃图象（动画）文件的URL地址文件名。

ALT=〃...〃在图像未完全收到时，图像位置显示的

文字信息。

ALIGNS...”确定图像的对齐方式。

1

________一-一"""""7；-・__

——______寅示

第九章网页制作初步

9.L3整体控制

页面的整体控制属性在＜BODY＞标记中，常用的以下

属性：

BACKGROUND=构成背景的图片文件名。

BGCOLORS...”背景颜色。TEXT二〃...〃默认文本颜色。

LINK二〃...〃未被访问的文字链接源的颜色。

ALINK=〃...〃被激活的文字链接源的颜色。

VLINK=〃...〃访问过的文字链接源的颜色。BORDER='

图像边界的宽度，单位是像素点。

第九章网页制作初步

9・1.4表格标记

//表格的标记是\

/〈TABLE>...</TABLE>

<f属性语法如下：

\⑴边线控制：BORDERS..

\⑵宽度控制：WIDTH=〃...〃

■0FlIV

第九章网页制作初步

表格的行标记是〈TR>..・</TR>

属性语法如下：

ALIGH=“.”行中单元水平对齐方式

VALIGN=〃...〃表行中垂直对齐方式

IT

第九章网页制作初步

表格的列标记是<TD〉..・</TD>

属性语法如下：

ALIGN=〃・・.〃单元内容水平对齐方式

VALIGN=〃・・.〃单元内容垂直对齐方式

ROWSPAN=〃...〃该单元跨过的行数;

COLSPAN=〃...〃该单元跨过的列数。

■S

第九章网页制作初步

9.L5其它控制标记

HTML标记非常多，而且数量和规则一直还处于

不断发展变化的过程中，随着可视化网页自动制

作工具的迅速普及，不常用的标记已经没有必须

记忆的必要。用户只要知道最常用的一些标记，

就可以学习XML、ASP和JavaScript等更强劲的信

息控制技术。

留0

第九章网页制作初步

⑴帧标记<FRAMESET>

、（2）表单标记〈FORM〉…〈/FORM〉

y

表单包含的控制标记是：（INPUT〉。

〈INPUT〉标记具有丰富的属性参数，语法如下:

TYPE="表示控制部件的类型，

NAME=“表示该控制部件的名称。

SIZE=表示该控制部件的大小。

alue二”・・.”表示该控制部件所具有的值。

aiBaBS

第九章网页制作初步

小结:

•HTML概念

•认识WEB页

•HTML标记简介

留01IF

第九章网页制作初步

9.2Web技术

Web的面貌已经发生了非常重要的变化，

以访问DBMS和在线商务活动等功能为代表的

动态Web应用程序成为计算机发展的热门技

术之一O

动态Web技术也是基于客户机/服务器结构

的，在总体上可分为客户端扩展技术和服务

器端扩展技术两大类，以客户机/服务器应

工用模式为基础

二_________________________________7

aiBaBS

第九章网页制作初步

在客户端扩展的技术主要是

JavaScript>VBScript、PerL,

Applets、ActiveX、XML、CSS

和Flash等。

服务器端扩展的技术主

要是CGI、ISAPLNSAPI、

SSLASP、PHP、JSP和

Net等。

留01IF

第九章网页制作初步

1.客户端扩展技术

客户端扩展技术是指浏览器中集成或增加的

支持数据变动的新技术，提高了Web页面的实

用化程度。客户端扩展技术可以验证交互数

据的合法性，进行数据计算、分类和统计等

功能，甚至可以在页面内制作游戏程序。

第九章网页制作初步

2.标记扩展

为了让Web“动”起来，HTML本身的标记规则

也在进一步扩展和改进，CSS（叠层式表单语

言）以精良的界面装饰技术占据了不可替代

的技术角色，它支持三维立体的超文本组织

方式，允许设计者自己定义Web页面的样式，

具有更好的易用性和扩展性。XML（扩展式标

记语言）是HTML语言的改良版，支持用户自

定义的控制标记，可以有效地降低阅读的复

杂性。

第九章网页制作初步

3,服务器端扩展技术

浏览器扩展技术和服务器扩展技术总是联合使

用，动态Web技术的发展主流是服务器扩展技术。

动态Web页面最好是服务器和浏览器共同协作，才

能达到较好的网络应用效果。

CGI（CommonGatewayInterface,通用公共网关

接口）是最先发展起来的动态Web技术、是一种接口

规范，定义了交互操作中双方必须遵守的规则集。

aiBaBS

第九章网页制作初步

4.ASP(ActiveXServerPages)

ASP是微软公司面向大众化的动态Web技术方案，

建立了一整套动态Web服务器环境，可使ASP指令

标记与ActiveX控件程序结合使用，建立高效的动

态Web应用程序。

ASP指令标记(脚本)使用特殊符号(<%%>)加

以标注，例如：<%=Now()%>o含有ASP脚本的

Web页面以asp为后缀名，全部ASP脚本都在Web服

务器端执行，Web服务器仅将执行的结果发送到浏

览器端。一

aiBaBS

第九章网页制作初步

5.PHP(HypertextPreprocessor)

cPHP也是一种服务器端嵌入式脚本

标记语言，其工作原理与ASP和JSP

相似，它的特色是高速，比ASP执行

速度更快。PHP脚本采用了C、Java

和Perl等多种语法格式，源于

RedHatLinux,已被很多Internet

站点所采用。

留01IF

第九章网页制作初步

9.3FrontPage2000

……

FrontPage2000是Microsoft公司推出的

i)ffic套为ooo系列办公套装软件之一，使用方「

窥，充分体现了“所见即所得”制作效果，

一——————————————————一—一————————————————————————————————————————————————

操作简单和交互能力强的特点吸引了广大的专

^二-三―二―二二-三—二—二二-三―二-二三二二-三―二—二二-三―二―二二-三—二〜三J

，・・

P

第九章网页制作初步

T具栏

1.用户界面标题栏

KMicrosoftFront1□Ix|

菜单栏文件（E）编辑3s＞（v）插入①格式@xa（i）表格®框架®窗口曲）帮助（由JL

囤M

D，］，同篇|晅卜身殴呼|X电包◎'I®n

［（无）▼（默认字体）•普通，BZUE在串隼,,

任务

\普通碑比4预览7臼

状态：要获取帮助，语按F1

栏

第九章网页制作初步

FrontPage2000提供了6种视图方式

1.网页视图4.导航视图口

2.文件夹视图5.超链接视图

3.报表视图6.任务视图

网页视图上，有3种页面模式

(1)普通标签

⑵HTML标签

(3)预览标签

第九章网页制作初步

2文字符号处理

在FrontPage2000窗口的“普通”标签页面中,

对文字信息输入和编辑的处理方法；常用工具和

格式工具的外形也基本上与Word相似。

网页中需要重;

I一般具有4

点突出的内容（大种段落的对齐

小标题等）应米用方式：左对齐、

比较突出的颜色，居中对齐、右

而正文则最好采用对齐和两端对

?一的颜色。J

F0网国国国

第九章网页制作初步

9.3.1超链接

在FrontPage2000中，将链接被定义为两部分

组成：超链接主体和超链接目标地址。超链接主

体是指引导超链接的部分（包含文本和图像）。

当鼠标指针移动到超链接的主体

上时，鼠标指针将会变成一个手的

形状。超链接目标地址是指鼠标单

击后，将要显示内容，即切换对彖。）

F

第九章网页制作初步

书签用来标记网页中的信

息位置，因而建立页内超链

接。当一个页面文件很大或

者要定位光标位置时，书签

超链发挥积极的作用。创建

书签超链接时，首先必须定

义书签，然后再把超链接指

向书签。

第九章网页制作初步

9.3.2图像控制

FrontPage2000对Web中插入图像的技术，提供

了比较完整的技术支持。

FrontPage2000充分体现了图文混排工具的优

越性，极大地加快网页制作的效率和提高网页制

作的质量。

第九章网页制作初步

9.3.3表格处理

在Web中，表格可以有效的组织、规划

和布局页面。但是，表格标记是属于比

较复杂的标记，手工编写容易出错。

第九章网页制作初步

9.3.4动态元素

在网上浏览网页时，经常可以看到有些元素

在运动，为了能够容易制作网页的动态效果，

FrontPage2000提供了多种动态效果制作技术，

并把这些动态元素作为组件集中在一起，通过

“插入”菜单中“组件”选项（或工具栏中的组

件按钮）可以插入动态元素。

留01IF

第九章网页制作初步

1.横幅广告

FrontPage2000中，可以制作几幅图片

一幅幅地按照一定的切换效果不断播放，

还可以控制每一幅图片显示的时间。

第九章网页制作初步

2.悬停按钮

悬停按钮是一个动感按钮，如果把鼠标

移到该按钮上，就会它会改变颜色和亮度,

如果单击该按钮时，就会链接到另一个页

面。缺省情况下，悬停按钮是一个彩色方

框的文字按钮。

第九章网页制作初步

3.字幕

可以滚动的文字一般称为字幕。在很多网

页中都可以看到滚动字幕，特别醒目，经

常用来发布一些站点的通知或提示信息等。

滚动字幕在网页中的效果是：包含一些文

字或〃'图片的一个方框沿着一个方向滚动

或来回滚动。

觑同国

第九章网页制作初步

4.站点计数器

站点计数器的主要功能是显示被访问的

次数。浏览者访问网页时，站点计数器

中的数字就会增加，就可以实现访问统

计的目的。只有将包含计数器的网页从

Web服务器进行发布后，站点计数器才能

正常工作。

第九章网页制作初步

5.DHTML

DHTML是表示动态元素的HTML技术。使

用DHTML技术可以把所选定的网页元素设

置为动态效果。

第九章网页制作初步

6.过渡效果

网页过渡效果是指当浏览者进入或离开

网页时所产生的效果。

网页过渡

事件事:过渡效果（X）：

无效

果

混

合

盒

收缩

状

盒

放射

周期砌@）:状

圆

收缩

形

圆

放射

形

向

擦除

上

向

擦除

下

向

擦除

右