我爱电脑技术论坛's Archiver

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

深潜网页制作学就用技巧

网页制作超级技巧（一）
Fy$E}[{3u7~%y
#x6P$W.N3z 一、让文字改变颜色  e7HM-n3s#nv

p(C~$L#G+vG 在有些网页我们可以看到一些文字，当鼠标移上去是一种颜色，移开就是另外一种颜色，这是怎么样实现的呢？d-m@Umc
&YYo q(};zM a6H
原来我们只需要在Head内预先定义两个类，分别定义了两种颜色，这在后面的HTML源文件中会用到这个颜色的定义：Bv'a%g+DX.~:cA
Xplok^7`mV
　　<style>;x/J6o\9_7bUbNJ4X
　　　.normal {color:red;}WgX!_dL
　　　.start {color:blue;}
pB'Z%v qO 　　</style>h\vuG+A
F[0[k7v#v0s.E
　　然后我们在要改变的字前后加上下面的代码:!^#s8qjiK;z7_
jCn;j"u
　　<SPAN onmouseover = "this.className = 'normal'"　
@e[Sn5m4Q(E5p/C+dL 　　　onmouseout = "this.className='start'" class=start> here </SPAN>,m3r)J?owD N1Nl _X i
o`0ZNXVYh
这里的“class=start”是将这行字的默认值设为 start {color:blue;},要是不加上这句 的话，你这行字的颜色就会变成HTML预先设定的数值。
.BTk;qp']8K8W5w:ewy
i!q| BkP)u-} 当我们把鼠标移动到“here”上的时候，颜色为“normal”定义的颜色，而当鼠标移开的时候“here”的颜色为“start”定义的颜色（这种效果只有在IE浏览器中才可以看到）。
(RJ?1o5y6~}b}J E7jk0}k
二、给置网页加上背景图像  
&WB|)FG
A|TW1m.]0R[ 网页的背景色和背景图选择得好，会给页面增色不少。如果选取单一的背景色，难免显得单调，如果选择整个图片做背景，由于图片本身的文件大，造成网页的加载时间长，一般用户很难有耐性等待下去。那么带背景的网页是如何制作出来的？
#J#Um:dAxS 6V0CZ | F}&WHa
很简单，一般是采用一幅很小的图片，然后铺展开，形成很漂亮的背景。对背景图的要求当然是越漂亮越好，文件越小越好。当你有了一幅可以自然拼接的图像后，在Dreamweaver中，我们可以设置background图片。#l{z2m hf%[
&Z|+}9Z-i
打开源文件我们可以看到〈BODY〉标签中多了一串代码。代码的表达式如下：
,Oc8E7`}|~!W Tb:_k
qLH h#PIT9k(Tu <BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFFF" >
/EP#e }#H
@d~ x)n+f 这里的images/background.gif就是BACKGROUND的值，其图像文件名为一个URL。 当然我们可以在源代码中直接加入上面的代码。
KMZSh&mb Xx
I9MJjZ:e 三、去掉超链接的下划线 _:E Pmgzy
)~'[O&le"Y2U*x
在访问一些页面的时候，我们会发现，当鼠标移动到具有超级连接的文字上的时候，有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢？ Py ^ t;DW

/BF1D Uuq0X[5p 我们在<HEAD>...</HEAD>之间插入下面的代码。+c#NY5LV[!MY`

Ic`'O/ER 　　<style>B {font-weight: 700; }+{)ya9a G? aX f
　　　P {padding: 5px 0px; j)r!U(W6~;n g
　　　　 margin: 0px;;SckF%Js
　　　　 font-family: 宋体,黑体,宋体; I%q!i:n w"c*bQ+e
　　　　}
t6z?3yB;H3T5U 　　　A {text-decoration: none}
H%`u(X+Y+l 　　　TD { font-family: 宋体,黑体,宋体; }
2v;yo\*B(sa? 　　</style>
_-iL8W6?,U+a 　　<script language="javascript">
p o#o)^;dL4^ 　　　var contents = true;
$i \A$k VC?6ag;~ 　　</script>
Bi'DC/v
\+h|A-J*xy 更简单的方法是：
@'[M?.O1]A"fb S r[;l%\;{$s,p
　　　<style>
iq;sp%O.JM;a 　　　 <!--\Gz@0i
　　　　　a {text-decoration:none}
Q.]4j8j6B PW!oU2M 　　　　　a:hover {color: red;text-decoration:none}
5M6sq uvK} 　　　 --!>G6`ny OD J"A
　　　</style>
[4D;| F~-A}@
m~ggrt3f 网页制作超级技巧（二）%|8h%A;S;`L%N
dv-{n1Jy$u
四、段落缩进的方法   B7KI9rNUp d

lE6T$E/G I 在利用Dreamweaver制作有关文档资料内容的网页时，如果是英文书写格式，段落一般不缩进（不支持半角空格）；如果需要缩进往往需要人为的加入两个中文全角空格，才能够显示出位置缩进效果。sLU\y#a gV
+Y5n'wQ#do
除了上面所说的外，还有下面几种方法，可以值得一试，现介绍如下。 `+d T UH

2Em4y]}&\ hI f 1.预格式(PRE)
(s`v[G%`4b+^9F
;t#P6el z-m"P}V 用预格式编写的源文件，在显示时照源文件中的排版字样显示，空行和空格都能很清楚地区别开来。如源文件为： 　　
!h4b]"Cr6Hh!SY3u#@
6a6cq S\:@$f 　　<pre> ]m~X7^{1j nH
　　－－预格式显示……sj7|#b'{%k2MB
　　</pre>0Hv d+~ Y
r~.W,@!R?$M"{*V
网页就会按照你预先设置好的显示方式显示，即在“预格式显示”的前面就会空两个汉字的位置。
$K+? y|3U%y#o2y|
uo,P$~2i4F7q.K7K 2.插入点图或图形/i[Y7m@;vl
2n`~WIj_)p
点图是指图片中只有一个或几个像素点，用肉眼看不出来。当我们在段落开头插入这样一个点图，并用HSPACE和VSPACE属性来调整点图的左右和上下的空格，以达到段落缩进。
3|uQ5A ?4L3G -U n$\t.G%]G
同样可以插入图形，只不过该图形的颜色需要用网页背景色，这种方式用IMG的WIDTH和HEIGHT属性调整图形大小，以达到缩进。
1@;[-ZkX:{c 　　
gE"|!sT7fWac 插入图形的方法，需要我们掌握好HSPACE和VSPACE大小的尺度，使之刚好留出两个汉字的位置，这样才比较美观。Bi Y.kQ P

7g.@rZ q 3.插入没有边框和内容的表格 e'XkHx*D
,@] A V+]-MTB%y)Q
这种方式与上述的插入图形方式类似，该表格没有边框和内容，是空表格。用TABLE的WIDTH和HEIGHT属性调整表格大小适合缩进的需要。n@#\Hw}&lO~

oZmr @b 利用表格来定位一般来说比较可靠，我常常就采用这种方式来对比较复杂的页面进行定位。不过这种方法有一个问题，就是可能是页面的源文件变大。因此也不见得是格式控制的首选。
o [9dT'k;y X
y/v sZb'v 4.插入特殊的空格字符“&nbsp”
3E)pSUEP s.Z8w1z7\`1}a
“&nbsp”代表非显示空格字符。插入若干个“&nbsp”字符，中间用分号(；)或者空格隔开，也可以实现中文段落缩进。不过在Netscape中只能写小写字母，而在IE中大小写都可以。
9|uRT `!^@R
xfk*Im8f 这四种方法主要是针对利用HTML的语言编写网页而言。在一些网页制作工具，如网景浏览器中有专门加入空格的工具条，也可以完成段落缩进。
mw-Z0m Ut%YR6U G "W`*tIF1u m
五、为超级链接设定目标窗口 f"h%rqbk;LMq
r'wAO@C_!w
目标窗口是页面链接所指内容显示的窗口，也就是当你单击了页面某一个链接后，该链接所指的内容在那个窗口显示。大多数情况下，我们无需关心它，因为一般都是在同一窗口显示。但是有时我们需要弹出一个新的窗口，而不是替代原来的窗口，怎么办呢？很简单，这里我们只要更改超级链接源代码的target属性就可以了。 I!T/S S l%db ~
6XDhdd9W
TARGET是链接标签的属性，它的作用就是指定目标窗口，TARGET有以下几个值：
GrGl7W q%?rhJn'`.z
　　_self-将链接指向的内容装载到当前页的窗口或框架中；
9y]l&[$N*A9g&C k 　　_top-完全取代当前页面的所有框架；
9aa^D*jyWy!\ 　　_blank-为链接指向的内容打开一个新的窗口
-| ]c NT7gFs`B*v W 　　_parent-把链接指向的内容装入当前页〈FRAMESET〉父窗口中/RR_:?O@'[ WO

[TISx&Z;F$| 如要使单击超级链接产生一个新的窗口，可将相应超级链接改为如下形式：
Ft"Gl [jm~ 　　<a href="www.yourname.com" target="_blank">yourname</a>

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

网页制作超级技巧（三）"LpSZ!rW
#~#w,n(E)DO
六、实现文字的自动换行
l_3KT!Ab9X8C-Q eU/[LXbVfAtG(k
我们在编制主页的时候，有时候会发现自己制作的主页不能够自动换行，尤其是对一大段文字，必须拖动窗口的滑块跑很久才能看完后面的文字。如何消除这种情况呢？这里我们介绍用表格来定位的方法：#}:a-BLv[

3nK4Tu K)Z 我们认为很有效的方法就是采用表格来对文字进行定位。当然这里的表格我们一定要给定它的绝对宽度（直接给定或间接给定宽度），那么输入的长文字便会自动的换行了。
,i(K]9N E1rL4L
9y}P{*o$b 这里所说的直接给定表格的宽度，是指我们直接设定表格的width属性值为某一个设定值。如我们可以如下设定：
g ^&q Z bnFg 　　<table width="420">...</table>　I m+p+Jh"p*CQ
?Q:?zLOq*{ ]
相对值是指采用相对于上一级表格的宽度，通常用一个百分数来表示。比如我们在一个相对外层的表格中设定了表格的宽度，那么在内层的表格中只要给出一个相对的宽度就相当于已经给定了表格绝对宽度。我们可以看看下面的源代码：
X1n5]a/x!H6_&UJa 　　<table width="760">Yo8ASFh1S^eW+q
　　　　...0`(K-q1K[
　　　　<table width="60%">9_i"e"n,NdQ,H`
　　　　　　...*K:I6FjeI9ndSV
　　　　</table>
8[&Gh?9uX 　　</table> 7La3QDn(zH%w
这里就相当于我们已经给定了内层表格的宽度为760*60%=456个像素点了。 s i'dEj,y+_Y+y
Kc%d5H1k/w4A {jz)g
'AP:B0M%h
七、如何弹出公告窗口
@#FS?9W [.ryv ^ V Rfv [UZ~
有时我们需要采用公告窗口来展示一些重要的信息，所谓公告窗口是指我们浏览主页时，随主页面的加载而自动弹出的小窗口，公告窗口中一般会放上新闻、布告的信息。下面我们看看怎样用几句简单的JavaScript语句来实现它。
G5|*eB~ 　
/G"^q!|$t%M`k/p 方法一：X&C3Wy$HX)o
在<head></head>之间插入如下一段JavaScript代码：
?"j u3qM.L#I"G
W!A_v#ewb <script language="JavaScript">
A)W.GOoe7? <!--8P:ooV|K
var gt = unescape('%3e');
[A_F1V$V#\} var popup = null;*ZrI#C(|m
var over = "Launch Pop-up Navigator"; h9E6F7V:F
popup = window.open('', 'popupnav', 'width=200,height=170,resizable=0,scrollbars=auto');
HI-hxq0o,rG if (popup != null) {
GzIX \\ I)O"q if (popup.opener == null) {
0`D9Lag7v2\B popup.opener = self;
tIp3@9?EK8ha }T)L]mPk6\r2B
popup.location.href = 'test.htm';6B&Hc+E_DUl
}]2z6c$D ur#P
// -->
`D[:t!A'N/J:l </script>|v ?~'n(u*{

(T n)^T!gS(Y]A7W"x 方法二：g,f(L2Sf7y
直接在<body>与</body>插入如下一段代码：
x_-[:iq mpS RV,vu`
<script language="JavaScript">*Vma z!B5d
  window.open("test.htm","测试公告窗口","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");/e5D5pe#u-[
</script>
0f$A[.bA%| T
2X#yJ u)S2tP!E 它们的作用是相同的，其中windows.open()的作用是打开一个窗口，括号内的各项参数的用法我们可以在下面看到，我们可以根据自己的需要设置各个参数的值。
%T d ?k+pY 9k%PqY@
  窗口参数           参数介绍 v1L W-s2u]!Z E
toolbar=yes,no     是否显示工具条 7m*Zu)aR TE
location=yes,no    是否显示网址栏 9Fv `bn*U:v
directories=yes,no 是否显示导航条 2Vd Su@:p5Jqe a
status=yes,no      是否显示状态条
:Ng @g|W1Vi"C menubar=yes,no     是否显示菜单 $s N7~lX]i5s5RX |
scrollbars=yes,no  是否显示滚动条
mVb\M-Y"c|)d)O? resizable=yes,no   是否可以改变公告窗口大小 t0E8{S@
copyhistory=yes,no 是否显示历史按钮
3[x9_O7F y/T%{ width=300          公告窗口的宽 U)@ UN1s vd
height=200         公告窗口的高 dvL8[Q7Y~tw
left=100           公告窗口的左上顶点距屏幕左边100像素
m5_@%S;k@B top=100            公告窗口的左上顶点距屏幕顶端100像素

页: [1]

Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.