July 25, 2024

Pembuatan Layout Dalam Desain Web

3 min read

Konsep Pembuatan Layout Dalam Desain Web

Halo apakabar semua nya..  sudah lama tidak berjumpa dengan saya , sebelum dibaca dibantu ya untuk nge-like nya Tutorial saya yah, tolong dibantu ya.. Semoga Tulisan ini membantu siswa/I dalam belajar materi desain web. Sebelumnya rekan saya Arsia Arni telah membahas tentang pengenalan layout . Nah, kali ini saya akan membahas cara pembuatan layoutnya.

Saya bahas lagi ya tentang layout, barangkali para pembaca ada yang lupa.Layout artinya tata letak. Apa yang mau ditata? dan apa yang mau diletakkan ?. Layout berarti proses menata  letak komponen web dengan teratur letak dan penempatannya,  berupa teks atau grafik pada halaman web. Layout meliputi penyusunan, pembagian tempat dalam suatu halaman, pengaturan jarak spasi, pengelompokan teks dan grafik, dan penekanan pada suatu bagian tertentu.

Komponen web mempunyai 3 komponen dasar yakni header, content, dan footer yang bisa dikembangkan menjadi bentuk layout yang diinginkan.

Komponen layout

Bentuk layout yang standar atau yang biasa digunakan dalam desain web seperti gambar berikut :

1. 1 kolom content.

Layout 1 kolom

2. 2 kolom dengan content dan sidebar.

Layout 2 kolom

3.  3 kolom dengan content dan 2 sidebar di kanan kiri.

Layout 3 kolom

Dalam pembuatan layout bentuk konsep yang saya tawarkan yakni layout 2 kolom, sebelum membuatnya tampilannya ke browser, bentuk nya seperti gambar berikut:

Konsep layout

Penjelasan gambar :

Penamaan wrapper berfungsi untuk membungkus atau mengapit keseluruhan komponen layout, dengan wrapper untuk menentukan lebar layout menjadi lebih mudah.

Sedangkan penamaan content untuk membungkus atau mengapit isi didalamnya yaitu sidebar dan informasi yang mau disampaikan. Dan sekarang kita bahas langsung cara-cara pembuatan layout pada web.

Langkah 1

Tulislah kode htmlnya pada aplikasi design web yaitu Adobe Dreamweaver. Penulisan dalam htmlnya menjadi lebih ringkas seperti berikut ini :

<div id=”wrapper”>

<div id=”header”>  </div>

<div id=”content”>

<div id=”sidebar”>  </div>

<div id=”isi”> </div>

</div>

<div id=”footer”> </div>

</div>

Untuk menggunakan konsep ini buka jendela code adobe dreamweaver kamu, ketik kode diatas didalam tag <body> kode </body> seperti berikut :

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>layout web</title>

<link rel=”stylesheet” type=”text/css” href=”layout web.css” />

</head>

 

<body>

<div id=”wrapper”>

<div id=”header”> </div>

<div id=”content”>

<div id=”side_bar”> </div>

<div id=”isi”> </div>

</div>

<div id=”footer”> </div>

</div>

</body>

</html>

Seperti gambar berikut:

Kode layout web.html

Langkah 2

Lalu buka jendela baru, pada page type klik css, lalu ketik kode css berikut ini :

* {margin:0 auto;

padding;}

#wrapper{width:600px;

background-color:#FFFFFF;}

#header{width:600px;

background-color:#0066FF;

height:120px;

margin-top:5px;}

#content{width:600px;

margin-top:5px;

overflow:hidden;}

#side_bar{float:left;

background-color:#33CCFF;

width:200px;

height:200px;}

#isi{float:right;

background-color:#0066CC;

width:395px;

height:300px;

margin-left:5px;}

#footer{width:600px;

height:30px;

background-color:#0033FF;

clear:both;

margin-top:5px;}

seperti gambar berikut ini:

Kode layout web.css

Hasilnya seperti gambar berikut ini.

Tampilan layout web.css

penjelasan :

Pada baris ke-1 pada gambar css, terdapat kode :

*{margin:0 auto; padding:0;} berfungsi untuk mereset semua jarak margin dan padding tidak mempunyai jarak sama sekali, serta membuat tampilan layout berada di posisi tengah di dalam browser.

perhatikan pada baris ke-14 pada gambar  css terdapat property overflow-hidden, yang berfungsi untuk menghilangkan batas kelebihan float pada selector #isi : float:right;, sedangkan di dibaris ke-30 terdapat property clear:both; berfungsi untuk tidak mengizinkan adanya float pada selector #footer, kalau tidak digunakan kedua property ini maka hasilnya seperti gambar berikut :

Tampilan layout web tidak pakai overflow:hidden dan clear:both

Perhatikan pada gambar posisi footer sejajar dengan #side_bar dan #isi karena pengaruh float:right.

Ok, saya rasa cukup sampai disini dulu ya, perjumpaan kita. Semoga dengan membaca Tutorial dari saya, para pembaca mendapatkan informasi yang bermanfaat dan bisa menambah wawasannya tentang Web Design.

Terima kasih sudah membaca nya, dan tolong memberikan like nya.. sampai ketemu lagi dengan saya di tutorial yang lain. see u..

0 thoughts on “Pembuatan Layout Dalam Desain Web

    1. weks master hacker, info nyo dari yusuf gumay semalem yo. jangan sering sering bergaul dengan dio…tapi btw thanks yo a’

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.