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.

• •

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. Seperti terlihat pada gambar di bawah.w3.css" type="text/css" /> <style type="text/css"> <!-- .w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Desain Layout Sederhana</title> <link rel="stylesheet" href="my_style.0 Transitional//EN" "http://www.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

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

jpg" width="732" height="150" /></div> <div id="content"><strong> Beasiswa Non Reguler </strong> <br /> 23 Februari 2010 [07.Sampoerna</li> .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> <div id="right"><strong>Beasiswa</strong><br /> <ul> <li>PT. Media</a></li> <li><a href="#">Tutorial</a></li> <li><a href="#">Tips &amp.. sehingga bagi mahasiswa non reguler di sarankan untuk segera mendaftarkan diri di A3 untuk mengambil formulir pendaftaran<br /> Read more. 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.<div id="inner"> <div id="sidebar"> <div id="leftmenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News &amp.Gudang Garam</li> <li>PT..

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

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

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

Sign up to vote on this title
UsefulNot useful