Merancang Website ( Full Abis ) Part 5

March 27th, 2007 by dr.emi

Langkah Editing Layout

Menggunakan Macromedia DreamWeaver

Macromedia Dreamaweaver merupakan tool pengolah web yang paling cerdas menurut gue. Karena hingga saat ini penulis merasa sangat terbantu secara optimal dan belum ada yang mampu menyaingi Tool ini kalo dilihat dari fiture keseluruhannya.

Pada kasus ini gue cuma akan membahas penggunaan Dreamweaver dari segi Editing dan Organisasi Webnya saja.

1. Mulailah dari proses Management Site. Pilih Site > Manage Site pada Dreamweaver.

2. Nanti bakal muncul jendela Manage Site. Lalu pilih New untuk membuat Situs baru.

Nah akan muncul lagi Window baru “Site Definition”

Ketik nama Website Lu misalnya “Website Gue”

Pada kolom Website http://……bisa dikosongkan karena kali ini kita tidak akan membahas pembuatan website under Root Server. Pilih NEXT

Pilih “No, I Do not want to use a server technology” – NEXT

Pilih “Edit Local copies on my machine, then ….dstrusnya” , dan klik icon Folder tempat penyimpanan folder situs Anda (dalam hal ini hasil optimize yang lu buat tadi dari Image Ready) – NEXT

Pilih No, do not enable check in and check out – NEXT

Terakhir akan muncul konfirmasi hasil sementara perancangan manajemen situs baru lu, Lu klik deh tombol DONE nya. Selesai dee..

Aduuuh ngantuk gue

3. Selanjutnya pilih File > Open = index.html (file situs) atau bisa juga melalui double klik pada Panel Files yang sebelah kanan.

4. Ubah ke Mode Layout dengan mengklik tombol Layout seperti di bawah ini…

Klik dulu, lalu akan muncul pilihan mode tampilan dokumen web. Pilih Layout.

Secara otomatis Tab tombol utama layout akan muncul tepat disebelah kanan Tombol pilihan Layout tadi.

Pilih Tab Layout

5. Dengan memilih Tab Layout Dokumen diatas, maka akan muncul tampilan garis2 pemisah slice yang kita buat di Image Ready sebelumnya. Garis2 ini merupakan table2 yang telah diciptakan oleh Imageready dalam kode2 HTML nya saat kita mengexport Dokumen gambar design webnya. Cerdas bukan yang bikin Tool Adobe nya ??? hakhakhak….

6. Nah lu sekarang tinggal klik + [DELETE] aja bagian image nomor 1 dan 2, karena nantinya akan kita isi dengan konten website

7. Sebagai contoh di bagian nomor dua lu [CTRL + KLIK] pada kotak slice berwarna birunya baru lu pilih warna backgroundnya pada Properties Panel (dibagian bawah)

Sentuh warna background pada gambar lainnnya dengan mouse untuk mengambil sample warna.

8. Setelah kedua bagian konten lu kasi warna background lu tinggal isi deee website lu pake apa yang lu mau…Mau Text boleh mau gambar lagi boleh…suka2 lu deee. nama Website nya juga kan “Website Gue” hehekeehehekehehe….Ntar yee gue pipis dulu dah jam 1:00 malem niii

Hal. 1 – 2 – 3 – 4 – 5 – 6

Share on Facebook