Grafisk Workflow STILHISTORIE. Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet:

Transkript

1 STILHISTORIE Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet:

2 Opgaven I forbindelse med et tema omhandlende stilhistorie skulle jeg lave et website. Websitet skulle indeholde en indexside og min. 2 underliggende sider med informationer om min. 3 forskellige stilperioder, og dertilhørende billeder. Derudover skulle der vises, at siden kan udvides senere. Programmer Word (tekstredigering) Photoshop (layout, billedredigerning, slicing) Illustrator (skelet og flowchart) Juicebox (billedgalleri) Dreamweaver (opbygning af sitet) Process Brainstorm Skitser (håndtegnede skitser) Layout (lavet i ét dokument i Ps, i forskellige mapper, så jeg hurtigt kunne skifte fra at se den ene side til den anden) Billedoptimering Slicing (jeg brugte slice tool til at slice de 3 forskellige header-billeder, som jeg skulle bruge på sitet. Jeg gemte dem som jpeg, da de skulle være god kvalitet. Jeg slicede også alle de små bokse på forsiden, både billedet selv, og billledet med tekst over, som skulle bruges som hover effekt) Flowchart Skelet Storyboard (jeg skrev betingelserne ned for de forskellige tag s, f.eks. H1,p og a, som jeg umiddelbart regnede med, at de skulle se ud i det endelig design. Dog med ret til ændring, da man hurtigt kan komme på andre tanker når man kommer ind i dreamweaver) Opbygning af site (da skelet, slicing og storyboard var på plads, gik det meget hurtigt med at få sat sitet op) Billedgallerier (Juicebox) Browserkompalitet Opload Komposition Sitet måler 800x582, hvilket kan ses på langt de fleste skærme, uden at skulle benytte sig af scroll. Jeg endte med 13 underliggende sider. Alle de underliggende sider ligner hinanden, derfor har jeg valgt at opbygge sitet ved hjælp af templates. Navigation baren til venstre gør det let at finde rundt, og der er plads til at udvide sitet med flere sider, hvilket jeg har vist med døde links. Mine billegallerier har jeg lavet i et program der hedder Juicebox, hvor man sætter galleriet ind i en iframe i Dreamweaver. Brugervenlighed Siden er let at benytte og navigere rundt i. Når du kommer ind på index siden, så vælger du den stilperiode du er interesseret i at vide mere om, du klikker, og bliver navigeret videre til information om den pågældende stilperiode. Hvis du vil vide mere, om emnet, så som arkitektur i perioden, så er der link i toppen, som du kan klikke videre på. Og hvis man vil se billeder, er der et link i bunden, som fører dig til billedgalleriet. Browserkompatibilitet Sitet fungere som det skal i både, Google Chrome, Morzilla Firefox og Internet Explorer. Explorer har det dog med at sætte border på boksene, så jeg var inde i mine css-regler og skrive, at der ikke skulle være border på nogle af mine bokse, hvilket løste problemet. Kvalitetsvurdering Jeg synes sitet fungerer rigtig godt. Det er let og overskueligt at finde rundt i.

3 1. Layout Lavet i ét dokument med en enkel og overskuelig mappestruktur 2. Slicing af billeder

4 3. Skelet Indexside Template wrapper 800 x 580 wrapper 560x500 logo 160x x x x40 20 content 600x400 Alle mål er i pixel

5 4. Flowchart Index Rokoko Funktionalisme Pop Art Stilperiode... Stilperiode... Arkitektur Arkitektur Døde links Møbler Beklædning Billedgalleri Brugsgenstande Billedgalleri Brugsgenstande Billedgalleri

6 Grafisk Workflow 5. Browserkompatibilitet

7 6. Oplaod Forbindelse til serveren

8 7. CSS-betingelser Template sider * { body { margin: 0px; padding: 0px; background-color: #434343; font-family: Tahoma, Geneva, ans-serif; #wrapper { height: 580px; width: 800px; margin-top: 50px; margin-right: auto; margin-left: auto; #logo { margin-right: 40px; margin-bottom: 0px; border: none; #headimage { width: 600px; margin-bottom: 40px; #navigation { height: 400px; margin-right: 40px; margin-left: 0px;.nav_space { margin-bottom: 20px; background-color: #cf5120; height: 26px; text-align: right; padding-right: 0px; padding-top: 14px; #content { background-color: #ffebd3; height: 400px; width: 600px; a { a:hover {.white { font-size: 15px; font-weight: bold; color: #434343; padding-right: 10px; padding-top: 0px; text-decoration: none; color: #FFEBD3; color: #FFEBD3;.smallfont { font-size: 13px; #topics { #text { height: 10px; width: 400px; margin-top: 20px; margin-left: 50px; height: 280px; width: 450px; margin-left: 50px; margin-top: 30px; #gallerylink { height: 20px; width: 300px; margin-top: 20px; margin-left: 50px; #content #topics a { font-family: Tahoma, Geneva, sans-serif; font-size: 10px; font-weight: normal; color: #CF5120; padding-right: 40px; #content #topics a:hover { text-decoration: underline; p { h1 { font-size: 12px; color: #434343; line-height: 15px; padding-bottom: 16px; font-size: 18px; font-weight: bold; color: #434343; line-height: 21px; padding-bottom: 16px; #gallerylink a { font-family: Tahoma, Geneva, sans-serif; font-size: 11px; font-weight: bold; color: #CF5120;

9 7. CSS-betingelser Indexside * { body { margin: 0px; padding: 0px; background-color: #434343; #wrapper { height: 500px; width: 560px; margin-top: 50px; margin-right: auto; margin-left: auto; #logo { lay out_03.jpg); #box1 { #box2 { #x { background-color: #cf5120; tumb_06.jpg); float: none; #x:hover { opacity: 0.7; rokoko_06.jpg); #box3 { #box4 { #x2 { background-color: #cf5120 tumb_12.jpg); float: none; #x2:hover { tumb_12.png); opacity: 0.7; #box5 { #box6 { background-color: #cf5120 #x3 { tumb_16.jpg); float: none; #x3:hover { opacity: 0.7; tumb_16.png); #box7 { #box8 { background-color: #cf5120 background-color: #cf5120.marginright { margin-right: 40px; margin-bottom: 40px;.marginrightonly { margin-right: 40px;