Cara Membuat Website dengan Dreamweaver cs6
Cara Membuat Website dengan Dreamweaver cs6
hal pertama yang harus anda lakukan adalah menyiapkan bahan-bahan sebagai berikut
download xampp
download template
download Dreamweaver cs6(ini yang penting) cari di google yah :)
Setelah 2 bahan tersebut sudah diinstall dan sudah di extract telah terpenuhi maka selanjutnya akan ada folder hasil instal wampp maka klik xampp->htdocs->buah New Folder(websiteku).
Kemudian Hasil extrakan Template yang tadi di download hanya kita gunakan folder Images nya saja..
cari hasil extrackan template copy file images ke dalam folder xampp->htdocs->folder baru yang anda buat(taro disitu).
kita langsung menuju ke tutorialnya cekidot
Buka Dreamweaver cs6 lalu pilih PHP
lalu save di xampp->htdocs->buah New Folder(websiteku) dan beri nama index.php
lalu buat file baru klik CTRL-N pilih Blank page terus klik CSS
save di tempat yang sama dengan nama style.css.
Lalu klik toolbar indek.php dan copy kan script di bawah ini:
<link href="style.css" rel="stylesheet" type="text/css" />
script ini berguna untuk menghubungkan indeks.php dan style.css
Sekarang waktunya untuk membuat body website
dalam menu index.php klik new css rule
Selector Type : Compound(based on your selection)
Selector : body
Define in : style.css
Maka akan muncul setting body
Font family: itu terserah kalian(kalo di tutorial ini saya pake COMIC SANS MS)
Font size= 13 pixel
Pada colom Background = #CCC
dan pada BOX= width 900 pixel klik apply dan ok kemudian save
(kalo kurang jelas perbesar gambar)
Nah Langkah Berikutnya kita Mengatur warna Font, ukuran dan style link default
Klik New Css Rule Kemudian
Selector Type : Compound(based on your selection)
Selector : a
Define in : style.css
Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai berikut :
Type:
Color : #6000ff
Pada Decoration centang None
Jika sudah klik apply dan ok.(save)
Selanjutnya kita akan mengatur css link pada saat hover atau pada saat cursor berada di atas link. Klik kembali icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : a:hover
Define in : style.css
Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai berikut :
Type:
Pada Decoration centang Underline
Jika anda ingin mengubah warna link pada saat hover klik icon kotak yang ada di sebelah tulisan color, kemudian pilih warnanya.
Jika sudah klik apply dan ok kemudian save lagi.
Nah kawan CB sekarang kita akan membuat Header Web
Setelah tadi kita mengatur bagian body dan link website, sekarang saatnya mengatur bagian header dari website.
Pilih file index.php, kemudian copy script berikut dan letakkan di bawah tag <body>
<div id="header"></div>
Sekarang kita akan mengatur CSS untuk headernya, caranya sih hampir sama seperti mengatur CSS pada body. Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : #header
Define in : style.css
Setelah muncul CSS Rule Definition for #header in style.css, isikan pengaturannya sebagai berikut:
Type:
Size : 12 pixel
Color : #FFFFFF
Background:
Background image : klik browse pilih header.jpg dalam folder images yang tadi di extarc yah
Repeat : no-repeat
Box :
Width : 860 pixel
Float : Left
Height : 110 pixel
Padding : centang same for all, kemudian isikan 20 pixel
kalo sudah klik apply dan ok.. Kemudian Save
Lalu kita akan memasukkan logo website dan deskripsi website kedalam header, caranya klik cursor anda setelah <div id=”header”> kemudian klik insert = > image = > logo.jpg
Usahakan logo yang anda buat tingginya / weight tidak lebih dari 80pixel, jika logo anda melebihi dari 80 pixel, anda dapat merubah ukurannya dengan cara :
melalui Design View, klik gambar logo anda kemudian pada panel Property yang secara default berada di bagian bawah, pada H / Height isikan 80
Pada Panel Property, pada Link klik icon folder yang ada di
