Budi Aji's Website - Detail Post

Membuat Website dengan Dreamweaver

Kali ini saya menulis mengenai pembuatan halaman website dengan menggunakan Dreamweaver. Alasan saya menggunakan Dreamweaver adalah, software ini memang dibuat untuk memudahkan kita dalam membuat halaman website. Kita tidak perlu terlibat banyak dalam pengetikkan sintaksis HTML secara langsung. Tapi cukup dengan metode drag n drop saja kita sudah bisa membuat halaman website dengan baik.

Tulisan ini untuk siapa?

Untuk anda yang sudah mengetahui dasar HTML

Tujuan Tulisan

Dapat membuat halaman website dengan software Dreamweaver

Persiapan dan Tools

Macromedia Dreamweaver atau Adobe Dreamweaver
Browser

Sebelum kita mulai, pastikan di komputer Anda sudah terinstal Dreamweaver. Di tulisan ini saya tidak membahas mengenai instalasi software Dreamweaver. Jadi saya menganggap bahwa software Dreamweaver sudah terinstal di komputer anda.

Pertama - tama, buka Dreamweaver pada komputer Anda. Kurang lebih tampilannya seperti berikut.

Lalu buat dokumen HTML baru dengan memilih menu File > New atau dengan menggunakan Ctrl+N. Dengan sekejap window baru akan terbuka dengan judul "New Document". Window ini adalah wizard yang berguna untuk memandu anda dalam membuat dokumen baru. Pada daftar Category, pilih "Basic Page". Pada daftar Basic Page(yang berada di sebelah kanan) pilih "HTML". Setelah itu klik tombol "Create", maka dokumen baru akan muncul.

Ketika dokumen baru telah dibuat, Dreamweaver menyediakan 3 jenis mekanisme dalam pembuatan halaman website antara lain adalah Code, Split dan Design. Code ditujukan untuk Anda yang familiar dengan sintaksis HTML. Design ditujukan untuk Anda yang tidak familiar dengan sintaksis HTML. Sedangkan Split ditujukan untuk menggunakan kedua - duanya.

Pilih mode Design. Kali ini kita akan membuat dasar layout HTML. Pada dasarnya dokumen HTML bisa didesain dengan menggunakan pola tabel. Ada juga yang menggunakan tag div. Tapi untuk kali ini kita akan mencoba mendesain dengan menggunakan tabel.

Pilih "layout" pada pilihan kontrol, lalu pilih icon tabel untuk membuka settingan tabel yang akan dibuat. Masukkan nilai 1 pada field Rows, nilai 1 pada field Column dan seterusnya seperti yang terlihat pada gambar. Tabel ini akan digunakan sebagai kerangka dasar desain berikutnya. Tabel ini akan berisi satu baris dan satu kolom. Jadi dalam pembuatan hadalam website dengan menggunakan tabel menggunakan konsep baris dan kolom.

Setelah tabel pertama sudah tampil, arahkan kursor ke dalam tabel yang memiliki satu baris dan satu kolom. Lalu lakukan hal yang sama untuk membuat tabel lagi seperti tabel yang pertama. Hana saja parameter yang dimasukkan sedikit berbeda yaitu Rows diisi 3 dan kolom diisi 1 dan seterusnya seperti yang pada gambar Tabel ini akan menampilkan 3 baris dan satu kolom, yang berarti baris pertama akan digunakan sebagai Header, baris kedua digunakan sebagai Content dan baris ketiga digunakan sebagai Footer dari halaman website.

Berikutnya arahkan kursor pada bagian yang akan digunakan sebagai Content yaitu tabel pada baris kedua. Tambahkan tabel pada baris tersebut, setting parameter Rows dengan 1 dan Columns dengan 2. Perlu diperhatikan bahwa tabel ini berisi 2 kolom, kolom yang pertama akan digunakan sebagai Menu, dan kolom yang satunya digunakan sebagai Isi dari halaman website.

Arahkan kursor ke kolom yang pertama dari tabel Content. Yang harus dilakukan adalah sedikit mengecilkan panjang dari kolom yang akan digunakan sebagai Menu. Jika kursor sudah berada di dalam kolom, tekan Ctrl+F3 untuk membukan window properties dari kolom tersebut. Setting field Width pada properties dengan nilai 150, tekan enter untuk melihat hasilnya. Lalu perhatikan, kolom Menu akan mengecil dibandingkan kolom satunya lagi.

Selanjutnya berikan text pada masing - masing bagian dengan cara arahkan kursor pada kolom yang dimaksud dan ketikkan kalimat "Logo" pada bagian Logo, "Menu" pada bagian Menu, "Content" pada bagian Content dan "Footer" pada bagian Footer. Hasilnya seperti gambar dibawah.

Langkah selanjutnya adalah, sedikit melebarkan wilayah content dengan cara setting tinggi dari tabelnya. Arahkan kursor ke kolom Content, lalu klik icon segitiga terbalik dekat tulisan 100%, lalu pilih "Select Table". Fitur tersebut memudahkan kita dalam memilih tabel yang dimaksud, khususnya tabel yang berada di dalam tabel. Pastikan dalam kondisi tabel terpilih, tekan Ctrl+F3 untuk membuka window properties(jika properties belum muncul), setting field Height dengan nilai 400. Yang berarti tabel tersebut memiliki tinggi 400 pixel..

Jika anda mengikuti langkah - langkah diatas dengan benar maka tampilan yang akan tampil pada layar adalah seperti berikut.

Langkah terakhir yang harus dilakukan adalah simpan dokumen HTML dengan menekan Ctrl + S, maka window untuk melakukan penyimpanan file akan tampil. Beri nama "home.html" lalu tekan tombol Save. Setelah dokumen berhasil di simpan, tekan F12 untuk melihat hasilnya yang akan tampil pada browser.