Designmanual til FOA.dk. Seneste redigeret: 21. juli 2006/pilo

Transkript

1 Designmanual til FOA.dk Seneste redigeret: 21. juli 2006/pilo

2 Farver Sider på sitet: Afdelinger, FOA Fælles og A kasse sider har samme blå farve, som bruges ved faktabokse, linkbokse mv. FOA Fælles, A kasse og Afdelinger HEX: #014C77 RGB: Farvemæssigt er sitet opbygget således, at hver sektor Social og sundhed Teknik og service Pædagogisk Kost Service er tildelt sin overordnede farve. Disse farver er forbeholdt forbundets sektor sider.

3 Skrifttype og farver Skrifttype Skrifttyperne, der bruges på sitet er Verdana. Skriftfarve Skriftfarven er sort. Skrifterstørrelser fra visuel editor anvendes. ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Verdana (PC) I særlige tilfælde, hvor der skal sættes specielt fokus på en information, kan FOA rød anvendes: Farvekode: HEX: #BC2E36 RGB: Farve til tabeller Lys grå anvendes til tabeller Farvekode: HEX:#e4e7e8 RGB:

4 Tekstformatering For at bevare konsistens på sitet, skal alle tekstafsnit formateres på samme måde. Dette gør det nemmere for brugeren at læse og at navigere på sitet. Brødtekst Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lacinia sem et augue. Praesent ipsum nisl, vestibulum in, consequat quis, varius. Brødtekst: Primær/sekundær font, 11pt., linjeafstand 15, # En overskrift Overskrift: Primær/sekundær font, 14pt., linieafstand 17, bold, # En underoverskrift Underoverskrift: Primær/sekundær font, 12pt., linieafstand 15, bold, # Billedtekst Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lacinia sem et augue. Praesent ipsum nisl, vestibulum in, consequat quis, varius. Billedetekst: Primær/sekundær font, 9pt., linieafstand 12, #000000

5 Tekstformatering fortsat Link i brødtekst: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lacinia sem et augue. Praesent ipsum nisl, vestibulum in, consequat quis, varius. In line link: Primær/sekundær font, 11pt., underline, # Link uden for brødtekst (eks.vis efter et afsnit eller nederst på siden):» Link» Link» Link Bemærk at pilene ikke er understreget. Det er kun teksten. Opremsning: Prikken bruges ved opremsninger hvori der IKKE indgår links. Farven skifter afhængigt af hvor man er på sitet (de fire sektorfarver og den mørk blå for: Fælles, a kasse og afdelinger)

6 Indholdsfelt (CONTENT) Alle afsnitsskabeloner, som bruges i indholdsfelt (ingen højre kolonne valgt) har fået tilnavnet: CONTENT: Samme navn på skabelon som på den gamle hjemmeside, men nu med tilnavnet CONTENT

7 Højre kolonne (Right) Du kan bruge højre kolonne til: Linkboks Faktaoplysninger Billeder m.v. I den visuelle editor skal du i feltet Indholdsområde vælge RightSide_content Skabelonerne gennemgås på de følgende sider.

8 Højre kolonne (Right) Linkboks Opret nyt afsnit. Navngiv afsnittet (for overskuelighedens skyld) RIGHT: eks. linkboks. I den visuelle editor vælges skabelon: RI GHT: FÆLLES Linkboks Mærkaterne i de enkelte celler fortæller, hvad du skal skrive. I øverste celle, hvor du skriver overskrift, skal du markere teksten og vælge farven hvid. I cellen, hvor du skal indsætte pilen, vælger du pil fra værktøjslinien indsæt symbol og vælger pilen. Linkboks i backend Du kan med fordel kopiere pilen til de øvrige pil celler. Skriv herefter din linktekst. Celler, der ikke bruges vil ikke kunne ses i frontend. Det færdige resultat

9 Højre kolonne (Right) Faktaboks Opret nyt afsnit. Navngiv afsnittet (for overskuelighedens skyld) RIGHT: eks. faktaboks I den visuelle editor vælges skabelon: RI GHT: FÆLLES Faktaboks Faktaboks i backend Mærkaterne i de enkelte celler fortæller, hvad du skal skrive. I øverste celle, hvor du skriver overskrift, skal du markere teksten og vælge farven hvid. Skriv herefter din tekst. Det færdige resultat

10 Højre kolonne (Right) Billedboks Opret nyt afsnit. Navngiv afsnittet (for overskuelighedens skyld) RIGHT: eks. billedboks I den visuelle editor vælges skabelon: RI GHT: FÆLLES Billedboks Billedboks backend (ikke udfyldt) Mærkaterne i de enkelte celler fortæller, hvad du skal skrive. I øverste celle, hvor du skriver overskrift, skal du markere teksten og vælge farven hvid. I ndsæt billede i næste celle. Bredden skal være 160px. Højde valgfri. I eksemplet her er billedet 80 px højt Billedboks backend (udfyldt) Det færdige resultat