- 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 disini9. </div>10. <div id="maincontent">11. <div id="content">12. konten anda ada disini13. </div>14. <div id="sidebar">15. <div id="lebar">16. Sidebar penuh anda ada disini17. </div>18. <div id="kiri">19. sidebar kiri kecil ada disini20. </div>21. <div id="kanan">22. sidebar kanan kecil ada disini23. </div>24. </div>25. </div>26. <div style="clear:both;"></div>27. <div id="footer">28. Footer anda ada disini29. </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 ini1. #wrap {2. border:solid 1px #000;3. width:900px;4. margin:0 auto;5. padding:10px;6. }
- #header {
- height:120px;
- background:#cccccc;
- }
- #maincontent {
- margin-top:10px;
- }
- #content {
- width:590px;
- background:#0F0;
- float:left;
- }
- #sidebar {
- width:300px;
- background:#FF9900;
- float:left;
- margin-left:10px;
- }
- #lebar {
- background:#FF3300;
- margin-bottom:10px;
- }
- #kiri {
- background:#660000;
- width:145px;
- float:left;
- margin-right:10px;
- }
- #kanan {
- background:#660000;
- width:145px;
- float:left;
- }
bawah ini setelah di save dengan nama style.css, sekarang kita jelaskan arti dari setiap code nyadi 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 sederhanaMargin-top maksud nya adalah jarak luar antara sisi paling luar dengan template 10pxWidth maksud nya lebar nya adalah 590pxBackground maksud nya background tersebut menggunakan warna dengan nilai 0F0Float maksud nya adalah bentuk nya di mulai dari sebelah kiri di susunSemua 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 nyaHasil 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 nyauntuk download ebook css dasar lengkap anda bisa download di SINI
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 :
