Board logo

标题: 网页设计中HTML常范的五个错误 [打印本页]

作者: admin    时间: 2008-1-19 23:40     标题: 网页设计中HTML常范的五个错误

1.网页背景色的设置
- x  x/ s# s! H& d6 ]4 D  B% h/ F& z9 [, ?. [
  犯错机率:很大
3 `3 f1 p; m0 s( W5 d- ?  普遍性:较广  ^+ D+ ^1 h1 K2 z0 C! v( B: S
  犯错可能性:懒/不知道) r+ l% P; g' {8 [8 G
' H" m: M, k  S9 s! D6 d
  约2年前我曾发现21cn上出现过一次没有设置背景色的情况,当时我用Email通知了他们,自此之后这个问题我从没犯过。
: E1 J( u/ |: D1 h+ |4 Q3 E* |  l6 Y: H
  绝大部分人的窗口背景颜色都是白色,但如果象我这样个性的人,就会把windows窗口的背景颜色改成灰色或其他色,这样一来,如果你没有设置网页的背景颜色的话,你以为正常的网页在我的电脑上看起来会是一团糟。( F2 w( q( P/ \$ i

# C* {" P& @8 W6 X/ r; y: j' e+ P, I  2.Align center(自动居中)的滥用2 W& s& Z( _5 u3 h* d

" Y: i3 w5 X& y6 x+ @8 ~  犯错机率:非常大% e! J4 P7 v% C
  普遍性:非常广
) d, T" ]( x* k  犯错可能性:以为方便/以为好用
  A0 w& ]$ d1 }9 ?4 T- K" s* `
( c% E  c" \$ t" v4 x6 x" r, C  工作中,修改、维护别人的网页是家常便饭,发现不少人有一个陋习:* _, M/ O( {( q9 y6 H) d( o5 R/ ^
  在表格中的文字或图片,你是这样来令它居中、靠左或靠右过?
* d5 [) J. d5 z; N& M
1 N: Q3 q' Q. _9 p: |2 I  <div align="center">大家好啊!!</div>
. k1 s% w5 {! a8 W! [) E! {1 x4 w  <div align="center"><img src="xx.gif"></div>) g, b0 n) j5 Y* }) g5 ]

# h& u. X  m4 R% q* s# h  当有些表格很多、文字很多、内容分得很细的时候,爱用这种方法(它在DW里的快捷键是Ctrl+Alt+C,FP不知道是什么)的人往往会狂用,惨了,我一碰到这样的网页就头痛,为什么要用那么多<div>来居中呢?tell me why?难道表格没有居中属性吗?为什么要加入这些垃圾代码?特别修改的时候也不能把文字或图片删除了就能自动清除<div align="center">这个代码,还要手工去清除,在复杂点的网页中就会无故地浪费维护者一笔时间。; Q7 \) ^: G0 O, k' Q

9 j( D& ?7 f3 n. n7 A  建议使用<td align="center">来居中,当需要多重定位的时候,才考虑<div align="center">,因为这个代码并不好处理,所以能用表格代替就用表格替代。! U3 p) _" \+ L+ X; Z! Y4 v& R5 @
; R7 @& }% N! D# l
  3.重复使用实现相同功能的代码、或杂七杂八的乱套代码
+ I5 b' p% G7 W4 S: G
  V7 N! ~  d2 p/ L# d' q$ |  犯错机率:非常普遍
0 Y' p: Q! D. H  普遍性:非常普遍
0 T  d+ ~3 S5 p  犯错可能性:复杂多样
6 a$ Q% U+ {: d  C1 h- Y: u. c/ J: Q! h  m# b, G
  大家先来看一看下面的代码:' U  Y, Q' }. [
  <center><p><font class="css_id"><font class="font11"> <font color="#CCCCCC"><font color="#FFA76C" style="font-size:14px; font-family:隶书">标 题</font></font></font><br> </center>你觉得这样的代码看起来感觉怎么样呢?</font></p>. O  @" h. x4 \
% j6 n2 N  l( [: L/ U- W- i
  我不知道读者有什么感觉,压根我一看到这样的代码就会先自我麻木十来秒,这十来秒目的是为了找一个能表达我的思想感情的词(我?你想反问我吗?sorry~~,我一般不犯,因为我做网页至少有一半以上的时间在浏览代码,代码中多了不该多的东西我一眼就能看出来。)。
4 \0 F3 w1 f" Z  M; _7 I6 _" R7 x+ K! K* h6 ]% a4 H
  看看上面的代码,使用了2个class,4个font来定义2个文本,其实这样的问题很多时候是在大家不断的修改中产生的,对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重,当然,事实上别人浏览这个网页的时候,是没有任何问题的,但维护的人就…………。
: C$ ]7 F" }# ^6 U6 q' j/ b这些多余的垃圾代码完全是可以省略掉的,其实上面的例子不够严重,更恐怖的我都见过。6 ~! m0 Y6 ~8 y" n" J
$ M" ~) n' [2 I% U, u
  另外还有一个问题也要提提的,就是<p>...</p>和<center>...</center>,为什么要用它们呢?tell me why~~,有甚者是这样的:) J% `$ b- _- t6 A3 h$ Z
/ t! G8 D- J0 ~5 Q, P+ S/ r
<td><div align="center" class="css_id">" x4 t$ f/ _1 E; K0 Z
<center>
! H7 O" F; ]! z6 `3 H- Y# @7 f<p align="center"></p>1 c3 j) p" }- p2 y% ]8 `
< p align="center"><font class="css_id"><font class="font11"> <font color="#CCCCCC"><font color="#FFA76C" style="font-size:14px; font-family:隶书">标 题</font></font></font><br> </center></td>你觉得这样的代码看起来感觉怎么样呢?</font></p>< /center></div></td>1 _5 q+ m) D5 D3 b

5 @5 H( z2 S5 t  看到这样的代码我是会很无奈的(更无奈的是我经常看到,而且必须看),我来简化一下:* T( I5 e. o9 z$ H
< td align="center" class="css_id"><br><font color="#FFA76C" style ="font-size:14px;font-family:隶书">标题</font><br>你觉得这样的代码看起来感觉怎么样呢?</td>
) a$ W' e8 l& f) Q  W7 y( e* ~- k. |0 x  k: }9 i
  是不是看起来觉得这个世界安静了很多?"标题"后面的文字完成可以定义在<td>的class里,就算不用css,再用多一个<.font>也没问题,一样很清爽。
" y- O6 a. J" m- I7 p& b0 Y' U. ^7 j( a7 d5 k+ i
  4.表格不正确嵌套
- Z% ^' P0 ~! e# P) m- z$ f
& H2 r$ ^* ]$ N6 V* I) @  犯错机率:一般& y% M# c: A  d
  普遍性:普遍
) `5 F) j! m0 }  T0 Y  犯错可能性:对这个不了解
9 V1 J' R5 s' k, A, @9 y! |. M- C  i9 p' P
  其实这是一个街知巷闻的问题了,但还是不断有人犯,不正确的嵌套表格,可能会令到你被老总叫到办公室里臭骂一顿,会令到你以为正常的网页用ADSL开2、3分钟都开不了。+ D9 i3 A+ W$ l2 s% |

+ H. E9 O$ a- d" @  先讲第一个问题,就是在一个大表格里不断地嵌套表格,这样会令到打开网页的速度变慢(虽然说现在的IE改善了这一问题,但还是不建议这样做),另一方面维护、修改也极不方便,一般来说简单的套用是没有问题的,甚至3、4层,但是不要把所有内容都放到一个表格里去。( K! x8 y6 x* ]; T7 \
4 ~/ ?! `( @, n; ]' H. k: {5 @
  第二个问题就是在一个大表格里放入所有内容,而其中包括一个免费的计数器代码,嘻嘻,你猜有可能出现什么情况呢?其实也没什么大不了的,最严重的就是你的IE象死机了一样,什么都没显示。解决方法就是把计数器单独放在一个表格里,别和其他内容一起放在同一表格。/ x; |  i' x9 v. l  s+ M

" h1 a1 ?* }$ a* Y& w7 S) e! [  5.写代码缩进的时候,不是使用Tab而是使用空格) S/ @  d* Z) h5 \! K) K

% b0 f1 a& }7 t% Z8 g: b  犯错机率:一般
# J. b3 |! L6 q' l) W# n! O  普遍性:较少
# l. R6 P( ~' a" Y( M# e  犯错可能性:不知道Tab更好用
/ y! m5 J, R' U3 L$ Q% W- K+ |
/ v! m4 N) }6 X$ O" H4 F% h1 F  这一个问题针对js、vbs、asp、php之类,html不能使用Tab会写一点程序的都知道什么叫缩进,怎么样缩进?有人使用空格,有人使用Tab,如果你是使用空格的,那么从现在起,改用Tab吧。  u3 O1 G! H( d" I, T# E

' v0 x" L! I/ z! q! B. S( E2 \  使用空格有二大坏处:1、缩进速度慢、修改速度慢。2、增大网页体积,会影响速度。




欢迎光临 捌玖网络工作室 (http://www.89w.org/) Powered by Discuz! 7.2