Studieweb 2 Webdesign i CSS 2016KomItC

From rtgkomArkiv
Jump to: navigation, search
<html>
</html>

Formål[edit]

At udbygge og anvende din eksisterende viden om grafisk design, samt blive i stand til at layoute dit studieweb med CSS (Cascading Style Sheet).

Hvad handler det om?[edit]

Du har tidligere oprettet et studieweb alene ved brug af HTML. I dette forløb ser vi nu nærmere på hvordan vi kan designe vores studieweb så det også grafisk tager sig pænt ud. Du skal derfor i dette forløb bruge det du allerede har lært om roughteknik, layout, grafisk design, farvelære m.m., og så bygger vi ovenpå med CSS (cascading style sheet), som du introduceres til, men selv forventes at lege videre med for at mestre.

Standarderne for CSS administreres, på samme måde som HTML, af world wide web consortium (w3c.org). Det er derfor også her du finder den nyeste og mest præcise information om CSS. Andre kilder, såsom w3schools.com kan dog også være gode, hvis du, som de fleste andre, skal lære CSS fra bunden.

Hvad skal du så gøre?[edit]

  1. Start med at tage screenshots af din eksisterende side som den ser ud nu uden nogen form for styling. Gem billederne, og brug dem til at dokumentere forskellen når du er færdig.
  2. Lær at kode CSS! Hvis du kan HTML og CSS i forvejen, gå da videre til pkt. 2 - for jer andre: Brug 1 modul i "sandkassen" (altså uforpligtende eksperimenter), hvor du finder ud af, hvad CSS er for noget og ikke mindst hvordan, man arbejder med det. Din lærer og måske også nogle af dine medstuderende vil formidle vejledning og tutorials (se i øvrigt links nederst). Du kan som begynder følge denne øvelse: Øvelse-KomIT-C-html/css - derudover anbefaler vi følgende tjenester:
    1. CSS tutorial på w3schools.com
    2. CSS tutorial på codeacademy.com
    3. Video der viser alt der er værd at vide om CSS3 (men mindre kan altså også gøre det ;)
  3. Lav et visuelt design d.v.s. find frem til et layout og en farveholdning på dit site (sørg for et design, du også vil kunne kode). Det sker på papir hved hjælp af "roughs". Lav mindst 4 roughs - eventuelt 2 til forside og 2 til undersider. Husk at scanne dine "roughs" til din dokumentation. Til din farveholdning kan du få hjælp på Kuler og Paletton
  4. Implementér dit design:
    1. Du vælger nu de bedste skitser at arbejde videre med. Det er dog vigtigt at du vælger et design som du også tror på du vil kunne kode.
    2. Herefter opretter du de nødvendige divisions tags i dine HTML filer, og linker til dit style sheet (CSS). Det er vigtigt at prøve sig frem, og du kan ikke forvente at alt ser rigtigt ud fra start. Husk derfor også at tage screenshots som du parrer med din kode undervejs, så du kan dokumentere processen.
    3. Din CSS skal laves i en særskilt CSS fil (og altså ikke "in-line"). På denne måde kan du nemt oprette og rette dit design på flere sider.
  5. Opload dit StudieWeb! Upload gerne løbene, men husk også at tage screenshots undervejs.
  6. Tilføj dokumentation af processen til dit site!

skabeloner:[edit]

Hvis du af en eller anden grund finder det meget svært at kode dig frem til noget, der fungerer, kan du læne dig op af en skabelon. Her er et par alternativer - husk at gøre dem dit eget:

Aflevering[edit]

Dit StudieWeb skal være designet, kodet, dokumenteret og oploadet på webserveren . Husk dokumentationen af webdesign forløbet.

På Lectio afleveres et tekstdokument med adressen til dit studieweb.

Deadline fremgår af Lectio.

Links og litteratur[edit]