Rabu, 28 Mei 2014
Cara Membuat Website dengan Dreamweaver cs6
hal pertama yang harus anda lakukan adalah menyiapkan bahan-bahan sebagai berikut
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
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" />
dalam menu index.php klik new css rule
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)
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 sebelah kiri tulisan Edit, kemudian pilih file index.php. Ini berfungsi pada saat logo di klik akan mengarah ke halaman index atau halaman depan website anda.
Pada bagian border isikan 0, dan pada Alt ketikkan logo websiteku atau nama website nama anda.
Dibawah code:
<a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>
ketikkan; <div id="navigasi"></div>
Sekarang kita akan mengatur CSS untuk navigasiny. Klik icon New CSS Rule, isi settingny sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : #navigasi
Define in : style.css
Seleah muncul CSS Rule Definition for #navigasi in style.css, isikan pengaturannya sebagai berikut :
Background:
Background image : klik browse pilih bg-nav.jpg dalam folder images
Repeat : no-repeat
Box :
Width : 860 pixel
Float : Left
Height : 35 pixel
Pada bagian padding hilangkan centang same for all, left :20 pixel dan right: 20 pixel
Pada bagian margin centang same for all isikan 0 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Selanjutnya pada Design View, klik di dalam Menu Navigasi kemudian klik Insert > Table
Setelah muncul jendela Table, isikan pengaturannya sebagai berikut :
Rows : 1
Columns : 4
Table Width kosongkan saja
Border Thickness kosongkan / delete saja.
Cell Padding : 5
Cell Spacing : 5
Jika sudah klik ok.
Selanjutnya didalam kolom table ketikkan menu website anda, perhatikan gambar berikut
Sekarang kita akan memberikan link pada menu tersebut, caranya blok tulisan Home => pada panel property cari kolom Link klik icon folder kemudian pilih file index.php, lakukan hal yang sama pada menu lainnya, tetapi pada kolom link isikan saja # karena kita belum mempunyai filenya.
Untuk halaman profile dan yang lainnya akan kita bahas pada artikel berikutnya.
Sekarang kita akan mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisan Home => klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : #navigasi a
Define in : style.css
Seleah muncul CSS Rule Definition for #navigasi a in style.css, isikan pengaturannya sebagai berikut :
Type:
Color : #FFF (kode warna putih)
Jika sudah klik ok. Simpan file index.php dan style.css anda tekan CTRL + S, kemudian preview tekan F12
Memuat Konten Website
Sekarang kita akan membuat konten website, konten ini adalah tempat berita atau artikel anda.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body>
<div id="conten-wrapper">
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : #conten-wrapper
Define in : style.css
Seleah muncul CSS Rule Definition for #conten-wrapper in style.css, isikan pengaturannya sebagai berikut :
Background:
Background color : #DDDD
Box :
Width : 860 pixel
Float : Left
Pada bagian margin centang same for all, isikan 0 pixel
Pada bagian padding hilangkan centang same for all, isikan top:0 pixel, bottom: 0 pixel, right:20pixel, left:0pixel
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id=”conten-wrapper”>
<div id="conten"></div>
Sehingga kodenya menjadi seperti berikut :
<div id="conten-wrapper">
<div id="conten "></div>
</div>
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type :Compound(based on your selection)
Selector : #conten
Define in : style.css
Seleah muncul CSS Rule Definition for #conten in style.css, isikan pengaturannya sebagai berikut :
Background:
Background color : #FFF
Box :
Width : 600 pixel
Float : Left
Pada bagian padding centang same for all, isikan 20 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Memuat Sidebar Website
Sidebar adalah kolom yang ada di sebelah konten website anda, biasanya berisi menu – menu seperti berita terbaru atau link – link tertentu.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah
<div id=”conten”></div>
<div id="sidebar"></div>
Sehingga kodenya menjadi seperti berikut :
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : #sidebar
Define in : style.css
Seleah muncul CSS Rule Definition for #sidebar in style.css, isikan pengaturannya sebagai berikut :
Box :
Width : 200 pixel
Float : Left
Pada bagian margin centang same for all, isikan 0 pixel
Pada bagian padding centang same for all, isikan 10 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Untuk isi sidebar akan aku jelaskan pada tutorial berikutnya.
<div id="conten-wrapper">
<div id="conten "></div>
<div id="sidebar "></div>
</div>
Memuat Footer Website
Fotter adalah bagian bawah dari website yang biasanya bisa di isi dengan menu atau link tertentu, dan copyright anda.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body>
<div id="footer"></div>
Sekarang kita akan mengatur CSS untuk footer. Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : #footer
Define in : style.css
Seleah muncul CSS Rule Definition for #footer in style.css, isikan pengaturannya sebagai berikut
Background:
Background image : klik browse pilih footer.jpg dalam folder images
Repeat : no-repeat
Block:
Text align : Center
Box :
Width : 860 pixel
Float : Left
Height : 80 pixel
Di bagian padding centang same for all, isikan 20 pixel
Di bagian margin centang same for all isikan 0 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Jika anda perhatikan semua susunan kode yang kita buat di file index.php tadi akan menjadi seperti ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>
<p>Deskripsi website anda disini</p>
</div>
<div id="navigasi">
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td><a href="index.php">Home</a></td>
<td><a href="#">Profile</a></td>
<td><a href="#">Gallery</a></td>
<td><a href="#">Contact</a></td>
</tr>
</table>
</div>
<div id="conten-wrapper">
<div id="conten"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
Pada Design View, klik di dalam konten website anda kemudian ketikkan kata sambutan atau judul konten anda. Untuk Merubah format judul konten anda caranya blok judul konten anda kemudian pada panel property => menu format pilih Heading 1.
Untuk memberikan link pada judul konten caranya blok judul konten anda, kemudian pada panel properti isikan link yang akan dituju, jika belum ada isikan dengan # saja.
Di bawah judul anda bisa isikan gambar, tetapi sebelumnya pastikan gambar anda tempatnya dalam folder images, caranya Insert = > Image => pilih file gambar anda => klik ok. Untuk mengatur gambar anda silahkan atur pada panel property. Kali ini aku memakai gambar yang aku comot dari google dan lebarnya 600 pixel.
Setelah toturial membuat website di dreamweaver ini kita akan memecah file index.php, kenapa perlu di pecah? ya jawabannya agar nantinya kita mudah dalam mengedit file-file tersebut.
Sampai disini tutorial membuat website di dreamweaver CS6 sahabat CB, jika ada yang ingin anda tanyakan silahkan bertanya pada kolom komentar icon smile Membuat website di dreamweaver CS6
Bagi yang mau belajar membuat website di dreamweaver silahkan lihat kelanjutannya di Memecah File Index.php di Dreamweaver CS6 di Blog ini Saya akan memposting lagi.
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)
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 sebelah kiri tulisan Edit, kemudian pilih file index.php. Ini berfungsi pada saat logo di klik akan mengarah ke halaman index atau halaman depan website anda.
Pada bagian border isikan 0, dan pada Alt ketikkan logo websiteku atau nama website nama anda.
Dibawah code:
<a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>
ketikkan; <div id="navigasi"></div>
Sekarang kita akan mengatur CSS untuk navigasiny. Klik icon New CSS Rule, isi settingny sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : #navigasi
Define in : style.css
Seleah muncul CSS Rule Definition for #navigasi in style.css, isikan pengaturannya sebagai berikut :
Background:
Background image : klik browse pilih bg-nav.jpg dalam folder images
Repeat : no-repeat
Box :
Width : 860 pixel
Float : Left
Height : 35 pixel
Pada bagian padding hilangkan centang same for all, left :20 pixel dan right: 20 pixel
Pada bagian margin centang same for all isikan 0 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Selanjutnya pada Design View, klik di dalam Menu Navigasi kemudian klik Insert > Table
Setelah muncul jendela Table, isikan pengaturannya sebagai berikut :
Rows : 1
Columns : 4
Table Width kosongkan saja
Border Thickness kosongkan / delete saja.
Cell Padding : 5
Cell Spacing : 5
Jika sudah klik ok.
Selanjutnya didalam kolom table ketikkan menu website anda, perhatikan gambar berikut
Sekarang kita akan memberikan link pada menu tersebut, caranya blok tulisan Home => pada panel property cari kolom Link klik icon folder kemudian pilih file index.php, lakukan hal yang sama pada menu lainnya, tetapi pada kolom link isikan saja # karena kita belum mempunyai filenya.
Untuk halaman profile dan yang lainnya akan kita bahas pada artikel berikutnya.
Sekarang kita akan mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisan Home => klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : #navigasi a
Define in : style.css
Seleah muncul CSS Rule Definition for #navigasi a in style.css, isikan pengaturannya sebagai berikut :
Type:
Color : #FFF (kode warna putih)
Jika sudah klik ok. Simpan file index.php dan style.css anda tekan CTRL + S, kemudian preview tekan F12
Memuat Konten Website
Sekarang kita akan membuat konten website, konten ini adalah tempat berita atau artikel anda.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body>
<div id="conten-wrapper">
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : #conten-wrapper
Define in : style.css
Seleah muncul CSS Rule Definition for #conten-wrapper in style.css, isikan pengaturannya sebagai berikut :
Background:
Background color : #DDDD
Box :
Width : 860 pixel
Float : Left
Pada bagian margin centang same for all, isikan 0 pixel
Pada bagian padding hilangkan centang same for all, isikan top:0 pixel, bottom: 0 pixel, right:20pixel, left:0pixel
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id=”conten-wrapper”>
<div id="conten"></div>
Sehingga kodenya menjadi seperti berikut :
<div id="conten-wrapper">
<div id="conten "></div>
</div>
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type :Compound(based on your selection)
Selector : #conten
Define in : style.css
Seleah muncul CSS Rule Definition for #conten in style.css, isikan pengaturannya sebagai berikut :
Background:
Background color : #FFF
Box :
Width : 600 pixel
Float : Left
Pada bagian padding centang same for all, isikan 20 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Memuat Sidebar Website
Sidebar adalah kolom yang ada di sebelah konten website anda, biasanya berisi menu – menu seperti berita terbaru atau link – link tertentu.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah
<div id=”conten”></div>
<div id="sidebar"></div>
Sehingga kodenya menjadi seperti berikut :
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : #sidebar
Define in : style.css
Seleah muncul CSS Rule Definition for #sidebar in style.css, isikan pengaturannya sebagai berikut :
Box :
Width : 200 pixel
Float : Left
Pada bagian margin centang same for all, isikan 0 pixel
Pada bagian padding centang same for all, isikan 10 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Untuk isi sidebar akan aku jelaskan pada tutorial berikutnya.
<div id="conten-wrapper">
<div id="conten "></div>
<div id="sidebar "></div>
</div>
Memuat Footer Website
Fotter adalah bagian bawah dari website yang biasanya bisa di isi dengan menu atau link tertentu, dan copyright anda.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body>
<div id="footer"></div>
Sekarang kita akan mengatur CSS untuk footer. Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type : Compound(based on your selection)
Selector : #footer
Define in : style.css
Seleah muncul CSS Rule Definition for #footer in style.css, isikan pengaturannya sebagai berikut
Background:
Background image : klik browse pilih footer.jpg dalam folder images
Repeat : no-repeat
Block:
Text align : Center
Box :
Width : 860 pixel
Float : Left
Height : 80 pixel
Di bagian padding centang same for all, isikan 20 pixel
Di bagian margin centang same for all isikan 0 pixel
Jika sudah klik ok, simpan file index.php dan style.css.
Jika anda perhatikan semua susunan kode yang kita buat di file index.php tadi akan menjadi seperti ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<a href="index.php"><img src="images/logo.png" alt="logo websiteku" border="0" /></a>
<p>Deskripsi website anda disini</p>
</div>
<div id="navigasi">
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td><a href="index.php">Home</a></td>
<td><a href="#">Profile</a></td>
<td><a href="#">Gallery</a></td>
<td><a href="#">Contact</a></td>
</tr>
</table>
</div>
<div id="conten-wrapper">
<div id="conten"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
Pada Design View, klik di dalam konten website anda kemudian ketikkan kata sambutan atau judul konten anda. Untuk Merubah format judul konten anda caranya blok judul konten anda kemudian pada panel property => menu format pilih Heading 1.
Untuk memberikan link pada judul konten caranya blok judul konten anda, kemudian pada panel properti isikan link yang akan dituju, jika belum ada isikan dengan # saja.
Di bawah judul anda bisa isikan gambar, tetapi sebelumnya pastikan gambar anda tempatnya dalam folder images, caranya Insert = > Image => pilih file gambar anda => klik ok. Untuk mengatur gambar anda silahkan atur pada panel property. Kali ini aku memakai gambar yang aku comot dari google dan lebarnya 600 pixel.
Setelah toturial membuat website di dreamweaver ini kita akan memecah file index.php, kenapa perlu di pecah? ya jawabannya agar nantinya kita mudah dalam mengedit file-file tersebut.
Sampai disini tutorial membuat website di dreamweaver CS6 sahabat CB, jika ada yang ingin anda tanyakan silahkan bertanya pada kolom komentar icon smile Membuat website di dreamweaver CS6
Bagi yang mau belajar membuat website di dreamweaver silahkan lihat kelanjutannya di Memecah File Index.php di Dreamweaver CS6 di Blog ini Saya akan memposting lagi.