soal untuk uas dw2 materi kuliah belajar menggunakan css + html menggunakan aplikasi dreamweaver, hanya saya modif sedikit dari materi belajar pertemuan 12 yang sudah saya terbitkan disini hanya menambahkan sedikit form dan posisi menu utama saja berikut tampilan soal nya :

ini soal yang pertama untuk hari jumat tgl 22 01 2010:



ini soalyang kedua untuk hari kamis tgl 21 01 2010



kalau diperhatikan no 1 dan 2 hanya berganti posisi div form no 1 di atas header sedangkan no 2 di dalam header.

agar tidak lupa lagi neh mengasih materi untuk disampaikan kepada mahasiswa nantinya, sebab saya suka ada penyakit lupa banget hehehehe.

Pertemuan 1

- pengenalan css
- penulisan aturan css
- penulisan selektor, property, value
- buat layout dengan tabel

pertemuan 2
- property huruf (font-size, font-family)
- property background (image, color, repeat, position)
- selektor tag html
- latihan gabungan huruf dan background

pertemuan 3
- pengenalan selektor class
- property teks
- latihan gabungan dari temu 2 dan temu 3

pertemuan 4
- property border
- selektor id
- struktur layout (header, content, footer)

pertemuan 5
- property padding
- property margin
- property float

pertemuan 6 (coba quiz)
- membuat layout 2 kolom (bisa kanan, atau kiri)

pertemuan 7
- property list (ol dan ul)
- penggunaan link untuk menu (dari ol dan ul)
- property pseudo class (a: hover, a:visited, a:active)
- trik membuat layout ke posisi tengah (selektor{margin:0 auto;}
- menghilangkan kelebihan float dengan property overflow:hidden

pertemuan 8
- UTS (membuat layout 3 kolom + pseudo class :: dengan menarik)

pertemuan 9
- membahas uts 3 kolom
- trik membuat struktur layout dengan div id=wrapper|container|bungkus
- penempatan property clear:both dan overflow:hidden di selektor yang tepat

pertemuan 10
- membuat menu navigasi horizontal dan vertikal dari list

pertemuan 11
- property display
- membuat menu navigasi horizontal dan vertikal menggunakan div id
- membuat layout dengan menu horizontal dan vertikal dengan div id

pertemuan 12
- membuat layout multi kolom dengan property div class = class yang dijadikan id di sisi kanan atau kiri
- property line-height

pertemuan 13
- merapikan form dengan css
- property label, input, textarea dll

pertemuan 14
- membuat layout multi kolom, multi menu + form

pertemuan 15
- membuat pop up menu dari list ul
- perkenalan dengan jquery

pertemuan 16
- UAS (semesteran)

materi file lengkap ada di sini

penggunaan global reset css ini memudahkan dalam pembuatan layout agar pengaturan jarak atau space bisa di atur dengan mudah.

berikut contoh kode yang saya gunakan .

kode css reset global

* { margin : 0 auto;
padding : 0;
}

fungsi ini membuat layout nya ke posisi tengah pada halaman browser.

margin : 0 auto = nilai nol untuk mengilangkan jarak luar antar border atau halaman browser maka jika di gunakan tidak ada jarak sama sekali pada posisi atas dan bawah, sedangkan fungsi auto untuk posisi kanan dan kiri dengan ukuran bebas.

sedangkan padding untuk menghilangkan jarak dalam antara teks dengan garis border, gambar dengan teks.

selain itu bisa juga di letak kan dalam selektor seperti

#wrapper { margin : 0 auto; }

fungsi wrapper sebagai kotak yang membungkusi seluruh isi di dalam nya.

untuk membuat jenis huruf dan ukuran semua nya sama maka property font-family dan font-size diletakkan dalam tag body.

body{font-family:arial; font-size:12px; }

ini berpengaruh ke seluruh tag yang memakai huruf baik dari H1 - H6 dan tag p.

jika ditulis keseluruhan seperti berikut :

* { margin : 0 auto;
padding : 0;
}

body{font-family:arial; font-size:12px; }

selamat mencoba salam sukses selalu.

untuk link yang lebih lengkap kunjungi link berikut :

perishablepress.com

Css project lagi neh, kemaren ngasih materi pertemuan ke 12 tentang desain web 2, sebenar nya materi tersebut dari guru saya tuh rosihanari tentang tutorial css.

berikut tampilan materi dari sang guru



sebenarnya materi yang di sampaikan oleh sang guru seh saya modifikasi sedemikian rupa, sebab ini materi ini judul nya "PENGGUNAAN DIV CLASS" di mana class di sisip kan kedalam div.

berikut hasil yang sudah saya modif.



kalau di lihat tidak jauh berbeda kan, hehehe
kalau anda tertarik dengan materi ini silahkan download deh

kemaren belajar dari berbagai website yang memberikan tutorial nya dan saya copy paste murni tapi sudah saya modif sedmikian rupa seperti ini.

berikut gambar nya :


Kalau kalian ingin mengambil sluruh file nya silahkan

download

seluruh isi dalam file tersebut boleh di publikasin untuk umum, tapi jangan lupa tetap memakai nama saya rais sebagai pemilik nya.

terima kasih

insya allah semua materi ini terpenuhi, merombak system pengajaran saya waktu semester kemaren...

Temu 1
Perkenalan css
Perkenalan cara penulisan
Perkenalan tag html
Menggunakan css

Temu 2
Perkenalan macam macam selector
Css heading
Css background
Css Font
Css Teks

Temu 3
Css list
Css border
Css box model (margin dan padding)
Css classification

Temu 4
Css pseudo element
Konsep layout
Membuat layout dengan box model

Temu 5
Kreasi form dengan css

Temu 6
Studi kasus membuat layout

Temu 7
Studi kasus membuat layout dengan gambar
Studi kasus layout banyak kolom

Temu 8
Mid semesteran.

Temu 11 – 15
Studi kasus mandiri membuat layout
Membuat project layout web (mandiri)

materi kali ini kita membuat project layout web dengan css, yakni enlights tens, project ini saya buat secara bertahap dan terarah, maka untuk lebih singkat nya kamu download aja oke.


Klik Disini

ebook ini baru 1/2 nya jadi.

Hmmm...CSS, apa neh obat sakit maag, obat sakit mata, oh bukan ini sejenis makanan, ngaco aja lo, ini adalah kode sejenis roti, gedubrak, brak patah...

CSS singkatan dari Cascading Style Sheet...

css adalah sebuah dokumen yang berisi aturan yang digunakan untuk memisahkan isi dengan layout dalam halaman-halaman web yang di buat.

css memperkenalkan "TEMPLATE" yang berupa style untuk dibuat dan mengizinkan penulisan kode yang lebih mudah ari halaman-halaman web yang dirancang.

cara kerja css sangatlah mudah hanya membutuhkan style sebagai penentu dari font, warna, jarak, dan lain lain dari pengaturan html.

tiap style memiliki dua buah elemen dasar, yaitu "selector" dan "declaration".

Sebuah selector adalah tag HTML, sementara declaration adalah salah satu perintah atau nilai dari css.

Selector juga terdiri dari Tag, Class, Ids, dan Pseudo yang digunakan sebagai pemisah antar elemen. Bagian pertama sebelum tanda "{ }" itulah yang dinamai dengan selector.

penulisan dalam CSS :

1.