  
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14221
- 金币
- 2401
- 威望
- 1647
- 贡献
- 1349
|
程序编制
. K. h' p1 d6 k/ w% x. J& h 随着WEB的发展,与浏览者的交互越来越受到网站制作者的重视。现在的主页跟最初的静态主页相比,界面更加友好,功能更加丰富。这些技术需要一些编程语言来完成,如javascript、VBSCRIPT、CGI、ASP等等。要想使自己的网站在因特网的浩瀚海洋里脱颖而出,就必须掌握这些编程语言。, G, g( i1 r2 x& y4 u& U
经验
7 x6 t- v. B9 |1 z 经验不是一门技术,却是你制胜的法宝。网站制作中的很多问题,如网站结构、版面安排、中文处理等,都需要你的经验。网上有很多设计优秀的网站,要多学习、借鉴,自己多动手、多尝试,相信你也可以做出引人注目的漂亮网站。) i" w" `2 ~+ y$ I3 I- p" D
页面基本元素
; N6 m8 M* }9 V s( A HTML的样子
+ N/ U6 ?1 N& X6 l HTML语言是由一系列标记组成的,每个标记有它特定的含义。标记用<>标示,以便和页面的内容区分开来。大多数标记成对出现,后面的标记加上一个“/”,表示结束。就像这样:
6 S8 H9 H; @& w$ B0 y; b/ I! \- J2 A 这是黑体。
- R* h- G7 p# m( t, T: A 这句话的显示结果是:
1 [1 c+ l( E1 ]" [6 r; g 这是黑体。
5 j! n; @4 |0 U 表示黑体开始,表示黑体结束,标记在浏览器里不显示。如果你用过WPS中文处理系统,就会发现HTML的标记和WPS的控制符有点类似。把HTML的各种标记弄清楚,你就是主页制作大师了。简单吗?不一定,我们还是开始学习吧。
. v9 x+ g: n6 n0 B) K 我的第一页 . k/ D& H3 G+ S! q
我们首先来看一个最基本的主页的HTML代码:
6 ~: U3 J' q$ s* m- i' m0 H% a3 I% d" @ K0 q( T. W' _ Y' M8 O" u
--------------------------------------------------------------------------------
( [5 v2 |+ V5 N- \; m" u; ?& a5 [first.html
( w- I5 d/ G# k% H+ h, S$ _这里是页的内容。
$ d/ }; v/ j! D1 |9 Z: _8 M7 d% R+ v) m- p
--------------------------------------------------------------------------------" f8 ]$ Y2 S" O
在“记事本”里输入上面的内容,保存文件,注意把“保存类型”改成所有文件(*.*),输入文件名“first.html”。使用浏览器查看一下结果。
. v3 x$ P" b, v# `图1-1
, z1 }+ H7 W- x0 Z3 A 从浏览器的“查看”-“源代码”菜单项里,我们可以看到我们刚才输入的源代码。 U) w" k/ R5 T& g" m; u( P7 H
对比源代码和显示结果,我们发现,一个基本的HTML页有以下几部分构成:) y1 A' s. |- U8 r6 L! Y6 ]
5 f9 o7 i' Z; K$ ]1 z$ l 说明本页面使用HTML语言编写,使浏览器软件能够准确无误地解释、显示。
/ }( ]9 G4 Y. j& ^
8 d' I' m, d5 q) X" S5 V HTML页头,包含页面的一些设置信息。& T! y% K( X v2 z* ^& N
: Q8 L4 ]; w! A
TITLE是HEAD中的重要组成部分,它包含的内容显示在浏览器的窗口标题栏中。如果没有TITLE,浏览器标题栏显示本页的文件名。网上有很多人忽略了TITLE的设置,你可以经常看到UNTITLED或HOME PAGE等这样的默认标题。由于Internet Explorer的收藏夹和Netscape Navigator的书签都是用TITLE作为存储地址文件的标示,所以为你的主页起一个恰当的TITLE是很有必要的。6 T& q6 {% c) g. [, x) V
0 K3 G2 ]% l6 z% Z5 O* X! ?7 ?+ J- l BODY包含HTML页面的实际内容,显示在浏览器窗口的客户区中。' G7 p0 H/ x8 ~( D" [
页头! w. S9 L+ ?9 ?( { d1 p0 A
除了TITLE标记外,HEAD里还有其他的几个标记。这些标记虽然不常用,但是需要有一定的了解。/ h6 h6 y% [/ A
META {9 C# G3 [% b0 D4 k" O
META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能,又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法:$ p# c- O4 s5 ^# [( o1 d
3 y7 L# q6 z5 s: y& ]8 p2 { {* u- _# q
( m3 \& t3 o- ?0 e' @ 本页的关键字和描述。在页面里加上这些定义后,一些搜索引擎就能够让读者根据这些关键字查找到你的主页,了解你的主页内容。* S! d6 Q4 `) k1 N* F
/ L% U+ t" g( w. r 浏览器将在60秒后,自动转到new.htm。你可以利用这个功能,制作一个封面,在若干时间后,自动带读者来到你的目录页。
* K8 `& A& N2 x1 n 如果URL项没有,浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。, ]5 ~1 a# r- R9 ]/ l4 T+ l* x
1 G" N+ h+ ?4 c9 H
描述本页使用的语言。浏览器根据此项,就可以选择正确的语言编码,而不需要读者自己在浏览器里选择。GB2312是指简体中文,而台湾BIG5内码的主页则是用BIG5。# _, z" ]; g) P# B8 ?8 h
' W7 ?! l/ Y7 f6 z: p2 O# x 强制性调用网上的最新版本。浏览器为了节约时间,在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时,直接显示硬盘上的文件,而不是网上的。如果你想让读者每次都看到最新的版本,就加上这句话。6 o- a* |9 R( i! ~; z' f* y
LINK
8 Q: H- ?; s: z5 w/ }) E- C* ~ 显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下:- i) i& k! T) b+ T7 ^* J! R" v
& U# b- ~: A$ d; v# a, j4 C) \ REL参数说明两个文档之间的关系,HREF说明目标文档名。关于层叠样式表,将在后面的课程中详述。* ?& Z J# x+ _4 t$ f$ Q/ h
BASE
9 c) w3 y# T9 R X, |* S 本文档的原始地址。语法是:
2 u3 O9 _( l9 @9 S1 U6 x0 G: a
' e# C$ O8 E# Y& x8 U 这样,读者下载你的文档之后,也可以知道是从哪里下载的。
; E% `, x0 x" n$ V6 VBODY
+ p1 c2 {) B% E BODY标记有一些属性,用于定义页面内的显示效果。
$ u. a# \# @( { D2 V3 J ALINK、LINK、TEXT、VLINK—— 文字的颜色。9 `. N& B: X& A+ N: T- F
ALINK:当前激活的连接的文字颜色。
8 M2 l' _8 G' o( b, @5 a& f LINK:连接的文字颜色。( `" T$ L+ W1 j& I- \
TEXT:文字的颜色。
' t# G% j, p& @# ^' ^8 s( m VLINK:参观过的文字颜色。
+ l- P$ p7 b2 ~: L" f! n1 I v) v 注意:文字的颜色要和背景色有明显的差别,以便读者浏览。
5 Q+ w* w8 R9 D4 F$ k0 \% n BACKGROUND、BGPROPERTIES、BGCOLOR——页面的背景部分。' O" J! K4 G+ }% O! ?
BACKGROUND:背景图案,该图案在页面内平铺。背景图案应保持单一色调,以保证页面文字易于阅读。
7 Y+ j) i& k, X" n% V5 R6 g BGPROPERTIES:设置成FIXED,则背景图案不滚动。(只对INTERNET EXPLORER有效)
; N" e) a% i% y ]3 R BGCOLOR:背景色。8 ?+ e' ~( [+ |- ? L5 Z
注意:如果你的背景图案是深色调,因之文字颜色为淡颜色,那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”,那么在背景图案没有显示的情况下,你的文字在白颜色下很难阅读,所以应该选用一个跟你的背景图案颜色一致的背景色。
* N" ~, [) N# R6 E4 H. g- H. j0 z8 ? LEFTMARGIN、TOPMARGIN——页边空白。(只对INTERNET EXPLORER有效)
0 M: `0 t& e+ F5 R$ A LEFTMARGIN:左边页边空白。: V/ b7 I2 o7 X* R
TOPMARGIN:顶端页边空白。
8 H# U) ?$ F5 Y ? I! W HTML的基本元素就是这些,怎么样,不太难吧。下一课我们就开始制作完整的HTML文件。好了,下课!如果你有什么地方不明白,就来我“办公室”问吧。 |
|