DREAMWEAVER CS5 DESign & Ko D ning A f WEbSiDE

sharkreklame.dk

DREAMWEAVER CS5 DESign & Ko D ning A f WEbSiDE

grafisk

PrODUkTiON

Og

WOrkfLOW

CSS 3

Html5

Java script

Wrapper

paragraph

h1

h2

a.link, a.hover,

Class

Tags

Kodning

DREAMWEAVER CS5

DESign & KoDning

Af WEbSiDE

Design

brainstorm, skitser

layout i PSD

Kundekontakt

Skellet

flowchart

Komposition

Modulopbygning

Usabillity

Arbejdsproces


grafisk produktion & workflow - redegørelse

75

Opgaven

Ideudvikling, design samt kodning af fiktiv hjemmeside til fiktivt

skrædderfirma: Cindarella - som har specialiseret sig udelukkende

i at design og sy kjoler.

virksOmhedens dna

Cindarella er et lille skrædderi med fagligt dygtige, kreative og

innovative medarbejder der udelukkende designer og syr kjoler.

Kunden kan få sin helt egen unikke kjole om det så er til hverdag

eller fest.

Hos Cindarella sælger de ikke kun kjoler - de sælger prinsesse

drømmen!

prOgramvalg -

dreamveaver Cs5

Layoutet/designet er opsat i Photoshop med korrekte mål.

For at vise mine kompetencer inden for html/html5 kodning

samt CSS/CSS3 har jeg valgt at kode hjemmesiden i Dreamweaver

- og da det er en fiktiv opgave spiller det ingen rolle at

„kunden“ ikke selv kan vedligeholde sitet.

Havde denne være en „rigtig“ opgave havde hjemmesiden

været kodet i CMS programmet Joomla, som vi arbejder med

hos Shark, så kunden selv ville kunne vedligeholde sitet, efter

undervisning hos os.

Jeg ville derfor kun have lavet ideudviklingen, designet/layoutet

i Photoshop samt beskrevet funktionerne.

Disse filer var blevet sendt til vores webprogrammør, som så ville

stå for kodningen af templaten til sitet i Joomla.

Efterfølgende ville jeg få et link til en testadresse hvorpå det

kodet site lå og derefter begynde at indholdsudfylde det med

tekst, billeder og måske rette lidt til i CSS’en - hvis farver, fonte

osv. ikke er helt korrekte.

kundekOntakt.

I den virkelige verden havde Shark henvendt sig til kunden eller

også havde kunden selv henvendt sig med opgaven til os.

Derefter ville et møde blive arrangeret, hvor en snak om ønske,

stil, stemning, funktioner osv. til hjemmesiden ville blive afklaret.

Efter mødet ville jeg opsætte layoutet/designet i Photoshop, og

kunden ville derefter komme til et møde, hvor dette ville blive

præsentetet og diskuteret. Hvis der er ændringer til layoutet

ville disse kunne blive tilføjet herefter og kunden vil få tilsendt

det tilrettede layout på mail, hvorefter layoutet bliver godkendt.

ideudvikling

Brainstorm, tanker og ideer samt håndtegnet skitser kan ses på

side 78.

FlOwChart

Dette laves i online programmet Mindmister. Flowchartet kan

ses på side 80

skelet

Skeletterne har jeg brugt som en guide til min kodningen i

dreamweaver - og er derfor ikke blevet 100% som det færdige

resultat. Det er nogle steder ændret på mål, farver og fonte.

Skeletter til hjemmesiden kan ses på side 81.

layOut

Designet/layoutet af hjemmesiden lavet i Photoshop kan ses på

side 84-89.

kOmpOsitiOn Og

mOdulOpbygning

Hjemmesidens layout er opbygget af moduler - moduler som er

tænkt til, at skulle kunne til og fravælges alt efter kundens eget

ønske og behov.

Modulerne gør det dels let for designeren at opsætte, det giver

brugeren en overskuelighed på sitet og tilføjer websitet en god

ballance. (Modulerne er placeret efter deres vigtighed - den

vigtigste er i toppen.)

Se beskrivelsen af modulopbygningen og kompositionen over

hele hjemmeside på side 90-94

valg aF Farver Og FOnte

Kan ses på side 81-82

aktualitet FOr indhOldet

Siden er bygget således op, at det vigtigste er at finde i toppen

og det „mindst vigtige“ er at finde i bunden.

Kunden skal ved første øjekast kunne se logo, menu og det store

slideshow - så de med det samme kan afkode hvem afsenderen

er og hvad denne hjemmeside indeholder og sælger.

Billederne er en stor og vigtig del at sitet, da disse skal tale for

sig selv og sælge produktet udelukkende på den visuelle del.

De skal skabe blikfang. Endvidere er billederne med til at skabe

associationen om drømmen om den perfekte skræddersyet kjole.

usability

Da der i koden til hjemmesiden er gjort brug af html5 kodning

samt CSS3 - har jeg udelukkende koncentreret mig om at

hjemmesiden skal fungere i Google Crome - som der også er

gjort opmærksom på, på sitet.

Men hjemmesiden fungerer også i firefox, safari og explorer

pga. mit scriptet (se side 95). Dog kan der være enkle mangler i

disse browsere.

kvalitetsvurdering

I denne opgave er jeg stødt på mange komplikationer og nogle

er blevet løst på alternative måder.

Jeg har, som det kan ses i min kode, forsøgt at løse mine problemer

på forskelige måder - hvor jeg måske burde have brugt

samme metode - eksempelvis til placering af de blå overskriftbokses

overskrift.

Baggrunden for de forskellige løsninger var enten en nødvendighed

eller for at prøve noget nyt.

Der hvor jeg havde størst problemer, var på gallerisiderne.

Problemet bestod i at få den blå overskriftboks foran billederne,

løsningen på dette kan ses på side 97.

Formularen på kontaktside gav mig også problemer da jeg ikke

kunne få denne til at virke når man trykkede send, men efter

mange forsøg lykkes det.

Min plan var at indsætte en CSS reset fra meyerweb.com men

da denne forstydede min egen kode og min CSS undlod jeg at

bruge denne.

Jeg er meget tilfreds med designet/layoutet på hjemmesiden,

det er meget unikt og anderledes og lever op til de krav jeg har

haft fra starten. Kunden/brugeren bliver inspireret på hver side

af de mange billeder og har rig mulighed for at tilgå alle sider

på sitet utroligt let.

Sitet bærer præg af troværdighed, kvalitet, godt håndværk,

perfektionisme, professionalisme og ikke mindst kreativitet.

Dog kunne jeg godt have kodet hjemmesiden mere overskueligt

- jeg ville gerne have brugt færre divtags og classes og defineret

mine h1, h2, h3 osv. bedre samt have brugt flere html 5 tags (se

side 98)

Men sitet kører som det skal og jeg er alt i alt tilfreds med

resultatet.

se hjemmesiden live på:

http://www.sharkreklame.dk/charlotte/cindarella/index.html


grafisk produktion & workflow - færdig hjemmeside på mac

76


grafisk produktion & workflow - arbejdsprocessen

77

brieFing aF Opgave

Hvis dette ikke havde været en fiktiv opgave, var opgaven startet med at Shark havde

henvendt sig til kunden eller at kunden selv henvendt sig med opgaven til os.

Jeg var efterfølgende blevet briefet på opgaven. Hvem er kunden ? Hvad laver de ?

Hvad er opgaven ?

møde med kunden

Derefter ville et møde blive arrangeret, hvor en snak om ønske, stil, stemning, funktioner

osv. til hjemmesiden ville blive afklaret.

brainstOrm, tanker Og ideer

Stikord/nøgleord fra kundemødet + mine egne tanker og ideer skrives ned.

Inspiration søges på nettet

se side 78

skitser i hånden tegnes

Forskellige skitser ud fra brainstorm laves.

Jeg havde dog allerede en idé i hovedet, som jeg længe har ville afprøve - når den rigtige

opgave kom.

se side 79

FlOwChart laves

se side 80

Farver Og FOnte vælges

se side 81 -82

skellet laves

Skellet af forside laves, af kontakt siden samt siden „om os“ - så har jeg de grundlæggende

mål som jeg kan arbejde ud fra samt lave en „skabelon“ ud fra - så kodningen af sitet bliver

lige til at gå til - målene til gallerisiderne tages fra Photoshop

se print aF skeletter på side 83

layOut aF hjemmeside Opsættes

Layout af forside samt undersider opsættes i Photoshop - med de korrekte mål.

se side 84-89

layOut vises til kunden

Kunden ville blive kaldt til et møde hos Shark hvor layoutet af hjemmesiden ville blive

præsenteret og diskuteret. Ved eventuelle ændringer til layoutet ville disse kunne

blive tilføjet herefter.

gOdkendelse Fra kunden

Kunden vil få tilsendt det tilrettede layout på mail, hvorefter layoutet bliver godkendt og

er derefter klar til kodningen.

kOdning aF sitet

Da dette er en fiktiv opgave, kodes sitet i Dreamweaver, for at vise mine kompetencer og

kvalifikationer inden for HTML/HTML5 CSS og CSS3

se eksempler på side 96-99

tjek i diverse brOwsere

Da der i koden til hjemmesiden er gjort brug af html5 kodning samt CSS3 - har jeg udeluk

kende koncentreret mig om at hjemmesiden skal fungere i Google Crome - som der også

er gjort opmærksom på, på sitet. Men hjemmesiden fungerer også i firefox, safari

og explorer pga. mit scriptet (se side 95). Dog kan der være enkle mangler i disse browsere.

uplOad aF sitet til nettet

Normalt ville sitet uploades på FTP-serveren hos kundens udbyder og tilkobles deres

domaine.

I dettte tilfælde bliver hjemmesiden uploadet på Sharks FTP-server så den kan ses live.

aFlevering til kunden


grafisk produktion & workflow - brainstorm, tanker og ideer

VEDLAGT

I FYSISK

PORTFOLIE

78


grafisk produktion & workflow - layout skitser

79

VEDLAGT

I FYSISK

PORTFOLIE


grafisk produktion & workflow - flowchart

galleri & reFerenCer

kOrte kjOler

lange kjOler

aFtenkjOler

gallakjOler

vOres

samarbejdspartner

index.html

Om Cindarella kOntakt Os

80


grafisk design produktion - & workflow - valgte farver

81

valgte Farver

Brugen af farver er bevist minimeret for at skabe et ret og tydeligt udtryk.

Billederne på websitet skal være fokus og ikke forstyres at en masse farver i grafikken.

Ideen var at bruge ’en pagn farve og 3 neutrale farver

tyrkis

#63b1db

sOrt

#000000

kOks grå

#262626

hvid

#ffffff

den tyrkis Farve symbOliserer:

Farven turkis hjælper med at åbne kommunikationsvejene.

Farven er venlig, glad, forfriskende, opløftende, kreativ og munter,

samtidig med at den er stærk og selvstændig.

Tyrkis er valgt til de elementer der skal skabe blikfang og skilde sig

ud fra mængden som overskriftboksene og bokse med tekst

den sOrte Farve symbOliserer:

Styrke, elegance, troværdighed, prestige, sofistikation, glamour,

sikkerhed, stilfuld. følelsesmæssig tryghed, og effektivitet. stærk

gennemslagskraft.

Sort er valgt til topmenu og fatfooter

den sOrte Farve symbOliserer:

Balance, elegance, renhed, fritstående, neutral, upartisk og ubeslutsom.

Farven er meget solid og stabil og rolig.

Koksgrå er valgt til modulbaggrund samt tekst

den hvide Farve symbOliserer:

Åbenhed, vækst og kreativitet. og skaber en følelse af orden.

Farven anvendes som baggrund på områder med indholdsteksten,

da det skabe god kontrast og læsbarhed til den mørke tekst.

Endvidere anvendes den til tekst på farvede flader (blå og sorte)

igen for at skabe god kontrast og læsbarhed.

andre ”pangFarver”


grafisk produktion & workflow - valgt typografi

// grafisk design -

de almindelige ”sikre” FOnte til web

Arial

Arial Black

Comic Sans MS

Courier

Impact

Times New Roman

Trebuchet

Verdana

Ingen af disse var som jeg ønskede. Ikke specielle eller spændende nok,

derfor er valgte faldet på en google webfont.

valgt FOnt - en gOOgle webFOnts

Mit ønske var en smal, elegant grotesk skrift med et moderne udtryk - derfor faldt valget af typografi på:

Roboto Codensed

H1 overskrift (negativ) 33 px.

H2 overskrift (negativ) 26 px

H3 (Menu/footer ) 14 px

H4 (overskrift) 26 px

H5 (negativ) 18 px

H6 (info tekst) 11px

Brødtekst 13 px

.darkgray #262626

.blue #63b1db

.white #ffffff

.bold

.italic

82


grafisk produktion & workflow - print af skellet

83

VEDLAGT

I FYSISK

PORTFOLIE


grafisk produktion & workflow - valgt layout opsat i psd

84


grafisk produktion & workflow - valgt layout opsat i psd

85


grafisk produktion & workflow - valgt layout opsat i psd

86


grafisk produktion & workflow - valgt layout opsat i psd

87


grafisk produktion & workflow - valgt layout opsat i psd

88


grafisk produktion & workflow - valgt layout opsat i psd

89


grafisk produktion & workflow - komposition & modulopbygning

logo

Placeret i toppen af venstre hjørne.

Dette skaber god balance og

harmoni, da øjet, når man kigger på

en hjemmeside, læser i en z-form

- altså fra øverst venstre hjørne og

med slut i nederst højre hjørne.

Derfor skal tyngden som udgangspunkt

ligge i venstre side for at skabe

god harmoni og balance.

Af samme grund er overskrifterne

fremhævet i blå bokse.

galleri & referencer

Modul med mulighed for at gå

direkte til den kategori man ønsker

at se billeder fra - opfordrer brugeren/kunden

til at få inspiration og

skaber forhåbentlig et behov for at

købe en skræddersyet kjole

seneste design

Modul med de seneste 3 kjoler der

er designet - dette modul viser

kunden/brugeren aktiviteten i

virksomheden

Fat footer

Modul der indeholder:

Menupunkter over hele websitet så

det altid er let tilgængeligt at tilgå

præcis den side man ønsker.

Boks med virksomhedens vision

Logo, copyright samt info om

browservalg

hovedmenu

Horisontal hovedmenu, placeret i

toppen - højt og synligt på siden.

Dette gør siden overskuelig og let for

brugeren at navigere rundt på.

teasertekst

Som lokker kunden med en

drømmekjole på kun 10 dag

slideshow

Da billederne er en stor og vigtig del

at sitet, og disse skal tale for sig selv

og sælge produktet udelukkende på

den visuelle del. - er en af de første

ting man ser på sitet det store

slideshow - som skaber et godt

blikfang.

samarbejdspartner modul

Modul der oplyser om der

samarbejdes med Lilly Brudekjoler.

Dette er med til at skabe en

eksklusivitet af virksomhed og

samtidig vise der er kvalitet i

Cindarellas arbejde.

Call-to-action modul

Modul med kontaktinformationer

som opfordre brugern til at tage

kontakt til Cindarella

90


grafisk produktion & workflow - komposition & modulopbygning

91

indholdsfelt

Stort indholdsfelt med den

genkendelige blå overskriftbox, samt

stort billede og tekst under billedet.

Indholdsfeltet kan altid kendes da

dette har hvid baggrund, for at skille

sig ud og for at skabe godt kontrast

til den mørkegrå tekst

„højre menu“

Vertikal menu med mulighed for at

vælge mellem de 4 kjolekategorier.

Denne skaber hurtig navigation for

brugeren/kunden

De resterende moduler ligger stadig

på siden, nu under indholdsfeltet,

for på den måde, at skabe så mange

indgangsvinkler til de forskellige ting

på sitet, for brugeren/kunden, som

muligt.


grafisk produktion & workflow - komposition & modulopbygning

indholdsfelt med galleri

Galleri med slide funktion og

thumpnails.

De resterende moduler ligger stadig

på siden, nu under indholdsfeltet,

for på den måde, at skabe så mange

indgangsvinkler til de forskellige ting

på sitet, for brugeren/kunden, som

muligt.

92


grafisk produktion & workflow - komposition & modulopbygning

* Siden „Vores samarbejdspartner“

og siden „Om os“ er bygget op på

samme måde.

93

„højre modul“

Vertikal modul med:

Citater fra kunder, disse skaber en

trykhed for den nye potentielle

kunder, og samtidig giver det et

kvalitetsstempel til virksomheden

og derfor vil nye potentielle kunder

være mere tilbøjelige til at købe

De resterende moduler ligger stadig

på siden, nu under indholdsfeltet,

for på den måde, at skabe så mange

indgangsvinkler til de forskellige ting

på sitet, for brugeren/kunden, som

muligt.


grafisk produktion & workflow - komposition & modulopbygning

googlemaps modul

Modul med Googlemaps som gør

det let og overskueligt for kunden/

brugeren at finde Cindarellas fysiske

butik

indholdsfelt

Indholdsfelt med:

Formular hvor kunden hurtigt og let

kan kontakte virksomheden - dette

ligger op til dialog mellem kunden og

Cindarella

„venstre modul“

Venstre modul med:

Adresse og åbningstider

- let og hurtigt at overskue og

afkode for kunden/brugeren

Link til samarbejdspartner

94


grafisk produktion & workflow - arbejdsprocess i dreamweaver

95

lav en gOd mappestruktur

Som start oprettes diverse mapper så der er styr på hvor billeder, sider osv. ligger

Opret nyt html 5 dOkument

Det er vigtigt det er et html5 dokument der arbejdes i - så de nye tags/scripts og

features kan bruges

manage site

Link til de korrekte mapper

Opret indexside

indsæt Css reset (undladt)

Min plan var at bruge en CSS reset fra http://meyerweb.com/eric/tools/CSS/reset/

men da den forstyrrede min kodning og gjorde at eks. wrapperen ikke ville centeres - blev

den slettet igen..

indsæt sCript

Da det ikke er alle browsere der understøtter Hlml5 og CSS3 endnu, indsættes et script som

får Explorer 8 og browsere derunder, samt Firefox 2, til at læse og forstå de nye tags.

Dog er Goggle Crome stadig den browser hjemmesiden skal ses i.

Jeg bruger dette:


implementering aF gOOgle webFOnt

kOdningen aF sitet kan begynde

Hjemmesiden kodes ud fra mit skellet - skeletterne er kun vejledene og lavet som en guide

- enkelte mål, font str. mm. er blevet ændret undervejs i kodendingen af sitet

hOld Orden

For at holde styr på mine koder, tags java scripts osv. indsættes der kommentarer både i i

koden og i CSS’en

søgeOptimering - seO

Titel, description samt keywords laves til hver side og på alle billederne på hjemmesiden

Oprydning

Tilsidst ryddes der op i koden samt CSS’en - så unødvendig/CSS ikke er medtaget og kan

skabe forvirring.

uplOading aF sitet


grafisk produktion & workflow - arbejdsprocess i dreamweaver

html 5 dOkument Oprettes

Preference > new document - vælg HTML5

indsæt sCript

Da det ikke er alle browsere der understøtter Hlml5 og CSS3 endnu, indsættes et script som får Explorer

8 og browsere

derunder, samt Firefox 2, til at læse og forstå de nye tags.

Jeg bruger dette:


det indsættes i headsektionen

implementering aF gOOgle webFOnts

For at give hjemmesiden et mere unikt look er der implemteret en webfont fra googlewebfonts.com.

Den valgte font er: Roboto Condensed

Den øverste kode er indsat i headsektionen

Den nederste kode anvendes i CSS’en for at definere at denne skal bruges.

Eksempel:

96


grafisk produktion & workflow - arbejdsprocess i dreamweaver

97

minus margin

For at de blå overskriftboxe kommer ud over kanten på modulet,

tilføjes der en minus margin på -12 px i enten højre eller venstre

side

For at få den korrekte placering i toppen tilføjes en margin

på 25 px

Dette gælder for alle de blå bokse

FOrside slider med java

sCript

Trial downloadet fra: www.magictoolbox.com/

Indeholder:

CSS og Java script

CSS’en og Java Scriptet ligger eksternt i Javascript mappen

og linkes til Cindarella

I headsektionen er java scriptet indsat

her linkes der også til CSS’s for slideshowet

I slidemodulet i slideboxen ligger billderne til slideshovet i en

div med classen .MagicSlideshow


grafisk produktion & workflow - arbejdsprocess i dreamweaver

nye html 5 tags Og Css regler

navigationen

Her bruges nu dette tag:


gennemsigtighed

På eks. bokse skrives denne regel i CSS’en

opacity: 0.8;

baggrund i fuld bredde

background-size: cover;

div id=

Her bruges i stedet for

til tekst

omkring billeder

jeg burde også have brugt


istedet for div id=

til højre boksene i højre side på eks. gallerisiderne

og


med forskellige clases istedet for div id=

her skulle så have været placeret inde i.

gOOgle maps

Java Scriptet til GooleMaps som indeholder

længde og breddegrader for placeringen ligger

placeret i head sektionen på siden kontakt.html

Længede nede i kode kaldes GoogleMaps frem

ved at skrive koden

GooleMaps

Denne div er stylet så placeringen af kortet bliver

korrekt

98


grafisk produktion & workflow - arbejdsprocess i dreamweaver

99

galleri slider med java

sCript

samme script som forside slider bruges her

Trial downloadet fra: www.magictoolbox.com/

Indeholder:

CSS og Java script

CSS’en og Java Scriptet ligger eksternt i Javascript mappen

og linkes til Cindarella

I headsektionen er det samme java scrip og

CSS som

forsideslideren anvender

Koden med thumpnails ligger i indholdsdiven

og ser således ud.

Når der skrives titel på billederne, er

JavaScriptet kodet til at vise en sort boks

i bunden af det store sliderbilledet med

teksten

eksempel på titel

plaCering aF billede bag blå

OverskriFt

Den blå overskriftbox tilføjes et højt z-index og position sættes til relative

Css for øverste blå box

På figure tagget - som er omkring billedet - tilføjes et lavere z-index og

position sættes til absolute

Css for øverste billedet


grafisk produktion & workflow - arbejdsprocess i dreamweaver

titel, desCriptiOn Og keywOrds

På alle billederne på hjemmesiden laves titels.

I head sektionen på hver enkel side indskrives titel, description og keywords

for den enkelte side - for at søgeoptimere hjemmesiden bedst muligt.

her vises index.html

kOntaktFOrmular

100

More magazines by this user
Similar magazines