Den nuvarnade ståndet på layouten bör se ut något så här:
Hittills har en logotyp och den övre menyn lagts in. Fortsättningen innefattar en något större grafik som ska visas direkt under navigeringen.
Principen för att skapa nya lager beskrevs redan i den föregående handledningen. Därför vill jag visa er något annat här. Direkt under den övre menyn ska en större bild visas. Resultatet kommer se ut på följande sätt:
Bilden bör - när ni lägger in den - ha rätt dimensioner. Bearbeta den nödvändigtvis innan. Öppna sedan Fil>Öppna och välj bilden. Den valda bilden kommer sedan att visas i ett nytt fönster. Tryck på Ctrl+C, för att kopiera bilden till urklipp. För att kunna lägga till bilden som ett lager direkt, vilket också har rätt storlek, öppnar ni Redigera>Klistra in som>Nytt lager. Det nya lagret kommer automatiskt ha dimensionerna av bilden och ni kan sedan enkelt flytta lagret till rätt plats. På detta sätt kan alla bilder ni vill lägga till integreras i layouten och placeras där.
Lägg sedan in texterna på de platser där de faktiskt kommer att synas senare. Under designfasen används normalt sett så kallad blindtext för detta.
Innan ni sätter er ner och skriver vilt "test, test, test", rekommenderar jag er att besöka sidan http://www.blindtextgenerator.de/.
Där kan ni automatiskt generera olika typer av blindtext. Texterna kan sedan enkelt kopieras och klistras in i designutkastet. I detta sammanhang rekommenderas också sidan http://dummyimage.com/. På denna sida kan dummybilder genereras i valfri storlek. Dessa dummybilder kan ni sedan exempelvis använda som platshållare för grafik som ännu inte skapats i era layouter.
Problemet med genomskinliga lager
När ni lägger in texter kommer dessa att bestå av flera element som rubriker, textstycken osv. Därför bör ni samla sammanhörande texter i separata lager. På så vis kan ni alltid flytta dessa texter som en helhet. Öppna Lager>Nytt lager för detta ändamål. Tilldela sedan lagret önskad storlek och eventuellt bakgrundsfärg. Vanligtvis behöver ni dock ställa in/bruka en genomskinlig bakgrund. Problemet är emellertid att det då blir svårt att flytta de genomskinliga lagren. Ofta råkar man nämligen flytta ett underordnat lager. Detta problem kan enkelt undvikas. Avgörande för detta är inställningarna i fönstret Verktygslådan. Aktivera Flytta-verktyget där. I det nedre fönsterområdet aktiverar ni sedan alternativet Flytta aktivt lager.
På så vis kan ni också flytta genomskinliga lager till vilken som helst position.
Urskilja element
När ni är nöjda med layouten är det dags att praktiskt genomföra den som en HTML-webbplats. Vid denna punkt kommer Skivmodellering, det vill säga urskiljning, in i bilden. Denna urskiljning innebär inget annat än att dela upp layouten i enskilda delar som senare sätts samman med hjälp av HTML och CSS. Ni måste urskilja alla element som ska visas enskilt senare. Undantagna är förstås alla bildkomponenter som redan är separata. Jag vill först visa er hur ni kan urskilja element. Rita hjälplinjer runt det aktuella elementet. Hjälplinjerna utgör slutligen skärkanten. Se därför till att placera dem rätt.
Markera nu det önskade området och tryck på tangentkombinationen Ctrl+Skift+C. (Det fungerar för övrigt både för GIMP och för Photoshop). Skapa sedan en ny fil. I Photoshop kommer den genast ha rätt storlek. I GIMP fungerar det tyvärr inte lika enkelt. Här skapar ni helt enkelt en fil med tillräckliga dimensioner. Med Ctrl+V klistrar ni in innehållet från urklippet.
Nu kommer Urskiljningsverktyget in i bilden. Ange det avsedda området att urskilja och tryck sedan på Retur-tangenten. Bilden kommer då att urskiljas till det önskade området. Via Fil>Spara som kan ni spara bilden.
Ett viktigt stilistiskt element för många webbplatser är en Gradient, eller färgförlopp. Även på det här visade layoutexemplet finns en sådan gradient. För att urskilja en gradient väljer ni en smal del av det aktuella färgförloppet. Det räcker faktiskt om ni ställer in en del med en bredd på en pixel. Höjden måste däremot motsvara elementets faktiska höjd. Med CSS kan ni sedan se till att denna grafik upprepas horisontellt tills hela elementet är fyllt. Självklart kan ni också använda en bredare bildavsnitt. Men det skulle minska sidans prestanda. Välj därför en pixel som bredd för färgförlopp.
Genom att trycka Ctrl+Skift+C kopierar ni den enpixelbreda grafiken till urklipp och infogar den sedan som en ny bild. Spara därefter den nya bilden, efter att den har justerats till det relevanta avsnittet.
Med detta bör det grundläggande principen för urskiljning vara tydlig. Ni urskiljer således alla objekt från layouten som senare ska ingå på webbplatsen. Om ni redan har enskilda sidoelement tillgängliga som inte behöver urskiljas, tar ni dessa direkt, alltså utan att behöva urskiljningsvägen.
Resultatet bör nu se ut som följande: Ni har alla grafiker tillgängliga som ni senare vill använda på webbplatsen. Det inkluderar till exempel logotypen, bakgrunder, gradienter osv. När vi ändå pratar om gradienter: Jag är naturligtvis medveten om att gradienter enkelt kan skapas med CSS3. Problemet är dock att det ännu inte stöds av alla webbläsare. Och eftersom urskiljning också enkelt kan visas med hjälp av en gradient, har jag i denna handledning valt att använda en bild för genomförandet av gradienter.
