CSS LAYOUT Menata Layout Web dengan CSS Isu tentang layouting dalam desain Web yang akhir

-akhir ini mencuat (setelah hadirnya CSS2), adalah penggunaan CSS untuk mendesain layout dan tampilan pada sebuah situs Web. Kedua teknik ini memiliki kelebihan dan kekurangan masingmasing. Fakta Menggunakan Tabel:
• •

Lebih mudah untuk digunakan dibandingkan dengan CSS Layout Proses desain layout tabel lebih mudah menggunakan editor WYSIWYG seperti Dreamweaver atau Frontpage Tabel dapat “rusak” dalam beberapa browser yang biasa kita gunakan, yang menyebabkan disfungsi dalam layout. Meningkatkan jumlah tag HTML yang tidak perlu, hingga akan menaikan ukuran file.

Penggunaan CSS CSS dikenal sebagai alat untuk memformat tampilan pada halaman HTML, namun kini dengan muculnya CSS2 dan dukungan browser-browser terbaru, CSS sering dipergunakan untuk pemposisian dan layouting halaman Web. Fakta Menggunakan CSS:

Telah didukung oleh kebanyakan browser versi baru, tapi tidak didukung oleh browser-browser versi lama. Lebih fleksibel dalam penempatan posisi layout. Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran file. Dapat menampilkan konten utama terlebih dahulu, sementara gambar dan lainlain dapat ditampilkan sesudahnya.

• •

Seperti terlihat pada gambar di bawah.w3.w3. Source Kode dari Web layout pada gambar di atas adalah sebagai berikut : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Kali ini akan diplajari tentang bagaimana memanfaatkan pendekatan CSS agar menghasilkan web yang elegan dan menarik.css" type="text/css" /> <style type="text/css"> <!-- .0 Transitional//EN" "http://www.org/TR/xhtml1/DTD/xhtml1-transitional.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Desain Layout Sederhana</title> <link rel="stylesheet" href="my_style.dtd"> <html xmlns="http://www.

color: #ffffff. } #leftmenu a:hover { background: #CC6600 no-repeat left center. #leftmenu a:visited. #leftmenu a:active { padding-left: 15px. text-decoration: none. color: #ffffff } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> . list-style-type:none. display: block. margin: 0px 0px 1px. margin:0. background-position: left center. padding:0. } #leftmenu a:link. } #leftmenu a { padding: 5px 0px 5px 15px. background-repeat: no-repeat. background-color: #CC9933.#leftmenu ul { width: 180px.

Sampoerna</li> .Gudang Garam</li> <li>PT. Tricks</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Photo Galerry</a></li> </ul> </div> </div> <div id="inner2"> <div id="top"><img src="foto... sehingga bagi mahasiswa non reguler di sarankan untuk segera mendaftarkan diri di A3 untuk mengambil formulir pendaftaran<br /> Read more.jpg" width="732" height="150" /></div> <div id="content"><strong> Beasiswa Non Reguler </strong> <br /> 23 Februari 2010 [07.43]<br /> <p align="justify">Universitas Negeri Malang (UM) menyelenggarakan program beasiswa untuk mahasiswa non reguler dengan syarat mengajukan PKM untuk di lombakan di antar fakultas.<div id="inner"> <div id="sidebar"> <div id="leftmenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News &amp. Media</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Tips &amp. </div> <div id="right"><strong>Beasiswa</strong><br /> <ul> <li>PT.

} #inner { . background-image: url(header30. width: 914px. } #header { height: 80px. Teknik Elektro UM. Malang.jpg).<li>Telkom</li> <li>PLN</li> <li>Pemerintah pusat</li> </ul> </div> </div> </div> <div id="footer"> <div align="center"> <p>&copy. Indonesia </p> </div> </div> </div> </body> </html> Untuk source kode CSSnya adalah sebagai berikut : #wrapper { margin: auto.

float: left. background-color: #FFFFB7. clear: none. margin: 0px. } #inner2 { float: left. } #top { width: 732px. margin-right: 0px. . height: 293px.float: left. padding: 20px. width: 180px. border: 1px solid #CC6600. } #content { width: 470px. height: 150px. height: 514px. } #right { float: right. } #sidebar { float: left.

border: 1px solid blue. height: 150px. } . height: 50px. background-color: #FFFF99. border: 1px solid #CC9900. } #footer { clear: both. padding: 10px. background-color: #CC6600.width: 200px.

Sign up to vote on this title
UsefulNot useful