Den nuværende status for layoutet skal se omtrent sådan ud:
Indtil videre er der blevet tilføjet et logo og øverste menu. Nu går vi videre med et lidt større billede, som skal vises direkte under navigationen.
Princippet med at oprette nye lag blev allerede beskrevet i den forrige vejledning. Derfor vil jeg gerne vise jer noget andet her. Lige under øverste menu skal der vises et større billede. Resultatet vil se sådan ud:
Når I indsætter billedet, skal det have de korrekte mål. Rediger det eventuelt først. Kald derefter Fil>Åbn og vælg billedet. Det valgte billede vises derefter i et nyt vindue. Tryk på Ctrl+C for at kopiere billedet til udklipsholderen. For at indsætte billedet som et lag med den korrekte størrelse, skal I derefter kalde Rediger>Indsæt som>Nyt lag. Det nye lag vil automatisk have dimensionerne for billedet, og I kan let flytte laget til den rigtige position. På denne måde kan I nu indsætte alle de billeder, I vil have, i layoutet og placere dem der.
Derefter skal I indsætte teksterne på de steder, hvor de faktisk skal vises senere. I designfasen bruger man normalt såkaldt blindtekst til dette.
Før I sætter jer ned og begynder at skrive vildt "test, test, test", vil jeg anbefale jer at besøge siden http://www.blindtextgenerator.de/.
Her kan I automatisk generere forskellige typer blindtekst. Teksterne kan derefter let kopieres og indsættes i designet ved hjælp af Kopiér & indsæt. I den forbindelse vil jeg også anbefale jer siden http://dummyimage.com/. På denne side kan I generere dummybilleder i enhver størrelse. Disse dummybilleder kan I f.eks. anvende som pladsholdere for endnu ikke oprettede originale grafikker i jeres layout.
Problemet med gennemsigtige lag
Når I indsætter tekster, vil de bestå af flere elementer som overskrifter, tekstafsnit osv. Derfor bør I gruppere tilhørende tekster i separate lag. På den måde kan I også flytte disse tekster samlet. Kald Lag>Nyt lag for dette formål. Tildel laget derefter den ønskede størrelse og evt. baggrundsfarve. I de fleste tilfælde vil I dog sandsynligvis have brug for en gennemsigtig baggrund. Problemet er imidlertid, at det kan være vanskeligt at flytte de gennemsigtige lag. Ofte vælger man nemlig et underordnet lag ved en fejl. Dette problem kan dog let undgås. Det afgørende er indstillingerne i værktøjskassen. Aktivér Flytte-værktøj deri. I det nederste vinduesområde aktiverer I derefter muligheden Flyt aktivt lag.
Skære elementer ud
Når I er tilfredse med layoutet, kommer det praktiske at omsætte det til en HTML-webside. På dette tidspunkt kommer slicing, dvs. at skære ud, på banen. Dette slicing er intet andet end at opdele layoutet i dele, som senere samles igen ved hjælp af HTML og CSS. I skal skære ud alle de elementer, som senere skal vises separat. Undtaget herfra er naturligvis alle billedlementer, som alligevel findes separat. Jeg vil gerne vise jer, hvordan I kan skære elementer ud. Tegn hjælpelinjer rundt om det pågældende element. Hjælpelinjerne udgør til sidst skærekanten. Sørg derfor for at placere dem korrekt.
Marker nu det ønskede område og tryk på tastekombinationen Ctrl+Shift+C (Dette gælder i øvrigt både for GIMP og Photoshop). Opret derefter en ny fil. I Photoshop vil denne straks have den rigtige størrelse. Med GIMP fungerer det desværre ikke så enkelt. Her opretter I blot en fil med passende dimensioner. Brug Ctrl+V til at indsætte indholdet fra udklipsholderen.
Nu kommer værktøjet Skær på banen. Definér det område, der skal skæres ud, og tryk derefter på Retur-tasten. Billedet skæres derefter til det ønskede område. Via Fil>Gem som kan I gemme billedet. Et vigtigt stilistisk element for mange hjemmesider er en farveovergang. Også på layoutet vist her er der en sådan farveovergang til stede. For at skære en farveovergang skal I vælge et smalt område af den tilsvarende overgang. Det er faktisk tilstrækkeligt at vælge et område med en bredde på en pixel. Højden skal derimod svare til elementets faktiske højde. Med CSS kan I senere sikre, at dette grafik vandret gentages, indtil hele elementet er fyldt ud. Selvfølgelig kunne I også bruge en bredere billedudskæring. Dette ville dog mindske ydeevnen på siden. Vælg derfor en bredde på en pixel til farveovergange.
Ved at kopiere det en pixel brede grafik med Ctrl+Shift+C og indsætte den som et nyt billede kan I efterfølgende gemme det nye billede, når det er bragt på det relevante udsnit.
