|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14341
- 金币
- 2456
- 威望
- 1647
- 贡献
- 1404
|
程序编制
2 p7 T" ^: s0 `; _7 P3 _& _ 随着WEB的发展，与浏览者的交互越来越受到网站制作者的重视。现在的主页跟最初的静态主页相比，界面更加友好，功能更加丰富。这些技术需要一些编程语言来完成，如javascript、VBSCRIPT、CGI、ASP等等。要想使自己的网站在因特网的浩瀚海洋里脱颖而出，就必须掌握这些编程语言。
" D: k/ W1 j9 d4 q% j1 s 经验
8 k5 f `( k) W* F, h( B; l 经验不是一门技术，却是你制胜的法宝。网站制作中的很多问题，如网站结构、版面安排、中文处理等，都需要你的经验。网上有很多设计优秀的网站，要多学习、借鉴，自己多动手、多尝试，相信你也可以做出引人注目的漂亮网站。& b0 g; T- q s* e7 C9 D, y/ O
页面基本元素
7 p4 r; Z( Z0 H" Z# { HTML的样子
% l( n# q& h5 o) R+ E HTML语言是由一系列标记组成的，每个标记有它特定的含义。标记用<>标示，以便和页面的内容区分开来。大多数标记成对出现，后面的标记加上一个“/”，表示结束。就像这样：* {2 u, }- O: w# f
这是黑体。
4 r5 j7 D- w: e( G/ j) E- @ 这句话的显示结果是：' E& ?- h' P# {% x5 Z
这是黑体。
3 p6 Z2 _' y" n4 ]9 T B 表示黑体开始，表示黑体结束，标记在浏览器里不显示。如果你用过WPS中文处理系统，就会发现HTML的标记和WPS的控制符有点类似。把HTML的各种标记弄清楚，你就是主页制作大师了。简单吗？不一定，我们还是开始学习吧。
# M5 P- d# b- S; ^& w6 M 我的第一页
' ]* u+ X: T& |我们首先来看一个最基本的主页的HTML代码：
+ G" B/ ] m9 p3 s6 q5 W$ Y7 d. w8 u: }7 Q+ `5 k
--------------------------------------------------------------------------------
' r3 t" U; I$ t. x" Afirst.html" M2 Q3 J' Y- k6 n
这里是页的内容。
6 U/ d# w7 \- k* R
4 w/ B! a8 B' e8 X) F; h0 a& W--------------------------------------------------------------------------------1 t1 O% S! d* p0 u o+ k
在“记事本”里输入上面的内容，保存文件，注意把“保存类型”改成所有文件（*.*），输入文件名“first.html”。使用浏览器查看一下结果。; H: l8 i9 ^( Z$ C I
图1-1: J7 U; A2 j" t
从浏览器的“查看”-“源代码”菜单项里，我们可以看到我们刚才输入的源代码。
+ u" P- n' t# T: J( a) r. K* I 对比源代码和显示结果，我们发现，一个基本的HTML页有以下几部分构成：6 i: s0 v: D6 Y6 Y# W
. |* J; B; _& F3 A+ q2 A. I/ D: U 说明本页面使用HTML语言编写，使浏览器软件能够准确无误地解释、显示。0 ~; o% ^. `1 j/ L4 {: ~. C
; S& L K3 ~2 B: O" T
HTML页头，包含页面的一些设置信息。& l6 u0 U0 r9 R5 y0 g2 p& T
3 t& J% J$ u) {) y TITLE是HEAD中的重要组成部分，它包含的内容显示在浏览器的窗口标题栏中。如果没有TITLE，浏览器标题栏显示本页的文件名。网上有很多人忽略了TITLE的设置，你可以经常看到UNTITLED或HOME PAGE等这样的默认标题。由于Internet Explorer的收藏夹和Netscape Navigator的书签都是用TITLE作为存储地址文件的标示，所以为你的主页起一个恰当的TITLE是很有必要的。
9 t" c$ M5 e0 ?& n+ f* d* v- m" R! G$ o( s! w/ m3 z
BODY包含HTML页面的实际内容，显示在浏览器窗口的客户区中。
) x: ^$ C. W9 r' D, a/ _ 页头
9 n/ O$ V a9 L+ n$ w. k 除了TITLE标记外，HEAD里还有其他的几个标记。这些标记虽然不常用，但是需要有一定的了解。
! A' Z/ `; U2 C7 QMETA5 ^4 v- G+ Y/ g) J
META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能，又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法：
$ F) y: d, {1 v* {( c/ k+ U x
7 J3 X t3 e( c! l, Z8 r! N& ~
" a# w' |* j5 F" L0 u5 m 本页的关键字和描述。在页面里加上这些定义后，一些搜索引擎就能够让读者根据这些关键字查找到你的主页，了解你的主页内容。
- w: [! `6 k. j/ i; g5 E9 l1 |, v$ @. d# S: v4 }; k: {
浏览器将在60秒后，自动转到new.htm。你可以利用这个功能，制作一个封面，在若干时间后，自动带读者来到你的目录页。5 s8 M2 a2 n+ d& B% L
如果URL项没有，浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。7 X+ ^' w9 j0 N3 W) t7 o
$ ]2 {! T* ^* X: q 描述本页使用的语言。浏览器根据此项，就可以选择正确的语言编码，而不需要读者自己在浏览器里选择。GB2312是指简体中文，而台湾BIG5内码的主页则是用BIG5。0 F' Q. Q* m1 o" E
0 V+ u, _& B9 ?4 j 强制性调用网上的最新版本。浏览器为了节约时间，在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时，直接显示硬盘上的文件，而不是网上的。如果你想让读者每次都看到最新的版本，就加上这句话。; v4 H3 v- L/ |" `
LINK5 d; ~( R5 v2 q2 Q7 c! [
显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下：) S# i+ ~8 R6 N0 S S
( Y2 y) n% }/ K REL参数说明两个文档之间的关系，HREF说明目标文档名。关于层叠样式表，将在后面的课程中详述。5 v' j9 }. i) m. W0 P3 {
BASE2 T* Q$ x9 U4 r- c6 w6 R8 a
本文档的原始地址。语法是：
) S7 R7 |( n. r& Y. ^- g, D$ c) c
* [* v" @9 C& i8 W/ n( C7 q) o! V 这样，读者下载你的文档之后，也可以知道是从哪里下载的。
; V! j- `0 _8 ] y$ R, jBODY
/ C6 P3 q" g& H/ z* C BODY标记有一些属性，用于定义页面内的显示效果。5 X0 s3 B. a; |7 ~. ^' ~2 [" x
ALINK、LINK、TEXT、VLINK—— 文字的颜色。( p. C6 U. t0 G6 m
ALINK：当前激活的连接的文字颜色。: I4 N$ M. m- E
LINK：连接的文字颜色。5 \( c# C; P, I- \! ^7 j) f) P- B; U
TEXT：文字的颜色。
+ d$ T$ y& A1 |; q( @ VLINK：参观过的文字颜色。
+ D' _3 ^7 n3 Z 注意：文字的颜色要和背景色有明显的差别，以便读者浏览。+ H" N C0 U* M6 I, G- s& T
BACKGROUND、BGPROPERTIES、BGCOLOR——页面的背景部分。+ g( \ ^# ^% U6 y- P
BACKGROUND：背景图案，该图案在页面内平铺。背景图案应保持单一色调，以保证页面文字易于阅读。" H/ `# @+ Y/ R/ B6 X
BGPROPERTIES：设置成FIXED，则背景图案不滚动。（只对INTERNET EXPLORER有效）3 [" a; P$ i8 |3 K* O
BGCOLOR：背景色。
8 c- q. h) _8 `( p |7 A3 n0 F 注意：如果你的背景图案是深色调，因之文字颜色为淡颜色，那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”，那么在背景图案没有显示的情况下，你的文字在白颜色下很难阅读，所以应该选用一个跟你的背景图案颜色一致的背景色。
4 ~0 n/ c: |. _+ h; v5 Y6 I' _& V LEFTMARGIN、TOPMARGIN——页边空白。（只对INTERNET EXPLORER有效）6 m& g+ h* I+ f& S e- \) ~& u
LEFTMARGIN：左边页边空白。* b$ m$ G, Y. Y5 _4 D5 L, F
TOPMARGIN：顶端页边空白。, j, }& O; y( H0 T" N
HTML的基本元素就是这些，怎么样，不太难吧。下一课我们就开始制作完整的HTML文件。好了，下课！如果你有什么地方不明白，就来我“办公室”问吧。 |
|
发表于 2008-1-19 23:22
| 