Tutorial ini merupakan kelanjutan dari tutorial yang sudah di buat oleh Richard Fang di situs Jurus Grafis dengan judul Merancang Desain Website Seperti Kartunama. Saya tertarik untuk menjawab permintaan Richard di akhir tutorialnya.

Bagi yang berbaik hati ingin mengkoding website kartunama ini silakan, tolong beritahu saya dan kita bisa bagikan gratis kepada para pembaca Jurus Grafis, mau sekalian di buat tutorial koding nya di blog kamu juga boleh. :) …

Mungkin Anda bertanya-tanya mengapa website menggunakan format kartunama? Seperti yang disampaikan oleh Richard di tutorialnya, sekarang ini website dengan format kartu nama sedang tren karena gaya visualnya yang biasanya minimalis dan to the point. Sehingga waktu loading yang di butuhkan lebih cepat di banding website portfolio biasa. So, selamat menikmati dan mencoba tutorial ini.

Langkah 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.

Langkah 2

Setelah 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);

Langkah 3

Layout dapat dibuat dengan terlebih dahulu memanggil class selector CSS container dengan format container_XX di mana XX menyatakan varian yang dipakai. Pada tutorial kali ini, varian yang akan digunakan adalah 12 kolom (mengikuti desain mockup yang telah di buat).  Pada kasus website dengan format kartu nama, kita tidak akan menggunakan ke-12 kolom yang ada. Pada kasus ini, kita hanya akan menggunakan 6 kolom sebagai kontainer dari website.

Karena hanya 6 kolom yang digunakan, maka kita perlu ’menghilangkan’ kolom sisanya, baik di kiri maupun kanan (ingat, container yang kita gunakan adalah 12 kolom). Hal ini dapat dilakukan dengan menambahkan nilai prefix_XX (prefix_3) dan suffix_XX (suffix_3) pada atribut class dari grid_6. Selain itu, kita juga harus menghilangkan margin yang ada di samping kiri dan kanan dari grid_6. Untuk melakukan hal ini, kita tinggal menambahkan nilai alpha dan omega. Berikut ini adalah code XHTML untuk grid system.

<div class="container_12">
    <div class="grid_6 alpha omega prefix_3 suffix_3">
        …
    </div>
</div>

Langkah 4

Setelah selesai menentukan layout dengan menggunakan 960 Grid System, maka langkah selanjutnya adalah mengidentifikasi struktur dari website. Pada contoh kasus ini, struktur website akan saya bagi menjadi 3, yaitu header, main dan footer. Header akan digunakan untuk konten menu. Main digunakan untuk konten utama (about, works, dan contact). Footer digunakan untuk konten footer (copyright).

Berikut ini adalah code XHTML untuk struktur konten website (diletakkan di dalam div grid_6).

<div class="header">
   ...
</div>
<div class="main">>
   ...
</div>
<div class="footer">>
   ...
</div>

Langkah 5

Langkah selanjutnya adalah membuat dokumen XHTML dan CSS rule untuk bagian header yang digunakan untuk konten menu. Untuk membuat konten menu, saya menggunakan unordered list. Unordered list ini akan diletakkan di dalam layer menu (div id=”menu”). Code XHTML-nya adalah sebagai berikut.

<div id="menu">
   <ul>
      <li><a href="index.html">About</a></li>
      <li><a href="works.html">Works</a></li>
      <li><a href="contact.html">Contact</a></li>
   </ul>
</div>

CSS rule yang dibuat untuk mengatur header ada beberapa bagian. Bagian pertama digunakan untuk mengatur area header yang diatur dengan menggunakan class selector header. CSS property yang digunakan adalah untuk mengatur margin, lebar, tinggi dan background dari bagian header. Code CSS rulenya adalah sebagai berkut.

.header {
    margin-top: 145px;
    background: url(../images/header-card.png) no-repeat;
    width: 500px;
    height: 60px;
}

Setelah membuat CSS rule untuk bagian header, maka langkah selanjutnya adalah membuat CSS rule untuk konten menu. Yang pertama adalah membuat CSS rule untuk layer menu.

#menu {
   width: 460px;
   margin-left: 20px;
   padding: 0px;
}

Kemudian dilanjutkan dengan membuat CSS rule untuk mengatur menu yang dibuat dengan unordered list. Agar list item yang ada penyajiannya tidak menurun (inline) seperti list item biasa, maka digunakan CSS property float dengan nilai left. Selain itu juga harus di atur agar list item tidak ditampilkan dengan bullet standar, dengan menambahkan CSS property list-style-type dan dengan nilai none.

ul {
   margin: 0px;
   padding: 0px;
}
ul li  {
   float: left;
   width: 134px;
   height: 31px;
   list-style-type: none;
   margin: 22px 0 0 15px;
   text-align: center;
   font: bold italic 15px Georgia;
   background: url(../images/bg-menu.png) no-repeat;
   padding-top: 4px;
}

Konten menu digunakan sebagai hyperlink, maka perlu diatur juga bagaimana CSS rule untuk menunjukkan menu yang sedang aktif. Code CSS-nya adalah sebagai berikut.

ul li a {
   text-decoration: none;
   color: #fff;
}
ul li.aktif {
   background: url(../images/bg-menu-aktif.png) no-repeat;
}

Hasil langkah ini adalah sebagai berikut

Langkah 6

Setelah bagian header selesai, langkah selanjutnya adalah membuat dokumen XHTML dan CSS rule untuk bagian main. Bagian ini akan digunakan untuk konten utama (about, works, dan contact). Untuk konten about terdiri dari elemen image, heading dan paragraf. Code XHTML untuk konten about adalah sebagai berikut.

<div id="content">
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <h1>Halo Teman!</h1>
   <p>Nama saya <strong>Richard Fang</strong>, sangat menikmati proses rancang website, khusus nya dari sisi tampilan antar muka dan penggunaan.</p>
   <p>Tidak bisa hidup tanpa Gmail, Google Reader dan Twitter. Sering menghabiskan waktu mengarungi samudra informasi.</p>
</div>

Bagian konten works digunakan untuk menampikan portfolio yang berupa gambar dan navigasi. Code XHTML-nya adalah sebagai berikut.

<div id="content">
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <div id="nav">
      <img src="images/btn-prev-off.png" alt="Prev" />
      <img src="images/btn-next.png" alt="Next" />
   </div>
</div>

Bagian konten contact digunakan untuk menampikan formulir bagi pengunjung jika ingin mengirimkan pesan. Code XHTML-nya adalah sebagai berikut.

<div id="content">
   <h1>Kirim Pesan</h1>
   <form>
      <p><label for="name">Name</label>
         <input type="text" size="46" /></p>
      <p><label for="email">Email</label>
         <input type="text" size="46" /></p>
      <p><label for="message">Message</label>
         <textarea rows="5" cols="35"></textarea></p>
      <input type="submit" value="Send!" />
   </form>
</div>

CSS rule yang dibuat untuk mengatur bagian main ada beberapa bagian. Bagian pertama digunakan untuk mengatur area main yang diatur dengan menggunakan class selector main. CSS property yang digunakan adalah untuk mengatur padding, lebar, tinggi dan background dari bagian main. Code CSS rulenya adalah sebagai berikut.

.main {
   background: url(../images/bg_content.png) no-repeat;
   height: 330px;
   width: 500px;
   padding-top: 10px;
}

Bagian selanjutnya adalah CSS rule untuk mengatur bagian layer content. Code CSS rulenya adalah sebagai berikut.

#content {
   background: url(../images/bg-content.png) no-repeat;
   width: 426px;
   margin-left: 35px;
   padding: 10px 20px 20px 20px;
}

Selanjutnya adalah CSS rule yang digunakan untuk mengatur elemen dari dokumen XHTML yang ada dimasing-masing dokumen. Untuk dokumen about terdiri dari image, heading dan paragraf. Code CSS rulenya adalah sebagai berikut.

img {
   width: 150px;
   height: 200px;
   border: 4px solid #fff;
   float: left;
   margin-right : 10px;
   margin-bottom: 4px;
   margin-top: 4px;
}

h1 {
   font: bold 36px Geogia;
   color: #c13a3a;
}

p{
   font: normal 14px Geogia;
   color: #989898;
   padding-right: 20px;
   margin: 14px;
}

strong {
   color: #000;
}

Untuk dokumen works terdiri dari image (thumbnail) dan navigasi. Code CSS rulenya adalah sebagai berikut.

.thumb {
   border: none;
   margin: 0px;
   padding: 4px;
   float: left;
   width: 90px;
   height: 222px;
}

#nav {
   clear: both;
   width: 426px;
   padding-top: 10px;
}

.left {
   width: 15px;
   height: 25px;
   float: left;
   border: none;
}

.right {
   width: 15px;
   height: 25px;
   float: right;
   border: none;
   margin-right: 35px;
}

Untuk dokumen contact terdiri dari elemen label, input, dan text area. Code CSS rulenya adalah sebagai berikut.

label {
   float: left;
   width: 70px;
}

input, textarea {
   padding: 3px;
   border: 1px solid #989898;
}

.button {
   border: none;
   float: right;
   margin-right: 40px;
   font: bold 16px Geogia;
   color: #fff;
   width: 75px;
   height: 32px;
   background: url(../images/bg-button.png) no-repeat;
}

Hasil dari langkah ini adalah sebagai berikut.

Langkah 7

Langkah terakhir adalah membuat dokumen XHTML dan CSS rule untuk bagian footer. Code XHTML untuk konten footer adalah sebagai berikut.

<div>
   <p>&copy; 2009 Jurus Grafis. All Rights Reserved.</p>
</div>

CSS rulesnya adalah sebagai berikut.

.footer p {
   margin-top: 10px;
   text-align: center;
   font: 14px Geogia;
   color: #989898;
}

Hasil akhirnya adalah sebagai berikut

Preview hasil tutorial dapat Anda lihat dengan mengklik di sini, dan untuk mendownload filenya silahkan klik di sini.