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:
"