Ikut Belajar Blog

Assalamualaikum sahabat ikut Belajar Blog, tetap semangat yach, dipostingan sebelumnya kita sudah Belajar Membuat Link di HTML dengan Dreamweaver. kita lanjut dengan Belajar Membuat Desain Layout di Dreamweaver. ok langsung saja kt TKP

sebelum kita Membuat Layout di Dreamweaver kita harus membuat layout di Microsoft Word dulu biar kita lebih mudah mendesain Layoutnya.

Mendesain Word Layout di Microsoft Word

Buatlah  layout  atau  rancangnan  Website  di  Microsoft  word  menggunakan  table.  Pada umumnya sebuah website terbagi menjadi 4 bagian yaitu, Header, sidebar, content, footer

Mendesain Layout Di Dreamweaver

Dari hasil desain layout dari Microsoft word, masukkan atau desain kembali layout itu di dreamweaver. Namun sebelum memulai Buatlah Folder baru pada site yang telah kita pada awal pertemuan.

Langkah Mendesain Layout

Insert – table – atur property table sebagai berikut

Rows = 4 coloums= 2 Table width =900 px border thickness = 1 cellpadding = 0 cellspacing= 0 dan tekan OK, sehingga hasilnya seperti ini

Arahkan  kursor  pada  baris  1  kolom  1  dan  atur  pada  panel  properties  seperti berikut :

W (lebar) = 220 px dan H (tinggi) = 150 px.

Selanjutnya blok kolom 1 - 2 pada baris pertama – klik merges selected pada property. dan pada Bg berilau warna hijau

Sehingga Hasilnya Seperti Berikut

- Tempatkan kursor pada baris yang pertama terus ketikkan “HEADEE” dengan rata tengah.

-  Blok  kolom  1  dan  2  pada  baris  2  dan  gabung  dengan  menggunakan  merger selected seperti pada cara diatas, Bg ganti dengan warna hijau muda.

-  Selanjutnya bagian sidebar dan konten. Tempatkan kursor pada baris 3 kolom 1.Atur pada properties W= 220 H= 350. Ganti Bg menjadi kuning dan beri nama “Sidebar”

-  Selanjutnya tempatkan kursor pada baris 3 kolom 2, berilah nama “CONTENT”

- Untuk baris terakhir, blok kolom 1 dan 2 – merges selected – Bg diganti warna

hijau – kasih nama “FOOTER”

- hasil