Skip to content Skip to sidebar Skip to footer
Home / blogger / CSS / Membuat Website / TIPS

Tutorial Cara Dasar Membuat Layout Desain WEB yang Responsive

Post a Comment
Tutotrial dasar membuat desain web yang responsive__Apa itu responsive? Responsive adalah konsep Template yang bisa menyseuaikan view sesuai dengan lebar/ukuran layar penampungnya bisa itu berupa PC, tablet maupun Ponsel. Dan pada kesempatan kali ini saya akan berbagi tutorial singkat mengenai cara mendesain/melayout Blog/website yang responsive.


Buat Scrpit HTML Terlebih Dahulu
Yang pertama kita lakukan adalah membuat Script HTML nya, yang terdiri dari 3 Struktur kolom pada class (.MAIN) yang akan kita bagi lagi menjadi tiga class (.LEFT), (.MIDDLE) dan (.RIGHT). Pada setiap class nanti akan kita beri properti float agar membentuk seperti kolom.

  1. Class Header
  2. Class Main
  3. Class Footer

<div class="container">
    <div class="header">Untuk bagian header...</div>
    <div class="main">
        <div class="left">Untuk kolom bagian Kiri...</div>
        <div class="middle">Untuk kolom bagian tengah...</div>
        <div class="right">Untuk kolom bagian kanan...</div>
    </div>
    <div class="footer">Untuk bagian footer...</div>
</div>

Jangan lupa untuk menyisipkan meta Viewport di bawah ini pada <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


Mengatur Layout Desain
Setelah kita selesai membuat setruktur HTML, tahap berikutnya adalah mendesain layout dengan kode CSS agar membentuk layout yang terdiri dari 3 class, silahkan rangkai Script CSS seperti di bawah ini
.container{
    max-width: 1080px;
    margin: 20px auto;
    background: #fff;
    overflow: hidden;
    padding: 10px;
}

.header{
    border: 1px solid #dedede;
    padding: 10px;
    margin: 10px;
}

/* Main */
    .left{
        width: 250px;
        border: 1px solid #dedede;
        background: #e5e5e5;
        padding: 10px;
        margin: 10px;
        float: left;
    }

    .middle{
        width: 500px;
        border: 1px solid #dedede;
        padding: 10px;
        margin: 10px;
        float: left;
    }
        .middle img{
            max-width: 100%;
            height: auto;
        }

    .right{
        width: 250px;
        border: 1px solid #dedede;
        padding: 10px;
        margin: 10px;
        float: left;
    }

.footer{
    clear: both;
    border: 1px solid #dedede;
    padding: 10px;
    margin: 10px;
}

Mengatur Gambar Agar Responsive
Agar gambar tidak berubah-ubah, gunakan Script di bawah ini

.middle img{
    max-width: 100%;
    height: auto;
}

Setting 2 Kolom ketika di Tablet

Agar ukuran layout menjadi responsive masukan Script CSS di bawah, selain untuk merubah kolom, kode di bawah juga berfungsi untuk menyesuaikan ukuran font, warna font dan merubah warna kolom.

@media screen and (max-width: 1080px) {
   
    .container {
        width: 100%;
    }
    .left {
        width: 25%;
        background: #fff000;
    }
    .middle {
        width: 68%;
        float: right;
    }
   
    .right {
        cletuar: both;
        padding: 1% 4%;
        width: auto;
        float: none;
    }
}
Background bisa anda sesuaikan dengan kode warna yang anda inginkan dengan mengganti Script yang sudah saya beri warna merah.

 Dan tambahan lagi agar responsive menjadi satu kolom ketika di ponsel tambahkan Script CSS di bawah ini:

@media screen and (max-width: 780px) {
  
    .header,
    .footer{
        text-align: center;
    }
    .left {
        width: auto;
        float: none;
    }
  
    .middle {
        width: auto;
        float: none;
    }
  
    .right {
        width: auto;
        float: none;
    }

}

Pada kode CSS di atas semua lebar kolom telah di atur menjadi "auto" yang artinya sudah bisa menyesuaikan dengan lebar layar yang menampungnya.


Mungkin Itu dulu pembahasan dasar membuat layout desain web yang responsive, untuk elemen-elemen pengembangnya akan saya bahas pada tutorial berikutnya.

Post a Comment for " Tutorial Cara Dasar Membuat Layout Desain WEB yang Responsive"