kali ini edikomputer.com akan mengajak kamu semua untuk belajar membuat template web sendiri meggunakan dreamweaver, tentu kita akan merasa puas dan bangga menggunakan sesuatu hasil karya sendiri meski tampilannya masih sederhana oke mari kita pelajari cara membuat web statis menggunakan dreamweaver dan tetu edikomputer akan memberikan tutorialnya step by step agar lebih mudah untuk di pelajari
Persiapan ;
Oke setelah semua item di atas sudah siap mari kita mulai membuat proyek ini
pada dasarnya sebuah web terdiri dari 2 file yaitu :
dan bila web kita menggunakan media gambar kita bisa menmbahkan folder images tapi kali ini kita akan membuat versi yang sangat sederhana
setelah wamp server terinstal pada komputer buat sebuah folder para directory www yaitu C:\wamp\www beri nama folder tersebut terserah anda misal webgue
kemudian bukalah Dreamweaver buat new file html
kemudian save pada folder webgue tadi dengan nama index.html lalu buat file baru lagi yaitu file CSS kemudian save pada folder webgue dengan nama style.css setelah itu buka browser dan ketikan http://localhost/ pada browser kemudian klik directory webgue dan ternyata ........ masih kosong atau blank ya tentu saja karena kita belum memberikan konten pada web kita
oke sekarang kembali lagi ke file index.html kita akan menemukan tulisan 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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
oke sekarang kita akan memanggil file style.css nya agar style yang kita buat terhubung ke file index.html copy kode berikut kemudian paste diatas </head>
<link rel="stylesheet" href="style.css" type="text/css" />
sehingga susunanya 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=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" /></head>
<body>
</body>
</html>
teks warna merah merupakan teks yang tadi kita tambahkan kemudian save dengan begitu file index.html telah terhubung dengan style.css
nah sekarang kita beri pengaturan pada style.css buka file style.css tadi, disinilah kemudahan membuat web dengan dreamweaver kita tidak perlu membut kode-kode yang rumit kita hanya memberi pengaturan yang sesuai maka akan terbetuklah sebuah kode
oke sekarang kamu buat aturan css lihat pada jendela css klik tanda + untuk membuat aturan css baru lihat gambar berikut :
* kemudian akan muncul kotak dialog new css rule
* pada selector type pilih Advanced (IDs, pseudo-class selectors)
* pada selector ketik nama id yaitu #body
* pada devine in biarkan saja
* kemudian pada bacground beri warna latar belakang web kita beri warna sesuka anda dan disini saya
* menggunakan background hitam
* kemudian pada box : width =100% height=auto kemudian klik oke maka akan muncul kode berikut ini
#body {
background-color: #000000;
width:100%;
height:auto;
}
kemudian klik save
* kemudian terapkan pada index.html dengan mengetik kode <div id="body"><div> kemudian klik save
* buat aturan css baru caranya sama seperti diatas dan berinama #wrapp pada background beri warna putih height= 768px dan width = 800px klik oke maka akanterbentuk css seperti ini :
#wrapp {
background-color: #FFFFFF;
height: 768px;
width: 800px;
}
* buka file index tambahkan kode berikut ini <div id="wrapp"></div> letakkan kode tersebut diantara kode <div id="body"> dan <div> sehingga susunanya 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=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="body">
<div id="wrapp"></div>
</div>
</body>
</html>
nah sekarang kamu lihat pada browser maka akan terlihat background hitam dan putih tapi konten masih terletak di sebelah kiri nah agar berada di tengah tambahkan kode berikut <div style align="center"> letakkan diatas <body> dan </div> di bawah </body>
sekarang lihat browser maka akan terlihat background putih diantara background hitam.
sampai disini dulu ya tutorialnya esok kita lanjutkan lagi dan jangan lupa ikuti terus tutorialnya dan mohon jangan lupa komentarnya ya biar saya semangat terus untuk melanjutkan proyek ini, jangan cuma baca, copas terus kabur
