Administration af hkkbhbest.dk

Administration af

hkkbhbest.dk

Guide til brug ved kursus onsdag den 16. februar 2011

Farveforklaring

Farveforklaring | Guide til administration af website

Forklaring og gennemgang

2

Systemet i praksis

Generel informationOm kurset, indholdet og øvrigt.

Gennemgang og præsentation af systemet.

Løsninger af praktiske opgaver i forbindelse med sitet.

1

23

Hvad er Umbraco?Umbraco CMSUmbraco CMS er et open source CMS baseret på .NET-teknologien. Umbraco CMS kom til verden i Danmark i 2004 og har siden udviklet sig til i dag at være blandt de 15 mest anvendte open source .NET-applikationer. En af Umbracos primære egenskaber er den simple og intuitive brugerfalde som sikrer webredaktøren et lettilgængeligt CMS.

Umbraco | Guide til administration af website

CMS: [Control Management System]

3

Start af Umbraco?Umbraco – et online værktøjUmbraco CMS ligger på den server/webhotel, der er tilknyttet domænet. Det er tilgængeligt fra alle kilder med internet. PC’er, PDA’er, mobiltelefoner og andre produkter med adgang til internettet. Det eneste du behøver at vide er adressen på administrationsdelen.

Umbraco | Guide til administration af website 4

Sidens adresse er:

hkkbhbest.dk/umbraco/default

Sidens adresse er:


Umbraco Login

5


6

Brugernavn

adminAdgangskode

hkbhtorp11

Logininformationer | Guide til administration af website

Hvordan er Umbraco?Om Umbracos opbygningUmbraco CMS er opbygget på en måde, der minder lidt om de styresystemer vi kender fra vores egne computere. – En stifinder til filnavigation og ikoner, der hver symboliserer forskellige områder

Umbraco | Guide til administration af website

[hkkbhbest.dk/umbraco/default]

7

SektionerSektioner

IndholdIndhold

Sider/FilerSider/Filer

VærktøjerVærktøjer

Umbraco Opbygning

8

SektionerOm Umbracos sektionerGennem Umbraco er det muligt at tilgå alle dele af hjemmesiden. Det gælder både den tekniske del, hvorfra sideskabeloner og dokumenttyper kan editeres og alle indhold kan redigeres og opdateres. Ligesom det er muligt at ændre alle designrelaterede dele af hjemmesiden og styre adgang og rettigheder til respektive brugere af systemet.

Forklaring af Sektioner | Guide til administration af website 9

Sider/FilerOm Umbracos Sider/FilerDe fleste, der har arbejdet med styrestystemer kender denne form for filnavigation. Umbracos system er et bygget på samme principper som tifinder og ligendende. Med overliggende mapper med underliggende mapper med filer osv.Disse kan slås helt ud, så det totale overblik opnås over indholdet af den enkelte mappe/side.

Forklaringer af Sider/Filer | Guide til administration af website 10

IndholdOm Umbracos indholdssektionDen del, der vedrører selve indholdet på siderne ligger i denne sektion. Indholdet er opdelt efter sideskabelonens områder.

1.Topbillede2.Venstremenu3.Indhold4.Højreside

Værktøjslinien er i øvrigt tilgængelig og kan bruges i forbindelse med opsætning af tekst, links og billeder.

Forklaring af indholdsdelen | Guide til administration af website 11

Hvad er formålet?Formålet med UmbracoMed et øget behov for at kunne styre mere eller mindre alt på et website følger en række krav til opbygningen. Umbraco gør det muligt at lave underliggende områder, der styres af enkeltpersoner med egne behov. Alt er tilgængeligt for alle online – og sitet kan administreres af flere på samme tid. Med et hav af øvrige muligheder og features er sitet som udgangspunkt sikret i forhold til ændringer, fremtidige ønsker og brugere.

Formålet med Umbraco | Guide til administration af website

Umbraco = Total kontrol

12

Hvad skal vi?Efter kursetMed dette dagskursus bliver hver enkelt bruger i stand til at ændre, oprette filer og sider. Uploade og linke dokumenter. Formatere tekst og farver – adminstrere filer og billeder samt redigere standard HTML-kode.

Altså alt, hvad der umiddelbart er behov for vedrørende administration af siderne på hkkbhbest.dk.

Efter kurset | Guide til administration af website

[Bliv tryg ved at bruge systemet]

13

Program

Program for onsdagen | Guide til administration af website

[Ændringer kan forekomme ]

14

01 – Kort indledning og præsentation af systemet 02 – Support og adminside – tilgængeligt materiale03 – Basisforløb – login, områder i Umbraco04 – Opgaver 1-505 – Spørgsmål og svar06 – Frokost07 – Opsamling på basisforløb08 – Avanceret forløb – HTML, navitaion med mere.09 – Opgaver 6-1010 – Pause11 - Spørgsmål og svar12 - Hjemmesidens anvendelse for den enkelte klub13 - Foventninger og mål for de respektive sider - kortsigtet14 - Ønsker, rettelser og andet.15 - Afslutning med henvisninger til videoer, opgaveark og mine informationer.

Lad os lave den hjemmeside vi alle ønsker!

Efter kurset | Guide til administration af website

[Defination af indhold til klubsider]

15

Opgave 1 af 5 – Redingering og publicering| Guide til administration af website 16

[www.hkkbhbest.dk/support]

Inden vi starter gå tilhkkbhbest.dk/support og download testfilerne.


17

Brugernavn

BIFAdgangskode

3030

Logininformationer | Guide til administration af website

1/8 Redigering og publiceringFind og klik på klubbens side med navnet „Om klubben“Du finder den i sektionen til venstre.Forside/Klubberne/(Din Klub)/Om klubben

Skriv indholdet til siden.Beskriv klubben som du ønsker det i teksten.Markér overskriften og vælg ”Typografier” i værktøjslinien.Vælg formatet ”Overskrift”.

Gem og publicér siden.Når du er tilfreds med indholdet klikkes på knappen ”Gem og publicér” symboliseret med en diskette og jordklode.

Kontrol af den nye version.Vælg fanen ”Egenskaber” over værktøjslinien.Klik på linket med titlen ”Alternative links”.Tryk eventuel F5, hvis ændringerne ikke vises i første omgang.


Find og klik på klubbens side med navnet „Medlemmer“Du finder den i sektionen til venstre.Forside/Klubberne/(Din Klub)/Medlemmer

Skriv indholdet til siden.Læg informationer om jer selv i tabellen.Markér navnene enkeltvis og vælg ”B”, så en bliver fede.

Gem siden.Når du er tilfreds med indholdet klikkes på knappen ”Gem” symboliseret med en diskette. Nu er indholdet og siden gemt – men ikke publiceret online endnu.

Kontrol af den nye version.Klik på knappen ”Se siden” i værktøjslinien – symboliseret med et dokument med et forstørrelsesglas på.

2/8 Upload af filerFind og klik på sektionen med navnet „Media“Du finder den til venstre i bunden af siden.Den er angivet med et ikon og teksten ”Media”.

Opret mappe.Højreklik på mappen med dit klubnavn.Vælg ”Opret”. Skriv ”dokumenter” som navn.Sørg for der står ”Folder” som mediearkiv. Tryk ”Opret”.

Opret fil i mappenHøjreklik på mappen du netop har oprettet.Vælg ”Opret”. Skriv ”Testdokument” som navn.Sørg for der står ”File” som mediearkiv. Tryk ”Opret”.

Upload din filKlik på knappen ”Vælg arkiv”og find filen ”Testdokument”.Klik herefter på ”Gem” i form af diskettesymbolet i topppen.Højreklik på klubmappen og vælg ”Genindlæs elementer”.


Kopier dokumentetGentag processen endnu en gang.

SletningFor at slette din kopi af dokumentet skal du højreklikke på filen og vælge ”Slet” og efterfølgende OK.Markér navnene enkeltvis og vælg ”B”, så en bliver fede.

Ændring af navnKlik på din fil. Vælg fanen ”Egenskaber” og indtast dit nye filnavn. Tryk herefter på ”Gem” for at foretage ændringen.Dette har IKKE indflydelse på allerede eksisterende links til dette dokument!

Kontrol af link til dokument.Under ”Egenskaber” kan du ligeledes tjekke om linket og dokumentet fungere korrekt ved at klikke på linket vist med blå tekst. Dokumentet hentes i et nyt vindue.

3/8 Links internt og eksterntFind og klik på sektionen med navnet „Content“Du finder den til venstre i bunden af siden.Den er angivet med et ikon og teksten ”Content”.

Navigér frem til siden „medlemmer“ under din klubside.Her er siden med dine ændringer fra sidst. Markér klubnavnet i teksten og vælg ”B” i værktøjslinien. Nu er teksten fremhævet.

Link til tekstdokumentet.Markér teksten ”Excel-dokument” og tryk på knappen ”Indsæt/redigér link”. Symboliseret med en lænke. Vælg fanen ”Mediearkiv” og navigér frem til dit netop oprettede dokument.” Klik på filen.

Opret linket.Indtast navn på filen. Vælg ”Åben i nyt vindue” ved ”Target”.Tryk herefter på knappen ”Indsæt” i bunden af vinduet.Gem og publicér siden og kontrollér som tidligere.

Opgave 3 af 5 – Links internt og eksternt| Guide til administration af website 20

Link til andre sider på hkkbhbest.dkMarker teksten ” Indsæt link til forsiden.” i bunden under tabellen. Skriv ”Gå til forside.” Marker ordet ”forside”.Tryk på ”Opret/redigér link”-ikonet i værktøjslinien.

Find den ønskede side.Navigér frem til din klubforside under ”Klubberne” og klik på den. Sørg for at der står ”Åben i dette vindue/ramme” under ”Target”. Klik på indsæt.

Link til eksterne sider/filerMarker teksten ” Indsæt link til HK’s hjemmeside.” i bunden under tabellen. Skriv ”Gå til HK Kommunal.” Marker ordet ”HK Kommunal”. Tryk på ”Opret/redigér link”-ikonet i værktøjslinien.

Indsæt linket/URL‘en.Indtast eller sæt URL’en ind. Navngiv linket. Vælg hvordan siden skal åbnes og tryk indsæt. Herefter publiceres og kontrolleres.

4/8 Opret og kopiér siderFind og klik på klubbens forside.Højreklik og tryk ”Opret”. Skriv ”Dokumenter” og lad der stå ”Content” under dokumenttype. Tryk ”Opret”. Siden er nu oprettet.

Indhold til siden.Kopiér alt fra siden ”medlemmer”. Først banner, så venstremenu, indhold og til sidst højreside. Brug Ctrl+A for at vælge alt, Ctrl+C for at kopiere og Ctrl+V for at indsætte. Gem efter hver del.

Skjul i menuen.Alle sider kan skjules. Det vil sige at de ikke er synlige i sidemenuen. (Den sorte menu i toppen). Vælg fanen ”Egenskaber” og sæt hak ved ”Ja” ved punktet ”umbracoNaviHide” i bunden.

Slet siden.Højreklik på siden og tryk ”Slet” – og OK.

Opgave 4 af 5 – Opret og kopiér sider| Guide til administration af website 21

Kopiér hele sider.Mange gange er det nemmere bare at kopiere en eksisterende side. På den måde får du både banner, venstremenu, indhold og højreside med på én gang. Derefter kan siden redigeres efter behov.

Start med at vælge den side du vil kopiere. Højreklik og vælg ”Kopiér”. Vælg den side den skal ligge under, som i dette tilfælde er klubforsiden og tryk OK. Luk vinduet.

Ændring af navnVælg fanen ”Egenskaber” og angiv det nye navn. Gem herefter og vælg fanen ”Indhold”. Og siden er nu klar til redigering og eventuel publicering.

5/8 Billeder og ankerpunkterFind og klik på sektionen med navnet „Media“Du finder den til venstre i bunden af siden.Den er angivet med et ikon og teksten ”Media”.

Opret mappe.Højreklik på mappen med dit klubnavn.Vælg ”Opret”. Skriv ”Billeder” som navn.Sørg for der står ”Folder” som mediearkiv. Tryk ”Opret”.

Opret fil i mappenHøjreklik på mappen du netop har oprettet.Vælg ”Opret”. Skriv ”Testbillede” som navn.Sørg for der står ”Image” som mediearkiv. Tryk ”Opret”.

Upload din filKlik på knappen ”Vælg arkiv”og find filen ”Testbillede”.Klik herefter på ”Gem” i form af diskettesymbolet i topppen.Højreklik på klubmappen og vælg ”Genindlæs elementer”.

Opgave 5 af 5 – Billeder og ankerpunkter| Guide til administration af website 22

Navigér frem til klubforsiden.På denne side er der allerede oprettet en nyhed. Denne kan redigeres som ønsket. Skriv en billedtekst ”Mit testbillede” og gem siden.

Indsæt billedeSæt cursoren under billedteksten og tryk på knappen ”Indsæt/redigér billede”. Symboliseret med et lille foto. Navigér frem til dit netop oprettede billede.” Klik på filen. Angiv eventuelt en titel til billedet og tryk ”Indsæt”.

Indsæt ankerSæt cursoren ved den nederste nyheds titel og klik på værktøjet ”Indsæt/redigér anker”. Navngiv ankerpunktet ”Testanker”. Nu kan du se at der er indsat et anker på siden ved titlen.

Opret linket.Markér billedet og tryk på link-værktøjet. Vælg siden og vælg ankerpunktet og tryk indsæt. Publicér og test. Ankerpunkter kan også være på alle andre sider på hkkbhbest.dk

Spørgsmål og svar

Spørgsmål og svar| Guide til administration af website

[Spørgsmål vedrørende opgave 1-5]

23

Uden mad og drikke…

[Frokost]

Opsamling


Basisfunktioner i Umbraco.

25

6/8 HTML kode og redigeringNavigér frem til siden „medlemmer“ under din klubside.Her er siden med dine ændringer fra sidst. Stil cursoren i tabellen et vilkårligt sted. Klik på værktøjet ”Redigér HTML-kilde” symboliseret med HTML i værktøjslinien.

Slet en række fra tabellenScroll helt ned. Her ser du følgende:

<tr><td>Navn Efternavn</td><td>Funktion</td><td>Område</td><td>T 9999 9999</td></tr>

Marker hele sektionen med musen og slet. Tryk herefter på opdatér. Vil du tilføje endnu en række markeres og kopieres sektionen, hvorefter den indsættes efter det sidste </tr>. Tryk ”Opdatér” og rækken kan redigeres.


Du kan indsætte forkellige HTML-tags i koden.Her finder du de mest anvendte koder.

<TAG>En sætning</TAG>

Eksempel på en HTML-tag start og slut.

Eksempler – forsøg at indsætte nogle af dem.

 - Fed tekst - Kursiv - understreget<center> - Centreret - Rød tekst - Georgia skrift<s> - Overstreget tekst

Se mere på www.html.dk

7/8 VenstremenuFind siden „Om klubben“.Scroll ned til området med venstremenuen.Her er der allerede defineret tre knapper. Du skal nu tilføje en knap via HTML.

Opret knap.Stil cursoren et vilkårligt sted i vinduet.Vælg ”HTML”-værktøjet. Marker nedenstående:

<li class="purple"><a href="/{localLink:1265}" title="Dokumenter">Dokumenter</a></li>(Dette er den nederste knap i HTML-kode.)

Kopiér og sæt ind efter det sidste </li>.

Nu kan du ændre farven og teksten på knappen. Pink, Purple, Green, Blue, Orange og Brown er pt. tilgængelige. Teksten er omringet af >Tekst<. Klik på ”Opdater”, tjek ændringer med”Se siden” i værktøjslinien.


Slet knap.Marker den linie HTML-tekst, der svar til den knap du vil slette og fjern den. Opdatér herefter.

Link på knappenMarker teksten på selve knappen. Brug herefter link-værktøjet til at finde den ønskede side som knappen skal pege på.

8/8 Redigér i canvas og emaillinkFind og klik på sektionen med navnet „Content“Du finder den til venstre i bunden af siden.Den er angivet med et ikon og teksten ”Content”.

Navigér frem til siden „medlemmer“ under din klubside.Her er siden som du har set nogle gange efterhånden. Højreklik på siden i navigationen og vælg ”Redigér i canvas”.

Redigér siden med det fulde overblik.Nu kan du ved at dobbeltklikke på områderne redigére direkte på siden. Det kan være en fordel, hvis man ønsker at se resultaterne med det samme og samtidig vil have det fulde overblik over siden.

KnapperneDet røde kryds betyder IKKE luk vinduet! – Det betyder ”Slet siden”. ”Gem” eller ”Gem og publicér” eller vælg blot at lukke hele vinduet på traditionel manér hvis du ikke har ændringer.

Opgave 3 af 5 – Links internt og eksternt| Guide til administration af website 28

Link til emailadresseMarker et navn under ”medlemssiden”.Tryk på ”Opret/redigér link”-ikonet i værktøjslinien.

Indtast adresse.Skriv følgende:mailto:[email protected] i feltet URL. Sørg for at der står ”Åben i dette vindue/ramme” under ”Target”. Klik på indsæt.

Publicér og test.

Det er ikke anbefalet at skrive selve adressen på et website, da internetrobotter kan opsamle disse til spam eller anden form for misbrug.

Hvis man ikke ønsker at åbne brugerens emailklient er det naturligvis nødvendigt at skrive adressen, men det kan i så fald gøres således: navn[snabel-a]email.dk eller navn[at]email.dk

mailto:[email protected]

Pause…

[Frisk luft til de trængende]

Opsamling


Basisfunktioner i Umbraco.

30

Spørgsmål og svar


[Spørgsmål vedrørende opgave 6-8]

31

Forventninger og mål?

[Hjemmesiden om en måned?]

Ønsker og rettelser?

[Hjemmesiden i morgen?]

Support og vejledning?

[www.hkkbhbest.dk/support]

VideohjælpOm hjælpevideoerDer er produceret hjælpevideoer, som viser i praksis hvordan forskellige opgaver løses i forbindelse med administration af sitet. De er ikke med speak – men der er en vejledende tekst i bunden af videoen.

Videoerne vil være tilgængelige på hjemmesiden på adressen:

hkkbhbest.dk/support

Hjælpevideoer | Guide til administration af website 35

VejledningVejledning

Documents

Administration af hkkbhbest.dk