Kelanjutan dari lessons pembuatan desain web pada minggu lalu adalah membuat desain lain yang lebih kompleks dan lebih atraktif. Selain itu, perancangan desain web pada minggu lalu pembuatannya msih menggunakan table, dan desain web pada minggu ini sudah menginjak pada pembuatan menggunakan divisi-divisi dan tidak berbasis table lagi.
Tampilan berikut ini adalah tampilan kerangka web yang dirancang tidak menggunakan table lagi, melainkan telah menggunakan divisi-divisi yang telah disesuaikan penempatannya, selain tampilannya bias dibuat semenarik mungkin, perancangan menggunakan divisi juga lebih atraktif dan tidak monoton dalam modelnya. Dalam pembuatan desain pada minggu ini, dibutuhkan juga file ber contain “.css” sebagai file pendukung devisi-devisi itu sendiri. Jadi pembuatan web yag lebih menarik, sudah pasti dalam perjalanannya juga akan sedikit agak rumit.
<!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>Tugas lanjutan Layout sederhana </title>
<link rel="stylesheet" href="1.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sisi kiri
</div>
<div id="top">
<div id="content">
Gambar
</div>
<div id="isi">
Inti
</div>
<div id="info">
Informasi
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
dan skrip berikut dibawah ini adalah script pendukung .css
#wrapper {
margin: auto;
width: 1000px;
padding:5px 2px 5px 2px;
border: 1px solid red;
}
#header {
height: 100px;
margin-bottom:5px;
border: 1px solid yellow;
}
#inner {
margin: auto;
border: 1px solid blue;
}
#sidebar {
float: left;
width: 200px;
height: 390px;
border: 1px solid pink;
}
#top {
float: right;
width: 750px;
height: 390px;
border: 1px solid magenta;
}
#content {
height: 100px;
border: 1px solid black;
}
#isi{
float: left;
width: 400px;
height:250px;
border: 1px solid green;
}
#info {
float: right;
width: 280px;
height: 170px;
border: 1px solid purple;
}
#footer {
clear: both;
height: 50px;
border: 1px solid cyan;
}
baik dari segi tampilan, isi, dot html, dan dit css yang digunakan pun sudah jauh lebih kompleks
<!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>Tugas2 Desain Layout Sederhana</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="logo.jpg" width="110" height="100" align="left" />
<div id="header1">Halaman muka | Biografi | Acara | Forum</div>
<div id="header2">
<h1>ALL About Paramore </h1>
</div>
<div id="header3">Cari
<input type="text" />
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#"><strong>Halaman muka</strong></a></li>
<li><strong><a href="#">Biografi</a></strong></li>
<li><strong><a href="#">Acara</a></strong></li>
<li><strong><a href="#">Forum</a></strong></li>
<li><strong><a href="#">Contac person</a></strong></li>
</ul>
</div>
</div>
<div id="top">
<div id="content"><img src="logo1.jpg" width="800" height="102" /></div>
<div id="isi">
<h2>Paramore</h2>
<p>22 Feb 2010 [23:00]<br />
Paramore adalah band internasional yang berasal dari Franklin, Tennesse yang mengusung aliran "Pop Rock", terbentuk pada tahun 2004 yang digawangi oleh Hayley williams pada vocal dan keyboardist, Josh farro pada lead gitar, Jeremy davis pada bass, zac farro pada drum, dan Taylor york pada rhythm gitar. Album "Riot" yang keluar pada tahun 2007 berhasil membawa berbagai penghargaan, diantarannya piala platinum dari amerika dan gold platinum yang diakui di berbagai negara, diantaranya australia, kanada, new zealand dan inggris. Setalah vakum beberapa waktu, akhirnya Paramore kembali hadir dengan wajah baru "brand new eyes" adalah album yang diluncurkan pada tahun 2009 .</p>
<p>Baca Selengkapnya...</p>
</div>
<div id="info">
<p><strong>Artikel yang berkaitan
</strong>
<ul>
<li>Meet & greet with Hayley</li>
<li>Paramore live in senayan</li>
<li>The Final Riot</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p align="center">
© Paramore reviews 2010
</div>
</div>
</body>
</html>
berikut ini file extensi dot css nya.
#wrapper {
margin: auto;
width: 1000px;
background-color:LimeGreen;
padding: 5px 2px 5px 2px;
}
#header {
height: 105px;
background-color:MediumSlateBlue;
}
#header1 {
height: 20px;
text-align:right;
padding-right: 10px;
color:DarkOrange;
}
#header2 {
height: 35px;
color:SandyBrown;
}
#header3 {
height: 25px;
text-align:right;
color:DeepSkyBlue;
padding-right: 10px;
}
#inner {
margin:auto;
}
#sidebar {
float: left;
width: 200px;
height: 400px;
background-color:BurlyWood;
}
#top {
float: right;
width:800px;
height: 400px;
}
#content {
height: 100px;
}
#isi {
float: left;
width: 580px;
padding-left: 10px;
height: 300px;
background-color:LimeGreen;
}
#info {
float: right;
width: 200px;
height: 130px;
padding-left: 10px;
background-color:Tomato;
}
#footer {
clear: both;
height: 50px;
color:Yellow;
background-color:MediumSlateBlue;
}
#leftmenu ul {
width: 200px;
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: Red no-repeat left center;
margin: 0px 0px 1px; color: Black;
}
#leftmenu a:hover {
background: Magenta no-repeat left center; color: GreenYellow;
}
Tidak ada komentar:
Posting Komentar