Den, der er fortrolig med udviklingen af hjemmesider, ved, at man normalt ikke begynder med HTML-strukturen. I stedet tager man et grafikprogram og bygger layoutet af siden der. (Hvis man arbejder i et bureau, modtager man derefter layoutet fra grafikeren eller kunden). Derefter er opgaven at bygge siden ud fra dette layout. Det er præcis det, det handler om nu.
I forbindelse med at genskabe layouts vil I støde på begreberne Slicing og Dicing. Dette betyder i virkeligheden blot, at man tager skabelonen eller designet, skærer det op i sit grafikprogram og derefter sammensætter det igen ved hjælp af HTML.
Det rigtige grafikprogram
Nå ja, alle har deres præferencer, når det kommer til hvilken software de foretrækker at bruge. Dette gælder også for grafikprogrammer. I forbindelse med professionelt webdesign ser det dog lidt anderledes ud. Der bliver næsten udelukkende arbejdet med Photoshop. Faktisk foreligger de fleste designudkast som en PSD-fil. Og netop dette PSD-format kan ikke åbnes eller redigeres i alle programmer.
Hvis man ikke har Photoshop, er man dog ikke helt på herrens mark. Et muligt alternativ er GIMP. I kan downloade programmet gratis fra siden http://www.gimp.org/. Jeg vil vise jer de grundlæggende trin til at oprette et layout ved hjælp af GIMP. Det fungerer på en lignende måde i Photoshop.
Opret dit eget layout
Først og fremmest skal I tænke over de grundlæggende designaspekter:
• Hvor bredt skal layoutet være?
• Hvor mange spalter skal det indeholde?
Opret derefter arbejdsområdet via Fil>Ny og angiv størrelsen. Selvom det layout, jeg opretter, vil være "fuldskærms", vil den faktiske indholdsbredde kun være 1000 pixels. Jeg indstiller en layoutshøjde på 887 pixels. (Hvorimod websidens højde senere vil følge indholdet alligevel).
Tryk OK for at bekræfte oplysningerne. Nu er arbejdsområdet klar og kan fyldes med indhold. (For et bedre overblik arbejder jeg i designet med en grå baggrund. Denne vil senere ikke være synlig på hjemmesiden).
Et helt typisk element, der hører til på hjemmesiden, er logoet, som normalt forefindes som en grafik. For at indsætte det i layoutet, åbner I Fil>Åbn og vælger jeres logo, der skal være i et af formaterne PNG, GIF eller JPEG. Bekræft valget med Åbn. Kopier nu logoet til udklipsholderen ved at trykke Ctrl+C, skift derefter til det egentlige webdesign og tryk der Ctrl+V. Det indsatte logo vil endnu ikke befinde sig på den ønskede placering. Med Flytte-værktøjet kan det dog nemt flyttes til den rigtige position.
Hvis billedet ikke kan flyttes, skal I først aktivere laget. I finder de relevante indstillinger under Vindue>Andockbare dialoger>Lag.
For en bedre opdeling bør I vise hjælpelinjer. Dette gøres ved at klikke med musen på linealen og trække den til den ønskede position, mens I holder den venstre museknap nede.
På denne måde kan I trække så mange hjælpelinjer, som I har brug for, for at justere elementerne på hjemmesiden.
Opret nu endnu et lag. Dette lag skal indeholde den øverste menu.
Som navn kunne I angive Top-menu. Opret laget med OK. Aktiver Rektangle-værktøjet og træk området, hvor navigationen skal indsættes.
I det aktuelle eksempel antages det, at baggrunden på den øverste menu får en farveovergang. Derfor klikker jeg på Farveovergang: Udvalg med en farveovergang (udfyld).
Farveovergangen skal gå fra grå til sort. I kan indstille de relevante farver i farvefelterne. Jeg vælger VG til HG som farveovergangstype, så den går fra forside- til baggrundsfarve. Tryk nu og hold Ctrl-tasten nede og træk en linje fra toppen til bunden i det valgte område. Når I slipper venstre musetast, har området den ønskede farveovergang.
I bund og grund har I nu to muligheder:
• I lader området til navigationen være som det er.
• I indsætter de enkelte menupunkter for at kunne se mere nøjagtigt, hvilke skrifter osv. I bruger i designet. Hvilken af disse to varianter I vælger, er naturligvis op til jer. Hvis I dog f.eks. gerne vil præsentere layoutet for jeres kunder, vil jeg absolut anbefale jer at inkludere menupunkterne. Erfaringen viser nemlig, at mange kunder har svært ved at forestille sig dette.
Begynd med at vælge en schriftart. I GIMP finder I de relevante indstillinger under Vindue>Andockbare dialoger>Skrifter.
I løbet af denne serie er der allerede blevet talt om problematikken med skrifttyper i forbindelse med CSS og HTML. I teorien kan I som webdesigner angive næsten hvilken som helst skrifttype. Men om den rent faktisk findes på besøgendes computer og dermed kan vises, ved I ikke. Derfor er resultaterne – især hvis I bruger meget eksotiske skrifttyper – vanskelige at kontrollere. Jeg vil dog vende tilbage til denne problematik i løbet af serien, når det drejer sig om skrifttyperne på eksempelhjemmesiden. Til det aktuelle layout vælger jeg i hvert fald følgende indstillinger:
• Verdana fed
• 20 pixels
• Hvid skriftfarve
Du kan nu indsætte de enkelte menupunkter på denne måde. Det bedste er at kopiere laget, hvor den første menupunkt er indeholdt, og indsætte det som et nyt lag. Derefter kan du tilpasse teksten på laget. På denne måde oprettes den øverste menu.
Den øverste menu skal have en hover-effekt. Når du holder musen over de enkelte menupunkter, ændres baggrundsfarven. Denne aspect bør naturligvis også visualiseres i designskitserne. For at gøre dette vælger man den ønskede hover-farve og kopierer et af de eksisterende menu-lag. Farven tildeles dette lag. I det aktuelle eksempel antager jeg et blåt farveforløb. Derefter indsættes teksten på menupunktet. På denne måde får man en fornemmelse af, hvordan menuen vil se ud til sidst.
