Dalam membuat desain web, hal yang tidak boleh terlewatkan adalah membuat kerangka dasar desain. Kerangka dasar merupakan kulit luar atau pembungkus (wrapper) yang digunakan untuk menampung keseluruhan desain. Setelah mempersiapkan wrapper, langkah selanjutnya adalah mempersiapkan layout. Berikut ini adalah contoh layout web yang terdiri dari header, menu content, dan footer dengan desain terpisah.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Studi CSS-1</title>
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="content">
<div id="content-top">
Top Content
</div>
<div id="content-main">
Main Content
</div>
<div id="content-right">
Right Content
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Langkah selanjutnya adalah simpan source code di atas dengan file name *.css, lalu tuliskan source kode berikut untuk ditautkan dengan source kode yang dibuat di atas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Studi CSS-2</title>
<link type="text/css" rel="stylesheet" href="3_2.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="UM3D.png" width="50"alt=""/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Presentasi dari TecQuipment Ltd, UK</h3>
<hr />
<p class="style1">
Rabu, 3 Maret 2010
</p>
Voice over Internet Protocol (VoIP), atau dengan nama lainnya Internet Telephony adalah suatu teknologi untuk mentransmisikan data termasuk yang berupa data biasa, suara ataupun video secara real time melalui internet (saluran IP). Dalam aplikasi transmisi suara, VoIP merupakan kandidat kuat untuk menggantikan jaringan telepon konvensional yang menggunakan PaBX (Privat Branch Exchange). Hal ini dikarenakan biayanya yang lebih murah terutama untuk koneksi interlokal dan internasional (jarak jauh). Apalagi sekarang dikatakan bahwa kualitas dari layanan VoIP ini dapat melebihi kualitas layanan jaringan konvensional.
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Lomba Fotografi</a></li>
<li><a href="#">Pelantikan KORPS ASISTEN</a></li>
<li><a href="#">Lomba Desain Grafis</a></li>
<li><a href="#">Seminar Nasional</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>© 2010 Teknik Elektro UM. Malang, Indonesia.</b></p>
</div>
</div>
</body></html>
Hasil tampilannya adalah sebagai berikut:
0 komentar:
Posting Komentar