HOME -> WEBDESIGN -> web-03-ssi Tirsdag, 22. august 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2003 - Opdateret marts 2006

Web-design og layout med Server Side Includes

Også SSI teknologien kan anvendes til opbygning af dit web sted.

Indhold

 

TopIndledning
Lige som vores artikel omkring Web-design og layout med JavaScript, kan du også anvende SSI (Server Side Includes) til layout af dine sider. Det er, når alt kommer til at, meget nemt at håndtere kommandoerne i SSI og dermed strukturere sit layout. Det kræver dog at din ISP har givet dig tilladelse til at bruge SSI sammen med dit websted. SSI giver et god resultat, og igen er fordelen en meget begrænset vedligeholdelse af web-stedet idet web-stedets sider kan ændres ved blot at rette i en fil. SSI er i modsætning til JavaScript et server side sprog, hvilket vil sige at serveren sammensætter html dokumentet førend det sendes til klienten.

Vi tager udgangspunkt i et layout der indeholder sidehoved og en sidefod. I den sammenhæng laver vi to filer, en vi kalder sidehoved og en vi kalder sidefod. Ekstension af filerne er op til dig selv, vi har her valgt at anvende .tpl som svarer til template. Du kan også anvende ekstension som .txt, .html. eller andet.

 

TopDesign af sidehoved
I vores sidehoved har jeg valgt at placere et logo samt to links. Et link som peger på index siden og et andet som er "tilbage link".


<div style="float: left;"><a href="http://www.ditdomæne.dk"><img src="fun.gif" alt="" /></a></div>
<h1 style="float: right;">MitWebSted.dk</h1>
<p>&nbsp;</p>

<p><a href="http://www.ditdomæne.dk">[ Hjem ]</a><a href="JavaScript:history.back()">[ Tilbage ]</a></p><hr />


Som du kan se kan vi også anvende JavaScript i de eksterne filer.
Koden til sidehoved gemmes i en ekstern fil som jeg har kaldt for sidehoved.tpl

For at kalde filen "sidehoved.tpl" anvender vi følgende kommando, der senere sættes ind i vores shtml-dokument.


<!--#include virtual="sidehoved.tpl"-->


 

TopDesign af sidefod
Vores sidefod indeholder info som copyright, e-mail adresse til web-masteren, samt et link til toppen af siden.


<hr /><p>Copyright &#169; DitWebSted.dk

<a href="mailto:navn@ditdomæne.dk">[ Mail Webmaster ]</a><a href="#top">[ Top ]</a></p>


Koden til sidefod gemmes som sidefod.tpl

Vi anvender den samme kommando for at indsætte "sidefod.tpl" som ved "sidehoved.tpl".


<!--#include virtual="sidefod.tpl"-->


 

TopStylesheet
Fra vores lektioner omkring stylesheet har du set hvordan du fra en ekstern fil kan styre typografien af din side. Her vises blot en forenklet måde af dette typografi ark.

Vi vælger at alle vores sider skal have en ensartet baggrund, valget faldt på farven Alice blue, i hex kode #f0f8ff eller hvis vi vælger RGB så hedder den 240, 248, 255, alle tre skulle gerne give samme resultat.


body {
background-color: #f0f8ff;
}

/* Vores links skal se ud som følgende: */

a:link {
color : #0000ff;
}
a:visited {
color : #6699cc;
}
a:active {
color : #ff0000;
}
a:hover {
color : #cc6666;
}


Vi linker til vores stylesheet på den velkendte måde


<link rel="stylesheet" type="text/css" href="filnavn.css" />


 

TopDet færdige html-dokument
Vi er nu langt om længe klar til at strikke vores shtml dokument.


<html>
<head>
  <title>SSI gør livet lettere</title>
  <link rel="stylesheet" type="text/css" href="filnavn.css" />
</head>
<body>
<table><tr><td>
<!--#include virtual="sidehoved.tpl"-->
</td></tr>

<tr><td><!-- Start indhold -->
Opdateret <!--#echo var="LAST_MODIFIED" -->

<p>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</p>

<!-- Slut indhold --></td></tr>

<tr><td>
<!--#include virtual="sidefod.tpl"-->
</td></tr></table>
</body>
</html>


Husk at gemme dit html dokument med ekstension .shtml

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top