27 besökare, 1 medlem och 2 Studenter är online nu
Loopia

webdesignskolan

Vad är "WDS CMS användarguide"?

WDS CMS användarguide är en hjälpfunktion till programmet WDS CMS » och du som använder WDS CMS kommer till den här guiden direkt från administrationen.

Webbplats som är byggd med Webdesignskolan CMS. Klicka på bilden för att se exemplet:

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window) 

 

WYSIWYG-editorn

Programmet som används för att redigera sidornas innehåll är TinyMCE från Moxiecode. Det är en Javascript-editor som körs clientside direkt i din webbläsare. All kod som genereras visas i formulärets TEXTAREA.

Mer information om programmet och support, forum mm hittar du här: https://www.tiny.cloud

Programmet körs clientside och det finns finns inga funktioner för ladda upp bilder och filer mm. Du använder istället funktionerna i WDS CMS för att ladda upp bilder och filer.

Du kan använda den inbyggda WYSIWYG-editorn eller skriva din egen kod. Använd knapparna "visa" eller "dölj" för att växla mellan WYSIWYG-editorn och formulärets textarea:

 

Kortkommandon från tangentbordet

Du sparar tid och musarm om du använder kortkommandon för att utföra vissa arbetsmoment.

  • Fokus på menyn: Alt+F9
  • Fokus på verktygsfält: Alt+F10
  • Infoga länk: Ctrl+K
  • Fet stil: Ctrl+B
  • Italic: Ctrl+I
  • Understruken: Ctrl+U
  • Välj allt: Ctrl+A
  • Ångra: Ctrl+Z
  • Gör om: Ctrl+Y
  • Header 1: Alt+Shift+1
  • Header 2: Alt+Shift+2
  • Header 3: Alt+Shift+3
  • Header 4: Alt+Shift+4
  • Paragraph - stycke: Alt+Shift+7
  • Växla fullskärmsläge: Ctrl+Shift+F
  • Sök: Ctrl+F

Du kan se en lista över alla Keyboard shortcuts här:

https://www.tiny.cloud/docs/advanced/keyboard-shortcuts/

 

Internet Explorer? Läs detta om du använder IE

Om du använder webbläsaren Internet Explorer kanske inte WYSIWYG-editorn visas alls. Andra fel som kan uppstå är att informationen du ändrar och sparar inte registreras på sidorna.

Om du får problem bör du i första hand välja en annan webbläsare som tex Firefox eller Google Chrome.
Läs mer om webbläsare och hämta dem här »

Du kan även prova att arbeta i Kompatibilitetsvy i Internet Explorer - läs mer här »

 

tillbaka till meny uppåt

Arbeta utan WYSIWYG-editor - skriva egen kod

Om du vill skriva din egen kod eller klistra in koden så kan du dölja WYSIWYG-editorn och skriva koden direkt i formuläret. Det finns även ett läge som kallas för "Edit HTML Source" i WYSIWYG-editorn men HTML-koden genereras då av editorn och det kan bli ett annat resultat än vad du tänkt dig.

OBS! Det finns en risk att din egen kod bearbetas av WYSIWYG-editorn när du sparar sidan. Om du vill skriva (eller klistra in) din egen kod så ska du dölja WYSIWYG-editorn.

Om du inte vill att din egen kod ska bearbetas av WYSIWYG-editorn och att editorn alltid ska vara inaktiverad när din sida visas kan du ange kommentaren <!-- !wysiwyg --> högst upp i sidan (före all annan kod) och spara sidan.

Exempel:

<!-- !wysiwyg -->

<h1>Rubrik</h1>
<p>
sidans innehåll här...</p>

När sidan visas så kommer WYSIWYG-editorn att vara inaktiverad. Detta är en bra metod om du vill skriva din egen kod och ha full kontroll över koden.

 

tillbaka till meny uppåt

Skapa och redigera sidor

Skapa en ny sida  eller välj den sida du vill redigera genom att lista sidor i tabell eller lista sidor i menyträd:

Du kan använda den inbyggda WYSIWYG-editorn eller skriva din egen HTML-kod. Använd knapparna "visa" eller "dölj" för att växla mellan WYSIWYG-läge och HTML-läge:

Ange alltid "Sidans titel" och "Sidnamn"

Sidans titel används som <title> och visas i webbläsarens överkant och som fönsternamn, favorit- och bokmärkesnamn mm. Sidnamnet används som menynamn och det är alltså viktigt att du använder relevanta och inte alltför långa sidnamn. Om sidan ska vara undersida till en annan sida väljer du huvudsidan i listmenyn. Om du inte väljer en egen menyordningen så sorteras menyerna i den ordning som databasen lagrar sidorna.

Du kan ändra ordningen och flytta menyvalet upp eller nedåt i samma menygren genom att ange värde för menyn i fältet "Ordning". Ett högre värde placerar menyvalet längre ned och du kan ange intervaller som tex 0, 5, 10, 15, 20, 25 så finns utrymme för att infoga nya menyer utan att behöva ändra sorteringsordningen för alla menyer i samma gren.

Spara sidans innehåll

Spara de ändringar du gjort regelbundet under arbetet med sidan så är du säker på att ingen information går förlorad. OBS! Spara de ändringar du gjort innan du väljer andra funktioner eller menyer och använd inte webbläsarens framåt- och bakåt-knappar!

Om du ufört ändringar som du vill ångra, men ännu inte sparat sidan, kan du välja knappen "Återställ" för att återgår till de senast sparade ändringarna.

TIPS! Gör en backup av MySQL-databasen i slutet av varje arbetspass så kan du återställa sidor även när du redan sparat sidan.

 

Spara som utkast innan du är klar med sidan

Du kan välja att "spara som utkast" om du vill spara sidan men inte publicera den direkt.

Sidan publiceras till databasen (och kan ses om URL till sidan anges) men visas inte i menyn. När du är klar med sidans innehåll avaktiverar du valet utkast och sparar sidan för visning online.

Radera sidor

För att radera en sida väljer du att "Lista sidor i tabell"
och klickar på symbolen "Radera"

TIPS! Gör en backup av MySQL-databasen i slutet av varje arbetspass så kan du återställa så kan du återställa raderade sidor.

 

tillbaka till meny uppåt

Förgranska och visa sidorna

När du visar webbplatsen ser du resultatet i ett nytt fönster eller flik. Använd menyn "Visa" för att öppna och visa webbpatsen i ett nytt fönster:

En bra metod är att att öppna webbplatsen endast en gång och växla mellan de två fönstren med ALT+Tab (fönster) eller CTRL+Tab (flikar) och uppdatera fönstret med F5 för att se ändringarna direkt.

Alt-tangent Tab-tangent eller Alt-tangent Tab-tangent visar admin eller webbplats

F5-tangent uppdaterar webbplatsens fönster

 

tillbaka till meny uppåt

Sidhuvud och sidfot

Sidhuvudet visar namnet på webbplatsen som du valt i "Inställningar" och sidfoten visar en länk till administrationen av Webdesignskolan CMS. Du kan redigera innehållet och lägga till egen information i sidhuvud och sidfoten.

Välj fliken "CSS och layout" och "Sidhuvud" eller "Sidfot":

TIPS! Du kan även ta bort sidhuvudet eller sidfoten genom att redigera filen "index.php" enligt avsnittet nedan.

 

tillbaka till meny uppåt

Huvudfilen "index.php"

Filen "index.php" är huvudfilen som hämtar in alla dina sidor från databasen med <?php include ?>

Du kan ta bort delar av layouten eller ändra placeringen av innehållet genom att redigera filen "index.php". OBS! Du bör INTE ändra i "index.php" om du inte har kunskap i HTML och PHP! Kontakta huvudadministratören eller webbansvarig om du inte har kunskaperna själv.

Välj fliken "CSS och layout" och "Huvudsidan (index.php)":

 

tillbaka till meny uppåt

PHP-kod och <?php include>

WDS CMS är utvecklad i PHP och du kan själv använda PHP i sidorna men observera att detta KAN innebära en säkerhetsrisk. Om någon av de användare som arbetar med sidorna inte behärskar PHP så finns risken att felaktig PHP-kod påverkar CMS, databas eller sidor felaktigt.

Tillåt PHP-kod

Välj om du vill tillåta PHP-kod i "Inställningar":

Funktioner med krav på att du tillåter PHP

Om du inte tillåter PHP-kod så fungerar inte <?php include ?> för att inkludera filer i sidorna.

Exempel på funktioner som använder <?php include ?> i WDS CMS är:

  1. Kontaktformuläret - "kontaktform.php"
    Se exemplet i WDS CMS demo »
  2. Sidkartan - "sitemap.php"
    Se exemplet i WDS CMS demo »
  3. Sökformuläret - "search.php"
    Se exemplet i WDS CMS demo »

Om du INTE tillåter PHP-kod så fungerar inte <?php include ?> men du kan då prova att infoga PHP-sidor med IFRAME-metoden enligt avsnittet nedan. Alla PHP-funktioner kanske inte fungerar när PHP-sidan infogas i en IFRAME.

Använda egen PHP-kod

Du måste dölja WYSIWYG-editorn innan du använder PHP-koden:

Du kan ange PHP-koden direkt i sidorna eller använda funktionen <?php include ?> för att infoga PHP-koden i egna filer.

Exempel på användning av <?php include ?> ser du i kontaktformulär, sidkarta eller sökformulär (avsnitten nedan).

INFORMATION!

Vi har använt funktionen eval i filen "index.php" för att PHP ska kunna användas i sidornas innehåll (variabeln $page):



Observera att den PHP-kod du infogar behandlas som en del av PHP-koden i Webdesignsskolan CMS och det finns en risk att det inte fungerar. Om du får felmeddelandet "Parse error" så har du använt PHP-kod som inte är korrekt. I exemplet nedan saknas en vinkel ">" vilket ger felmeddelandet:



Om du får problem med funktionaliteten så ska din egen PHP-kod raderas från sidan! Du kan då istället prova att infoga koden i en IFRAME enligt avsnittet nedan.

Läs mer om funktionen eval hos PHP.net: http://www.php.net/manual/function.eval.php Öppnas i nytt fönster (Open in new window) 

 

tillbaka till meny uppåt

Inkludera sidor med <?php include>

Du kan infoga HTML-sidor och PHP-sidor eller bilder med <?php include> - det kan vara aktuell information, annonser, reklam eller nyhetsbox. Du måste dölja WYSIWYG-editorn innan du använder PHP-koden:

Exempel på inkluderad sida

Här är sponsor-informationen till höger infogad med filen "sponsor.php":

Använd absoluta sökvägar i de inkluderade filerna

Huvudfilen "index.php" hämtar bilderna från mappen wds_cms/bilder, filerna från mappen wds_cms/filer och CSS-mallen från mappen wds_cms/css/ osv.

Om du sparar den inkluderade filen i samma mapp som "index.php" så fungerar det med relativa sökvägar i den inkluderade filen. Om du sparar den inkluderade filen annan mapp så måste du använda absoluta sökvägar till bilder och filer.

Den inkluderade filen är sparad i mappen "sponsor" enligt nedan:

Den relativa sökvägen till filen som inkluderas med <?php include> är då:

<?php include("wds_cms/sponsor/sponsor.php"); ?>

De bilder som användas i filen "sponsor.php" måste däremot ha en absolut sökväg:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Dr&ouml;mv&auml;varen - sponsorer</title>
</head>
<body>

<p><img src="http://dromvavaren.se/wds_cms/sponsor/banner_wds_logo.gif"
alt="Webdesignskolan" width="120" height="60" border="0" /></p>

<p> <img src="http://dromvavaren.se/wds_cms/sponsor/banner_wds_papper.jpg"
alt="WDS papper" width="150" height="109" border="0" /> </p>

<p> <img src="http://dromvavaren.se/wds_cms/sponsor/banner_girlpower.gif"
alt="Girlpower!" width="150" height="154" /></p>

</body>
</html>

Så här kan koden för sidan som inkluderar sponsor-informationen se ut:

OBS! Det fungerar inte att inkludera en URL, även om det är din egen URL:

<?php include("http://dromvavaren.se/wds_cms/sponsor/sponsor.php"); ?>

De flesta webbhotell tillåter inte "URL-file-access" av säkerhetsskäl och felmeddelandet enligt nedan visas:

TIPS! Läs mer om att infoga information i kolumnbox i avsnittet Kolumn för annonser och information mm »

 

tillbaka till meny uppåt

Inkludera sidorna med IFRAME

Om det inte fungerar att infoga PHP-sidan med PHP-include eller att ange PHP-koden direkt i sidorna kan du prova att inkludera PHP-koden som en PHP-fil i en IFRAME. Du måste dölja WYSIWYG-editorn innan du anger koden:

Använd en IFRAME (med en bredd och höjd som passar din layout) och infoga sidan genom att ange den relativa sökvägen.

<iframe src="wds_cms/sponsor/sponsor.php"
name="iframe" width="160" height="400" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" >
</iframe>

Observera att sidorna som infogas med en IFRAME inte använder samma CSS-mall som den sida den infogas i. Du måste alltså ange sökvägen till CSS-mallen eller ange CSS-formateringen direkt i den sida du hämtar in i IFRAME.

Se exempel på hur Bildgallerier infogats med IFRAME i WDS  CMS demo Öppnas i nytt fönster (Open in new window) 

 

tillbaka till meny uppåt

Backup och loggfiler

Gör en backup av MySQL-databasen i slutet av varje arbetspass! Funktionen gör en backup av tabellen "cms_artiklar" som innehåller alla de sidor du skapat i din webbplats. Om du gör regelbundna backuper så kan du återställa sidor som redigerats felaktigt eller raderats av misstag.

Backupen gäller endast sidornas textinnehåll och kodinnehåll och ingen backup sker av bilder eller filer och dokument. Om du vill spara en kopia av en bild eller fil på din egen dator ska du välja att "Lista bilder" eller "Lista filer" (i fönstret "Bilder").

Gör en backup med menyn "Backup av databas" under fliken "Inställningar":

OBS! Funktionen för backup fungerar inte på alla webbhotell om de inte tillåter att programet "mysqldump" körs via PHP-script och du kommer då att få ett felmeddelande. Backup fungerar hos Loopia men inte hos One.com.

Loggfiler

Loggar över olika åtgärder som utförts sparas i loggfiler och du hittar dem genom att välja menyn under fliken "Inställningar":

Loggfilerna visar vilken användare som utfört åtgärden och aktuell tidpunkt mm.

 

tillbaka till meny uppåt

SEO-namn (search engine optimization)

SEO-namn (search engine optimization) används för att ge en kortare och tydligare sökväg i länkar och adresser till webbsidor.

Exempel på verkliga sökvägar:
http://www.youraddress.com/index.php?sida=offices
http://www.youraddress.com/index.php?id=756

SEO-namnet kan då vara:
http://www.youraddress.com/offices.php

De adresser som indexerats i sökmotorer som tex Google gäller en längre tidsperiod om du använder SEO-namn. Webdesignskolan CMS använder funktionen "RewriteRule" i filen .htaccess för att ändra den verkliga adressen till ett SEO-namn.

OBS! WDS CMS hanterar länkarna till sidorna (med eller utan SEO-namn) utan att länkarna bryts. Du behöver alltså inte ändra länkarna i dina sidor om du byter SEO-läge i efterhand.

Även länkar från andra webbplatser till din webbplats fungerar om sidans ID ändras i databasen. Det är sidnamnet som du väljer när du arbetar med dina sidor som gäller.

Ange om du vill använda SEO-namn i "Inställningar":

TIPS! Läs mer om Search engine optimization hos Wikipedia Öppnas i nytt fönster (Open in new window) 


tillbaka till meny uppåt

Skyddade sidor med inloggning

Du kan skydda sidor med inloggning och ett inloggningsformulär visas då innan användaren är inloggad. När du arbetar med den sida som ska ha inloggning väljer du "skyddad sida":

Du kan välja mellan den enklare inloggningen som ingår i WDS CMS eller avancerad inloggning med WDS Login system (ingår som extra program).

Välj vilken typ av inloggning du vill använda i "Inställningar":

 

Alternativ 1: Enkel medlemsinloggning

Om du själv vill lägga till användare och ange både användarnamn och lösenord kan du använda den enklare funktionen för medlemmar i WDS CMS. Välj "Inställningar" och "Medlemmar med inloggning":

OBS! Lösenorden är krypterade och kan inte återges. Om en medlem glömt lösenordet måste användarnamnet raderas och medlemsuppgifterna läggas till på nytt.

Formuläret som används för inloggningen (om du vill ändra textinnehåll eller layout) är:
wds_cms/medlem/medlem_login.php

Alternativ 2: Avancerad medlemsinloggning

WDS Login system är ett program där användare registrerar sig och har ett medlemskonto där de själva redigerar sina kontouppgifter. Du har full kontroll över medlemmarna genom att logga in till administrationen. Läs mer om hur du skyddar sidorna genom att välja menyn "Extra program" och "WDS Login system"

 

tillbaka till meny uppåt

Menyer - visning, ordning och layout

När du skapar en ny sida väljer du om den ska vara en huvudsida eller undersida till en befintlig sida. Menyn skapas automatiskt och sidorna visas i menyn i den ordning de sparas i databasen.

Visning av menyer

Välj vilka menyer du vill visa i "Inställningar" där du också kan ändra position på den vertikala huvudmenyn:

Ändra ordning på menyvalen

Om du vill ange egen sorteringsordning för en sida kan du ange 0, 5, 10, 20, 25 osv i fältet "Ordning".

Genom att ange ett intervall om 5 eller 10 kan du infoga sidor i rätt ordning vid ett senare tillfälle med värden som tex 2, 3, 7, 8, 9 osv.

För att visa sidorna och ändra ordningen på menyvalen kan du välja att lista sidor i menyträd:

Välj den sida som ska ha annan menynordning och ange ett värde för "Ordning":

Ändra layout på menyerna

Den externa CSS-mallen som används till din layout innehåller formateringen av menyerna. Du måste ha grundläggande kunskaper i CSS för att redigera CSS-mallen i den text-editor som ingår. Läs mer om CSS i Webdesignskolans guide CSS Öppnas i nytt fönster (Open in new window) 

Det finns ingen funktion för att redigera CSS-filer i WYSIWYG-editorn och här visar vi hur du använder Webdesignskolan CMS texteditor. Välj menyn "CSS och Layout":

Avsnitten för de olika menyerna har namnen:

  • MENY 1 - HORISONTELL HUVUDMENY Dropdownmeny
  • MENY 2 - HORISONTELL UNDERMENY som visas på varje sida
  • MENY 3 - VERTIKAL HUVUDMENY med undermeny i flera nivåer

 

tillbaka till meny uppåt

Skriva och formatera text

Du infogar text och andra objekt direkt i arbetsytan under WYSIWYG-editorn. Skriv in din text och använd ENTER för att skapa nytt stycke <p> eller SHIFT+ENTER för att skapa en radbrytning <br />

Du kan ångra de senaste åtgärderna med CTRL+Z och upprepa med CTRL+Y

Om du vill formatera en rubrik klickar du in markören i raden (stycket) och väljer rubrikformat i menyn:

Formateringen av text, rubriker och andra objekt kontrolleras av den externa CSS-mall du använder. När du väljer någon av formaten i kontrollen "Format" så hämtas formateringen från den externa CSS-mallen.

Om du vill ändra teckensnitt eller textstorlek ska du i första hand ändra detta i CSS-mallen. Läs mer i avsnittet Formatering med extern CSS-mall » nedan.

Exemplen nedan visar formateringen av teckensnitt och storlek för all text inom <BODY> i CSS-mallen:

Exemplet nedan visar formateringen av rubriker:

Läs mer om CSS-formatering i Webdesignskolans guide CSS - grunder Öppnas i nytt fönster (Open in new window) 

Om du formaterar text och andra objekt direkt i sidan har detta företräde framför CSS-mallens formatering och du kan alltså avvika från den centrala layouten på enstaka sidor.

Exemplet nedan visar text som formateras direkt i sidan:

 

tillbaka till meny uppåt

Visa HTML-koden

För att se HTML-koden väljer du knappen "Edit HTML-source":

HTML-editorn:

Du kan skriva och redigera koden direkt i HTML-editorn men kontrollera då att koden sparas korrekt när du lämnat editorn.

Om den kod som genereras av programmet inte är lika som den originalkod du själv skrivit kan du arbeta i HTML-läget genom att dölja WYSIWYG-editorn.

Använd knapparna "Visa" eller "Dölj" för att växla mellan WYSIWYG-editorn och formulärets textarea:

Om du inte vill att din egen kod ska bearbetas av WYSIWYG-editorn och att editorn alltid ska vara inaktiverad när din sida visas kan du ange kommentaren:

<!-- !wysiwyg -->

högst upp i sidan (före all annan kod) och spara sidan.

Exempel:

<!-- !wysiwyg -->

<h1>
Rubrik</h1>
<p>
sidans innehåll här...</p>

När sidan visas så kommer WYSIWYG-editorn att vara inaktiverad. Detta är en bra metod om du vill skriva din egen kod och ha full kontroll över koden.

 

tillbaka till meny uppåt

Bilder, filer och dokument

Använd menyn "Bilder" för att öppna bildgalleri och bildfunktioner i ett nytt fönster:

OBS! Bildfunktionerna öppnas i ett nytt fönster och du kan växla mellan Administration och Bilder med ALT+Tab:

Alt-tangent Tab-tangent visar admin eller bilder

Menyerna för bildfunktionerna:

Ladda upp bilder med WDS CMS

Du kan använda den inbyggda funktionen för att ladda upp bilder eller göra detta via FTP.

Den maximala filstorleken för bilderna varierar beroende på din PHP-installation och kan tex vara 2MB. Vill du ladda upp större bilder måste du använda FTP eller be ditt webbhotell höja gränsen för "upload_max_filesize".

Funktionen "Ladda upp bilder" och "Ladda upp bild" ändrar bildnamnet till tillåtna filnamn.

Bildnamn innan uppladdning:
Öland sommaren 2010.JPG
Bildnamn efter uppladdning:
oland_sommaren_2010.jpg

OBS! Om du publicerar samma bild igen men då via FTP kommer den inte att ersätta den befintliga bilden. Anledningen är att filnamnet då ändrats och filen har ett annat namn. Det innebär att du kan få dubbletter av bilden.

Ladda upp bilder med FTP

Alla bilder som laddas upp med funktionen "Ladda upp bild" sparas i mappen wds_cms/bilder. Om du använder FTP för att ladda upp bilder bör du placera dem i samma mapp för att de ska kunna visas med funktionerna "Visa bilder" och "Lista bilder". Om du ändrar namn på bilderna via FTP måste du även ändra bildnamnen i sidorna så att inga länkar bryts.

TIPS! Om du inte använt FTP tidigare kan du läsa guiden Använda FTP-program (FileZilla) Öppnas i nytt fönster (Open in new window) 

Ändra bildnamn eller radera bild

Om du ändrar namn på en bild med bildfunktionen i WDS CMS så ändras även namnet i de sidor som bilden används. Sökvägen till till bilden ändras i sidans kod och du behöver inte göra detta manuellt.

Om du raderar en bild som används i en sida så visas en varning och ett meddelande om i vilka sidor bilden används. Du kan sedan ändra manuellt i de aktuella sidornas kod för att radera sökvägen till bilden.

Bildernas storlek

Om du laddar upp bilderna via FTP finns egentligen inga begränsningar för bildernas storlek. Dagens digitalkameror kan hantera så många pixlar att bilderna egentligen är för stora och blir långsamma att visa i webbläsaren. Du kan minska bildernas storlek med knappen och funktionen "Ändra bildstorlek" som visas under varje miniatyrbild. En begränsning här liksom med att ladda upp bilder (enligt ovan), är att PHP-installationen begränsar hur stora bilder som kan hanteras. Minnesgränsen 16M räcker till för bilder 1600x1200 pixlar men bilder i storleken tex 3000x2000x300dpi kräver minst 32M.

Du kan ändra minnesgränsen i "Inställningar":

En bättre metod är att ändra bildernas storlek innan du laddar upp dem via funktionen "Ladda upp bilder" eller FTP. Se till att bilderna har den storlek du vill använda som tex bredden 800px, 1200px eller 1600px och ladda sedan upp dem.

Filer och dokument

Filer och dokument sparas i mappen wds_cms/filer men i övrigt gäller samma villkor som för bilder när det gäller gäller storleken på filer som laddas upp (se avsnittet ovan).

OBS! Om du ändrar namn på en bild med bildfunktionen i WDS CMS så ändras även namnet i de sidor som bilden används men detta gäller INTE filer och dokument. Om du ändrar namn på filerna måste du även ändra sökvägen till filen i de aktuella sidorna så att inga länkar bryts.

 

tillbaka till meny uppåt

Bilder - infoga bilder

Det finns inte någon bildfunktion i WYSIWYG-editorn men WDS CMS innehåller funktionen "Bilder" som du kan använda tillsammans med WYSIWYG-editorn.

Du kan visa alla bilderna med knappen "visa bilder":

Funktionen "Bilder" visas i ett nytt fönster:

 

Infoga bild med dialogrutan "Insert image/Edit image"

Placera textmarkören där du vill ha bilden. Välj knappen "Insert/edit image":

Sökvägen till bilderna är wds_cms/bilder/ om du använt funktionen "Bilder" för att ladda upp bilderna.

Skriv hela sökvägen till bilden i fältet "Source" eller bläddra fram bilden i "Image List":

Bildbeskrivningen "Image description" används för att öka tillgängligheten. Som standard anges bildnamnet här men du kan ändra bildinformation till en egen som beskriver bilden.

Storleken på bilden i exemplet är 1080x1422 pixlar och du kan ändra bildens dimensioner i fältet "Dimensions". Höjden anges automatiskt när valet "Constrain proportions" (bibehåll proportioner) är valt. Läs mer i avsnittet Bilder - ändra visuell storlek » nedan.

Du kan redigera bildens egenskaper i efterhand genom att högerklicka på bilden och välja "Image" i menyn.

 

tillbaka till meny uppåt

Bilder -ändra visuell storlek

Bildens verkliga storlek förändras inte när du ändrar den i WYSIWYG-editorn. Det är endast den visuella storleken du ändrar och bilden behåller sina dimensioner och filstorlek.

Exempelbilden "monkey.jpg" har samma filstorlek (234 kb) oavsett vilken storlek den visas med på sidan. Om du använder många bilder kan dina sidor bli långsamma att visa i webbläsaren pga bildernas filstorlek.

Du kan ändra bildens storlek visuellt genom att dra i hörnhandtaget:

OBS! Kontrollera om bildens storlek ändras proportionellt så att bildens utseende inte förvanskas. Det kan skilja beroende på vilken webbläsare du använder. Om det inte fungerar och ger en proportionell storleksändring kan du använda menyn "Appearance" för att ange värdet på bredden manuellt. Högerklicka på bilden och välj "Image" i menyn.


tillbaka till meny uppåt

Bilder - ändra verklig storlek

Om du vill ändra bildens verkliga storlek innan den används på sidan så kan du använda funktionen "Bilder" i Webdesignskolan CMS.

Klicka på knappen "Ändra bildstorlek":

Här ändras bildens verkliga storlek till 150 pixlars bredd och bilden sparas som en kopia med nytt namn:

Bilden med den nya bildstorleken tillsammans med originalbilden. Notera att filstorleken är betydlig mindre i den nya förminskade bilden:

 

tillbaka till meny uppåt

Bilder - bildplacering

Den externa CSS-mallen som används till din layout innehåller ett antal färdigformaterade stilar som du kan använda tillsammans med bilder. Du kan använda menyn "Formats" i WYSIWYG-editorn för att tillämpa formatet på bilder du infogat enligt avsnitten ovan.

Exemplet nedan visar en bild som infogats före texten:

Markera bilden du vill formatera och välj menyn "Formats". De format som är anpassade till bilder har namnen "bild":

Här är bilden formaterad med stilen "bild_vanster_kantlinje":

Formatering kan du även göra i bildmenyn som du visar genom att markera bilden och välja knappen "insert/Edit image":

Exemplet nedan visar en högerjusterad bild med formatet "bild2_h_kantlinje":

 

tillbaka till meny uppåt

Länkar - externa och interna

Du kan länka text och bilder till externa sidor och webbplatser eller inom egen webbplats. När du länkar till externa sidor kan du ange att den öppnas i ett nytt fönster New window så att inte dina besökare måste backa flera steg för att komma tillbaka till din webbplats.

Extern länk

Markera texten som ska länkas och välj knappen "Insert/edit link":

Ange URL för länken och mål (target) för länken. Här öppnas målet för länken i ett nytt fönster:

 

Intern länk

När du länkar internt i dina egna sidor kan du ange den relativa sökvägen till sidan.

Välj att visa din webbplats:

Klicka fram den sida du vill länka till så visas den absoluta sökvägen i webbläsarens adressfält. I vårt exempel är den adress som visas i webbläsarens adressfält:

https://demo.webdesignskolan.se/information_om_wds_cms.html

Markera och kopiera den relativa sökvägen med CTRL+C

Klistra in informationen i WYSIWYG-editorn med CTRL+V.

Här anges den relativa sökvägen till sidan. Observera att sidan öppnas i samma fönster (Target None):

OBS! WDS CMS hanterar länkar till sidor med eller utan SEO-namn utan att länkarna bryts. Du behöver alltså inte ändra länkarna i dina sidor om du byter SEO-läge i efterhand (läs mer om SEO-namn i den Hjälp-sida som ingår i Webdesignskolan CMS administartion).

 

tillbaka till meny uppåt

Länkar - bildlänkar

Du kan länka till bilder med samma metod som när du länkar till sidor. Markera den bild som ska länkas och välj knappen "Insert/edit link". Ange den absoluta eller relativa sökvägen och målet för länken (enligt avsnittet Länka text » ovan). Sökvägen till bilderna är wds_cms/bilder/ om du använt funktionen "Bilder" för att ladda upp bilderna (se avsnittet "Bilder" i den Hjälp-sida som ingår i Webdesignskolan CMS).

Länka från miniatyrbild stor bild

Om du har ändrat bildstorleken på en stor bild eller har två bilder som ska länkas till varandra kan du länka från bild till bild.

Markera bilden som ska länkas och välj menyn "Insert/edit link".

Ange sökvägen till den stora bilden. I exemplet nedan har vi valt att öppna den stora bilden i ett nytt fönster, Target New window:

 

tillbaka till meny uppåt

Länkar - till filer och dokument

Du kan länka till filer och dokument med samma metod som när du länkar till sidor. Ange den absoluta eller relativa sökvägen och målet för länken (enligt avsnittet Länka text » ovan).

Välj fliken "Filer" för att se vilka filer som finns i mappen:

Alla filer som du laddat upp med funktionen "Filer" finns i mappen:

wds_cms/filer/

TIPS! Kopiera filnamnet med CTRL+C så kan du klistra in namnet senare.

Markera den text eller bild som ska länkas och välj knappen "Insert/edit link".

Ange sökvägen till mappen wds_cms/filer/ och skriv eller klistra in namnet på filen med CTRL+V

Använd i första hand relativa sökvägar till filerna enligt exemplet ovan.

Här är ett exempel på relativ sökväg:
wds_cms/filer/oppet_hus.doc

Här är ett exempel på absolut sökväg till URL:
http://dromvavaren.se/wds_cms/filer/oppet_hus.doc

OBS! Om du använder absoluta sökvägar till URL kommer länken att brytas om du flyttar webbplatsen till annan mapp eller domän.

 

tillbaka till meny uppåt

Filmer och inbäddade objekt, YouTube mm

Du kan infoga objekt som tex Youtube, video och ljud.

För att infoga en film kan du använda knappen "Insert/edit media".

Här kan du välja att ange en URL och länka till den media du vill infoga. I exemplet länkas till en Youtube-video:

Om du vill bädda in och visa media i din sida kan du välja fliken "Embed":

 

tillbaka till meny uppåt

CSS-formatering med extern CSS-mall

WDS CMS levereras med ett antal CSS-mallar för att du ska kunna komma igång direkt med din webbplats. Du väljer vilken CSS-mall du vill använda i "Inställningar". Du bör ha grundläggande kunskaper i CSS för att redigera CSS-mallen - läs gärna mer om CSS i Webdesignskolans guide CSS Öppnas i nytt fönster (Open in new window) 

OBS! Du bör använda den externa CSS-mallens formatering i första hand och endast formatera direkt i dokumentet vid behov (avsnittet CSS-formatering i dokumentet » nedan). Fördelen är att den formateringen du skapar i en extern CSS-mall kan användas på alla sidor i din webbplats. Om du formaterar direkt i dokumentet gäller den formatering du skapar endast för det valda objektet och endast i den aktuella sidan. Vill du använda formateringen i andra sidor i din webbplats så måste du kopiera koden till dina andra dokument.

CSS-mallar som laddas upp med funktionen "Ladda upp en CSS-mall" sparas i mappen wds_cms/css och om du använder FTP för att ladda upp filerna måste de placeras i samma mapp för att de ska kunna visas med funktionen "Lista CSS-mallar". CSS-bilder som laddas upp med funktionen "Ladda upp CSS-bild" sparas i mappen wds_cms/css/bilder och om du använder FTP för att ladda upp CSS-bilderna måste du placera dem i samma mapp för att de ska kunna visas med funktionen "Lista CSS-bilder".

Välj menyn "CSS och Layout":

I exemplet nedan visas avsnittet med formatering av sidhuvudet.

Gör dina ändringar och spara med knappen "Spara sidan":

 

tillbaka till meny uppåt

Hämta och ladda upp extern CSS-mall

WDS CMS levereras med ett antal CSS-mallar för att du ska kunna komma igång direkt med din webbplats. Du väljer vilken CSS-mall du vill använda i "Inställningar".

Om du vill använda en av de nya mallar som du hittar i WDS demo och layoutexemplet Öppnas i nytt fönster (Open in new window)  så måste du ladda upp CSS-filen och de bilder som tillhör CSS-filen.

Välj menyn "Lista CSS-mallar" och länken "Ladda upp nya CSS-mallar":


Tillämpa CSS-mallen på din webbplats med menyn "Inställningar" och valet
"CSS-mall som används till layouten":

 

tillbaka till meny uppåt

Kontaktformulär

Det ingår två kontaktformulär i Webdesignskolan CMS och de kan infogas med <?php include ?> i dina sidor.

OBS! Du måste tillåta PHP-kod för att inkludera formuläret enligt exemplet nedan. Om du inte tillåter PHP-kod kan du använda IFRAME enligt avsnittet Inkludera sidorna med IFRAME » ovan.

Välj om du vill tillåta PHP-kod i "Inställningar":

Kontaktformulär

Se exemplet med kontaktformulär i WDS CMS demo Öppnas i nytt fönster (Open in new window) 

Dölj WYSIWYG-editorn:

Infoga koden nedan för kontaktformulär:

<?php include("wds_cms/kontaktform/kontaktform.php"); ?>

Kontaktformuläret är hämtat från Webdesignskolans guide Formmail - färdiga mallar Öppnas i nytt fönster (Open in new window)  där du hittar mer information om hur du konfigurerar kontaktformuläret.

Kontaktformulär med Captcha

Se exemplet med kontaktformulär med CAPTCHA i WDS CMS demo Öppnas i nytt fönster (Open in new window) 

Dölj WYSIWYG-editorn:

Infoga koden nedan för kontaktformulär med Captcha:

<?php include("wds_cms/kontaktform/kontaktform_captcha.php"); ?>

Kontaktformuläret är hämtat från Webdesignskolans guide Formmail med Captcha Öppnas i nytt fönster (Open in new window)  där du hittar mer information om hur du konfigurerar kontaktformuläret.

Mottagare, ärenderubrik och loggfiler till kontaktformulären

Ange den e-postadress och ärenderubrik som ska användas i formuläret i fliken "Inställningar":

Loggfiler

All information som skickas med formulären skickas till angiven e-postadress och sparas även i två loggfiler. Du kan öppna och läsa loggfilerna i en texteditor eller importera informationen till en databas.

Välj fliken "Inställningar" och "Loggfiler Kontaktformulär" för att se loggfilerna:

OBS! Inga filer visas här om kontaktformulären inte använts.

 

tillbaka till meny uppåt

Sökformulär

Det ingår en sökfunktion i WDS CMS och den finns i filen search.php

Se exemplet med sökformulär i WDS CMS demo Öppnas i nytt fönster (Open in new window) 

Dölj WYSIWYG-editorn:

Iinfoga koden nedan för sökformulär:

<?php include("wds_cms/search_form.php"); ?>

OBS! Du måste tillåta PHP-kod för att inkludera formuläret. Välj om du vill tillåta PHP-kod i "Inställningar":

 

tillbaka till meny uppåt

Sidkarta (sitemap)

Det ingår en sidkarta/sitemap i Webdesignskolan CMS och den finns i filen sitemap.php

Se exemplet med sidkarta i WDS CMS demo Öppnas i nytt fönster (Open in new window) 

Dölj WYSIWYG-editorn:

Infoga koden nedan för sidkartan:

<?php include("wds_cms/admin/sitemap.php"); ?>

OBS! Du måste tillåta PHP-kod för att kunna använda sidkartan. Välj om du vill tillåta PHP-kod i "Inställningar":

 

tillbaka till meny uppåt

Bildgalleri (extra program)

WDS Bildgalleri » skapar automatisk miniatyrer av alla bilder och länkar miniatyren till originalbilden. Du kan skapa flera bildgallerier, ladda upp bilder, ändra bildstorlek, radera bilder, namnändra bilder genom att logga in till administrationen direkt i webbläsaren.  Programmet är fristående från WDS CMS.

Se exempel på Bildgallerier i WDS CMS demo Öppnas i nytt fönster (Open in new window) 

 

Login system (extra program)

WDS Login system »är ett komplett system för att hantera registrerade användare som hämtas från en MySQL-databas. Användarna registrerar sina kontouppgifter och du kan välja om medlem själv ska kunna aktivera kontot eller om detta ska göras av administratören. Detta ger bra kontroll över vilka medlemmar som har tillgång till inloggningen. Du kan låta olika grupper av medlemmar få tillgång till vissa sidor eller låta alla medlemmar få tillgång till alla skyddade sidor. Programmet är fristående från WDS CMS.

Se exempel på Loginsystemet i WDS CMS demo Öppnas i nytt fönster (Open in new window) 

 

Gästbok (extra program)

WDS Gästbok » är ett komplett system för att hantera meddelanden som hämtas från en MySQL-databas. Gästboken kan spam-skyddas med CAPTCHA-verifiering. Inmatningsfälten använder jQuery för att visa fältinnehåll. När ett nytt meddelande skrivs i gästboken kan du få ett e-postmeddelande om detta. Programmet är fristående från WDS CMS.

Se exempel på Gästboken i WDS CMS demo Öppnas i nytt fönster (Open in new window) 

 

Nyheter/News (extra program)

WDS News » är ett komplett system för att hantera sidor som hämtas från en MySQL-databas. Nyheterna kan visas som en nyhetssida, nyhetslista eller i en nyhetsbox. Inläggen kan kommenteras av besökare och när en ny kommentar skrivs kan du få ett e-postmeddelande om detta.Programmet är fristående från WDS CMS.

Se exempel på Nyheter/News i WDS CMS demo Öppnas i nytt fönster (Open in new window) 

 

tillbaka till meny uppåt