|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14197
- 金币
- 2389
- 威望
- 1647
- 贡献
- 1337
|
程序编制9 L4 G: e# d5 v( B2 r4 [ t
随着WEB的发展，与浏览者的交互越来越受到网站制作者的重视。现在的主页跟最初的静态主页相比，界面更加友好，功能更加丰富。这些技术需要一些编程语言来完成，如javascript、VBSCRIPT、CGI、ASP等等。要想使自己的网站在因特网的浩瀚海洋里脱颖而出，就必须掌握这些编程语言。
. N& r; X' z8 q 经验4 }* W9 Y! c! ]" u L
经验不是一门技术，却是你制胜的法宝。网站制作中的很多问题，如网站结构、版面安排、中文处理等，都需要你的经验。网上有很多设计优秀的网站，要多学习、借鉴，自己多动手、多尝试，相信你也可以做出引人注目的漂亮网站。; t! {1 g( E1 g3 k
页面基本元素
- C, l( ]& \! I! |' D/ Q7 \4 j HTML的样子$ y5 l) T9 O( t% y/ T
HTML语言是由一系列标记组成的，每个标记有它特定的含义。标记用<>标示，以便和页面的内容区分开来。大多数标记成对出现，后面的标记加上一个“/”，表示结束。就像这样：3 I5 R* N+ A# K( x( l
这是黑体。* B; M# U; y$ R
这句话的显示结果是：; s. z, b) H7 z1 i" V8 ?& p
这是黑体。
, d3 \: z( u4 K 表示黑体开始，表示黑体结束，标记在浏览器里不显示。如果你用过WPS中文处理系统，就会发现HTML的标记和WPS的控制符有点类似。把HTML的各种标记弄清楚，你就是主页制作大师了。简单吗？不一定，我们还是开始学习吧。
5 F- R0 ]2 F q' H) s8 o 我的第一页
I, X% j' l! G) H/ R我们首先来看一个最基本的主页的HTML代码：
1 d# z# }4 q/ J) Y1 h
3 n; N3 l! M$ n7 ?0 u8 f* O/ V--------------------------------------------------------------------------------
8 V6 U; l" R/ C" I& ~/ ?+ @first.html) {$ z1 |" E) {" B, m8 `3 V
这里是页的内容。
7 W0 H4 h5 f2 O1 d
# I9 D+ ]" |& \! h1 k+ A- \* P; h! B--------------------------------------------------------------------------------! X X% p0 c8 k/ o6 h4 C) ~% R4 l7 q
在“记事本”里输入上面的内容，保存文件，注意把“保存类型”改成所有文件（*.*），输入文件名“first.html”。使用浏览器查看一下结果。 ?# \) S6 M I4 S8 S' ]( }+ H
图1-1
7 L1 ]! g/ r( w4 f3 l% s' N4 s* Z 从浏览器的“查看”-“源代码”菜单项里，我们可以看到我们刚才输入的源代码。
$ y3 x. e; L/ l& V# Y 对比源代码和显示结果，我们发现，一个基本的HTML页有以下几部分构成：) X4 t( {4 q! P( @3 n ^7 x" s
/ T m. }8 R! i4 h4 i
说明本页面使用HTML语言编写，使浏览器软件能够准确无误地解释、显示。% M4 |$ s' X1 ^2 R
. G! q: c, `/ l& x HTML页头，包含页面的一些设置信息。' e" a1 b) u9 C" k, |
- ~4 v: B, c0 C! o
TITLE是HEAD中的重要组成部分，它包含的内容显示在浏览器的窗口标题栏中。如果没有TITLE，浏览器标题栏显示本页的文件名。网上有很多人忽略了TITLE的设置，你可以经常看到UNTITLED或HOME PAGE等这样的默认标题。由于Internet Explorer的收藏夹和Netscape Navigator的书签都是用TITLE作为存储地址文件的标示，所以为你的主页起一个恰当的TITLE是很有必要的。
0 a& V. j+ ?# u4 M8 U6 J
. q k# S7 h. @7 Z- X BODY包含HTML页面的实际内容，显示在浏览器窗口的客户区中。
; B& K4 d$ S+ n* Q# X* n& L 页头
3 E$ g/ n d' W, ~ 除了TITLE标记外，HEAD里还有其他的几个标记。这些标记虽然不常用，但是需要有一定的了解。
+ T& M" c9 P+ ]+ QMETA
S3 \! ^/ y' @/ M META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能，又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法：
! \% C* ^' N4 w5 \0 f9 r/ @! d/ C3 Y) v! Q) y
D1 y' C* c. h' @
本页的关键字和描述。在页面里加上这些定义后，一些搜索引擎就能够让读者根据这些关键字查找到你的主页，了解你的主页内容。* c. U1 a: n( p p+ @) A! Z" w2 n
5 X$ Z- ^+ Y2 F2 N" A5 d# a2 V0 |0 G
浏览器将在60秒后，自动转到new.htm。你可以利用这个功能，制作一个封面，在若干时间后，自动带读者来到你的目录页。1 F w! A9 u% q2 C
如果URL项没有，浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。' Y8 E9 u s, k( @$ B+ L% q
! J$ p( z4 } k 描述本页使用的语言。浏览器根据此项，就可以选择正确的语言编码，而不需要读者自己在浏览器里选择。GB2312是指简体中文，而台湾BIG5内码的主页则是用BIG5。" ^" l0 V9 B, J) V" x1 F5 W% r
( P5 q& C/ t% R& O5 i 强制性调用网上的最新版本。浏览器为了节约时间，在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时，直接显示硬盘上的文件，而不是网上的。如果你想让读者每次都看到最新的版本，就加上这句话。
/ T, C# v4 ^+ a8 x! m5 {LINK
5 x6 X" R2 e+ E9 d( N* ?$ b 显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下：
6 M3 W3 Y8 k+ {( y0 u
- r2 g- R0 Z" V REL参数说明两个文档之间的关系，HREF说明目标文档名。关于层叠样式表，将在后面的课程中详述。" L! T" D" H; D; e# E, N
BASE; x# S- O' G" X
本文档的原始地址。语法是： W1 I. j' l7 a. y8 c: w1 S
* J% a- ^! s u; e4 S# G! f 这样，读者下载你的文档之后，也可以知道是从哪里下载的。+ V* p$ S) E* V9 a8 E4 c9 z/ n
BODY9 r6 D( y2 `: u# u- h
BODY标记有一些属性，用于定义页面内的显示效果。
& h) d4 | I3 q) Y9 H ALINK、LINK、TEXT、VLINK—— 文字的颜色。
! F3 U2 c; b9 }" i& S, o% k5 R ALINK：当前激活的连接的文字颜色。
9 a" ?- a f3 T LINK：连接的文字颜色。
$ o" P, M) t" R% u" t, o TEXT：文字的颜色。9 Y* }4 p \: H& N# R
VLINK：参观过的文字颜色。
! x2 V# c3 B9 [5 F9 ^3 e$ W; ?, z 注意：文字的颜色要和背景色有明显的差别，以便读者浏览。
% ~# J5 @6 M- N. J/ Z- k, a( e BACKGROUND、BGPROPERTIES、BGCOLOR——页面的背景部分。: h2 f% L$ f# h
BACKGROUND：背景图案，该图案在页面内平铺。背景图案应保持单一色调，以保证页面文字易于阅读。
E& J2 h- z7 b2 `* ]- f* N% f BGPROPERTIES：设置成FIXED，则背景图案不滚动。（只对INTERNET EXPLORER有效）. e* l) v0 d( f3 a% a
BGCOLOR：背景色。
7 |& Y$ H2 P+ S8 f+ S$ d3 | 注意：如果你的背景图案是深色调，因之文字颜色为淡颜色，那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”，那么在背景图案没有显示的情况下，你的文字在白颜色下很难阅读，所以应该选用一个跟你的背景图案颜色一致的背景色。
3 w& j; E" E0 I% i+ D; w6 v LEFTMARGIN、TOPMARGIN——页边空白。（只对INTERNET EXPLORER有效）5 B! O* @# j, V1 O" l: y5 N6 O# E
LEFTMARGIN：左边页边空白。
% j. f! f; }9 l; F1 n2 Q( _ TOPMARGIN：顶端页边空白。( [7 R0 x m% |( O! s' G
HTML的基本元素就是这些，怎么样，不太难吧。下一课我们就开始制作完整的HTML文件。好了，下课！如果你有什么地方不明白，就来我“办公室”问吧。 |
|
发表于 2008-1-19 23:22
| 