Data publikacji: 2006-09-30
Autor: Adrian Słowik

Ciekawi Was jak stworzyć całą witrynę w jednym pliku? Nie zaliczamy tu grafiki, lecz same dokumenty html. Już niedługo się przekonacie - nie jest to trudne, wystarczy troszkę DHTML-a ze Strefy WWW i na pewno zrozumiecie...

Po pierwsze tworzymy plik index.html. Wstawiamy do niego wszystko czego nam trzeba, design, style (poprzez znacznik styli, nie jako odwołanie do innego pliku) i zostawiamy sobie miejsce tam, gdzie ma być wyświetlany tekst.

Tworzymy warstwy:

<div id="l0">Blabla</div>
<div id="l1">Blabla</div>
<div id="l2">Blabla</div>
<div id="l3">Blabla</div>
<div id="l4">Blabla</div>
<div id="l5">Blabla</div>
<div id="l6">Blabla</div>
Każdej z warstw nadajemy inny numerek. Kolejnym krokiem jest dodanie definicji styli:

<style>
#l0{position: absolute; width:510;}
#l1{position: absolute; width:510;}
#l2{position: absolute; width:510;}
#l3{position: absolute; width:510;}
#l4{position: absolute; width:510;}
#l5{position: absolute; width:510;}
#l6{position: absolute; width:510;}
</style>
Teraz każda warstwa będzie się zaczynała w tym samym miejscu i będzie miała 510 pixeli szerokości. Zajmijmy się teraz naszym skryptem:

<script language=javascript>
function pokaz0(){
document.getElementById('l0').style.visibility = 'visible';
document.getElementById('l1').style.visibility = 'hidden';
document.getElementById('l2').style.visibility = 'hidden';
document.getElementById('l3').style.visibility = 'hidden';
document.getElementById('l4').style.visibility = 'hidden';
document.getElementById('l5').style.visibility = 'hidden';
document.getElementById('l6').style.visibility = 'hidden';
}
function pokaz1(){
document.getElementById('l0').style.visibility = 'hidden';
document.getElementById('l1').style.visibility = 'visible';
document.getElementById('l2').style.visibility = 'hidden';
document.getElementById('l3').style.visibility = 'hidden';
document.getElementById('l4').style.visibility = 'hidden';
document.getElementById('l5').style.visibility = 'hidden';
document.getElementById('l6').style.visibility = 'hidden';
}
function pokaz2(){
document.getElementById('l0').style.visibility = 'hidden';
document.getElementById('l1').style.visibility = 'hidden';
document.getElementById('l2').style.visibility = 'visible';
document.getElementById('l3').style.visibility = 'hidden';
document.getElementById('l4').style.visibility = 'hidden';
document.getElementById('l5').style.visibility = 'hidden';
document.getElementById('l6').style.visibility = 'hidden';
}
function pokaz3(){
document.getElementById('l0').style.visibility = 'hidden';
document.getElementById('l1').style.visibility = 'hidden';
document.getElementById('l2').style.visibility = 'hidden';
document.getElementById('l3').style.visibility = 'visible';
document.getElementById('l4').style.visibility = 'hidden';
document.getElementById('l5').style.visibility = 'hidden';
document.getElementById('l6').style.visibility = 'hidden';
}
function pokaz4(){
document.getElementById('l0').style.visibility = 'hidden';
document.getElementById('l1').style.visibility = 'hidden';
document.getElementById('l2').style.visibility = 'hidden';
document.getElementById('l3').style.visibility = 'hidden';
document.getElementById('l4').style.visibility = 'visible';
document.getElementById('l5').style.visibility = 'hidden';
document.getElementById('l6').style.visibility = 'hidden';
}
function pokaz5(){
document.getElementById('l0').style.visibility = 'hidden';
document.getElementById('l1').style.visibility = 'hidden';
document.getElementById('l2').style.visibility = 'hidden';
document.getElementById('l3').style.visibility = 'hidden';
document.getElementById('l4').style.visibility = 'hidden';
document.getElementById('l5').style.visibility = 'visible';
document.getElementById('l6').style.visibility = 'hidden';
}
function pokaz6(){
document.getElementById('l0').style.visibility = 'hidden';
document.getElementById('l1').style.visibility = 'hidden';
document.getElementById('l2').style.visibility = 'hidden';
document.getElementById('l3').style.visibility = 'hidden';
document.getElementById('l4').style.visibility = 'hidden';
document.getElementById('l5').style.visibility = 'hidden';
document.getElementById('l6').style.visibility = 'visible';
}
</script>
Na samym końcu strony wstawiamy jeszcze takie coś:

<script>pokaz0();</script>
Pora na pozbieranie naszego menu:

<a href="javascript:pokaz1();">Link1</a>
<a href="javascript:pokaz2();">Link2</a>
<a href="javascript:pokaz3();">Link3</a>
<a href="javascript:pokaz4();">Link4</a>
<a href="javascript:pokaz5();">Link5</a>
<a href="javascript:pokaz6();">Link6</a>
I wyjaśnienie co do warstwy L0: jest to typowy wstęp na stronę, który pokaże się tylko raz, i przy każdym odświeżeniu strony to on załaduje się jako pierwszy.

Mam nadzieję, że nie jest to skomplikowane. Teraz przyjrzyjmy się temu z bliska:

Plusy
+ Po ściągnięciu pliku strony, można się rozłączyć, a witryna będzie działać.
+ Szybkość wyświetlania się danych
+ Dobre rozwiązanie na strony, które nie wymagają dużego nakładu pracy

Minusy
- Dokument zajmuje dosyć sporo miejsca - średnio wychodzi ok. 50 KB samego tekstu, ale wszystko zależy do webmastera.
- Wstawianie PHP mija się z celem
- Strona jest dłuuuuga - dosłownie - warstwy DHTML nie są widoczne, lecz długość okna przeglądarki uwzględnia ich obecność.
- Trudność przy edycji - trzeba szukać kawałka tekstu dosyć długo.