CSS : Membuat Desain Layout Website

Membuat Desain Layout Website

Pertama kali jika anda akan membuat suatu website, sebagai dasar dari bentuk awal pembuatan website.

Oke kita langsung saja…

Saya akan menggunakan software notepad++ karena gratis,untuk membuat layout kali ini saya akan mengajak anda untuk membuat desain dengan 2 kolom dengan bagian content sebelah kiri dan disebelah kanan untuk menaruh navigasi dan segala macam bentuknya.

Untuk itu silahkan anda buat dulu folder untuk menaruh file hasil praktek, misalnya saya membuat folder Bab1 Layout website

Lalu anda buka folder tersebut dan buatlah lagi folder dengan nama images yang berfungsi untuk menampung images.

Copy file gambar dari file download yang saya sertakan dalam POST SEBELUMNYA yang terdapat dalam folder Bab1 Membuat layout, file gambar tersebut ada 2 buah file yaitu header.jpg dan footer.gif.

Membuat file HTML layout

Oke…sekarang anda buka notepad++ anda, atau jika anda bisa menggunakan software yang biasa anda gunakan lalu ketikkan kode HTML berikut ini:

<html>
<head>
<title>Membuar Layout Web</title>
<link href="style.css" rel="stylesheet" type="text/css"
media="all" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="right">

</div>
<div id="footer">

</div>
</div>
</body>
</html>

Keterangan dari kode diatas:

Kode diatas murni kode HTML dan anda telah membuat tag DIV dengan masing-masing diberikan selector ID, anda masih ingat tentunya dengan selector ID yang dipisahkan dari header,menu navigasi,content, menu kanan,footer.
Kode komentar dengan warna merah perlu anda isi dengan konten atau artikel, karena jika anda tidak mengisi dengan artikel maka hasilnya tidak akan kelihatan (dalam file contoh telah saya beri artikel).
Kode yang saya tebalkan merupakan link untuk menggabungkan dari File HTML dengan File CSS.

Lalu simpan dalam folder Bab1 Membuat layout yang sudah anda buat, beri nama dengan index.html , jika anda jalankan dengan klik 2 kali maka penampilannya masih tidak karuan hanya tulisan dari content saja karena anda belum membuat kode CSS yang bertujuan mendesain tampilan dan halaman layout web anda.

Membuat file CSS layout

Oke sekarang kita buat file CSS nya untuk membuat tampilan dari Layout website anda.
Berikut kode dari file CSS :

* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#container{
width:1000px;
margin:0 auto;
}
#header{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
background-position:center;
background-color:#FFFF99;
width:1000px;
height:160px;
}
#menu{
background-color:#993300;
width:1000px;
height:35px;
}
#content{
background-color:#EBEBEB;
width:700px;
float:left;
}
#right {
width:300px;
background-color:#EBEBEB;
float:left;
}
#footer{
background-image:url(images/footer.gif);
width:1000px;
height:128px;
float:left;
}

Penjabaran dari kode diatas:

Kode * {margin: 0;padding: 0;} adalah memberikan perintah secara general bahwa margin dan padding dengan nilai 0.
Kode body {…} memberikan perintah untuk membuat font dari seluruh body dengan font Arial, Helvetica, sans-serif .
Kode #container {…} untuk membuat kerangka dari halaman web dengan ukuran lebar 1.000 px dengan posisi ditengah karena margin nya 0 dan dibuat Auto.
Kode #header {…} untuk membentuk sebuah header dengan background gambar header.jpg tanpa perulangan gambar (no-repeat) posisi gambar ditengah dan diberi background warna kuning , dengan ukuran lebar 1.000px dan tinggi 160 px.
Kode #menu {…} untuk membuat menu navigasi dengan warna background #993300 dengan lebar 1.000 px dan tinggi 35 px.
Kode #content {…} untuk membuat kerangka lebar 700 px untuk artikel dengan background color dengan warna abu-abu (#EBEBEB) lalu penempatan posisi Float left ( nempel/mengalir kekiri ).
Kode #right {…} berarti kolom right dengan kerangka lebar 300 px dengan background color abu-abu dengan penempatan float Left.
Kode #footer {…} membuat footer dengan background image footer.gif , lebar 1.000 px , tinggi 128 px, penempatan Float left.

Lalu setelah itu anda simpan pada folder Bab1 Layout website beri nama style.css.

Jika benar maka tampilan dari isi folder yang anda buat seperti gambar diatas.

Untuk melihat hasilnya silahkan klik 2 kali di index.html dan ini hasilnya .

Catatan :

Hasil diatas untuk artikel telah saya isi dengan mengambil dari internet.
Untuk bagian artikel memang terlihat agak jelek karena kita belum mendesain bagian dari konten, nanti akan dibahas pada materi tersendiri.

Materi Selanjutnya adalah : Membuat Menu Navigasi.

Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)