Info Harga Komputer dan Gadget

membuat web statis sederhana menggunakan dreamweaver

Advertisement
advertisement

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 :
  1. index.html
  2. style.css
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
advertisement

10 comments:

Anonymous said...

ditmantab nih, unggu gan kelanjutannya, jadi penasaran nih

tmg blog said...

keren sob lanjutkan tutorialnya ane siap menyimak

www.edikomputer.com said...

sip gan di tunggu aja

www.edikomputer.com said...

iya nih lg belom sempet lagi

Anonymous said...

Makasih ya informasinya...

jangan lupa mampir kesini ya..
http://quantamultimedia.com/

agus said...

manaatap ne mas......
mau saya coba dulu.....
owh mas....
ne apa harus instal xampp ya

E Klopedia said...

Gan.. menu diatas mirip punyanya Kaskus.. jadi ngiler ane gan.. gimane cara buatnya gan.. !!

Ane Punya Dreamweaver 8 tapi masih bingung cara makenya.. Sial Sial sial:

Sany Trisandi said...

Sampai sekarang saya masih pake CMS an... tapi ngga BELAJAR kayanya, terlalu instant. Disini saya ikut belajar mas edi. Belum ada kelanjutannya ya ????

Edikomputer said...

Belum sempet nih lagi sibuk job offline

Toko Sepatu Futsal said...

Tutorial selanjutnya mana mas? untuk yang berbasis swf mas..

Post a Comment

Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan