Responsive Ads Here

Saturday, February 2, 2013

Cara Merancang Template Website dengan Css

sore sore gini enak nya santai ya gan ??? tp kyk nya lebih enakan klw kita bermain coding, kebetulan pelajaran di sekolah kami sekarang belajar website, apa salah nya kita mulai dari dasar dulu, sebenar nya sih, kalau untuk membuat website sederhana, saya sudah paham dari kelas 2 SMK, tapi pada silabus sekolah saya kelas 3 baru belajar ini, dan sebelum sebelum nya saya juga sudah pernah menulis artikel seputar ini juga, tapi saya lupa kepada newbie yang belum paham sama sekali tentang css,html, jadi apa salah nya kita mengulang postingan, kalau yang sudah cukup paham tentang html dan css, agan boleh buka artikel lain nya di SINI ok kita lanjut, membuat website itu sebenar nya tidak rumit, tapi mengaman kan nya yang terbilang rumit, langkah langkah membuat website bisa anda mulai dari Perancangan Template (kerangka website) anda bisa menggunakan tabel tabel untuk mengatur letak atau posisi dari template anda, tapi alangkah lebih baik anda merancang template nya dengan CSS, agar resiko tampilan nya pecah lebih sedikit, ok langsung saja ke perancangan kerangka template nya :
  • pertama anda tentukan template anda itu ingin memakai berapa kolom, dan baris misal anda menggunakan 3 kolom dan 4 baris yang terdiri dari :
    Kolom : sidebar kiri, konten, artikel
    Baris : header,body(konten),sidebar bawah, dan footer

    disini saya menggunakan 2 Kolom dan 3 baris yang terdiri dari header,konten,footer,sider kanan, tapi pada sider kanan nya saya membuat 2 kolom kalau penasaran sama bentuk nya, lihat gambar di bawah nanti hasil nya :P
  • ok setelah menentukan berapa kolom dan baris yang kita inginkan, maka kita mulai untuk mendesain nya, kalau anda ingin membuat template nya dengan 2 kolom dan 3 baris ikuti langkah langkah di bawah ini
    buka Dreamweaver atau notepad++ anda lalu copy code di bawah ini
       1.  <html>  
    2.     <head>  
    3.        <title>Kerangka Theme Pertamaku </title>  
    4.     </head>  
    5.     <body>  
    6.        <div id="wrap">  
    7.         <div id="header">  
    8.          Header anda ada disini 
    9.       </div>  
    10.     <div id="maincontent">  
    11.        <div id="content">  
    12.         konten anda ada disini
    13.      </div>  
    14.      <div id="sidebar">  
    15.         <div id="lebar">  
    16.            Sidebar penuh anda ada disini 
    17.         </div>  
    18.         <div id="kiri">  
    19.           sidebar kiri kecil ada disini  
    20.         </div>  
    21.         <div id="kanan">  
    22.           sidebar kanan kecil ada disini  
    23.         </div>  
    24.      </div>  
    25.     </div>  
    26.     <div style="clear:both;"></div>  
    27.     <div id="footer">  
    28.        Footer anda ada disini
    29.     </div>  
    30.    </div>  
    31.   </body>  
    32.</html> 

  • ok code di atas adalah kerangka dasar dari template anda, save dengan nama index.php atau index.html, kalau anda menggunakan index.php, maka di kedepan nya agan bisa menambahkan atau menyisipkan script php di dalam nya, tapi kalau html, agan tidak bisa menyisipkan script php di dalam nya, save aja dengan index.php, agar tampilan nya lebih berbentuk tambahkan code css ini, terserah anda mw di letak di mana css nya, kalau dalam satu halaman itu, letakkan di bawah code <head> tapi saran saya buat file baru dan beri nama style.css copy code di bawah ini
    1.  #wrap {  
    2.    border:solid 1px #000;  
    3.    width:900px;  
    4.    margin:0 auto;  
    5.    padding:10px;  
    6.    }  
    1. #header {  
    2.   height:120px;  
    3.   background:#cccccc;  
    4.   }  
    5. #maincontent {  
    6.   margin-top:10px;  
    7.   }  
    8. #content {  
    9.   width:590px;  
    10.   background:#0F0;  
    11.   float:left;  
    12.   }  
    13. #sidebar {  
    14.   width:300px;  
    15.   background:#FF9900;  
    16.   float:left;  
    17.   margin-left:10px;  
    18.   }  
    19. #lebar {  
    20.   background:#FF3300;  
    21.   margin-bottom:10px;  
    22.   }  
    23. #kiri {  
    24.   background:#660000;  
    25.   width:145px;  
    26.   float:left;  
    27.   margin-right:10px;  
    28.   }  
    29. #kanan {  
    30.   background:#660000;  
    31.   width:145px;  
    32.   float:left;  
    33.   }  
    bawah ini setelah di save dengan nama style.css, sekarang kita jelaskan arti dari setiap code nya
    di mulai dari file yang ada di index.php untuk file ini kan normal, bagi para newbie, saya jelaskan untuk mengkonekkan ke css nya lihat code adalah untuk menghubungkan file style.css dengan index.php dan untuk mengambil bentuk css nya dengan menggunakan code <div id=""> atau <div class="">    
    lihat contoh nya seperti script
    <div id="maincontent"> 
    <div id="content"> 
    konten anda ada disini

    </div>
    </div>  
     maksud nya adalah bentuk konten nya sesuai dengan bentuk css yang bisa anda lihat di bagian
    #maincontent { 
    margin-top:10px;}

    #content {
    width:590px;
    background:#0F0;
    float:left;  }  
       Karena ada code <div id="maincontent"> dan <div id="content"> paham kan maksud nya ??? kalau gak paham waduh bahaya,… di cermati lagi deh bahasa nya. sekarang file style.css contoh code nya
    #maincontent { 
    margin-top:10px;}

    #content {
    width:590px;
    background:#0F0;
    float:left;  }  

    Anda lihat struktur dari Css ini sangat sederhana
    Margin-top maksud nya adalah jarak luar antara sisi paling luar dengan template 10px
    Width maksud nya lebar nya adalah 590px
    Background maksud nya background tersebut menggunakan warna dengan nilai  0F0
    Float maksud nya adalah bentuk nya di mulai dari sebelah kiri di susun
    Semua CSS itu di ambil dari bahasa inggris, jadi perbanyak kosa kata anda, semua script css yang tidak saya sebut sama saja dengan yang lain nya, tujuan nya membuat atau mengatur bentuk dari konten,sidebar,footer dan lain nya
    Hasil yang kalian kerjakan tidak jauh dari tampilan hasil punya saya lihat gambar di bawah

    Postingan ini di buat karena ada sobat saya yang ingin menjadi web programing, jadi saya ingin membantu nya
    untuk download ebook css dasar lengkap anda bisa download di SINI