I dag handler det om HTML og CSS skabelonerne. I første omgang handler det om at gøre det så enkelt som muligt. Der er ingen grund til gøre det hele mere kompliceret end det er.
Jeg bygger min html uden tabeller og jeg bruger lister til navigation, men nu går jeg vist en smule for hurtigt frem.
Jeg er stadig ikke helt tilfreds med designet på bloggen. Det betyder ikke så meget at den grafiske WOW-effekt ikke er der. Det der er vigtigt for mig er at siden er nem at overskue. Det synes jeg ikke selv den er. Derfor vil jeg fortsat eksperimentere med designet indtil jeg synes den del sidder i skabet.
Den næste uges tid vil jeg tage jer med på turen i den proces jeg gennemgår hver gang jeg laver ændringer i designet.
Læs resten af dette indlæg »
Her kommer afslutningen på føljetonen om layout med to kolonner uden brug af tabeller. Det har vist sig at jeg var på rette spor. Det kan ikke lade sig gøre at lave et css/div design hvor kolonnerne bliver lige store. Til gengæld kan jeg få det til at se ud som om kolonnerne er lige høje. Nu vil du garanteret gerne vide hvordan og det skal jeg nok komme ind på lige om lidt.
Jeg er nødt til lige at komme ind på en problemstilling jeg selv blev offer for. Du skal passe på med at blive ved med at arbejde på den samme css fil alt for længe. På et tidspunkt risikerer du at den bliver så kompleks at du ikke kan overskue den længere. Måske føler du godt du kan overskue den, men hvis der opstår problemer med dit layout er det vigtigt at du ved lige præcis hvilken del af din css eller html der giver dig problemer.
Det var bare en lille advarsel.
Ja ganske enkelt. Jeg var også inde på det for et par dage siden, men har nu fået det bekræftet. I lørdags var jeg så frustreret over at mit lille css hæfte ikke gav mig svaret. Derfor rendte jeg ud og investerede i en ny bog. Den hedder “Webdesign med stylesheets” og er skrevet af Jørgen Farum Jensen. Jeg må sige at den ser meget lovende ud. Under alle omstændigheder gav den mig svaret på mine layout problemer. Før jeg forklarer hvorfor det virker vil jeg lige vise koden til det.
Først html-koden:
<div id=”container”>
<div id=”maincontent”>
</div>
<div id=”rightcol”>
</div>
</div>
Bemærk især den div med id’en “container”. Det er den der er nøglen til løsningen af problemet. Vi vil nemlig senere putte et baggrundsbillede ind, der får det til at se ud som om der er en kolonne i højre side. Først skal du lige se den css kode der får det til at ske.
div#container{
margin: 0;
padding: 0;
background-image: url(res/rightcolbg.png);
background-repeat: repeat-y;
bakcground-position: right top;
}
Voila! Et layout med to kolonner. Eller det vil sige, et layout der ser ud som om det har to kolonner.
Tricket er i virkeligheden ret enkelt. Container div’en indeholder de to div’er der indeholder henholdsvis teksten og navigationen. Lige meget hvilken én af de to der er størst vil container div’en altid være mindst lige så stor. Derfor placerer jeg et baggrundsbillede i den side hvor jeg vil have navigationen. Jeg sørger for at billedet bliver gentaget vertikalt.
Hvem? Hvor? Hvad for noget? Det erindrer jeg ikke!
Ok den slipper jeg jo nok ikke lige uden om. Faktisk så kan det også godt lade sig gøre med den her metode. Den eneste begrænsning er at navigations kolonnen ikke kan være flydende. Resten af sitet kan sagtens, men det kræver lidt mere css og html end jeg har vist her. Jeg skal nok sørge for at komme ind på det når jeg har lavet det endelige kode venlige design.
Ja, jeg er vild med css. Html gør det muligt for os at vise hjemmesider på nettet, men det er css der giver os mulighed for at forme siden sådan som vi gerne vil have den. Mulighederne er bogstavelig talt uendelige. Vi kan lave layouts med tabeller, men vi kan også lave det udelukkende ved hjælp af stylesheets. Som sagt, mulighederne er uendelige.
Jeg skal være den første til at indrømme at jeg troede jeg havde ganske godt styr på css inden jeg gik i gang med det her projekt. Hvor tog jeg fejl! Godt nok havde jeg ingen problemer ved at bygge et fasttømret css design, der beholdt sin størrelse stort set uanset hvad brugeren gjorde for at tilpasse det. Den form for layout giver den ultimative kontrol over udtrykket, men hæmmer også læserens muligheder.
Et andet alternativ er et flydende design. Det giver fuld fleksibilitet. Layoutet tilpasser sig hele tiden browserens størrelse. Desværre betyder det også at programmøren mister kontrollen over layoutet. Designeren kan prøve at fortælle browseren hvor han som udgangspunkt gerne vil have sidens elementer placeret, men ligeså snart brugeren hiver i browseren eller skifter skærm opløsning så vil vores design ændre sig.
Den nyeste opdagelse jeg har gjort er elastisk design. Det er desværre ikke min idé, men det gør den ikke mindre genial. forestil dig at man ved hjælp af css afgør hvor de forskellige elementer skal være placeret på siden. Når brugeren ændrer vinduets størrelse så bliver elementerne det samme sted. På grund af den css kode vi har skrevet så ændrer hele designet størrelse, men det gør det på en måde så forholdet mellem elementerne altid vil være det samme. Det er da css når det er best.
Jeg må indrømme at jeg ikke helt har styr på elastisk layout endnu, men det får jeg. Jeg er igang med at arbejde videre på det html template jeg har lavet: Et Jule eventyr. Mit må er ved hjælp af css at gøre det elastisk. Jeg synes det er fantastisk med en teknologi der giver os mulighed for at have fuld kontrol over vores design samtidig med at vi giver brugeren fleksibilitet. Det kan da ikke blive meget bedre.
Fremtiden for css er lys. Vi benytter os i øjeblikket af CSS 2 og CSS 3 er under udvikling. Når vi i dag vil give vores tabeller runde hjørner gør vi det ved hjælp af grafik filer. Når version 3 bliver tilgængelig kan vi lave runde hjørner direkte i vores editor ved hjælp af koder. Jeg ser frem til den nye version og de muligheder den giver mens jeg glæder mig over de muligheder jeg allerede i dag har med css.
Det handler ikke umiddelbart om design af hjemmesider og så alligevel. For når du skal designe en hjemmesider kommer du næppe udenom nogen af de her emner.
HTML
HyperText Markup Language er sådan set det du kigger på nu. Alle hjemmesider består grundlæggende af html. Det er ligegyldigt om siden er lavet i PHP, ASP.Net eller en hvilken som helst anden teknologi. Det er html du kigger på. Du kan lave html filer i notepad, det består af en række tags der starter med < og slutter med >. De tags bliver fortolket af din browser som så viser dig resultatet.
Oprindeligt var hensigten med html at vise data. Det blev ikke lavet til at være æstetisk flot. Derfor vil html uden nogen form for styling også se ret kedeligt ud. Det med at det kun skulle vise data holdt dog ikke særligt længe, men det kommer jeg ind på om lidt.
En vigtig detalje omkring html er at det er statisk. Det vil sige at når du har lavet et html dokument vil det se sådan ud for tid og evighed, eller indtil du redigerer det.
CSS
Cascading Style Sheets bliver brugt til at peppe html siderne lidt op. Html i sig selv er ret kedeligt at se på, men ved hjælp af CSS kan vi få siden til at se ud stort set som vi vil.
Html tabeller har længe domineret måden vi laver layout til hjemmesider, men rene CSS layouts vinder større og større indpas. Det er en god ting, for det er med til at gøre siderne bedre egnede til mobile browsere (PDA’ere, mobiltelefoner osv.). Desuden er det også nemmere at overholde de standarder der er for hjemmesider når man laver rene CSS layouts.
Hjemmesider der består af html og CSS er dog stadigvæk rimeligt statiske.
JavaScript
Når alt kommer til alt kan vi jo godt lide at der er en smule lir på vores hjemmesider. Det er der JavaScript kommer ind i billedet. Vi bruger JavaScript til at lave bl.a. dropdown menuer.
Du har måske hørt om programmeringssproget Java og det er fristende at tro at Java og JavaScript er i familie med hinanden. Det er de ikke! Godt nok vil det for mange se ud som om at det er de samme ting man skriver, men der er nogen meget vigtige forskelle. Man kan nemlig godt bruge Java på internettet, men det fungerer på en helt anden måde en JavaScript. JavaScript er det der bliver kaldt en ClientSide teknologi. Det betyder at alt det der foregår ved hjælp af JavaScript sker på browseren på din maskine.
Du kan eksempelvis ikke gemme noget i en database ved hjælp af JavaScript. Til det formål skal du bruge en ServerSide teknologi som f.eks. PHP, som denne side er bygget med. ServerSide betyder bare at det den laver foregår på den server som siden ligger på.
DHTML
Dynamic HTML er en samlet betegnelse for html, css og javascript. Html er statisk men ved hjælp af andre teknologier kan vi gøre det mere levende.
