RkBlog

Hardware, programming and astronomy tutorials and reviews.

Tworzenie stron internetowych za pomocą frameworka 960 CSS

Framework 960.gs to specjalny arkusz styli definiujący klasy wielokrotnego użytku, z których można w prosty sposób tworzyć układy strony na bazie siatki (grida) o długości (szerokości) 960 pikseli. Oto przykład używany jako demo tego frameworka:

grid1

Mając do dyspozycji 12 kolumny układ możemy stosować bloki (DIVy) o długości 60px i ich wielokrotności aż do zapełnienia się wiersza (np. dwa 460px bloki, 12 60px lub różne mieszane kombinacje). Dzięki temu możemy w prosty sposób tworzyć wielokolumnowe układy oparte o DIVy, a nie tabele. Oprócz tego framework ten ustawia także standaryzowane style dla niektórych tagów, czy np. stały zestaw czcionek (niweluje różne domyślne ustawienia różnych przeglądarek). Framework 960 CSS można stosować zarówno z XHTML 1.0, 1.1, jak i HTML5.

Pierwsze kroki z 960.gs

  • Pobieramy pakiet z frameworkiem
  • W katalogu code znajduje sie przykładowy plik demo.html prezentujący układy siatki i różne układy jej zapełnienia. Na bazie tego przykładu można dobrać sobie wymarzony układ strony.
  • By wykorzystać we własnym projekcie framework skopiuj po prostu pliki 960.css, reset.css i text.css z podkatalogu "css" i wykorzystaj je w szkielecie nowego szablonu, np:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Demo Grida 960</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/text.css" />
    <link rel="stylesheet" href="css/960.css" />
    </head>
    <body>
    
    <!--  tutaj będzie zawartość szablonu -->
    
    </body>
    </html>
    

Elementarz 960.gs

  • Stosując układ 12 kolumn całość umieszczamy w DIVie o klasie container_12, a dla 16 kolumnowych układów - container_16:
    <div class="container_12">...</div>
    
  • Elementami budowlanymi są DIVy o klasach od grid_1 do grid_12 (lub do grid_16 dla 16 kolumnowego), gdzie liczba oznacza ilość kolumn jakie dany DIV ma zająć, np:
    <div class="grid_1"><p>60px</p></div>
    <div class="grid_2"><p>120px</p></div>
    <div class="grid_3"><p>180px</p></div>
    
  • Do przejścia do nowego wiersza używamy klasy clear:
    <div class="clear"></div>
    
  • Każdy wiersz zapełniamy dowolną ilością grid_*, ale suma zajmowanych komórek musi być równa 12 (lub odpowiednio 16)

Przykładowy szablon

  • Cel: stworzy stronę dla fotografa. Strona ma zawierać:
    • Nagłówek z tytułem strony
    • Następnie wiersz z dwiema ostatnimi sesjami fotograficznymi
    • Wiesz z miniaturami-linkami do ostatnich galerii (12 miniatur)
    • Na dole wiersz z reklamami dobrych aparatów (4 aparaty)
  • W skrócie do zrobienia układ kolumn: 1, 2, 12, 4
  • Stosując framework kod sprowadza się do:
    <div class="container_12">
    	<div class="grid_12"><h1>Tytuł strony</h1></div>
    	
    	<div class="clear"></div>
    	
    	<div class="grid_6">
    		<h4>Sesja w Pieninach</h4>
    		<p>460px</p>
    	</div>
    	<div class="grid_6">
    		<h4>Natura w obiektywie</h4>
    		<p>460px</p>
    	</div>
    	
    	<div class="clear"></div>
    	
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="grid_1"><p>Miniatura 60px</p></div>
    	<div class="clear"></div>
    	
    	<div class="grid_3">
    		<h4>Nicon</h4>
    		<p>180px</p>
    	</div>
    	<div class="grid_3">
    		<h4>Practica</h4>
    		<p>180px</p>
    	</div>
    	<div class="grid_3">
    		<h4>Zorka</h4>
    		<p>180px</p>
    	</div>
    	<div class="grid_3">
    		<h4>Kodak</h4>
    		<p>180px</p>
    	</div>
    	<div class="clear"></div>
    	
    </div>
    
    Pierwszy wiersz zawiera jedną komórkę - grid_12 zajmującą całą jego długość i przeznaczony jest na tytuł strony. Drugi wiersz to dwie komórki grid_6 na opisy ostatnich sesji fotograficznych. Trzeci wiersz to dwanaście grid_1 na wspomniane miniatury. Ostatni wiersz to cztery komórki grid_3.
  • Nasz szablon wygląda (z zaznaczonym rozkładem kolumn) tak:
    grid2
    Za pomocą prostego kodu uzyskaliśmy szybko pożądany układ strony. Teraz wystarczy dodać własne klasy do poszczególnych DIVów, by nadać im własny styl (tło, grafiki), czy też wypełnić poszczególne DIV dodatkowym kodem XHTML rozmieszczającym tam treść.
  • Na net.tutsplus.com dostępny jest także tutorial przedstawiający wykonanie kompletnego szablonu z wykorzystaniem tego frameworka - Prototyping With The Grid 960 CSS Framework, Build a Newspaper Theme With WP_Query and the 960 CSS Framework. Sam framework jest np. wykorzystywany w komercyjnych szablonach Wordpressa przez WooThemes.
RkBlog

Podstawy tworzenia stron www, 23 September 2009, Piotr Maliński

Comment article