64 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.

Demo-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: http://www.tinymce.com Öppnas i nytt fönster (Open in new window) 

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:

 

Storlek på arbetsytan

Du kan anpassa storleken på editorns arbetsyta i "Inställningar":

Om du vill få en översikt över hur din sidlayout blir redan när du arbetar med sidan så kan du välja samma bredd som boxen <DIV> med sidornas innehåll i din CSS-mall:
#kolumn_content

 

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 "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:

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

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

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 optimizers)

SEO-namn (search engine optimizers) 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, #meny_top, #meny_top_sub och #path_meny:

 

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 kontrollerna "Styles" och "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 "layout.css"

Exemplet nedan visar formateringen av rubriken "Heading 1"

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:

Maximera HTML-fönstret eller förstora det genom att dra i kanterna.

Du kan skriva och redigera koden direkt i HTML-source-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. Om du använder funktionen "Ladda upp bilder" så väljer du en bild i taget och kan skicka upp 5 st bilder samtidigt. Anledningen till att formuläret inte hanterar fler bilder är att PHP har begränsningar i storlek på filer som skicka via ett formulär till webbservern.

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" konverterar automatiskt 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å konverterats 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.

TIPS! I guiden om WDS Bildgalleri Öppnas i nytt fönster (Open in new window)  hittar du tips om program som du kan använda för att minska bilderna innan du laddar 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:

 

Alternativ 1:
Infoga bild med dialogrutan "Insert image"

Du kan infoga bild genom att välja 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 (se avsnittet "Bilder" i den Hjälp-sida som ingår i Webdesignskolan CMS).

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

Bildbeskrivningen och titel används för att öka tillgängligheten och anges automatiskt om du bläddrat fram bilden. Du kan ändra eller du ange bildinformation själv i fälten "Image description" och "Title".

Storleken på bilden i exemplet är 1080x1422 pixlar och den kommer inte att få plats i vår arbetsyta som har 660 pixlars bredd. Vi ändrar bildens dimensioner med fliken "Appearance" där vi anger bredden 500 pixlar. Höjden anges automatiskt när valet "Constrain proportions" (bibehåll proportioner) är valt.
Läs mer i avsnittet Bilder - ändra visuell storlek » nedan.

Ange värdet "0"för "Border" om du inte vill att en "blå ram" ska visas runt bilden (om den länkas med A HREF vid ett senare tillfälle):

Du kan redigera bildens egenskaper i efterhand genom att markera bilden och välja knappen "Insert/edit image".

 

Alternativ 2:
Infoga bild med funktionen "BILDER"

Funktionen "Bilder" är en del av WDS CMS där du kan visa bilder, lista bilder, ladda upp bilder och ändra storlek på bilderna mm. Om du använder funktionen "Bilder" så kan du dra och släppa bilden direkt i sidan.

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

Menyerna för bildfunktionerna:

Du kan även visa bilderna direkt när du arbetar med en sida. Använd knappen "visa bilder" ovanför WYSIWYG-editorn:

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

 

Klicka på miniatyren för den bild du vill använda för att se bilden i full storlek:

Klicka och dra bilden direkt till din sida:

OBS! Bildbeskrivningen och titel som används för att öka tillgängligheten anges INTE automatiskt om du använt "dra-och-släpp-metoden". Du kan redigera bildens egenskaper genom att markera bilden, välja knappen "Insert/edit image" och ange bildinformation i fälten "Image description" och "Title":

 

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. I exemplet används Internet Explorer 7 och då fungerar inte en proportionell storleksändring. Använd då menyn "Appearance" för att ange värdet på bredden manuellt. Markera bilden eller och välj knappen "Insert/edit image" eller högerklicka på bilden och välj menyn med samma namn.


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:

Här är de båda bilderna placerade bredvid varandra i sidans arbetsyta. Notera att den vänstra bilden, som har sin verkliga storlek, ser bättre ut än den högra bilden som egentligen är större än den visade storleken:

 

 

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 "Styles" i WYSIWYG-editorn för att tillämpa formatet på bilder du infogat enligt avsnitten ovan.

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

Här är formateringen "bild" vald och den ger bilden en kantlinje och vit fotokant:

Om du vill ha ett textflöde runt bilden kan du placera bilden i texten och ändra formatet till "bild_vanster":

...eller till formatet "bild_hoger":

 

tillbaka till meny uppåt

Bilder - bildtext

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 och bildtexter. Du kan använda menyn "Styles" i WYSIWYG-editorn för att tillämpa formatet på bilder du infogat enligt avsnitten ovan.

Bildtexten skriver du som ett vanligt textstycke <P> som sedan formateras med menyn "Styles". När formateringen är klar så infogar du bilden till samma textstycke <P> som bildtexten.

OBS! Snabbaste metoden är att skriva bildtexten först och sedan infoga bilden i samma stycke <P> (skriv gärna en "dummy-text" som du sedan ändrar när bilden infogats)

Skriv bildtexten. Se till att textmarkören är placerad i textstycket. Välj ett bildtext-format i menyn "Styles":

Textstycket <P> med bildtexten formateras enligt det valda formatet i "Styles":

Placera textmarkören före bildtexten och infoga ett par radbrytningar med snabbkommando SHIFT+ENTER:

OBS! SHIFT-ENTER ger hårda radbrytningar eller "non-braking-space" <BR /> och bryter inte stycketexten.Om du använder ENTER skapas ett nytt textstycke <P>

Placera textmarkören i den första raden i stycket och infoga bilden:

 

Bredd på bildtext och bild

Bredden på bildtext-box i den externa CSS-mallen är 300 pixlar men du kan ändra bredden så att den passar den bild du infogar. Läs mer om att formatera lager <DIV> i avsnittet Box -formatera i dokumentet » nedan.

Kontrollera storleken på bilden genom att markera den och välja menyn "Insert/edit image":

Välj fliken "Appearence" för att se bildens bredd:

Lämna dialogrutan med "Cancel".

Klicka+Dra för att markera bildtext och bild, dvs allt innehåll i <DIV>. Välj menyn "Edit CSS Style":

Välj fliken "Box" och ange samma bredd i pixlar som din bild:

Så här kan slutresultatet bli när bildtexten och bredden på boxen ändrats:

 

Här är formatet (Styles) ändrat till "bildtext_vanster":

Här är formatet (Styles) ändrat till "bildtext_hoger":

 

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 target="_blank" 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.

Visa din webbplats:

... och klicka fram den sida du vill länka till så visas den absoluta sökvägen i webbläsarens adressfält.

TIPS! Markera och kopiera den relativa sökvägen med CTRL+C så kan du klistra in informationen i WYSIWYG-editorn med CTRL+V.

Exemplet nedan visar URL till startsidan:

Om du valt att använda SEO-namn till din webbplats så ser URL ut så här:

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).

Här anges den relativa sökvägen till startsidan (som ska öppnas i samma fönster):

Här visas webbplatsen (och uppdateras med F5) för att testa länkarna:

 

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="_blank"):

Här visas webbplatsen (och uppdateras med F5) för att testa länken:

Den "blå ramen" kan du ta bort genom att ange värdet "0" i fältet "Border". Markera bilden och välj "Insert/edit image" och fliken "Appearance" (se avsnittet Infoga bilder » ovan).

 

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).

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/filename.pdf
Här är ett exempel på absolut sökväg till URL:
http://dromvavaren.se/wds_cms/filer/filename.pdf

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.

Här visas webbplatsen (och uppdateras med F5) för att testa länken:

 

tillbaka till meny uppåt

Filmer och inbäddade objekt, YouTube mm

Elementet <OBJECT> kan användas till att inkludera objekt som tex bilder, ljud, video, Java och Flash. Du kan infoga filmer direkt från en fil eller länka till dem som till en fil (enligt avsnitten ovan).

 

Infoga en film

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

Ange den absoluta eller relativa sökvägen.

I exemplet nedan hämtar vi en Flash-film som laddats upp med funktionen "Filer":

Flashfilmen finns i mappen wds_cms/filer/ och vi anger den relativa sökvägen och att det är en film av typen "Flash":

 

Infoga YouTube-klipp

I exemplet nedan infogas ett YoyTube-filmklipp med en absolut URL och även detta är av typen "Flash":

Du kan även ange koden direkt i HTML-läget och här är koden hämtad från YouTube:

 

Infoga Quicktime och Windows Media

Du kan infoga Quicktime och Windows Media med samma funktion som ovan. Observera att alla inbäddade objekt kräver att webbläsaren har en plugin som kan visa den valda medietypen.

 

tillbaka till meny uppåt

Specialtecken

Du kan infoga olika typer av specialtecken med WYSIWYG-editorn eller genom att ange egen HTML-kod, se även Webdesignskolans guide Teckensnitt och teckenformat Öppnas i nytt fönster (Open in new window) 

 

Hårt blanksteg (non-braking-space)

Ett av de mest användbara specialtecknen är "hårt blanksteg" (non-braking-space) som förhindrar att två eller flera ord hamnar på olika rader. Du kan ange &nbsp; i koden eller använda knappen "Insert non-breaking space" för att infoga specialtecknet där du placerat textmarkören:

 

Alla specialtecken

Övriga specialtecken hittar du när du använder knappen "Insert custom character". I exemplet infogas en dubbel högervinkel &raquo;

Här är alla specialtecknen du kan infoga:

HTML-editorn visar koden för specialtecknen:

 

tillbaka till meny uppåt

Datum och tid

Du kan infoga aktuellt datum och tid med knapparna "Insert date" och "Insert time". I exemplen nedan är är tidsstämplen kompletterad med egen text.

Infoga aktuellt datum:

Infoga aktuell tid:

 

tillbaka till meny uppåt

Tabeller <TABLE>

Här beskrivs endast hur du infogar en tabell och menyval för att redigera tabellen, tabellceller och tabellrader.
TIPS! Läs mer i Webdesignskolans guide Tabeller Öppnas i nytt fönster (Open in new window)  för en mer ingående beskrivning av tabeller.

Knapparna som öppnar funktionerna för att hantera tabeller:

Infoga tabellen med knappen "Inserts a new table":

Ange egenskaperna för tabellen:

Skriv in texten och flytta mellan cellerna med TAB eller PIL-tangenterna:

När du redigerar tabellens egenskaper måste du ha markören placerad i tabellen för att de knappar du väljer ska gälla den aktuella tabellen. Du kan även högerklicka direkt i tabellens rader eller celler och välja åtgärd i snabbmenyn.

För att redigera tabellraden <TR> väljer du knappen "Table row properties":

... och för att redigera tabellcellen <TD> väljer du knappen "Table cell properties".

Här är tabellraden justerad vertikalt i överkant. Notera att du kan välja mellan att uppdatera "aktuell rad", "udda rader", "jämna rader" eller "alla rader":

Infoga rader med knappen "Insert row before" eller "Insert row after":

En tabellcell som ska sträcka sig över flera kolumner <colspan> väljer du med knappen "Merge table cells":

...ange antalet kolumner som ska sammanfogas:

Färg och kantlinjer i tabellrader eller tabellceller väljer du med fliken "Advanced". I exemplet väljer vi färg på den aktuella tabellcellen:

När du använder formatering med tabell-menyn "Insert/Modify table" så tillämpas både HTML-formatering direkt i elementet och CSS-formatering med "inline style" (läs mer i avsnittet CSS-formatering i dokumentet » nedan).

CSS-formatering gäller exempelvis för tabellbredd, bakgrundsfärg, och kantlinje:

När du vill formatera tabell <TABLE>, tabellrad <TR> eller tabellcell <TD> så kan du högerklicka i tabellen och välja det element som ska formateras. I exemplet nedan väljer vi att formatera tabellen <TABLE>:

Här har vi valt bakgrundsfärg i hela tabellen <TABLE>:

HTML-koden visar att <TABLE> formaterats:

Om du istället vill att bara tabellcellerna <TD> ska ha bakrundsfärg kan du tillämpa formatet på hela tabellraden <TR>. placera markören i den tabellrad du vill formatera och välj menyn "Table row properties":

Välj bakgrundsfärg och om den ska gälla för den akuella raden, alla rader, udda eller jämna rader:

Här har vi valt bakgrundsfärg i alla tabellrader <TR>:

HTML-koden visar att <TR> formaterats:

 

TIPS! Du kan använda skugga i tabeller och tabellceller. Läs mer om skuggor i tabeller i guiden CSS effekter Öppnas i nytt fönster (Open in new window) 

 

CSS-formatering av tabeller

Du kan formatera tabellen <TABLE>, tabellrader <TR> och tabellceller <TD> direkt i HTML-elementen men om du använder CSS har du fler möjligheter till formatering.

Läs mer i avsnittet CSS-formatering i dokumentet » nedan!

 

 

tillbaka till meny uppåt

Box, lager <DIV>

Det finns flera begrepp för att beskriva ett område eller "avgränsat innehåll" med specifika egenskaper som tillämpas med CSS. Här används används benämningen "lager" men andra begrepp är "box" eller "container". Begreppet avser områden som anges med CSS och kan användas till kolumner, menyer och andra layouter. Lager (box) kan även placeras över eller under varandra.

Här beskrivs endast hur du infogar ett lager och menyval för att redigera lagret och tillämpa CSS-formatering.
Läs mer i Webdesignskolans guide CSS positionering Öppnas i nytt fönster (Open in new window)  för en ingående beskrivning av lager <DIV>

Infoga ett nytt Lager med knappen "Insert new layer":

Standard för nya Lager är absolut positionering. Här visas HTML-koden med knappen "Edit HTML-source":

Absolut positionering innebär att boxen släpper sin statiska placering och låter andra element ta utrymmet. Boxen placeras ovanpå andra element och kan liknas vid att boxen utgör ett skikt eller Lager som kan placeras över eller under andra objekt. Ordningen på skikten styr du med Z-index.
Läs mer i Webdesignskolans guide CSS positionering Öppnas i nytt fönster (Open in new window)  (avsnittet "Positionering - relativt eller absolut").

OBS! Vi rekommenderar INTE användning av absolut positionering. Du har då inte full kontroll över övriga lager <DIV> som används i din layout. WDS CMS skapar layouten i din webbplats med <DIV> för positionering av innehållet och risken är stor att dina egna lager får felaktig positionering om du använder absolut positionering. Använd relativ positionering enligt beskrivningen nedan!

 

Stäng av absolut positionering

Stäng av den absoluta positioneringen med knappen "Toggle absolute positioning":

Nu används relativ positionering för lagret och inga egenskaper visas:

För att formatera Lagret placerar du textmarkören i lagernamnet och väljer knappen "Edit CSS Style":

 

Kontrollera var lagret infogas!

När du byter egenskaper på lagret till relativ positionering så flyttas boxen till slutet av dokumentet. Detta gäller oavsett var du infogat lagret.

Här är ett nytt lager infogat i början av sidan, direkt efter huvudrubriken <H1>:

När HTML-editorn visas så är lagrets <DIV> placerat i slutet av sidans kod (med absolut position):

Den absoluta positioneringen stängs av med knappen "Toggle absolute positioning":

...och lagret flyttas från den visuella absoluta positionen:

...till slutet av sidans innehåll:

När HTML-editorn visas så är lagrets <DIV> placerat i slutet av sidans kod (nu med relativ position):

 

tillbaka till meny uppåt

Box - flytta

Flytta ett lager kan du göra i editorns WYSIWYG-läge eller i HTML-läget. OBS! Exemplet nedan är hämtat från Firefox. Arbetet med box <DIV> kan skilja sig åt i olika webbläsare och detta är inget som påverkar HTML-koden men ändå kan innebära en del irritationsmoment.

 

Flytta lager med absolut positionering

Flytta lagret genom att dra i "fliken" i lagrets överkant:

 

Flytta lager med relativ positionering

När du markerar innehållet i ett lager med relativ positionering så ska det markerade området även motsvara koden i HTML-läget. Detta stämmer inte alltid och den säkraste metoden är att markera lagrets <DIV> i HTML-editorn:

Klipp ut det markerade området med CTRL+X och klistra in med CTRL+V där du vill ha lagret. I exemplet nedan är lagret flyttat till början av sidans innehåll:

...uppdatera HTML-editorn och lagret är flyttat:

 

tillbaka till meny uppåt

Box -formatera i extern CSS-mall

Du kan formatera ett lager <DIV> direkt i dokumentet eller i en extern CSS-mall. Läs mer om CSS och prioriteringsordningen i Webdesignskolans guide CSS Öppnas i nytt fönster (Open in new window)  (avsnittet "CSS i extern mall eller i dokumentet").

CSS-mallen för den layout du valt innehåller formatering av box (lager) och du bör använda den externa CSS-mallens formatering i första hand. Fördelen är att den formateringen du skapar kan användas på alla sidor i din webbplats. Nackdelen är att det inte finns någon WYSIWYG-editor för redigering av CSS-filen. Du måste ha grundläggande kunskaper i CSS för att redigera CSS-mallen i den text-editor som ingår. Läs gärna mer om CSS i Webdesignskolans guide CSS Öppnas i nytt fönster (Open in new window) 

Läs mer i avsnittet Formatera med extern CSS-mall » nedan.

 

Använd "Styles" från extern CSS-mall

Den externa CSS-mallen som används till din layout innehåller ett antal färdigformaterade stilar som du kan använda tillsammans med lager (box). Du kan använda menyn "Styles" i WYSIWYG-editorn för att tillämpa formatet på de lager <DIV> du skapat enligt avsnittet ovan.

Placera textmarkören i det lager <DIV> du vill redigera och välj menyn "Styles":

De format eller "styles" som är anpassade till lager (box) har namnen "box" eller "kolumn":

I exemplet nedan används formatet "box_centrerad":

HTML-editorn visar att <DIV> nu använder formatet "box_centrerad":

 

Ändra bredd på boxen - formatet i "Styles"

I första hand bör du göra ändringarna i den externa CSS-mallen. Du kan även formatera lagret (boxen) direkt i dokumentet enligt avsnittet nedan men då gäller formatering bara den aktuella sidan.

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

...och undermenyn "Redigera STYLES":

De format som visas i mallen "Styles" är de CSS-format som visas i menyn "Styles" i WYSIWYG-editorn.

Leta efter samma namn som den "Style" du valt (i vårt exempel namnet "box_centrerad"). Ändra värdet för bredden "width" i pixlar här:

Spara ändringen med knappen "Spara sidan". Välj din sida på nytt och kontrollera att ändringen utförts.

 

tillbaka till meny uppåt

Box -formatera i dokumentet

Om du inte vill använda den externa CSS-mallen kan du formatera boxen (lagret) direkt i dokumentet med WYSIWYG-editorn. Fördelen är att det är enkelt att välja CSS-formaten i WYSIWYG-editorns menyer. Nackdelen är att den formatering du skapar endast gäller 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.

 

Kantlinje runt lagret (boxen)

Lägg till en kantlinje innan du tillämpar annan formatering. Du ser då alla förändringar av bredd, höjd och position direkt och har bättre kontroll över lagrets placering. Om du inte vill ha någon kantlinje runt boxen kan du ta bort den när all övrig formatering är klar.

Placera textmarkören i det lager <DIV> du vill redigera och välj menyn "Edit CSS Style":

Välj fliken "Border" och ange att du vill ha en solid kantlinje med 1 pixels värde för bredd:

Färgen på kantlingen väljer du med knappen för färgväljaren:

...klicka i färgkartan för att välja färg eller skriv in färgvärdet direkt. Du kan välja fliken palett eller namngivna färger men färgkoden blir alltid angiven med hexadecimala värden:

TIPS! Läs gärna mer om färger i Webdesignskolans guide Hexadecimala färger Öppnas i nytt fönster (Open in new window) 

Lämna dialogrutan "Edit CSS Style" med knappen "Update". Kantlinjen gör att storleken på lagret är synligt:

Skriv in din text eller flytta text till lagret. Här markeras texten och klipps ut med med snabbkommando CTRL+X:

Placera textmarkören i lagret och klistra in texten med CTRL+V:

Radera texten "New layer".

 

Om det blir fel...

När du arbetar med lager <DIV> i WYSIWYG-editorn kan det vara ett problem att du inte ser exakt vilket område som markerats. Även om du markerar text och bilder som tillhör samma lager <DIV> så kan WYSIWYG-editorn felaktigt formatera text och bilder som separata områden. När du använder en kantlinje så ser du direkt om området delas upp.

I exemplet nedan har vi formaterat lagret med 300 pixlars bredd men detta har felaktigt påverkat texten och inte lagret (boxen) med kantlinjen:

När vi kontrollerar i HTML-editorn så ser vi att det är textstycket <P> som formaterats och inte <DIV>:

Om det blir fel kan du prova att ångra direkt med CTRL+Z eller knappen "Återställ". Om det inte fungerar är den bästa metoden att redigera koden i HTML-editorn. I vårt exempel raderar vi formateringen style="width: 300px;" men behåller textstycket <P>:

När vi lämnar HTML-editorn med knappen "Update" så är innehållet i lagret återställt:

 

Markera ett lager (box) med innehåll

Om lagret innehåller text, bilder och andra objekt kan du markera allt innehåll genom att placera markören i början av lagret och klicka+dra för att markera nedåt. En annan metod som fungera bättre, om det är stora områden som ska markeras, är att markera från start till slut genom att placera markören i början av lagret och SHIFT+klicka i slutet av lagret.

Här är lagret (med innehåll) markerat:

 

Ange bredd på lagret (boxen)

Markera lagret enligt ovan och välj menyn "Edit CSS Style". Välj fliken "Box" och ange bredden i pixlar:

Välj "Apply" om du vill förgranska resultatet (eller "Update" för att lämna dialogrutan). I vårt exempel har vi angivit bredden 300 pixlar:

 

Positionering av lager, box <DIV>

Om andra områden eller element ska finnas bredvid en box kan du använda egenskapen "float" för att påverka ett textflöde eller andra element och box. En "float" är en box som justeras till höger eller vänster längs sin nuvarande linje. Läs mer i Webdesignskolans guide CSS positionering Öppnas i nytt fönster (Open in new window) 

Välj "left" som egenskap för Float:

Övrig text flödar nu till höger om den vänsterpositionerade boxen:

När vi kontrollerar i HTML-editorn så ser vi att lagret <DIV> formaterats:

 

I exemplet nedan har vi lagt till ännu ett lager <DIV> och flyttat text till lagret. Det nya lagret har samma egenskaper som det tidigare när det gäller "border", "width" och "float":

 

De två lagren positioneras bredvid varandra och textområdet som inte ligger i ett eget lager flödar runt de två lagren. Lager kan du positionera med egenskapen clear: both; vilket innebär att inga andra lager <DIV> får finnas på samma linje. Detta fungerar inte på den text som inte ligger in ett eget lager. För att att positionera även den texten måste den placeras i ett eget lager <DIV> enligt exemplet nedan:

Formatera det nya lagret (boxen) med egenskapen "clear":

Resultatet när allt innehåll ligger i egna lager <DIV>:

TIPS! Läs mer i Webdesignskolans guide CSS positionering Öppnas i nytt fönster (Open in new window) 

 

Margin och padding

"Margin" är avståndet mellan lagrets kanter och andra objekt, ett yttre avstånd. "Padding" är avståndet mellan lagrets kanter och innehållet i lagret, ett inre avstånd.

Här formateras "margin" och "padding" i det första lagret (boxen):

Resultatet när även det andra lagret formaterats med samma egenskaper och värden. Notera att vi tagit bort kantlinjen i det tredje lagret:

 

Centrera lager

Centrering av box sker genom att använda marginalerna som får dynamiska egenskaper genom att ange värdet "auto". Läs mer om centrering i Webdesignskolans guide CSS positionering Öppnas i nytt fönster (Open in new window)  (avsnittet "Centrering av box").

I vårt exempel med två boxar <DIV> bredvid varandra fungerar det inte att ange "auto" som egenskap för marginalerna i någon av de två boxarna. Lösningen är att placera de två lagren (boxarna) i en ny box och formatera denna "centreringsbox" så att den justeras centrerat.

Att skapa det omslutande lagret (centreringsboxen) i WYSIWYG-editorn innebär mer arbete än att skriva koden direkt i HTML-editorn. Använd HTML-editorn och ange en ny <DIV> med egenskaper för "width", "padding" och "margin".

Vi har använt koden nedan i vårt exempel:

<div style="width: 554px; padding: 0px; margin: 0px auto;">

<div>
Box 1 </div>
<div>
Box 2 </div>

</div>

OBS! Se till att "centreringsboxen" omsluter de övriga boxarna med start och slut av <DIV>

Så här ser koden till vårt exempel ut i HTML-editorn:

Bredden (som anges i pixlar) på den omslutande centreringsboxen måste tillräcklig för att få plats med de två övriga boxarna. Observera att förutom "width" så räknas "margin", "padding" och "border" in i den totala bredden.

Modellen nedan visar hur den totala bredden på en box räknas fram:

 

Bredd på de två boxarna i vårt exempel är 250 pixlar vilket totalt blir 500 pixlar
Padding är 10 pixlar gånger 4 = 40 pixlar
Högermarginalen är 5 pixlar gånger 2 = 10 pixlar
Kantlinjen är 1 pixel gånger 4 = 4 pixlar

Den omslutande centreringsboxen måste ha minst 554 pixlars bredd i vårt exempel!

Läs mer i Webdesignskolans guide CSS positionering Öppnas i nytt fönster (Open in new window)  (avsnittet "Boxar - containers - containing block").

 

tillbaka till meny uppåt

Kolumner (box)

Kolumnerna är egentligen en box som formaterats för att likna kolumner. Däremot fungerar inte textflödet som i "riktiga" kolumner. Vill du ha mer text i den första kolumnen får du klippa/klistra in texten manuellt.

Exemplet nedan visar hur formatet "kolumn_2" tillämpats på två boxar <DIV>:

 

Om det blir fel...

När du arbetar med lager <DIV> i WYSIWYG-editorn kan det vara ett problem att du inte ser exakt vilket område som markerats. Även om du markerar text och bilder som tillhör samma lager <DIV> så kan WYSIWYG-editorn felaktigt formatera text och bilder som separata områden.

Exemplet nedan visar problemen som kan uppstå när vi vill byta format på ett lager <DIV>. Innehållet i lagret är markerat och menyn "Styles" visar att formateringen är "kolumn_2":

...när vi byter till formateringen till "kolumn_1" så tillämpas den endast på rubriken och stycketexten men INTE på lagret <DIV>:

HTML-editorn visar att formateringen "kolumn_1" tillämpats på <H2> och <P> men inte på <DIV>:

Om du får problem enligt exemplet ovan så kan du ändra formateringen i HTML-editorn istället för i WYSIWYG-editorn. Skriv namnet på formatet och var noga med att använda exakt samma namn.

I exemplet nedan är koden ändrad:

...och nu är slutresultatet som vi tänkt oss:

 

tillbaka till meny uppåt

Kolumn för annonser och information mm

Du kan använda en box <DIV> för att dela upp sidan i två eller flera delar för att tex få plats med annonsering eller information från sponsor mm. Grunden är densamma som i avsnittet Kolumner (box) » ovan men det finns inga färdiga formateringar "Styles" i den externa CSS-mallen. Använd istället CCS-formatering direkt i dokumentet enligt avsnittet Box - formatera i dokumentet » ovan.

Exempel 1

Dela upp sidans innehåll i två boxar, sidans innehåll i Box1 och sponsor-informationen i Box2:

Exempel 2

Använd endast en box och placera sponsor-informationen i Box1:

 

Exempel 1

Dela upp sidans innehåll i två boxar, sidans innehåll i Box1 och sponsor-informationen i Box2.

Box1 med sidans innehåll justeras till vänster med float: left;
Box2 med sponsor-informationen justeras till höger med float: right;

TIPS! Lägg till en kantlinje på boxen så ser du alla förändringar av bredd, höjd och position direkt och har bättre kontroll över lagrets placering. Ta bort kantlinjen när all övrig formatering är klar.

Skriv in koden direkt i HTML-editorn:

Om du vill använda funktionen "Edit CSS Style" istället för att skriva CSS-koden manuellt kan du skapa Box1 genom att omsluta sidans innehåll med <DIV> (i HTML-editorn enligt ovan):

<div> sidans innehåll här... </div>

När boxen är skapad kan du markera allt innehåll genom att Klicka+dra och välja menyn "Edit CSS Style":

Ange bredd och justering under fliken "Box":

Skapa Box2 genom att omsluta sidans innehåll med koden <DIV> (i HTML-editorn enligt ovan):

<div> box2... </div>

När boxen är skapad kan du markera allt innehåll genom att Klicka+dra och välja menyn "Edit CSS Style":

Välj fliken "Block" om du vill centrera allt innehåll i boxen:

Ange bredd i pixlar och justering till höger i fliken "Box":

Om du vill ha en kantlinje anger du den i fliken "Border":

Läs mer i avsnittet Box - formatera i dokumentet »

OBS! Om du vill infoga innehållet i boxen med <?php include> måste du dölja WYSIWYG-editorn innan du använder PHP-koden:

Exempel 2

Använd endast en box och placera sponsor-informationen i Box1.

Box1 med sponsor-information högerjusteras med float: right;

OBS! När en box ska justeras i förhållande till text och objekt som inte ligger i en box så infogas <DIV> före annat innehåll. I exemplet ovan så användes två boxar och den inbördes ordningen på boxarna har då ingen betydelse när float används.

TIPS! Lägg till en kantlinje på boxen så ser du alla förändringar av bredd, höjd och position direkt och har bättre kontroll över lagrets placering. Ta bort kantlinjen när all övrig formatering är klar.

Skriv in koden direkt i HTML-editorn:

Om du vill använda funktionen "Edit CSS Style" istället för att skriva CSS-koden manuellt kan du skapa Box1 genom att omsluta sponsor-informationen med <DIV> (i HTML-editorn enligt ovan):

<div> sponsor-information här... </div>

När boxen är skapad kan du markera allt innehåll genom att Klicka+dra och välja menyn "Edit CSS Style":

Välj fliken "Block" om du vill centrera allt innehåll i boxen:

Ange bredd i pixlar och justering till höger i fliken "Box":

Om du vill ha en kantlinje anger du den i fliken "Border":

Läs mer i avsnittet Box - formatera i dokumentet »

OBS! Om du vill infoga innehållet i boxen med <?php include> måste du dölja WYSIWYG-editorn innan du använder PHP-koden:

Inkludera filer med <?php include>

Du kan infoga HTML-sidor och PHP-sidor eller bilder med <?php include> - det kan vara aktuell information, annonser, reklam eller nyhetsboxar.

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

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 inkludera sidor i avsnittet Inkludera sidor med <?php include> » ovan.

 

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":

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

 

Hur CSS-mallen är uppbyggd

CSS-mallen innehåller formatering av HTML-element som tex BODY, P, och H1
Ett antal classer formaterar sidans innehåll, sidhuvud och sidfot, menyer, sidkarta, bilder, box mm.

Här är en översikt över innehållet i CSS-mallen:

/* --------------------------------------------------------------------------------- */
/* SIDLAYOUT */
/* --------------------------------------------------------------------------------- */

Sidhuvud, sidfot, centreringsbox, meny, sidinnehåll

/* --------------------------------------------------------------------------------- */
/* HUVUDMENY 1 - vertikal listmeny med undermeny i flera nivåer */
/* --------------------------------------------------------------------------------- */

Huvudmenyn, listmenyn, som kan placeras till vänster eller höger

/* --------------------------------------------------------------------------------- */
/* HUVUDMENY 2 - Horisontell meny utan undermeny */
/* --------------------------------------------------------------------------------- */

Huvudmeny som visas under sidhuvudet

/* --------------------------------------------------------------------------------- */
/* UNDERMENY - horisontell undermeny som visas på varje sida */
/* --------------------------------------------------------------------------------- */

Undermeny som visas i överkant av sidornas innehåll

/* --------------------------------------------------------------------------------- */
/* SÖKVÄG MED LÄNKAR - Visar sökväg till den aktuella sidan med länkade sidnamn */
/* --------------------------------------------------------------------------------- */

Sökväg till aktuell sida som även kan användas som meny

/* --------------------------------------------------------------------------------- */
/* MENYTRÄD - SITEMAP */
/* --------------------------------------------------------------------------------- */

Sidkarta (sitemap) som visar namnet på alla sidor i webbplatsen

/* --------------------------------------------------------------------------------- */
/* WYSIWYG TinyMCE - CSS-mallar som visas i menyn "Styles" */
/* --------------------------------------------------------------------------------- */

Formaten som visas i menyn "Styles" i WYSIWYG-editorn

 

Box <DIV> som används i layoten

De boxar som används i grundlayouten är:
<div id="sidhuvud">
<div id="centerbox">
<div id="kolumncontainer">
<div id="kolumn_meny">
<div id="kolumn_content">
<div id="sidfot">

Klicka på länkar nedan för att se layout-exempel där boxarna visas med kantlinjer eller med bakgrundsfärg:

TIPS! Du kan välja samma layouter som i demo-webbplatsen och testa dem "på riktigt". Använd menyn "Inställningar" och välj någon av mallarna "layout_box_border.css" eller "layout_box_color.css":

 

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 demo och layoutexemplet Öppnas i nytt fönster (Open in new window)  så måste du ladda upp CSS-filen och de bilder som ingår i filen.

OBS! ZIP-filen innehåller ALLA filer och bilder och flera av mallarna och bilderna finns redan i de mappar som används till layouten: wds_cms/css och wds_cms/css/bilder

  1. Välj ZIP-filen till CSS-mallen i WDS CMS demo Öppnas i nytt fönster (Open in new window) 
  2. Packa upp innehållet i ZIP-filen i valfri mapp.
  3. Välj menyn "Lista CSS-mallar" och länken "Ladda upp nya CSS-mallar":



  4. Välj den CSS-mall du vill ladda upp:



  5. Hämta bilderna till CSS-mallen genom att välja menyn "Ladda upp CSS-bild":



    OBS! Vissa av bilderna används av andra CSS-mallar och finns då redan i bildmappen. Om du får ett meddelande om att bilden redan finns kan du välja att Avbryta uppladdningen:
  6. 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

CSS-formatering i dokumentet

OBS! Du bör använda den externa CSS-mallens formatering i första hand och endast formatera direkt i dokumentet vid behov. 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. Läs mer i avsnittet CSS-formatering med extern CSS-mall » ovan.

CSS-formateringen som WYSIWYG-editorn använder är sk "inline styles" och är den metod som är är minst effektiv. Här uppfylls inte målet med att separera innehåll och struktur i dokumenten. CSS-formateringen anges i anslutning till de element som ska formateras. När formatet ska användas i ett nytt element måste CSS-koden anges på nytt och det innebär att sidorna innehåller mycket kod och tar längre tid att laddas i webbläsaren.

Använd den här metoden när du vill ha en avvikande formatering på enstaka sidor!

Även när du använder formatering med knapparna i WYSIWYG-editorn så tillämpas "inline style" och det gäller exempelvis för textfärg, bakgrundsfärg, indragen text, kursiv text och genomstruken text:

Dialogrutan "Edit CSS Style"

När du använder dialogrutan "Edit CSS Style" så kan du tillämpa fler format och på fler element än med "standardknapparna". Du öppnar dialogrutan med knappen "Edit CSS Style":

OBS! Flikarna "Border" och "Positioning" används till boxar <DIV> och du kan läsa mer om det i avsnittet Box - formatera i dokumentet » ovan.

I dialogrutans flik "Text" har vi valt att ändra fonten i ett markerat textområde:

Textområdet som ska formateras är markerat:

..men det har ingen betydelse om du bara markerat några ord. Formateringen gäller för hela elementet <P>:

Om vi istället formaterar med menyn "Font family" i samma markerade textområde:

...så gäller formateringen endast den text som omslutits med <SPAN> och det går alltså att markera och formatera enstaka ord med den här metoden:

Kolla alltid i HTML-koden hur det valda formatet påverkar din kod. Om du tillämpar flera format så kan du behöva "rensa upp" i koden i HTML-läget för att få bort all formatering.

Radavstånd i stycketext <P>

Radavstånd tillämpas styckevis och gäller för all text i ett stycke <P> oavsett om du markerat all text eller ej.
Välj pilmenyn och "value" om du vill ange ett eget värde:

Skriv in värdet och ange enheten:

Radavståndet 25 pixlar i det första textstycket avviker nu från den externa CSS-mallens 18 pixlar som gäller i alla övriga textstycken:

Om du vill ändra radavståndet i all text ska du göra detta i den externa CSS-mallen:


Läs mer i avsnittet CSS-formatering med extern CSS-mall » ovan.

 

Fliken "Block" innehåller fler formateringar till textområden som tex avstånd mellan ord, avstånd mellan bokstäver och textjustering (vänster, höger, centrerad och full bredd):

Rubriker <H1> <H2> <H3>

Du kan ändra rubrikformatet i elementet <H> genom att placera textmarkören i (eller markera) rubriktexten:

...som är <H2> i vårt exempel:

Om du vill ändra alla rubriker <H2> ska du göra detta i den externa CSS-mallen:


Läs mer i avsnittet CSS-formatering med extern CSS-mall » ovan.

 

Tabeller <TABLE>

När du använder formatering med tabell-menyn "Insert/Modify table" så tillämpas både HTML-formatering direkt i elementet och CSS-formatering med "inline style". CSS-formatering gäller exempelvis för tabellbredd, bakgrundsfärg, och kantlinje. Läs mer om hur du infogar och använder tabeller i avsnittet Tabeller » ovan.

Om du vill använda formatering som inte finns i menyn "Insert/Modify table" så kan du istället använda dialogrutan "Edit CSS Style". I exemplet nedan har vi använd en kantlinje under varje tabellcell <TD>:

Varje tabellcell <TD> har formaterats:

HTML-koden visar att formatet tillämpats i alla tabellceller <TD>:

Det finns ett antal fördefinierade format i den externa CSS-mallen och du kan välja dem i menyn "Styles". I exemplet nedan väljer vi formatet "kantlinje5_under":

OBS! Formateringen kanske inte syns direkt i administrationen och du måste då förgranska sidan för att se resultatet. I exemplet nedan har vi använt olika format på varje tabellcell <TD>:

När du visar HTML-koden ser du att formatet från den externa CSS-mallen tillämpats i alla tabellceller <TD>:

Om du vill ändra kantlinjen kan du göra detta i den externa CSS-mallen:


Läs mer i avsnittet CSS-formatering med extern CSS-mall » ovan.

 

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:

...och 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:

...och 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 "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.

Sökvägen till loggfilerna:

  • wds_cms/kontaktform/logg.txt
    sparar informationen i ett format som liknar formulärets innehåll.
  • wds_cms/kontaktform/logg_database.txt
    sparar informationen radvis separerad med filtertecknet | för import i databaser och Excel-filer.

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:

...och infoga koden nedan för sökformulär:

<?php include("wds_cms/admin/search.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:

...och infoga koden:

<?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 » är ett eget program för att administrera bilder i olika gallerier.
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) 

 

Nyhetsbrev (extra program)

WDS Nyhetsbrev » är ett eget program för att administrera e-postadresser och skicka nyhetsbrev. Programmet är fristående från WDS CMS.

Se exemplet på anmälan till Nyhetsbrev i WDS CMS demo Öppnas i nytt fönster (Open in new window) 

 

Login system (extra program)

WDS Login system » är ett eget program för att administrera medlemmar med inloggning.
Programmet är fristående från WDS CMS.

 

tillbaka till meny uppåt

 

 

till sidans topp (top of page) till sidans topp