Web Page Production With XHTML and CSS

Web ueslgn from ScraLch, 2008
Web Production with

xHTML and CSS #1
uan !ohnson, ScraLchmedla, 2008
Contents
lnLroducLlon Lo web page producLlon
Cvervlew of Lhe page sLrucLure
SemanLlc P1ML markup
Sllclng a deslgn ln Adobe hoLoshop
SLyllng Lhe page wlLh CSS
What is web page production?
1here are loLs of web deslgners and web developers ln Lhe world. 1hese are esLabllshed [obs, each
wlLh lLs own roles and responslblllLles. A web deslgner decldes whaL a webslLe should look llke,
and draws up a deslgn uslng some graphlcs appllcaLlon, such as Adobe hoLoshop. A web
developer wrlLes programs Lo allow users Lo lnLeracL wlLh a webslLe ln a clever way, such as maklng
onllne paymenLs or uploadlng phoLos Lo an album.
8uL Lhere ls anoLher process beLween Lhe lnlLlal deslgn and Lhe lnLeracLlve webslLe, whlch can be
descrlbed as web page production. 1hls ls Lhe process of Laklng a deslgn, and wrlLlng Lhe P1ML
whlch acLually brlngs Lhe deslgn Lo your browser ln Lhe form of a web page.
Cbvlously Lhls ls noL a new process, buL lL's usually handled elLher by Lhe web deslgner or Lhe web
developer. lL's very rare LhaL you would see a [ob adverLlsemenL for 'web producer wanLed'. As
such, lL's hard Lo flnd good lnformaLlon on Lhe web producLlon process. 1here's plenLy of
lnformaLlon on P1ML and CSS, buL very llLLle LhaL wlll explaln whaL Lo do lf you are glven a deslgn
and Lold Lo make lL lnLo a web page.
1hls book wlll alm Lo gulde you Lhrough Lhls process, from looklng aL Lhe deslgn and maklng
cholces abouL sLrucLure and lmages rlghL Lhrough Lo seelng your flnlshed page ln a browser.
1
noLe: lL's lmposslble Lo cover every aspecL of web producLlon ln a slngle book.
1hls wlll be Lhe flrsL ln a serles of web producLlon guldes, each coverlng dlfferenL
aspecLs of Lhe process. See hLLp://webdeslgnfromscraLch.com/downloads.cfm
for Lhe laLesL avallable ebooks. Subscrlbe Lo Lhe 8SS feed for auLomaLlc updaLes.
8efore we do anyLhlng else, leL's Lake a qulck look aL Lhe deslgn LhaL we wlll be converLlng lnLo a
useable web page:
2
What tools will I need?
3
1here are many dlfferenL LexL edlLors you can use Lo wrlLe your P1ML and CSS, each wlLh lLs own
dlfferenL beneflLs and drawbacks. ?ou can use someLhlng as slmple as Wlndows noLepad Lo wrlLe
your code, buL you'll have Lo Lype every slngle characLer by hand. Commerclal web page edlLlng
sofLware such as Adobe ureamweaver glves you a helplng hand wlLh lndenLed, colour-coded
markup, and code hlnLs Lo auLomaLlcally flnlsh your llnes of code for you. l use ApLana, an open-
source !ava-based edlLor. lL has mosL of Lhe feaLures of Lhe commerclal sofLware, and besL of all,
lL's free!
ln Lhls book, l also use Adobe hoLoshop, whlch ls Lhe weapon of cholce for mosL web deslgners,
buL Lhere are oLher graphlcs programs you can use Lo achleve slmllar resulLs.
noLe: lf you wlsh Lo follow along wlLh Lhe example ln Lhls book, Lhe flles are all avallable for
download:
Crlglnal sllced Su deslgn (.psd flle, 1.24M8)
Lxample slLe, lncludlng all lmages and CSS flles (.zlp flle, 39k8)
And you can see a worklng verslon of Lhe slLe aL hLLp://webdeslgnfromscraLch.com/web-
producLlon1/lndex.hLml
4
Page Structure
Look before you leap
When produclng a web page from a hoLoshop documenL, lL's always LempLlng Lo dlve sLralghL lnLo
Lhe P1ML and geL some lmages on Lhe page, maybe Lhe logo and a background gradlenL, so LhaL
your page lmmedlaLely sLarLs Lo resemble Lhe deslgn.
SLop rlghL Lhere!
8efore you even open your LexL edlLor, lf you Lake a few momenLs Lo Lhlnk abouL Lhe overall
sLrucLure of Lhe page, and how Lhls may affecL Lhe declslons you make, you wlll save valuable Llme
laLer.
Fixed or fluid?
1he flrsL blg declslon you need Lo make ls wheLher your page should be flxed-wldLh or fluld
(someLlmes called zoom or elastic). A flxed-wldLh layouL ls dlsplayed wlLhln a conLalner whose
wldLh ls speclfled ln plxels and can'L be alLered by Lhe user, whereas a fluld layouL has lLs wldLh
speclfled ln ems, whlch means LhaL Lhe wldLh wlll lncrease as Lhe LexL-slze ls lncreased ln Lhe user's
web browser.
Cenerally speaklng, lL's always besL Lo use a fluld layouL lf posslble, as lL enables LexL slze Lo be
lncreased wlLhouL causlng Lhe deslgn Lo break. lf you lncrease Lhe LexL slze ln a flxed-wldLh layouL,
Lhe large LexL has nowhere Lo go excepL down Lhe page, whlch can leave you wlLh unreadable long
columns of large LexL.
Some cllenLs llke Lo lnslsL on Lhelr pages belng flxed wldLh so LhaL Lhey always flL lnslde an 800x600
plxel dlsplay, and Lherefore can be vlewed by all users wlLhouL Lhe need for horlzonLal scrolllng. lL's
a nlce Lheory, buL Lhere are several drawbacks Lo Lhls argumenL:
llrsLly, lf you have an 800 plxel wlde page sLuck ln Lhe mlddle of a 1680 plxel wlde screen (or
wlder), lL's golng Lo look losL among all LhaL empLy space, and as l menLloned earller, lncreaslng Lhe
LexL slze wlll cause dlsplay problems.
Also, accordlng Lo w3schools.com's browser dlsplay sLaLlsLlcs, as of !anuary 2007, only abouL 14
of web users sLlll use 800x600 plxel dlsplays, so Lo deslgn pages for Lhls soon-Lo-be-negllglble
mlnorlLy, Lo Lhe deLrlmenL of Lhe 80 of users wlLh 1024x768 resoluLlon or hlgher, makes no sense
aL all.
AnoLher opLlon ls Lo seL Lhe page wldLh as a percenLage of Lhe dlsplay wlndow
wldLh, buL due Lo Lhe vasL dlfference ln screen wldLhs, Lhls ls noL advlseable.
3
Take a look around
Cnce you've declded on your layouL (ln our case fluld), lL's a good ldea Lo look aL Lhe dlfferenL
secLlons of Lhe page lndlvldually and noLe some feaLures whlch could be poLenLlal obsLacles durlng
Lhe producLlon process. CeLLlng Lhe page sLrucLure clear ln your head before you begln wlll help
you avold wasLlng Llme laLer correcLlng your mlsLakes. ?ou don'L need Lo spend Loo long on Lhls,
[usL a few mlnuLes Lo ldenLlfy any Lrlcky areas.
Header
1he header ls falrly slmple, wlLh [usL a logo and Lwo llnks on Lhe rlghL hand slde. 1he logo wlll be a
llnk back Lo Lhe home page (unless lL's a one-page webslLe). 1he header can be a flxed helghL, slnce
Lhe logo lmage won'L change slze and Lhere ls plenLy of space Lo lncrease Lhe slze of Lhe LexL llnks.
Cne Lhlng Lo noLe ls LhaL whlle we wanL Lhe conLenLs of Lhe header Lo remaln wlLhln a cenLral
conLalner, Lhe blue gradlenL background wlll sLreLch Lo Lhe lefL and rlghL edges of Lhe wlndow.
a!igation
lL looks llke Lhe navlgaLlon wlll probably be Lhe LrlcklesL parL of Lhe producLlon process. lL wlll
requlre expandlng background lmages, hover sLaLes, and a nesLed llsL for Lhe submenu! We'll
Lackle Lhls laLer. Cne good Lhlng abouL Lhe navlgaLlon ls LhaL lL uses sLandard LexL for Lhe menu
lLems, so we won'L need Lo make lmages for each word. Agaln lL's worLh noLlng LhaL Lhe
background bars wlll have Lo sLreLch Lo Lhe edges of Lhe wlndow.
"ain Content
6
1he conLenL of Lhe home page shouldn'L cause Loo many problems. A slmple LexL headlng and
lnLroducLory paragraph are followed by a Lwo-column conLenL secLlon. 1he lefL column conLalns
Lhree repeaLed secLlons, and Lhe rlghL column ls a llsL of llnks wlLh correspondlng lcons. 1he only
real declslon we'll have Lo make ls whlch conLenL Lo lnclude flrsL ln Lhe markup.
Footer
1he blg declslon concernlng any fooLer ls wheLher Lo have lL floaL underneaLh Lhe conLenL, or Lo
make lL sLlck Lo Lhe boLLom of Lhe page. 1hls ls only an lssue lf you have pages where Lhe conLenL
doesn'L Lake up a whole verLlcal page. Conslderlng Lhe gradlenL on Lhls fooLer, lL would look a blL
ouL of place floaLlng halfway up Lhe wlndow, so l Lhlnk we'll have lL flxed Lo Lhe fooL of Lhe page.
Let#s do it$
Ck, now we've had a good look around our deslgn, we have a general ldea of how we'll Lackle each
secLlon, and we've ldenLlfled areas whlch mlghL Lake a blL more LhoughL. 1here are no oLher
hldden elemenLs walLlng Lo Lake us by surprlse laLer on. So grab a cup of coffee and leL's wrlLe
some P1ML.
7
Semantic HTML
Markup
What is se%antic HT"L?
SemanLlc P1ML ls P1ML where Lhe Lags used Lo sLrucLure conLenL are selecLed based on Lhe
meanlng of Lhe conLenL, noL for presenLaLlon.
Why use se%antic HT"L?
SemanLlc P1ML has many beneflLs:
Lase of use
AccesslblllLy
Search englne opLlmlsaLlon
8epurposlng
1he maln reason Lo use semanLlc P1ML ls LhaL lL forces you Lo Lhlnk abouL Lhe markup declslons
more carefully, resulLlng ln cleaner, more semanLlcally-correcL P1ML.
lor an ln-depLh look aL why semanLlcally correcL P1ML ls a good ldea, see 8en
PunL's ebook - SemanLlc P1ML
8
HT"L first
8y now you're probably lLchlng Lo geL some conLenL on Lhe page and sLyle lL so LhaL you can see
Lhe page comlng LogeLher as you go. As LempLlng as Lhls ls, l recommend LhaL you save all Lhe CSS
sLyllng for laLer, and aL flrsL concenLraLe on Lhe P1ML only.
lor one Lhlng, lL won'L Lake you long aL all. ?ou won'L have Lo worry abouL cross-browser
compaLablllLy aL Lhls sLage, or wheLher your dlsplay breaks aL cerLaln LexL slzes. ?ou're slmply
geLLlng all Lhe conLenL on Lhe page ln plaln, semanLlcally correcL P1ML wlLh no bells and whlsLles.
And once you're done lL wlll be a much slmpler process Lo lmplemenL Lhe Cascadlng SLyle SheeL Lo
make Lhe page look llke Lhe deslgn.
Secondly, we need Lo ensure LhaL lf a user has CSS dlsabled, all Lhe conLenL ls sLlll accesslble on
screen. 1he same applles for bllnd or parLlally-slghLed users. 1hey aren'L lnLeresLed ln Lhe deslgn of
Lhe slLe, only LhaL Lhelr screen-reader ls able Lo read Lhem all Lhe LexL on Lhe page ln a loglcal
order, wlLhouL lncludlng any unnecessary lnformaLlon.
Code syntax
1hroughouL Lhe remalnder of Lhe book Lhere wlll be a loL of sample markup, boLh P1ML and CSS.
SecLlons of P1ML and CSS markup wlll be conLalned ln a grey-bordered box wlLh a LexL capLlon:
<html>
<body>
<h1>This is an HTML section</h1>
</body>
</html>
HTML
body {
background: #fff
color: #!!!
te"t#align: left
$
CSS
new llnes of code wlll be ln bold:
9
<html>
<body>
<h1>This is an HTML section</h1>
<p>This is a new line of code</p>
</body>
</html>
HTML
&etting started
LeL's open a new blank P1ML documenL. lf you do Lhls ln a speclallsed LexL edlLor (llke ApLana or
ureamweaver), you'll geL Lhe uocLype declaraLlon and some essenLlal P1ML Lags lnserLed
auLomaLlcally:
<%&'(T)*+ HTML *,-L.( /#//01(//&T& HTML 23!1//+4/
/htt5://6663613org/T7/html2/strict3dtd/>
<html>
<head>
<meta htt5#e8ui9:/(ontent#Ty5e/ content:/te"t/html
charset:iso#;;<=#1/ />
<title>,ntitled &ocument</title>
</head>
<body>
</body>
</html>
HTML
lL's a good ldea Lo save your documenL aL Lhls sLage, and geL lnLo Lhe hablL of savlng aL regular
lnLervals. l'll save Lhe documenL as lndex.hLml ln Lhe rooL dlrecLory of my slLe.
The 'head( tag
1o sLarL wlLh, l'll change Lhe conLenLs of Lhe <LlLle> Lag Lo Lhe LlLle of Lhe page - MorLgage Servlces,
whlch wlll be dlsplayed ln Lhe LlLle bar of Lhe browser. 1he LlLle Lag ls very lmporLanL for search
englne opLlmlsaLlon, buL LhaL ls beyond Lhe scope of Lhls book. !usL be sure Lo make lL descrlpLlve,
and remember Lo use a dlsLlncL LlLle for each page of your slLe.
10
333
<head>
<meta htt5#e8ui9:/(ontent#Ty5e/ content:/te"t/html
charset:iso#;;<=#1/ />
<title>Mortgage Services</title>
</head>
333
HTML
l won'L worry abouL anyLhlng else wlLhln Lhe <head> Lags for now. lL's malnly for <meLa> Lags,
whlch conLaln lnformaLlon abouL Lhe page, Lhe <LlLle> Lag, and <llnk> Lags, for any exLernal flles
you may wlsh Lo reference ln your page. LaLer on, l'll add a <llnk> Lag Lo reference Lhe CSS
sLylesheeL conLalnlng Lhe sLyles for Lhe deslgn, buL slnce LhaL page doesn'L exlsL yeL, l'll leave lL ouL
for now.
11
High le!el page structure
1he <body> Lag ls where Lhe conLenLs of Lhe page llve. l'll begln by puLLlng ln some Lags LhaL l
know l'll need.
333
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
333
HTML
)i!s and ids
1he <dlv> Lag ls used along wlLh Lhe ld" aLLrlbuLe Lo add sLrucLure Lo an P1ML documenL. 1he
<dlv> Lag slmply deflnes Lhe conLenL as block-level conLenL, dlvldlng Lhe page lnLo recLangular
secLlons, and Lhe ld" aLLrlbuLe glves each <dlv> Lag a unlque ldenLlfler, whlch wlll be used ln
con[uncLlon wlLh Lhe sLylesheeL laLer Lo make Lhe <dlv> appear as l wanL lL Lo. 8e careful Lo only
use <dlv> Lags where Lhey are needed, and only use Lhe ld" aLLrlbuLe wlLh unlque elemenLs,
whlch appear only once on each page. lf you need Lo apply an ldenLlfler Lo an elemenL whlch wlll
be repeaLed LhroughouL Lhe page, Lhen you should use Lhe class" aLLrlbuLe, whlch wlll be
lnLroduced laLer.
Pere l have added Lhree <dlv> elemenLs, and glven Lhem unlque ldenLlflers of header", conLenL"
and fooLer" respecLlvely. LeL's sLarL Lo add conLenL Lo Lhese secLlons, sLarLlng wlLh Lhe header.
Header
12
Looklng agaln aL Lhe header secLlon of Lhe page deslgn, l can see LhaL lL conLalns Lhe logo, and Lwo
llnks. A loL of deslgners use an <h1> Lag for Lhe webslLe name, as lL ls Lhe headlng for Lhe whole
slLe, Lhen use a CSS lmage replacemenL Lechnlque Lo dlsplay Lhe logo lmage lnsLead of Lhe <h1>
LexL. 1he problem wlLh Lhls meLhod ls LhaL Lhe <h1> ends up belng Lhe same for every page on Lhe
slLe. ?our <h1> LexL should be a unlque page header whlch accuraLely descrlbes Lhe conLenLs of Lhe
page. 1he slLe logo ls an lmage porLraylng Lhe slLes ldenLlLy, and servlng as a llnk Lo Lhe homepage.
1herefore lL ls flne Lo lnclude Lhe lmage ln Lhe P1ML, as long as you remember Lo add some 'alL'
LexL Lo descrlbe Lhe lmage Lo Lhose who are unable Lo see lL (l'll Lalk more abouL alL LexL laLer). l've
lefL Lhe lmage's 'src' aLLrlbuLe blank for now, as l haven'L creaLed Lhe logo lmage from Lhe
hoLoshop documenL yeL. 1hls wlll be covered ln a laLer chapLer on Su sllclng.
333
<div id="header">
<a href:///><img src:// alt:/Mortgage >er9ices home 5age/
/></a>
</di9>
...
HTML
Pere, <a href="/"> . . . </a> slmply llnks Lo Lhe rooL dlrecLory, whlch wlll auLomaLlcally dlsplay Lhe
lndex page.
AnoLher good hablL Lo geL lnLo ls uslng P1ML commenLs Lo show whlch <dlv> Lag each closlng
</dlv> Lag corresponds Lo. Pere, l've used  Lo show LhaL Lhls closlng </dlv> Lag
corresponds Lo Lhe openlng <dlv> Lag wlLh ld="header". lL's noL really necessary aL Lhls sLage, as lL's
preLLy obvlous aL a glance whlch <dlv> corresponds Lo whlch </dlv>, buL lf you have a page wlLh a
loL of conLenL, Lhe <dlv> elemenLs can geL really complex, wlLh mulLlple nesLed llsLs, and Lhese
commenLs come ln really handy for leLLlng you know where you are ln an P1ML documenL.
now leL's add Lhe llnks for Lhe rlghL of Lhe header. l'm golng Lo use an unordered llsL for Lhe llnks:
333
<di9 id:/header/>
<a href:///><img src:// alt:/Mortgage >er9ices home
5age/ /></a>
<ul>
<li><a href="#">Site ap</a></li>
<li><a href="#">!lient "ogin</a></li>
</ul>
</di9><%## end header ##>
333
13
HTML
l've lefL Lhe u8Ls seL Lo '#' aL Lhls sLage, as l don'L have any oLher pages yeL. 1hls slmply reloads Lhe
currenL page. l can change Lhese Lo Lhe acLual u8Ls when l've creaLed Lhe oLher pages.
?ou'll see from Lhe deslgn LhaL Lhere's a one-plxel verLlcal bar beLween Lhe Lwo llnks. 1hls could
easlly be lnserLed as LexL wlLh Lhe 'plpe' characLer (|), buL lL's noL good pracLlce, because
semanLlcally, Lhe plpe characLer only has meanlng as a maLhemaLlcal symbol, whlch ls noL
appllcable here. 1he bar ln Lhe deslgn ls purely for aesLheLlc purposes, Lo separaLe Lhe Lwo llnks, so
l wlll add lL laLer uslng CSS borders.
lf l open Lhe lndex.hLml page ln a web browser, we can Lake a look aL Lhe page so far:
noL much Lo look aL, buL LhaL wlll all change laLer. lor now l'm only concerned wlLh Lhe semanLlc
P1ML. 1he logo lmage doesn'L exlsL yeL, so we can see an lmage placeholder wlLh Lhe alL LexL
dlsplayed, and Lhe llnks are dlsplayed ln our unordered llsL wlLh Lhe defaulL bulleL polnLs. Agaln, l'll
address Lhese deslgn lssues laLer. l may flnd l need Lo add a few exLra P1ML elemenLs ln order Lo
make Lhe deslgn work properly, buL for now leL's keep lL as slmple as posslble.
14
a!igation
1he sLrucLure of Lhe navlgaLlon ls sLralghLforward enough. We have Lwo horlzonLal bars, Lhe maln
navlgaLlon menu on Lop, and a dlfferenL subnavlgaLlon below, dependlng on whlch page ls acLlve. lL
looks llke you could slmply puL Lwo unordered llsLs on Lop of each oLher, and change Lhe conLenL of
Lhe lower one dependlng on whlch page you're on. 1hls would work vlsually based on our deslgn.
Powever, ln order for Lhe navlgaLlon Lo make sense semanLlcally, Lhe subnav menu should be
placed lmmedlaLely afLer lL's parenL ln Lhe maln navlgaLlon menu. 1o do Lhls l need Lo use nesLed
llsLs:
llrsLly, creaLe an unordered llsL for Lhe maln navlgaLlon (dlrecLly under Lhe header):
333
<ul class:/main#na9/>
<li><a href:/#/>?bout us</a></li>
<li><a href:/#/>Mortgages</a></li>
<li><a href:/#/>*rotection</a></li>
<li><a href:/#/>.nsurance</a></li>
<li><a href:/#/>Loans</a></li>
<li><a href:/#/>(on9eyancing</a></li>
<li><a href:/#/>(ut your bills</a></li>
<li><a href:/#/>(ontact us</a></li>
</ul><%## end main#na9 ##>
333
HTML
l've glven Lhe <ul> Lhe class name maln-nav", as l'll need Lo refer Lo lL when sLyllng Lhe navlgaLlon.
noLe: Class and ld names cannoL conLaln any spaces or underscores. lf you puL a
space ln your class or ld name, lL wlll be LreaLed as Lwo separaLe names.
AL Lhls polnL, you may have noLlced LhaL Lhe fooLer navlgaLlon conLalns exacLly Lhe same llnks as
Lhe maln navlgaLlon, so Lo save Llme, before l add Lhe subnavlgaLlon, l'll copy Lhe code for Lhe maln
navlgaLlon and pasLe lL lnLo Lhe fooLer secLlon. l've removed Lhe class name because Lhe fooLer
navlgaLlon wlll be sLyled dlfferenLly from Lhe maln navlgaLlon:
13
333
<di9 id:/footer/>
<ul>
<li><a href:/#/>?bout us</a></li>
<li><a href:/#/>Mortgages</a></li>
<li><a href:/#/>*rotection</a></li>
<li><a href:/#/>.nsurance</a></li>
<li><a href:/#/>Loans</a></li>
<li><a href:/#/>(on9eyancing</a></li>
<li><a href:/#/>(ut your bills</a></li>
<li><a href:/#/>(ontact us</a></li>
</ul>
</di9><%## end footer ##>
333
HTML
nexL, for each menu lLem whlch requlres a submenu, l need Lo add anoLher unordered llsL dlrecLly
afLer Lhe maln menu llnk:
333
<li><a href:/#/>?bout us</a>
<ul>
<li><a href="#">#$out Mortgage Services</a></li>
<li><a href="#">%ur histor&</a></li>
</ul>
</li>
<li><a href:/#/>Mortgages</a>
<ul>
<li><a href="#">Su$nav lin'</a></li>
<li><a href="#">Su$nav lin'</a></li>
</ul>
</li>
333
HTML
lf l do Lhls for each menu lLem wlLh a submenu (l've used Subnav llnk" as a placeholder for now),
16
Lhen vlew Lhe page ln a browser, we can see how an unsLyled nesLed llsL looks:
Lach submenu llsL wlll need lLs own class laLer, so LhaL l can use CSS Lo dlsplay only one submenu
aL a Llme. 8uL for accesslblllLy and search englne opLlmlsaLlon purposes, lL's good Lo have Lhe
enLlre navlgaLlon sLrucLure on Lhe page.
17
"ain page content
AfLer Lhe navlgaLlon, lL's usually besL Lo lnclude your <h1> Lag for Lhe page. 1hls ls a headlng for all
Lhe conLenL LhaL follows lL on Lhe page, and lL carrles a loL of welghL wlLh search englnes, so lL
should be very descrlpLlve. Cur <h1> ls followed by a shorL paragraph of lnLroducLory LexL:
333
<di9 id:/content/>
<h1>Mortgage 4e6s</h1>
<5>@estibulum elit magnaA sollicitudin in 333</5>
333
HTML
noLe: *ll conLenL on a web page should be conLalned beLween a palr of P1ML
Lags. P1ML Lags Lell Lhe browser whaL Lype of conLenL Lhey conLaln, and allow us
Lo speclfy how lL should be dlsplayed. ConLenL whlch ls ouLslde of P1ML Lags
(unformaLLed LexL) ls sLlll dlsplayed buL lL wlll look Lerrlble and have no meanlng
semanLlcally. lf you wanL Lo lnclude plaln LexL, you should use Lhe <pre> Lag,
whlch dlsplays LexL exacLly as lL ls Lyped lnLo Lhe LexL edlLor, lncludlng spaces,
Labs and carrlage reLurns.
18
When addlng Lhe maln conLenL Lo a page, Lhere wlll ofLen be Lwo or more columns, and you need
Lo declde whlch column Lo lnclude flrsL. 1he columns wlll be poslLloned laLer uslng CSS floaLs, buL
for now you need Lo bear ln mlnd LhaL Lhe mosL lmporLanL and relevanL conLenL should appear flrsL
ln Lhe P1ML. ln our case, Lhe sldebar conLalnlng Lhree llnks ls clearly less lmporLanL Lhan Lhe wlder
column, whlch conLalns lnformaLlon abouL lnLeresL raLes, Llps and recommendaLlons. So l'll puL Lhe
wlder column above Lhe sldebar ln Lhe P1ML documenL.
1he column feaLures 3 secLlons wlLh repeaLed elemenLs. Lach has an lmage, a headlng and one or
more paragraphs of LexL. l'll use <h2> for Lhe headlngs as Lhey are Lhe mosL lmporLanL headlngs
afLer Lhe <h1>. 1he headlngs wlll also serve as llnks Lo each arLlcle, so l'll lnclude a llnk wlLhln each
<h2>.
The #alt# attribute for i%ages
l menLloned earller LhaL you should lnclude an 'alL' aLLrlbuLe for every lmage, as wlLhouL lL your
page won'L valldaLe. Powever, lf an lmage conveys no useful lnformaLlon Lo Lhe user, Lhen lL's flne
Lo leave Lhe alL aLLrlbuLe empLy (alt:BB). lor example, lf you are uslng an lmage for a 'buy now'
buLLon, Lhen your alL LexL should be buy now". 8uL ln our deslgn, Lhe lmage of a house on a hand
ls purely decoraLlve. lf Lhe user can'L see Lhe lmage for any reason, lL serves no purpose Lo Lell
Lhem Lhls ls an lmage of a house on a hand", so l should leave Lhe alL aLLrlbuLe empLy.
<img src:/button3C5g/ alt:/-uy 4o6/ />
<img src:/house3C5g/ alt:// />
333
<di9 id:/content/>
<h1>Mortgage 4e6s</h1>
<5>@estibulum elit magnaA sollicitudin inA dignissim sit
ametA consectetuer egetA nul3 @estibulum elit magnaA sollicitudin
inA dignissim sit ametA consectetuer egetA null</5>
<img src:// alt:// />
19
<hD><a href:/#/>.nterest rates set to rise</a></hD>
<5>&uis laoreet commodo 5ede3 4ulla nisl3 .nteger conse8uat
massa bibendum augue3 Mauris 9olut5at nonummy lectus3</5>
<5>@estibulum elit magnaA sollicitudin inA dignissim sit
ametA consectetuer egetA nulla3</5>
<hD><a href:/#/>Ti5s to organise your household bills in
D!!;</a></hD>
<5>Mauris 9olut5at nonummy lectus3</5>
massa bibendum augue3 @estibulum elit magnaA sollicitudin inA
dignissim sit ametA consectetuer egetA nulla3</5>
<hD><a href:/#/>7ecommended: ?lliance Eam5
Leicester</a></hD>
massa bibendum augue3 @estibulum elit magnaA sollicitudin inA
dignissim sit ametA consectetuer egetA nulla3</5>
</di9><%## end content ##>
333
HTML
LeL's see whaL Lhls conLenL looks llke ln our browser:
20
As you can see, because l lefL Lhe alL aLLrlbuLes empLy, and Lhe lmages don'L exlsL yeL, Lhe browser
slmply leaves Lhem ouL alLogeLher. 1hls ls whaL a user would see lf Lhey had lmages dlsabled.
now Lo puL ln Lhe sldebar llnks. lL's a llsL of llnks so l'll use an unordered llsL. Agaln, Lhe lmages are
merely lcons whlch provlde a vlsual clue as Lo Lhe funcLlon of Lhe llnk. lf Lhe sLars lmage can'L be
seen, Lhe user doesn'L need Lo know LhaL Lhere's an lmage Lhere, Lhey wlll slmply rely on Lhe llnk
LexL. So l could use lmages wlLh empLy alL aLLrlbuLes, [usL as l dld for Lhe lmages ln Lhe maln
column. 8uL Lhere ls a beLLer way. l can reference Lhe lmages as background lmages ln Lhe CSS,
whlch means Lhe lmages won'L appear ln Lhe P1ML aL all. 1hls keeps our P1ML clean, and cuLs
down on meanlngless conLenL.
So all l need for now ls a llsL of llnks:
21
333
<5>&uis laoreet commodo 3 3 3</5>
<ul>
<li><a href="#">(ree )uotes</a></li>
<li><a href="#">!ontact us</a></li>
<li><a href="#">%ur hot tips</a></li>
</ul>
333
HTML
And LhaL's lL! l've already added Lhe fooLer, so Lhe page ls now compleLe. l have clean, semanLlcally
correcL P1ML, whlch ls valld, accesslble and easy Lo manage. now lL's ready Lo have Lhe CSS
applled Lo lL, so l can make lL look llke our orlglnal deslgn, buL before l sLarL LhaL, lL's a good ldea Lo
geL all Lhe lmages l'll need from Lhe deslgn LogeLher ln Lhelr own folder. 1here's a very slmple way
Lo do Lhls ln hoLoshop. uslng Lhe sllce Lool, you can 'cuL ouL' all Lhe lmages you need, opLlmlse
Lhem for Lhe web and save Lhem all aL once. 1he nexL chapLer wlll gulde you Lhrough Lhls process.
22
Slicing a Photoshop
document
23
Sllclng and exporLlng a hoLoshop documenL ls a plece of cake Lhese days. ?ou can do Lhe whole
process ln one go, wlLh no need for mulLlple saves or cropplng.
+sing the ,lice tool
1o sLarL wlLh, l'll open Lhe documenL and selecL Lhe sllce Lool (keyboard shorLcuL - k).
l'll sLarL from Lhe Lop of Lhe page, sllclng Lhe lmages l'll need for Lhe deslgn. llrsLly l'll need an
lmage for Lhe llghL blue gradlenL of Lhe header. As Lhls ls a slmple verLlcal gradlenL whlch sLreLches
rlghL across Lhe page, l can slmply Lake a 1-plxel wlde sllce and use Lhe CSS Lo have lL repeaL
horlzonLally. 1hls keeps Lhe slze of Lhe lmage Lo a mlnlmum, so Lhe page wlll load fasLer.
oslLlon Lhe cursor aL Lhe Lop edge of Lhe page Lhen cllck and drag down Lo Lhe boLLom of Lhe
header. lf you Lurn on Lhe 'snap' funcLlon (-iew ( ,nap) Lhen your sllce wlll auLomaLlcally snap Lo
Lhe edge of Lhe header. lL doesn'L maLLer how wlde you make Lhe sllce, because you can easlly
reslze lL laLer.
?ou can see Lhe sllce ouLllned ln brown. 1hls ls a user sllce, whlch means lL's a sllce LhaL l've
creaLed. 1he blue number Lwo means LhaL lL ls sllce number Lwo. 1haL's because when you sLarL Lo
sllce a page, hoLoshop auLomaLlcally sllces up Lhe resL of Lhe page. 1hese auLomaLlcally generaLed
sllces are called auLo sllces, l can choose Lo lgnore Lhese when l come Lo save Lhe lmages laLer. SLlll
uslng Lhe sllce Lool, l'll double-cllck lnslde Lhe sllce l've [usL creaLed Lo open Lhe Sllce CpLlons
dlalogue box. 1he only Lhlng l need Lo change here ls Lhe name of Lhe sllce. 1hls wlll also be Lhe
fllename of Lhe header background lmage, so l'll call lL header-bg. 1he flle exLenslon wlll be added
laLer, afLer l've opLlmlsed Lhe lmage.
24
Cllck Ck Lo change Lhe sllce name, Lhen sLlll uslng Lhe sllce Lool, cllck and hold Lhe rlghL edge of Lhe
sllce, and drag lL Lo Lhe lefL, unLll lL's only 1 plxel wlde. l changed Lhe name before dolng Lhls
because now lL's lmposslble Lo double-cllck wlLhln Lhe sllce. lf you need Lo open Lhe Sllce CpLlons
agaln, you'll elLher have Lo expand Lhe sllce agaln, or zoom ln unLll you can see enough of Lhe sllce
Lo selecL lL.
nexL leL's sllce Lhe logo lmage. 1he problem wlLh Lhe logo ls LhaL lL slLs on Lop of Lhe gradlenL
background. lf l sllce Lhe logo wlLh Lhe gradlenL background Lhen lL wlll have Lo llne up perfecLly
wlLh Lhe header background. lL would be beLLer lf Lhe logo background was LransparenL. 1hen lf for
any reason l need Lo change Lhe poslLlon of Lhe logo ln Lhe fuLure, l won'L have Lo change Lhe
lmage. lorLunaLely, Lhe logo ls falrly slmple, wlLh plaln colour and no phoLographlc lmages, so l can
save lL as a glf wlLh a LransparenL background, and Lhe header background wlll show Lhrough. lf Lhe
lmage conLalned complex gradlenLs or phoLographlc lmagery, lL would have Lo be saved as a [pg,
whlch doesn'L allow for LransparenL backgrounds.
23
?ou can save a complex lmage as a nC flle wlLh a LransparenL background, buL
Lhey are noL supporLed on some browsers, so l don'L recommend uslng Lhem for
lmporLanL lmages such as logos.
So flrsL l need Lo remove Lhe background from Lhe logo. l've slmply selecLed a recLangular porLlon
of Lhe gradlenL lmage wlLh Lhe marquee Lool, and hlL deleLe. 1he chequerboard paLLern now shows
Lhrough, meanlng LhaL Lhere ls no background ln Lhls area.
now Lake Lhe sllce Lool agaln, and drag ouL a sllce around Lhe logo. uouble cllck ln Lhe sllce and
name lL 'logo'.
now l [usL need Lo repeaL Lhe process for all Lhe lmages l requlre. l've made sllces for Lhe followlng
lmages, and glven Lhem approprlaLe names:
Maln menu background
Maln menu hover-sLaLe background
Sub menu background (1 plxel-wlde)
3 large lmages from maln column (wlLhouL grey borders - Lhey wlll be added uslng CSS)
3 lcons from Lhe sldebar llnks
looLer gradlenL (1-plxel wlde)
Pere's whaL Lhe documenL looks llke compleLely sllced up:
26
Web ueslgn from ScraLch, 2008 27
.pti%ising i%ages for the web
l need Lo make Lhe flleslze for all of Lhe lmages as small as posslble, whlle sLlll malnLalnlng Lhe hlgh
quallLy of Lhe deslgn. 1hls can be achleved by chooslng Lhe correcL flle Lype for each lmage, a
process known as lmage opLlmlsaLlon. hoLoshop allows you Lo do Lhls uslng Lhe 'Save for Web and
uevlces' command. CoL Lo File ( ,a!e for Web / )e!ices... and you'll see Lhe Save for Web &
uevlces dlalogue box.
Cn Lhe lefL you can see Lhe orlglnal deslgn, and on Lhe rlghL ls a prevlew pane whlch shows you
how your deslgn wlll look when saved. As you change Lhe seLLlngs for each sllce, Lhe quallLy of Lhe
prevlew lmage wlll change. ?ou need Lo flnd Lhe besL balance beLween lmage quallLy and flle slze.
l'll sLarL wlLh Lhe lmage of Lhe house on a hand Lo glve you a good example.
As a general rule, use !C for phoLos and complex gradlenLs, and use Cll for
lmages wlLh areas of flaL colour such as logos and lllusLraLlons.
28
ln Lhe prevlew pane, l'll cllck on Lhe house lmage Lo selecL lL. l can see on Lhe rlghL hand slde LhaL
Lhe currenL exporL seLLlngs are seL Lo !C wlLh 60 quallLy. 1he lmage looks ok, preLLy slmllar ln
quallLy Lo Lhe orlglnal. 1he flle slze ls dlsplayed aL Lhe boLLom-lefL of Lhe prevlew pane. lL's
currenLly 4.369k8.
now l'll Lake Lhe quallLy sllder and sllde lL all Lhe way down Lo zero. ?ou'll see LhaL Lhe flle slze has
dropped Lo 1.641k8, buL Lhe lmage looks Lerrlble.
l need Lo choose Lhe lowesL quallLy seLLlng for Lhe lmage whlch sLlll looks Lhe same as Lhe orlglnal.
lor Lhls lmage, abouL 33 quallLy ls flne.
Cnce you've declded on Lhe opLlmum seLLlngs for a sllce, you can selecL Lhe nexL sllce, and
opLlmlse LhaL one. 1he seLLlngs for each sllce are sLored unLll you change Lhem.
lf you have several sllces whlch you know wlll requlre Lhe same seLLlngs, you can
shlfL-cllck sllces Lo opLlmlse mulLlple sllces aL once.
29
now l'll opLlmlse anoLher lmage wlLh a dlfferenL flle Lype. l cllck on Lhe logo sllce Lo selecL lL. 8y
defaulL, Lhe sllce ls seL Lo !C, so you can'L see Lhe chequerboard because !C doesn'L allow
Lransparency. So l'll cllck Lhe flleLype dropdown and selecL Cll.
lor Cll lmages, lnsLead of a quallLy sllder, you can choose Lhe number of colours, from 2 Lo 236.
1he more colours ln a Cll, Lhe hlgher quallLy lL wlll be, buL also Lhe hlgher Lhe flle slze. So l go
Lhrough a slmllar process, reduclng Lhe number of colours gradually and chooslng Lhe lowesL
number of colours LhaL sLlll leaves Lhe lmage looklng good.
lor Clls wlLh a LransparenL background, you need Lo make sure you check Lhe '1ransparency'
checkbox, and also choose a 'MaLLe colour'. 1he maLLe colour ls used Lo make Lhe lmage blend lnLo
Lhe background smooLhly. A Cll lmage can'L conLaln any seml-LransparenL plxels, only fully
LransparenL or fully opaque. lnsLead of seml-LransparenL plxels, lL wlll use Lhe maLLe colour you
speclfy Lo creaLe Lhe llluslon of seml-Lransparency. ?ou should choose your maLLe colour Lo maLch
Lhe colour LhaL wlll slL behlnd Lhe LransparenL Cll, Lhls wlll glve you Lhe smooLhesL blendlng. lf your
background ls a dark-Lo-llghL gradlenL, Lhen nelLher colour wlll work as a maLLe colour, so you're
probably beLLer off uslng a !C or a LransparenL nC lf necessary.
1hls logo ls preLLy slmple, so lL'll be ok aL 8 colours, glvlng us a nlce small flle slze of [usL over 1k8.
l'll repeaL Lhls process for each user sllce, and Lhen l'm ready Lo save Lhe lmages.
30
,a!e settings
When you've opLlmlsed all your lmage sllces, cllck Save Lo open Lhe 'Save CpLlmlsed As...' dlalog
box. l need Lo change some of Lhe seLLlngs here. llrsL l'll cllck on Lhe 'Save as 1ype' dropdown, and
selecL 'lmages only'. hoLoshop can auLomaLlcally creaLe P1ML along wlLh your sllces Lo creaLe a
web page, buL l've already wrlLLen my nlce clean P1ML, so l don'L need hoLoshop's semanLlcally
lncorrecL P1ML.
nexL l'll cllck on Lhe 'SeLLlngs' dropdown, and choose 'oLher'. ln Lhe CuLpuL SeLLlngs dlalogue box,
you can choose how you wanL your flles Lo be saved. ln Lhe 'llle namlng' secLlon, l'll selecL 'sllce
name' ln Lhe flrsL dropdown, and '.exL' ln Lhe lasL, and make sure all Lhe oLher dropdowns are seL
Lo 'none'. 1hls ensures LhaL Lhe flle name wlll be Lhe sllce name plus Lhe flle Lype exLenslon. l'll
make sure l deselecL Lhe 'uL lmages ln lolder' checkbox as l'll selecL Lhe folder myself when l save.
Cllck Ck.
now l'll cllck on Lhe 'Sllces' dropdown, and l can choose Lo save all sllces (user and auLo), all user
sllces (all Lhe sllces LhaL l creaLed) or selecLed sllces (only Lhe sllces LhaL l selecLed ln Lhe prevlew
pane).
Slnce l don'L need any of Lhe auLo sllces, l'll selecL 'All user Sllces'. ln fuLure, lf l need Lo edlL an
lmage, l [usL need Lo selecL Lhe lmages sllce ln Lhe prevlew pane and Lhen choose 'selecLed sllces'
from Lhe sllces dropdown Lo save LhaL sllce only.
31
now l'll navlgaLe Lo Lhe rooL folder of my slLe (where lndex.hLml ls kepL) and creaLe a folder called
'lmages'. 1hls ls where all Lhe sllced lmages wlll be kepL. l hlL save, and all my sllces wlll be saved
lnLo Lhe lmage folder. lL's LhaL slmple. now l have all Lhe webslLe lmages ready, so l [usL need Lo
apply some sLyllng Lo Lhe page uslng CSS.
32
CSS or Presentation
8efore l sLarL wrlLlng my CSS, l always creaLe a new folder ln Lhe rooL dlrecLory called 'css'. 1hls ls
where l keep all my sLylesheeLs. ?ou can keep Lhem ln Lhe rooL wlLh your P1ML pages lf you prefer,
buL l llke Lo keep Lhem separaLe so LhaL Lhey're all LogeLher. l'm only creaLlng one sLylesheeL ln Lhls
example, buL you mlghL also have separaLe sLylesheeLs for prlnL or moblle devlces.
l'll creaLe a new blank CSS flle ln my edlLor, and save lL as sLyles.css ln Lhe css folder. now ls as good
a Llme as any Lo llnk your P1ML page Lo your sLylesheeL, so l'll enLer Lhe followlng code ln Lhe
<head> of lndex.hLml:
333
<title>Mortgage 4e6s</title>
<lin' href="css/st&les.css" rel="st&lesheet" t&pe="te*t/css"
/>
</head>
333
HTML
1hls won'L have any effecL rlghL now, buL lL means LhaL when you sLarL Lo add CSS sLyles Lo Lhe
sLylesheeL, Lhe changes wlll auLomaLlcally be reflecLed ln Lhe browser.
l'll sLarL wlLh some general sLyles before l move on Lo sLyllng speclflc page elemenLs.
&lobal 0eset
lf you've bullL webslLes before, you're probably aware LhaL dlfferenL browsers have dlfferenL
renderlng rules. Lvery browser puLs a defaulL margln or paddlng on cerLaln elemenLs, buL lL's
dlfferenL for each browser, whlch makes lL dlfflculL Lo apply your own sLyles. A loL of web deslgners
geL around Lhls by puLLlng whaL's known as a 'global reseL' aL Lhe Lop of every sLylesheeL:
+ ,margin- !. 5adding-!./
33
CSS
1hls Lells Lhe browser noL Lo apply a margln or paddlng Lo any ele%ent. lL can be useful, slnce lL
means you can sLarL from scraLch and you won'L geL any unexpecLed marglns Lhrowlng your deslgn
ouL of whack. 8uL lL's noL an ldeal soluLlon, as Lhere are cerLaln form elemenLs whlch can'L have
Lhelr margln and paddlng resLored lf lL ls removed ln Lhls way.
A beLLer way ls Lo make a llsL of all Lhe elemenLs from whlch you wanL Lo remove Lhe defaulL
margln and paddlng:
body0 50 ul0 ol0 li0 dl0 dt0 dd0 h10 hD0 h10 h20 h<0 hF0 a ,
margin- !. 5adding- !.
/
CSS
lf you flnd laLer LhaL you've mlssed an elemenL, you can [usL add lL Lo Lhe llsL. 1hls leaves your
forms looklng Lldy, whlle reseLLlng all Lhe maln conLenL elemenLs Lo no margln or paddlng.
now l'll puL some sLyles on Lhe <body> Lag:
333
body ,
font#family- @erdana0 Gene9a0 ?rial0 Hel9etica0 sans#serif.
font#siHe- IFJ.
/
CSS
l've seL Lhe fonL-famlly Lo verdana, as Lhls ls Lhe fonL used for conLenL LexL ln Lhe deslgn. 1hls fonL
wlll now cascade down from Lhe <body> Lag, Lo all oLher Lags, so l'll need Lo change Lhe fonL for
cerLaln oLher elemenLs.
l've seL Lhe fonL-slze Lo 76. lf l Lhen seL all oLher fonL-slzes ln ems, Lhen LexL wlll dlsplay aL Lhe
same slze across mosL browsers (see
hLLp://www.LhenoodlelncldenL.com/LuLorlals/Lypography/lncremenLal_dlfferences.hLml)
34
Cross1browser testing
now l'm aL Lhe sLage where l'm golng Lo be maklng regular changes Lo Lhe sLylesheeL, so lL's
lmporLanL Lo LesL Lhe page ln several dlfferenL browsers aL regular lnLervals, Lo make sure lL's
behavlng Lhe same ln all browsers, and lf noL, Lo flx Lhe errors before you lose Lrack of whaL has
caused Lhem. l LesL ln Mozllla llrefox, lnLerneL Lxplorer 6 and 7, Cpera and Safarl.
Header
now l'll sLarL from Lhe Lop of Lhe page and work down, applylng sLyles as l go, whlle Lrylng Lo keep
my P1ML semanLlcally correcL. l need Lo puL Lhe gradlenL background on Lhe header. ?ou mlghL be
LempLed Lo apply lL as a background lmage on Lhe header <dlv>, buL slnce Lhe gradlenL needs Lo
span Lhe wldLh of Lhe page lL 's a beLLer ldea Lo puL lL on Lhe <body> Lag. 1haL means l can seL Lhe
wldLh of Lhe header dlv wlLhouL Lhe need for an exLra <dlv> Lag. 1he wldLh of Lhe deslgn (aL normal
LexL slze) ls 730px, whlch l found Lo be equal Lo abouL 62em.
333
body {
font#family- @erdana0 Gene9a0 ?rial0 Hel9etica0 sans#serif.
font#siHe- IFJ.
$ac'ground- url1../iages/header-$g.gif2 repeat-*.
te*t-align- center.
$
#header ,
height- 34p*.
width- 56e.
argin- 7 auto.
te*t-align- left.
/
CSS
#repeat1x# makes Lhe 1-plxel wlde gradlenL lmage repeaL horlzonLally across Lhe page. l've added
Lhe helghL and wldLh of Lhe header, and l've seL Lhe lefL and rlghL marglns Lo auto, whlch wlll
cenLre Lhe header on Lhe page. l've also seL LexL-allgn Lo cenLer on Lhe body, because Lhe
auLomaLlc marglns don'L work on lL3. lor Lhls reason, l've seL LexL-allgn Lo lefL on Lhe header Lo geL
lL back Lo normal.
noLe: Less Lhan 2 of users are sLlll uslng lL3 so you shouldn'L spend a loL of Llme
Lrylng Lo geL your deslgns Lo work on lL, buL lf lL's an easy flx Lhen lL's sLlll worLh
dolng.
33
lrom now on l'll be LesLlng Lhe deslgn ln dlfferenL browsers, so l'll use lcons on Lhe screenshoLs Lo
show whlch browser l'm uslng:
llrefox
lnLerneL
Lxplorer 7
lnLerneL Lxplorer 6
Looklng aL Lhe page ln a browser now, you'll see LhaL all Lhe LexL below Lhe header ls cenLred on
Lhe page because of Lhe text1align2 center on Lhe body. uon'L worry abouL Lhls, l'll flx lL laLer. ?ou
can also see how Lhere's no margln or paddlng on any of Lhe LexL, as l lnLended, and Lhe header
background ls ln place.
36
Logo
l'll puL ln Lhe llnk Lo Lhe logo lmage LhaL l lefL ouL of Lhe P1ML earller:
333
<di9 id:/header/>
<a href:///><img src:/iages/logo.gif/ alt:/Mortgage
>er9ices home 5age/ /></a>
<ul>
333
HTML
lmages have a border around Lhem by defaulL, so leLs Lake LhaL off. l won'L wanL Lhe defaulL Lhlck
blue border on any lmages, so l can apply Lhe sLyle Lo all <lmg> Lags:
333
img ,
border- none.
/
CSS
Links
1he logo and Lhe llnks need Lo be poslLloned slde by slde, wlLh Lhe logo on Lhe lefL, and Lhe llnks on
Lhe far rlghL. 1hls can be done by slmply leavlng Lhe logo where lL ls buL addlng a Lop margln Lo
push lL lnLo poslLlon, Lhen absoluLely poslLlonlng Lhe <ul> from Lhe rlghL and boLLom of Lhe header.
ln Lhls way, when Lhe browser's LexL slze ls lncreased, Lhe llnks wlll enlarge upwards lnLo Lhe
header, lnsLead of downwards ouL of Lhe header:
333
#header ,
height- =I5".
6idth- FDem.
margin: ! auto.
te"t#align- left.
position- relative.
$
#header ig ,
argin-top- 87p*.
/
#header ul ,
position- a$solute.
37
$otto- 67p*.
right- 7.
/
CSS
noLe: When absoluLely poslLlonlng an elemenL wlLhln a parenL elemenL, be sure
Lo seL Lhe parenL elemenL Lo position2 relati!e. Pere l wanL Lo poslLlon Lhe <ul>
wlLhln Lhe header <dlv>, so l've made Lhe header position2 relati!e.
now Lo make Lhe llnks look llke Lhey do ln Lhe deslgn. llrsL l'll add a floaL: lefL Lo Lhe <ll> elemenLs,
so LhaL Lhey are poslLloned slde by slde. 1hen l'll add a 1-plxel blue border Lo Lhe lefL of Lhe <ll>
elemenLs wlLh some paddlng Lo keep lL away from Lhe LexL, and change Lhe fonL and LexL colour of
Lhe llnks. l'll remove Lhe underllne from Lhe llnks, buL have lL reappear when you hover over Lhem,
Lo make lL obvlous LhaL Lhey are llnks. l'll also remove Lhe bulleL polnLs whlch llrefox auLomaLlcally
puLs on a <ul>, uslng list1style2 none
333
#header li ,
float- left.
$order-left- 9p* solid #777755.
padding- 7 97p*.
list-st&le- none.
/
#header li a ,
color- #777755.
font-fail&- "Trebuchet MS"0 #rial0 :elvetica0 sans-serif.
te*t-decoration- none.
/
#header li a-hover ,
te*t-decoration- underline.
/
CSS
AlmosL Lhere, buL slnce l puL Lhe blue border on Lhe lefL of Lhe llsL lLems, l now have a verLlcal bar
Lo Lhe lefL of each llnk, whereas Lhere should only be one beLween Lhe llnks. l need an efflclenL
way Lo remove Lhe lefLmosL border.
l used Lo Lhlnk LhaL Lhe only way Lo do Lhls was Lo glve a class name Lo Lhe flrsL menu lLem only,
and Lhen remove Lhe border on Lhe flrsL <ll> only. l recenLly dlscovered anoLher Lechnlque, whlch
doesn'L requlre a class name, and Lherefore leaves Lhe P1ML unchanged. lnsLead of removlng Lhe
border, you can [usL hlde lL uslng Lhe llLLle-known CSS properLy, clip. 1he cllp properLy allows you Lo
Lake any elemenL and speclfy a recLangular porLlon of lL Lo be dlsplayed. 1he resL of Lhe elemenL
wlll be hldden, klnd of llke a mask ln hoLoshop.
38
333
#header ul ,
5osition- absolute.
bottom- D!5".
right- !.
clip- rect1auto auto auto 9p*2.
/
333
CSS
1he cllp properLy requlres a shape value (rect ls Lhe only valld shape ln CSS2, buL oLher shapes are
expecLed ln CSS3), and 4 values (Lop rlghL boLLom lefL) Lo deLermlne Lhe offseL of Lhe cllpplng area
from Lhe edge of Lhe elemenL's box. A value of auto means LhaL Lhe glven edge of Lhe cllpplng area
wlll be Lhe same as Lhe edge of Lhe elemenL's box (no cllp). So here l have speclfled LhaL Lhe Lop,
rlghL and boLLom edges of Lhe cllpplng area wlll be Lhe same as Lhe edges of Lhe <ul>, buL Lhe lefL
edge should be cllpped by 1 plxel, Lhus hldlng Lhe 1-plxel border whlch resLs agalnsL Lhe lefL edge
of Lhe <ul>.
noLe: 1he clip properLy can only be used on absoluLely poslLloned elemenLs. lf
Lhe elemenL can'L be absoluLely poslLloned Lhen you may have Lo use anoLher
meLhod.
1haL's all Lhere ls Lo lL. now, even lf more llnks are added Lo Lhe llsL, Lhe lefLmosL border wlll always
be hldden auLomaLlcally, and our P1ML remalns semanLlcally correcL.
noLe: ?ou could achleve Lhe exacL same effecL wlLh Lhe border on Lhe rlghL of Lhe
<ll> elemenLs, and by cllpplng 1 plxel off Lhe rlghL lnsLead of Lhe lefL.
39
a!igation
now for Lhe Lrlcky parL, Lhe Lwo level navlgaLlon menu. l'll flrsL aLLempL Lo sLyle Lhe navlgaLlon as lL
ls, buL lL may well be Lhe case LhaL l'll need Lo alLer Lhe sLrucLure of Lhe submenu Lo achleve Lhe
requlred deslgn.
C,, co%%ents
CommenLs ln CSS are wrlLLen ln a dlfferenL way from P1ML commenLs, lnsLead of uslng Lhe '$11 . . .
11( noLaLlon, you use /* . . . */
LveryLhlng beLween Lhe Lwo asLerlsks wlll be lgnored. ?ou can (and should) use commenLs Lo
explaln cerLaln CSS rules LhaL mlghL noL be self-explanaLory. lf anoLher web deslgner Lrles Lo edlL
your CSS laLer, Lhese commenLs can be very useful. ?ou can also use Lhem Lo Lemporarlly dlsable
whole chunks of a sLylesheeL, lf you're havlng Lrouble flndlng Lhe cause of a problem.
l also llke Lo use commenLs as secLlon headlngs, so l can easlly flnd a cerLaln secLlon [usL by
scrolllng down Lhe page. l'll add a commenL Lo denoLe Lhe sLarL of Lhe navlgaLlon secLlon. now, Lhe
maln-nav <ul> needs Lo be conLalned wlLhln Lhe same wldLh as Lhe header, buL Lhe background
needs Lo sLreLch Lo boLh sldes of Lhe wlndow, so l'll need Lo wrap Lhe <ul> lnslde a <dlv> whlch wlll
conLaln Lhe background lmage. l'll glve Lhls <dlv> an ld name of na!igation3 and seL Lhe background
poslLlon Lo 100 verLlcal so LhaL lL sLlcks Lo Lhe boLLom of Lhe maln menu. l'll also puL Lhe same
green from Lhe gradlenL as Lhe background colour, so LhaL lf Lhe LexL ls enlarged and Lhe bar
expands verLlcally, Lhe green background wlll flll Lhe gap. l'll glve Lhe navlgaLlon dlv a helghL of
3.1em, whlch corresponds Lo Lhe 38 plxel background lmage.
333
<div id="navigation">
<li id:/about/><a href:/#/>?bout us</a>
333
</ul><%## end main#na9 ##>
</div>
333
HTML
333
/K #### na9igation #### K/
#na9igation {
background- #<++(IL urlM33/images/mainna9#bg3gifN re5eat#".
background#5osition- ! 1!!J.
height- 131em.
40
$
CSS
now, Lo poslLlon Lhe menu ln Lhe cenLer of Lhe page, l use Lhe same Lechnlque for Lhe maln-nav ul
as l dld for Lhe header conLenL:
333
ul3main#na9 ,
margin- ! auto.
6idth- FDem.
/
CSS
4ackground i%ages for ho!er states
lor hover sLaLe lmages, lL's usually besL Lo use a slngle lmage and change Lhe poslLlon of Lhe lmage
on hover Lo dlsplay Lhe hover sLaLe.
e.g.
Pover sLaLe
normal sLaLe
1hls prevenLs Lhe lmage from fllckerlng when you hover over lL, as can happen lf you use Lwo
separaLe lmages and replace one wlLh Lhe oLher on hover.
Powever, our menu deslgn ls qulLe complex, ln LhaL lL conLalns a gradlenL on boLh Lhe normal and
hover sLaLes, and lL ls requlred Lo expand verLlcally as Lhe LexL slze ls lncreased. So a slngle lmage
for boLh sLaLes wouldn'L work.
lorLunaLely, l already have Lhe llghL green gradlenL as a background sLreLchlng all Lhe way across
Lhe screen, so l don'L need Lo worry abouL Lhe lmage fllckerlng. l can go wlLhouL an lmage for Lhe
normal sLaLe and slmply add Lhe followlng lmage for Lhe hover sLaLe:
41

l've made lL much wlder Lhan necessary, so LhaL lL wlll sLlll look rlghL aL large LexL slzes, and l [usL
need Lo poslLlon lL aL 30 horlzonLally and 100 verLlcally.
nexL l'll make Lhe llsL lLems dlsplay lnllne and floaL lefL, so LhaL Lhey llne up slde by slde lnsLead of
sLacked on Lop of each oLher.
333
ul3main#na9 li ,
dis5lay- inline.
float- left.
/
CSS
?our page ls golng Lo look messy for a whlle, buL don'L worry, lL'll sLarL Lo come LogeLher very soon.
now l'll sLyle Lhe maln-nav llnks. 1hey need Lo be dlsplay: block so LhaL Lhey wlll sLreLch Lo flll Lhe
llsL lLem elemenLs. l'll change Lhe fonL properLles Lo maLch Lhe deslgn, and remove Lhe underllne.
333
ul3main#na9 li a ,
dis5lay- block.
color- #fff.
font#family- "Myriad Pro"0 ?rial0 Hel9etica0 sans#serif.
font#6eight- bold.
font#siHe- 131em.
te"t#decoration- none.
/
CSS
42
lL's far Loo crowded ln Lhere, leL's hlde Lhe subnavlgaLlon. 1argeLlng any unordered llsL wlLhln Lhe
maln-nav unordered llsL, l'll seL Lhe dlsplay Lo none so Lhe browser won'L show Lhe submenus. l
also need Lo seL Lhe wldLh of Lhe submenus, oLherwlse Lhey wlll sLay Lrapped lnslde Lhe wldLh of
Lhe parenL menu lLem. l've reallgned Lhe LexL Lo Lhe lefL, so LhaL Lhe submenus slL dlrecLly
underneaLh Lhelr parenL menu lLems.
333
ul3main#na9 ul ,
dis5lay- none.
6idth: FDem
te"t#align- left.
/
CSS
8eLLer. now l'll glve Lhe llnks some paddlng. l also need Lo geL Lhe LexL allgned Lo Lhe verLlcal cenLre
of Lhe unordered llsL, so l need Lo make Lhe llnk's llne helghL Lhe same as Lhe llsL lLem's helghL.
Powever, slnce l've lncreased Lhe fonL-slze Lo 1.3em, l need Lo decrease Lhe llne-helghL accordlngly.
lnsLead of 3.1em, l'll use 2.4em.
333
ul3main#na9 li a ,
dis5lay- block.
color- #fff.
font#family- "Myriad Pro"0 ?rial0 Hel9etica0 sans#serif.
font#6eight- bold.
font#siHe- 131em.
padding- 7 7.;e.
line-height- 6.8e.
/
43
CSS
erfecL! now l need Lo deal wlLh Lhe subnav. l need a way Lo make lL so LhaL lf you're on Lhe
morLgage page, say, Lhen only Lhe morLgage subnav ls dlsplayed. 1hls can be achleved Lhrough Lhe
use of body classes. lf you glve Lhe body Lag on each of your pages a dlsLlncL class name, Lhen lL's
posslble Lo LargeL a parLlcular subnav by glvlng lL's parenL <ll> Lhe same class name, and have lL
dlsplay only lf lL's class name corresponds Lo Lhe body class. An example wlll make Lhlngs clearer.
llrsL l'll glve Lhe body Lag a class name of 5about6 (leL's lmaglne Lhls ls Lhe abouL page, slnce Lhere
ls no navlgaLlon lLem for Lhe home page). l also need Lo glve Lhe llsL lLem whlch conLalns Lhe abouL
submenu Lhe same class name.
333
</head>
<body class="a$out">
<di9 id:/header/>
333
333
<li class="a$out"><a href:/#/>?bout us</a>
<ul>
<li><a href:/#/>?bout Mortgage
>er9ices</a></li>
<li><a href:/#/>'ur history</a></li>
333
HTML
nexL l'll LargeL Lhe 'abouL' subnav by applylng a sLyle only Lo any unordered llsL whlch ls wlLhln a
llsL lLem wlLh class name 'abouL', whlch ln Lurn ls wlLhln anoLher elemenL (ln Lhls case Lhe body
Lag) wlLh class name 'abouL'. ln Lhls way, lf Lhe body class ls anyLhlng oLher Lhan 'abouL', Lhen Lhe
abouL submenu wlll sLay hldden. ln order Lo make lL vlslble on Lhe abouL page, l need Lo seL dlsplay
Lo block (Lo overrlde Lhe dlsplay: none LhaL l seL earller). now l need Lo poslLlon lL. lL needs Lo be
poslLloned relaLlve Lo lL's parenL menu lLem, and lL also needs Lo be removed from Lhe flow of Lhe
page so LhaL lL won'L lnLerfere wlLh Lhe subsequenL menu lLems. lor Lhls purpose, Lhe only soluLlon
ls absoluLe poslLlonlng. l'll poslLlon lL 3.1 em from Lhe Lop of lLs parenL <ll> (whlch needs Lo be seL
Lo poslLon: relaLlve) and 0 plxels from Lhe lefL. l've also lncluded a CSS commenL Lo show LhaL Lhls
44
ls where l'll be deallng wlLh subnav lLems.
333
ul3main#na9 li ,
dis5lay- inline.
float- left.
position- relative.
/
...
/+ displa& su$nav for selected page +/
.a$out li.a$out ul ,
displa&- $loc'.
position- a$solute.
top- <.9e.
left- 7.
/
CSS
Well, Lhere won'L be any vlslble dlfference yeL, because Lhe subnav ls currenLly whlLe LexL on a
whlLe background, so l need Lo somehow lmplemenL Lhe blue background from Lhe deslgn. Agaln, l
can'L puL Lhe background dlrecLly onLo Lhe subnav <ul> because lL needs Lo span Lhe wldLh of Lhe
page, so l'll have Lo use an exLra dlv afLer Lhe navlgaLlon dlv Lo hold Lhe background lmage, agaln
lncludlng Lhe blue background colour Lo flll Lhe gap lf Lhe LexL ls enlarged. 1he dlv needs a helghL
on lL Lo make lL vlslble as lL has no conLenLs.
?ou should Lry Lo avold empLy dlvs whlch are [usL used as background lmage
holders. ln some cases lL ls unavoldable for deslgn purposes, buL Lry Lo keep
Lhem Lo a mlnlmum!
333
</di9><%## end na9igation ##>
<div class="su$nav-$g"></div>
<di9 id:/content/>
333
HTML
333
3subna9#bg ,
background- #=2&&LF urlM33/images/subna9#bg3gifN re5eat#"
bottom.
height- 132em.
43
/
CSS
Ck, Lhe blue background ls ln place, l [usL need Lo sLyle Lhe subnav llnks correcLly.
333
ul3main#na9 li ul li a ,
font#6eight- normal.
/
CSS
erfecL.
now l'll have Lo repeaL Lhe process for each submenu, glvlng each llsL lLem a class and LargeLlng lL
Lhrough Lhe CSS. Slnce Lhe sLyles wlll be Lhe same for each submenu, l can [usL use one CSS
declaraLlon, and apply lL Lo all of Lhe submenus aL once, separaLlng Lhem wlLh commas:
333
3about li3about ul0 .ortgages li.ortgages ul0 .protection
li.protection ul0 .insurance li.insurance ul0 .loans li.loans ul0
.conve&ancing li.conve&ancing ul0 .cut&our$ills li.cut&our$ills
ul0 .contactus li.contactus ul {
dis5lay: block
5osition: absolute
to5: 131em
left: !
$
CSS
46
l'll have Lo remember Lo change Lhe body class when creaLlng Lhe new pages laLer. now Lo add Lhe
hover sLaLes.
Ho!er states
As l menLloned earller, Lo seL Lhe hover sLaLe for Lhe maln navlgaLlon, l [usL need Lo apply Lhe
background lmage aL 30 horlzonLally Lo cenLre Lhe asLerlsk and 100 verLlcally Lo make lL sLlck Lo
Lhe boLLom of Lhe llnk elemenL. l also need Lo add 10 plxels of paddlng Lo Lhe boLLom of Lhe llnks
Lo allow space for Lhe asLerlsk lmage and blue background Lo show underneaLh Lhe maln
navlgaLlon.
333
ul3main#na9 li a ,
...
5adding- ! !3<em 97p*.
line#height- D32em.
/
ul.ain-nav li a-hover ,
$ac'ground- #;=>54# url1../iages/ainnav-$g-hover.gif2 no-
repeat.
$ac'ground-position- ;7? 977?.
/
CSS
1haL works, buL now Lhe green arrow and asLerlsk are also dlsplayed when you hover over Lhe
subnav, l need Lo make sure Lhey only show up on Lhe maln navlgaLlon. lnsLead l'll resLore Lhe
underllne for Lhe subnav hover sLaLe.
333
ul3main#na9 li ul li-ho9er0 ul3main#na9 li ul li a-ho9er ,
background- none.
te"t#decoration- underline.
/
CSS
47
now, lL would be nlce lf Lhe maln navlgaLlon llnk was hlghllghLed whenever you are ln LhaL secLlon,
noL [usL when you hover over a llnk. 1hls ls known as an 'on sLaLe', whlch makes lL clear aL a glance
whlch secLlon you are ln aL any Llme. 1o add an on sLaLe, l'll use Lhe body classes and <ll> classes
LhaL l seL up earller Lo dlsplay Lhe submenus. Agaln, Lhe sLyles wlll be Lhe same for each one, so l
only need one CSS declaraLlon:
333
/K on state for selected 5age K/
3about li3about aA 3mortgages li3mortgages aA 35rotection
li35rotection aA 3insurance li3insurance aA 3loans li3loans aA
3con9eyancing li3con9eyancing aA 3cutyourbills li3cutyourbills aA
3contactus li3contactus a {
background- #<+&FI? urlM33/images/mainna9#bg#ho9er3gifN no#
re5eat.
background#5osition- <!J 1!!J.
$
CSS
now Lhe on sLaLe ls shown, buL lL also cascades down Lo Lhe submenu llnks, so l need Lo remove
Lhe background from Lhose llnks. 8aLher Lhan dolng Lhls expllclLly, l can [usL add child combinator
selecLors (>) Lo Lhe code for Lhe on sLaLe, so LhaL lL only applles Lo llnks LhaL are dlrecL descendanLs
of Lhe maln-nav llsL lLems.
333
/K on state for selected 5age K/
48
3about li3about > aA 3mortgages li3mortgages > aA 35rotection
li35rotection > aA 3insurance li3insurance > aA 3loans li3loans >
aA 3con9eyancing li3con9eyancing > aA 3cutyourbills
li3cutyourbills > aA 3contactus li3contactus > a {
background- #<+&FI? urlM33/images/mainna9#bg#ho9er3gifN no#
re5eat.
background#5osition- <!J 1!!J.
$
CSS
1haL compleLes Lhe menu, buL lf you look aL lL ln lnLerneL Lxplorer 6 you'll see a problem:
49
1hls looks bad, buL don'L panlc, lL can be easlly flxed. 1he problem ls lL6 doesn'L llke Lhe facL LhaL
l've made Lhe llnks dlsplay: block lnslde Lhe llsL lLems whlch are dlsplay: lnllne, so lL's sLacklng Lhem
on Lop of each oLher. l can flx Lhls by seLLlng Lhe llnks Lo dlsplay: lnllne-block, buL l need a way Lo
make Lhls happen ln lL6 only, whlle leavlng Lhe oLher browsers unchanged.
now would be a good Llme Lo dlscuss some of Lhe ways you can Lackle lnLeroperablllLy lssues, and
Lhelr varlous pros and cons.
4rowser hacks
8rowser hacks Lake advanLage of lnvalld P1ML markup and browser parslng errors ln order Lo
LargeL cerLaln browsers only so LhaL you can speclfy dlfferenL sLyles for browsers LhaL are
mlsbehavlng. Cne of Lhe mosL commonly used hacks ls Lhe '* hLml' hack, whlch ls used Lo flx lL6
lssues.
1he <hLml> Lag ls supposed Lo be Lhe hlghesL level elemenL ln any web page, buL for some reason
lL6 (and below) allows you Lo LargeL a non-exlsLenL parenL elemenL, whlch all oLher browsers
lgnore. So any sLyles applled Lo * hLml, wlll only be dlsplayed by lL6.
e.g.
K html ul3main#na9 li a {
dis5lay: inline#block
$
CSS
1hls would apply Lhe lnllne-block dlsplay ln lL6, buL oLher browsers would lgnore lL and leave Lhe
dlsply seL Lo block.
1here are a varleLy of oLher hacks whlch use slmllar meLhods Lo flx browser bugs, buL l Lry Lo avold
uslng Lhem unless l can'L flnd an alLernaLlve soluLlon. Cne reason ls LhaL Lhey rely on browser bugs,
so Lhere ls no guaranLee LhaL Lhey wlll sLlll work correcLly for fuLure browser releases. 1hey resulL
ln lnvalld CSS markup, and Lhey're [usL plaln messy. A cleaner way Lo achleve Lhe same resulLs ls
wlLh alLernaLe sLylesheeLs.
30
*lternate stylesheets
AlLernaLe sLylesheeLs allow you Lo provlde a separaLe CSS flle for your buggy browser. ?ou Lhen use
condlLlonal P1ML commenLs ln your maln page, Lo speclfy whlch browser should use Lhls alLernaLe
sLylesheeL.
e.g.
333
<link href:/css/styles3css/ rel:/stylesheet/ ty5e:/te"t/css/
/>
<%##Oif lt .+ IP>
<link href:/css/.+F3css/ rel:/stylesheet/ ty5e:/te"t/css/ />
<%OendifP##>
HTML
1he condlLlonal sLaLemenL [lf lL lL 7] LargeLs any verslon of lnLerneL Lxplorer prlor Lo verslon 7, and
Lells lL Lo use Lhe sLylesheeL called lL6.css
?ou Lhen need Lo creaLe Lhls sLylesheeL, and puL ln lL any sLyles requlred Lo flx problems wlLh lL6 or
lower.
1hls meLhod sLlll has lL's problems. P1ML commenLs were noL deslgned Lo conLaln condlLlonal
sLaLemenLs, so lL ls sLlll a hack of sorLs, buL lL means you don'L need any lnvalld CSS hacks, and lL
keeps Lhe lL sLyles separaLe from Lhe maln sLyles, so l flnd Lhls a much beLLer soluLlon Lhan CSS
hacks.
7a!ascript fix
lL's also posslble Lo use !avascrlpL Lo make bad browsers behave beLLer. uean Ldwards
(hLLp://dean.edwards.name) has wrlLLen lL7 scrlpLs, whlch make lL6 behave more llke lL7, and
even flx some of Lhe problems sLlll presenL ln lL7. ?ou can llnk dlrecLly Lo Lhe scrlpLs, whlch are
hosLed by Coogle, agaln uslng condlLlonal commenLs Lo LargeL lL6 only.
1hls ls a nlce meLhod, as ln Lheory lL means you don'L need any alLernaLlve sLyles, buL lL's noL a
compleLe flx, and you wlll sLlll flnd LhaL Lhere are some problems wlLh lL6.
lor Lhls example, l'm golng Lo use an alLernaLe sLylesheeL for lL6. So l'll creaLe a new blank CSS flle
ln Lhe css folder, and save lL as lL6.css
ln here, l need Lo puL ln Lhe sLyles LhaL need Lo be changed ln lL6. So l'll change Lhe dlsplay Lo
lnllne-block for Lhe llnks.
ul3main#na9 li a {
31
dis5lay- inline#block.
$
IE6.CSS
1haL had Lhe deslred effecL, buL Lhere's sLlll a problem. 1he 10 plxel boLLom paddlng l puL on Lhe
llnks ls showlng background colour, so Lhe maln-nav bar appears blgger Lhan Lhe subnav bar. So,
sLlll ln Lhe lL6.css sLylesheeL, l'll apply a negaLlve Lop margln Lo Lhe subnav dlv.
3subna9#bg ,
margin#to5- #1!5".
/
IE6.CSS
So LhaL's Lhe navlgaLlon compleLed, and lL wasn'L qulLe as challenglng as l expecLed. LeL's move on
Lo Lhe maln page conLenL.
"ain Content
llrsL l'm golng Lo need Lo wrap Lhe 3 maln secLlons lnslde anoLher dlv so LhaL lL can be poslLloned
Lo Lhe lefL, separaLe from Lhe sldebar llnks. l'll glve Lhls dlv a class name of maln-conLenL. 1hen l'll
lefL-allgn all Lhe LexL ln Lhe conLenL secLlon, and floaL Lhe maln-conLenL dlv Lo Lhe lefL, wlLh a wldLh
of 42em . l'll also glve Lhe conLenL dlv a wldLh. lL needs Lo be narrower Lhan Lhe header and
navlgaLlon dlvs, so l'll seL lL Lo 34em.
32
333
<div class="ain-content">
<hD><a href:/#/>.nterest rates set to rise</a></hD>
333
<hD><a href:/#/>7ecommended: ?lliance Eam5
Leicester</a></hD>
<5>&uis laoreet 3 3 3</5>
</div>
333
HTML
333
#content ,
te"t#align- left.
6idth- <2em.
margin- ! auto.
$
3main#content ,
float- left.
6idth- 2Dem.
/
CSS
1hls ls golng Lo cause Lhe fooLer Lo also wrap Lo Lhe rlghL of Lhe maln-conLenL secLlon, so l need Lo
apply a clear Lo Lhe fooLer dlv. l only need Lo clear Lhe lefL floaL, buL lL's a good ldea Lo clear boLh
anyway, [usL Lo make sure Lhe fooLer won'L be affecLed by any floaLs whlch mlghL be added laLer.
Whlle l'm aL lL, l'll make Lhe fooLer navlgaLlon llsL lLems dlsplay lnllne, and remove Lhe bulleL polnLs.
333
#footer ,
clear- both.
/
#footer li {
dis5lay: inline
list#style: none
$
CSS
33
1haL puLs everyLhlng ln roughly Lhe rlghL place, now l [usL need Lo add some sLyles.
1he h1 Lag wlll be Lhe same on every page, so l can apply lL's sLyles dlrecLly, l don'L need Lo speclfy
LhaL lL should only apply Lo h1 Lags wlLhln Lhe conLenL area. l puL Lhese 'global sLyles' aL Lhe Lop of
my sLylesheeL, so LhaL Lhey can be overrldden by subsequenL sLyles lf necessary.
333
h1 ,
font#family- "Trebuchet MS"0 ?rial0 Hel9etica0 sans#serif.
color- #!!==!!.
font#siHe- D3Iem.
font#6eight- normal.
5adding- !3;em ! ! !.
/
CSS
nexL l'll sLyle all Lhe <p> Lags. 1he LexL ln Lhe paragraph under Lhe maln headlng ls blgger Lhan Lhe
LexL ln Lhe maln-conLenL secLlon. l'll seL all <p> LexL Lo Lhls larger slze, and Lhen speclfy LhaL Lhe LexL
ln Lhe maln-conLenL secLlon should be smaller. l'll also add some paddlng Lo Lhe Lop and boLLom of
all paragraphs.
333
5 ,
5adding- !3<em !.
34
font#siHe- 13Dem.
$
3main#content 5 ,
font#siHe- 1em.
/
CSS
Slnce Lhe maln secLlons conLaln repeaLed elemenLs, and l wanL Lo sLyle Lhem all aL once, l'll wrap
each one ln a dlv elemenL and glve lL a class name of 'arLlcle-summary', Lhen l can apply sLyles Lo
all of Lhe elemenLs wlLhln Lhe arLlcle-summary dlvs.
1he lmages need Lo be floaLed lefL, so LhaL Lhe LexL wlll wrap around Lhem. l'll glve Lhem a 1 plxel
grey border, and some rlghL and boLLom margln Lo keep Lhem away from Lhe LexL. Also, lf Lhe
paragraph LexL does noL Lake up as much verLlcal space as Lhe lmage, Lhen Lhe followlng lmage wlll
also wrap Lo Lhe rlghL, so each arLlcle-summary dlv needs a clear:lefL Lo force lL onLo a new llne.
/K #### article summary bo"es #### K/
3article#summary {
clear: left
$
3article#summary img {
float: left
border: 15" solid #ccc
margin: ! D!5" D!5" !
$
CSS
now l'll add a margln Lo Lhe lefL and rlghL of Lhe paragraphs and second-level headlngs, Lo keep
Lhem away from Lhe surroundlng conLenL. SeLLlng Lhese marglns ln ems means LhaL Lhe llne lengLh
wlLh remaln Lhe same as LexL ls enlarged. l'll also seL Lhe slze and colour of Lhe headlng llnks. l've
declded Lo change Lhe deslgn sllghLly. As Lhese are llnks, l'll leave Lhem as Lhe defaulL blue, so LhaL
Lhey're obvlously cllckable, remove Lhe underllne, and resLore lL for Lhe hover sLaLe.
333
3article#summary 5 {
margin- ! 1em ! 1D3<em.
$
3article#summary hD ,
font#siHe- 13Dem.
font#family- ?rial0 Hel9etica0 sans#serif.
margin: ! 1em ! 1!32em.
$
3article#summary hD a ,
33
$
3article#summary hD a-ho9er ,
$
CSS
1he lnLroducLory paragraph ls Loo close Lo Lhe header and Lhe conLenL dlv, so l need Lo add some
paddlng Lo Lhls <p> Lag. l can use Lhe child combinator selecLor (>) Lo LargeL only Lhose <p> Lags
whlch are dlrecL descendanLs of Lhe conLenL dlv. 1haL means Lhe paddlng wlll be applled Lo Lhe
paragraph dlrecLly wlLhln Lhe conLenL dlv, buL noL Lo any paragraphs conLalned wlLhln oLher
elemenLs wlLhln Lhe conLenL dlv.
36
333
#content > 5 ,
5adding- 1em !.
/
CSS
1em ls enough paddlng beLween Lhe paragraphs, buL l sLlll need more space beLween Lhe
paragraph and Lhe sLarL of Lhe conLenL, so l'll add some Lop margln Lo Lhe maln-conLenL dlv and Lhe
sldebar conLenL (l'll glve Lhe sldebar <ul> a class name of 'secondary-llnks').
lL's good pracLlce Lo use meanlngful class names whlch descrlbe Lhe conLenL,
raLher Lhan Lhe layouL of any glven elemenL. lor example, here l've used Lhe
name 'secondary-llnks', raLher Lhan 'sldebar' or 'rlghLcolumn', as Lhey only
descrlbe Lhe placemenL of Lhe elemenL, whlch could easlly be changed laLer. lor
more on chooslng meanlngful class names, see 8en PunL's ebook - SemanLlc
P1ML)
333
3main#content ,
float- left.
6idth- 2Dem.
$order-right- 9p* solid #ccc.
$
.ain-content0 .secondar&-lin's ,
argin- 6e 7 7 7.
/
CSS
l've also added Lhe 1-plxel grey border Lo Lhe rlghL of Lhe maln-conLenL dlv.
37
now l'll sLyle Lhe secondary llnks. llrsLly, noLlce LhaL each llnk needs a dlfferenL background lmage.
1hls means l need Lo glve each llsL lLem a unlque ld. Agaln l'll choose meanlngful names based on
Lhe conLenL of Lhe llnk
38
333
</di9><%## end main#content ##>
<ul class="secondar&-lin's">
<li id=")uotes"><a href:/#/>Lree 8uotes</a></li>
<li id="contact"><a href:/#/>(ontact us</a></li>
<li id="tips"><a href:/#/>'ur hot ti5s</a></li>
</ul>
HTML
now l need Lo add a lefL margln Lo Lhe llsL, Lo keep lL away from Lhe grey border on Lhe maln-
conLenL dlv. 1haL dlv ls 42em wlde, so Lhe llnks wlll need Lo have a lefL margln of 44em. l'll also
remove Lhe bulleL polnLs.
333
/K #### secondary links #### K/
3secondary#links ,
margin#left- 22em.
$
3secondary#links li ,
list#style- none.
/
CSS
now l'll glve Lhe llnks some sLyles. 1hey need Lo be dlsplay block, so LhaL l can glve Lhem a helghL
Lo make Lhe background lmages show. l'll glve Lhem some lefL paddlng Lo make room for Lhe
lmages, and some Lop paddlng Lo push Lhe LexL down sllghLly. 1he helghL ls Lhe helghL of Lhe
lmages, 73 plxels. l've also removed Lhe underllne, and resLored lL on hover.
333
3secondary#links li a ,
dis5lay- block.
5adding- 1!5" ! ! F!5".
height- I<5".
$
3secondary#links li a-ho9er ,
/
39
CSS
now l [usL need Lo add Lhe background lmages for each llnk.
333
3secondary#links li#8uotes a ,
background- urlM33/images/8uote#icon3C5gN no#re5eat to5
left.
$
3secondary#links li#contact a ,
background- urlM33/images/mail#icon3C5gN no#re5eat to5 left.
$
3secondary#links li#ti5s a ,
background- urlM33/images/ti5s#icon3C5gN no#re5eat to5 left.
/
CSS
60
Looklng good, [usL Lhe fooLer Lo do now.
61
Footer
lL's a slmple Lask Lo sLyle a LexL-only fooLer. ?ou [usL need Lo glve lL some Lop margln and space ouL
Lhe llnks a blL and you're done. 8uL ln Lhls example, l have a gradlenL background on Lhe fooLer,
and l wanL Lo make lL sLlck Lo Lhe boLLom of Lhe page, even lf Lhe conLenL doesn'L Lake up Lhe
verLlcal lengLh of Lhe screen. l'm golng Lo show you a nlce Lrlck whlch leLs you achleve Lhls effecL.
llrsL l need Lo puL an exLra <dlv> around everyLhlng whlch ls nC1 Lhe fooLer. l'll glve Lhls Lhe
descrlpLlve class name 'non-fooLer'.
333
<body class:/about/>
<div class="non-footer">
333
</div>
<di9 id:/footer/>
333
HTML
1hen, ln Lhe sLylesheeL, l need Lo speclfy LhaL boLh Lhe body Lag and Lhe hLml Lag should have
100 helghL.
333
html0 body ,
height- 1!!J.
/
...
CSS
l'll Lhen add some sLyles Lo .non-fooLer, maklng lL poslLlon relaLlve (Lhe fooLer also needs Lo be seL
Lo poslLlon relaLlve), and a mlnlmum helghL of 100. 1he fooLer dlv needs a helghL of 3.73em Lo
conLaln Lhe background lmage, and an equal llne-helghL Lo allgn Lhe LexL ln Lhe verLlcal cenLre.
now Lhe 100 mln-helghL on .non-fooLer wlll push Lhe fooLer off Lhe boLLom of Lhe page, so l need
some negaLlve Lop margln Lo brlng lL back up. l'll also add some paddlng Lo Lhe boLLom of Lhe
maln-conLenL dlv, Lo keep lL away from Lhe fooLer.
...
3main#content {
float- left.
62
6idth- 2Dem.
border#right- 15" solid #ccc.
padding-$otto- <7p*.
$
333
.non-footer ,
position- relative.
in-height- 977?.
/
#footer {
clear: both
$ac'ground- url1../iages/footer-$g.gif2 repeat-* $otto.
height- <.4;e.
line-height- <.4;e.
argin- -<.4;e 7 7 7.
position- relative.
$
CSS
1he problem ls LhaL lL6 does noL supporL Lhe mln-helghL properLy, so ln my lL6.css alLernaLe
sLylesheeL, l'll speclfy LhaL Lhe helghL of .non-fooLer should be 100.
333
3non#footer ,
height- 1!!J.
$
IE6.CSS
1hen l'll [usL sLyle Lhe llnks approprlaLely . . .
333
#footer li a ,
color-#!!FFcc.
5adding- ! !3;em.
font#siHe- !3=em.
$
#footer li a-ho9er ,
/
CSS
Comparlng wlLh Lhe orlglnal hoLoshop documenL (see page ), l'm happy LhaL Lhe page ls Lrue Lo
Lhe orlglnal, and a qulck check Lells me LhaL lL works ln all ma[or browsers, so LhaL's lL, we're done!
?ou can check ouL Lhe worklng verslon of Lhe page aL hLLp://webdeslgnfromscraLch.com/web-
producLlon1/lndex.hLml
63
Summar!
l hope Lhls book has been useful ln helplng you undersLand Lhe besL way Lo approach web page
producLlon.
We've looked aL Lhe cholces you need Lo make when decldlng how Lo sLrucLure your page, Lhe
beneflLs of sLarLlng Lhe process wlLh semanLlc P1ML, how Lo sllce up a hoLoshop deslgn, and how
Lo sLyle your page uslng CSS.
1here ls sLlll a loL more lnformaLlon abouL web page producLlon, buL lL's lmposslble Lo flL lL all lnLo
a slngle ebook, so keep an eye on hLLp://webdeslgnfromscraLch.com/downloads.cfm for fuLure
releases.
1hanks for readlng!
66

Web Page Production With XHTML and CSS

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Web Page Production With XHTML and CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Web ueslgn from ScraLch, 2008

Web Production with

S-ar putea să vă placă și