EXEMPEL 1 - Grundlayout 2
Den här LAYOUTEN är elastisk. Bredden är angiven till 63 em och kommer att anpassa sig efter textens storlek. Sidans utformning styrs av stilmallen: stilmall1.css.
Exempel 3 är också elastisk - men menyn är placerad till vänster!
Vill man att layouten ska ha en fast bredd måste man ändra lite här och där i stilmallen. Exempel 2 och 4 bygger på precis samma html-kod - men stilmallen är anpassad på några ställen för att fungera med fast bredd.
Teckensnittet för brödtexten är: Verdana, Arial, Helvetica, sans-serif.
Rubrikernas teckensnitt är: Georgia, Times, "Times New Roman", serif.
Teckensnittet i loggan "title.gif " är: Signature.
Menyn till höger bör inte innehålla hela ord med fler än c:a 20 tecken för att layouten ska fungera korrekt om användaren förändrar textstorleken. Testa!
I kolumnen #maincontent bör element inte vara bredare än 365 pixlar eller 40 em - inklusive eventuell padding och marginal - för att layouten ska fungera med förminskad textstorlek. En bredd med 100% - utan padding och marginal - går fint!
I kolumnen #sidecontent bör element inte vara bredare än 160 pixlar eller 17.5 em - inklusive eventuell padding och marginal - för att layouten ska fungera med förminskad textstorlek. En bredd med 100% - utan padding och marginal - går fint!
Om bredden på layouten eller paddingen i boxarna du förändras gäller andra mått! Testa!
Layouten är egentligen inte speciellt komplicerad - det är hur enkelt som helst förändra utseendet. Lägg till bakgrundsbilder, byt bakgrundsfärger och färger på rubriker och länkar!
Naturligtvis kan du också använda layouten som mall att arbeta vidare på - och ändra precis hur mycket eller lite du vill! Men se tll att kolla layouten i olika upplösningar och textstorlekar - och i åtminstone både Mozilla Firefox och Internet Explorer.
Behöver du ett grafikprogram kan du hitta tips på NinetNet under rubriken: GRAFIK / Grafik / Fotoprogram.
Om du vill får du gärna länka tillbaka till NinetNet från din sida:
Layout från NinetNet
Uppdaterad: Juli 2006