- 等级
- 建筑队长
- 等级进度
-
- 积分
- 386
- 阅读权限
- 45
- 主题
- 精华
- 社区币
- 星梦
- 注册时间
- 2004-2-16
- 最后登录
- 1970-1-1
|
<DIV align=center><B><FONT color=#990000 size=3>使用Web标准建站第4天:调用样式表 </FONT></B></DIV><DIV align=center>用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的。<P> 事实上,所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局。这是思维方式的变化,一开始有些不习惯。呵呵,任何变革都会有阻力的,为了享受标准带来的"益处",放弃一些老的传统做法是值得的。</P><P>外部调用样式表# y2 z( h0 r4 E) c& a% S
在以前,我们通常采用2种方法使用样式表:
/ y' w! W- z' m页面内嵌法:就是将样式表直接写在页面代码的head区。类似这样: ' T9 c- n9 R3 {6 q2 \4 W; Q
<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style> : }3 u# P$ j3 V7 J3 e' Q
外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。 ( s& d: U4 G/ v$ F( @
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
- ~5 K% [+ u+ U: f! W0 m) T- @' X 在符合web标准的设计中,我们使用外部调用法,好处不言而喻,你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。</P><P>双表法调用样式表3 }3 C; n, z% E% T4 m+ s
查看某些符合标准站点的原代码,你可能看到,在调用样式表的地方有如下2句:</P><P><link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /> <style type="text/css" media="all">@import url( css/style01.css );</style>
8 `6 f3 m/ c, h) u' |4 ^ 为什么要写两次呢?</P><P> 实际上一般情况下用外联法调用(就是第一句)就足够了。我这里使用双表调用只是一种示例。其中的"@import"命令用于输入样式表。而"@import"命令在netscape 4.0版本浏览器是无效的。也就是说,当你希望某些效果在netscape 4.0浏览器中隐藏,在4.0以上或其它浏览器中又显示的时候,你可以采用"@import"命令方法调用样式表。</P><P>
, B' Z P; e$ h2 f9 j <b> head区的其他设置
. p, ^2 X6 H* R* A( i# X( Y* B+ m2 v: D9 F
</b>
$ r& w) N7 o. f) V3 Q @, P 这些技巧主要讲meta标签设置的,其实与符合web标准关系不大,只要注意在最后加"/"关闭标签就可以,但是既然是入门教程,就写得详细一点吧。</P><P>收藏夹小图标
W/ v2 f$ B/ U/ C( E2 d 如果你将本站加入收藏夹,可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单,首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下。然后将下面的代码嵌入head区:</P><P><link rel="icon" href="/favicon.ico" type="image/x-icon" />/ q$ b! b$ j( _3 H; N
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />! l, q. w/ c! r2 r1 Q( H# S
为搜索引擎准备的内容
! z; u% Y" E* J8 w1 E 代码如下,替换成你自己站点的内容就可以:</P><P>允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索,推荐采用robots.txt方法. e9 }2 s1 ]$ F$ D5 [ |
<meta content="all" name="robots" /> 8 i% @ }) F6 O& P$ R" \
设置站点作者信息
& [5 n) k, X& `/ w) Z- i. X<meta name="author" content="<a href="mailtajie@netease.com" target="_blank" >ajie@netease.com</A>,阿捷" />
* s9 k" X3 F5 h' x* C0 Q. L设置站点版权信息1 E$ @) O5 W! T7 C: y/ C
<meta name="Copyright" content="<a href="http://www.w3cn.org/" target="_blank" >www.w3cn.org</A>,自由版权,任意转载" /> + b3 x+ f; X3 v" y
站点的简要介绍(推荐)
* J1 m6 _' I6 Z9 [<meta name="description" content="新网页设计师。web标准的教程站点,推动web标准在中国的应用" />
! A% s8 K1 }/ @; @" }/ t0 C8 d H站点的关键词(推荐)
2 c0 x- ~" K7 n. x0 ~& |<meta content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" />
: a* l8 R e% J) A `3 u3 `1 w; u( M, P! [2 C: j! ^" q
先介绍这么多。补充说明,前面花了5节都是讲head区的代码,实际页面内容还一字未提,呵呵,不要急,其实head区是非常重要的,看一个页面的head的代码就可以知道设计师是否够专业。</P></DIV> |
|