DIV教程之英文教程:用CSS把持和操纵BODY标志

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。
网页制造POLUOLUO文章简介：利用CSS利用你的body元素.
Let’ssayyouwanttochangethecolorofyourlinksonjustyourcontactpagetored.Theyareblueoneveryotherpage,butitjustmakessenseforthemtoberedonyourcontactpage(forsomereason).Thereareacouplewaysyoucouldgoaboutthis.

• Youcoulddeclareaseparatestylesheetforyourcontactpage.Thisisn’tideal,becauseit’sredundant.Ifyoumakeanyotherchanges,you’llalwayshavetomakethembothonthemainstylesheetandthecontactpagestylesheet.
  
• Youcouldgiveallthoselinksauniqueclassonthatpage.Thisisn’tideal,becauseitisn’tverysemanticandit’salsoredundant.Whyapplyaclasstoeverysinglelinkonthepagewhentheyreallyaren’tanydifferentfromlinkselsewhereonthesite,contextuallyspeaking?
  
• ThebestsolutionistogiveyourthebodyauniqueID.Thissolvestheproblemperfectly.YoucanusethesamestylesheetandtargetjustthelinksyouwanttowithasingleCSSselector.
  

Howit’sdone

Simple,literallyjustapplytheIDtothebodytag:

1. ...</head><bodyid="contact-page">...

复制代码

Nowforourexampleofmakingalllinksonthecontactpageredinsteadofblue,justusesomeCSSlikethis:

1. a{color:blue;}#contact-pagea{color:red;}

复制代码

Howaboutamorepracticalexample?

Yougotit.Oneofthemostusefulimplementationsofthistechniqueiswithinnavigation.Takealookatthissamplenavigation:

登录/注册后可看大图

Seehowtheforumstabisthe“active”tab?Certainlythat’sjustaslightchangeinCSS,probablyjustashiftinthepositionofabackgroundimage.PerhapstheXHTMLlookssomethinglikethis:

1. ...<li><ahref="/fieldtips">Fieldtips</a></li><liclass="active"><ahref="/forums">Forums</a></li>...

复制代码

The“active”classappliedtothelistitemiswhatshiftsthebackgroundimage.That’lldothetrick,butwhataboutwhenwemovetotheFieldTipspage?WewillhavetoremovetheactiveclassfromtheforumstabandapplyittothetheFieldTipstab.That’snotveryconvenient.Thatmeansthecodeforthenavigationblockisuniqueoneverysinglepageofthesite.Solet’ssaydowntheroadwewanttoaddaContacttab,we’llhavetoalterthecodeoneverysinglepage.Nofun.
Let’sdothisalittlesmarter.Firstwedon’twanttoincludethenavigationblockofcodeoneverypage,wewanttoincludeit,probablywithasimplePHPincludelikethis:

1. <?phpinclude_once("nav.html");?>

复制代码

Butthenhowdoweapplythe“active”classtothecurrentnavigationlistelement?

ThisiswhereapplywhatwejustlearnedaboutgivinguniqueID’stothebody!Insteadofapplyingaclasstoonlytheactivelistelement,let’sapplyauniqueclasstoeachseparatelistitemaswellasgiveourbodyanuniqueID.

1. ...</head><bodyid="field-tips">...<liclass="fieldtips"><ahref="/fieldtips">Fieldtips</a></li><liclass="forums"><ahref="/forums">Forums</a></li>...

复制代码

NowwecantargetspecificelementsinthenavigationwithsomecleverCSS:

1. #field-tipsli.fieldtips,#forumsli.forums{background-position:bottom;}

复制代码

Thismeansthatthecodeforthenavigationblockcanstaythesameoneverypage,yetonlythenavigationelementnativetothatpagewillbeaffectedbythisCSSand“flip”totheactivestate.

Let’sgetevenmoredynamic

ReaderBrianleftanawesomecommentonhowyoucanusePHPtoapplytheuniqueIDtotothebodyelement:

1. <bodyid="<?=basename(Let’ssayyouwanttochangethecolorofyourlinksonjustyourcontactpagetored.Theyareblueoneveryotherpage,butitjustmakessenseforthemtoberedonyourcontactpage(forsomereason).Thereareacouplewaysyoucouldgoaboutthis.
3. [list]
4. [*][b]Youcoulddeclareaseparatestylesheetforyourcontactpage.[/b]Thisisn’tideal,becauseit’sredundant.Ifyoumakeanyotherchanges,you’llalwayshavetomakethembothonthemainstylesheetandthecontactpagestylesheet.
5. [*][b]Youcouldgiveallthoselinksauniqueclassonthatpage.[/b]Thisisn’tideal,becauseitisn’tverysemanticandit’salsoredundant.Whyapplyaclasstoeverysinglelinkonthepagewhentheyreallyaren’tanydifferentfromlinkselsewhereonthesite,contextuallyspeaking?
6. [*][b]ThebestsolutionistogiveyourthebodyauniqueID[/b].Thissolvestheproblemperfectly.YoucanusethesamestylesheetandtargetjustthelinksyouwanttowithasingleCSSselector.
7. [/list]
8. [size=4]Howit’sdone[/size]
10. Simple,literallyjustapplytheIDtothebodytag:
11. [code]...</head><bodyid="contact-page">...

复制代码

Nowforourexampleofmakingalllinksonthecontactpageredinsteadofblue,justusesomeCSSlikethis:

1. a{color:blue;}#contact-pagea{color:red;}

复制代码

Howaboutamorepracticalexample?

Yougotit.Oneofthemostusefulimplementationsofthistechniqueiswithinnavigation.Takealookatthissamplenavigation:

Seehowtheforumstabisthe“active”tab?Certainlythat’sjustaslightchangeinCSS,probablyjustashiftinthepositionofabackgroundimage.PerhapstheXHTMLlookssomethinglikethis:

1. ...<li><ahref="/fieldtips">Fieldtips</a></li><liclass="active"><ahref="/forums">Forums</a></li>...

复制代码

The“active”classappliedtothelistitemiswhatshiftsthebackgroundimage.That’lldothetrick,butwhataboutwhenwemovetotheFieldTipspage?WewillhavetoremovetheactiveclassfromtheforumstabandapplyittothetheFieldTipstab.That’snotveryconvenient.Thatmeansthecodeforthenavigationblockisuniqueoneverysinglepageofthesite.Solet’ssaydowntheroadwewanttoaddaContacttab,we’llhavetoalterthecodeoneverysinglepage.Nofun.
Let’sdothisalittlesmarter.Firstwedon’twanttoincludethenavigationblockofcodeoneverypage,wewanttoincludeit,probablywithasimplePHPincludelikethis:

1. <?phpinclude_once("nav.html");?>

复制代码

Butthenhowdoweapplythe“active”classtothecurrentnavigationlistelement?

ThisiswhereapplywhatwejustlearnedaboutgivinguniqueID’stothebody!Insteadofapplyingaclasstoonlytheactivelistelement,let’sapplyauniqueclasstoeachseparatelistitemaswellasgiveourbodyanuniqueID.

1. ...</head><bodyid="field-tips">...<liclass="fieldtips"><ahref="/fieldtips">Fieldtips</a></li><liclass="forums"><ahref="/forums">Forums</a></li>...

复制代码

NowwecantargetspecificelementsinthenavigationwithsomecleverCSS:

1. #field-tipsli.fieldtips,#forumsli.forums{background-position:bottom;}

复制代码

Thismeansthatthecodeforthenavigationblockcanstaythesameoneverypage,yetonlythenavigationelementnativetothatpagewillbeaffectedbythisCSSand“flip”totheactivestate.

Let’sgetevenmoredynamic

ReaderBrianleftanawesomecommentonhowyoucanusePHPtoapplytheuniqueIDtotothebodyelement:

1. a{color:blue;}#contact-pagea{color:red;}2

复制代码

ThiswillreturnthenameofthePHPfilebeingexecutedastheID(e.g.bodyid=”index.php”).Toleaveoffthe.phppart,justremovethe“.php”part.
SERVER[PHP_SELF],".php")?>">[/code]ThiswillreturnthenameofthePHPfilebeingexecutedastheID(e.g.bodyid=”index.php”).Toleaveoffthe.phppart,justremovethe“.php”part.

提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

仓酷云

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。