Design og layout. Snippets og specialfunktionalitet i layouts Printvenlige layouts. Se også og

Størrelse: px
Starte visningen fra side:

Download "Design og layout. Snippets og specialfunktionalitet i layouts Printvenlige layouts. Se også www.tangora.dk/manualer og www.tangora.dk/developerblog."

Transkript

1 Design og layout Denne manual giver en grundlæggende vejledning i anvendelse af de forskellige layoutværktøjer i Tangora Portal CMS og Tangora Mini samt eksempler og checklister til forskellige typer layouts: Visual Designer og Table Designer Farvepaletter og typografier Billeder og karruseller Sitelayouts, sidelayouts og afsnitslayouts Oversigtsvisning (punktliste/tabel/blokliste) og detaljevisning på funktionssider Snippets og specialfunktionalitet i layouts Printvenlige layouts Se også og Tangora Software A/S. Alle rettigheder forbeholdes. Denne manual såvel som den software der er beskrevet i den, er leveret under licens og må kun anvendes i henhold til licensbetingelserne. Indholdet af denne manual er udelukkende af informativ karakter og kan ændres uden videre. Indholdet af denne manual skal ikke opfattes som en kontrakt eller hensigtserklæring fra Tangora Software A/S, og Tangora Software A/S kan ikke holdes ansvarlig for eventuelle fejl der måtte være i den. Bortset fra, hvad licensbetingelserne tillader, må ingen dele af denne publikation reproduceres, arkiveres elektronisk, eller transmitteres i nogen form eller på nogen måde, herunder elektronisk, mekanisk, eller på anden måde uden forudgående skriftlig godkendelse fra Tangora Software A/S. Alle varemærker i denne manual tilhører fortsat deres respektive ejere.

2 Side 2 af 82 Indhold Introduktion... 4 Forskellige layoutværktøjer/-metoder... 5 Hvilket layoutværktøj skal du vælge?...5 Grundlæggende om Visual Designer... 6 Grundlæggende om Table Designer...9 Skift mellem layoutværktøjer...10 Generelle råd og anbefalinger Sitelayouts Hvad er et sitelayout? Modulet Site Designer Billeder Vis billeder i en karrusel...12 Farver Sådan opretter du farver fra et billede...12 Navigation Typografier Genbrug stylesheet fra andet layout...16 Tilknyt browserspecifikke style sheets...17 Globale typografier kan anvendes på tværs af sitelayouts...18 Sådan opretter du en global typografi...19 Sådan bygger du et sitelayout med Visual Designer Checkliste: Byg et sitelayout med Visual Designer Ad 1: Upload billeder...21 Ad 2: Opbyg farvepalette...21 Ad 3: Opret sitelayoutet, vælg farvepalette og preview-side mm Ad 4: Indsæt spalter, billeder, navigation, sideindhold mm...22 Automatisk eller manuel spaltebalancering?...26 Ad 5: Tilpas indryk, formatering, accentfarve mv Ad 6: Test med preview...30 Ad 7: Publicer...31 Tips til Visual Designer...31 URL-syntaks URL-syntaks og søgemaskiner...32 Indbyg funktioner i (site)layouts Snippets = Tangora "funktionspakker" Eksempel: Snippettypen 'Billedkarrusel'...34 Mere om snippets på Tangora Kundecenter...38

3 Side 3 af 82 Printvenlige layouts Printvenligt Table Designer masterlayout Printvenligt layout via CSS Sidelayouts Udpeg et standard sidelayout...40 Detaljeret styring af sidelayoutets anvendelse...41 Sitelayout og sidelayouts skal passe sammen Sådan bygger du et helsides sidelayout Sidelayouts med låst indhold Sådan laver du et sidelayout med låst indhold...47 Automatisk visning af fx redigeringsdato via flettefelt...51 Sidelayouts med portalfunktionalitet Anvend ikke cache eller sidelayouts på sider, der skal indlejres Sådan bygger du et sidelayout med portalfunktionalitet...53 Eksempel på sidelayout med nyhedsblok til højre...54 Forskellige sidelayouts til oversigt/detaljevisning Afsnitslayouts Angiv standardafsnitslayout for hvert site Sådan opretter du et nyt afsnitslayout Billedregler i afsnitslayouts...59 Sådan sletter du et afsnitslayout Opsætning af funktionssiders layout Vis en oversigt som punktliste, tabel eller blokliste Punktliste...63 Tabel...63 Blokliste...65 Intern navigering i oversigter...71 Detaljevisning Layouttips til formularsider og andre input-sider Eksempel 1: Opsætning af kontaktformular med Visual Designer...76 Eksempel 2: Opsætning af formularside med Table Designer...82

4 Side 4 af 82 Introduktion I Tangora Portal CMS og Tangora Mini kan layout styres på forskellige niveauer med 4 forskellige typer layout: Sitelayouts Sidelayouts Funktionssider Afsnitslayouts Sitelayoutet er den "skabelon", der bestemmer websitets overordnede layout, herunder placering af logo, menuer og sideindhold ("main"). Sidelayoutet er den "skabelon", der styrer placeringen af indhold på siderne (sitelayoutets "main"-område), og indhold kan komme fra siden selv eller sidelayoutet/andre sider. Funktionssider har en række indstillingsmuligheder til visning af sidens dynamiske indhold). Funktionssider der viser strukturerede data (se evt. afsnittet om struktureret indhold i Tangora Grundmanual) kan desuden anvende en layoutskabelon, som er defineret centralt for det enkelte modul (fx Nyheder). Afsnitslayoutet er den "skabelon", der styrer placeringen af forskellige typer afsnitselementer (fx overskrift, kort tekst, lang tekst, billede) samt tekstformatering. Kan bruges til specialfunktionalitet og/eller visuel "indpakning" af indhold. Hovedmenu Undermenu(er) Brødkrummesti Sideindhold Fælles for disse typer layouts er, at de kan opbygges helt frit man er ikke bundet til faste designskabeloner. Sitelayouts, sidelayouts og afsnitslayouts oprettes og administreres under menupunktet Design & layout. Her har du desuden mulighed for at definere farvepaletter, typografier og minikalendere:

5 Side 5 af 82 OBS: Adgang til menupunktet Design & layout kræver som minimum rettighedsniveauet Administrator og designadgang. Forskellige layoutværktøjer/-metoder I Tangora Portal CMS og Tangora Mini er der 3 forskellige måder at arbejde med layouts på: Visual Designer: Layouts består teknisk set af DIV-elementer Table Designer: Layouts består teknisk set af HTML-tabeller Egen HTML-kode Visual Designer er Verdens første rent browserbaserede designværktøj, som gør det muligt at opbygge avancerede DIV-baserede layouts med helt enkel pegog-klik. Et DIV-baseret layout er kendetegnet ved en stærk adskillelse mellem indhold og præsentation, hvilket sikrer tilgængelighed og gør det let for fx søgemaskiner at identificere relevant indhold på siden. Både Visual Designer og Table Designer anvendes ved hjælp af peg-og-klik og kræver således ingen eller begrænset kodekompetence. Hvilket layoutværktøj skal du vælge? Mange layouts vil kunne opbygges med både Visual Designer og Table Designer, men generelt anbefaler vi Visual Designer som layoutværktøj, da det teknisk set har en række fordele i forhold til Hastighed Søgemaskiner Tilgængelighed

6 Side 6 af 82 Visual Designer har desuden en række brugsmæssige fordele: Visual Designer Table Designer Intern visning af layout WYSIWYG Tabel med flettefelter Hjælp til fejlsøgning X Indlejrede layouts Ubegrænset 2 niveauer 1 Indbyggede designskabeloner til navigation (fx faner) X Antal navigationsniveauer Op til 10 2 Max. 3 3 Snippets Billedkarrusel Søgning Nyhedsbrevtilmelding Eksternt login HTML Flash Silverlight Billedkarrusel Søgning Nyhedsbrevtilmelding Eksternt login HTML Flash Formular Minikurv OBS: Hvis du vælger at anvende Visual Designer til opbygning af sidelayouts, skal sitelayoutet også bygges med dette værktøj (eller med Table Designer med indstillingen "HTML 4.01 Standards Mode"). Situationer hvor Table Designer er bedst Opsætning af HTML-mails fungerer pt. bedst med Table Designer, og i forbindelse med opsætning af funktionssider med indhold i flere spalter vil Table Designer også nogle gange være det bedste værktøj jf. "Blokliste" side 65. Grundlæggende om Visual Designer Layoutets struktur opbygges ved hjælp af spalter, som kan indeholde et eller flere elementer (billeder, navigation, sideindhold etc.) eller andre spalter. De enkelte elementer behøver dog ikke indsættes i en spalte men kan også indsættes direkte i layoutet. Både layout og spalte kan indeholde et ubegrænset antal elementer. Hvis en spalte er markeret, når et element indsættes, placeres elementet i den pågældende spalte. Ellers indsættes elementet direkte i layoutet. Både elementer og spalter kan flyttes ved hjælp af tastaturets piletaster og fjernes fra layoutet via Delete-tasten. 1 En celle i layoutets overordnede HTML-tabel kan indeholde en særskilt HTML-tabel. OBS: Tangora Mini understøtter ikke indlejrede layouts. 2 Kræver tilkøb af Ubegrænset antal navigationsniveauer 3 Det 3. niveau kræver tilkøb af Ubegrænset antal navigationsniveauer

7 Side 7 af 82 Spalter Spalter indsættes altid i såkaldte spaltesæt, der består af 1 til 5 spalter. Alle spalter inden for et spaltesæt hører sammen og vil altid have samme højde som den spalte, der har mest indhold, med mindre layoutet er indstillet til manuel spaltebalancering. Se evt. "Automatisk eller manuel spaltebalancering?" side 26. Højden og bredden på en spalte kan ændres via funktioner i Båndet, dvs. de kontekstafhængige værktøjsfaner, eller via musen: Højden ændres ved at trække i "håndtaget" nederst i en markeret spalte. Bredden ændres ved at trække i "håndtaget" til højre på en markeret spalte. OBS: Der ændres bredder fra venstre mod højre i et spaltesæt, dvs. at den sidste spalte i et spaltesæt ikke kan ændres dens bredde tilpasses automatisk, når den næstsidste spalte ændres. Luft I CSS, og dermed også i Visual Designer, skelnes der mellem to former for luft: Margen (margin), som er luft uden om et element, og Indryk (padding), som er luft inden for et element. Er der fx indsat en tekstboks i layoutet, er indryk afstanden fra boksens kant ind til dens indhold (teksten), mens margen er afstanden fra boksens kant til andre omkringliggende elementer. Luft, som er lavet med Margen, vil ikke blive vist med baggrundsfarve og/eller -grafik. Brug så få spalter som muligt Det er sjældent nødvendigt at indsætte ekstra spalter og lignende for at skabe den fornødne luft i et layout det kan næsten altid gøres ved at sætte indryk og margen på elementerne. Ekstra spalter får blot den bagvedliggende kode til at fylde mere og gør layoutet mindre fleksibelt. Generelt anbefaler vi, at man bruger spalter, hvis man fx har brug for grafik i flere lag (baggrundsbillede og logo) eller ønsker at placere en lodret navigation ved siden af sideindhold. Element Inspector Formatering af navigation, spalter, flettefelter og øvrige elementer i sitelayoutet foregår i praksis ved hjælp af såkaldt CSS (Cascading Stylesheets). Dvs. at formateringsmulighederne på de forskellige faner reelt blot giver adgang til at ændre de CSS regler/typografier, som påvirker et givent element, men på en nem og brugervenlig måde. Den indbyggede Element Inspector (F2) kan fortælle om alle typografiregler, der påvirker det aktuelt markerede element. På den måde kan man hurtigt og effektivt danne sig et overblik over hvilken formatering, der påvirker et givent element.

8 Side 8 af 82 Sådan ser Visual Designer ud Når du arbejder med layouts i Visual Designer, vises layoutet i WYSIWYGtilstand dog med eksempelindhold i navigation, brødkrummesti og 'sideindhold'. Når et givent element er markeret, kan du indstille elementets egenskaber og formatering ved hjælp af knapperne og valgmulighederne i båndet foroven: Preview-funktion med levende indhold Med Visual Designers indbyggede preview-funktion kan du se layoutet med det faktiske indhold fra en bestemt side: Du kan læse mere om Visual Designer i "Modulet Site Designer" side 11.

9 Side 9 af 82 Grundlæggende om Table Designer I Table Designer vises layoutet som en tabel, hvor de forskellige elementer (fx navigation, brødkrummesti, sideindhold mv.) er repræsenteret med flettefelter. Flettefelterne kan trækkes med musen fra oversigten under layouttabellen og placeres i en given celle. Du kan frit definere antallet af rækker og kolonner i tabellen, indstille kolonnernes bredde samt specificere tabellens marginer og evt. ramme under tabellens egenskaber (højreklik i tabellen) De enkelte celler kan tilpasses individuelt (tekstjustering, evt. ramme og tekst før/efter indholdet i cellen) Du kan sammenlægge to eller flere celler, hvilket fx kan være nyttigt når du vil placere tekst og billeder i forhold til hinanden. Der kan kun placeres ét felt i hver celle. Du kan placere billeder fra websitets centrale billedarkiv i tabellens celler Der kan kun placeres ét billede i hver celle, men en celle kan godt indeholde både et felt og et billede på én gang. Du kan indsætte tekst før og/eller efter indholdet i en celle samt tildele en celle en given typografi Sådan ser Table Designer ud OBS: En celle kan kun indeholde ét element. Det er dog muligt at indsætte et såkaldt indlejret layout med flere elementer:

10 Side 10 af 82 I preview-tilstand ser layoutet således ud: Skift mellem layoutværktøjer Det er ikke teknisk muligt at ændre et layout, som er opbygget med ét designværktøj til et andet dvs. er layoutet fra start opbygget i fx Table Designer, skal man bruge dette værktøj til evt. ændringer. Generelle råd og anbefalinger Sørg for at målene på dine layoutelementer passer sammen hvis en spalte/celle fx er 350 px bred, er der ikke plads til at indsætte et 352 px bredt billede Hvis layoutet skal indeholde et fast link til en bestemt side, er det en god ide at bruge en URL-genvej (fx "/sitemap") som link-adresse i stedet for et specifikt sideid så er det lettere at udskifte destinationssiden Brug gerne fx Internet Explorer Developer Toolbar til fejlsøgning af layouts og CSS. Hvis du ønsker at ændre et layout, som er i brug på websitet, kan det være en fordel at lave ændringerne på en kopi af det pågældende layout, så du du ikke kommer til at ødelægge noget. Du kan kopiere både sitelayouts, sidelayouts og afsnitslayouts. Hvis du ønsker at skifte fx sitelayout, vil det kræve færrest tilpasninger af sidernes opsætning og sidelayouts, hvis cellen med {main} har samme størrelse (bredde) som i det gamle layout. Globale flettefelter kan indsættes i sitelayouts, sidelayouts og på sider. Bruges til at vise system-genereret information (fx sidens ændringsdato). Tangora Grundmanual indeholder en oversigt over flettefelter.

11 Side 11 af 82 Sitelayouts Der er ingen begrænsning på, hvor mange sitelayouts, man kan oprette i en given Tangora Portal CMS løsning, og man kan sagtens anvende flere forskellige sitelayouts (fx ét sitelayout til forsiden, ét til undersider og ét til intranettet). Hvad er et sitelayout? Sitelayoutet er den 'designskabelon', der styrer websitets overordnede layout, herunder placering af logo, menuer og sideindhold. Sitelayouts opbygges helt frit og kan populært sagt udskiftes med et klik uden at starte forfra med websitets indhold. Baggrundsbilleder Billede (logo) Knap Navigation Snippet/kodeblok Brødkrummesti "{Main}"-område (sideindhold) Modulet Site Designer Sitelayouts opbygges ved hjælp af modulet Site Designer. Tangora Partnere har altid adgang til dette modul på en given løsning, mens kunder kun har adgang, hvis løsningens licens omfatter Site Designer. Når du arbejder med sitelayouts, skal du vælge, om du vil bruge Visual Designer eller Table Designer som layoutværktøj. Se evt. "Hvilket layoutværktøj skal du vælge?" side 5.

12 Side 12 af 82 Billeder Inden du uploader billeder til Tangora Manager, bør du overveje adgangsrettighederne til billederne: Må alle brugere med adgang til det centrale billedarkiv have adgang til sitelayoutets billeder, kan du blot oprette en kategori til billederne heri. Ønsker du derimod at kunne styre adgangen til billederne mere specifikt, bør billederne placeres i et særskilt arkiv (kræver tilkøb af ekstra arkiv). I Table Designer medfølger der et sitelayout-arkiv til hvert sitelayout, og man kan så vælge, om man vil placere billederne heri eller benytte det centrale billedarkiv. Vælger man at anvende sitelayoutets billedarkiv, er der mulighed for at angive forskellige egenskaber for billederne. Vis billeder i en karrusel Ønsker du at indsætte en billedkarrusel i fx sitelayoutet, kan dette gøres ved hjælp af en såkald Snippet se "Indbyg funktioner i (site)layout" side 33. Farver Du kan oprette alle de farvepaletter, du ønsker og tildele sitelayouts og databaser en bestemt farvepalette (under sitelayoutets/databasens egenskaber). Vælger du ikke en specifik farvepalette for fx et sitelayout, vil systemets indbyggede standardfarvepalette blive anvendt. Du kan sagtens tilpasse denne eller opbygge din egen farvepalette og vælge den som standardpalette. Sådan opretter du farver fra et billede 1. Gå til Design & layout > Farvepaletter og kopier den eksisterende systempalette (så får du farverne heri med) eller opret en ny, tom palette. 2. Dobbeltklik på et tomt farvefelt og klik på Anvend brugerdefineret palettebillede. Udpeg det billede, der skal bruges (eller upload det, hvis det ikke allerede findes i Tangora Manager arkivet). 3. Udvælg den ønskede farve ved hjælp af pipetteværktøjet og giv farven et passende visningsnavn:

13 Side 13 af 82 TIP: Brug zoom- og flytknappen i miniværktøjslinjen til at komme tættere på et bestemt udsnit af billedet. 4. Klik OK for at oprette den nye farve og Gem farvepaletten. 5. Gentag pkt. 2-4 for hver ny farve (systemet husker dog det seneste billede, du har brugt, så du behøver ikke finde det igen). 6. Flyt gerne de nye farver forrest i paletten (træk med musen). 7. Gem farvepaletten, når du er tilfreds med udvalget og rækkefølgen af farverne. OBS: Hvis du senere ændrer en farve, vil ændringerne ikke træde i kraft de steder, hvor farven er valgt du vil derimod manuelt skulle "påføre" den ændrede farve de ønskede steder.

14 Side 14 af 82 Navigation Websitets navigation kan inddeles i forskellige navigationstyper: Grundlæggende navigationstyper: Træ Liste Drop down XML-XSL 4 Kombinerede navigationstyper 5 Liste/træ Drop down/træ HTML (fuld kontrol over menuernes HTML-kode) Visual Designer indeholder et galleri med en række foruddefinerede skabeloner, som gør det nemt og hurtigt at formatere navigationen, og den indbyggede Navigation Designer giver mulighed for at tilpasse den valgte skabelons grundopsætning og dermed lynhurtigt skabe nye navigationstypografier: Fane med værktøj til formatering af den valgte navigation Eksempelindhold Navigation Designer 4 Denne navigationstype er kun understøttet i Visual Designer og kræver Application Constructor se bla. 5 Kombinerede navigationstyper kræver, at licensen indeholder "Ubegrænset antal navigationsniveauer"

15 Side 15 af 82 Navigation Designer giver således mulighed for at indstille navigationens egenskaber og genererer automatisk de fornødne grafikker til navigationen, fx runde hjørner og effekter. Se også indlæg på Tangora Udviklerblog (www.tangora.dk/developerblog): Alle blogindlæg om Visual Designer Grafisk navigation i Visual Designer med CSS Drop Down navigation i Visual Designer Typografier De typografier, der anvendes på en webside, vil som oftest være defineret i det overordnede sitelayout. Disse sitelayout-specifikke typografier kan i Visual Designer enten defineres ved peg-og-klik udvælgelse af forskellige formateringsegenskaber (fx skrifttype, -størrelse og accentfarve, når der er tale om tekst) på et givent flettefelt/element i sitelayoutet eller ved at indsætte den ønskede CSS-kode direkte ved klik på knappen Typografier: Du kan desuden tilknytte et eller flere eksterne style sheets (fx browserspecifikke style sheets) via sitelayoutets Staminformationer i Applikationsmenuen. Læs mere herom i "Genbrug stylesheet fra andet layout" side 16.

16 Side 16 af 82 Når du peger på et givent element i Visual Designer vinduet, vises en etiket med navnet på den anvendte CSS-klasse: TIP: Hvis man i forbindelse med redigering af en side sætter et link på en markeret tekst, får teksten automatisk sat en linktypografi på. Linktypografien er oftest defineret i det anvendte sitelayout. Du kan få vist alle CSS-egenskaber via den indbyggede Element Inspector (F2). Se evt. også "Element Inspector" side 7. Genbrug stylesheet fra andet layout Under sitelayoutets Staminformationer (vælg via Tangora Applikationsmenuen) har du på fanebladet Stylesheets mulighed for at tilknytte et stylesheet fra et andet sitelayout i webløsningen: OBS: Det sitelayout, der indeholder det stylesheet, du ønsker at tilknytte, skal være publiceret. På den måde kan du anvende samme stylesheet til alle de sitelayouts (typisk forsidelayout og undersidelayout), der tilhører en given grafisk designlinje, så ændringer kun skal foretages ét sted. Vigtigt: Hvis en style er angivet i både 'master' og 'slave' stylesheets, vil det altid være 'slave' stylesheet'et, der "vinder". Dvs. du bør kun definere styles lokalt, hvis du ønsker at alternativ formatering i forhold til det overordnede stylesheet.

17 Side 17 af 82 Tilknyt browserspecifikke style sheets I den perfekte verden ville alle browsere opføre sig ens. Sålangt er teknologien desværre ikke endnu, så derfor kan det være nødvendigt at oprette browserspecifikke stylesheets. Det gør du via menupunktet Staminformationer i Tangora Applikationsmenuen: 1. Vælg fanebladet Stylesheets og klik på knappen Tilføj: 2. Giv stylesheet'et et navn, angiv betingelser, klik på Tilføj og herefter OK: 3. Så vises det ny-oprettede stylesheet i oversigten over browserspecifikke stylesheets:

18 Side 18 af Marker det nye stylesheet og klik på Rediger så åbnes Tangora CSS Editor, hvor du kan indsætte den ønskede CSS: 5. Klik på OK for at gemme ændringer. Globale typografier kan anvendes på tværs af sitelayouts I Tangora Portal CMS kan du definere såkaldt "globale typografier", som kan anvendes på tværs af forskellige sitelayouts og sites anvendelsesrettighederne fastlægges nemlig på den enkelte typografi.

19 Side 19 af 82 TIP: De globale typografier kan bl.a. anvendes i forbindelse med redigering af en side: Fordelen ved at bruge typografier til formatering af tekst frem for fx valg af tekstfarve og/eller brug af fed, kursiv og understregning (CTRL+B/I/U) er, at man senere kan ændre farve mm. ét sted uden at skulle foretage ændringerne på hver side. OBS: Kun brugere med administratorrettigheder har adgang til at oprette og ændre globale typografier. Tegn- eller blokformatering Tegnet til højre for typografiernes klassenavn angiver hvorvidt der er tale om en tegn- eller bloktypografi. Tegnformatering (a) påvirker kun den markerede tekst, mens blokformatering ( ) påvirker hele den blok, cursoren er placeret i. Se også tippet nedenfor. Sådan opretter du en global typografi 1. Gå til Design & layout > Typografier og klik på Opret. Angiv typografiens navn, vælg HTML-tag (tegn- eller blokformatering) og øvrige egenskaber: HTML-tagget bruges til at angive, om der er tale om en overskriftstypografi (H1 = overskrift på niveau 1, H2 = overskrift på niveau 2, etc.), tegnformatering (span) eller blokformatering (div + p). OBS: HTML-tagget virker kun, når typografien anvendes i et WYSIWYG-felt. 2. Klik OK så vises de forskellige indstillingsmuligheder:

20 Side 20 af 82 TIP: Vælg "em" eller "%" som måleenhed, hvis gæsten skal kunne vælge tekststørrelse ved hjælp af browseren. 3. Angiv de ønskede indstillinger og brug evt. fanen Preview til at teste, om det ser ud som ønsket. Gem løbende med Gem-knappen og klik OK, når du er færdig med at konfigurere typografien. VIGTIGT: Omdøb ikke typografiens klassenavn, hvis den er i brug typografien vil i så fald ikke længere virke.

21 Side 21 af 82 Sådan bygger du et sitelayout med Visual Designer Du vil nu få præsenteret en detaljeret trin-for-trin-vejledning i, hvordan du kan bygge et sitelayout, så det kommer til at ligne dette eksempel: Topgrafik (baggrundsbillede) Logo med hovereffekt Navigation (niveau 1) Brødkrummesti Eksempelindhold Navigation (niveau 2-4) Footer (tekstfelt) Checkliste: Byg et sitelayout med Visual Designer Overordnet set kan opbygning af et sitelayout opdeles i følgende del-opgaver: 1. Upload billeder (hent evt. eksempler på 2. Opbyg farvepalette 3. Opret sitelayoutet, indstil URL-syntaks, vælg farvepalette og preview-side 4. Indsæt spalter, billeder, navigation, sideindhold og andre elementer 5. Tilpas formatering 6. Test med preview I "rigtige" produktionssituationer vil du måske følge en anden rækkefølge eller lave nogle af punkterne samtidig det kommer helt an på, hvad der passer bedst til det pågældende design og til dit temperament. 7. Publicer layout Ad 1: Upload billeder De tre billeder (en topgrafik og to logo-grafikker) til sitelayoutet uploades til kategorien "Tusmørkelayout" under Arkiver > Billedarkiv. Ad 2: Opbyg farvepalette Følg vejledningen i "Sådan opretter du farver fra et billede" side 12.

22 Side 22 af 82 Ad 3: Opret sitelayoutet, vælg farvepalette og preview-side mm. 1. Gå til Design & layout > Sitelayouts og opret et nyt sitelayout. Du får nu vist en tom "side" ligesom når du starter fx Word. 2. Klik på Tangora knappen og vælg Staminformationer. Vælg evt. en anden URL-syntaks (se "URL-syntaks" side 31). Skift til fanebladet Manager, tilknyt din farvepalette og vælg en side til preview: 3. Klik OK, gem sitelayoutet og genindlæs layoutet med F5, så den valgte farvepalette er tilgængelig. TIP: Du kan gemme sitelayoutet på forskellige måder: Tangora menuen Mini-værktøjslinjen CTRL+S Ad 4: Indsæt spalter, billeder, navigation, sideindhold mm. 1. Indsæt via fanen Indsæt en 100% spalte til topgrafik og et 25/75% spaltesæt til navigation 2-3 og sideindhold: 2. Indsæt herefter flettefeltet Brødkrummesti ved at klikke på det med musen:

23 Side 23 af Klik på brødkrummestien i layoutet, så den bliver markeret med en grøn ramme, og flyt den op under 100% spalten ved hjælp af PilOp-tasten: TIP: Når du indsætter et nyt element i layoutet, bliver det automatisk placeret nederst. Du kan flytte elementerne ved hjælp af tastaturets piletaster. Ønsker du at indsætte et element i en spalte, skal du først markere spalten så slipper du for manuelt at flytte elementet ind i spalten. 4. Marker 25/75% spaltesættet og træk det højere med musen. Vælg den højre spalte, og indsæt flettefeltet Indhold (sideindhold): TIP: I et spaltesæt med flere spalter vil den valgte spalte altid 'ligge øverst' jf. spaltens venstre hjørner. Hold CTRL nede, mens du klikker på en spalte så er du sikker på at få den rigtige valgt. Når en spalte er markeret, kan du trække den højere eller mindre ved hjælp af det viste "håndtag" når du trækker i håndtaget, vises spaltens (minimums)højde. Du kan ændre bredden på samme måde ved at trække i håndtaget til højre på spalten (bredden på den sidste spalte i et spaltesæt kan dog ikke ændres den tilpasser sig automatisk, når 'nabospalten' ændres).

24 Side 24 af Klik på layoutets mørkegrå baggrund for at fravælge spalten og indsæt den vandrette navigation. Marker navigationen og flyt den op under 100% spalten ved hjælp af PilOp-tasten: 6. Marker den venstre spalte i 25/75% spaltesættet og indsæt Navigation 2. Marker navigationen og indsæt endnu en navigation (=niveau 3). Bekræft, at den skal indsættes som undernavigation i navigation 2: 7. Indsæt en tekstboks til sidefoden:

25 Side 25 af Marker 100% spalten og indsæt baggrundsbilledet via fanen Formatering: TIP: En af fordelene ved at indsætte topgrafikken som et baggrundsbillede er, at man så nemt kan placere fx logo ovenpå. Topgrafikken behøver desuden ikke passe præcist, da man kan "beskære" den ved hjælp af spaltens højde og bredde. 9. Vælg indstillingen Gentag ikke og træk i håndtaget nederst på spalten, så spaltens højde passer til billedet. 10. Skift til fanen Indsæt og indsæt logoet i 100% spalten:

26 Side 26 af 82 TIP: Har du uploadet billederne til sitelayoutet i en særskilt kategori, kan du hurtigt finde billederne ved at filtrere på denne kategori i "Indsæt billede"- dialogboksen. Vælg evt. visningsformen Medium billeder som i dette eksempel. 11. Marker billedet og vælg Hoverbillede på fanen Indstillinger: 12. Gem sitelayoutet. Automatisk eller manuel spaltebalancering? Som standard forsøger Visual Designer at gøre alle spalter i et givent spaltesæt lige høje. Hvis et layout anvender avancerede CSS-features som fx CSS-styret positionering af elementer, eller hvis en side fx viser indhold dynamisk via Ajax, kan det dog være en fordel at styre specifikke spalters højde manuelt. Det kræver, at du først skifter fra automatisk til manuelt styret spaltebalancering: Åbn Tangora Applikationsmenuen ved at klikke på Tangora knappen øverst til venstre og vælg menupunktet Staminformationer:

27 Side 27 af 82 Vælg Manuel spaltebalancering nederst på fanen Generelt. Under højde-indstillingerne for den enkelte spalte kan du så manuelt aktivere spaltebalancering, hvis du ønsker, at den pågældende spaltes højde skal justeres i forhold til det spaltesæt, den indgår i: Hvis du aktiverer spaltebalancering, vil spaltens højde automatisk blive lige så høj som den højeste spalte i spaltesættet. Ad 5: Tilpas indryk, formatering, accentfarve mv. 1. Skift til fanen Formatering, vælg omløbet Flyd til højre og indstil billedets margen til Normal margen:

28 Side 28 af Marker 100% spalten, klik på knappen Baggrundsfarve og vælg en mørk baggrundsfarve til spalten af hensyn til billedets øverste runde hjørner: TIP: Topgrafikken er lavet i png-format, fordi det understøtter transparens til de runde hjørner. 3. Marker nu brødkrummen, vælg baggrundsfarve, sæt indryk: (her er der valgt et brugerdefineret indryk på henholdsvis 10, 10, 15 og 15 px) og definer bundrammen på elementet: 4. Indstil tekstboksens baggrundsfarve og indryk på samme måde. 5. Klik på layoutets mørke baggrund (for at fravælge evt. valgte elementer) og vælg fx en brun Accentfarve:

29 Side 29 af 82 TIP: Hvis du vælger et bestemt element (fx flettefeltet Indhold), inden du vælger Tekstfarve, Accentfarve eller anden formatering fra fanen Layout, vil formateringen kun blive sat lokalt på dette element. OBS: Har du først sat en formatering lokalt på et bestemt element, vil det ikke blive påvirket af de evt. globale formateringsvalg, du foretager. Se også "Genbrug stylesheet fra andet layout" side Marker Navigation 1, klik på fanen Formatering (Navigation) og vælg den vandrette navigationstypografi med sort/petroleum fra galleriet: 7. Klik herefter på knappen Opret ny > Opret kopi af den valgte navigationstypografi, giv den et navn og brug Navigation Designer (se evt. side 14) til at tilpasse baggrundsfarverne på de forskellige faner, så de passer med sitelayoutets design (fx sortbrun baggrund på Navigation og Normal, Brændt orange på Hover og Brun på Aktiv): Navigation Designer giver mulighed for at skræddersy det valgte navigationselement i forhold til farve, effekt, indrykning mm. Husk at give navigationen et sigende navn i stedet for standardbetegnelsen "Brugerdefineret navigation". Se også "Genbrug stylesheet fra andet layout" side 16.

Brugervejledning til Design Manager Version 1.02

Brugervejledning til Design Manager Version 1.02 Brugervejledning til Design Manager Version 1.02 Indholdsfortegnelse 1. Introduktion... 3 1.1 Det kan du med HostedShop Design Manager... 3 1.2 Feature list... 3 2. Design... 4 3. Filer og CSS... 4 3.1

Læs mere

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3

DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 TYPO3 manual DENNE MANUAL ER SKREVET FOR AT GIVE DIG EN GRUNDIG INTRODUKTION TIL DE FORSKELLIGE ARBEJDSGANGE I TYPO3 Det første afsnit, Introduktion til systemet, giver et hurtigt overblik over mulighederne.

Læs mere

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 13. marts, 2014 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13 2.b.

Læs mere

Manual til Dynamicweb Februar 2010

Manual til Dynamicweb Februar 2010 Manual til Dynamicweb Februar 2010 Login... 2 Skabeloner og formater... 3 Filarkivet... 4 Lav en PDF... 5 Opret en ny side... 7 Navngiv siden... 9 Aktiver siden... 9 Sorter sider... 9 Flyt siden... 11

Læs mere

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. oktober, 2013 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13

Læs mere

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. september, 2012 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 8 2. Sider... 10 2.a Opret side...

Læs mere

Manual for redaktører

Manual for redaktører Manual for redaktører Leveret af DFF-EDB.dk 2 INDHOLDSFORTEGNELSE: 1. Hjemmesider i Umbraco... 5 2. Kom i gang med Umbraco... 5 2.1 Login... 5 2.1.1. Ændring af login... 5 2.2. Når du arbejder på siden,

Læs mere

Orddeling. Automatisk orddeling. Manuel orddeling. Word 2010 18 thoremil.dk. Vælg fanebladet [Sidelayout] Vælg [Orddeling] Markér Automatisk orddeling

Orddeling. Automatisk orddeling. Manuel orddeling. Word 2010 18 thoremil.dk. Vælg fanebladet [Sidelayout] Vælg [Orddeling] Markér Automatisk orddeling Orddeling Automatisk orddeling Vælg [Orddeling] Markér Automatisk orddeling Manuel orddeling Vælg [Orddeling] Klik [Manuelt] For hvert ord, som vises, kan der gøres følgende: Accepter det foreslåede orddelingssted

Læs mere

MANUAL TIL FS PÅ NETTET

MANUAL TIL FS PÅ NETTET MANUAL TIL FS PÅ NETTET Sådan opretter du nyheder og artikler (side 4) Sådan laver du links (side 14) Om tjek ind/ud og publicer (side 20) Sådan uploader du billeder og dokumenter (side 25) Sådan redigerer

Læs mere

MANUAL - Joomla! Version 1

MANUAL - Joomla! Version 1 MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 3 Log ind... 3 Ret i en artikel, der allerede er oprettet... 4 Opret ny artikel... 8 a) Skriv direkte i tekstfelt... 9 b) Indsæt tekst

Læs mere

I denne vejledning lærer du de mest grundlæggede funktioner i PowerPoint: Hvad er en præsentation?...3. Eksempel på en præsentation...

I denne vejledning lærer du de mest grundlæggede funktioner i PowerPoint: Hvad er en præsentation?...3. Eksempel på en præsentation... Præsentationer: Vejledning PowerPoint I denne vejledning lærer du de mest grundlæggede funktioner i PowerPoint: Hvad er en præsentation?...3 Eksempel på en præsentation... 3 Visninger...3 Normal... 3 Diassortering...

Læs mere

Kapitel 13 Arbejde med Typografier:

Kapitel 13 Arbejde med Typografier: Kom i gang med Kapitel 13 Arbejde med Typografier: Introduktion til Typografier OpenOffice.org Rettigheder Dette dokument er beskyttet af Copyright 2005 til bidragsyderne som er oplistet i afsnittet Forfattere.

Læs mere

I denne vejledning lærer du de mest grundlæggede funktioner i PowerPoint 2003: Hvad er en præsentation?... 3. Eksempel på en præsentation...

I denne vejledning lærer du de mest grundlæggede funktioner i PowerPoint 2003: Hvad er en præsentation?... 3. Eksempel på en præsentation... Præsentationer: Vejledning PowerPoint 2003 I denne vejledning lærer du de mest grundlæggede funktioner i PowerPoint 2003: Hvad er en præsentation?... 3 Eksempel på en præsentation... 3 Visninger... 3 Normal...

Læs mere

PowerPoint 2007. Indhold UNI C

PowerPoint 2007. Indhold UNI C PowerPoint 2007 Indhold Kom i gang med PowerPoint... 3 Hvad er en præsentation?... 3 Faner og bånd... 3 Visning og valg af funktioner... 4 Ny præsentation... 5 Visninger... 6 Normalvisning... 6 Diassortering...

Læs mere

Brugervejledning. Miljøministeriet A4. Opdateret den 25. oktober 2011

Brugervejledning. Miljøministeriet A4. Opdateret den 25. oktober 2011 Brugervejledning Miljøministeriet A4 Opdateret den 25. oktober 2011 Indholdsfortegnelse Introduktion... 3 Opret et nyt dokument... 3 Før du starter... 4 Om at arbejde med typografier:... 5 Menu: A4 - Publikation...

Læs mere

Redaktørmanual TYPO3. LinkFactory TYPO3 MANUAL

Redaktørmanual TYPO3. LinkFactory TYPO3 MANUAL LinkFactory TYPO3 MANUAL Kapitel 1 - TYPO3 CMS - Opbygning... 3 Log ind... 3 Backend... 4 Frontend... 5 Hvor skal jeg klikke?... 5 Gem, gem og vis, gem og luk... 6 Kapitel 2 - Håndtering af sider & menuer...

Læs mere

Manual Version 2. til oprettelse af hjemmesider for landsbyer i Rebild kommune

Manual Version 2. til oprettelse af hjemmesider for landsbyer i Rebild kommune Manual Version 2 til oprettelse af hjemmesider for landsbyer i Rebild kommune Oversigt: Login Hjemmeside...... side 3 Login Administrationsmodul... side 5 Kategorier.. side 6 Opret/rediger første side...

Læs mere

Sådan indlægges nyheder på DSqF s hjemmeside trin for trin

Sådan indlægges nyheder på DSqF s hjemmeside trin for trin Sådan indlægges nyheder på DSqF s hjemmeside trin for trin Systemkrav For at kunne bruge Composite kræves: Windows 95 eller nyere (bemærk - kun Windows kan bruges) Browseren Internet Explorer 6.0 eller

Læs mere

Opsætte f.eks. en rejsebeskrivelse med tekst og billede i Draw side 1

Opsætte f.eks. en rejsebeskrivelse med tekst og billede i Draw side 1 side 1 Hvis man vil lave en opsætning af rejsebeskrivelse og billeder, kan man også gøre det i DRAW. Denne vejledning vil vise hvordan man indsætter hjælpelinjer så man laver en pæn opstilling med billede

Læs mere

Annemette Søgaard Hansen/www.dinwebvejleder.dk

Annemette Søgaard Hansen/www.dinwebvejleder.dk Google Docs Dokumenter Indholdsfortegnelse Værktøjer... Side 3 Menuer... Side 5 Opgave... Side 8 Få adgang til filerne fra din computer... Side 16 Vejledende løsning... Side 17 GoogleDocs Dokumenter 2

Læs mere

Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN

Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN Indholdsfortegnelse Introduktion... 2 Definitioner... 2 Generelt... 3 Oprettelse af en skabelon... 4 Sidetypeskabeloner... 5 Globale displaymoduler...

Læs mere

Indhold. 1. Adgang og afslutning

Indhold. 1. Adgang og afslutning 1 Indhold 1. Adgang og afslutning 2. Menupunkter 3. Tekst 4. Billeder 5. Video 6. Lyd 7. Bannere 8. Bokse 9. Dokumenter 10. Links 11. Iframe 12. Markedspladsen 13. Nyheder 14. Job 15. Kalender 16. Selvbetjeningsbjælken

Læs mere

Kom i gang vejledning til modelflyveklubber.dk

Kom i gang vejledning til modelflyveklubber.dk Kom i gang vejledning til modelflyveklubber.dk Version 1.2 30. september 2012 http://www.modelflyveklubber.dk/data/vejledning-klubweb.pdf Kom i gang vejledning til modelflyveklubber.dk, version 1.2 1/15

Læs mere

Vejledning til udskrivning af etiketter/labels og konvolutter i Blåt Medlem

Vejledning til udskrivning af etiketter/labels og konvolutter i Blåt Medlem Vejledning til udskrivning af etiketter/labels og konvolutter i Blåt Medlem Blåt Medlem giver mulighed for at udskrive etiketter/labels og kuverter til medlemmerne af den enhed man er medlemsansvarlig

Læs mere

Manual for redaktører

Manual for redaktører Manual for redaktører Leveret af DFF-EDB.dk 2 INDHOLDSFORTEGNELSE: 1. Hjemmesider i Umbraco... 5 2. Kom i gang med Umbraco... 5 2.1 Login... 5 2.1.1. Ændring af login... 5 2.2. Når du arbejder på siden,

Læs mere

PowerPoint 2003. Kursusmateriale til FHF s kursister

PowerPoint 2003. Kursusmateriale til FHF s kursister PowerPoint 2003 Kursusmateriale til FHF s kursister Indholdsfortegnelse: Opgave 1 Hvad er en Præsentation?... 2 Opgave 2 vælg emne + opret dias... 3 Opgave 3 Indsæt objekter / billeder... 4 Opgave 4 Brugerdefineret

Læs mere

Mini-guide for opdatering af hjemmesiden for. SOIF www.soif.dk

Mini-guide for opdatering af hjemmesiden for. SOIF www.soif.dk Mini-guide for opdatering af hjemmesiden for SOIF www.soif.dk Senest opdateret: 03-07-2009 Indholdsfortegnelse 2 Indholdsfortegnelse 2 Lidt generelt om KlubCMS 3 Brugere/Brugergrupper 3 Sideopbygning:

Læs mere

Kom godt i gang med. Gadstrup Fodbolds Hjemmeside. Udarbejdet af:

Kom godt i gang med. Gadstrup Fodbolds Hjemmeside. Udarbejdet af: Kom godt i gang med Gadstrup Fodbolds Hjemmeside Udarbejdet af: Forretningsstøtte Søren Tofte Version 1.0 24.2.2011 Indhold Sådan kommer du i gang?... 3 Log ind... 4 Mine oplysninger... 5 Klub CMS... 6

Læs mere

Redaktørvejledning for www.bredstrup-pjedsted.dk Skriv en artikel

Redaktørvejledning for www.bredstrup-pjedsted.dk Skriv en artikel Arbejdsgang - Skriv artiklens tekst - Gør billeder klar - Log-in på hjemmesiden - Opret ny artikel - Vælg kategori - Skriv overskrift - Indsæt tekst - Tilføj billeder - Gennemgå artiklens indstillinger

Læs mere

Lyngby Svømmeklub Hjemmeside Guide. Indholdsfortegnelse

Lyngby Svømmeklub Hjemmeside Guide. Indholdsfortegnelse Indholdsfortegnelse Indledning... 2 Hjemmeside struktur... 3 Rettigheder... 4 Opret Nyhed... 6 Opret Kalender Event... 7 Opret Arrangement... 9 Fast side... 10 Forside... 11 Tekst... 11 Billeder... 11

Læs mere

Vejledning for LOF s afdelingshjemmeside

Vejledning for LOF s afdelingshjemmeside Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Marts 2012 Adresse: http://dinafdeling.lof.dk/ Rediger hjemmeside i Umbraco: http://dinafdeling.lof.dk/umbraco/ Mobilside: Der er lavet en

Læs mere

Manual til Sitecore Institutions- og projekthjemmesider Silkeborg Kommune, 16. september 2013

Manual til Sitecore Institutions- og projekthjemmesider Silkeborg Kommune, 16. september 2013 Manual til Sitecore 1 VELKOMMEN Silkeborg Kommune bruger systemet Sitecore til at opbygge hjemmesider i. Institutions- og projekthjemmesider er bygget op over en fast skabelon med et fast design. Der er

Læs mere

Skifte til Excel 2010

Skifte til Excel 2010 I denne vejledning Microsoft Excel 2010 ser meget anderledes ud end Excel 2003, og vi har derfor oprettet denne vejledning, så du hurtigere kan komme i gang med at bruge programmet. Læs videre for at få

Læs mere

Manual til hjemmeside i Typo3

Manual til hjemmeside i Typo3 Manual til hjemmeside i Typo3 Gode tips og genvejstaster Ét linieskift Ctrl + A Ctrl + C Ctrl + X Ctrl + V shift + enter (tasten du normalt bruger til linieskift) Markér alt Kopier Klip Sæt ind Oprettelse

Læs mere

Quickguide til kredscms. Login

Quickguide til kredscms. Login Quickguide til kredscms Dette er en quickguide, der vil præsentere dig for de mest basale funktioner i kredscms. Finder du ikke svar her, så prøv at spørge andre webmastere via debatforummet på leder.fdf.dk:

Læs mere

Designmanual for websider

Designmanual for websider Designmanual for websider 31. marts 2009 Version 1.1. Denne manual beskriver de gældende retningslinjer for Aalborg Universitets websider. Det vil sige websider der benytter aau.dk i domænenavnet er omfattet

Læs mere

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS4, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,

Læs mere

Opstart. I gang med Dreamweaver. Læs mere om...

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS5, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,

Læs mere

Siteloom manual for Comwells webredaktører

Siteloom manual for Comwells webredaktører Siteloom manual for Comwells webredaktører Generelt Hvad er SL: SiteLoom er redigeringsprogrammet bag comwell.com websitet, som gør det muligt for folk uden programmeringskundskaber, at redigere og tilføje

Læs mere

Vejledning for opdatering af hjemmesiden opbygget med. KlubCMS

Vejledning for opdatering af hjemmesiden opbygget med. KlubCMS Vejledning for opdatering af hjemmesiden opbygget med KlubCMS Indholdsfortegnelse Indhold Indholdsfortegnelse... 2 Indledning... 3 Lidt generelt om KlubCMS... 3 Sideopbygning:... 4 Brugere/Brugergrupper...

Læs mere

Formatering, typografier og sidelayout (I)

Formatering, typografier og sidelayout (I) Disposition for kursus i Word 2007 Formatering, typografier og sidelayout (I) Demo Øvelser Demo Øvelser Demo Øvelser Om formatering og tekstombrydning o Vigtig øvelse: Ombryd tekst.docx Ny typografi Opret

Læs mere

IsenTekst Indhold til Internettet. Manual til Wordpress.

IsenTekst Indhold til Internettet. Manual til Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

Microsoft. fra Word 2003

Microsoft. fra Word 2003 I denne vejledning Microsoft Word 2010 ser meget anderledes ud end Word 2003, og vi har derfor oprettet denne vejledning, så du hurtigere kan komme i gang med at bruge programmet. Læs videre for at få

Læs mere

Sådan redigerer du en hjemmeside i Umbraco

Sådan redigerer du en hjemmeside i Umbraco Brugermanual til din boligafdelings hjemmeside Sådan redigerer du en hjemmeside i Umbraco Indhold Introduktion... 2 Log på Umbraco og redigér din hjemmeside... 3 Opret ny side... 7 Gem side uden at udgive/publicere

Læs mere

Umbraco. Brugerdokumentation

Umbraco. Brugerdokumentation 2 Umbraco Brugerdokumentation Indholdsfortegnelse Generel dokumentation... 3 Hvordan logger jeg ind i CMS et?... 3 Sidertyper... 3 Content... 3 Forside... 3 Sektionsforside... 3 Artikel... 3 Servicemappe...

Læs mere

Drejebog til tractorpulling.dk

Drejebog til tractorpulling.dk Drejebog til tractorpulling.dk Generelt På hjemmesiden benyttes følgende som standard: - Skrifttype: Verdana - Skriftstørrelse: 12px / 9pt. 4. oktober 2011 Moskjær Marketing Falkevej 4 DK-6920 Videbæk

Læs mere

Indhold. Case 1: Introduktion 3. Case 2: Vælg og indstil tema 12. Case 3: Sider og indlæg 17

Indhold. Case 1: Introduktion 3. Case 2: Vælg og indstil tema 12. Case 3: Sider og indlæg 17 1. udgave 2012 Udgivet af Softworld Kurser A/S Kopiering samt gengivelse af indholdet er ikke tilladt, medmindre der er givet skriftlig tilladelse herom. Copyright Softworld Kurser A/S Forfatter: Martin

Læs mere

Gå ind på forsiden til hjemmesiden. Skriv typo3 i adresselinjen og tryk på retur.

Gå ind på forsiden til hjemmesiden. Skriv typo3 i adresselinjen og tryk på retur. Adgang til Back-end Gå ind på forsiden til hjemmesiden. Skriv typo3 i adresselinjen og tryk på retur. typo3 Skriv herefter brugernavn og adgangskode i de respektive felter og klik på Login Den følgende

Læs mere

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold:

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress: Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

Filtyper, filformat og skabelon. Tabel. Tekstombrydning. Demo Fremstil, gem og brug en skabelon. Øvelser Fremstil, gem og brug en skabelon

Filtyper, filformat og skabelon. Tabel. Tekstombrydning. Demo Fremstil, gem og brug en skabelon. Øvelser Fremstil, gem og brug en skabelon Disposition for kursus i Word 2007 Filtyper, filformat og skabelon Demo Fremstil, gem og brug en skabelon Øvelser Fremstil, gem og brug en skabelon Tabel Demo Opret en tabel ud fra en tekst Øvelser Opret

Læs mere

Google websites. https://sites.google.com. Pædagogiske og didaktiske mål

Google websites. https://sites.google.com. Pædagogiske og didaktiske mål Google websites https://sites.google.com Pædagogiske og didaktiske mål Et værktøj til at samle og dele klassens materialer og noter på ét sted med mulighed for et lækkert layout. Der kan lægges dokumenter

Læs mere

Tilpas: Hurtig adgang

Tilpas: Hurtig adgang Tilpas: Hurtig adgang Genveje, Se skærmtips Se tips Hold alt tasten nede. Og brug bogstaver Word Fanen Filer PDF dokument Brug skabelon Visninger Husk Luk ved fuldskærmsvisning Brug zoom skyder Marker,

Læs mere

Dynamicweb Quickguide

Dynamicweb Quickguide Brugervejledning Dynamicweb Quickguide Version: 1.1 2012.03.15 Dansk JURIDISK MEDDELELSE Copyright 2012 Dynamicweb Software A/S. Alle rettigheder forbeholdes. Dette dokument eller dele heraf må på ingen

Læs mere

Manual til Y s Men International Region Danmarks hjemmeside system til klubberne

Manual til Y s Men International Region Danmarks hjemmeside system til klubberne Manual til Y s Men International Region Danmarks hjemmeside system til klubberne Opdateret: 31. januar 2011 Danmarks Kirkelige Mediecenter og Y s Region Danmark Materialet må ikke videregives i nogen form

Læs mere

Her ser du dit arbejde i preview undervejs og udgiver dit arbejde når du er færdig. (se side 4)

Her ser du dit arbejde i preview undervejs og udgiver dit arbejde når du er færdig. (se side 4) Sitecore vejledning Hvad er det? Sitecore er det program, den officielle del af Spejdernet laves i. Sitecore er et Content Management System, dvs. indholds-håndteringssystem til hjemmesider. Hvordan starter

Læs mere

Vejledning i Powerpoint

Vejledning i Powerpoint Indholdsfortegnelse Startdias Startdias... 1 Indsætte nyt dias... 1 Tekst... 1 Links til web... 2 Indsæt et billede... 2 Lyd... 3 Baggrund... 3 Animation... 3 Handlingsknapper... 4 Redigering... 6 Overgange...

Læs mere

Word-5: Tabeller og hængende indrykning

Word-5: Tabeller og hængende indrykning Word-5: Tabeller og hængende indrykning Tabel-funktionen i Word laver en slags skemaer. Word er jo et amerikansk program og på deres sprog hedder skema: table. Det er nok sådan udtrykket er opstået, da

Læs mere

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress.

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress. Wordpress manual Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting og funktioner i Wordpress, så du selv kan redigere indholdet eller tilføje

Læs mere

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16 GRAFISK WORKFLOW Indhold Grafisk workflow Procesbeskrivelse Inspiration 5 Skitser 6 Flowchart Typografi og farver 8 Skelet 9 Storyboard 2 Html, css og seo 6 Grafisk workflow Opgaven At skabe et nyt og

Læs mere

Mikkel Skovs hjemmeside Ledervedlejning

Mikkel Skovs hjemmeside Ledervedlejning Mikkel Skovs hjemmeside Ledervedlejning Version 1.1 10/08/2008 Indhold Indledning...1 Åbningsside...2 Login...5 Leder Info...5 Oprettelse af indhold...5 Oprettelse af artikel...5 Gem artikel...11 Hvem

Læs mere

Galleri modul. Side 1 af 18

Galleri modul. Side 1 af 18 Galleri modul Side 1 af 18 Indholdsfortegnelse Indholdsfortegnelse... 2 Installation... 3 Oprette menupunkt... 5 Kategoriseret menupunkt (Avanceret)... 6 Opsætning... 9 Generel opsætning... 10 Opsætning

Læs mere

Velkommen til MODx kursus

Velkommen til MODx kursus Velkommen til MODx kursus Dette er en gennemgang af den mest basale funktionalitet i vores nye hjemmeside redigerings værktøj. MODx er et meget simpelt CMS (Content Management System), der gør det muligt

Læs mere

Oprettelse og vedligeholdelse af ejendomsmæglers egen hjemmeside

Oprettelse og vedligeholdelse af ejendomsmæglers egen hjemmeside Oprettelse og vedligeholdelse af ejendomsmæglers egen hjemmeside Før du går igang... 2 Sådan kommer du ind i cms-systemet.... 2 Princippet i at arbejde i et cms... 3 Upload og administration de billeder,

Læs mere

Dette dokument beskriver SUMOshop Backend v3, med fokus på ændringer ift. v2.

Dette dokument beskriver SUMOshop Backend v3, med fokus på ændringer ift. v2. 1 SUMOshop Backend v3 Dette dokument beskriver SUMOshop Backend v3, med fokus på ændringer ift. v2. Backend v3 er primært en visuel opdatering i et mere rent og moderne design. Hertil er der en række helt

Læs mere

Diagrammer visualiser dine tal

Diagrammer visualiser dine tal Diagrammer visualiser dine tal Indledning På de efterfølgende sider vil du blive præsenteret for nye måder at arbejde med Diagrammer på i Excel. Vejledningen herunder er vist i Excel 2007 versionen, og

Læs mere

Dokumentation for administration af it-systemer i PD30

Dokumentation for administration af it-systemer i PD30 Dokumentation for administration af it-systemer i PD30 1. Sikkerhed 2. Mail 3. Cloud Drive 4. Elektronisk reservation 5. Hjemmeside 1. Sikkerhed Sikkerheden for it-systemerne i PD30 hænger tæt sammen med

Læs mere

Manual for Synkron hjemmesider

Manual for Synkron hjemmesider Manual for Synkron hjemmesider Denne manual tilhører: Brugernavn: (username) Adgangskode: (password) 1 Start med sitetræet: Sitetræet er centralt. Det er her, dit website er. Det er her, du bygger dine

Læs mere

Manual CoffeeCup Visitkort konsulenter

Manual CoffeeCup Visitkort konsulenter Manual CoffeeCup Visitkort konsulenter Indhold 2 Start Lidt om sidens layout 3 Åbn den downloadede fil i CoffeeCup og gem den som dit eget projekt 3 Knapperne Ring og Mail Indsæt nyt link på Ring og mail

Læs mere

Når du har logget dig ind, ser du Randers Kommunes byvåben midt på siden. I venstre side er der en række mapper:

Når du har logget dig ind, ser du Randers Kommunes byvåben midt på siden. I venstre side er der en række mapper: DXP vejledning Generelt: DXP er et værktøj til at fremstille præsentationsmaterialer (foldere, brochurer, løbesedler mv.) DXP egner sig kun til mindre brochurer og lign., da den største skabelon kan rumme

Læs mere

Administrator manual

Administrator manual Revision 1 Administrator manual INDHOLD LOG IND 1 OVERBLIK 1 ARBEJDSRUM 1 MEDARBEJDERE 2 OPRET NY MEDARBEJDER 2 TRIN 1 AF 4: NAVN OG OPLYSNINGER 2 TRIN 2 AF 4: LEGITIMATION 2 TRIN 3 AF 4: EFFEKTIVITETSNIVEAU

Læs mere

Manual til WordPress CMS

Manual til WordPress CMS Manual til WordPress CMS 1. Log ind på din Wordpress-side For at arbejde på din hjemmeside skal du først logge ind på administrationsdelen. Muligvis har du et direkte link på siden. Ellers er adressen

Læs mere

få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside

få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside 1 Alle har ret og råd til en professionel hjemmeside på få minutter GoMinisite

Læs mere

IsenTekst Indhold til Internettet. Manual til Wordpress.

IsenTekst Indhold til Internettet. Manual til Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress: Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er lavet

Læs mere

Vejledning til Photofiltre nr. 108 Side 1. Lave visitkort i dankort størelse med eget foto

Vejledning til Photofiltre nr. 108 Side 1. Lave visitkort i dankort størelse med eget foto Side 1 I denne vejledning vises hvordan man kan lave visitkort, på samme måde som der blev lavet bordkort. Vi vil her som baggrund bruge et af vores egne foto. Opsætningen foregår i LibreOffice Draw og

Læs mere

Brugerguide til FlexCMS

Brugerguide til FlexCMS Brugerguide til FlexCMS Kom i gang med at bruge din hjemmeside 1 VELKOMMEN TIL FLEXCMS... 3 1. LOGIN... 5 2. HJEMMESIDENS TERMINOLOGI... 6 3. LAYOUT... 7 4. OPRET OG TILPAS FORSIDEN... 8 4.1 OPRETTE SIDEEGENSKABER...

Læs mere

Tastemanual til Webbyggeren

Tastemanual til Webbyggeren Tastemanual til Webbyggeren Denne tastemanual er opbygget således, at eleverne skal lave deres hjemmeside i en allerede konstrueret hjemmesideskabelon, som de kan arbejde videre i, lægge tekst ind i, ændre

Læs mere

Typografi og layout i Word 2010

Typografi og layout i Word 2010 Ret&Rigtigt F12 Niels Erik Wille Typografi og layout i Word 2010 Papirformat og papirets orientering (højformat / bredformat) Vælges i menuen Sidelayout: Man kan vælge Retning (højformat / bredformat)

Læs mere

Easy Guide i GallupPC

Easy Guide i GallupPC Easy Guide i GallupPC Version. 6.00.00 Gallup A/S Masnedøgade 22-26 DK 2100 København Ø Telefon 39 27 27 27 Fax 39 27 50 80 Indhold SÅDAN KOMMER DU I GANG MED AT ANVENDE GALLUPPC... 2 TILFØJELSE AF UNDERSØGELSER

Læs mere

SIDEN PÅ WORDPRESS.COM

SIDEN PÅ WORDPRESS.COM WordPress WordPress er et fantastisk program til blog og til hjemmesider, hvor du gerne vil kunne rette via din browser. WordPress er meget udbredt og det er derfor nemt at finde fora, templates og hjælp

Læs mere

Hardeknud gruppe. Brugermanual. Tilegnet redaktører af gruppeweb hjemmeside

Hardeknud gruppe. Brugermanual. Tilegnet redaktører af gruppeweb hjemmeside Hardeknud gruppe Brugermanual Tilegnet redaktører af gruppeweb hjemmeside Indhold Indledning... 4 Om denne brugermanual... 4 Formålet med Gruppeweb... 4 Hjemmesidens opbygning... 4 Redaktører... 5 Log

Læs mere

Picto Selector. Lav dine egne flotte symbolark på den nemme måde. Version: Oktober 2012

Picto Selector. Lav dine egne flotte symbolark på den nemme måde. Version: Oktober 2012 Picto Selector Lav dine egne flotte symbolark på den nemme måde Version: Oktober 2012 Indholdsfortegnelse Hvad er Picto Selector?...4 USB?...4 Hent programmet...4 Installer programmet på din computer...5

Læs mere

3S brugermanual VERSION 2

3S brugermanual VERSION 2 3S brugermanual VERSION 2 Version 2.2 - Udgivet 20/7 2012 3S brugermanual Kom igang med 3S Med denne manual kan du hurtigt komme i gang med at bruge dine nye eller opdaterede hjemmeside. Det er en trin-for-trin

Læs mere

SmartWeb Brugermanual

SmartWeb Brugermanual SmartWeb Brugermanual Table of Content Table of Content... 1 Best Practice SmartWeb:... 2 Implementering... 4 Egenskaber:... 5 Filer:... 7 Oprettelse af Kategori... 9 Sider og Tekster:... 11 Slideshow...

Læs mere

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Sådan opdaterer du din hjemmeside i Wordpress.

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Sådan opdaterer du din hjemmeside i Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet og lægge nyt på din hjemmeside. Guiden er skrevet

Læs mere

Brugervejledning. Hjemmesider med Cmsimple.

Brugervejledning. Hjemmesider med Cmsimple. 1af23 Brugervejledning. Hjemmesider med Cmsimple. 1. Forord. Denne brugervejledning er fremstillet for at hjælpe personer ved Lokalhistorisk Arkiver i ny Sønderborg kommune, som kun har ringe kendskab

Læs mere

Kom i gang med. Kapitel 9 Impress: Præsentationer i OpenOffice.org. OpenOffice.org

Kom i gang med. Kapitel 9 Impress: Præsentationer i OpenOffice.org. OpenOffice.org Kom i gang med Kapitel 9 Impress: Præsentationer i OpenOffice.org OpenOffice.org Rettigheder Dette dokument er beskyttet af Copyright 2005 til bidragsyderne som er oplistet i afsnittet Forfattere. Du kan

Læs mere

Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco

Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco Adresse: http://dinafdeling.lof.dk/ Rediger hjemmeside i Umbraco: http://dinafdeling.lof.dk/umbraco/ HUSK ingen www i adressen, skriv blot

Læs mere

På min hjemmeside under Libre Draw finder du nederst en skabelon Skabelon med 2 spalter. Det er den vi skal bruge i dette eksempel.

På min hjemmeside under Libre Draw finder du nederst en skabelon Skabelon med 2 spalter. Det er den vi skal bruge i dette eksempel. Side 1 Mange kender programmet Microsoft Publisher hvor man sætte forskellige ting op i, blade, skrivelser, sange m.m. Libre Office Draw der er en del af den gratis LibreOffice pakke kan noget i samme

Læs mere

Patient Database - Manual

Patient Database - Manual Patient Database - Manual Side 1 af 36 Adgang til systemet... 4 Glemt brugernavn og kode... 4 Opret projekt (kun System Administrator)... 6 Klik på NYT PROJEKT -knappen øverst til venstre.... 6 Udfyld

Læs mere

Sensus. Grafisk design og tilgængelighed

Sensus. Grafisk design og tilgængelighed Grafisk design og tilgængelighed Mange tilgængelighedsproblemer bliver skabt allerede i forbindelse med udviklingen af netstedets grafiske udtryk. Tilgængelige netsteder er ikke nødvendigvis ensbetydende

Læs mere

Hjælpeguide til Digitalisér.dk

Hjælpeguide til Digitalisér.dk Hjælpeguide til Digitalisér.dk Hvad er Digitalisér.dk Digitalisér.dk er et socialt netværk og værktøj som du kan anvende på flere forskellige måder. Har du viden som du ønsker at dele og debattere med

Læs mere

Oversigt over formateringsmærker i Microsoft Word

Oversigt over formateringsmærker i Microsoft Word Oversigten på de følgende sider viser størstedelen af de forskellige formateringsmærker, der kan optræde i et Microsoft Word-dokument. Formateringsmærker vises kun på skærmen de kommer ikke med i udskrift.

Læs mere

IsenTekst Indhold til Internettet. Manual til Wordpress.

IsenTekst Indhold til Internettet. Manual til Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress: Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er lavet

Læs mere

Heldigvis har systemet indbygget en hjælp, som man kan benytte, hvis denne vejledning ikke berører det opståede problem.

Heldigvis har systemet indbygget en hjælp, som man kan benytte, hvis denne vejledning ikke berører det opståede problem. Indhold Introduktion...2 Hjælp...2 Office knappen...2 Menulinjen...3 Fast værktøjslinje Hurtig adgang...3 Menupunkter...4 Startside...4 Indsæt...5 Sidelayout...5 Referencer...6 Forsendelser...6 Gennemse...6

Læs mere

1) Opret ny version af side... 8. 2) Lås version af side til din profil... 8

1) Opret ny version af side... 8. 2) Lås version af side til din profil... 8 Sitecore Kvikguide Indholdsfortegnelse: Log ind i hjemmeside CMSet eller intranet CMSet og vælg editor... 2 Redigering i Sitecore OLRKL(U)... 2 Content Editorens opbygning... 3 Felterne i Content Editorens

Læs mere

FREMSTILLING AF EN BOG MED BOD EASYBOOK

FREMSTILLING AF EN BOG MED BOD EASYBOOK FREMSTILLING AF EN BOG MED BOD EASYBOOK Her kan du læse om, hvordan du nemt kan udforme dine bog online med billeder og tekst. Forudsætning for anvendelsen af BoD easybook: Du skal have en internetforbindelse

Læs mere

Guide til Umbraco CMS

Guide til Umbraco CMS web Guide til Umbraco CMS Indhold Indledning 3 Kompatible browsere 3 Log ind i Umbraco 4 Content-delen 5 Indholdstræet 5 Tilføjelse af en side/sektion 7 Sortering af indhold 12 Galleri 14 Mediebibliotek

Læs mere

DesignPro II Side 11. Grupper

DesignPro II Side 11. Grupper DesignPro II Side 11 Grupper Hvis man arbejde helt fra grunden, er det ofte en fordel at kunne samle tekst, billeder og baggrund til en fast gruppe, som så kan flyttes rundt, og ændres i størrelsen. I

Læs mere

Pris: 149 kr. ex. moms. Version 7.0. InternetService A/S. Side 1 af 63

Pris: 149 kr. ex. moms. Version 7.0. InternetService A/S. Side 1 af 63 Version 7.0 InternetService A/S Pris: 149 kr. ex. moms Side 1 af 63 InternetService A/S // Jernbanegade 23 B // Postboks 621 // DK 4000 Roskilde // T: 7027 8910 // F: 7027 8911 // CVR: 2522 2369 Indeks

Læs mere

Inner Wheel. Vejledning. i brug af. nyt CMS system. for Inner Wheel Klubber

Inner Wheel. Vejledning. i brug af. nyt CMS system. for Inner Wheel Klubber Inner Wheel Vejledning i brug af nyt CMS system for Inner Wheel Klubber CMS vejledning-5, juni 2013/bha 1 Indholdsfortegnelse 1. Indledning... 4 2. Valg af browser... 5 3. Start... 6 3.1 Den åbne side...

Læs mere