HTML koder, du kan kopiere og genbruge. Normalt skrives koderne med små bogstaver, men redigerinsværktøjet i CMSimple laver store bogstaver. Derfor er koderne herunder også lavet med store bogstaver. ------------------------------------------------------------------------- MENUPUNKTER ------------------------------------------------------------------------- Overordnet menupunkt: Sådan ser koden til en

menu ud

Mine opskrifter

Undermenu til ovenstående: Sådan ser koden til en

menu ud

H2 menu

------------------------------------------------------------------------- AFSNIT OG LINIEKNÆK ------------------------------------------------------------------------- Afsnit. Almindelige afsnit er omklamret af

tagget. Der kommer et nyt

tag hvergang, du taster på Enter

Almindelig tekst

Linieknæk (ikke det samme som nyt afsnit). Et linieknæk (Shift+Enter) har ikke både et start og et slut tag. Det ser blot sådan ud:
------------------------------------------------------------------------- LINK KODER ------------------------------------------------------------------------- Link til andre hjemmesider. Koden til et link til en anden hjemmeside, her Danmarks Radio, kan se sådan ud: Danmarks Radio Linket til DR's hjemmeside står mellem de to gåseøjne i koden. Den synlige tekst, du klikker på står til sidst i koden lige før Hvis linket skal åbne i et nyt Browservindue, skal du tilføje koden target=_blank så resultatet ser sådan ud: Danmarks Radio ------------------------------------------------------------------------- JUSTERING AF TEKST ------------------------------------------------------------------------- CMSimple kan fra redigeringsvinduet placere tekst med lige venstre margen, centreret eller højrejusteret. Koderne skabes automatisk ved at klikke på de tre knapper i redigeringsvinduet og ser således ud:

Denne tekst er standard ventrejusteret

Denne tekst er også ventrejusteret

Denne tekst er centreret

Denne tekst er højrejusteret

Der mangler dog en knap til at lave lige margener. Her må du selv ind og ændre i html koden sådan her:

Denne tekst er med lige margener

Du oplever selvfølgelig kun lige margener effekten, hvis du har masser af tekst! ------------------------------------------------------------------------- INDSÆTTELSE AF BILLEDER ------------------------------------------------------------------------- Koden for et billede. Når du indsætter et billede i et afsnit ser koden således ud:

Her er det billedet ost.jpg, der vises. Billedet ligger i mappen images. Flydende billeder i højre og venstre side. Koden til placering af billeder til venstre eller til højre for teksten:
Her er det billedet billede.jpg, der vises. Billedet ligger i mappen images. FLOAT: left placerer billedet til venstre for teksten. FLOAT: right placerer billedet til højre for teksten. Teksten placeres umiddelbart efter koden koden til billedet. Prøv at studere denne kode:
Nu har img (billedet stump.gif) også fået en style, nemlig en bredde (WIDTH: 150px;) og en højde (HEIGHT: 550px;). stump.gif er et lille 20x20 pixels gif billede, der kan strækkes i længde og bredde. Billedet kan derfor bruges som et måleredskab til at finde den bedste billedstørrelse til en given hjemmeside med en bestemt tekstmængde. ------------------------------------------------------------------------- UDSKIFT TOPBILLEDET ------------------------------------------------------------------------- Få selv kontrol over topbilledet. Lav et nyt topbillede i et billedbehandlingsprogram i størrelsen 750x100 pixels. Gem billedet under navnet top.jpg (=samme navn som det nuværende billede). Upload billedet til mappen images, hvor dine andre billeder ligger. Gå ind hvor du redigerer i skabelonen. Udskift "kassen" i linie 19.2 med følgende kode: ./images/ Eksempel: Originalkoden: - ændres til:
Klik på Gem og topbilledet er nu skiftet ud med dit eget. ------------------------------------------------------------------------- AUTOMATISK BILLEDGENERATOR TIL TOPBILLEDET. ------------------------------------------------------------------------- Upload billederne til mappen "images" via redigeringsvinduet i CMSimple. Så behøver du ikke at inddrage et FTP-program. Alle billederne skal have fortløbende numre og gemmes som top1.jpg, top2.jpg, top3.jpg osv. Generatoren herunder passer til 30 forskellige billeder. Udskift selv tallet til det antal billleder, du ønsker at vælge imellem. Indsæt denne kode øverst i skabelonen lige under tagget. Længere nede i koden hvor topbilledet sættes ind kan du skrive: Oprindelig kode:
Ny kode
);"> ------------------------------------------------------------------------- STYLEKODER (css) TIL EN KASSE ------------------------------------------------------------------------- Eksempel på indsættelse af en kasse til tekst eller lignende. STYLESHEET til kassen .kasse { font-size: 8pt; color: black; width: 100px; padding: 5px; border: 2px solid #000000; background: #00FF00; } - og den tilhørende kode til kassen i SKABELONEN:
abc
------------------------------------------------------------------------- NYHEDSBOKS ------------------------------------------------------------------------- En redigerbar nyhedsboks Denne kode laver en nyhedsboks over indholdet under overskriften NBox Nyhedsboksen kan laves i bunden af den sidste side i CMSimple og kan efterfølgende redigeres i CMSimple redigeringsruden.

NBox

#CMSimple hide# Nyheder Indhold af nyhedsboks ... #CMSimple hide# Du kan lave en kasse til nyhederne ved hjælp af et styleshet og lægge bokskoden ind i skabelonen
Uden en fast højde vil kassen udvides i højde i forhold til den tekstmængde, der fyldes i kassen. En højde kan sættes fast med koden "height:" efterfulgt af den ønskede højde i pixels. Hvis teksten ikke kan være i kassen løber den ud over og må bremses med koden "overflow:" Overflow kan have følgende værdier: Værdi Beskrivelse visible Bremser ikke teksten. Den løber bare ned over kassens kant. hidden Teksten er kun synlig i det område boksen dækker. Resten af teksten er utilgængelig og usynlig scroll Der laves en fast scroll-bar (vandret - lodret ) til at rulle op og ned i teksten auto Der laves en scroll-bar automatisk, hvis teksten er større end pladsen - eller ingen scroll-bar inherit Overflow værdien arves fra et forældre element Eksempel hvor overskydende tekst bliver usynlig: .kasse { font-size: 8pt; color: black; width: 170px; height: 200px; overflow: hidden; padding: 5px; border: 1px solid #000000; background: #00FF00; } ------------------------------------------------------------------------- PLUGINS ------------------------------------------------------------------------- Herunder de koder fra kursusmaterialet, du kan få brug for at kopiere til dine plugins KALENDEREN Kopier og indsæt koden på det sted, hvor du ønsker at placere kalendermatrisen. Kopier og indsæt koden #cmsimple $output.=events("","","12");# på den side, hvor du vil have kalenderen i stor udgave. 12 = antal måneder frem der vises i tabellen. ------------------------------------------------------------------------- DET SPLITTEDE "FØR OG EFTER" BILLEDE MED LODRET SPLIT -------------------------------------------------------------------------
Before photo shows model with frizzy hair After photo shows manageable (but greasy-looking) hair If your browser supports it, drag the handle in the middle to compare the two photos
------------------------------------------------------------------------- DET SPLITTEDE "FØR OG EFTER" BILLEDE MED VANDRET SPLIT -------------------------------------------------------------------------
Before photo shows model with frizzy hair After photo shows manageable (but greasy-looking) hair If your browser supports it, drag the handle in the middle to compare the two photos
------------------------------------------------------------------------- IDEER OG OPLÆG FRA METTE ------------------------------------------------------------------------- Du kan se flere af Mettes arbejder med plugins på denne side: http://metweb.dk/xyz3 Kopier linket over i Browserens adresselinie Favicon: I head'en placeres link: xxx er navnet på din mappe. Favicon kan laves i GIMP (størrelse 16x16 eller 32x32) med fil-navnet favicon.ico Navnet skal naturligvis passe med linket. Upload dit lille ikon til downloads mappen på normal vis. Find link om emnet Favicon på carmas.dk under menuen Hjemmesider Calendar plugin til CMSimple Kode placeres i skabelonen hvor kalenderen matrisen skal placeres på siden: Dernæst laver du en side "Kalender", hvor årskalenderen efterfølgende placeres Denne kode kopieres direkte ind på "Kalender" siden (du skal IKKE skifte til html delen): #cmsimple $output.=events("","","12");# (12=antal måneder frem der vises i tabellen) Vedligeholdelse af kalenderen. Vælg Calendar under plugins. Klik på aktiviteter og lav om på indholdet. Aktiviteter indtastes efter denne skabelon: 13-4-2010; Arrangement; Silkeborg; ; 12:00 (Se help filen til Calendar plugin) Kalendertabellens udseende ændres under konfiguration. Kalenderen styles i plugin'en så den stemmer overens med farverne på resten af siden. Du kan få en live forklaring af Mette på forespørgsel. Dansk sprogfil til menumanageren Kopier og indsæt følgende tekst i et tomt text dokument Oprette nye sider (gem hver gang du har oprettet en side) og slette sider. Dobbeltklik for at omdøbe siden.
Husk at gemme ændringer inden du forlader menu redigering."; $plugin_tx['menumanager']['smmLevel1']="Level 1"; $plugin_tx['menumanager']['smmLevel2']="Level 2"; $plugin_tx['menumanager']['smmLevel3']="Level 3"; $plugin_tx['menumanager']['smmLevel4']="Level 4"; $plugin_tx['menumanager']['smmLevel5']="Level 5"; $plugin_tx['menumanager']['smmLevel6']="Level 6"; $plugin_tx['menumanager']['smmDelete']="Slet"; $plugin_tx['menumanager']['smmSave']="Gem"; $plugin_tx['menumanager']['smmSaving']="Gemmer menuen. Vent venligst..."; $plugin_tx['menumanager']['smmNewPage']="Indsæt side"; $plugin_tx['menumanager']['smmPromptText']="Indsæt ny side"; $plugin_tx['menumanager']['smmText']="Ny side"; ?> Gem teksten med filnavnet da.php Upload filen til undermappen \plugins\menumanager\languages\ i din CMSimple installation. Så kører din menumanager på dansk. ------------------------------------------------------------------------- BAGGRUNDSBILLEDE TIL SIDEN ------------------------------------------------------------------------- NY style på hjemmesiden med eget baggrundsbillede bg.jpg Billedet ligger i mappen images. Flg. kode styrer baggrundsbilledet og indsættes i "Rediger stylesheet": BODY { background-color: #FFFFFF; background-image: url("http://www.thlangs.dk/mandag/carl/images/bg.jpg"); background-repeat: no-repeat; } Desuden indsættes en kode i "Rediger stylesheet" til at styre 2 bokse. Værdierne for boksenes placering afhænger naturligvis af dit billede. Du kan evt. måle placeringen ved hjælp af GIMP .valg {position:absolute; top: 410px; left: 130px; width: 170px; height: 300px; overflow: auto; border: 1px solid #000000; } .indhold {position:absolute; top: 410px; left: 425px; width: 540px; height: 300px; overflow: auto; border: 1px solid #000000; } Elementerne herunder er nødvendige/valgfrie og skal indsættes i Skabelonen. 2 eksempler på indsættelse af de mest nødvendige dele af hjemmesiden:
-------------------------------------------------------------------------