Print this Article

Print Friendly Version of this page

Cara membuat Website di Dreamweaver CS3

Jika Anda menyukai Artikel di blog ini. Silahkan klik disini atau masukkan email anda pada kolom di bawah untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Mahogra Fauzan.
reader


Untuk membuat website di dreamweaver yang pertama yang perlu kita lakukan adalah membuat file index.php. Website yang akan kita buat memiliki bagian :
  1. Header
  2. Menu navigasi
  3. Konten
  4. Sidebar
  5. Footer
Langsung saja kita akan membuat website di dreamweaver,  buka program Adobe Dreamweaver anda,  Create new pilih PHP

Simpan file tersebut, tekan CTRL + S simpan dengan nama index.php dalam folder tempat anda menginstal XAMPP ( Download DISINI atau DISINI )

Berikutnya anda membuat file baru, tekan CTRL + N pada Blank Page pilih CSS kemudian klik create,simpan dengan nama style.css dalam folder yang sama dengan file index.php
Kembai ke file index.php, klik tab index.php pada document toolbar, kemudian klik Code, tambahkan script berikut di atas tag </head>


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


Script tersebut berfungsi menghubungkan file CSS dengan index.php


Mengatur Body Website


Masih dalam 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.



Setelah muncul Window New CSS Rule, isi pengaturan sebagai berikut :
  1. Selector Type : Advanced (Ids, pseudo-class selectors)
  2. Selector : body
  3. Define in : style.css
Jika sudah klik Ok. Maka akan muncul jendela CSS Rule Definition for body in style.css, isikan pengaturan sebagai berikut :
  1. Type = Font : Arial, Helvetica, sans-serif, size:13 pixel, color : #000000
  2. Background  = Background color : #CCCCCC
  3. Box = width : 900 pixel
Jika sudah klik OK, simpan file index.php dan style.css anda tekan CTRL + S

Mengatur Link Website

Sekarang kita akan mengatur warna, ukuran, dan style Link secara default.

Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  1. Selector Type : Advanced (Ids, pseudo-class selectors)
  2. Selector : a
  3. Define in : style.css
Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai berikut :

Type:
  • Color : #ff6000
  • 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 tulisancolor, kemudian pilih warnanya.
Jika sudah klik Ok.

Membuat Header Website

Setelah tadi kita mengatur bagian body dan link website, sekarang saatnya mengatur bagian header dari website.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah tag <body>

<div id="header"></div>

Sekarang kita akan mengatur CSS untuk headernya, caranya sama seperti mengatur CSS pada body. Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  1. Selector Type : Advanced (Ids, pseudo-class selectors)
  2. Selector : #header
  3. 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
  • Repeat : no-repeat
Box :
  1. Width : 860 pixel
  2. Float : Left
  3. Height : 110 pixel
  4. Padding : centang same for all, kemudian isikan 20 pixel
 Jika sudah klik OK, kemudian simpan file style.css anda. Untuk melihat preview website anda tekan F12.

Selanjutnya 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

Masih tetap 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 :


<p>Deskripsi website anda disini</p>

Ganti tulisan deskripsi website anda disini dengan deskripsi / penjelasan website anda.
Simpan file index.php dan style.css tekan CTRL + S, kemudian lihat previewnya tekan F12 atau refresh browser anda tekan F5.

Membuat Menu Navigasi Website

Setelah kita membuat Header, selanjutnya kita akan membuat navigasi website yang berada di bagian bawah header. Navigasi isi akan berisi link – link yang akan mengarah ke halaman tertentu seperti profile, gallery, atau contact.
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body>


<div id="navigasi"></div>


Sekarang kita akan mengatur CSS untuk navigasinya. Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  1. Selector Type : Advanced (Ids, pseudo-class selectors)
  2. Selector : #navigasi
  3. Define in : style.css
 Setelah 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 allleft :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 :
  1. Rows : 1
  2. Columns : 4
  3. Table Width : kosongkan saja
  4. Border Thickness : kosongkan / delete saja.
  5. Cell Padding : 5
  6. 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 :
  1. Selector Type : Advanced (Ids, pseudo-class selectors)
  2. Selector : #navigasi a
  3. Define in : style.css
Setelah muncul CSS Rule Definition for #navigasi a in style.css, isikan pengaturannya sebagai berikut :
Type:
  • Color : #FFFFFF
Jika sudah klik Ok. Simpan file index.php dan style.css anda tekan CTRL + S, kemudian preview tekan F12

Membuat 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="content-wrapper">


Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  1. Selector Type : Advanced (Ids, pseudo-class selectors)
  2. Selector : #content-wrapper
  3. Define in : style.css
Setelah muncul CSS Rule Definition for #content-wrapper in style.css, isikan pengaturannya sebagai berikut :

Background:
  • Background color : #DDDDDD
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: 20 pixel, left: 0 pixel
Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id=”content-wrapper”>


<div id="content"></div>




Sehingga kodenya menjadi seperti berikut :


<div id="content-wrapper">
<div id="content"></div>
</div>




Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  1. Selector Type : Advanced (Ids, pseudo-class selectors)
  2. Selector : #content
  3. Define in : style.css
Setelah muncul CSS Rule Definition for #content in style.css, isikan pengaturannya sebagai berikut :

Background:
  • Background color : #FFFFFF
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.

Membuat Sidebar Konten

Sidebar adalah kolom yang ada di sebelah kanan / kiri 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=”content”></div>


<div id="sidebar"></div>


Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
  1. Selector Type : Advanced (Ids, pseudo-class selectors)
  2. Selector : #sidebar
  3. Define in : style.css
Seleah muncul CSS Rule Definition for #sidebar in style.css, isikan pengaturannya sebagai berikut :
Box :
  1. Width : 200 pixel
  2. Float : Left
  3. Pada bagian margin centang same for all, isikan 0 pixel
  4. Pada bagian padding centang same for all, isikan 10 pixel
Jika sudah klik ok, simpan file index.php dan style.css.

Hasil :


<div id="content-wrapper">
<div id="content"></div>
<div id="sidebar "></div>
</div>

Membuat Footer Website

Footer 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 :
  1. Selector Type : Advanced (Ids, pseudo-class selectors)
  2. Selector : #footer
  3. Define in : style.css
Setelah 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
  • Pada bagian padding centang same for all, isikan 20 pixel
  • Pada bagian margin centang same for all, isikan 0 pixel
Jika sudah klik ok, simpan file index.php dan style.css.

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.

Di bawah gambar atau disamping gambar anda bisa memasukkan teks sesuka anda yang berhubungan dengan konten atau website anda. Atau anda ingin memasukkan penggalan dari halaman profile anda, itu terserah anda.


Jika Anda menyukai Artikel di blog ini. Silahkan klik disini atau masukkan email anda pada kolom di bawah untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Mahogra Fauzan.
reader


Sekian Artikel dari http://mahografauzan.blogspot.com
Semoga Bermanfaat ^_^

Tolong klik semua tombolnya bro !!

  1. Klik Follow 
  2. Klik Like
  3. Klik
  4. Klik Follow
  5. Klik Like
  6. Klik Follow
  7. Klik Like
  8. Klik Follow
  9. Klik Like
  10. Klik
  11. Klik Follow
  12. Klik Like
  13. Klik
  14. Klik IKUTI
  15. Klik IKUTI
  16. Klik IKUTI

  17. Jangan lupa gabung di BLOG TEMAN baca juga Persyaratannya DISINI

Bagi sobat yang mau copas harap Cantumkan Sumbernya !
Hak Cipta di lindungi oleh GoogleCopyscape, dan DMCA. Bagi siapapun yang copy paste tanpa mencantumkan SUMBERnya, akan saya laporkan ke DMCA Takedown.



DoFollow
DoFollow

18 Komentar

screen shot hasilnya mana gan !
saya pengen tahu gimana sih jadinya
soalnya saya belum pernah pake dream weaver kalo bikin tampilan website, biasa dengan cara manual !

Reply

terimakasih infonya pak.sangat bermanfaat bagi saya yang masih pemula di dunia blogger

Reply

terimakasih sudah berbagi pengalaman nya pak

Reply

terimakasih pak atas infonya salam kenal ya pak

Reply

bisa jadi pelajaran juga buat saya nih pak

Reply

terima kasih pak atas informasi dan sudah mau berbagi. sukses selalu pak

Reply

baru kali ini saya temuin penjelasan cara riset keyword yang simple tapi mudah di pahami

Reply

terimakasih atas penjelasannya pak,,sangat bermanfaat

Reply

dalam pembuatan konten yang harus di pertimbangkan faktor2 apa saja pak?

Reply

sangat berguna bangat pak

Reply

Bagai mana cara membuat akun dalam web kita agar vnantinya orang bisa daftar akun seperti FB

Reply

Pertama buat register.php
Kedua buat login.php
Ketiga buat logout.php

Reply

misal saya buat navigasi page " Tentang Kami " isinya itu data diri saya, lalu cara menampilkan di tengah" halaman gmn ? maksudnya di tampilkan di tempat content gitu

Reply

makasih gan atas tutorialnya... kunbal disini ya gan >> http://www.info-kitaku.blogspot.com/

Reply

ane jual domain dengan harga yg sangat murah ni .

hnya 50.000 saja anda bisa mendapat kan domain .
.com
.net
.asia
.org
.mobi

Reply

Tambahin ajj di navigasi nya <a href="www.urlblog.com/tentangkami.html" target="_blank">Tentang Kami</a>

Reply

Poskan Komentar

Alangkah senangnya saya apabila anda mau meluangkan waktu anda untuk berkomentar di Postingan saya ini.

Sebelum berkomentar, baca dulu peraturan berkomentar di blog ini :
✓ Gunakan bahasa yang sopan.
✓ Komentar tidak mengandung sara, spam, flood, junk, sex.
✓ Tidak OOT / Out of Topic.
✓ Dilarang menyebarluaskan artikel tanpa menyertakan link hidup sumbernya!
✓ Pastikan untuk "Subscribe Via Email" untuk membangun kreatifitas blog ini!
✓ Bergabung dengan kami untuk menjadi member ►Join To Be Member This Blog◄ untuk mendapat fasilitas penuh.

→☞ ...Makasih... ☜←