[综合类] 网页制作超级技巧（一）

麦迪

职务：超级版主

荣誉勋章

论坛版主勋章热心会员勋章爱心勋章爱国勋章

楼主大中小发表于 2008-1-24 00:54 只看该作者

网页制作超级技巧（一）

技巧第一部分

　　编者按：网页制作既简单也复杂。本文简单介绍了几种网页制作的技巧。
我爱电脑技术论坛$ K7 l3 j) a/ i4 q% U/ I
　　A.文字和图片效果我爱电脑技术社区--打造最好的电脑技术自学交流平台4 }/ f7 h% b' ~

　　一、让文字改变颜色我爱电脑技术论坛$ v2 |% A9 {0 t! j& f/ r

　　在有些网页我们可以看到一些文字，当鼠标移上去是一种颜色，移开就是另外一种颜色，这是怎么样实现的呢？www.520diannao.com; \: A) l& R% D2 {/ V! f

　　原来我们只需要在Head内预先定义两个类，分别定义了两种颜色，这在后面的HTML源文件中会用到这个颜色的定义：
我爱电脑技术社区--打造最好的电脑技术自学交流平台$ K- o  [! I9 {0 o3 }2 s" k
　　<style>我爱电脑技术社区--打造最好的电脑技术自学交流平台7 v+ x) b2 v1 a* d
　　　.normal {color:red;}! ^: w7 k# c2 b6 y
　　　.start {color:blue;} 我爱电脑技术论坛; h+ S, e1 `* a* ~4 d! `0 N
　　</style>

　　然后我们在要改变的字前后加上下面的代码:

　　<SPAN onmouseover = "this.className = 'normal'"　onmouseout = "this.className='start'" class=start> here </SPAN>
: `. G" p! d5 O' n4 A$ f
　　这里的“class=start”是将这行字的默认值设为 start {color:blue;}，要是不加上这句的话，你这行字的颜色就会变成HTML预先设定的数值。8 P. l6 c; a5 g6 _

　　当我们把鼠标移动到“here”上的时候，颜色为“normal”定义的颜色，而当鼠标移开的时候“here”的颜色为“start”定义的颜色（这种效果只有在IE浏览器中才可以看到）。我爱电脑技术社区--打造最好的电脑技术自学交流平台8 H) J# P7 f8 {: d1 {0 u# ^
打造最好的电脑自学交流论坛- \9 X9 g( q5 H( i/ ?. j! w7 I
　　二、给置网页加上背景图像

　　网页的背景色和背景图选择得好，会给页面增色不少。如果选取单一的背景色，难免显得单调，如果选择整个图片做背景，由于图片本身的文件大，造成网页的加载时间长，一般用户很难有耐性等待下去。那么带背景的网页是如何制作出来的？

　　很简单，一般是采用一幅很小的图片，然后铺展开，形成很漂亮的背景。对背景图的要求当然是越漂亮越好，文件越小越好。当你有了一幅可以自然拼接的图像后，在Dreamweaver中，我们可以设置background图片。www.520diannao.com# D6 E  ?1 G7 e5 Z! P8 ]

　　打开源文件我们可以看到〈BODY〉标签中多了一串代码。代码的表达式如下：
我爱电脑技术社区--打造最好的电脑技术自学交流平台3 R2 t. \5 s1 ]4 ]
　　<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFFF" >打造最好的电脑自学交流论坛0 |: a! J# h4 H0 \+ R" w
/ J& `) L, W  U' {6 b' f
　　这里的images/background.gif就是BACKGROUND的值，其图像文件名为一个URL。我爱电脑技术论坛4 V; F% S6 S* a
打造最好的电脑自学交流论坛/ x8 n2 M/ K: G
　　当然我们可以在源代码中直接加入上面的代码。
www.520diannao.com4 }7 }  b" G4 F: W/ I" v7 k
　　B.链接和段落电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站- Q6 e- ^4 d! f
, K) N; X3 X& g8 W- v
　　三、去掉超链接的下划线我爱电脑技术论坛9 b& u0 p+ f" X! s

　　在访问一些页面的时候，我们会发现，当鼠标移动到具有超级连接的文字上的时候，有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢？电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站0 t! \' p* e  K0 J7 J$ m3 O! m
打造最好的电脑自学交流论坛; U% n7 I7 |, M
　　我们在<HEAD>...</HEAD>之间插入下面的代码。

<style>我爱电脑技术论坛* ~2 P" x: x" v
B {font-weight: 700; }www.520diannao.com0 t2 ?- |* E9 Y4 L$ m3 h% @: \
P {padding: 5px 0px;
margin: 0px;
font-family: 宋体,黑体,宋体; 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站9 I% p. U/ C, P) M+ _! H
}打造最好的电脑自学交流论坛8 W/ P3 A/ n1 l8 ^) X+ d: H  u
A {text-decoration: none}
TD { font-family: 宋体,黑体,宋体; }7 A" z  r! s; D! [
</style>
<script language="javascript">, c2 z( z9 H* ~! C, r4 ^5 R
var contents = true;! h8 G; r0 H4 [4 A- t. u: m4 a
</script>

　　更简单的方法是：

<style>www.520diannao.com0 J( E! b8 u4 F: `" u9 o6 ~. W, Z
<!--打造最好的电脑自学交流论坛# @- `! c! r3 }  z# e
a {text-decoration:none}电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站# ^. v+ M6 j. G$ |4 ^5 H; p( ^
a:hover {color: red;text-decoration:none}我爱电脑技术社区--打造最好的电脑技术自学交流平台6 g6 N  |) P4 k1 v
--!>
</style>
打造最好的电脑自学交流论坛) f- [% f: ?6 r
　　技巧第二部分6 q' |  t8 r/ h! o7 {+ k
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站  r) _" \6 K" n, q
　　四、段落缩进的方法  www.520diannao.com0 I8 f: ]" Q9 p% B+ O* D

　　在利用Dreamweaver制作有关文档资料内容的网页时，如果是英文书写格式，段落一般不缩进（不支持半角空格）；如果需要缩进往往需要人为的加入两个中文全角空格，才能够显示出位置缩进效果。. r, O( x7 y! N% l6 D
除了上面所说的外，还有下面几种方法，可以值得一试，现介绍如下。我爱电脑技术论坛9 y; n. T5 J7 g! L6 l

　　 1.预格式(PRE) 我爱电脑技术社区--打造最好的电脑技术自学交流平台0 N; l7 \6 M2 F5 B2 |9 w1 k+ |
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站6 z- o& L, S3 @2 H& c2 a% H6 Q- g
　　用预格式编写的源文件，在显示时照源文件中的排版字样显示，空行和空格都能很清楚地区别开来。如源文件为：　　
我爱电脑技术论坛$ p0 M2 g5 I9 c( j% P
　　<pre>www.520diannao.com2 d( ^/ u, ~) j6 h& {, F* E
　　－－预格式显示……我爱电脑技术社区--打造最好的电脑技术自学交流平台5 i  {- ^5 h2 v' z
　　</pre>www.520diannao.com3 Z6 t* m$ R5 s; j+ P

　　网页就会按照你预先设置好的显示方式显示，即在“预格式显示”的前面就会空两个汉字的位置。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站! n- \. ]) C+ \/ {
我爱电脑技术社区--打造最好的电脑技术自学交流平台! ], \# T' G/ s2 i8 K
www.520diannao.com2 s) i- N4 z  e6 _' X# A' o: s. w
　　2.插入点图或图形电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站6 |- [4 h. I1 I# }$ l8 B' e
打造最好的电脑自学交流论坛3 t+ ?" E( E, C0 {3 ~9 S* O
　　点图是指图片中只有一个或几个像素点，用肉眼看不出来。当我们在段落开头插入这样一个点图，并用HSPACE和VSPACE属性来调整点图的左右和上下的空格，以达到段落缩进。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站' `8 u; X& h) F( ?4 {, b

　　同样可以插入图形，只不过该图形的颜色需要用网页背景色，这种方式用IMG的WIDTH和HEIGHT属性调整图形大小，以达到缩进。

　　插入图形的方法，需要我们掌握好HSPACE和VSPACE大小的尺度，使之刚好留出两个汉字的位置，这样才比较美观。  j# l, D- b+ _" L
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站* M0 C) W( p; N# a- n! j3 k

　　3.插入没有边框和内容的表格

　　这种方式与上述的插入图形方式类似，该表格没有边框和内容，是空表格。用TABLE的WIDTH和HEIGHT属性调整表格大小适合缩进的需要。
我爱电脑技术论坛9 A. h& W4 N% R8 U4 m3 i
　　利用表格来定位一般来说比较可靠，我常常就采用这种方式来对比较复杂的页面进行定位。不过这种方法有一个问题，就是可能是页面的源文件变大。因此也不见得是格式控制的首选。

　　4.插入特殊的空格字符“&nbsp” 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站' h8 I2 ?2 p" T- R0 [

　　“&nbsp”代表非显示空格字符。插入若干个“&nbsp”字符，中间用分号(；)或者空格隔开，也可以实现中文段落缩进。不过在Netscape中只能写小写字母，而在IE中大小写都可以。电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站7 a# A! w" D/ ^: z6 ^( U
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站% m& k7 R* X, w- O3 a7 _$ ?  R# R
　　C.小结

　　这几种方法主要是针对利用HTML的语言编写网页而言。在一些网页制作工具，如网景浏览器中有专门加入空格的工具条，也可以完成段落缩进。

TOP

‹‹ 上一主题 | 下一主题 ››

Processed in 0.100076 second(s), 7 queries, Gzip enabled.

当前时区 GMT+8, 现在时间是 2008-7-5 10:47 赣ICP备07004505号

清除 Cookies - 联系我们 - 我爱电脑技术论坛 - Archiver - WAP - 界面风格