MEMBUAT LAYOUT WEBSITE DENGAN CSS DAN HTML

Sebelum membuat website seorang Web Designer harus merancang Layout Websiteterlebih dahulu. Layout Website dikenal dengan Story Board atau Story Boarding. IstilahStory Board sudah tidak asing bagi para Web Wesigner. Story Board dapat dibuat denganCSS dan HTML, maka untuk merancang Story Board diperlukan skrip CSS dan skrip HTML.

Skrip CSS digunakan untuk merancang letak maupun ukuran (tinggi dan lebar) dari elemen-elemen layout web, seperti wrapper (pembungkus), header, menu, sidebar,content maupun footer website. Wrapper adalah bagian layout yang paling luar, yang berfungsi sebagai pembungkus dari elemen-elemen layout lainnya seperti header, menu, sidebar dan footer. Sedangkan skrip HTML berfungsi untuk mengatur/menentukan posisidari elemen-elemen layout website tersebut berdasarkan selector skrip CSS.

Skrip CSS dan HTML dapat dipelajari di Lembaga Pendidikan Kursus Komputer (IT Training Center), pada program kursus Web Design. Computer First adalah Lembaga Pendidikan Kursus Komputer yang membuka program Kursus Komputer Web Design, Web Programming maupun Web Master. Di Computer First, HTML dan CSS merupakan materi wajib untuk dipelajari pada program kursus Web Design, Web Programmingmaupun Web Master. Sehingga lulusan Web Design, Web Programming dan Web Master dari Computer First mampu merancang Layout Website (Story Board) dengan CSSdan HTML. Selain membuka program kursus diatas, Computer First juga membuka program kursus Programming, Ms. Office, Multimedia Design, Robotic dan program-program kursus yang lainnya.

Untuk lebih memahami tentang pembuatan layout website dengan CSS dan HTML, penulis sudah membuat skrip CSS dan HTML dengan langkah-langkah sebagai berikut :

1. Membuat Rancangan Awal Layout :

Rancangan Awal merupakan Rencana Layout yang akan dibuat. Rancangan Awal ini dapat dibuat dengan menggunakan Ms. Word, Corel Draw atau Adobe Illustrator. Contoh dari Rancangan Awal Website adalah :

2. Membuat Layout Website

Layout Website/Story Board dibuat setelah membuat Rancangan Awal. Layout Website/Story Board dibuat dengan menggunakan CSS (Cascading Stylesheet) secara eksternal yang disimpan di folder css pada localhost. Layout Website yang sesuai denganRancangan Awal diatas adalah :

Nama File : css/layout.css

#wrapper{ width:1000px;

height:750px;

background:grey;

margin-top:10px;

margin-left:10px;

margin-bottom:10px;

margin-right 10px;

padding:10px;

}

#menu { margin-bottom:10px;

height:50px;

width:750px;

background:aqua;

float:left;

}

#pencarian { margin-bottom:10px;

margin-left:50px;

height:50px;

width:200px;

background:red;

float:left;

}

#logo { margin-bottom:10px;

margin-right:20px;

height:150px;

width:150px;

background:yellow;

float:left;

clear:both;

}

#header { margin-bottom:10px;

height:250px;

width:810px;

background:green;

float:left;

padding:10px;

}

#berita1 { margin-bottom:10px;

margin-right:20px;

height:250px;

width: 250px;

background:blue;

float:left;

clear:both;

}

#berita2 { margin-bottom:10px;

margin-right:20px;

margin-left:260px;

margin-top:-260px;

height:250px;

width: 250px;

background:blue;

float:left;

clear:both;

}
#berita3 { margin-bottom:10px;
margin-right:20px;
margin-left:520px;
margin-top:-260px;
height:250px;
width: 250px;
background:blue;
float:left;
clear:both;

}
#login { margin-bottom:10px;
margin-left:800px;
margin-top:-260px;
height:200px;
width:200px;
background:brown;
float:left;
}
#footer { margin-bottom:10px;
height:150px;
width:1000px;
background:aqua;
float:left;
padding:0px;
}

3. Membuat File Index/Homepage

File Index/Hompage dibuat untuk memanggil dan menerapkan skrip layout website yang sudah dibuat pada CSS. Nama Id atau Class yang sudah dibuat pada file CSS di diletakkan pada elemen div yang dibuat pada file index. File index/homepage disimpan di localhostdengan ekstensi html. Adapun skrip file index tersebut adalah :

Nama File : index.html

<html>

<head>

<title>Artikel</title>

</head>

<body>

</div>

PENCARIAN

</div>

LOGO

</div>

HEADER