I denna laboration skall du öva dig i programmet Fireworks. Fireworks är ett grafiskt verktyg för att optimera bilder för webben men kan också användas för att lägga till olika effekter som rollover, länkar, menysystem m.m. Fireworks skapar då HTML-kod och Javascript åt dig.
Du ska utifrån bilden car.jpeg och Global.png skapa en html sida så
att resultatet blir detsamma som filen final. Det är
alltså din uppgift att få resultatet all bli så likt som möjligt.
Du ska börja med att skapa bakgrundsbilden med bilen utifrån filen
car.jpeg. När du gjort det fortsätter du att skapa funktioner
till sidan. De funktioner som du kommer att behöva är följande:
- Rollovereffekt
- Navigationsmeny
- ett antal knappar
- en pop-up meny
Steg 1 Öppna ett tomt dokument
Gå till File-new och skapa ett dokument som är 480 x 215 och med
vit bakgrund. Skapa en rektangel med bredden 480 x 215 med transparant fyllning
och 1p kantlinje med färgen #CCCCCC samt en rektangel 480 x 15 och lägg
denna längst ner på sidan. Färglägg den sista rektangeln
med #333366.Importera bilden car.jpg Använd sedan
lassot till att markera bilen i bilden. Kopiera denna och klistra in. Detta
för att kunna fäglägga bakgrunden separat.
mera hjälp
Steg 2 Skapa effekter
Nästa steg är att ändra färgsättningen på bakgrunden
så att den överenstämmer med final.html. Detta gör du med
effekterna Hue/Saturation och Blur. Prova dig fram med inställningarna
tills du kommer så nära originalet som möjligt. Sedan är
det bra att lägga ihop bakgrundsbilden med bilen igen till ett lager. Ändra
även ordningen på lagren så att bilen hamnar längst bak.
mera hjälp
Steg 3 Lägg till en gradient
Nu ska du lägga till en gradient till bilden så att den går
mot vitt på vänstersidan. Detta gör du lättast genom att
skapa en mask och använda gradientverktyget på denna.
mera hjälp
Steg 4 Skriv text och exportera
För att gör bilden klar skall du lägga till och editera
text. Var noga med att få samma typsnitt och färg som originalet.
På vintage behöver du även lägga till en skugga. Exportera
bilden som jpeg när du är klar.
mera hjälp
Steg 5 Öppna arbetsfilerna
Kopiera filen global.png till din laborationsmapp
och öppna den i Fireworks. Importera sedan bilden du gjort och montera
den i det vita fältet på bilden.
Steg 6 Dela upp dokumentet
Du ska nu dela upp dokumentet i 3 st ”slices”. Dels din bild Vintage.jpg,
dels WorldwideAirport.gif och Greatweekendrates.gif bilderna.
mera hjälp
Steg 7 Skapa en ”drag-and-drop rollover”
Skapa rollover effekt mellan bilderna vintage.jpg och GreatWeekend...gif. så
att bilden GreatWeekend.gif byter till Rates.gif när man håller musen
över vintage.jpg.
mera hjälp
Steg 8 Skapa knappar och navigationsbar
Nu är det dags att skapa en navigationsbar (se final.html). Börja
med att skapa fyra knappar med namnen HOME, VEHICLES, RATES, CONTACT_US. Länka
sedan dessa knappar till valfria hemsidor.
mera hjälp
Steg 9 Skapa en pop-up meny
Som du såg i final.html finns en pop-up meny under bilden WorldwideAirports.gif.
Skapa en likadan genom att välja rätt slice och gå till Modify
- pop up meny. Döp dem och länka till valfria sidor. Du ska
även ha en undermeny till ett par av menyvalen.
mera hjälp
Steg 10 Optimera sidan
Innan man exporterar sina bilder till HTML är det viktigt att optimera
dessa, både med avseende till kvalitet som storlek. Öppna opimeringsfönstret
och försök minska storleken på dokumentet utan att man märker
någon kvalitetsförlust.
mera hjälp
Steg 11 Exportera som HTML
Börja med att göra de nödvändiga inställningarna i
HTML Setup innan du exporterar ditt dokument. Titta sedan på mappstrukturen
och filerna som blivit genererade av din export.
mera hjälp
Steg 12 Analysera html filen
Nu ska du titta på den kod som fireworks har genererat. Öppna html
dokumentet i din browser och gå till View Source, eller öppna dokumentet
i en html editor. Analysera koden och försök förstå de
olika delarna.
