Przykład dziesiąty: Layout z nifty

Dobrnęliśmy więc do ostatniego przykładu, layoutu używającego zaokrąglonych narożników. Naprawdę sprawiło mi wiele radości przygotowanie tego przykładu bez użycia obrazków, tylko nifty corners. W tym przypadku nie użyłem osadzonego CSS’a lub skryptu Java. Sekcja nagłówka zawiera następujące linie:

<link rel="stylesheet" type="text/css" href="niftylayout.css">
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript" src="layout.js"></script>

Plik layout.js zawiera wszystkie wywołania skryptu Java, zobaczmy zawartość:

 
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#header","bottom","#D6DEEC","#84B7FF","smooth");
Rounded("div#header h1","bottom","#84B7FF","#657DA6","small smooth");
Rounded("div#content","tl bottom","#D6DEEC","#FFF","smooth");
Rounded("div#nav","tr bottom","#D6DEEC","#95B3DE","smooth");
Rounded("div#sidenotes","all","#D6DEEC","#B1C0D5","smooth");
Rounded("form","all","#D6DEEC","#B4CEF7","smooth");
Rounded("blockquote","tr bl","#FFF","#CDFFAA","border #88D84F");
Rounded("div#relax","all","#FFF","transparent");
Rounded("div#footer","all","#D6DEEC","#CCCCCC","small border #fff");
}

Dobrą praktyką jest w rzeczy samej unikanie używania osadzania skryptów Java lub CSS w sekcji nagłówka. Jedna rzecz o ostatnim przykładzie: ciekawostką jest że uzyskaliśmy grube "nifty corners" wokół nagłówka poprzez zaokrągenie jednocześnie nagłówka i h1 wewnątrz nagłówka.

Zanim zakończymy: Spróbuj zobaczyć jak będzie wyświetlana strona z wyłączonym skryptem Java, aby zobaczyć jak zatraca się jej wdzięk. Przygotowując ten przykład, zacząłem włąśnie od takiego projektu.