Cara Membuat Website Sendiri mudah dan gratis (part 2)

1. Membuat File CSS

Setelah memasang script code yang di point 3, selanjutnya configurasi file css sesuai nama ID dan Class yang di pakai.
hal terpenting dari configurasi css adalah div id pembungkus yaitu ini:

#coverluar{
 width:900px; /*tentukan lebar layout*/
 margin:auto;
 display:block; /*agar posisi layout di tenagh*/
 border:1px solid #CCC;
}


karena cover pembungkusnya lah yang menentukan ukuran lebar site kita. dan otomatis div didalamnya harus sesuai dengan lebar cover luarnya, baik itu di bagi dua harus hitungannya sama, bisa di perhatikan di config file css di bawah.

@charset "utf-8";
/* CSS Document */
#coverluar{
 width:900px; /*tentukan lebar layout*/
 margin:auto;
 display:block; /*agar posisi layout di tenagh*/
 border:1px solid #CCC;
}

#kepala{
 height:150px;
 background:#0FF;
 clear:both;/*mematikan fungsi float left/kanan,*/
}
#menu{
 width:900px;
 height:50px;
 clear:both;
}
#menukiri{
 width:200px;
 height:700px;
 float:left;
 background:#999;
}
#isitengah{
width:700px;
height:700px;
float:left;
background:#CCC;
}

#kaki{
 clear:both;
 height:50px;
 width:900px;
 background:#333;
 color:#fff; 
}


Jika Code css di awali dengan tanda "#" maka itu disebut ID seperti ini <div id="nama_ID"></div>
jika code css di awali dengan tanda "." maka disebut class seperti ini <div class="nama_class"></div>
2. coba cek hasilnya
jika code di atas kalian benar memasangnya maka hasilnya akan seperti ini.


3. Membuat menu

tambahkan di menu <div id="menu">, seperti ini dan lihat hasilnya

 <div id="menu">
    <ul>
     <li><a link href="#">Home</a></li>
        <li><a link href="#">Menu 1</a></li>
        <li><a link href="#">Menu 2</a></li>
        <li><a link href="#">Menu lainnya</a></li>
        <li><a link href="#">About Use</a></li>
    </ul>
    </div>

Sekarang kita tambah css agar lebih menarik
jadi silakn tambahkan menu css di file css yg kalian buat seperti ini,buat background menu menjadi hitam

#menu{
 width:900px;
 height:50px;
 clear:both;
 background:#000; /*penambahan background ya, sebelumhnya belum di isi*/
}

sekarang tentukan lebar menunya

#menu ul li{
 display:inline;
 float:left;
 height:40px;
 width:15%;
 list-style:none; /*menghilangkan tanda titik hitam di depan value menu */
}

bingung darimana saya dapat #menu ul li itu..? jadi magsudnya adalah semua yg berkode li ul ada di elemen DIV ber ID=menu
sekarang paste juga kode ini dan lihat hasilnya, kalian hilangkan 1 persatu nanti dan lihat perubahan apa terjadi agar mengerti fungsi dari setiap kode yg saya buat

#menu ul li a{
  text-decoration:none; /*menghilangkan garis bawah */
  color:#fff;  
  padding:13%;
}
#menu ul li a:hover{ 
/*agar saat cursor diatas menu kita akan memberi perubahan warna yg berbeda */
  text-decoration:none;
  color:#fff;  
  padding:13%;
  background:#fff;
  color:#000;
}

kunci terakhir agar menu kalian bisa bagus adalah tambahkan kode Display:block di #menu ul li a dan di #menu ul li a:hover
jika benar akan hasilnya seperti ini ,klink link ini Hasilnya
ini yg lihat jika dari mobile, belum mobile frendly ya, nanti akan saya posting bagaimana
caraya membuat website yg user frendly dan pastinya responsive dengan layar anda.. terimaksih, Baca Sebelumnya

Share on Facebook

Tweet

Share on Google+

Share on LinkedIn