Kiedyś, dawno temu sprawę elementów stałych załatwiano po prostu w HTML. Konkretniej chodzi o ramki wbudowane lub też podziały stron. Jest to metoda stara i niepraktyczna choćby ze względu na pozycjonowanie.
Z pomocą przychodzi JavaScript, język skryptowy, przetwarzany po stronie klienta. Można problem rozwiązać też dzięki PHP i funkcjom include lub require.
Przedstawię tutaj jednak metody oparte na JS, ze względu na przetwarzanie po stronie klienta a co za tym idzie praktyczność w testowaniu i ogólnodostępność.
Każda współczesna przeglądarka jest w stanie przetworzyć skrypt i wykonać go.
Na przykładzie prostej struktury strony postaram się przedstawić idee rozwiązania.
<html>
<head>
<title>Stałe elementy strony</title>
<style type="text/css">
body {
font-size: 10pt;
font-family: arial;
}
td {
border-bottom: 1px solid #999999;
}
</style>
</head>
<body>
<center>
<table border="0" style="border-collapse: collapse;" width="800px" >
<tr>
<td width="100%" colspan="2">
<script type="text/javascript" src="logo.js"></script>
<br>
<br>
<br>
</td>
</tr>
<tr>
<td width="30%">
<script type="text/javascript" src="menu.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
<td width="70%"><small>tresc zależna od podstrony</small></td>
</tr>
<tr>
<td width="100%" colspan="2">
<script type="text/javascript" src="stopka.js"></script>
</td>
</tr>
</table>
</center>
</body>
</html>
Powyższy kod HTML, to prosta strona, do której załączone są pliki z rozszerzeniem *.js Pliki JS zawierają skrypt JavaScript
<script type="text/javascript" src="stopka.js"></script>
W znaczniku SCRIPT umieszczamy atrybuty TYPE oraz SRC. Wartość pierwszego to typ skryptu, czyli w tym wypadku TEXT/JAVASCRIPT. W SRC, czyli source (źródło) podajemu ścieżkę do pliku zawierającego skrypt JS.
Skrypt po przetworzeniu będzie wyświetlany dokładnie tam, gdzie został załączony.
A co w pliku JS?
W omawianym przykładzie załączane są pliki:
logo.js, menu.js, stopka.jsOgólnie, jak chyba wiadomo w plikach tych umieszczamy, to co chcemy, aby zostało wyświetlone w danym miejscu strony.
Tak więc:
logo.js
document.write("<h1><a href='index.html' title='Tytuł strony' alt='Tytuł strony'>Tytuł strony, top, logo</a></h1>");
menu.js
document.write("<h4>menu</h4><a href='zakladka.html' title='Zakładka' alt='Zakładka'>Zakładka</a><br><a href='zakladka2.html' title='Zakładka 2' alt='Zakładka 2'>Zakładka 2</a><br><a href='zakladka3.html' title='Zakładka 3' alt='Zakładka 3'>Zakładka 3</a><br><a href='zakladka4.html' title='Zakładka 4' alt='Zakładka 4'>Zakładka 4</a><br><a href='zakladka5.html' title='Zakładka 5' alt='Zakładka 5'>Zakładka 5</a><br>");
stopka.js
document.write("© Copyright 2009 by ld, stopka, element staly");
Znajomość JS wymaga minimum, a właściwie tylko jednej funckji,:
document.write();ktora to wyświetla na ekranie to co jej każemy. W przykładzie jest to zwykły tekst opatrzony prostymi znacznikami HTML.
Jak widać metoda jest bardzo praktycznym rozwiązaniem. Dzięki niej mając setki podstron nie generowanych automatycznie, możemy podmieniając jeden plik zmienić wygląd każdej z podstron.
Sposób jest prosty i powszechnie znany, ale mimo to, nie stosowany nawet przez tych, którym jets to potrzebne.
Brak komentarzy:
Prześlij komentarz