52 besökare online
Drömvävaren webbshop
4 kunder online

webdesign och HTML

OBS! Innan du börjar använda de färdiga layouterna är det viktigt att du har grundkunskaper i CSS » och då framförallt i CSS positionering » . Att bara använda mallarna som de är ger ingen egen och unik layout och det är ju ganska meningslöst eller hur? Utgå ifrån mallarna och anpassa dem efter dina egna behov så får du din egen personliga design!

Förutsättningar för att använda menyer och layout

Även om du vill börja använda mallarna direkt så bör du ha kunskap om grunderna i CSS för att kunna ändra och göra mallen till din egen layout. Alla layout-exempel förutsätter att du har kunskaper motsvarande guiden CSS - layout » och CSS-meny »

Layouterna fungerar i Internet Explorer 6, Firefox 1.0 och senare versioner men är inte testade i andra webbläsare. HTML-koden för varje layout-exempel hittar du genom att visa sidans källkod. CSS-koden finns i extern CSS-mall och i varje exempel finns CSS-mallen länkad.

OBS! För att använda PHP-menyerna krävs att din webbserver har stöd för PHP. Detta gäller också för full funktionalitet med de CSS-layouter som använder PHP. Läs mer i guiden phpinfo - info om PHP-installation » om hur du kontrollerar om du kan använda PHP på din webbserver.

Menyerna och layouterna är till för att användas!

Alla layouter och menyer är till för att användas! Du FÅR anpassa layouterna efter dina egna behov eller använda dem som de är och detta gäller även de bilder som ingår i mallarna. Layouterna får även användas till företag och föreningar. OBS! Detta innebär INTE att du får återge layoterna, kod, bilder eller text i guider, tutorials eller liknande sammanhang.

Använd sökvägar relativa till dokumentroten (site root)

När du använder samma meny på alla sidor i din webbplats kan du använda länkar med sökvägar som är relativa till dokumentet. Det fungerar om alla sidor som använder menyn ligger i samma mapp men inte om du har dina sidor i undermappar. Den bästa lösningen är istället att använda sökvägar relativa till dokumentroten (site root) på din webbserver.

Exemplen nedan visar tre typer av länkar: relativa till dokumentet, relativa till dokumentroten och absoluta sökvägar.

sökvägar relativa till dokumentet

Om sidorna ligger i undermappar och länkarna har sökvägar som är relativa till dokumentet kan meny-koden se ut så här i dokumentet "sida1.php". Koden fungerar inte om du använder den i "sida2.php" eller någon av de övriga sidorna eftersom sökvägen då blir fel:

<div id="menycontainer">
<ul>
<li><a href="sida1.php">Meny 1</a></li>
<li><a href="../sida2/sida2.php">Meny 2</a></li>
<li><a href="../sida3/sida3.php">Meny 3</a></li>
<li><a href="../sida4/sida4.php">Meny 4</a></li>
<li><a href="../sida5/sida5.php">Meny 5</a></li>
</ul>
</div>

 

absoluta sökvägar

Du kan även använda absoluta sökvägar som innehåller hela domännamnet men om du har flera domännamn som pekar till samma webbplats fungerar inte detta. I exemplet nedan är webbplatsens URL: http://www.webdesignskolan.se

<div id="menycontainer">
<ul>
<li><a href="http://www.webdesignskolan.se/sida1/sida1.php">Meny 1</a></li>
<li><a href="http://www.webdesignskolan.se/sida2/sida2.php">Meny 2</a></li>
<li><a href="http://www.webdesignskolan.se/sida3/sida3.php">Meny 3</a></li>
<li><a href="http://www.webdesignskolan.se/sida4/sida4.php">Meny 4</a></li>
<li><a href="http://www.webdesignskolan.se/sida5/sida5.php">Meny 5</a></li>
</ul>
</div>

Den aboluta sökvägen i koden ovan fungerar inte om besökaren använder ett annat av våra domännamn som tex: webdesignskolan.se - www.webdesignskolan.com - www.webdesignskolan.nu

 

sökvägar relativa till dokumentroten (site root)

Den bästa lösningen är att använda sökvägar som är relativa till dokumentroten (site root) för att vara säker på att menyn fungerar i alla sidor i din webbplats oavsett vilket domännamn som används. I exemplet nedan är webbplatsens URL: http://www.webdesignskolan.se men det har ingen betydelse för sökvägarna som då bara innehåller mappnamn och sidnamn:

<div id="menycontainer">
<ul>
<li><a href="/sida1/sida1.php">Meny 1</a></li>
<li><a href="/sida2/sida2.php">Meny 2</a></li>
<li><a href="/sida3/sida3.php">Meny 3</a></li>
<li><a href="/sida4/sida4.php">Meny 4</a></li>
<li><a href="/sida5/sida5.php">Meny 5</a></li>
</ul>
</div>

 

Meny med CSS

Meny-exemplen är gjorda med CSS och HTML och HTML-koden ser du genom att visa källkoden för sidorna i layouten. CSS-filer och bilder är länkade från layouten och du klickar på länken för att se och spara bilder och CSS-mallen. Menyerna är uppbyggda med punktlistor <UL><LI> formaterade med CSS enligt guiden CSS-menyer »

Menyn måste tillämpas på varje sida med: <div id="menycontainer"> ... </div> vilket innebär att du måste ändra menyn på varje sida om du lägger till eller tar bort ett menyalternativ. Så här kan koden se ut som infogar CSS-menyn:

<div id="menycontainer">
<ul>
<li><a href="sida1.php" id="current">Meny 1</a></li>
<li><a href="sida2.php">Meny 2</a></li>
<li><a href="sida3.php">Meny 3</a></li>
<li><a href="sida4.php">Meny 4</a></li>
<li><a href="sida5.php">Meny 5</a></li>
</ul>
</div>
<div id="content">

I meny-exemplen nedan ligger de länkade sidorna i samma mapp. Om du placerar filer i olika mappar är det bättre att du använder sökvägar relativa till dokumentroten (site root) enligt avsnittet Använd sökvägar relativa till dokumentroten (site root) ovan.

OBS! Om du har tillgång till PHP kan du infoga menyn på varje sida med <?php include ?> - läs mer i guiden Infoga CSS-meny med PHP include »

Klicka på den meny du vill använda:


 

 

Meny med PHP och CSS

OBS! Vi rekommenderar att du går igenom guiden PHP listmeny » innan du använder menyexemplen nedan. Meny-exemplen är gjorda med CSS, HTML och PHP. Menyerna är inkluderade med <?php include ?> och du kan inte se allt innehåll genom att visa källkoden för sidorna.

Inga javascript eller annan scriptkod används och menyn fungerar i webbläsare som har stöd för CSS2 som tex Internet Explorer 5, Firefox 1, Netscape 7, Opera 7, Safari 1 och senare versioner.

OBS! För att använda PHP-menyerna krävs att din webbserver har stöd för PHP. Detta gäller också för full funktionalitet med de CSS-layouter som använder PHP. Läs mer i guiden phpinfo - info om PHP-installation » om hur du kontrollerar om du kan använda PHP på din webbserver.

PHP-filer, CSS-mallar och övriga filer som ingår finns som ZIP-filer i guiden PHP listmeny » där det också finns information om hur du anpassar och konfigurerar PHP-menyerna.

Klicka på bilden av den meny du vill se:

PHP-meny 1

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

Hämta alla filer till exemplet ovan i guiden PHP listmeny »

 

PHP-meny med direktlänkar

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

Hämta alla filer till exemplet ovan i guiden PHP listmeny »

PHP-meny 2

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

Hämta alla filer till exemplet ovan i guiden PHP listmeny »

PHP-meny 3

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

Hämta alla filer till exemplet ovan i guiden PHP listmeny »

PHP-meny 4

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

Hämta alla filer till exemplet ovan i guiden PHP listmeny »

PHP-meny 5

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

Hämta alla filer till exemplet ovan i guiden PHP listmeny »

PHP-meny 6

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

Hämta alla filer till exemplet ovan i guiden PHP listmeny »

 

 

Layout med CSS

Layout-exemplen är gjorda med CSS och HTML och HTML-koden ser du genom att visa källkoden för sidorna i layouten. CSS-filer och bilder är länkade från layouten och du klickar på länken för att se och spara bilder och CSS-mallen. Menyerna är uppbyggda med punktlistor <UL><LI> formaterade med CSS enligt guiden CSS-menyer »

OBS! Vi rekommenderar att du går igenom guiden CSS-layout » innan du använder layouterna nedan!

Klicka på den layout du vill använda:

   

   

   

   

   

 

Layout med PHP och CSS

OBS! Vi rekommenderar att du går igenom guiden PHP listmeny » innan du använder layouterna nedan. De här layouterna är gjorda med CSS, HTML och PHP. Menyer, sidhuvud och sidfot är inkluderade med <?php include ?> och du kan inte se allt innehåll genom att visa källkoden för sidorna.

Inga javascript eller annan scriptkod används och menyn fungerar i webbläsare som har stöd för CSS2 som tex Internet Explorer 5, Firefox 1, Netscape 7, Opera 7, Safari 1 och senare versioner.

OBS! För att använda PHP-menyerna krävs att din webbserver har stöd för PHP. Detta gäller också för full funktionalitet med de CSS-layouter som använder PHP.Läs mer i guiden phpinfo - info om PHP-installation » om hur du kontrollerar om du kan använda PHP på din webbserver.

TIPS! Du kan använda PHP-layouterna på samma sätt som CSS-layouterna ovan men måste då ersätta de expanderande PHP-menyerna med vanliga CSS-menyer »

 

PHP-filer, CSS-mallar och övriga filer som ingår finns som ZIP-filer i guiden PHP listmeny » där det också finns information om hur du anpassar och konfigurerar PHP-menyerna.

Klicka på den layout du vill använda:

   

   

   

   

   

 

PHP-layout med direktlänkad meny

Det exemplet är i grunden lika de övriga PHP-layouterna men här är menyvalen även direktlänkade. När du klickar på en meny så öppnas undermenyerna och dessutom visas den sida menyn nu är länkad till. Klicka på exemplet nedan för att se hur menyn fungerar:

PHP-filer, CSS-mallar och övriga filer som ingår finns som ZIP-filer i guiden PHP listmeny » där det också finns information om hur du anpassar och konfigurerar PHP-menyerna.