Den som är bekant med utveckling av webbplatser vet att man vanligtvis inte börjar med HTML-strukturen. Istället tar man fram ett grafiskt program och bygger upp sidans layout där. (Den som arbetar på en byrå får sedan layouten levererad av en grafiker eller kunden). Därefter är uppgiften att bygga sidan från denna layout. Precis det är vad vi nu ska prata om.
I samband med att återskapa layouter kommer ni stöta på termerna slicing och dicing om och om igen. Det betyder egentligen inget annat än att man tar mallen eller designen, skär upp den i sitt grafikprogram och sedan sätter ihop den med hjälp av HTML igen.
Rätt grafiskt program
Ja, alla har sina preferenser när det gäller vilken programvara de helst använder. Så är det naturligtvis även när det gäller grafikprogram. I samband med professionell webbdesign ser det dock lite annorlunda ut. Där används nästan uteslutande Photoshop. Faktum är att de flesta designkoncept finns tillgängliga som PSD-filer. Och just detta PSD-format kan inte öppnas eller redigeras i alla program.
Den som inte har Photoshop är inte helt körd. Ett möjligt alternativ är GIMP. Ni kan ladda ned programmet gratis från sidan http://www.gimp.org/. Jag kommer att visa er de grundläggande stegen för att skapa en layout med hjälp av GIMP. Det fungerar på liknande sätt i Photoshop.
Skapa en egen layout
Först och främst föreställer ni er de grundläggande designaspekterna:
• Hur bred ska layouten vara?
• Hur många kolumner ska den innehålla?
Skapa sedan arbetsytan via Arkiv>Ny och ange storleken. Även om den layout som jag skapar "fyller sidan" kommer den faktiska innehållet att ha en bredd på 1000 pixlar. Jag ställer in höjden på 887 pixlar. (Där höjden på webbplatsen senare kommer att anpassas till innehållet ändå).
Tryck på OK för att bekräfta uppgifterna. Därmed är arbetsyten klar och kan fyllas med innehåll. (För översiktens skull arbetar jag i utkastet med en grå bakgrund. Den kommer inte att synas på webbplatsen senare).
En helt typisk del som hör till webbplatsen är logotypen, som vanligtvis finns som grafik. För att integrera den i layouten, öppnar ni Arkiv>Öppna och väljer er logotyp som bör finnas i ett av formaten PNG, GIF eller JPEG. Bekräfta valet med Öppna. Kopiera nu logotypen till urklipp med Strg+C, gå sedan till den faktiska webbdesignen och tryck på Strg+V. Logotypen kommer inte att befinna sig på rätt plats ännu. Med verktyget Flytta kan den dock enkelt positioneras på rätt plats.
Om bilden inte går att flytta behöver ni först aktivera lagret. De relevanta inställningarna hittar ni under Fönster>Fastdockningsbara dialoger>Lager.
För en bättre uppdelning bör ni visa hjälplinjer. Det gör ni genom att klicka på linjalen med musen och dra den med nedtryckt vänster musknapp till önskad position.
På detta sätt kan ni dra hur många hjälplinjer som helst att justera elementen på webbplatsen efter.
Skapa nu en annan nivå. Denna nivå ska innehålla den övre menyn.
Som namn kan ni ange Top-Menü. Skapa lagret med OK. Välj Rektangulärt urval och dra in området där navigeringen ska infogas.
I det aktuella exemplet antar jag att bakgrunden på den övre menyn får en gradient. Klicka på Gradient: Fyll urval med gradient (fyll).
Gradienten ska gå från grå till svart. De relevanta färgerna kan ställas in via färgfälten. Jag ställer in gradienttypen till vertikal gradient, det vill säga den går från den främre- till bakgrundsfärgen. Håll nu ned Ctrl-tangenten och dra en linje från toppen till botten i det valda området. När vänster musknapp släpps kommer området att ha den önskade gradienten.
Principiellt har ni nu två alternativ:
• Låt området för navigeringen vara som det är.
• Infoga de enskilda menyposterna för att mer exakt kunna se vilka teckensnitt osv. ni använder redan i utkastet.
Vilket av dessa alternativ ni väljer beror slutligen på er själva. Om ni dock tänker presentera layouten för era kunder rekommenderar jag starkt att inkludera menyposterna. Många kunder har nämligen bristande fantasi här enligt erfarenhet. Först bör ni välja en teckensnitt. I GIMP hittar ni de relevanta inställningarna under Fönster>Fastdockningsbara dialoger>Teckensnitt.
Under serien har problematiken med teckensnitt diskuterats i samband med CSS och HTML. I grunden kan ni som webbdesigner teoretiskt sett ange vilket som helst teckensnitt. Men huruvida det faktiskt finns på webbplatsbesökarnas datorer och kan visas vet ni inte. Därför är resultaten – särskilt om ni använder väldigt exotiska teckensnitt – svåra att kontrollera. Jag kommer dock att återkomma till detta ämne under seriens gång när det gäller teckensnitten på exempelwebbplatsen. För den aktuella layouten väljer jag i vilket fall följande inställningar:
• Verdana bold
• 20 pixlar
• Vit textfärg
Ni kan nu lägga till de enskilda menypunkterna på detta sätt. Det bästa är att göra en kopia av nivån där den första menypunkten finns och lägga till den som en ny nivå. Ni kan sedan anpassa texten på nivån. På detta sätt skapar ni den övre menyn.
Den övre menyn ska få en hover-effekt. När man för muspekaren över de enskilda menypunkterna ändras deras bakgrundsfärg. Denna aspekt bör förstås också visualiseras i utkastet. För att göra detta ställer man in den önskade hover-färgen och kopierar en av de befintliga menyerna. Sedan tilldelar man denna färg till nivån. I det aktuella exemplet antar jag att det är en blå färgpalett. Därefter lägger man till texten för menypunkten. På så sätt får man en känsla för hur menyn kommer att se ut i slutändan.
