CSS Layouting. Antonius RC Pemrograman Web

Transkripsi

1 CSS Layouting Antonius RC Pemrograman Web

2 CSS Selector Tambahan Tanda > artinya select child element Contoh: ul > li Maka akan terambil 2 elemen li

3 CSS Selector Tambahan Tanda + artinya select adjecent element Adjecent artinya immediatelly following element Contoh: h2 + p Maka akan terambil <p> pertama Juga akan terambil <p> pertama walaupun ada pemisah teks

4 CSS Box Model Margin Tidak memiliki warna background dan bersifat transparan Border Memiliki warna background dan berada diantara margin dan padding Padding Membatasi area dengan konten, terpengaruh oleh warna background dari kotak Content isi konten (teks dan gambar)

5 Cara menghitung ukuran element

6 CSS Margin dan Padding

7 W3C box model vs IE box model IE < 8 BUG! (includes padding and border in the width) To fix always add DOCTYPE

8 CSS Margin Margin is default set on order: top, right, bottom, left margin:25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px margin:25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px margin:25px 50px; top and bottom margins are 25px right and left margins are 50px margin:25px; all four margins are 25px

9 Contoh CSS Box model

10 CSS Border <style type="text/css"> p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} </style> <p class="none">no border.</p> <p class="dotted">a dotted border.</p> <p class="dashed">a dashed border.</p> <p class="solid">a solid border.</p> <p class="double">a double border.</p> <p class="groove">a groove border.</p> <p class="ridge">a ridge border.</p> <p class="inset">an inset border.</p> <p class="outset">an outset border.</p> <p class="hidden">a hidden border.</p>

11 Hasil

12 Menyembunyikan Element Ada dua cara yang berbeda: visibility:hiddenmenyembunyikan elemen, tetapi memakan ruang sehingga mempengaruhilayout secara keseluruhan Contoh: div.sembunyi {visibility:hidden;} display:nonemenyembunyikan elemen dan tidak memakan ruang, sehingga seolah-olah elemen itu tidak ada Contoh: div.sembunyi {display:none;}

13 Contoh hidden

14 Contoh none

15 CSS Table Urutan Border property: Border-width Border-style Border-color Border-Collapse: Collapse: garis batas tabel menyatu Separate: garis batas tabel terpisah Table layout: Auto: lebar tabel mengikuti konten cell yang terpanjang; redering lambat Fixed: lebar tabel tetap, berdasarkan width & height; rendering cepat Empty-cell Show: border terlihat Hide: border tidak terlihat

16 Contoh CSS Tabel

17 Tabel

18 Contoh lain

19 Why Don't Use Tables forlayout Tables are inflexible Nested tables load more slowly Table can hurts Search Engine optimization Tables are not suits for printing

20 CSS for printing <link rel="stylesheet" type="text/css" href="print.css" media="print"> Media can be: print or screen For printing: Change colors to black on white. Change the font to serif. Watch the font size. Underline all links. Remove non-essential images. Remove navigation. Remove some or most of the advertising. Use page-break-before: always for page-break Remove all JavaScript, Flash, and animated images.

21 CSS for printing example Font : serif, black, back white Link underline #comments {page-break-before: always;} Remove unnecessary element

22 One column layout HTML: <div id="header"> <h1>one Column Layout</h1> </div> <div id= onecol"> bla bla bla bla </div> CSS: #onecol{ width:600px; margin:0 auto; background-color:#ccc; border:#000 } #header { width: 600px; margin: 0 auto; background-color: #999; padding: 2px 0; } h1 { text-align: left; }

23 Two Column Header <div id= header > </div> <div id= left"> </div> <div id= right > </div> <div id="footer"> </div>

24 #header { width: 100%; margin: 0 auto; padding: 2px 0; background-color:#666; } #left{ float: left; width: 67%; background: #fff; margin-top: 0; margin-right: 1.67px; border-right: 1px solid black; padding-top: 0; padding-right: 1px; padding-bottom: 20px; } Lanjutan #right { padding-left: 2px; margin-top: 0; padding-top: 0; } h1 { margin-top: 0; padding-top: 0; } #footer { clear: both; padding-bottom: 1px; border-top: 1px solid #333; text-align: center; background-color:#999999; } The clear property specifies which sides of an element where other floating elements are not allowed.

25 Layouting Tutorial 1

26 Langkah 1 HTML biasa

27 <div> <div> <H1>site name</h1> <div> <ul> <li></li> </ul> <div> <h2>page Heading</h2> <p></p>... </div> <div>copyright</div> </div> </div> Struktur HTML

28

29 Header

30 Navigation

31 #navigation li a:hover { background:#383; } Konten

32 Footer

33 Layouting Tutorial 2 Hasil Akhir

34 Langkah Buat tiga kolom: <div id="leftnavigation"> </div> <div id="rightnavigation"> </div> <div id="content"> </div>

35 HTML

36 CSS

37 Hasil akhir

38 Studi Kasus 2

39 Pembagian Area Gambar

40 Penamaan Area container header mainnav menu contents footer

41 HTML Awal

42 CSS Awal

43 Hasil CSS Awal kasus2-1.css

44 CSS Screen kasus2.css

45 CSS Print kasus2print.css

46 More resources on CSS layouting awesomely-simple-and-free-css-layouts/

47 Javascript dan JQuery Next