Más contenido relacionado
Más de culturelestudies (20)
Hadermann.speetjens.ceulemans.möller.presentatie webstie
- 2. COLOFON
• Eva Hadermann: css en html, integratie
content management
• Eglantine Möller: inhoud
• Joachim Ceulemans: inhoud
• Dries Speetjens: opmaak
- 3. CONCEPT
• muziekgroep uit Leuven
• genre: Jazz en Blues
• aanwezigheid op web:
• MySpace
• Vi.be
• Facebook
• maar geen eigen website
- 4. DOEL
• representatie van de muziekgroep
• tekst (biografieën e.d.)
• beeld (foto en video)
• persinformatie
• muziekvoorstelling
• kalender
•…
- 7. INHOUD
• mediabalk
• muziekspeler (embedded player
• slideshow
• youtube-filmpje
• alle media embedded
• geeft goed beeld van groep
- 8. INHOUD
• homepage
• teaser (beknopte voorstelling)
• nieuwsberichten
• nieuwe concerten
• bio
• ontstaan en parcours
• bandleden
- 9. INHOUD
• kalender
• aankomende concertdata
• voorbije concertdata
• multimedia
• selectie foto’s
• filmpjes
- 10. INHOUD
• pers
• persmap (in rar-formaat)
• verzameling persrecensies
• contact
• algemeen contactformulier
• rechtstreekse contactgegevens
- 11. WIREFRAME
LOGO
• linksboven
• deels buiten
body
- 12. WIREFRAME
HEADER
• foto band
• zwart-wit
• overgang
- 13. WIREFRAME
NAVIGATIE
• 6 buttons
• stijl cd-hoes:
labels
• CSS-sprites
- 14. WIREFRAME
CONTENT
• links
• dynamisch
venster
• gekoppeld aan
Content
Management
System
- 15. WIREFRAME
MEDIA
• rechts
• inhoud
• muziekspeler
• foto
• video
• statisch venster
- 16. WIREFRAME
FOOTER
• auteursrechten
• W3C-validatie
• colofon
• belangrijke links:
• home
• contact
• colofon
- 19. LETTERTYPE
BUTTONS PUNCH
• punch Label LABEL
• free font
• stijl: labels
ABCDEFGHIJ
• opgeslagen als LKMNOPQRST
afbeelding
VWXYZ
- 28. HTML/CSS
• reset.css
• Eric Meyer
• reset standaardinstellingen van browser
• om verschillen tussen browsers te
minimaliseren
- 29. HTML/CSS
• Navigatie: CSS sprites
• 1 grote afbeelding
• verschuift naar correcte stand
• slechts 1 afbeelding in te laden
- 31. HTML/CSS
#nav li.kalender {
background:url("../img/nav.gif") -271px 0px;
width:144px;
}
#nav li.kalender a:hover {
background:url("../img/nav.gif") -271px -55px;
}
- 33. HTML/CSS
#kalender #nav li.kalender {
background:url("../img/nav.gif") -271px -110px;
width:144px;
}
#kalender #nav li.kalender a:hover {
background:url("../img/nav.gif") -271px -165px;
}