Joomla redigering v

Transkript

1 v Opret og tilpas indhold Opret artikel Tekstredigering Links Tabeller Billeder Artikelnavigation Specielt indhold Emneoversigt med popups PDF til download Kontaktformular (FlexiContact) Landing page Gallerier Galleri i artikel Galleri i Lightbox Navigation Topmenu Sidemenu Eksterne links Brugere og kontakter Brugere Nyhedsbreve Opret et nyhedsbrev RSS RSS standard RSS udvidet Disse tips og vejledninger er baseret på nyeste Joomla Go! pakke (v302). Nogle afsnit forudsætter ekstra funktioner installeret. Ikonerne viser funktionen er inkluderet i pakken funktionen forudsætter ekstra funktioner installeret/konfigureret.

2 Opret og tilpas indhold Afsnit 1.1 Opret artikel Side 2 / 45 1 Opret og tilpas indhold 1.1 Opret artikel Med en Joomla Go! pakke er det nemt at oprette og udgive en artikel: Så nemt er det: Opret en ny artikel. Udfyld Titel og vælg en Kategori (fanen Publiceringsindstillinger). Skriv artiklen og gem. Nu bliver artiklen gemt, publiceret og der oprettes automatisk et menupunkt i den relevante sidemenu. Menupunktet oprettes automatisk hvis funktionen AutGen menu (autogenerering af menu) er installeret og slået til. For de nysgerrige er en gennemgang i afsnit 4.2 Sidemenu. KAM = Kategori, artikel, menu Hvis du vil/skal gøre det manuelt, beskrives her den normale måde artikler oprettes på: 1. Billeder klargøres og uploades. Billeder skal sikker beskæres og bearbejdes op på anden måde. Derefter uploades de enten med Ftp eller enkeltvis. Se nedenfor. 2. Tekst klargøres, gerne i Word eller andet program. 3. Kategori: Kategorien skal oprettes før den kan tildeles en artikel. 4. Artikel: Opret en ny artikel. Navngiv, indsæt indhold (tekst og billeder) og tildel en kategori. Angiv evt. flere indstillinger. 5. Menupunkt: Opret et nyt menupunkt af typen Enkelt artikel. Giv menupunktet et navn, vælg hvilken artikel, der skal vises, vælg hvilken menu det nye menupunkt skal tilhøre. Hvis menuen ikke er oprettet, skal den selvfølgelig oprettes først. Se evt. denne video. 1.2 Tekstredigering Skriv tekst Tekst indsættes primært i artikler, men også en lang række andre steder: Kategoribeskrivelser, html-moul m.fl. Alle steder anvendes dog samme editor. Valg af editor: Der kan være flere editorer installeret. Som standard leveres Joomla Go! med JCE, der er en editor med mange funktioner. I tillæg installeres udvidelsen JCE Mediabox, der tilføjer en række funktioner i forbindelse med billeder i lightbox, tooltips mm. Standard for website: Vælges under Konfiguration > Websted > Standard editor.

3 Opret og tilpas indhold Afsnit 1.2 Tekstredigering Side 3 / 45 Der kan vælges individuelt pr. bruger: Rediger profil > Grundindstillinger > Editor. Hvis ingen er valgt anvednes standard for website. Editoren har to værktøjslinjer: Den kan tilpasses for hele websitet og der kan oprettes individuelle profiler med et andet udvalg af funktioner. Åbn en artikel (eller andet med tekst der skal redigeres) og begynd at skrive: Gem når du er færdig. Kør musen over knapperne for at udforske de forskellige funktioner. Hvis du har arbejdet med Word eller andre teksbehandlere vil du hurtigt føle dig hjemme. Indsæt tekst Hvis du vil tilføje tekst, der allerede er skrevet i Word eller fra et andet website skal du bare kopiere det. Derefter skifter du til din artikel og anvender funktionen indsæt som tekst (Paste as plain text). Så fjernes alle koder og din tekst formateres korrekt. OBS: Ved siden af Paste knappen er klip- og kopierings-knapperne. Af sikkerhedshensyn blokerer browserne for brug af disse knapper. Brug ctrl+x for at klippe og ctrl+c for at kopiere. Knapperne hænger sammen med Paste-knappen, så de kan ikke fjernes. Tekstskabeloner Med Content Templater (små indholds-skabeloner) kan du indsætte samme indhold flere gange. Det er typisk en blanding af kode plus indhold som f.eks. en tabel til placering af en punktopstilling ved siden af et billede. I Content Templater > Ny tilføjer du en ny skabelon. Når du redigerer tekst kan du indsætte dit predefinerede indhold ved at klikke på knappen Indsæt skabelon > (skabelonnavn):

4 Opret og tilpas indhold Afsnit 1.2 Tekstredigering Side 4 / 45 Formater tekst Overskrifter Der er defineret overskriftstypografier som er nemme at anvende. Det er nemt, men det er også vigtigt i forhold til søgemaskinerne, at du ikke manuelt indstiller med størrelse, farve mm. Du skal vælge en H1, H2 eller H3 (H = Heading = Overskrift). 1 Skriv teksten til overskriften. Markeøren skal stå og blinke et sted i overskriften, men du behøver ikke markere det hele.

5 Opret og tilpas indhold Afsnit 1.3 Links Side 5 / 45 2 Find listen med typografier. Oftest står der Paragraph (standard typografi i afsnit). Klik på den overskrift du skal bruge. 1.3 Links Du kan indsætte links til internt indhold (andre artikler), filer (pdf, billeder m.fl.) på webserveren eller andre websites. Opret link til anden artikel Inden du går videre her, skal du have to artikler: Den med tekst, der skal links fra og den artikel der skal linkes til. 1 Marker tekst, der skal linkes fra. Klik på knappen [Insert link].

6 Opret og tilpas indhold Afsnit 1.3 Links Side 6 / 45 2 Artiklerne finder du under Content. De forskellige kategorier vises med tilhørende artikler. (1) Klik på den ønskede artikel. (2) Check at linket indsættes i URL. (3) Du kan evt. vælge at artiklen skal åbne i et nyt vindue. (4) Indsæt linket og luk dialogboksen. 3 Din tekst har nu et link til en anden artikel. Husk: Gem & test! Opret eksterne links Hvis du vil linke til eller måske ekstrabladet.dk følger du vejledningen ovenfor med flg. ændringer i trin 2: pkt 1: Spring over. pkt 2: Skriv adressen hele adressen: Hvis du springer over tolkes linket som relativt til dit website F.eks. pkt 3: Open in new window er en god indstilling. pkt 4: Insert.

7 Opret og tilpas indhold Afsnit 1.4 Tabeller Side 7 / 45 I Joomla Go! bliver eksterne links automatisk markeret med en lille figur efter linket, så det for brugeren er tydeligt at der er tale om et eksternt link i et nyt vindue: Link til kontaktformular Den medfølgende kontaktformular er oprettet som et topmenupunkt. Hvis du (f.eks. i bundteksten) vil indsætte et link til kontaktformularen gøres det nemmest sådan: 1 2 Klik på menupunktet Kontakt. Kopier det der står efter dit domæne (her kontakt-os). Gå til den artikel eller bundtekst-modulet og opret et link som normalt. Indsæt det kopierede. Klik Insert. Du vil se, at editoren registrerer et link af typen Weblinks. Hvis du ikke har et modul med navnet Bundtekst af typen Brugerdefineret HTML kan du få oprettet et. Så kan du selv redigere bundteksten. 1.4 Tabeller Det er nemt at arbejde med tabeller hvis du bruger disse tips: Tip #1 Hvis ikke du kan se tabellen når den er indsat kan du slå visning af

8 Opret og tilpas indhold Afsnit 1.4 Tabeller Side 8 / 45 usynlige elementer til Tip #2 Indsæt en tabel ved at tegne. Tip #3 Når tabellen er indsat er den meget lille. Cursoren står i sidste celle. Inden du gør mere: Skriv xxx. Så udvider cellen sig. Tip #4 Højreklik på tabellen for at arbejde mere med tabellen opsætning og

9 Opret og tilpas indhold Afsnit 1.4 Tabeller Side 9 / 45 udseende. Tip #5 Gode tilpasninger til udseendet starter med at ændre tabelindstillingerne (tabel properties). Herunder er et par af de mest brugte. Denne fine tabel får du med disse indstillinger: General > Width: 400 Advanced > Classes: tbl-hlines Css-klassen tbl-hlines (h-lines = horisontale = vandrette linjer) sætter vandrette kanter på alle tabelceller. Det er en Joomla Go! feature. Tilsvarende kan du bruge tbl-vlines (v = vertikale) til at få dette: Hvis første række skal være overskrifter, kan du f.eks. give cellerne en overskriftsfarve. Det gør du ved at markere cellerne højreklik > Cell > Table cell properties > fanen advanced background color: Skriv en værdi eller brug farvevælgeren th. for indtastningen.

10 Opret og tilpas indhold Afsnit 1.5 Billeder Side 10 / Billeder Billeder samles og klargøres på egen PC. De skal uploades til webserveren for at de kan bruges i artikler, til produkter mm. Klargøring Det er god praksis at klargøre billedet i den rigtige størrelse inden upload. I en snæver vending kan du vælge at vise billedet i en anden størrelse, hvor browseren skalerer i visningen, men det gør vi ikke her. Den bedste rækkefølge for billedmanipulationer er normalt vend og roter beskær rediger (juster farve, skarphed, fjern pletter osv.) tilpas størrelse (kun ned, aldrig op) Billedformater Hvilket format? hvis du er i tvivl: Brug png. hvis du får fotos som jpg: Behold formatet. hvis du får gif-filer, der ser pæne ud: Behold formatet. bmp, tiff, psd, ai osv: Alle andre formater konverteres til png. Her er nogle formater: billede.png. Ukomprimeret billedformat. Fordele: Alle farver, ingen urenheder pga. komprimering, mulighed for transparent baggrund. Ulemper: Fylder lidt mere end jpg og gif. Dengang vi kikkede på indernettet via et modem havde det stor betydning. I dag har det minimal betydning. billede.jpg. Komprimeret billedformat. Fordele: Alle farver, kan komprimeres så et billede fylder mindre. Ulemper: Ved komprimeringen dannes de såkaldte jpg-artefakter. De er mindre iøjnefaldende på fotos end grafik. Her er en sammenligning (forstørret til 120%). Png (15 kb) til venstre, jpg (9 kb, kompression 50%) til højre. Artefakterne forstørret: billede.gif: Ukomprimeret men kun op til 256 farver. Velegnet til enkel grafik med ensfarvede falder. Her går det ud over farveovergangene (png øverst,

11 Opret og tilpas indhold Afsnit 1.5 Billeder Side 11 / 45 gif nederst): animeret gif: Specielt gif-format som kan indeholde flere billeder, der vises som en lille tegnefilm. Nyd denne samling Under construction gif s fra nettets barndom. Filnavne navn: Filnavne skal kun indeholde tegnene a-z, 0-9 samt bindestreg (-) og underscore (_). Det gælder billeder (*.png, *.jpg, *.gif m.fl.), dokumenter (*.pdf, *.docx, *.xlsx m.fl.), zip-filer, videoer osv. Køge+Ålborg.Jpg bliver til koege-aalborg.jpg. versioner: Ofter har du brug for flere størrelser af samme billede. Tilføj bredden efter filnavnet så billederne kina_1024.jpg, kina_320.jpg og kina_180.jpg er tre udgaver af samme motiv. Evt. kan du bruge bredde x højde: kina_1024x600.jpg. bogstavering: Brug kun små-bogstaver. Ferie i Harzen.JPG bliver til ferieiharzen.jpg eller ferie-i-harzen.jpg. Upload billeder enkeltvis Den enkleste metode er at anvende billedknappen i editoren. I dette eksempel skal har jeg brig for at billede til at indsætte i en artikel. Start med at åbne din artikel i Joomla og klik på det sted hvor der skal indsættes et billede. OBS: Brug denne fremgangsmåde selvom billedet ikke skal indsættes men blot uploades! 1 Klik på knappen Insert/Edit image.

12 Opret og tilpas indhold Afsnit 1.5 Billeder Side 12 / 45 2 I dialogboksen vises undermapper til Root, der normalt er Her er der 4 undermapper. Klik på den mappe, dit uploadede billede skal gemmes i. Her er valgt Artikler. 3 Klik på knappen Upload yderst th. 4 5 Klik på knappen Browse og find dit billede. Du kan tilføje flere billeder til listen inden du klikker på knappen Upload. Når du kan se billedet i miderste felt er billedet uploaded til webserveren. Hvis du ikke skal bruge billedet nu, kan du lukke dialogboksen.

13 Opret og tilpas indhold Afsnit 1.5 Billeder Side 13 / 45 OBS: Du kan uploade alle filtyper på denne måde også pdf, xlsx osv. 6 Du skal klikke på billednavnet (se figuren i trin 5) så mappenavn og billednavn fremkommer i feltet URL. Nu kan du klikke på knappen Insert. Du kan angive flere indstillinger, men nu er billedet i hvert fald uploadet til webserveren. Upload flere billeder: Filebrowser Når du logger på som administrator ser du et Dashboard. Her kan du vælger JCE File Browser til at uploade billeder til webserveren. Du kan også håndtere de billeder og mapper der allerede er på webserveren. Ovenover er vist knappen Medier. Det er Joomlas indbyggede værktøj som JCE File Browser erstatter, så den bruger du ikke. Brug Upload-funktionen som beskrevet i afsnittet Upload billeder enkeltvis. Upload flere billeder: Ftp Upload med Ftp (File Transfer Protocol) gøres ved hjælp at et ftp-program. Et par gode valg er Windows Stifinder (som bruges til alt andet på pc en). Fordel: Nem at gå til, alt er som det plejer. Ulempe: Ser ud til at være langsommere end Filezilla. Hvis du blot skal uplaode et billede eller en pdf-fil en gang i mellem betyder det intet. FileZilla, der er Open Source og kan downloades gratis på filezilla-project.org. Fordel: Kan det hele. Ulempe: Du skal lære noget nyt.

14 Specielt indhold Afsnit 1.6 Artikelnavigation Side 14 / 45 Billedprogrammer Som grafikprogram kan anbefales XnView, der kan downloades gratis på Dette program håndterer billeder (størrelse, canvas, navngivning og meget mere). Hvis du skal arbejde med den grafiske del af et billede (motivet) har du brug for at grafikprogram som PhotoShop Elements, Paint Shop Pro e.lign. Hvis du har MS Powerpoint (især 2007 eller 2010) er det et særdeles fint grafikprogram til at oprette grafiske elementer. Det her er f.eks. oprettet i Powerpoint og gemt som png: XnView Et par genvejstaster, du skal lære: Ctrl+shift+V: Opret et nyt billede fra Windows klippebord. Forinden har du kopieret fra en webside, Powerpoint, PrintScreen, SnagIt, PrintScreen osv. Ctrl+skift+S: Gem som (nyt navn/format). Skift+S: Rediger Størrelse. Her ændres størrelse proportionalt så et 16:9 billeder stadig er 16:9, blot mindre. Skift+C: Rediger Canvas (baggrund). Her ændret størrelsen på baggrunden uden at motivet forvanskes. Det sker ved at tilføje ekstra baggrund (f.eks. hvid) på 1 3 sider så proportionerne ændres uden at motivet forvanskes. 1.6 Artikelnavigation Læs mere... (...) Sideskift (...) 2 Specielt indhold 2.1 Emneoversigt med popups Oversigtsartikel Indledes med tekst efterfulgt af tabel med billeder. Fra hver billede linkes til en artikel, der vises i lightbox. Indstillinger for link: Url: Link til Content > (artikel)

15 Specielt indhold Afsnit 2.2 PDF til download Side 15 / PDF til download Ofte er der brug for at tilbyde brugerne links til læsning eller downloads af pdffiler. Det sker i to trin: 1) Pdf-filerne gemmes på webserveren og 2) Der oprettes link til pdf-filen. Upload til webserver Der er flere muligheder: Ftp (f.eks. Filezilla, Windows Stifinder m.fl.), Medier i kontrolpanelet eller speciel-filhåndteringsudvidelse. Her anvendes Mediefunktionen. 1 Gå til Kontrolpanel > Medier.

16 Specielt indhold Afsnit 2.2 PDF til download Side 16 / 45 2 Klik på den mappe din pdf-fil skal uploades til. 3 Nederst klikker du på knappen [Vælg fil] og navigerer til den ønskede fil. 4 Når filnavnet står i feltet klikker du på [Start upload]. Når du kan se filen i oversigten ovenover kan du linke til den i en artikekel. Link til pdf-fil Åbn den artikel hvori der skal være et link til en pdf-fil. 1 Marker den tekst, der skal linkes fra. Klik på knappen [Insert link]. 2 Klik på knappen [Browse].

17 Specielt indhold Afsnit 2.2 PDF til download Side 17 / 45 3 Klik på mappen, klik på filen og klik på knappen [Insert]. 4 Du kan ved (1) se stien til pdf-filen. Du kan også skrive skrive den manuelt. Ved (2) bør du vælge at pdf-filen skal åbne i et nyt vindue. Klik på knappen [Insert]. 5 Nu vises et link til pdf-filen. OBS: Her indsættes automatisk et pdf-ikon. Det er standard i v.112 og senere.

18 Specielt indhold Afsnit 2.3 Kontaktformular (FlexiContact) Side 18 / Kontaktformular (FlexiContact) Når du modtager din Joomla Go! pakke er kontaktforumalren installeret og næsten klar til brug. Kontaktformularen fungerer sådan: En bruger udfylder formularen og klikker på Send. Systemet sender nu en til administrator og evt. en kopi til brugeren. Derfor skal systemets mail funktion være opsat og aftestet før du skal gå i gang med formularen. Den sidste færdiggørelse kommer her: 1 Du skal have (eller oprette) en -adresse, der står som modtager af administrator-kopien og afsender på bruger-kopien. Den oprettes på dit webhotel. Her skal du også finde flg. oplysninger: server til udgående post (f.eks. smtp.webhotel.dk) port (f.eks. 25 eller 2525 eller 8080) 2 Hvis du er flyttet ind på det rigtige domæne er det sat op for dig. Hvis du flytter ind på et midlertidig domæne skal du vente med disse indstillinger til domænepegningen er rettet. Hvis du selv vil ændre noget: Gå til Global konfiguration > Server og udfyld indstillinger. Se eksemplet.

19 Specielt indhold Afsnit 2.3 Kontaktformular (FlexiContact) Side 19 / 45 OBS: Der kan være andre opsætninger, afhængigt af dit webhotel. F.eks. kræver unoeuro.com en opsætning som vist tv.: Ingen SMTP godkendelse, kun port 25 og den anførte serveradresse. Kik i din udbyders dokumentation. 3 Hvis du flytter ind på dit blivende domæne er dette sat op for dig. Hvis du vil gøre det selv: Ret de generelle indstillinger under Configuration. Du kan rette de viste punkter.

20 Specielt indhold Afsnit 2.4 Landing page Side 20 / 45 4 Flexikontakt oprettes som et menupunkt. Den sidste tilpasning sker derfor under det valgte menupunkt. Gå til Menuer > (menu) > (menupunkt) >Indstillinger. Her kan du rette de fire viste elementer. Gem og luk og test. Hvis du får en mail som adminsitrator og som bruger er alt godt. 2.4 Landing page Når du bruger Google Adwords, udsender nyhedsbreve eller samarbejder med andre, har du undertiden brug for en landing page. Du kan bruge en almindelig artikel og blot kopiere url'en. Undertiden har du brug for en side, der ikke indgår i den normale navigation: Der er ingen menupunkter, der leder hen til den og måske skal menuerne slet ikke vises. Opret en "hemmelig" landing page:

21 Specielt indhold Afsnit 2.4 Landing page Side 21 / 45 1 Du skal bruge en kategori, som ikke indgår i navigationen. Her har vi oprettet kategorien kampagne til formålet: 2 Opret eller genbrug en artikel. Tildel den kategorien Kampagne og husk artiklens id (her 64): 3 Opbyg en url efter denne opskrift: Udskift kategori og id så det passer. Husk at teste den! 4 Opret evt. en pæn url i Omdiriger (Redirect): Du kan nu fortælle til dine partnere, Googla Adwords m.fl. at de skal sende brugeren til Den bliver af Omdiriger-funktionen oversat til den lange url og siden vises.

22 Gallerier Afsnit 3.1 Galleri i artikel Side 22 / 45 3 Gallerier 3.1 Galleri i artikel Gallerier i artikler oprettes af funktion Very Simple Image Gallery (=vsig). Du skal blot indsætte en kode i artiklen, så oprettes galleriet for dig - hvis du selvfølgelig har klargjort billederne. I dine eksempel-artikler er dette galleri: Se vejledningen til at oprette et billedgalleri nedenfor.

23 Gallerier Afsnit 3.1 Galleri i artikel Side 23 / 45 1 Klargør billederne. Her er billederne klargjort i samme størrelse (1024 x 576 = 16:9), navngivet fortløbende (så styrer jeg rækkefølgende) og uiploadet til mappen gallerier/haver. 2 Åbn den artikel galleriet skal vises i. Indsæt denne kode: {vsig}gallerier/haver{/vsig} Den betyder: Opret et Very Simple Image Galleri med de billeder, der ligger i mappen gallerier/haver. Når artiklen skal vises, oprettes billedgalleriet automatisk. I processen oprettes automatisk undermapperne vsig_images og vsig_thumbs. I disse mapper ligger galleribillederne i hhv. stor og lille udgave. Disse mapper kan slettes. Næste gang galleriet skal vises, oprettes undermapperne igen. Originalerne ændres ikke. Der er en række indstillinger i programudvidelsen Very Simple Image Gallery. Hvis du kun ønsker at bruge standardindstillingerne, skal du ikke gøre mere. Hvis du ønsker at ændre en indstilling for et specielt galleri, kan du tilføje dem sådan: {vsig}gallerier/haver align=2 width=507 height=295 cols=5 {/vsig} align=0,1,2,3: Angiver placeringen af miniaturebillederne. Følg uret: 0=kl. 12, 1=kl. 3, 2=kl. 6 og 3=kl. 9. width=den samlede bredde på galleriet inkl. billeder, margin, border og padding. height=den samlede højde. Brug enten width eller height. cols=hvor mange kolonner skal miniaturerne opdeles i? I eksemplet er der 5 kolonner og to rækker. Rækkeantallet kommer fordi, der er valgt 10 billeder i 5 kolonner.

24 Gallerier Afsnit 3.1 Galleri i artikel Side 24 / 45 Her er den samlede oversigt over indstillinger: width - width of the whole gallery in pixel (integer) e.g.: 600 height - maximum height of the images set in pixel; possible values: empty (use full width), (integer) e.g.: 300 imquality - quality of images in percent (integer from 1-100) e.g.: 90 align - align the gallery within the content item; possible values: 0 (right), 1 (center), 2 (left), 3 (float left), 4 (float right) twidth - width of thumbnails in pixel (integer) e.g.: 80 theight - height of thumbnails in pixel (integer) e.g.: 60 crop - scale thumbnails keeping proportions or cropped; possible values: keep (proportional), crop (crop) quality - quality of thumbnails in percent (integer from 1-100) e.g.: 80 space - space between thumbnails in pixel (integer) e.g.: 3 right - position of thumbnails; 0 = below, 1 = right, 2 = justified below, 3 = left area - no longer used (version 1.6.5) cols - thumbnail columns left/right of main image (integer) e.g.: 2 sort - images sort order; possible values: 0 (A-Z - DEFAULT), 1 (Z-A), 2 (old-new), 3 (new-old), 4 (random) sets - number of thumbnails to show per set; possible values "empty" (all images), any integer setstxt - label for sets (refer to Plugin Howto) cfwd - value for control-element "next"; possible values "empty" (default button), any text, filename of button (refer to Plugin Howto) cbwd - value for control-element "prev"; possible values "empty" (default button), any text, filename of button (refer to Plugin Howto) caps - show captions; possible values: 0 (no), 1 (yes) inout - position of captions; possible values: 0 (below the main image), 1 (blended over the main image) links - show links; possible values: 0 (no), 1 (yes) autolink - link the main image to the original image file; possible values: 0 (no), 1 (yes) script - use JavaScript? possible values: 0 (no), 1 (yes) hover - switch the main image onhover thumb; possible values: 0 (no), 1 (yes) preload - preload images and thumbnails; possible values: 0 (no), 1 (yes) tooltip - use the image file name for ALT/TITLE; possible values: 0 (no), 1 (yes) folderid - use folder name as identity of the top div-container; possible values: 0 (no), 1 (yes)

25 Gallerier Afsnit 3.2 Galleri i Lightbox Side 25 / Galleri i Lightbox Lightbox er blevet en betegnelse for et billede (eller andet indhold) der vises foran en sides indhold. For det meste fylder billedet ikke hele vinduet og baggrunden er tonet ned. Denne funktion kan du selv opsætte med din Joomla Go! pakke. Billederne i dette eksempel er lånt fra Blomstermaleri.dk hvor Birthe Jarlbæk viser sine fantastiske malerier. I dette eksempel går vi hele vejen og sørger for at der også vises et tool-tip når musen føres over et billede. Det er en smule nørdet at få sat op, men alt går nemt hvis du følger opskriften. 1 Klargør billederne! Du skal bruge hvert billede i to størrelser: Miniaturen som du klikker på og det store billede der toner frem. Her i eksemplet er miniaturerne 220 x 165px (forholdet er altså det klassiske 4:3). De store billeder er af forskellig størrelse og forskellige proportioner. Miniaturerne er altså et udsnit af de store billeder for at få 4:3 formatet

26 Gallerier Afsnit 3.2 Galleri i Lightbox Side 26 / 45 2 uden at forvrænge motivet. Opret en mappe til hvert galleri. Upload billederne til mappen. Her er den oprettet i roden, men du kan også oprette den som undermappe til f.eks. Gallerier. 1) Root = Mappen Images hvis du ser installationen i ftp. 2) blm = Mappen til dine billeder 3) blm01_tmb.jpg = Miniaturebilledet (her 200 x 165px) 4) blm01.jpg = Det store billede. 3 Opret den artikel hvor galleriet skal vises. Her er billederne indsat i en tabel med (tre kolonner, to rækker). Indstil evt. tabellens egenskaber: Højreklik et sted i tabllen og vælg Egenskaber (Table properties). Den eneste indstilling, der er anvendt her er indre margin (padding) så der bliver 3px luft omkring hvert billede, dvs. 6px mellem to billeder. 4 Indsæt et miniaturebillede i hver celle.

27 Gallerier Afsnit 3.2 Galleri i Lightbox Side 27 / 45 Her er indstillingerne for det første billede: På fanen Image skal stien til billedet udfyldes. Det kan du skrive eller vælge i file browseren nedenfor. Dimensions indsættes automatisk. På fanen Advanced skriver du jcetooltip (eller vælger på listen ovenover). Det gør at der vises et tooltip når musen føres over billedet. Title udfyldes som vist. Dobbelt kolon (::) bruges til at adskille titel og tekst. Resulatet bliver sådan: Klik Insert (eller Update) for at afslutte indsætning af miniaturebilledet.

28 Gallerier Afsnit 3.2 Galleri i Lightbox Side 28 / 45 5 Nu skal du oprette et link, der åbner det store billede. Sørg for at billedet fortsat er markeret. Klik på knappen Insert/edit link). 6 7 På fanen Link skal du skrive stien til det store billede. Brug evt. knappen Browse til at pege på billedet. På fanen Popups skal du udfylde disse felter: 1) Vælg denne type.

29 Navigation Afsnit 4.1 Topmenu Side 29 / 45 2) Skriv overskriften til teksten under billedet. Kan undværes. 3) Skriv teksten, der skal vises under billedet. Kan undværes. 4) Hvis du har flere billeder i dit galleri og brugeren skal kunne skifte mellem de store billeder uden at lukke, skal du skrive en gruppe. Alle billeder i dette galleri indgår i gruppen bm1. 5) No for at skjule et pop-ikon. 6) Vælg mediatypen Image. Klik Insert (eller Update) for at afslutte oprettelse af linket. Husk at gemme artiklen. 8 Se artiklen i funktion. Test at tooltip og popup virker. 9 Tillykke! Nu skal du indsætte de øvrige billeder og links. Husk, at du kan bladre mellem dine popups ved at klikke med musen eller bruge højre-/venstrepil. Hvis du har linket til et billede, der ikke findes, vises dette fine billede i stedet for det normale grimme røde kryds. 4 Navigation Navigation omfatter top- og sidemenuer samt links. 4.1 Topmenu Når du har modtaget din Joomla Go! pakke er alle topmenupunkter oprettet og bliver derfor ikke beskrevet yderligere her. Du kan få brug for at skjule et topmenupunkt. Det gør du ved at afpublicere på samme måde som du afpublicerer artikler. Gå til Menuer > (Din menu). Find dit menupunkt på listen. Klik på teksten i kolonnen Status. Menupunktet skifter nu status, f.eks. fra Publiceret til Ikke publiceret.

30 Navigation Afsnit 4.2 Sidemenu Side 30 / Sidemenu En sidemenu fremkommer typisk når der bliver klikket på et topmenupunkt og kan placeres hvor som helst. Det mest almindelige er som en lodret menu til venstre eller evt. højre for den viste artikel. Den kan dog også vises/gentages i f.eks. bundtekstområdet. I Joomla Go! er installeret et modul, der automatisk kan oprette sidemenuer ud fra en artikels kategori. Modulet hedder AutGenMenu, og er en tilgængelig Joomla 1.5 udvidelse. Den anvendte udgave har forbedrede funktionerne og opgraderet til Joomla 2.5. Sidemenuer kan også oprettes manuelt, hvilket ikke gennemgås her. Ny sidemenu Inden du opretter sidemenuen og aktiverer den skal du 1) have oprettet en eller flere kategorier og 2) en eller flere artikler der tilknyttes kategorien.

31 Navigation Afsnit 4.2 Sidemenu Side 31 / 45 De færdige menuer (1 niveau) Vores navigation skal ende med at virke sådan: I topmenuen klikker brugeren på et (1) menupunkt (Info), der henter (2) sidemenuen (venstre eller højre) med (3) links til artikler. Ved klik på (3) vises (4) artiklen. I Joomla Go! er inkluderet et modul, der automatisk opretter sidemenuen (2). Hvis du har prøvet den manuelle metode ved du, at det er en stor lettelse. Opret en ny sidemenu (1 niveau) 1 Forberedelse 1: Du har oprettet en eller flere artikler, der tilhører samme kategori. Her antager vi, at kategorien hedder Demokat. Forberedelse 2: Du har oprettet et (1) menupunkt i topmenuen. Oftest er det af typen Enkelt artikel eller Kategoriblog men her er frit valg. Beslutning: Du har besluttet hvilket modulposition din nye sidemenu skal vises i. Standard i en Joomla Go! for sidemenuer er left, men du kan vælge frit. 2 Opret et nyt modul af typen AutGen Menu.

32 Navigation Afsnit 4.2 Sidemenu Side 32 / 45 3 Fanen Detaljer: Anvend disse indstillinger. I pkt. 3 kan du skrive direkte. 4 Fanen Indstillinger: 1) Skriv artvmenu hvis du har en Joomla Go! skabelon. Det påvirker udseendet. 2) Vælg en kategori. Artiklerne fra denne kategori vises i menuen. 3) Vælg disse to indstillinger. 4) Forslag: Vælg de viste indstillinger. Prøv evt. med andre.

33 Navigation Afsnit 4.2 Sidemenu Side 33 / 45 5 Fanen Menu Tildeling: Vælg (1) Menu og (2) Menupunkt. Gem modulet. Husk at afprøve det! Færdig! Det virker sådan: Brugeren klikker på menupunktet Info, der kalder modulet Info, der opretter links til alle artikler i den valgte kategori. Det er faktisk lidt elegant. Du kan nu nemt flytte artiklerne mellem de forskellige menuer ved blot at tildele en anden kategori.

34 Navigation Afsnit 4.2 Sidemenu Side 34 / 45 De færdige menuer (flere niveauer) Vores navigation skal ende med at virke sådan: Brugeren klikker på topmenupunktet (1) Eksempler, der henter sidemenuen (2) Eksempler. Brugeren klikker på menupunktet (3) Tekster. Det er præcis som før. Nu sker der dog noget andet: Menupunktet Tekster åbner en (4) Undermenu hvor brugeren klikker på linket (5) Tooltips. Artiklen vises. Næste klik på (4) Tekster folder undermenuen sammen igen.

35 Navigation Afsnit 4.3 Eksterne links Side 35 / 45 Opret en ny sidemenu (flere niveauer) Fremgangsmåden er den samme som med 1 niveau med to forskelle. Hvis ikke du har prøvet den første metode skal du måske prøve den først. Forskel 1 Kategorierne er oprettet i flere niveauer. Kategorien Eksempler har underkategorierne Gallerier, Multimedie og Tekster. Forskel 2 underkategorierne. Der skal være artikler i Modulet Eksempler, fanen Indstillinger: (2) Vælg, at der skal oprettes links til artikler fra underkategorierne. (3) Vis kategorinavne som links. I eksempler medfører det, at du ved klik på Tekster åbner undermenuen. 4.3 Eksterne links Joomla indeholder (af historiske årsager?) en funktion til at oprette og vedligeholde eksterne links. Jeg bruger den ikke og kender ingen der gør. Det er så enkelt at oprette links i artikler og andre steder med tekst, at det ikke er rigtigt relevant. Se evt. afsnit 1.3 Links. Anbefaling: Hvis du vægter usability (brugervenlighed) skal din liste med eksterne links oprettes i en artikel som du så kan linke til i en normal menustruktur.

36 Navigation Afsnit 4.3 Eksterne links Side 36 / 45 Hvis du alligevel vil oprette links i menuerne, kommer her nogle forslag. Links i sidemenu Der er flere muligheder. Her vises to: Et tekstmodul i samme position som menuen og manuelt menupunkt med link. Indhold (tekst, billeder, links mm) oprettes forskellige steder. De mest anvendte er artikler, kategoribeskrivelser og div. tekst i moduler. Indholdet vises dog først når det bliver tildelt en modulposition (HVOR skal det vises?) og dette bliver publiceret, evt. med tidsstyring (HVORNÅR skal det vises?). Sidemenuen publiceres i den position, der oftest hedder left. Hvis du vil være sikker, kan du finde et modul af typen AutGenMenu og se hvor det er publiceret. Diskussion Almindeligvis fungerer menupunkter på flg. måde: Brugeren klikker på et menupunkt og nyt indhold kommer til syne i indholdsområdet. Generelt er det noget skidt at forvirre brugeren ved at nogle menupunkter opfører sig anderledes. F.eks. ved at man føres direkte til et andet website eller ved at der oprettes en (med et mailto:link). Anbefaling: Undgå denne type menupunkter! Link i tekstmodul Du har en sidemenu med menupunkter. Under den vil du gerne have en liste med links til eksterne websites. Det gør du sådan:

37 Navigation Afsnit 4.3 Eksterne links Side 37 / Gå til Moduler. Opret et nyt modul af typen Brugerdefineret HTML. 3 Vælg den samme position som dine sidemenuer anvender. Udfyld indholdet som normalt. Se evt. afsnit 1.3 Links.

38 Navigation Afsnit 4.3 Eksterne links Side 38 / 45 4 Vælg hvilke menupunkter modulet skal tilknyttes. Her er markeret at listen med links skal vises når brugeren klikker på topmenupunktet Website. Gem & luk. 5 Nu dukker listen op. Afhængigt af dit design kan der være behov for justering af opsætninger. I eksemplet her er der f.eks. valgt én standardfont til menuen og en anden til tekst. Det kan ses i menuen.

39 Navigation Afsnit 4.3 Eksterne links Side 39 / 45 Link som menupunkt (1) Du kan oprette et manuelt menupunkt men kun i manuelle menuer. Her opretter du et menupunkt hvor brugeren flyttes til et andet website: 1 Opret et nyt menupunkt at typen Ekstern URL. Udfyld som ovenfor. Vælg den rigtige menu som skal vise menupunktet. Links som menupunkt (2) Du kan vise et eksternt website som en del af dit eget website. Det kan se sådan ud:

40 Brugere og kontakter Afsnit 5.1 Brugere Side 40 / 45 I stedet for eget indhold vises indhold fra et fremmed website. Opret et menupunkt af typen iframe indlejrer: Diskussion Lidt bedre end første forslag, men brugeren har lidt problemer hvis hun faktisk vil læse hele avisen i sin egen fane. Anbefaling: Brug det med måde. 5 Brugere og kontakter 5.1 Brugere En person kan have en af flere roller i forhold til dit website. En bruger er altid medlem af en brugergruppe hvorfra brugeren får sine rettigheder til indhold (hvad kan brugeren se?) og handlinger (hvad kan brugeren gøre?). Brugergrupper, roller og rettigheder kan frit defineres. Her er de mest anvendte grugergrupper. Redigering af brugere Webmaster kan redigere brugerdata, herunder aktivere/deaktivere en bruger. Generelle indstillinger I Brugere > Indstillinger kan du vælge om brugerregistrering skal være tilladt mm. En vigtig indstilling er om en ny bruger skal aktiveres af en administrator eller om brugeren selv aktiverer ved at klikke på et link i en tilsendt . Brugergrupper Den mest begrænsede brugergruppe er gæst (andre betegnelser: public, alle, besøgende osv.): Brugeren har læseadgang på websitet, kan se grafik, udfylde formularer mv. men kan ellers ikke ændre noget. En skribent har gæsterettigheder og kan desuden oprette artikler i et vist omfang. Kun egne artikler kan publiceres og redigeres. En redaktør har adgang til alle artikler, der kan rettes, publiceres mm. Evt. kan redaktøren også administrere brugere. Webmaster (Super User) kan alt, herunder installere og konfigurere funktioner.

41 Nyhedsbreve Afsnit 6.1 Opret et nyhedsbrev Side 41 / 45 Redigering af brugergrupper Anbefaling: Redigér kun brugergrupper hvis du ved hvad du gør. Kontakter En kontakt oprettes et andet sted i Joomla og har som udgangspunkt intet med brugere at gøre. Formålet med kontakterne er, at besøgende kan se kontaktinfo og kontakte de pågældende gennem en formular. Det kan gøres uden at vise kontaktens -adresse. Kontakterne kan være interne (webmaster, bestyrelsesmedlemmer, kundeservice osv.) eller eksterne (administratorer, sagsbehandlere, presse, konsulenter osv). Redigering af kontakter Under Kontakter > Indstillinger er der en del indstillinger. Hvis du er i tvivl kan du ændre én indstilling ad gangen og checke forskellen. OBS: Ved redigering af den enkelte kontakt er der flere felter end den enkelte bruger selv kan rette. Brugere + brugerprofil + kontakter Hvis funktionen er aktiveret, er funktionen brugerprofil også aktiveret. Normalt registreres disse informationer om en bruger: Navn, brugernavn, , password (krypteret, så det ikke kan aflæses af administrator) samt preferencer omkring websitetet (sprog mm.). Med brugerprofil aktiveret kan brugeren desuden udfylde info om adresse, telefon, website mm. Det virker typisk sådan: Brugeren udfylder en formular med brugerinfo og profilinfo. Ved klik på knappen Opret oprettes brugeren i databasen. Herefter opretter systemet automatisk en kontakt i databasen med samme data. Der kan nu vises en liste med kontakter og man kan kommunikere med den enkelte kontakt via formularen. Hvis det er konfigureret kan en bruger redigere egne bruger- og profildata. OBS: Ved efterfølgende redigering af brugerprofil-data opdateres kontaktinfo ikke. Det skal evt. gøres manuelt. 6 Nyhedsbreve Du kan sende nyhedsbreve ved at importere en artikel til CM Opret et nyhedsbrev Et nyhedsbrev oprettes sådan: 1. Joomla: Artiklen Nyhedsbrev import redigeres. 2. CM+: Opret kampagne og importer artikel

42 Nyhedsbreve Afsnit 6.1 Opret et nyhedsbrev Side 42 / CM+: Send nyhedsbrevet til en eller flere lister Rediger artiklen Nyhedsbrev import Artiklen redigeres som enhver anden artikel. Da resultatet skal være et nyhedsbrev, der skal vises korrekt i mange forskellige -klienter, skal du bevare strukturen i html-koden. Der er en ydre tabel og en indre tabel med en enkelt celle til dit indhold. Du skal kun redigere indholdet i denne celle. Se evt. mere om tabeller i afsnit 1.4 Tabeller. Sørg for at du kan se de skjulte elementer (Tip #1). Ellers er det en helt almindelig artikel. Opret en kampagne 1. Klik Create a new campaign. 2. Udfyld Define the Campaign and Sender. 3. Select the format for this campaign: Vælg Import my own design, Next. 4. Import your campaign: Her sker det. Udfyld som vist. For at få det mest robuste nyhedsbrev skal du huske plt Du får denne kvittering for korrekt import. Du skal klart vælg Preview så du sikrer dig, at alt er skønt. Hvis noget ser forkert ud, kan du gen-importere

43 Nyhedsbreve Afsnit 6.1 Opret et nyhedsbrev Side 43 / 45 nyhedsbrevet. 6. Herefter færdiggøre du opsætningen ved at redigere Plaintext-udgaven (import from your html) og vælge modtagere. Tidligere nyhedsbreve Når du har udsendt nyhedsbrevet, kan du publisere det på dit website. Det nemmeste er at oprette en kopi i en anden kategori. 1 Åbn artiklen Nyhedsbrev import, som netop er importeret til og udsendt fra CM+. 2 Gem en kopi af artiklen. Ret Titel til f.eks. Nyhedsbrev december Publiceringsindstillinger > Alias: Slet Kategori: Vælg den ønskede kategori. Gem artiklen. Kontroller, at nyhedsbrevet er synligt i den rigtige menu. Forudsætninger Du kan følge denne vejledning hvis dit website har disse opsætninger: