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.

• •

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

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

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

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

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

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

Sign up to vote on this title
UsefulNot useful