Dreamweaver Layout 1

Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 1)

---

Banyak orang yang pertama kali menggunakan Adobe Dreamweaver sebelum mulai mencoba sudah merasa terintimidasi karena mungkin bingung dengan banyaknya panel dan fitur yang ada di dalamnya. Jujur saja pertama kali saya menggunakan aplikasi ini memang merasa demikian.

Jika anda merasa demikian, jangan khawatir.. nggak usah takut, namanya juga masih belajar seperti saya ini. Dimana-mana dalam melakukan suatu hal baru yang kompleks pasti tidak ada yang dapat dilakukan dalam waktu singkat. Yang penting berani mencoba, terus belajar dan jangan dikerjakan setengah-setengah, nanti hasilnya pasti setengah-setengah juga. OK langsung mulai saja, sebelum ada baiknya anda membuat satu folder untuk menyimpan file-file yang akan anda buat. Beri nama folder tersebut dengan nama terserah anda contoh 'project', kemudian buka adobe dreamweaver. Setelah terbuka lihat menu bagian atas, klik pada menu 'Site' kemudian klik 'New Site', klik tab 'Advanced'. Pada bagian 'Site name' isikan nama project yang akan anda buat, contoh 'project'. Pada kotak isian 'Local root folder' klik pada logo folder disebelah kanannya dan arahkan pada folder tempat menyimpan file yang baru saja anda buat, contoh 'C:\My Document\project\'. 'Default images folder' arahkan pada folder di dalam folder tempat menyimpan file anda contoh 'C:\My Document\project\images\'. Klik OK.

Nah sekarang pada halaman pembuka dreamweaver klik pada menu 'File' di pojok kiri atas dan pilih 'New' atau supaya lebih cepat gunakan shortcut keybord windows dengan menekan 'Ctrl + N'. Setelah terbuka kotak dialog 'New Document', pada kolom 'Page Type:' pilih 'HTML', 'Layout' pilih 'none', kemudian tekan OK. Lembar kerja HTML baru anda sudah keluar, simpan lembar kerja tersebut dengan nama 'index.html'. Secara otomatis dokumen ini akan tersimpan di root folder anda (project), karena site project yang sedang aktif (sedang anda buka) adalah site 'project'. Dapat anda lihat pada panel sebelah kanan bagian tab 'Files' akan terdapat file HTML dengan nama index yang baru saja anda simpan.

Sekarang buat file CSS untuk layout yang akan anda buat, ikuti langkah-langkahnya seperti di bawah ini:

1. Pada tab bagian atas pilih tab 'Common', selanjutnya klik pada 'Insert Div Tag' untuk lebih jelasnya dapat anda lihat gambarnya seperti di bawah ini:
   
2. Setelah anda klik akan keluar dialog 'Insert Div tag', pada bagian 'Insert' pilih 'At insertion point' dan yang lainnya biarkan saja kosong, kemudian klik pada tombol 'New CSS Rule'. Pilih 'Tag (redifines an HTML element)' pada dropdown menu 'Selector Type'. Kemudian di bawahnya pada 'Selector Name:' pilih 'body'. Di bawah 'Selector Name:' bagian 'Rule Definition:' pilih 'New Style Sheet File', kemudian klik OK. Simpan file tersebut di directory root situs project anda, karena contoh di atas direktori rootnya 'C:\My Document\project' maka buatlah folder di dalam folder 'project' dan beri nama folder tersebut dengan nama terserah anda suatu misal 'css'. Simpan file tersebut di dalam folder css dengan nama terserah anda, misal 'style.css'. Kemudian akan muncul kotak dialog css rule, Pada kolom 'Category' klik pada 'Background' => pada jendela bagian kanan 'Background-color' silahkan pilih sendiri warna background yang menurut anda cocok, misal ketikkan di situ kode warna '#EEE'. Kemudian pada kotak kategori lagi klik pada 'Box', setting 'margin' dan 'padding' biarkan checkboxnya tercentang 'Same for all' dan isikan masing-masing dengan value '0'. Kemudian masih pada kolom 'category' klik pada 'block', pada jendela sebelah kanan pilih 'center' untuk 'Text-align' nya, klik OK. Pada kotak dialog 'Insert Div Tag' klik OK lagi.
3. Kemudian klik lagi pada ikon 'Insert Div Tag', setelah keluar kotak dialog 'Insert Div Tag' pada bagian 'Insert' pilih 'After start of tag' sebelah kanannya pastikan tag 'body' terpilih, kemudian klik tombol 'New CSS Rule'. Kotak dialog 'New CSS Rule' akan keluar, 'Selector Type' pilih 'ID (applies to only one HTML element), 'Selector Name' pada kotak di bawahnya isikan dengan '#wrapper'. Pastikan 'Rule Definition:' yang terpilih adalah CSS yang baru saja anda buat (style.css). Klik Ok. Selanjutnya akan keluar kotak dialog 'CSS Rule Definition' untuk '#wrapper'. 'Background' isikan terserah anda, contoh di sini saya isikan dengan '#FFF' atau warna background putih. 'Block' pada bagian 'Text-align' pilih 'Left', 'Box' tentukan terserah anda contoh yang saya pakai di sini '850px'. Pada bagian 'Margin' hilangkan tanda check untuk 'Same for all', isikan 'top' dan 'bottom' dengan '0', 'Right' dan 'Left' isikan dengan 'auto'. Klik OK, Klik OK lagi.
4. Nah akan muncul pada jendela design konten yang berisikan 'Content for id "wrapper" Goes Here', hapus tulisan itu. Selanjutnya buat tag headernya, klik pada 'Insert Div Tag' lagi => pada bagian 'Insert' pilih 'After start of tag', sebelah kanannya pastikan terpilih '<div id="wrapper">. Kemudian klik 'New CSS Rule'. 'Selector Type' pilih 'Compound (based on your selection)', 'Selector Name' isikan dengan '#header', selalu pastikan 'Rule Definitionnya' yang terpilih adalah css yang baru saja anda buat (style.css). Klik OK.
5. Selanjutnya kotak dialog 'CSS Rule Definition' untuk id header akan keluar, klik pada 'Box'. Isikan 'Padding' dan 'Margin' dengan '0', 'Height' isikan dengan '120'. Kemudian klik pada background dan isikan kode warnanya dengan '#0C9. Jangan khawatir pemberian warna ini hanya akan digunakan sebagai tanda pembeda dengan div tag lainnya nanti. Klik 'OK', klik 'OK' lagi.
6. Sekarang buat div tag untuk konten utama, klik pada'Insert Div Tag' => pada bagian 'Insert' pilih 'After tag', kolom sebelah kanannya pastikan terpilih '<div id="header"> => klik tombol 'New CSS Rule'. Pada jendela dialog 'New CSS Rule' => 'Selector Type:' = 'Compound (based on your selection)', 'Selector Name:' isikan dengan '#maincontent' => klik OK. Selanjutnya pada jendela 'CSS Rule Definition' untuk 'maincontent' pada bagian 'Box' category isikan 'Padding' dan 'Margin' '0', 'Height' isikan dengan '400'. Pada bagian 'Background' categori isikan warna backgroundnya dengan '#FC0'. Klik OK, klik OK lagi.
7. Giliran membuat sidebar sekarang, langkahnya sama 'Insert Div Tag' => 'Insert' pilih 'After tag' sebelah kanannya pastikan '<div id="maincontent"> yang terpilih, kemudian klik 'New CSS Rule'. Pada jendela dialog 'New CSS Rule' pilih 'Compound (based on your selection)' untuk 'Selector Type', ketikkan #sidebar pada kotak 'Selector Name'. Klik Ok. Pada jendela dokumen 'CSS Rule Definition' bagian kategori 'Box' isikan 'Margin' dan 'Paddingnya' '0', 'background color' tentukan dengan kode warna '#36F'. Klik OK, Klik OK lagi.
8. Nah sekarang div tag yang terakhir, sama seperti di atas klik pada 'Insert Div Tag', selanjutnya 'Insert' pilih 'After tag' kolom sebelah kanannya pilih '<div id="sidebar">', klik tombol 'New CSS Rule'. Pada jendela 'New CSS Rule' pilih 'Compound (based on your selection)' untuk 'Selector Type', isikan '#footer' pada kotak 'Selector Name', Klik OK. Pada jendela dialog 'CSS Rule Definition' bagian kategori 'Box' isikan 'Margin' dan 'Padding' nya '0', 'Height' = '50px'. Background warnanya '#CFC'. Klik Ok, Klik OK lagi.

Nah sampai di sini kira-kira untuk membuat layout mentah sudah setengah jadi, tinggal mengatur penempatan masing-masing div tag. Jika anda preview di browser (tekan tombol F12) dapat anda lihat masing-masing div tag berjajar dari atas ke bawah. Sidebar belum diposisikan sebagaimana mestinya, untuk mengaturnya perlu modifikasi sedikit kode css yang baru saja anda buat, ikuti langkah-langkahnya seperti di bawah ini:

1. Umumnya sidebar terletak disebelah kanan atau kiri dari konten utama (main content), tapi melihat layout yang baru saja dibuat, komponen 'maincontent' dan 'sidebar' mempunyai lebar yang sama. Maka dari itu ukuran lebar 'maincontent' dan 'sidebar' perlu dikecilkan. Untuk 'maincontent' lebarnya mengikut lebar div tag 'wrapper' sebesar 850px, kecilkan ukuran lebarnya kira-kira sebesar '550px'. Caranya pada tab 'Css Styles' yang terletak di panel sebelah kanan klik pada '#maincontent', tambahkan properties 'width' dengan klik pada 'Add Property' pada kotak 'Properties for "maincontent"'. Anda dapat mengetikkan secara manual atau scroll down ke bawah dan cari nama properti 'width', isikan valuenya dengan nilai '550px'. Masih pada 'Properties for "maincontent"', klik lagi pada 'Add Property' dan ketikkan 'float' => isikan valuenya dengan 'left'. nah sekarang sidebar dan footer sudah bergeser ke sebelah kanan maincontent.
2. Nah sekarang tinggal menyesuaikan sidebar, pada panel sebelah kanan klik pada '#sidebar'. Tambahkan properti 'width' dan isikan valuenya dengan nilai 28px, kemudian masih dalam properties untuk sidebar tambahkan 'float' dan isikan valuenya dengan 'right'.
3. Selanjut yang terakhir untuk footer, klik pada #footer. Pada properties untuk '#footer' klik pada 'Add Property' dan ketikkan 'clear' => isikan valuenya dengan 'both'. Coba sekarang preview di browser.

Nah sekarang layout mentah sudah jadi, header diatas, maincontent ditengah, sidebar di pinggir dan footer di bawah seperti layaknya konsep design suatu web pada umumnya. Capek ah.. kapan-kapan saya posting bagian keduanya.

Jika mau tahu hasilnya, lihat di halaman ini