Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver

Tutorial Membuat Layout Web Menggunakan Adobe DreamweaverMembuat 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:

http://www.linggih.com | Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver

1

Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver 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.http://www.linggih.com | Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver 2

Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver 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 . 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 padaInsert Div Tag => pada bagian Insert pilih After tag, kolom sebelah kanannya pastikan terpilih => 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 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 , 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 lihathttp://www.linggih.com | Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver 3

Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver 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. Jika mau tahu hasilnya, lihat di halaman iniMembuat Layout Website Menggunakan Adobe Dreamweaver (bagian 2)

Postingan kali ini adalah penyempurnaan layout website menggunakan Dreamweaver (lanjutan dari bagian 1). Jika pada bagian 1 hanya membuat layout mentahnya saja, kali ini menambahkan beberapa background gambar, menambahkan navigasi menu vertikal dan horizontal dan yang pasti tujuan utamanya adalah membuat tampilan layout website menjadi kelihatan lebih enak dipandang.

http://www.linggih.com | Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver

4

Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver Modifikasi kode body Sebelum mulai download dulu file gambarnya di sini. Sesudah itu extract file rar dan kopikan seluruh gambar di direktori images, kemudian modifikasi code body "background-color: #EEE;" menjadi "background: url(../images/img01.jpg) repeat-x left top #EEE;". Modifikasi kode Header Untuk tag id header ganti kode "background-color: #0C9;" menjadi "background: url(../images/img01.jpg) repeat-x left top;". Ganti kode "height: 120px;" menjadi "height: 91px;" Modifikasi kode Konten Utama (maincontent) Ganti "padding: 0px;" menjadi "padding: 5px 10px;", dan ganti kode "width: 550px;" menjadi "width: 520px;". Dan hapus kode "background-color: #fc0;", atau sesuaikan warba backgroundnya sesuai dengan selera anda. Kemudian ganti kode "height: 400px;" menjadi "height: auto;", yang berarti tinggi dari konten utama anda menyesuaikan dengan panjangnya tulisan yang anda buat. Modifikasi kode sidebar Hapus "background-color: #36F;", ganti "padding: 0px;" menjadi "padding: 5px 10px;", tambahkan kode "height: auto;", ganti "width: 285px;" menjadi "width: 290px;". Modifikasi kode footer Hapus "background-color: #CFC;" dan ganti dengan "background: url(../images/footer.png) no-repeat;", ganti height: 50px;" menjadi "height: 47px;" sesuaikan dengan tinggi background gambar footer, tambahkan kode "height: auto;", ganti "width: 285px;" menjadi "width: 290px;". Div Tag tambahan Tambahkan kode di bawah ini pada bagian edit code css:#logogambar { width: 850px; height: 209px; background: url(../images/image-logo.jpg) no-repeat; }

http://www.linggih.com | Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver

5

Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver Kemudian dari mode css source (style.css) pindahkan ke mode Source Code. Copy dan pastekan tag berikut ini => "" position: relative; text-align: justify; Modifikasi kode footer Tambahkan ID Tag seperti di bawah ini:#footer p { color: #fff; font-size: 0.75em; padding: 15px; text-align: center; font-family: arial; font-weight: bolder; margin: 0; clear: both; }

Div Tag tambahan

Tambahkan id Tag seperti di bawah ini:#logogambar p.text1 { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; margin: 0 0 0 15px; padding: 90px 20px 0px 30px; font-size: 30px; color: #FFFFFF; }

Tambahkan juga kode ini untuk sliding tab sidebar:#scroller-header a { text-decoration:none; color:#867863; padding:0 2px; font:12px arial;

http://www.linggih.com | Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver

7

Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver} #scroller-header a:hover { text-decoration:none; color:#4b412f } a.selected { text-decoration:underline !important; color:#4b412f !important; } #scroller-header { background:url(../images/header.gif) no-repeat; width:277px; height:24px; padding:35px 0 0 15px; font-weight:700; } #scroller-body { background:url(../images/body.gif) no-repeat bottom center; width:277px; padding-bottom:30px; } #mask { width:250px; overflow:hidden; margin:0 auto; } #panel div { float:left; } #panel ul { list-style:none; margin:0 5px; padding:0; } #panel ul li { padding:5px; color:#557482; border-bottom:1px dotted #ccc; } #panel ul li.last { border-bottom:none !important; }

Nah selanjut tinggal menambahkan konten yang anda ingin tulis. Sebelumnya download dulu file tambahannya di link ini. Extract filenya, tempatkan gambar pada folder images dan yang lainnya (file

http://www.linggih.com | Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver

8

Tutorial Membuat Layout Web Menggunakan Adobe Dreamweaver javascript) buatkan folder tersendiri. Beri nama folder js, tempatkan jquery.scrollTo.js dan jquery1.3.1.min.js di folder js. Selanjutnya tambahkan kode berikut ini diantara tag & : $(document).ready(function() { $('#mask').css({'height':$('#panel-1').height()}); $('#panel').width(parseInt($('#mask').width() * $('#panel div').length)); $('#panel div').width($('#mask').width()); $('a[rel=panel]').click(function () { var panelheight = $($(this).attr('href')).height(); $('a[rel=panel]').removeClass('selected'); $(this).addClass('selected'); $('#mask').animate({'height':panelheight},{queue:false, duration:500}); $('#mask').scrollTo($(this).attr('href'), 800); return false; }); });

Pada bagian tag dibawahnya cari dan hapus tulisan "Content for id "header" Goes Here". Untuk header kontennya akan diisikan dengan navigasi menu, ambil contoh menu yang akan dipakai antara lain "Home, gallery, tentang, link, dan kontak". Maka "Content for id "header" Goes Here" ganti dengan kode di bawah ini:

Kontak

"