Atau silahkan gunakan imajinasi anda untuk membuat layout website yang akan anda buat.Keterangan:Home adalah halaman awal websiteProfil dapat diisi mengenai profil andaBerita dapat diisi dengan berita pada hari iniGaleri dapat diisi gambar-gambar atau foto-foto kegiatanKontak dapat diisi alamat dan nomor telepon yang dapat dihubungi

Untuk membuat website tsb berikut langkah yang dapat dilakukan:Buka dahulu program Adobe DreamweaverLembar Kerja Adobe Dreamweaver

Untuk manajemen dalam membuat website, lakukan langkah berikut Klik Site -> New Site

Akan masuk jendela baru sbb:

pada kolom site name silahkan isikan nama situs anda, misal Latihan, untuk local site folder adalah letak menyimpan seluruh dokumen (file-file) website anda.

Klik tombol pada sebelah kanan, maka akan muncul lokasi untuk menyimpan seluruh file anda sbb

Sebagai contoh, lokasi di F:/Websiteku

Lihat pada sidebar kanan Adobe Dreamweaver anda maka akan muncul folder tempat anda menyimpan dokumen website anda

Sampai di sini anda sudah berhasil melakukan seting root dokumen untuk website anda

Next step, adalah membuat dokumen HTML untuk website kita

Klik pada menu File->New, lalu pilih Blank Page->HTML lalu klik Create

Langkah selanjutnya, kita akan membuat halaman utama, simpan file ini dengan nama index.html. Buat Layout utama (layout contoh 1) sebagai berikut:Buat tabel dengan cara klik Insert->table, gunakan parameter sbb:

klik OK maka akan muncul tampilan sbb:

Untuk menyesuaikan dengan layout 1, maka pada baris paling atas (untuk header) lakukan merge cell, dengan cara:

Maka akan menjadi:

Karena kita akan menggunakan banyak gambar, alangkah baiknya jika kita membuat folder khusus untuk lokasi penyimpanan gambar, dengan cara sbb:

Pilih New Folder, beri nama folder baru dengan nama gambar

Selanjutnya adalah buka direktori di F:/websiteku/gambar, copykan semua gambar ke folder tsb, contoh:

Setelah kita masukkan gambar ke folder gambar, kita cek pada dreamweaver pada area kerja seperti di bawah, lalu klik F5 (refresh) maka gambar yang sudah dikopi akan diload oleh dreamweaver sbb:

Pada contoh hanya ada 1 file gambar yaitu header.jpg karena sebelumnya hanya mengkopi 1 file gambar.Selanjutnya, kita simpan dahulu file ini dengan nama index.html dengan cara pilih menu File->Save

Selanjutnya kita masukkan gambar sebagai header dengan cara pada baris 1, kita sorot lalu pilih menu Insert->image sbb

Buka folder gambar

pilih file header.jpg, lalu klik OK, maka akan menjadi sbb:

Selanjutnya kita akan membuat menu utama di kolom 1 baris ke 2

Sesuaikan parameter seperti di atas (Horz: default, Vert:Top)Selanjutnya kita buat tabel pada cell tsb dengan cara pilih menu insert->table dengan parameter

Lanjutkan dengan membuat menu utama seperti berikut:

Selanjutnya kita akan membuat kode menggunakan tag . Tag ini untuk menentukan lokasi halaman yang muncul

Kita kembali ke split view, tuliskan tag berikut pada posisi lokasi iframe

Sampai di sini halaman utama sudah kita buat. Langkah selanjutnya adalah membuat konten sesuai dengan menu yang sudah kita tentukan.Nah, sebelumnya kita telah membuat sebuah tag iframe dengan atribut src=”welcome.html”, artinya ketika halaman index.html pertama kali diload/dibuka, maka iframe seharusnya berisi file welcome.html, jika kita lihat melalui browser (tekan F12) sbb:

muncul keterangan File not found, mengapa? karena kita belum membuat file dengan nama welcome.html. Lalu apa yang harus kita lakukan? yap, benar sekali kita harus membuat sebuah file baru lagi dengan namawelcome.html. Caranya, silahkan buat kembali dokumen HTML baru lalu simpan dengan nama welcome.html

setelah kita buat file welcome.html, kita buka kembali file index.html melalui browser:

Sekarang kita buat file selanjutnya, profil.html dimana file ini merupakan file yang akan dituju ketika tombol Profil pada Menu Utama diklik

Sekarang kita kembali ke halaman index.html, kita akan menautkan (link) tombol Profil ke file profil.html sbb:

Pada kolom Link, isikan: profil.html (artinya ketika tombol Profil diklik, maka halaman profil.html akan dibuka)Pada kolom Target, isikan: isiwebsite, mengapa? coba kita lihat kembali ke atas pada tag: lihat pada tag artinya file profil.html akan ditampilkan pada iframe isiwebsite, sehingga jika kita buka fileindex.html pada browser dan kita klik pada tombol Profil, maka: