Membuat design layout website Bagian II

Pada artikel sebelumnya Membuat design layout website bagaimana kita membahas design layout website dengan 960 css framework akan tetapi masih belum ada content – content pada layout tersebut pada artikel kali ini kita akan menambahkan design – design content agar layout terlihat lebih bagus. Pada Header menu kita akan menggabungkan juga dengan artikel yang juga sudah kita pelajari sebelumnya Membuat Dropdown menu tanpa Javascript, agar layout website yang kita bangun lebih menarik lagi. Ada sedikit tambahan dari sisi CSS dan dari sisi html tapi ini hanya bersifat pelengkap saja agar layout kita terlihat penuh dan menarik.

Berikut ini baris – baris kode yang perlu kita tambahkan

1. Pada File Html kalian dapat tambahkan code dibawah ini pada #content

<div id=”left_column” class=”grid_5″>
    <div class=”block first”>
        <h3>Article Category</h3>
        <ul class=”menu_category”>
            <li> <a href=”#”>Indonesia</a></li>
            <li> <a href=”#”>Culture</a></li>                                       
            <li> <a href=”#”>Nature</a></li>
            <li> <a href=”#”>People</a></li>
        </ul>
    </div>
    <div class=”block iklan”>
        Advertise
    </div>
</div>
<div id=”right_column” class=”grid_11″>
    <h2 class=”title”>Welcome to Indonesia </h2>
    <p class=”welcome”>
        Sudah merupakan fakta bahwa seorang pembaca akan terpengaruh oleh isi tulisan dari sebuah halaman saat ia melihat tata letaknya. Maksud penggunaan Lorem Ipsum adalah karena ia kurang lebih memiliki penyebaran huruf yang normal, ketimbang menggunakan kalimat seperti
        “Bagian isi disini, bagian isi disini”, sehingga ia seolah menjadi naskah Inggris yang bisa dibaca. Banyak paket Desktop Publishing dan editor situs web yang kini menggunakan Lorem Ipsum sebagai contoh teks. Karenanya pencarian terhadap kalimat “Lorem Ipsum” akan berujung pada banyak situs web yang masih dalam tahap pengembangan.
        Berbagai versi juga telah berubah dari tahun ke tahun, kadang karena tidak sengaja,
        kadang karena disengaja (misalnya karena dimasukkan unsur humor atau semacamnya)
    </p>
    <div class=”list_category”>
        <div class=”alpha grid_5″>
            <h3>Indonesia</h3>
            <ul class=”list_data”>
                <li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
                <li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
                <li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
                <li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
                <li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
            </ul>
        </div>
        <div class=”grid_6 omega”>
            <h3>Culture</h3>
            <ul class=”list_data”>
                <li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
                <li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
                <li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
                <li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
                <li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
            </ul>
        </div>
    </div>
</div>

bila kalian lihat pada browser akan sangat berantakan, karna kita belum menambahkan CSS.

2. Tambahkan code CSS agar html yang sudah kalian masukkan tadi menjadi bentuk yang sesuai dengan yang kita inginkan.

/* left column  */
.first{margin:0!important;}
.iklan{height:90px;line-height:90px;hidden;background-color:#999;
    display:block;text-align:center; color:#FFF;
}
.block{display:block;border:1px solid #999;margin:10px 0;}
.block h3{padding: 5px;text-align:left;text-transform:uppercase;
    background-color:#FFF;
}
.block ul.menu_category{padding:5px;}
ul.menu_category li:before{content:”0BB “;}
ul.menu_category li{padding:1px 0 1px 5px;}

/* right column */
h2.title{font:bold 14px Arial, Helvetica, Sans-serif;padding-bottom:5px;margin-bottom:5px;
border-bottom:1px solid #999;}
.welcome{font:normal 11px Arial, Helvetica, Sans-serif;}
.list_category {margin-top:10px;}
.list_category h3{background-color:#FFF;padding:5px;}
ul.list_data {border-left:1px solid #999;border-right:1px solid #999;
    border-bottom:1px solid #999;padding:5px;
}
ul.list_data li:before{content:”0BB “;}
ul.list_data li {list-style:none;padding:2px 0;}
/* end */

Cukup itu saja yang kalian inputkan, apabila kalian ingin menambahkan file – file baru seperti about, contact bisa kalian copy isi dari file index.html kemudian paste pada file yg baru lalu edit sedikit sesuai dengan yang diinginkan.

Intinya sekarang ini membuat sebuah Layout website tidak serumit dulu denga adanya framework CSS ini programer web yang tadinya tidak bisa mendesign layout akan sangat terbantukan dalam hal mendesign sebuah website.

 

DEMO DOWNLOAD

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Create Simple Chat App with Google App Engine Backend and Google Cloud Messaging

Mari membuat aplikasi chat sederhana menggunakan backend Google App Engine (bagian dari Google Cloud Platform) dan …

Tinggalkan Balasan

Translate »
error: Konten dilindungi !!