Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
Auriza Akbar auriza.akbar@gmail.com 5 Juni 2012
CSS Layout Auriza Akbar 5 Juni 2012
2
Layout Dua Kolom Markup semantik XHTML5 Kode CSS
width, margin, padding float, clear
3
XHTML5 Section
4
Sectioning Content Konten yang mendefinisikan cakupan heading dan footer <section> <article> <aside> <nav>
5
<section> Merupakan bagian secara umum dari dokumen atau aplikasi Pengelompokkan konten sesuai tema, biasanya disertai dengan heading Contoh: bab halaman multi-tab halaman utama web dapat dibagi menjadi beberapa section: intro, berita-berita, dan info kontak
6
<article> Merupakan komposisi mandiri dalam sebuah dokumen, halaman, aplikasi, atau situs Dapat didistribusikan dan digunakan kembali secara independen posting forum artikel di majalah atau koran blog entry komentar dari pengguna
7
<aside> Untuk konten sampingan yang dapat dihilangkan tanpa mempengaruhi isi konten utama Contoh: sidebar pull quote kumpulan link alamat website
8
<nav> Merupakan bagian halaman yang me-link ke halaman lain, atau bagian lain dalam satu halaman Section dengan link navigasi
9
<header> dan <footer>
<header> merupakan sekelompok pendahuluan atau bantuan navigasi <header> biasanya berupa judul (<h1-h6>), bisa juga daftar isi atau form pencarian <footer> berisi informasi tentang bagiannya, seperti: penulis, link dokumen terkait, copyright, dan sebagainya
10
Markup XHTML5 <body> <header> <nav></nav>
<section id="articles"> <article></article> </section> <aside></aside> <footer></footer> </body>
11
Konten Header <header>
<h1><a href="#">Linux Weekly News</a></h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Archives</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>
12
Konten Article <article> <header>
<h1>The 3.5 merge window has closed</h1> <p>Posted on <time> </time> by jake</p> </header> <p>Linus Torvalds has released 3.5-rc1 which closes the merge window for this development cycle … </p> </article>
13
Konten Aside <aside> <h1>Categories</h1> <ul>
<li><a href="#">Kernel</a></li> <li><a href="#">Release</a></li> <li><a href="#">Security</a></li> </ul> </aside>
14
Tampilan tanpa CSS
15
CSS Layout
16
Set body width and margin
body { max-width: 800px; } membatasi lebar halaman menjadi 800 pixel memudahkan membaca, teks tidak terlalu panjang body { margin-right: auto; } body { margin-left: auto; } posisi <body> menjadi ke tengah layar
18
Float
19
Strategi Dua Kolom
20
Set articles column #articles { float: left; }
#articles akan "melayang" ke sebelah kiri #articles { width: 70%; } dengan lebar 70% dari <body>
21
Set aside column aside { float: right; }
<aside> akan "melayang" ke sebelah kanan aside { width: 25%; } dengan lebar 25% dari <body>
22
Footer: clear float footer { clear: both; }
menghilangkan efek float elemen sebelumnya, baik kanan maupun kiri <footer> akan menempati baris yang baru jika tidak di-clear, hasilnya akan seperti ini:
24
Navigation list nav ul { list-style: none; }
menghilangkan bullet di depan list nav ul { padding-left: 0; } menghilangkan padding kiri, agar list rata kiri sejajar dengan heading
25
Navigation list nav ul li { display: inline; }
item-item list menjadi memanjang dalam satu baris (perbaikan untuk bug di kuliah kemarin) nav ul li { margin-right: 50px; } memberikan jarak antar list sebesar 50 pixel
27
Style Halaman Berikan style sesuai selera kita
Batasi penggunaan image, karena akan memperberat loading halaman Contoh template HTML5:
29
EOF
Presentasi serupa
