Saya design web pakai photoshop cs, kemudian di slice dan di save dengan ext .html.
halaman web terdiri dari header(atas) links menu(kiri) dan content(kanan). Kemudian saya pakai Dreamweaver 8 sebagai editor.

Yang saya mau tanyakan:
1. kenapa setiap kali content saya enter jauh kebawah gambar2 di bagian kiri pun ikut turun sehingga tampilan gambar jadi acak2an ?
2. bagaimana supaya ketika content di enter jauh tidak berpengaruh apapun kepada bagian kiri(links menu) atau pun sebaliknya?

Atas jawabannya terimakasih.

Jawaban:
Apabila Anda melakukan slice di Photoshop dan di export dalam format .html, biasanya potongan images akan disusun menggunakan tabel oleh photoshop. Permasalahan yang Anda hadapi sebenarnya hanya sepele, hanya saja Anda belum paham tentang sifat tabel dalam desain web, tabel terdiri dari 2 bagian yaitu kolom dan baris.
Mungkin contoh layout tabel berikut sama seperti permasalahan yang sedang Anda hadapi:

Hanya satu hal yang belum Anda pahami adalah bahwa, apabila dua buah kolom, salah satunya kemudian di isi kontent (pada bagian kanan seperti pada contoh) maka kolom yang kiri akan ikut sesuai dengan tinggi kolom kanan. Secara default, perataan objek yang ada di dalam sebuah kolom (dalam hal ini kolom kiri) adalah berada di KIRI secara horisontal (align left) dan TENGAH secara Vertikal (middle). Artinya agar kolom yang kiri ketika di isi berada di kiri dan atas (seperti contoh tabel di bawah) maka yang harus Anda lakukan adalah mengatur perataan di dalam kolom/baris tersebut.

Caranya: Gunakan Dreamweaver, Klik pada kolom/baris tersebut (kolom kiri, kalau ada image jangan klik pada image-nya), lihat pada panel Properties (biasanya berada dibagian bawah pada Dreamweaver dan sebagian besar produk Macromedia) terdapat option HORZ dan VERT, untuk HORZ: LEFT dan VERT: TOP maka permasalahan Anda akan teratasi.

Lakukan juga untuk kolom atau baris lainnya, termasuk kolom kanan walaupun tidak begitu berpengaruh, hal ini untuk antisipasi apabila isi kolom kiri lebih banyak dari kolom kanan.

Saran saya buat Anda yang sering melakukan slice di Photoshop CS ataupun menggunakan Macromedia Fireworks (Saya lebih suka pake yang ini ! ), ketika melakukan export, jangan meng-export file .html nya, pilih opsi Image Only, kemudian baru Anda bikin sendiri layout tabelnya di Dreamweaver sesuai dengan bentuk slice Anda tadi. Dengan begitu Anda bisa mengontrol bentuk tabel serta ukurannya, baik untuk baris maupun kolom tabel Anda.

This entry was posted on Tuesday, October 10th, 2006 at 23:03:34 and is filed under Web Design, Tutorials, Sehari - hari. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.