Cara Membuat Website dengan Dreamweaver CS6

Langsung saja ke topik bahasan dalam membuat website dengan dreamweaver cs6.

Hal pertama yang harus anda siapkan adalah software xampp(bisa anda cari di google) , lalu dreamweaver cs6 kemudian cari template sederhana sebagai bahan dari Gambar (bisa cari di google)

tapi yang terpenting adalah xampp dan dreamweaver.

Berikut tahapan dalam membuat website menggunakan dreamweaver:

pertama buat Folder baru pada instalasi xampp , biasanya di

D:\website\xampp\htdocs\Belajar membuat website

Dalam membuat website hanya dibutuhkan

1. Header
2. Menu Navigation
3. Konten
4. Sidebar
5. Footer

Mari kita bahas Hal Pertama:

cara membuat Header dengan Dreamweaver adalah sebagai berikut

Buka Dreamweaver anda.

Kemudian Buat baru File PHP

Kemudian Save ditempat Folder yang sebelumnya anda buat dengan nama index.php 

setelah tersimpan kemudian buat file baru pada dreamweaver atau tekan CTRL + N lalu Pilih BLANK PAGE kemudian CSS lalu CREATE

Kemudian save ditempat yang sama dengan nama style.css

kemudian kembali ke index.php lalu copy dan pastekan kode dibawah ini kedalam index.php tepat dibawah <tittle>Untitled Document</tittle>

<link href="style.css" rel="stylesheet" type="text/css" />

Setelah di paste kan kemudian save lagi.

guna dari kode diatas adalah sebagi penghubunf style.css dengan index.php 

 Kita ketahap selajutnya yaitu membuat mengatur Body website

Pada file index.php, klik icon New CSS Rule yang ada di bagian kanan, jika di layar anda tidak terdapat CSS Stylenya anda bisa menekan Shift + F11 untuk menampilkan tab CSS Style.

kemudian isi seperti gambar berikut

Jika sudah klik ok maka akan otomatis masuk ke pengaturan body, isikan seperti berikut

Type = Font Family : Arial, Helvetica, sans-serif, size:13 pixel, color : #000000

Background  = Background color : #CCC

Box = width : 1000 pixel

Jika sudah klik OK dan Save

Sekarang kita mengatur Link Website.

Buat New CSS RULE

Isi sebagai berikut

Type:

Color : #ff60

Pada Decoration centang None

Jika sudah klik ok.

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 : Advanced (Ids, pseudo-class selectors)

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.

Save file.

 

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

- See more at: http://seotutorialblogg.blogspot.com/2014/05/cara-membuat-website-dengan-dreamweaver.html#sthash.gAduYctS.d