Simple Web Page (Part 1)

Warning. Ini bukan tutorial. Saya hanya ingin berbagi ilmu yang saya punya dan semoga saja bisa diambil kebaiknya dan ditinggal keburukannya.

Kali ini saya pengen berbagi sedikit ilmu sama temen-temen yang pengen belajar bikin tema sendiri dari awal. Mulai dari yang basiiiic banget. Tapi maaf banget kalau bentuknya masih table (dimana table layout sudah ditinggalkan karena kekurangannya, maklum, saya juga masih belajar), artikel ini hanya untuk berbagi ilmu saja. Mohom diambil yang baik dan ditinggalkan yang buruk ya ^^. Maaf kalau misalnya udah basi tapi moga-moga saja bisa bermanfaat dan memberikan inspirasi :)

Program:
Adobe Photoshop
Notepad

Download:
bagiilmutema.zip (PSD, HTML) 112 kb

Pertama-tama, buat dulu layout dengan 2 kolom buat percobaan (download bahannya di sini), buat yang sederhana aja. Setelah itu layoutnya kita potong-potong sesuai dengan bagiannya dengan menggunakan Slice Tool (K), misalnya tempat saya bagi jadi 4 bagian header, divider, content, sama menu.

Kalo masih bingung masalah slicingnya, bisa disimak yang berikut ini (halah). Oia, supaya mudah, jangan lupa untuk memberi nama pada setiap potongan yang dibuat, caranya, klik kanan lalu klik Edit Slice Option dan isi box "Name"-nya.

Warna Pink: bagian banner/header web
Warna Biru: bagian content dan menu, tempat dimana kita bakalan nulis
Warna Kuning: bagian divider, pemisah

Kalau misalnya udah selesai, sekarang convert ke HTML dengan cara klik File » Save for Web and Devices lalu pilih Save, simpan dengan nama index.html. Jangan lupa Set as type: HTML and Images (*.html)

Nah sekarang buka index.html yang barusan kita save tadi dengan dreamweaver/notepad. Dan manfaatkanlah tools Find (CTRL + F) untuk langkah-langkah d bawah ini ^^

1. Pertama-tama carilah

<table id="Table_01" width="686" height="277" border="0" cellpadding="0" cellspacing="0">

lalu sisipkan align="center" dan hapuslah height="277" (untuk meratakan layout di tengah) di dalam tag <table> tersebut sehingga menjadi

<table align="center" id="Table_01" width="686" border="0" cellpadding="0" cellspacing="0">

2. Cari bagian banner

<td colspan="5"><img src="images/banner.jpg" width="686" height="157" alt=""></td>

Sisipkan height="157" ke dalam <td>, fungsinya agar panjang kolom si banner ini enggak berubah. Maka kode akhirnya akan berubah menjadi

<td colspan="5" height="157"><img src="images/banner.jpg" width="686" height="157" alt=""></td>

3. Lalu cari bagian content:

<td><img src="images/content.jpg" width="393" height="120" alt=""></td>

Tuliskan
width="393" (untuk mengatur kelebaran kolom),
bgcolor="#FFFFFF" (untuk mengatur warna background kolom),
valign="top" (untuk mengatur agar tulisan rata di atas, tanpa ini, tulisan akan melayang di tengah kolom)
dake dalam tag <td>.

Lalu hapus tag <img> sehingga gambarnya hilang (karena content.jpg kan gambarnya cuman putih semua, jadi fungsinya bisa diganti dengan cara ngatur bgcolor)

Sekarang coba tuliskan "Content Disini" di antara tag <td> </td> tadi untuk memberi tanda, Sehingga keseluruhan codenya berubah menjadi

<td width="393" bgcolor="#FFFFFF" valign="top">Content Disini</td>

4. Cari bagian menu (lagi)

<td><img src="images/menu.jpg" width="203" height="120" alt=""></td>

Langkahnya mirip dengan nomer 2, sisipkan width="203", valign="top", dan bgcolor="#FFFFFF" ke dalam tag <td>, hapus seluruh tag <img>, dan ketikkan "Menu Disini" di antara tag <td> </td> sehingga code akhirnya berubah menjadi

<td width="203" valign="top" bgcolor="#FFFFFF">Menu Disini</td>

5. Nah, sekarang giliran bagian dividernya,

Pertama, coba kita balik ke bagian content, tulisan "Content Disini" yang tadi kita buat coba diganti dengan kalimat yang panjaaaang banget sampai berbaris-baris bahkan berparagraf-paragraf. Dan perhatikan yang terjadi, ketiga bagian div-nya melayang, kan? Nah untuk menyiasati hal ini, coba cari div 1 dulu,

<td><img src="images/div1.jpg" width="33" height="120" alt=""></td>

lalu tulisan background="images/div2.jpg" dan width="33" ("menyontek" scr dan width dari image) di dalam tag <td> dan hapus tag <img>

lakukan juga langkah yang sama pada

<td><img src="images/div2.jpg" width="35" height="120" alt=""></td> dan
<td><img src="images/div3.jpg" width="22" height="120" alt=""></td>

Sehingga code akhir dari ketiga div setelah diubah adalah

<td background="images/div1.jpg" width="33"></td> ,
<td background="images/div2.jpg" width="35"></td> , dan
<td background="images/div3.jpg" width="22"></td>

Caranya adalah "semacam menyontek" atribut scr dan width dari tag <img> untuk atribut background dan width dari tag <td>

Nah, untuk sementara, kode keseluruhannya adalah seperti ini (klik untuk perbesar)

Lanjut ke Part 2 (CSS)»

Popularity: 12% [?]

Share and Enjoy: