Eksempler og faser
Den rå site
Udfra xhtml-strukturen sættes et par sider (index.html, om_mig.html) op med titler, overskrifter og tekst.
En menu indføres, over indholdet, som “unordered list”
<ul> <li> <a href="index.html">home</a></li> <li> <a href="om_mig.html">om mig</a></li> </ul>
med liste-elementer indeholdende releative links til siderne.
http://curlingthebrackets.com/site/home/000/
Styling af tekst og links
Samme html-filer med et eksternt stylesheet: font-properties, farver på baggrund og tekst, samt menuens lister og links. Inline- og block-elementer og classes. Div med id til forskelleige sektioner på siden, og en div med id “page” til at omfatte det hele i en fast vidde, og fordele marginerne omkring.
http://curlingthebrackets.com/site/home/111/
Baggrundsbillede, vandret menu
Bagddrundsbillede på body, fra imageafter lavet i photoshop og gemt som gif i “Save for Web and Devices.”
Tekst padding i en div “text” inden i “page”. Manchet-class som en boks og float left og right.
Menuen bliver vandret ved at listepunkterne tvinges ind ved siden af hinanden med float-left.
http://curlingthebrackets.com/site/home/222/
Layout variationer
Arbejde og forsøg med position relative, absolute, fixed – margins og padding, float.
Flydende og faste elementer.
http://curlingthebrackets.com/site/home/333/
Flere viste eksempler
med galleri
Sitet er udbygget med galleri.html: en galleriside med “thumbnails” (miniature versioner af det store billede) lagt i en div med id=”galleri”, som hver især linkler til en html-side med et større billede i. #galleri styles så “thumbnails” ligger pænt på siden, og fra de enkelte billedsider kan linkes tilbage til galleri-siden.
http://curlingthebrackets.com/site/home/444/galleri.html
