Salah satu tahap yang memakan waktu lama pada saat membangun sebuah website adalah ketika membuat desain visual website (mockup) dan mengkonversi desain visual tersebut ke dalam CSS dan XHTML. Pada tutorial yang terdahulu (Tutorial Dasar Desain Website dengan Grid System), telah dijelaskan bagaimana mendesain website menggunakan CSS Framework. CSS framework digunakan karena mampu mempercepat proses pembuatan desain visual website dan juga konversi desain visual website tersebut ke dalam CSS dan XHTML. Hal ini dikarenakan sudah ada panduan yang disediakan oleh CSS framework, baik ketika melakukan proses pembuatan desain visual maupun ketika mengkonversi desain visual tersebut ke dalam CSS dan XHTML. Tutorial ini akan menjelaskan langkah-langkah dasar membangun layout website dengan memanfaatkan CSS Framework (960 Grid System varian 12 kolom dengan lebar masing-masing kolom 60 piksel) dan XHTML. Desain Website yang akan dikonversi menjadi dokumen CSS dan XHTML adalah sebagai berikut:

VisualMagz Mockup dengan Grid System

Step 1
Langkah pertama adalah mendownload template 960 Grid System dari situs resminya (http://960.gs/files/960_download.zip). 960 Grid System adalah CSS framework yang dikembangkan oleh Nathan Smith dan menggunakan lebar kolom 960 piksel. CSS framework ini memiliki 2 varian yaitu varian 12 kolom dengan lebar masing-masing kolom 60 piksel dan varian 16 kolom dengan lebar masing-masing kolom 40 piksel, dimana setiap kolomnya memiliki lebar 10 piksel.

Step 2
Stelah berhasil didownload, maka langkah berikutnya adalah memanggil 960 Grid System dari dokumen XHTML yang telah dibuat. Proses pemanggilan 960 Grid System dapat dilakukan dengan menambahkan tags berikut ini ke dalam bagian head dari dokumen XHTML*:

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />

* Catatan:
Nilai atribut href tergantung lokasi file 960 Grid System dan file dokumen XHTML yang telah dibuat.

Pemanggilan 960 Grid System juga dapat dilakukan melalui dokumen CSS dengan menggunakan perintah @import seperti berikut:

@import url(css/reset.css);
@import url(css/text.css);
@import url(css/960.css);

Step 3
Layout dapat dibuat dengan terlebih dahulu memanggil class selector CSS container dengan format container_XX di mana XX menyatakan varian yang dipakai (container_12). Setelah itu kita tinggal memanggil class selector CSS grid dengan format grid_XX untuk membuat kolom-kolomnya. Jika ingin menghilangkan margin kiri dari suatu kolom, dapat dilakukan dengan menambahkan alpha (grid_XX alpha). Sedangkan untuk menghilangkan margin kanan dapat dilakukan dengan menambahkan omega (grid_XX omega). Untuk membuat layout sesuai dengan desain yang telah dihasilkan pada tutorial sebelumnya, maka kode/tags XHTML-nya adalah sebagai berikut:

<div class="container_12">
<!-- Header Section -->
<div id="header" class="grid_12">
...
</div>
<!-- End of Header Section -->

<!-- Main Section -->
<div id="delicious" class="grid_3">
...
</div>
<div id="content" class="grid_6">
...
</div>
<div id="gallery" class="grid_3">
...
</div>
<!-- End of Main Section -->

<!-- Footer Section -->
<div id="footer" class="grid_12">
...
</div>
<!-- End of Footer Section -->
</div>

Kode/tags di atas sudah menyertakan atribut id untuk setiap bagian layout yang nantinya akan diatur style-nya melalui kode CSS.

Step 4
Setelah layout terbentuk, maka langkah selanjutnya adalah menambahkan elemen yang dibutuhkan ke dalam bagian dokumen XHTML dan mengatur style-nya melalui CSS. Untuk bagian header, elemen yang ditambahkan adalah image logo Visualmagz. Berikut ini adalah kode XHTML dan CSS untuk bagian header:

XHTML

<img src="images/visualmagz-logo.png" alt="VISUALmagz: Your Creative Booster" />

CSS

#header {
margin-top: 20px;
margin-bottom: 20px;
border-bottom: 5px solid #cc9966;
}

Untuk bagian delicious (sidenotes), elemen yang ditambahkan adalah heading dan list untuk menampilkan item sidenotes. Berikut ini adalah kode XHTML dan CSS untuk bagian delicious:

XHTML

h2>Delicious</h2>
<ul>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
</ul>

CSS

#delicious {
float: left;
}
#delicious h2 {
color: #6b000a;
margin: 0px;
padding: 0px;
font: normal 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
border-bottom: 3px solid #cccccc;
}
#delicious ul {
margin:0px;
padding:0px;
background-color: #f0f0f0;
border-bottom: 3px solid #cccccc;
}
#delicious ul li {
margin: 0px;
padding: 5px 5px 0 10px;
font: bold 12px Arial, Helvetica, sans-serif;
text-align:left;
list-style:none;
display:block;
color: #000;
}
#delicious ul li a {
text-decoration:none;
color:#000000;
}
#delicious ul li p {
padding: 0 0 5px 0;
font: normal 11px Arial, Helvetica, sans-serif;
border-bottom: 1px solid #ffffff;
}

Untuk bagian content, elemen yang ditambahkan adalah heading untuk judul artikel, keterangan tentang publikasi artikel (meta data), thumbnail image yang mewakili artikel, dan paragraph yang berisi artikel. Berikut ini adalah kode XHTML dan CSS untuk bagian content:

XHTML

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<div class="meta">Published: 26 March 2008 - Category: Music</div>
<div class="thumb">
<img src="images/thumbnail.png" />
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac elit cursus eros blandit cursus. Mauris non justo. Etiam interdum euismod nisi. Mauris nec turpis. Nunc eleifend diam sed nisl. Vestibulum convallis sagittis erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at ipsum. Nullam odio sem, pellentesque vitae, fermentum eu, feugiat eget, felis. Pellentesque habitant morbi</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac elit cursus eros blandit cursus. Mauris non justo. Etiam interdum euismod nisi. Mauris nec turpis. Nunc eleifend diam sed nisl. Vestibulum convallis sagittis erat.</p>

CSS

#content {
float: left;
}
#content h2 {
margin: 0px;
padding: 0px;
font: normal 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
border-bottom: 3px solid #cccccc;
width: auto;
color: #6b000a;
display:block;
}
#content .meta {
font: normal 11px Arial, Helvetica, sans-serif;
color: #999999;
border-bottom: 1px solid #cccccc;
padding: 5px 0 5px 10px;
background-color: #f0f0f0;
}
#content p {
font: normal 12px Arial, Helvetica, sans-serif;
line-height: 150%;
}
#content .thumb {
margin: 10px 0 5px 0;
padding: 0px;
}
#content .thumb img {
width: 120px;
float: left;
margin-right: 10px;
padding: 4px;
border: 1px solid #cccccc;
}

Untuk bagian gallery, elemen yang ditambahkan adalah heading dan gambar. Berikut ini adalah kode XHTML dan CSS untuk bagian gallery:

XHTML

<h2>Galleries</h2>
<div class="separator"></div>
<div class="gallery_thumb">
<img src="images/thumbnail.png" />
<img src="images/thumbnail.png" />
<img src="images/thumbnail.png" />
</div>

CSS

#gallery {
float: left;
}
#gallery h2 {
margin: 0px;
padding: 0px;
font: normal 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #6b000a;
display:block;
}
#gallery .separator {
height: 32px;
background: transparent url('../images/separator.png') no-repeat top left;
}
#gallery .gallery_thumb {
margin: 10px 0 5px 0;
padding: 0px;
}
#gallery .gallery_thumb img {
width: 190px;
float: left;
margin: 4px 10px 0 0;
padding: 4px;
border: 1px solid #cccccc;
}

Untuk bagian footer, elemen yang ditambahkan adalah paragraph. Berikut ini adalah kode XHTML dan CSS untuk bagian footer:

XHTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac elit cursus eros blandit cursus.<br />
&copy; 2009 VISUALmagz.com</p>

CSS

#footer {
margin: 10px 0 0 10px;
height: 88px;
background-color: #cc9966;
}

#footer p {
padding: 25px;
font: normal 12px Arial, Helvetica, sans-serif;
line-height: 150%;
}

Hasil Akhir
Hasil akhir dari tutorial ini dapat dilihat di sini.