collected pixels: Membuat Desain Halaman Web Atraktif (2)

Setelah kita berhasil membuat layout halaman web dengan division, kita dapat mengembangkan layout tersebut menjadi sebuah halaman web yang atraktif.
Halaman web yang akan dibahas disini adalah halaman web sederhana sehingga mudah untuk dibuat.

Seperti sebelumnya, karena kita bekerja menggunakan CSS, maka terlebih dahulu kita buat file CSS dengan nama template.css
Kode selengkapnya seperti di bawah ini.

#wrapper { margin: auto; width: 900px; border: 1px solid blue; background: #00699F; } #header { height: 80px; border: 1px solid blue; margin: 7px 0 0 0; repeat: x; background: url(elektro.JPG); } #logo { height: 70px; width: 70px; margin: 5px 0 0 20px; float: left; } #textheader { height: 70px; width: 500px; margin: 5px 20px 0 0; float: left; font-size : 20px; font-color : white; } #buttonsearch { float: right; margin : 30px 0 0 0; width: 50px; height : 30px; border : 1px solid blue; } #fieldsearch { float: right; margin : 30px 50px 0 0; width: 150px; height : 30px; border : 2px solid black; } #button { float: right; cursor: pointer; font-size: 10px; font-weight: bold; height: 30px; margin: 0 0 0 7px; text-align: center; vertical-align: bottom; white-space: pre; width: 50px; } #text{ border: 1px solid #ffffff; color: #000000; font-size: 10px; font-variant: normal; height: 25px; line-height: normal; width: 148px; } #menuheader ul { float: right; width: 250px; margin: 0; padding: 0 27px 0 0; list-style: none; } #menuheader ul li a{ float: left; width: 45px; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; color: #011629; border-right: 1px solid #011629; } #inner{ float: left; width : 900px; height : auto; margin:5px 0; border: 1px solid blue; } #sidebar { float: left; margin-right: 20px; width: 180px; height: 330px; border: 1px solid white; background: #C8DCEE; } #leftmenu ul { width: 180px; list-style-type: none; padding:0; margin: 0; } #leftmenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left: 15px; text-decoration: none; } #leftmenu a { padding: 5px 0px 5px 15px; display: block; background: #225D86 no-repeat left center; margin: 0px 0px 1px; color: #ffffff; } #leftmenu a:hover { background: #228664 no-repeat left center; color: #ffffff } #inner1{ float: left; width: 685px; height: auto; margin-left : 5px; border: 1px solid blue; } #top{ float: left; width: 683px; height: 100px; border: 1px solid blue; } #maincontent { float: left; width: 500px; height: 225px; border: 1px solid blue; background: #C8DCEE; } #right{ float : right; width: 175px; height: 150px; border: 1px solid blue; background: #AABCCD; } #footer { clear: both; height: 50px; border: 3px solid white; font-size : 14px; font-weight: bold; }

Setelah itu kita membuat kode html dengan nama template.html
Kode selengkapnya seperti di bawah ini.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"> <head> <title>Desain Halaman Web Atraktif</title> <link rel="stylesheet" href="template.css" type="text/css" /> </head> <body> <div id="wrapper"><div id="header"><div id="logo"><img src="UM.JPG" width="70" height="70"></img> </div><div id="textheader"><h2>JURUSAN TEKNIK ELEKTRO</h2></div><div id="menuheader"><ul><li><a href="#home">Home</a></li> <li><a href="#Situs_Map">Situs Map</a></li> <li><a href="#RSS">RSS</a></li> <li><a href="#Contact">Contact</a></li> <li><a href="#About_US">About Us</a></li> </ul></div><div id="fieldsearch"><input type="text" name="q" size="10" id="text" title="searchfield" /> </div><div id="buttonsearch"><input type="submit" name="Search" value="Search" alt="Search" id="button" title="Search" /> </div></div> <div id="inner"><div id="sidebar"><div id="leftmenu"><ul><li><a href="#">Home</a></li> <li><a href="#">Pembelajaran</a></li> <li><a href="#">Teknologi</a></li> <li><a href="#">Kemahasiswaan</a></li> </ul></div></div><div id="inner1"><div id="top"><img src="offb.jpg" width="340" height="98" align="left"></img> <img src="header.jpg" width="340" height="98" align="left"></img> </div><div id="maincontent"><h1>Semarak Lomba Desain Header Web</h1>Sampai dengan hari terakhir (31/01) batas pengumpulan desain header web dalam lomba yang diadakan oleh Jurusan Teknik Elektro, telah terkumpul sebanyak 120-an karya dari 18 desainer. Kiranya respon baik para mahasiswa Teknik Elektro ini patut diapresiasi dan dijadikan motivasi untuk meraih prestasi lebih tinggi. </div><div id="right">Recent Posts <ul><li><a href="#">Pemenang Lomba Header</a></li> <li><a href="#">Hello World</a></li> <li><a href="#">Uncategorized</a></li> </ul></div></div></div> <div id="footer">Copyright © 2010 by Rinda Wahyu Iksanti </div></div> </body> </html>

Setelah mengetikkan kode-kode di atas, kita dapat menjalankan file template.html dengan browser yang sudah ada. Jangan lupa untuk mengaktifkan local hostnya.
Tampilan desain halaman web sederhana yang atraktif dapat dilihat seperti gambar di bawah ini.

Perlu diketahui pula bahwa dalam pembuatan desain web di atas, kita memerlukan beberapa sumber gambar.

1 komentar:

dodledo12 Juli 2010 pukul 16.03
hem..
mungkin itu hasil yang kumplit dengan gambar yang dijadikan sebagai background ya?
soalnya tadi saya copy dan lihat hasil tampilannya gak berbentuk seperti hasil yang diartikel.
tapi terima kasih udah ngasih contoh.
BalasHapus
Balasan

Tambahkan komentar

collected pixels

Pages

Sabtu, 06 Maret 2010

Membuat Desain Halaman Web Atraktif (2)

1 komentar: