Sunday, August 10, 2014

Bagaimana Cara Membuat Konten dan footer Website dengan Dreamweaver

Bagaimana Cara Membuat Konten Website dengan Dreamweaver.
langsung saja ke topik bahasan
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">

Buat New css Rule.
Selector Type:compound (based on your selection)
Selector Name:  #conten-wrapper
Rule Definition: style.css
Lalu isikan pengaturannya sebagai berikut:

Background:
Background color : #DDD

Box :
Width : 1000 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 kode berikut dan letakkan di bawah <div id=”conten-wrapper”>

<div id="conten"></div>

Setelah itu buat New Css Rule

Background:
Background color : #FFF

Box :
Width : 600 pixel
Float : Left
Pada bagian padding centang same for all, isikan 20 pixel
Jika sudah klik ok dan save.

Ke Tahap Selanjutnya Yaitu membuat Sidebar Website

 Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id=”conten”></div>

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

Klik icon New CSS Rule, isi 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.

Membuat Footer pada website

Fotter adalah bagian bawah dari website yang biasanya bisa di isi dengan menu atau link tertentu, dan copyright anda.
Pada index.php ketikkan script berikut dan letakkan di atas </body>
<div id="footer"></div>
Klik icon New CSS Rule, isi pengaturannya sebagai berikut :
Selector Type:compound (based on your selection)
Selector Name:  #footer
Rule Definition: style.css

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 Save index.php dan style.css

Sekian dari artikel cara membuat website dengan Dreamweaver cs6.
semoga bermanfaat


1 comment:

  1. terima kasih, atas petunjuk untuk belajar mendesain web semoga bisa diperbanyak lagi paduannya agar kami yang masih awan akan web dapat memahami lebih banyak lagi.

    ReplyDelete