HOME -> WEBDESIGN -> web-02-js Onsdag, 13. December 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2003 - Opdateret n/a

Web-design og layout med JavaScript

Anvend JavaScript til dine layouts. JavaScript gør det nemt og simpel at strukturere din hjemmeside.

Indhold

 

TopIndledning
Hvor stor er dit website? Har du et dokument eller er der 50 dokumenter som skal vedligeholdes? Har du kun en side er der ikke så meget at komme efter. Men er dit websted først blevet "voksen", og indeholder mange sider, så kan vedligeholdelsen godt gå hen og blive en tung fornøjelse. Her er der så at JavaScript kommer ind i billedet.
Med JavaScript kan du vedligeholde dit websted på en nem og enkelt måde. Det som er smart ved JS er at alle html dokumenter kun behøver at referere til en ekstern fil, hvilket gør vedligeholdelsen ekstremt nemmere. Nu er der kun en fil der skal ændres, og effekten slår igennem på alle dine andre sider. Eksemplerne nedenfor vil illustrere dette.

Generelt set indeholder de fleste sider en top- og bund tekst, eller sidehoved og sidefod om man vil. Selve sidehoved indeholder oftest et logo samt et link til forsiden. Selve menuet kan være placeret i sidehovedet, men er lige så ofte placeret på venstre eller højre side af dokumentet. Sidefoden indeholder gerne et link til toppen, en e-mail adresse, copyright og lignende.

Der findes flere forskellige måder hvordan du kan anvende JavaScript til opbygning af layoutet. Det første eksemplet som jeg vil gennemgå indeholder sidehoved samt sidefod i et meget forenklet udgave. Både sidehoved og sidefod ligger i to eksterne JS dokumenter som der refereres til via mit html dokument. Du kan senere bygge de elementer samt funktioner til som du har behov for.
I det andet eksempel placerer jeg sidehoved og sidefod i hver deres variabel, men i et og samme script.

Der findes også andre teknologier til design af dit website, f.eks. kan du anvende SSI, php eller CSS. Men i denne artikel vil jeg primært komme ind på layout via JavaScript.

 

TopPlacering af sidehoved og sidefod i 2 eksterne filer.

 

TopDesign af sidehoved
I sidehoved ønsker jeg at placere mit logo samt to links. Logoet skal fungere som et link til forsiden. De to ekstra links har følgende formål, et link til forsiden (samme funktion som logoet) og et tilbage link.


document.write("<div style='float: left;'><a href='http://www.ditdomæne.dk'><img src='fun.gif' alt=' ' /></a></div>");

document.write("<h1 style='float: right;'>MitWebSted.dk</h1>");
document.write("<p>&nbsp;</p>");

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


Scriptet gemmes i en ekstern fil som jeg har kaldt for sidehoved.js

 

TopDesign af sidefod
Sidefoden indeholder en senest opdateret information, en e-mail adresse til web-masteren samt et link til toppen af siden.


document.write("<hr /><p>Sidst opdateret den: " + document.lastModified + "  <a href='mailto:navn@ditdomæne.dk'>[ Send e-mail ]</a><a href='#top'>[ Top ]</a></p>");


Scriptet gemmes i en ekstern fil som jeg har kaldt for sidefod.js

Det eneste der er tilbage er at angive stien til vores sidehoved og -fod i html dokumentet, på det sted du ønsker koden indsat.
Vi linker til scriptet med følgende kommando:


<script src="sidehoved.js"></script>
<script src="sidefod.js"></script>


 

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: #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 html dokument.


<html>
<head>
  <title>JavaScript gør livet lettere</title>
  <link rel="stylesheet" type="text/css" href="filnavn.css" />
</head>
<body>
<table><tr><td>
<script src="sidehoved.js"></script>
</td></tr>

<tr><td><!-- Start indhold -->

<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>
<script src="sidefod.js"></script>
</td></tr></table>
</body>
</html>


Vis som eksempel

 

TopPlacering af sidehoved og sidefod i 1 ekstern fil.

 

TopDesign af sidehoved og -fod, variablerne
Hvis du synes det er nemmere kan du lave både sidehoved og -fod i et og samme script. Dette gøres ved at definere to variabler som jeg har valgt at kalde sidehoved og sidefod .... Indlysende ikke også ;-)

Vores eksterne JavaScript kommer nu til at se ud som følgende:


var sidehoved="<div style='float: left;'><a href='http://www.ditdomæne.dk'><img src='02-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 />"

var sidefod="<hr /><p>Sidst opdateret den: " + document.lastModified + " <a href='mailto:navn@ditdomæne.dk'>[ Send e-mail ]</a><a href='#top'>[ Top ]</a></p>"


 

TopDet færdige html-dokument
Og det tilhørende html dokument kommer her:


<html>
<head>
  <title>JavaScript gør livet lettere</title>
  <link rel="stylesheet" type="text/css" href="filnavn.css" />
  <script type="text/javascript" src="filnavn.js"></script>
</head>
<body>
<table><tr><td>

<script type="text/javascript">
  document.write(sidehoved)
</script>

</td></tr>

<tr><td><!-- Start indhold -->

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

<script type="text/javascript">
  document.write(sidefod)
</script>

</td></tr></table>
</body>
</html>


Du skal her være opmærksom på, at der i <head> sektion er et link til det eksterne script som indeholder sidehoved og -fod.

Vis som eksempel

 

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