网页制作超级技巧（一）(页 1) - 网站建设

麦迪发表于 2008-1-24 00:54

网页制作超级技巧（一）

技巧第一部分
;^8^0S\N a1t
　　编者按：网页制作既简单也复杂。本文简单介绍了几种网页制作的技巧。R:k7V8g!XTF
^v1Xy5wM
　　A.文字和图片效果
a Be2~/| o"U
　　一、让文字改变颜色
F#[0W2H:N eu
　　在有些网页我们可以看到一些文字，当鼠标移上去是一种颜色，移开就是另外一种颜色，这是怎么样实现的呢？
9\u#nge3J{6r
　　原来我们只需要在Head内预先定义两个类，分别定义了两种颜色，这在后面的HTML源文件中会用到这个颜色的定义：
yD-Y9^0p0i:\
　　<style>
　　　.normal {color:red;}R[N1TsLZY
　　　.start {color:blue;}
　　</style>

　　然后我们在要改变的字前后加上下面的代码:
ng:kx/Nd
　　<SPAN onmouseover = "this.className = 'normal'"　onmouseout = "this.className='start'" class=start> here </SPAN>%]4O^&m Z W6B dn5v ^ _s
HQ/E]!^9{G
　　这里的“class=start”是将这行字的默认值设为 start {color:blue;}，要是不加上这句的话，你这行字的颜色就会变成HTML预先设定的数值。

　　当我们把鼠标移动到“here”上的时候，颜色为“normal”定义的颜色，而当鼠标移开的时候“here”的颜色为“start”定义的颜色（这种效果只有在IE浏览器中才可以看到）。
P+?1~(|w7|F@
　　二、给置网页加上背景图像 Y2{0z3X6e
Q|9?I J.[ ?
　　网页的背景色和背景图选择得好，会给页面增色不少。如果选取单一的背景色，难免显得单调，如果选择整个图片做背景，由于图片本身的文件大，造成网页的加载时间长，一般用户很难有耐性等待下去。那么带背景的网页是如何制作出来的？

　　很简单，一般是采用一幅很小的图片，然后铺展开，形成很漂亮的背景。对背景图的要求当然是越漂亮越好，文件越小越好。当你有了一幅可以自然拼接的图像后，在Dreamweaver中，我们可以设置background图片。0})WVkK6TR

　　打开源文件我们可以看到〈BODY〉标签中多了一串代码。代码的表达式如下：%rK:x3[1J q3kjr
K eWzUKfL+\
　　<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFFF" >"d,[U-?\lV,e-t:H

　　这里的images/background.gif就是BACKGROUND的值，其图像文件名为一个URL。
{%T\$V,z6Q9]H8p,?|
　　当然我们可以在源代码中直接加入上面的代码。
K${0Y,b(uRe:cx~
　　B.链接和段落5Xq#V&g$wi
%Fyv/]fW;}
　　三、去掉超链接的下划线

　　在访问一些页面的时候，我们会发现，当鼠标移动到具有超级连接的文字上的时候，有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢？

　　我们在<HEAD>...</HEAD>之间插入下面的代码。
i O6k6Q-C,H-QB~
<style>%y,@ nWn r
B {font-weight: 700; }*DW,o6N7h G,cT
P {padding: 5px 0px; &R-J oo`x
margin: 0px;
font-family: 宋体,黑体,宋体;
}
A {text-decoration: none}!pu0w5\Wc^C
TD { font-family: 宋体,黑体,宋体; }
</style>s:_k5{ N0y6Q._
<script language="javascript">
var contents = true;.\IzMHy+a5u0S&R
</script>

　　更简单的方法是：
9p^5P~*j,H D4s J
<style>[ R.UT3F\KC$O^*W
<!--
a {text-decoration:none}%P[LqUB+N
a:hover {color: red;text-decoration:none}
--!>7_ \6cp,~&o$S
</style>
#@,p`;_T9g,hm2`
　　技巧第二部分

　　四、段落缩进的方法
Dl+}N!R%ZP4i
　　在利用Dreamweaver制作有关文档资料内容的网页时，如果是英文书写格式，段落一般不缩进（不支持半角空格）；如果需要缩进往往需要人为的加入两个中文全角空格，才能够显示出位置缩进效果。 W-]H!Y(I-I
除了上面所说的外，还有下面几种方法，可以值得一试，现介绍如下。

　　 1.预格式(PRE)
9KW)t` `&n#[9Td
　　用预格式编写的源文件，在显示时照源文件中的排版字样显示，空行和空格都能很清楚地区别开来。如源文件为：　　

　　<pre>
　　－－预格式显示……N%n2{Ll:Zfu
　　</pre>

　　网页就会按照你预先设置好的显示方式显示，即在“预格式显示”的前面就会空两个汉字的位置。%Wwc~^r&Fl
,EL2``5p!|l0U

　　2.插入点图或图形 ,W2~bDirp-M"|(S
8u(Wd6i$pt
　　点图是指图片中只有一个或几个像素点，用肉眼看不出来。当我们在段落开头插入这样一个点图，并用HSPACE和VSPACE属性来调整点图的左右和上下的空格，以达到段落缩进。
(NE1DPn*@5z7M
　　同样可以插入图形，只不过该图形的颜色需要用网页背景色，这种方式用IMG的WIDTH和HEIGHT属性调整图形大小，以达到缩进。 '_? ^wrLZs9_
Hk:TCl5?
　　插入图形的方法，需要我们掌握好HSPACE和VSPACE大小的尺度，使之刚好留出两个汉字的位置，这样才比较美观。|}9f-f*h-u(UEr8h
A`g|dq

　　3.插入没有边框和内容的表格 Al^2{hq;K

　　这种方式与上述的插入图形方式类似，该表格没有边框和内容，是空表格。用TABLE的WIDTH和HEIGHT属性调整表格大小适合缩进的需要。

　　利用表格来定位一般来说比较可靠，我常常就采用这种方式来对比较复杂的页面进行定位。不过这种方法有一个问题，就是可能是页面的源文件变大。因此也不见得是格式控制的首选。
_| BXZ/~;E;zu
　　4.插入特殊的空格字符“&nbsp” s(nijw6vl
bC.E d:DA
　　“&nbsp”代表非显示空格字符。插入若干个“&nbsp”字符，中间用分号(；)或者空格隔开，也可以实现中文段落缩进。不过在Netscape中只能写小写字母，而在IE中大小写都可以。_/toBmi"KxZ
-Qrn:L.X`*]#eg#A$Y
　　C.小结

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

页: [1]

我爱电脑技术论坛's Archiver

网页制作超级技巧（一）