Membuat layout dengan CSS dan HTML

MEMBUAT LAYOUT WEBSITE DENGAN CSS DAN HTML

Sebelum membuat website seorang Web Designer harus merancang Layout Website terlebih dahulu. Layout Website dikenal dengan Story Board atau Story Boarding. Istilah Story Board sudah tidak asing bagi para Web Wesigner. Story Board dapat dibuat dengan CSS 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

</div>

BERITA 1

</div>

BERITA 2

</div>

BERITA 3

</div>

</div>

FOOTER

</div>

</center>

</html>

2. Membuat Layout Website

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;

3. Membuat File Index/Homepage

Nama File : index.html

<html>

<head>

<title>Artikel</title>

</head>

<body>

</div>

PENCARIAN

</div>

LOGO

</div>

HEADER

</div>

BERITA 1

</div>

BERITA 2

</div>

BERITA 3

</div>

</div>

FOOTER

</div>

</center>

</html>

Jika file index.html dijalankan di browser, maka akan tampil Layout/Story Board sebagai berikut :

Demikian artikel ini penulis buat, semoga bermanfaat bagi para pembaca blog Neng Yanti.

Membuat layout dengan CSS dan HTML

Next

Posting Lebih Baru

Previous

Posting Lama