1. No category

Content Management Software
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å www.tangora.dk/manualer og www.tangora.dk/developerblog.
© 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.
Side 2 af 82
Content Management Software
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 ................................................................. 10
Sitelayouts...................................................................................................... 11
Hvad er et sitelayout? .............................................................................. 11
Modulet Site Designer ............................................................................. 11
Billeder .................................................................................................... 12
Vis billeder i en karrusel................................................................... 12
Farver ...................................................................................................... 12
Sådan opretter du farver fra et billede ............................................. 12
Navigation............................................................................................... 14
Typografier.............................................................................................. 15
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 .................................. 21
Checkliste: Byg et sitelayout med Visual Designer.................................... 21
Ad 1: Upload billeder ...................................................................... 21
Ad 2: Opbyg farvepalette ................................................................ 21
Ad 3: Opret sitelayoutet, vælg farvepalette og preview-side mm. ... 22
Ad 4: Indsæt spalter, billeder, navigation, sideindhold mm............. 22
Automatisk eller manuel spaltebalancering?.................................... 26
Ad 5: Tilpas indryk, formatering, accentfarve mv. ........................... 27
Ad 6: Test med preview .................................................................. 30
Ad 7: Publicer.................................................................................. 31
Tips til Visual Designer .................................................................... 31
URL-syntaks ............................................................................................. 31
URL-syntaks og søgemaskiner.......................................................... 32
Indbyg funktioner i (site)layouts..................................................................... 33
Snippets = Tangora "funktionspakker" ..................................................... 33
Eksempel: Snippettypen 'Billedkarrusel' ........................................... 34
Mere om snippets på Tangora Kundecenter.................................... 38
14.07.2010
© Tangora Software A/S
Side 3 af 82
Content Management Software
Printvenlige layouts ........................................................................................ 39
Printvenligt Table Designer masterlayout................................................. 39
Printvenligt layout via CSS....................................................................... 39
Sidelayouts..................................................................................................... 40
Udpeg et standard sidelayout ......................................................... 40
Detaljeret styring af sidelayoutets anvendelse.................................. 41
Sitelayout og sidelayouts skal passe sammen........................................... 41
Sådan bygger du et helsides sidelayout ................................................... 42
Sidelayouts med låst indhold................................................................... 46
Sådan laver du et sidelayout med låst indhold ................................ 47
Automatisk visning af fx redigeringsdato via flettefelt...................... 51
Sidelayouts med portalfunktionalitet ....................................................... 52
Anvend ikke cache eller sidelayouts på sider, der skal indlejres ........ 52
Sådan bygger du et sidelayout med portalfunktionalitet ................. 53
Eksempel på sidelayout med nyhedsblok til højre............................ 54
Forskellige sidelayouts til oversigt/detaljevisning...................................... 55
Afsnitslayouts ................................................................................................. 57
Angiv standardafsnitslayout for hvert site ................................................ 57
Sådan opretter du et nyt afsnitslayout ..................................................... 58
Billedregler i afsnitslayouts .............................................................. 59
Sådan sletter du et afsnitslayout .............................................................. 59
Opsætning af funktionssiders layout............................................................... 60
Vis en oversigt som punktliste, tabel eller blokliste................................... 61
Punktliste ........................................................................................ 63
Tabel............................................................................................... 63
Blokliste........................................................................................... 65
Intern navigering i oversigter .......................................................... 71
Detaljevisning.......................................................................................... 75
Layouttips til formularsider og andre input-sider ..................................... 76
Eksempel 1: Opsætning af kontaktformular med Visual Designer .... 76
Eksempel 2: Opsætning af formularside med Table Designer .......... 82
14.07.2010
© Tangora Software A/S
Side 4 af 82
Content Management Software
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
Brødkrummesti
Undermenu(er)
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:
14.07.2010
© Tangora Software A/S
Side 5 af 82
Content Management Software
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
14.07.2010
© Tangora Software A/S
Side 6 af 82
Content Management Software
Visual Designer har desuden en række brugsmæssige fordele:
Intern visning af layout
Visual Designer
Table Designer
WYSIWYG
Tabel med flettefelter
X
–
Ubegrænset
2 niveauer 1
X
–
Op til 10 2
Max. 3 3
Billedkarrusel
Søgning
Nyhedsbrevtilmelding
Eksternt login
HTML
Flash
Silverlight
Billedkarrusel
Søgning
Nyhedsbrevtilmelding
Eksternt login
HTML
Flash
Formular
Minikurv
Hjælp til fejlsøgning
Indlejrede layouts
Indbyggede designskabeloner til navigation (fx faner)
Antal navigationsniveauer
Snippets
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
14.07.2010
© Tangora Software A/S
Side 7 af 82
Content Management Software
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.
14.07.2010
© Tangora Software A/S
Side 8 af 82
Content Management Software
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.
14.07.2010
© Tangora Software A/S
Side 9 af 82
Content Management Software
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:
14.07.2010
© Tangora Software A/S
Side 10 af 82
Content Management Software
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.
14.07.2010
© Tangora Software A/S
Side 11 af 82
Content Management Software
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.
14.07.2010
© Tangora Software A/S
Side 12 af 82
Content Management Software
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:
14.07.2010
© Tangora Software A/S
Side 13 af 82
Content Management Software
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.07.2010
© Tangora Software A/S
Side 14 af 82
Content Management Software
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
4
Navigation Designer
Denne navigationstype er kun understøttet i Visual Designer og kræver Application
Constructor – se bla. http://www.tangora.dk/Udviklerblog.2712.aspx?recordid2712=42
5
Kombinerede navigationstyper kræver, at licensen indeholder "Ubegrænset antal navigationsniveauer"
14.07.2010
© Tangora Software A/S
Side 15 af 82
Content Management Software
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.
14.07.2010
© Tangora Software A/S
Side 16 af 82
Content Management Software
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.
14.07.2010
© Tangora Software A/S
Side 17 af 82
Content Management Software
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:
14.07.2010
© Tangora Software A/S
Side 18 af 82
Content Management Software
4. 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.
14.07.2010
© Tangora Software A/S
Side 19 af 82
Content Management Software
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:
14.07.2010
© Tangora Software A/S
Side 20 af 82
Content Management Software
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.
14.07.2010
© Tangora Software A/S
Side 21 af 82
Content Management Software
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å www.tangora.dk/kundecenter)
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
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.
14.07.2010
© Tangora Software A/S
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.
Side 22 af 82
Content Management Software
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.
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:
14.07.2010
© Tangora Software A/S
TIP: Du kan gemme
sitelayoutet på forskellige måder:
ƒ Tangora menuen
ƒ Mini-værktøjslinjen
ƒ CTRL+S
Side 23 af 82
Content Management Software
3.
4.
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:
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: 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.
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).
14.07.2010
© Tangora Software A/S
Side 24 af 82
Content Management Software
5.
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:
14.07.2010
© Tangora Software A/S
Side 25 af 82
Content Management Software
8.
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.
10.
Vælg indstillingen Gentag ikke og træk i håndtaget nederst på spalten, så
spaltens højde passer til billedet.
Skift til fanen Indsæt og indsæt logoet i 100% spalten:
14.07.2010
© Tangora Software A/S
Side 26 af 82
Content Management Software
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:
14.07.2010
© Tangora Software A/S
Side 27 af 82
Content Management Software
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:
14.07.2010
© Tangora Software A/S
Side 28 af 82
Content Management Software
2.
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:
14.07.2010
© Tangora Software A/S
Side 29 af 82
Content Management Software
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 16.
6.
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.
14.07.2010
© Tangora Software A/S
Side 30 af 82
Content Management Software
8.
Marker Navigation 2 og vælg navigationstypografien Lodrette bokse med
afrundede hjørner i hvid, grå og turkis. Bekræft, at undernavigationerne skal
have samme typografi:
9.
Opret en kopi af denne typografi, giv den et sigende navn og tilpas farver
samt indrykning ved hjælp af Navigation Designer:
10. Skift til fanen Side, vælg en baggrundsfarve og gem sitelayoutet.
Ad 6: Test med preview
Ønsker du at teste sitelayoutet i forhold til de sider, der rent faktisk findes i
webløsningen, i stedet for eksempelindholdet i Site Designer, skal du vælge
knappen Preview i miniværktøjslinjen eller via Tangora knappen.
14.07.2010
© Tangora Software A/S
Side 31 af 82
Content Management Software
Ad 7: Publicer
Inden sitelayoutet kan tages i brug på websitet, skal det publiceres. Det gøres
ved at klikke på knappen Publicer i miniværktøjslinjen, den tilsvarende knap i
Tangora knappens menu eller ved at taste CTRL+U.
Flere eksempler
Se også blogindlægget Sådan laver du en søgemaskinevenlig grafisk navigation
på Tangora Kundecenter.
Tips til Visual Designer
ƒ Brug så få spalter som muligt – sæt indryk/margen på direkte på elementerne
ƒ Flyt spalter og elementer med piletasterne
ƒ Marker en spalte, hvis du vil indsætte fx navigation heri – ellers indsættes navigationen nederst i layoutet
ƒ CTRL+piletast bytter rækkefølge i et spaltesæt
ƒ Brug Vis/skjul spaltegrænser til "pseudo-preview"
ƒ Vis/skjul Element Inspector med F2
ƒ Gem løbende med CTRL+S
ƒ Publicer med CTRL+U
URL-syntaks
I Tangora Portal CMS kan man via sitelayoutet styre, hvordan URL'en ser ud
ved at vælge fx en af disse syntakser under sitelayoutes staminformationer:
ƒ www.website.dk/[Sidetitel].[SideID].aspx (=standardsyntaks)
ƒ www.website.dk/page[SideID].aspx
ƒ www.website.dk/[Site]/[Sidetitel]
ƒ www.website.dk/[Site]/[Sidetitel]/[Sidetitel]
Standardsyntaksen www.website.dk/[Sidetitel].[SideID].aspx kombinerer hastighedsfordelene fra "page[SideID]" og søgemaskinefordelene ved "[Sidetitel]"
syntakserne.
14.07.2010
© Tangora Software A/S
Side 32 af 82
Content Management Software
Standarden for sitelayouts, som er oprettet i ældre versioner af Tangora Portal
CMS, er www.website.dk/?id=[xx]. Denne korte syntaks sikrer, at løsningen er
bagudkompatibel med fx JavaScripts, der læser sidens ID fra URL'en.
URL-syntaksen kan ændres af administratorbrugere, hvis licensen indeholder
modulet Site Designer, samt af Tangora Partnere (uanset licens).
URL-syntaks og søgemaskiner
I Tangora Portal CMS er der mulighed for at bruge sidens titel eller site/titel
som adresse. Disse giver flere muligheder i forhold til søgemaskineoptimering,
men skal omgås med forsigtighed da fx ændring af navnet på en side og/eller
site kan betyde at søgemaskinelinks og eksterne links ikke længere fungerer.
Desuden vil der opstå problemer, hvis flere sider hedder det samme.
14.07.2010
© Tangora Software A/S
Side 33 af 82
Content Management Software
Indbyg funktioner i (site)layouts
Ønsker du at indbygge specialfunktionalitet i et sitelayout eller anden type
layout, kan det gøres på to måder:
ƒ
Anvendelse af egen kode
ƒ
Anvendelse af Tangora snippets
Fælles for begge metoder er, at den pågældende funktionalitet i Visual Designer skal indsættes via en såkaldt kodeblok i layoutet. Du kan redigere kodeblokken direkte i Visual Designer via den indbyggede HTML editor. På den måde
kan du indsætte scripts til ekstern funktionalitet som fx Google Adwords eller
Google Analytics (se evt. http://www.google.dk/services). Skal du indsætte
egen kode i et layout, der er opbygget med Table Designer, kan du indsætte
koden i en given celle i felterne Tekst over/under indhold (dobbeltklik på cellen,
skift til HTML-tilstand i det ønskede felt, indsæt koden og klik OK).
Specialfunktionalitet i
form af eksterne scripts
eller globale flettefelter
kan indsættes i layouts
via en såkaldt kodeblok:
Kodeblokken kan
flyttes rundt i layoutet
på samme måde som
andre elementer.
Ønsker du at trække på funktionalitet, som allerede er til rådighed i Tangora,
kan du anvende forskellige såkaldte snippets, som gør det muligt at trække
direkte på et moduls funktionalitet uden selv at skulle skrive kode.
Snippets = Tangora "funktionspakker"
En "Snippet" gør det nemt og hurtigt at indbygge specialfunktionalitet som fx
søgning, billedkarrusel og minikurv i et sitelayout eller sidelayout – uden kodning. Du kan fx definere en søgesnippet og placere den i sitelayoutet, så søgefunktionen er tilgængelig på alle websitets sider – eller du kan lave et sidelayout med en billedkarrusel, der automatisk skifter mellem forskellige billeder.
Her er der indsat en
søgesnippet i sitelayoutet, som trækker
på funktionalitet fra
søgemodulet (modulet
skal være tilgængelig i
løsningen).
OBS: Visse snippets
indeholder begrænset
funktionalitet i Tangora Mini – fx er 'fold
ind/ud'-effekter kun
tilgængelige i Tangora
Portal CMS.
14.07.2010
© Tangora Software A/S
Side 34 af 82
Content Management Software
Det modul, som en snippet "tilhører", skal være tilgængelig i løsningen, for at
du kan anvende den ønskede snippet. Ønsker du således at anvende en søgesnippet, skal webløsningen indeholde modulet Søgning. Snippettyperne
Billedkarrusel og Flash-objekt er inkl. i Tangora Portal CMS, mens Billedkarrusel
kan anskaffes som tilkøb til Tangora Mini.
I Visual Designer indsættes snippets i en kodeblok som et flettefelt, typisk
{system.embed.snippet(ID)}. Minikurve indsættes dog via flettefeltet
{system.shoppingbasket.page(sideID)}, hvor sideID er ID'et på den tilhørende
indkøbskurv-side (kræver modulet Indkøbskurv). Sider kan generelt indlejres i
layouts via flettefeltet {system.embed.page(sideID)}.
OBS: Nogle snippet-typer er kun understøttet af Table Designer. Disse er ikke
tilgængelige under menupunktet Snippets men kan kun vælges, når du arbejder med Table Designer.
Eksempel: Snippettypen 'Billedkarrusel'
Billedkarrusellen skifter automatisk mellem en given mængde billeder, og du
kan selv styre, hvor lang tid billederne skal vises ad gangen, samt hvordan
overgangene mellem de forskellige billeder skal være. Du kan fx lade billederne
'fade' ud og ind:
Overgangene kan enten defineres overordnet for selve billedkarrusellen eller
lokalt på det enkelte billede.
Transparens eller overlap?
Hvis du vælger, at billedkarrusellens baggrund skal være transparent, vil sitets
baggrund kunne ses, når et billede mister synlighed i forbindelse med en overgang. Vælger du i stedet indstillingen 'Overlap', vises det næste billede i baggrunden. Denne indstilling er af væsentlig betydning, når du bestemmer, hvilke overgange du vil anvende på dine billeder.
Overgange
En overgang kan bestå af én effekt, eller den kan være sammensat af flere effekter. Man kan fx designe en helt enkel overgang, der får et billede til at fade
ind via fade effekten, eller man kan kombinere flere effekter, så overgangen får
billedet til at flyve ind fra siden, samtidig med at det zoomer og fader. At designe en overgang kan derfor være en proces, der kan tage lidt tid, men eftersom overgange kan gemmes, kan de genbruges i alle andre billedkarruseller i
hele løsningen. De kan også eksporteres/importeres på tværs af løsninger.
14.07.2010
© Tangora Software A/S
OBS: Billedkarrusellen
er inkluderet i grundmodulet i Tangora
Portal CMS men skal
tilkøbes til Tangora
Mini.
Side 35 af 82
Content Management Software
Overgang ind eller ud?
Når man opretter en overgang bliver man på første fane bedt om at angive en
retning. Retningen relaterer sig til at et billede i billedkarrusellen kan have to
typer overgange. En overgang som synliggør billedet (retning ind) og/eller en
overgang som fjerner billedet igen (retning ud):
Dette koncept er en smule anderledes end den traditionelle metode, hvor en
overgang er defineret som en animation der erstatter billede A med billede B:
Billede A Æ Overgang Æ Billede
I billedkarrusellen er overgangen mellem to billeder derimod bestående af to
overgange:
Billede A Æ Overgang ud (billede A) Æ Overgang ind (billede B) Æ Billede B
Et billede har derfor følgende livscyklus i billedkarrusellen:
Overgang ind Æ Almindelig visning Æ Overgang ud
Overgange er valgfrie og billeder kan derfor have ingen overgange, kun en
ind-overgang, kun en ud-overgang eller både en ind- og ud-overgang.
Effekter
Effekter er en måde hvorpå et billede kan synliggøres eller forsvinde. Eksempelvis kan et billede præsenteres ved at fade ind, at zoome ind, eller at flyve ind fra
siden. Der findes forskellige effekter med hver deres indstillingsmuligheder.
Eksempelvis kan man ved Fly effekten vælge, om billedet skal flyve ind fra høj-
14.07.2010
© Tangora Software A/S
Side 36 af 82
Content Management Software
re, venstre, top eller bund. Alle effekter har en easing parameter, som kontrollerer effektens 'acceleration':
Eksempelvis vil en Fade effekt uden easing få billedet til at 'fade' ind/ud i et
ensartet tempo. Med easing kan man få effekten til at starte i højt tempo for
derefter at bremse op – eller måske endda overskyde og hoppe tilbage.
Sådan laver du en billedkarrusel-snippet
1.
Gå til Design & layout > Snippets og dobbeltklik på typen Billedkarrusel.
2.
Klik på Opret, angiv billedkarrusellens egenskaber (se evt. afsnittene om
overgange og effekter ovenfor) og tilføj de ønskede billeder:
3.
Klik på Gem og test billedkarrusellen på Preview-fanen.
4.
Indsæt billedkarrusellen i et sitelayout, sidelayout eller på en side ved hjælp
af flettefeltet {system.embed.snippet(ID)}:
14.07.2010
© Tangora Software A/S
OBS: Det er vigtigt, at
alle billeder i karrusellen har samme bredde
og højde – ellers vil
systemet strække
billederne, så de passer
med de angivne mål.
Du kan indstille billedkarrusellen til at anvende et tilfældigt eller
et bestemt startbillede.
I sidstnævnte tilfælde
vil startbilledet være
det, der er placeret
øverst til venstre i
billedfeltet. Du kan
ændre billedernes
rækkefølge ved at
trække dem rundt med
musen:
Dobbeltklik på et
billede i billedfeltet,
hvis du ønsker at tilføje
et link eller andre
egenskaber på billedet:
Side 37 af 82
Content Management Software
5.
Flettefeltet til visning af
billedkarrusellen er her
indsat i en kodeblok i et
sidelayout. Kodeblokken
er indsat i den højre
spalte i et spaltesæt (se
evt. afsnittet "Sådan laver
du et sidelayout med låst
indhold" side 47), hvor
tekstboksen nedenunder
har omløbsindstillingen
Afbryd til begge sider.
Test, at billedkarrusellen virker som ønsket.
Sådan kan det se ud i Tangora Manager på sider, der anvender det pågældende sidelayout:
Her vises flettefeltet for
billedkarrusellen, som
har ID 1.
Gode råd om baggrunde og overgange
ƒ Hvis du har angivet at billederne skal overlappe hinanden, opnås det
bedste resultat ved kun at anvende overgange af samme retning på billederne. Det vil sige at alle billederne i billedkarrusellen skal anvende
enten ind-overgange eller ud-overgange – ikke begge dele.
14.07.2010
© Tangora Software A/S
Side 38 af 82
Content Management Software
ƒ Hvis du har valgt transparent baggrund, kan du med fordel vælge, at
billederne både skal have både en ind- og en ud-overgang. Men her
skal du være opmærksom på, at de overgange der vælges er æstetisk
kompatible.
ƒ Når en ud-overgang og en ind-overgang afvikles direkte efter hinanden, opnås det bedste resultat, hvis overgangene er 'æstetisk kompatible'. Hvis ud-overgangen fx efterlader billedet usynligt, kan man sige at
den er æstetisk kompatibel med alle de ind-overgange, der starter med
at have billedet usynligt. Tilsvarende kan man sige, at en ud-overgang,
der efterlader et groft pixelleret billede, vil fungere bedst sammen med
en ind-overgang, der starter med et groft pixelleret billede.
Se eksempler på forskellige effekter og overgange
http://www.tangora.dk/Udviklerblog.2712.aspx?recordid2712=37
Mere om snippets på Tangora Kundecenter
Du kan læse mere om snippets på Tangora Developerblog (engelsk tekst).
14.07.2010
© Tangora Software A/S
Side 39 af 82
Content Management Software
Printvenlige layouts
Printvenligt Table Designer masterlayout
1. Opret et nyt Table Designer sitelayout (kopier evt. websitets "hovedlayout")
2. Vælg "Ingen navigation" under sitelayoutets staminformationer
3. Tilpas layoutet
4. Tilpas evt. typografier
5. Tilknyt sitelayoutet til en layoutplads (hvis du ikke allerede har gjort det)
6. Gå til Masterlayouts og vælg sitelayoutet som masterlayout
7. Vælg Sitelayouts > [ønsket layout] > Billeder og tilknyt masterlayoutet til et
print-ikon:
TIP: I mange tilfælde vil
det være lettest at
implementere et printvenligt layout ved
hjælp af et Table Designer Masterlayout.
Er websitets sitelayout
opbygget i Visual
Designer, kan man
kalde det printvenlige
layout med følgende
syntaks:
{system.safeurl}layout
=[layoutplads]
Vælg Sitelayouts >
Layoutpladser for at se
hvilken layoutplads, det
ønskede masterlayout
er tilknyttet.
Printvenligt layout via CSS
Indsæt CSS til @media print under Layout > Typografier (Visual Designer)
eller Typografier > Avanceret (Table Designer):
14.07.2010
© Tangora Software A/S
Side 40 af 82
Content Management Software
Sidelayouts
Sidelayouts styrer placeringen af indholdet på de enkelte sider. Et sidelayout
består af forskellige blokke – dvs. "pladsholdere" til tekst, billeder og evt. funktionsindhold fra et eller flere moduler (fx en nyhedsblok), som er placeret i et
layout. Sidelayouts opbygges ved hjælp af peg-og-klik i det indbyggede layoutværktøj – eller helt frit med egen HTML-kode.
TIP: Ved hjælp af et
sidelayout kan du vise
indhold fra flere forskellige moduler på én
side (portalfunktionalitet).
Når du redigerer en side, bestemmer det sidelayout, der er tilknyttet siden,
hvor du kan placere indhold. Sidelayoutet kan også indeholde "låst" indhold i
form af tekst, billeder og flettefelter som fx {system.page.title} og {system.edited.date}. Læs mere i "Automatisk visning af fx redigeringsdato via
flettefelt" side 51.
OBS: Sidelayouts med
portalfunktionalitet kan
kun oprettes i Tangora
Portal CMS – ikke i
Tangora Mini.
OBS: Sidelayouts kan kun oprettes af brugere med administratorrettigheder.
Udpeg et standard sidelayout
Brugere med administratorrettigheder kan udpege et standard sidelayout til
hvert site under sitets egenskaber:
Dette sidelayout vil automatisk være forvalgt, når en bruger opretter en ny side
indenfor det pågældende site. Udpegning af et standard sidelayout kan gøre
det lettere for mindre erfarne brugere at oprette nye sider, og samtidig sikres
et konsistent grafisk design på websitet.
14.07.2010
© Tangora Software A/S
Side 41 af 82
Content Management Software
Detaljeret styring af sidelayoutets anvendelse
Du har mulighed for at styre hvilken type brugere, der kan anvende dit sidelayout, og du kan også angive, hvorvidt sidelayoutet skal kunne bruges inden
for alle eller udvalgte sites/områder:
Tilsvarende kan du styre rettighederne til de enkelte elementer i sidelayoutet
på bruger- og/eller gruppeniveau – se evt. tippet herom på side 43.
Sitelayout og sidelayouts skal passe sammen
Det er vigtigt at indstille sidelayoutets bredde og evt. minimumshøjde, så det
passer ind i sitelayoutet. Du kan checke disse mål på sitelayoutet via menupunktet Sitelayouts (kræver adgang til modulet Site Designer – jf. "Modulet Site
Designer" side 11) eller på selve websitet ved hjælp af Internet Developer Toolbar.
I sitelayoutet kan du se, hvor meget plads, der er til indholdsområdet, ved at
markere flettefeltet Indhold og aflæse Max. bredde på indhold i Element Inspector (vælg fanen Vis og afkrydsningsfeltet Vis Element Inspector – eller tast F2):
OBS: For at få det korrekte mål på spaltens
bredde via Element
Inspector, skal du først
deaktivere spaltevisning
– eller lægge 2 px til det
viste mål.
Dette mål skal du bruge, når du i forbindelse med opbygning af sidelayoutet
skal definere sidelayoutets bredde.
14.07.2010
© Tangora Software A/S
Side 42 af 82
Content Management Software
Sådan bygger du et helsides sidelayout
1. Vælg menupunktet Sidelayouts under Design & Layout og klik på Opretknappen over oversigten:
2. Giv sidelayoutet et navn og definer anvendelsesrettighederne – se evt.
"Detaljeret styring af sidelayoutets anvendelse" side 41. Klik OK.
3. Dobbeltklik på sidelayoutet i oversigten – så vises en oversigt over sidelayoutets indholdsblokke. Som standard er der altid oprettet en tom primær
afsnitsblok – dvs. en 'pladsholder' til brugernes indhold på de enkelte sider.
Du kan evt. indsætte standardindhold i afsnitsblokken – fx en vejledning til
de brugere, der skal anvende sidelayoutet. Det gøres ved at dobbeltklikke
på primærblokken i oversigten (eller brug Rediger-knappen):
4. Klik herefter på Rediger afsnit og Opret et nyt afsnit:
14.07.2010
© Tangora Software A/S
Side 43 af 82
Content Management Software
5. Indsæt det ønskede indhold og klik OK for at lukke dialogboksen til afsnitsredigering.
6. Klik herefter Tilbage og OK for at lukke redigeringsvinduet og vende tilbage til oversigten over sidelayoutets blokke:
TIP: Hvis du sætter
kryds i "Låst", kan de
brugere, der anvender
sidelayoutet, ikke oprette nye afsnit eller skifte
afsnitslayout. På den
måde kan du fx sikre, at
brugerne kun indsætter
billeder fra en bestemt
kategori , forudsat at
afsnitslayoutet indeholder regler herom – jf.
"Billedregler i afsnitslayouts" side 59.
TIP: Her kan du "skrivebeskytte" en afsnitsblok,
så den kun kan redigeres af bestemte grupper
af brugere og/eller af
brugere med et bestemt
rettighedsniveau.
14.07.2010
© Tangora Software A/S
Side 44 af 82
Content Management Software
7. Hvis brugerne skal kunne indsætte indhold på siden i flere "indholdsområder", kan man oprette flere afsnitsblokke på samme måde som beskrevet
ovenfor.
8. Når alle afsnitsblokke er oprettet, skal de placeres i selve layoutet: Klik på
knappen Rediger layout:
9. Klik på fanen Layout og angiv sidelayoutets bredde – se evt. "Sitelayout og
sidelayouts skal passe sammen" side 41:
10. Skift til fanen Indsæt og indsæt herefter en tekstboks med det globale flettefelt {system.page.title} som indhold. Marker flettefeltet, vælg en passende
typografi og klik OK:
TIP: Globale flettefelter kan
indsættes i sitelayouts,
sidelayouts og på sider. De
bruges til at vise systemgenereret information (fx
sidens ændringsdato). Se
Tangora Grundmanual.
TIP: Brugere med administratorrettigheder kan oprette
og tilpasse typografierne:
14.07.2010
© Tangora Software A/S
Se "Sådan opretter du en
global typografi" side 19.
Side 45 af 82
Content Management Software
11. Indsæt den primære afsnitsblok ved at klikke på den i flettefelt-oversigten:
12. Tast CRTL+S – så er sidelayoutet klar til brug.
TIP: Hvis webløsningen anvender forskellige sitelayouts, kan du ved hjælp af
Vis-menuens Vælg sitelayout se, hvordan sidelayoutet vil se ud i de forskellige
sitelayouts:
14.07.2010
© Tangora Software A/S
TIP: Der er ikke sat
margin eller indryk på
dette sidelayout, da
dette allerede er defineret på indholdselementet i sitelayoutet.
Om margin/indryk skal
defineres i den ene
eller den anden type
layout afhænger af det
grafiske design. Generelt er det en god ide
at definere margin mv.
så "højt" oppe som
muligt – dvs. hellere i
sitelayoutet end i
sidelayouts.
Side 46 af 82
Content Management Software
Sidelayouts med låst indhold
Sidelayoutet, som anvendes på denne side, indeholder kun 2 frie "skriveområder" – selve sideoverskriften, den blågrå blok med æblebilledet og tekst samt
redigeringsdatoen herunder er "låst" indhold:
Sidens "skriveområder"
Sådan ser siden ud i Tangora Manager, når "Vis tekstgrænser" er slået til:
TIP: Klik på knappen
Vis tekstgrænser for at
få vist sidens "skriveområder":
Det låste indhold kan enten indsættes direkte i layoutet eller via en såkaldt
sideblok – se "Sidelayouts med portalfunktionalitet" side 52. Dette valg afhæn-
14.07.2010
© Tangora Software A/S
Side 47 af 82
Content Management Software
ger dels af hvilke brugere, der skal have adgang til at ændre det låste indhold,
dels af hvordan du i øvrigt ønsker at anvende/genbruge indholdet.
I dette eksempel indeholder sidelayoutet 2 afsnitsblokke ("Primær" og "Links"),
som er indsat i layoutet i hver sin spalte:
TIP: I dette sidelayout
er der anvendt spalter
for at styre placeringen
og formateringen af de
enkelte elementer. Se
også "Brug så få spalter
som muligt" side 7.
67/33% spaltesæt
med to indlejrede
spalter i 33% spalten.
Se "Sådan laver du et
sidelayout med låst
indhold" side 47.
Tekstboks med
flettefelt til sidens
titel.
Afsnitsblok til
sidens brødtekst.
Afsnitsblok med standardindhold (se pkt. 5
i "Sådan bygger du et
helsides sidelayout"
side 42).
Tekstboks med flettefelt til redigeringsdato.
Stregen over datoen er
lavet som topramme
på tekstboksen.
De låste tekst-elementer (sidetitel, kontakthenvisning og redigeringsdato) er
indsat ved hjælp af tekstbokse. Højre spalte indeholder yderligere to 100 %
spalter til henholdsvis den blågrå baggrundsfarve og æblebilledet. Sidstnævnte
er nemlig indsat som et baggrundsbillede på den inderste spalte (denne bruges til at "beskære" billedet med og lave den mørkegrå ramme) men kunne
også placeres direkte i den blågrå boks (i så fald skulle billedet så være i korrekt
størrelse).
Sådan laver du et sidelayout med låst indhold
1. Opret et nyt sidelayout med 2 afsnitsblokke ("Primær" og "Links").
2. Indsæt et 67/33% spaltesæt, marker den venstre spalte (hold CTRL nede
og klik) og indsæt den primære afsnitsblok heri.
14.07.2010
© Tangora Software A/S
Side 48 af 82
Content Management Software
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.
3.
Marker nu den højre spalte og indsæt en 100% spalte heri:
4.
Brug "håndtaget" på den nederste kant af 100% spalten til at trække den
højere med og vælg indrykket "Normal indryk" på spalten. Indsæt nu en
ny 100% spalte indeni:
5.
Marker den inderste 100% spalte og vælg et baggrundsbillede:
14.07.2010
© Tangora Software A/S
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 større
eller mindre ved hjælp af
det viste "håndtag". 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).
Side 49 af 82
Content Management Software
6.
Indstil herefter baggrundsbilledets position til centreret og træk spalten
højere, så det ønskede udsnit af billedet vises:
7.
Sæt en ramme på spalten. TIP: Angiv indstillingerne for Top-rammen og
klik på Udfyld nedenstående med samme værdier:
8.
Marker den yderste 100% spalte og giv den en baggrundsfarve:
14.07.2010
© Tangora Software A/S
Side 50 af 82
Content Management Software
9.
Indsæt herefter en tekstboks med kontakthenvisningsteksten under æblebilledet (husk at den yderste 100% ramme skal være markeret) og sæt en
topmargen på 10px på tekstboksen:
10. Marker 33% spalten og indsæt Link-afsnitsblokken (her med en venstremargen på 15px) samt en tekstboks med det globale flettefelt
{system.edited.date} til visning af redigeringsdato heri:
14.07.2010
© Tangora Software A/S
Side 51 af 82
Content Management Software
11. Sæt til slut en topramme på tekstboksen med redigeringsdato:
12. Gem sidelayoutet med CRTL+S.
Automatisk visning af fx redigeringsdato via flettefelt
Ved hjælp af globale flettefelter kan du fx vise navnet på den, der har oprettet/ændret siden ({system.created.name} og {system.edited.name}), samt dato
for seneste ændring af siden {system.edited.date}. Globale flettefelter indsættes
oftest i selve layoutet i et sidelayout/sitelayout (dvs. i en tekstboks i layoutet)
men kan også anvendes direkte på en given side. Sidelayouts vil ofte indeholde
et globalt flettefelt ({system.page.title}) til visning af sidens titel – jf. screendumpet i pkt. 10 ovenfor.
TIP: Tangora Grundmanual indeholder en samlet oversigt over alle globale
flettefelter.
14.07.2010
© Tangora Software A/S
Side 52 af 82
Content Management Software
Sidelayouts med portalfunktionalitet
Anvendelse af sidelayouts med portalfunktionalitet gør det muligt at lave sider
med flere funktioner på én gang. Det foregår ved at indlejre indhold fra andre
sider i sidelayoutet. Indlejringen kan ske på to måder:
ƒ Opret og placer en sideblok i layoutet
ƒ Indsæt flettefeltet {system.embed.page(pageid,cacheduration)}6 i layoutet via en kodeblok
OBS: Hvis du ønsker at indlejre sider, som er beregnet på at modtage input fra
gæsten (fx nyhedsbrev-tilmelding, formularside, Eksternt login o.lign.), skal du
være opmærksom på, at siden skifter til den indlejrede side ved indsendelse.
Indhold fra eksterne websider kan fx indlejres via kodeblokke i sidelayoutet –
eller ved at oprette en HTML-side og indlejre denne.
Sider der indlejres i en sideblok vil kun vise hovedindholdet og dermed ikke et
evt sidelayout.
Anvend ikke cache eller sidelayouts på sider, der skal indlejres
Når en side indlejres i et sidelayout, bør du ikke anvende caching på selve siden; aktiver i stedet cache-funktionen på det element, der foretager indlejringen (dvs. {system.embed.page(pageid,cacheduration)} eller sideblok):
Undtaget herfra er sider med brugerspecifik indhold – disse bør ikke caches.
Du kan læse mere om caching i Tangora Grundmanual.
Sider, der udelukkende anvendes i indlejret form, behøver ikke få tildelt sit
'eget' sidelayout, eftersom layoutet styres af det sidelayout, siden bliver indlejret i.
6
Cacheduration skal angives i minutter.
14.07.2010
© Tangora Software A/S
Side 53 af 82
Content Management Software
Sådan bygger du et sidelayout med portalfunktionalitet
1. Opret den ønskede funktionsside – fx en nyhedsside, og indstil den som
ønsket (til fx visning af seneste 3 nyheder med dato og overskrift i en
kompakt visningsform – jf. nedenfor). Husk at deaktivere sidens indbyggede cache-funktion.
2. Kopier et eksisterende sidelayout med fx et 67/33% spaltesæt (jf. foregående eksempel) eller opret et nyt.
3. Klik på Opret sideblok og udpeg funktionssiden fra pkt. 1:
Her skal evt. cache
aktiveres – ikke på den
side, der leverer indholdet til sideblokken.
4. Klik på Rediger layout, indsæt sideblokken i layoutet og tilpas formatering:
14.07.2010
© Tangora Software A/S
Side 54 af 82
Content Management Software
5. Gem layoutet og test det ved at oprette en ny side, der anvender det nye
sidelayout:
I sideredigering vises
sideblokkens navn
("Nyhedsblok til sidelayout") samt ID'et på
den (nyheds)side, der
leverer indholdet til
sideblokken.
6. Tilpas evt. nyhedssidens opsætning og/eller sidelayoutet.
Eksempel på sidelayout med nyhedsblok til højre
Sådan kan en side, der anvender et sidelayout med låst indhold i form af en
"billedboks", en nyhedsblok samt information om sidens ændringsdato til højre
se ud på websitet:
Se evt. "Sidelayouts med låst indhold" side 46.
14.07.2010
© Tangora Software A/S
Side 55 af 82
Content Management Software
Forskellige sidelayouts til oversigt/detaljevisning
På fx nyhedssider og listesider kan du vælge et alternativt sidelayout til detaljevisning. Det gør det bl.a. muligt at vise emnets overskrift/titel med sideoverskriftstypografi – i stedet for selve sideoverskriften. Det kan også være en fordel
hvis indholdet bliver vist på siden ved hjælp af en sideblok, eftersom kildesiden
normalt ikke vil have et sidelayout.
OBS: Sideblokke findes
kun i Tangora Portal
CMS – ikke i Tangora
Mini.
Denne side anvender
et sidelayout med en
sideblok, som trækker
på en nyhedsside.
Når man klikker på en
bestemt nyhedsoverskrift, skiftes til selve
nyhedssiden – den
som leverer indholdet
til sideblokken. Nyhedssiden er indstillet
til at anvende et helsides sidelayout til detaljevisning (dvs. til
visning af selve nyheden).
Sidelayoutet til den viste detaljevisning er helt enkelt opbygget og indeholder
kun den primære afsnitsblok:
14.07.2010
© Tangora Software A/S
Side 56 af 82
Content Management Software
Sidelayoutet vælges på funktionssidens indstillinger på fanebladet Detaljer:
TIP: Hvis du anvender Visual Designer til opsætning af detaljevisningslayoutet,
skal du huske at angive en bredde, der passer til det valgte sidelayout:
Se evt. også "Sitelayout og sidelayouts skal passe sammen" side 41.
14.07.2010
© Tangora Software A/S
Side 57 af 82
Content Management Software
Afsnitslayouts
En side kan indeholde et eller flere afsnit. Et afsnit er en "blok", der kan indeholde et eller flere felter; afsnitsoverskrift, kort tekst, brødtekst, billede og link.
Det valgte afsnitslayout bestemmer hvilke felter, man har til rådighed, samt
hvordan disse placeres i forhold til hinanden. Desuden bestemmer afsnitslayoutet, hvordan teksten formateres (fx fed skrift til overskrifter).
Når afsnittet er aktivt (dvs. vises med synlig ramme), vises en miniværktøjslinje
med bl.a. navnet på det anvendte afsnitslayout:
Brugere med administratorrettigheder har mulighed for at oprette nye afsnitslayouts, tilpasse eller helt slette eksisterende afsnitslayouts. Selve layoutet opbygges ved hjælp af HTML-kode og kræver således erfaring hermed.
OBS: Evt. ændringer i et afsnitslayout slår straks i gennem på alle sider, hvor
det pågældende afsnitslayout er i brug. Tag derfor gerne en kopi af afsnitslayoutet, inden du laver ændringer – så kan du altid vende tilbage til det oprindelige afsnitslayout.
Angiv standardafsnitslayout for hvert site
Under menupunktet Avanceret i oversigten kan du vælge, hvilket afsnitslayout
der skal anvendes som standard inden for hvert site. Når en bruger opretter en
ny side inden for det pågældende site, vil det angivne afsnitslayout automatisk
14.07.2010
© Tangora Software A/S
Side 58 af 82
Content Management Software
være forvalgt på siden – med mindre der anvendes et sidelayout, som er indstillet til at bruge et andet afsnitslayout.
Sådan opretter du et nyt afsnitslayout
1. Vælg menupunktet Afsnitslayouts under Design & Layout og klik på Opretknappen over oversigten eller kopier et af de eksisterende afsnitslayouts. Så
vises en række faneblade med afsnitslayoutets indstillinger:
Afsnitslayoutets managervisning kan fx bruges til at
vise hjælpetekst i forbindelse med sideredigering
som her i afsnitslayoutet
'Indholdsfortegnelse':
2. Angiv de ønskede indstillinger på fanebladet Generelt og definer evt. en
alternativ visning til brug i forbindelse med sideredigering på fanebladet
Managervisning (det er fx nødvendigt, hvis afsnitslayoutet indeholder JavaScript).
3. Angiv evt. adgangsbegrænsninger i forhold til brugerniveau og/eller anvendelsesområde (=site) på fanebladet Adgang og vælg øvrige egenskaber
på fanebladet Indstillinger:
14.07.2010
© Tangora Software A/S
Side 59 af 82
Content Management Software
Anvend standardformatering i afsnit 'pakker'
afsnittet ind i passende
HTML-kode.
Fjern <P>-kode fjernereventuelle <P>-koder i
starten og slutningen af
brødtekstfeltet.
4.
Gem afsnitslayoutet med Gem eller OK.
Se også indlæg om afsnitslayout på Tangora Developerblog.
Billedregler i afsnitslayouts
Ved hjælp af Billedregler i afsnitslayoutets indstillinger kan du styre hvilke billeder, brugerne kan indsætte i afsnittene – og hvor. Du kan fx stille krav til billedernes bredde og/eller begrænse valgmulighederne til en bestemt kategori i
billedarkivet. Du kan også spærre for indsættelse af billeder i afsnittets brødtekstfelt ved at fjerne krydset i Tillad indsættelse af billeder i brødtekst.
Sådan sletter du et afsnitslayout
Marker det ønskede afsnitslayout i oversigten og klik på Slet-knappen eller
Delete-tasten. Så får du vist en dialogboks, hvor du skal bekræfte sletningen.
Hvis afsnitslayoutet er i brug på en eller flere sider, vil du automatisk blive bedt
om at udpege et andet afsnitslayout til erstatning for det, du er ved at slette.
14.07.2010
© Tangora Software A/S
Side 60 af 82
Content Management Software
Opsætning af funktionssiders layout
Funktionssiders layout kan lige som sitelayouts og sidelayouts indstilles ved
hjælp af enten Visual Designer eller Table Designer, evt. i form af eget HTMLkode i sidstnævnte værktøj. Funktionssider med databaseindhold (fx nyheder)
har en såkaldt oversigtsvisning, der styrer layoutet af indholdet, samt indstillinger til styring af evt. søgemuligheder, bladrefunktion, etc.:
Eksempel på oversigtsvisning
af nyheder, hvor gæsten kan
bruge et kategorifelt og
søgefelt til at finde bestemte
nyheder med. Du bestemmer
selv, om disse filtreringsfelter
skal vises eller ej – og hvordan. Dette samt tællertekst
og intern navigering/bladrefunktion på siden styres via
fanebladet Filtrering under
sidens indstillinger.
Selve oversigten viser indhold
fra felterne Nyhedsbillede,
Nyhedsoverskrift, Nyhedsdato og Kort nyhedstekst ved
hjælp af visningsmåden
blokliste – se "Vis en oversigt
som punktliste, tabel eller
blokliste" side 61.
Når gæsterne klikker på et emne i oversigten, vises der en side med detaljeret
information om det pågældende emne (såkaldt detaljevisning):
Detaljevisning af en nyhed. Se "Detaljevisning"
side 75.
TIP: Der anvendes her et
alternativt sidelayout til
detaljevisningen, så nyhedsoverskriften vises som
'titel' i stedet for sidens
titel – se evt. "Forskellige
sidelayouts til oversigt/detaljevisning" side
55.
14.07.2010
© Tangora Software A/S
Side 61 af 82
Content Management Software
På funktionssider som fx nyhedssider og listesider kan du ved at klikke på Indstillinger på siden styre hvilket indhold, siden skal vise – og hvordan. Indstillinger for funktionsindholdet (dvs. det dynamiske indhold) er fordelt på forskellige faneblade, bl.a. opsætning af sidens oversigts- og detaljevisning:
På fanen Indhold kan du
styre hvilke data, der skal
vises. På nyhedssider kan
du fx vise alle nyheder fra
den seneste uge eller et
bestemt antal. Indstillingerne til udvælgelse af
indhold kaldes også sidens
interne filter.
På fanen Oversigt kan du
indstille oversigtens udseende og om/hvordan
gæsten skal kunne klikke
sig ind på detaljevisning af
en given record.
På fanen Detaljer kan du
indstille detaljevisningens
udseende.
På fanen Filtrering kan du
indstille om/hvordan
gæsten skal kunne filtrere/søge på siden (= sidens
eksterne filtre), samt styre
den interne navigering på
siden – dvs. den indbyggede bladrefunktion, som
bruges, hvis en oversigt
indeholder mange records.
Afhængigt af hvilket modul, der er tale om, findes der forskellige muligheder
for opsætning af oversigts- og detaljevisningslayout.
Vis en oversigt som punktliste, tabel eller blokliste
Når du skal definere en funktionssides oversigtsvisning, kan du – afhængigt af,
hvilket modul, der er tale om –, vælge mellem forskellige visningsmåder:
ƒ Punktliste
ƒ Tabel
ƒ Blokliste
Valget afhænger dels af, hvordan du ønsker at præsentere data, dels af hvilke
funktioner, du ønsker at tilbyde gæsten. Ønsker du fx at vise et billede ifm.
hver record, vil man typisk vælge Bloklistevisning, mens Tabelvisning er effektiv,
når det gælder om at give et mere kompakt overblik over mange data. Tabelvisning har desuden en smart indbygget funktion, Klikbare kolonneoverskrifter,
som gør det muligt for gæsten at ændre sortering og fx sortere en vareoversigt
14.07.2010
© Tangora Software A/S
Side 62 af 82
Content Management Software
efter pris i stedet for navn. Når du har valgt visningsmåde, kan du indstille
layoutet ved at klikke på Rediger layout:
Nyhedssider er som standard indstillet til at vise
nyhederne sorteret efter
dato i faldende orden – dvs.
nyeste nyheder vises altid
øverst i oversigten. Vælger
du visningsmåden Tabel,
kan du give gæsten mulighed for selv at ændre sortering ved hjælp af klikbare
kolonneoverskrifter.
De forskellige layout-indstillingsmuligheder er nærmere beskrevet nedenfor.
Typografier til oversigtsvisning
Oversigtens indhold kan formateres via lokale CSS-indstillinger på siden (indstilles via Vælg typografier på fanebladet Oversigt):
Brugere med administratorrettigheder
har mulighed for at
oprette og ændre de
globale typografier,
der kan vælges i
feltet Stylesheet
klasse.
Se evt. afsnittene "Typografier" side 14 og "Sådan opretter du en global typografi" side 19. Anvender du visningsmåden Tabel, får du desuden mulighed for
at styre formateringen via sitelayoutets standard tabelformat (se
"Layoutindstillinger for tabelvisning" side 64).
14.07.2010
© Tangora Software A/S
Side 63 af 82
Content Management Software
Punktliste
En punktliste er en meget enkel visningsform,
som egner sig bedst til at vise ét felt fra hver
record. Du kan dog godt vise flere felter på én
linje. De vil i så fald stå umiddelbart efter hinanden, adskilt af et separatortegn, som du selv
specificerer under indstillingerne for punktlisten:
Tællerteksten over selve
oversigten defineres på
fanebladet Filtrering.
Hvis du vil bruge grafik som
punkttegn, skal denne først
uploades til websitets system
billedarkiv (Arkiver > Systemfiler > System billedarkiv). Grafikken skal kategoriseres som
"Grafikknapper".
Punktlistevisning kan bl.a. bruges i Databaselister og Søgning.
Tabel
Tabelvisning bruges til at vise oversigter som rækker og kolonner, hvor øverste
række udgør kolonneoverskrifter. Der vises én række pr. emne/record, hvor
hver kolonne indeholder ét felt. Du bestemmer selv, hvilke kolonner/felter der
skal vises i tabellen. Tabeller giver bl.a. mulighed for:
ƒ
Klikbare kolonneoverskrifter,
så gæsten selv kan vælge,
hvordan listen skal sorteres.
Selve kolonneoverskrifterne kan
ændres under det pågældende
moduls Standarder.
ƒ
Skiftende baggrundsfarver
i tabellen. Det kræver blot, at det
standard tabelformat, der er defineret i sitelayoutet, specificerer,
at tabeller skal have skiftende
baggrundsfarver.
14.07.2010
Eksempel på nyheder vist som
tabel. Normalt vises de seneste
nyheder øverst, men hvis du aktiverer klikbare kolonneoverskrifter, kan
gæsten selv ændre sortering og fx
se ældste nyheder øverst (kan bl.a.
være relevant på arkivsider).
Eksempel på varer vist som tabel
med skiftende baggrundsfarver.
© Tangora Software A/S
Side 64 af 82
Content Management Software
Layoutindstillinger for tabelvisning
Når du klikker på Rediger layout på fanen Oversigt, får du mulighed for at indstille forskellige egenskaber for tabellen:
Kolonnebredden angiver, hvor
stor en procentdel af hele
tabelbredden, der anvendes til
at vise kolonneindholdet.
Værdien "0" betyder, at kolonnen ikke vises.
OBS: Tabellens faktiske bredde
afhænger af tre faktorer:
Websidens sitelayout, sidelayout og afsnitslayoutet i afsnittet umiddelbart før tabellen.
Justering (vandret og lodret)
angiver, hvordan cellens
indhold skal placeres i cellen.
Hvis du sætter kryds iBrug
standard tabelformat, formateres selve tabellen og teksten
i tabellen med de typografier,
der er defineret i sitelayoutets
stylesheet.
Sæt kryds i Klikbare kolonneoverskrifter, hvis gæsten selv skal kunne vælge
sortering. Hvis du ønsker at vise sorteringspile i forbindelse med den valgte
kolonneoverskrift, skal disse uploades som grafikknapper til websitets system
billedarkiv (Arkiver > Systemfiler > System billedarkiv).
Kolonneoverskrifterne styres under det pågældende moduls Standarder, dvs.
ændringer foretages centralt og vil påvirke alle tabelvisninger, der trækker på
den pågældende moduldatabase.
Ønsker du at vise en oversigt som tabel men uden kolonneoverskrifter, kan du
'simulere' tabelvisningen ved hjælp af visningsmåden blokliste – se "Blokliste"
side 65.
Formatering
Tabellens formatering kan styres på forskellige måder – evt. i kombination:
ƒ
via CSS i det stylesheet, der leveres af sitelayoutet (aktiveres via Brug
standard tabelformat under Rediger layout på fanebladet Oversigt).
14.07.2010
© Tangora Software A/S
Side 65 af 82
Content Management Software
ƒ
via lokale CSS-indstillinger på siden (indstilles via Vælg typografier på fanebladet Oversigt):
Brugere med administratorrettigheder
har mulighed for at
oprette og ændre de
globale typografier,
der kan vælges i
feltet Stylesheet
klasse.
Se evt. afsnittene "Typografier" side 14 og "Sådan opretter du en global typografi" side 19.
Blokliste
En bloklistevisning består selvsagt af blokke med et eller flere felter fra hver
record. De forskellige felter i blokken kan placeres helt frit i forhold til hinanden, og bloklistelayouts indeholder derfor ingen kolonneoverskrifter. En nyhedsoversigt kan fx se således ud i bloklisteform:
Sidetitel
Tællertekst
Bladreknapper
(intern navigering på siden)
Nyhedsbillede
Nyhedsoverskrift
Nyhedsdato
Kort nyhedstekst
En blok med
forskellige felter
fra nyhedsdatabasen.
14.07.2010
© Tangora Software A/S
Side 66 af 82
Content Management Software
Blokkene kan evt. fordeles over flere spalter, hvis man gerne vil vise mange små
blokke på hver "underside":
Et bloklistelayout kan opbygges ved hjælp af forskellige designværktøjer:
ƒ Visual Designer
ƒ Table Designer
ƒ Egen HTML-kode
Se evt. "Forskellige layoutværktøjer/-metoder" side 5.
OBS: I forbindelse med bloklistevisning med indhold i flere spalter vil Table
Designer dog nogle gange være det bedste værktøj – jf. "Eksempel 3: Produktog medarbejderoversigt med centreret indhold i spalter" side 70.
Eksempel 1: Sådan opbygger du nyhedsoversigten i Visual Designer
En oversigt med nyheder i én spalte som i eksemplet side 65 opbygges hurtigt
og nemt i Visual Designer:
1. Vælg visningsmåden Blokliste og klik på Rediger layout på fanen Oversigt.
Skift herefter til layoutværktøjet Visual Designer, vælg fanen Layout og angiv en bredde, der passer til det aktuelle sidelayout (se evt. "Sitelayout og
sidelayouts skal passe sammen" side 41).
14.07.2010
© Tangora Software A/S
TIP: Tilpasning af spalter og
indsætning af flettefelter er
beskrevet mere detaljeret i
"Ad 4: Indsæt spalter, billeder, navigation, sideindhold
mm." side 22.
Side 67 af 82
Content Management Software
2. Vælg fanen Indsæt og indsæt et spaltesæt med fx 25/75% spalter (tilpas
evt. bredderne). Indsæt de forskellige flettefelter i de to spalter som vist:
3. Marker flettefeltet Nyhedsbillede og sæt et indryk på i toppen, så billedets
øverste kant kommer til at passe med teksten (i dette tilfælde 6px):
4. Marker flettefeltet Nyhedsdato og sæt højre margen til fx 5 px, så der
kommer lidt afstand mellem Nyhedsdato og Kort nyhedstekst:
5. Vælg menupunktet Bloklisteindstillinger i Applikationsmenuen (Tangora
logoet øverst til venstre) og angiv Blokafstand til fx 20px:
14.07.2010
© Tangora Software A/S
Side 68 af 82
Content Management Software
6. Gem layoutet med CTRL+S eller Gem-knappen øverst til venstre og test, at
det ser ud som ønsket ved hjælp af Preview layout-knappen til højre for
Gem-knappen.
Eksempel 2: Sådan opbygger du nyhedsoversigten i Table Designer
Foretrækker du at opbygge layoutet på side 65 via Table Designer, kan det
gøres således:
1.
Vælg visningsmåden Blokliste og klik på Rediger layout på fanen Oversigt.
Så vises Table Designer vinduet, hvor du skal klikke på knappen Indstillinger for layout:
2.
Vælg det ønskede antal rækker og kolonner, angiv kolonnernes bredde i
enten % eller px (husk, at den samlede bredde skal passe til den plads,
der er til rådighed i sidelayoutet, hvis du bruger px) og indstil afstanden
efter hver blok:
14.07.2010
© Tangora Software A/S
Side 69 af 82
Content Management Software
Ramme- og gitteregenskaber
bruges til at specificere bredde,
stregtype og farve for henholdsvis
ramme og gitter. Du kan også
angive en baggrundsfarve for
tabellen.
En evt. ramme omkranser hele
tabellen, et evt. gitter omkranser
hver enkelt celle i tabellen. Rammeegenskaberne kan også specificeres individuelt for hver enkelt
celle.
3.
Opret et indlejret layout i celle 1.1 samt et indlejret HTML-layout i celle
1.3 som vist nedenfor (højreklik i den pågældende celle og vælg Indlejret
layout > Opret…):
14.07.2010
© Tangora Software A/S
Side 70 af 82
Content Management Software
Billedfeltet er
her placeret i et
indlejret layout
for at få ekstra
luft over billedet (ved
hjælp af en tom
række med
rækkehøjde på
6 px), så det
flugter med
nyhedsteksten
til højre. Rækkehøjden angives under
Rækkeegenskaber (højreklik i
den ønskede
række).
Et indlejret HTML-layout
er i praksis en HTML
editor, hvor du kan indsætte egen HTML-kode
samt flettefelter med
modulindhold. Højreklik i
tekstfeltet for at indsætte
flettefelterne Nyhedsoverskrift, Nyhedsdato
og Kort nyhedstekst.
OBS: Husk at gemme,
inden du lukker vinduet.
4.
Placer de forskellige felter ved at trække dem fra feltoversigten under layouttabellen op til den ønskede celle (i indlejrede HTML-layouts placeres
felterne dog ved at højreklikke og vælge det ønskede felt som vist ovenfor). Se evt. "Lynhurtig placering af felter og feltoverskrifter" side 82.
5.
Gem layoutopsætning på alle niveauer og klik på Gem på sidens indstillinger.
TIP: Du kan flytte rundt på felter og indlejrede layouts med musen.
Eksempel 3: Produkt- og medarbejderoversigt med centreret indhold i spalter
Skal du opbygge et bloklistelayout, som fordeler indholdet centreret i flere
spalter som vist i henholdsvis produkt- og medarbejderoversigten på side 66,
vil det være lettest at konfigurere layoutet i Table Designer, eftersom dette
værktøj indeholder en funktion til nem centrering af indholdet i layoutet.
14.07.2010
© Tangora Software A/S
Side 71 af 82
Content Management Software
Produktoversigten består af 9 blokke pr. underside, fordelt i 3 spalter:
Medarbejderoversigten består af 6 blokke pr. underside:
Intern navigering i oversigter
Funktionssider med oversigtsvisning kan automatisk fordele oversigtens emner
på flere undersider, som gæsterne kan bladre mellem ved hjælp af sidens såkaldte interne navigering. Du kan vælge mellem to former for sideinddeling:
ƒ
Numerisk sideinddeling
ƒ
Alfabetisk sideinddeling
Selve bladreknapperne kan enten vises som Klikbare sidetal (se nedenfor) eller
som Side X af Y med Forrige/Næste links. Du kan også lave en kombination,
hvor du både viser sidetal + Forrige/Næste links.
OBS: Den alfabetiske sideinddeling er pt. kun tilgængelig i modulet Databaselister. Der kan desuden være modulspecifikke forskelle på de forskellige indstillingsmuligheder for sidens interne navigering.
14.07.2010
© Tangora Software A/S
Side 72 af 82
Content Management Software
Numerisk sideinddeling
Denne sideinddelingsform viser et bestemt antal emner pr. underside – ligesom søgeresultater på fx Google:
Klikbare sidetal
De typografier, der bruges til formatering af
sidetal og navigationslinks, er defineret i det
aktuelle sitelayout.
Indstillingerne til valg af sideinddeling og intern navigering er placeret på fanebladet Filtrering:
Her er valgt "Klikbare sidetal"
som intern navigering. Hvis der
er mere end 10 undersider, vil
der blive vist Forrige 10/Næste
10 links, så gæsten kan bladre
10 undersider ad gangen. Hvis
du angiver tekst i felterne
Forrige side/Næste side, vil
gæsten desuden kunne bladre
mellem de enkelte undersider
ved hjælp af Forrige/Næste
links.
Her kan du angive den tællertekst, der bliver vist ovenover
selve oversigten. Husk også at
tilpasse indholdet i Tekst til
'Igen fund', så det modsvarer
sidens indstillinger mht. evt.
søge-/filtreringsmuligheder
(hvis det fx ikke er muligt at
søge på siden, bør teksten
omformuleres).
14.07.2010
© Tangora Software A/S
Side 73 af 82
Content Management Software
TIP: Ønsker du at anvende grafikknapper som intern navigering i stedet for
tekstlinks, kan du uploade grafikfilerne til løsningens Systembilledarkiv (Arkiver
> Systemfiler > System billedarkiv > Upload > kategorien grafikknapper) – så kan
du vælge grafikkerne i de felter, hvor der pt. står "(Ingen grafik)". Indholdet i
tekstfeltet til venstre vil i så fald blive anvendt som ALT-tekst for grafikken. Se
evt. nedenstående eksempel på anvendelse af grafikknapper.
Alfabetisk sideinddeling
Denne sideinddeling kan fx bruges til at vise produkter eller medarbejdere med
begyndelsesbogstaverne fra A til F på første side, fra G til O på næste side osv.
Grafikknapper til brug for
alfabetisk sideinddeling.
De typografier, der bruges til formatering af
sidetal og navigationslinks, er defineret i det
aktuelle sitelayout.
Det anbefales at vise alle elementer i hver gruppe på én side, eftersom nogle
gæster måske ikke opdager, at der kan være flere undersider for hvert interval –
dvs. feltet Max. antal pr. side skal være tomt:
14.07.2010
© Tangora Software A/S
Side 74 af 82
Content Management Software
Ønsker du at anvende grafikknapper til alfabetisk sideinddeling, skal du først
vælge denne sideinddelingsform og angive de ønskede intervaller i tekstfeltet.
Klik herefter på Grafik og tilknyt grafikknapper til intervallerne (systemet opretter automatisk de intervaller, du angiver i tekstfeltet). Husk at billederne først
skal uploades til websitets Systembilledarkiv (Arkiver > Systemfiler > System
billedarkiv > Upload > kategorien grafikknapper).
OBS: Husk at indstille oversigtens standardsortering, så indholdet sorteres efter
det felt, du ønsker at basere den alfabetiske sideinddeling på. Hvis du fx ønsker
at vise en oversigt over bøger, hvor titlen begynder med A, skal "bogtitel" være
valgt som standardsortering på fanebladet Oversigt. Ønsker du derimod at
inddele oversigten efter forfatter, skal dette felt være valgt som standardsortering.
14.07.2010
© Tangora Software A/S
Side 75 af 82
Content Management Software
Detaljevisning
En sides detaljevisningslayout er den "skabelon", der bruges til at vise et bestemt emne med; fx en bestemt nyhed, et bestemt produkt osv.
Du kan – ofte med fordel – indstille nyhedssider og andre "datavisningssider" til
at anvende ét sidelayout til oversigtsvisning og et andet sidelayout til detaljevisning – fx ét sidelayout, der ikke viser sidens titel:
Nyhedssidens detaljevisning. TIP: Her er anvendt et sidelayout, som
ikke viser sidens titel men
hvor nyhedsoverskriften
derimod vises med samme typografi som sidetitler.
Her anvendes et andet
sidelayout til detaljevisningen. Det kan også være en
fordel at anvende forskellige
sidelayouts til henholdsvis
oversigt og detaljer, hvis
indholdet bliver vist på
siden ved hjælp af en sideblok – i modsætning til
sidens "eget" funktionsindhold, som typisk vises i
sidens primære område.
Afstanden mellem de forskellige indholdstyper i
detaljelayoutet kan i Table
Designer bl.a. styres ved
hjælp af tomme rækker med
en fast rækkehøjde på fx 10
px (højreklik og vælg Rækkeegenskaber…).
Når du placerer et felt,
placerer du både feltet og
feltoverskriften. Indstillingerne for cellen afgør, om
feltoverskriften er synlig på
websitet, og hvor den i så
fald placeres i forhold til
feltet. Selve overskriftsteksten er en del af det aktuelle
moduls såkaldte standardbetegnelser (se manualen til
modulet).
14.07.2010
© Tangora Software A/S
Side 76 af 82
Content Management Software
Den vandrette streg over
Tilbage, Kilde og Nyhedsdato er her lavet ved
hjælp af cellens rammeegenskaber.
I Nyheder, Databaselister, Arrangementskalender og andre moduler med struktureret indhold har du mulighed for at definere en standardskabelon for detaljevisningen, så alle funktionssider "fødes" med dette layout. Layoutet kan efterfølgende tilrettes lokalt på den enkelte side, og evt. ændringer i den centralt
definerede skabelon vil ikke påvirke de sider, der allerede er oprettet. Dvs.
standardlayoutet fungerer som et statisk "snapshot" og opdateres ikke dynamisk. Standardlayoutet for nyheder defineres under Moduler > Nyheder >
Avanceret > Standarder.
Layouttips til formularsider og andre input-sider
Ligesom funktionssider med datavisning, kan formularsider og andre funktionssider med inputfelter sættes op med enten Visual Designer eller Table Designer.
Eksempel 1: Opsætning af kontaktformular med Visual Designer
En kontaktformular som nedenstående kan hurtigt og nemt sættes op i Visual
Designer:
14.07.2010
© Tangora Software A/S
Side 77 af 82
Content Management Software
Felterne er her placeret i et såkaldt Layoutpanel, som bl.a. gør det nemt og
hurtigt at placere flere felter og tilhørende feltoverskrifter på samme måde – og
evt. senere ændre opsætningen.
Sådan gør du:
1.
Indsæt et layoutpanel via fanebladet Indsæt i Visual Designer og indsæt
derefter de ønskede felter heri:
2.
Fravælg layoutpanelet ved at klikke med musen i det mørkegrå område til
højre for layoutet og indsæt Send-knappen (den bliver automatisk placeret
under layoutpanelet, som her er markeret for at vise grænserne):
14.07.2010
© Tangora Software A/S
Side 78 af 82
Content Management Software
3.
Marker layoutpanelet og vælg formateringen Feltnavne forrest via layoutpanelets fane Formatering:
Så kommer opsætningen til at se således ud:
14.07.2010
© Tangora Software A/S
Side 79 af 82
Content Management Software
4.
Marker feltet By og klik på knappen Feltindstillinger på fanen Formatering:
5.
Slet feltets overskrift og klik OK:
14.07.2010
© Tangora Software A/S
Side 80 af 82
Content Management Software
6.
Marker herefter layoutpanelet igen og vælg Opret kopi af den valgte layoutpaneltypografi på layoutpanelets fane Formatering for at justere indryk
mm:
7.
Tildel typografien et passende navn, skift til fanen Panel og klik på Detaljer
for Indryk. Sæt venstre indryk til 0 og angiv tilsvarende indstilling på fanen
Boks:
14.07.2010
© Tangora Software A/S
Side 81 af 82
Content Management Software
8.
Marker til slut Send-knappen og sæt et venstre indryk på den, så den flugter med formularfelterne:
9.
Gem layoutet, gem sidens indstillinger og check, at siden ser ud som ønsket.
14.07.2010
© Tangora Software A/S
Side 82 af 82
Content Management Software
Eksempel 2: Opsætning af formularside med Table Designer
En side med nyhedsbrevstilmelding kan fx se således ud:
Og sådan i Table Designer:
Lige som i "Eksempel 2: Sådan opbygger du nyhedsoversigten i Table Designer" på side 68 skal du først definere layouttabellens størrelse (dvs. antal rækker
og kolonner) – herefter placeres de enkelte felter.
Lynhurtig placering af felter og feltoverskrifter
Klik med venstre museknap på det ønskede feltnavn (i kolonnen Felt), hold fast
og træk det op i den ønskede celle. Skal feltoverskrift og felt stå i hver sin celle
(typisk af hensyn til lige venstre justering), holder du herefter blot ALT-tasten
nede, mens du med musen flytter feltet over i cellen til højre. Så flyttes selve
feltet, mens overskrifter bliver stående i cellen til venstre.
14.07.2010
© Tangora Software A/S