Lily Puspa Dewi 1 PPA Pertemuan ke – 3 Chapter 3 & 4.

Presentasi berjudul: "Lily Puspa Dewi 1 PPA Pertemuan ke – 3 Chapter 3 & 4."— Transcript presentasi:

1 Lily Puspa Dewi 1 PPA Pertemuan ke – 3 Chapter 3 & 4

2 Lily Puspa Dewi 2Font Face Face jangan dibiarkan kosong, karena default font face tiap browser berbeda jangan dibiarkan kosong, karena default font face tiap browser berbeda Font face terbaik = Verdana Font face terbaik = Verdana Size Size Color (hexadecimal) Color (hexadecimal) Bold, Italic, Underline Bold, Italic, Underline Alignment (left, center, right) Alignment (left, center, right) Color Scheme (Command > Colour Scheme)  berpengaruh pada Page property Color Scheme (Command > Colour Scheme)  berpengaruh pada Page property

3 Lily Puspa Dewi 3 Creating Flash Text Membuat text rollever di dlm Dreamweaver Membuat text rollever di dlm Dreamweaver Font integrity: di komp klien tdk perlu terinstall font yang dipakai Font integrity: di komp klien tdk perlu terinstall font yang dipakai Langsung tersimpan dalam file swf Langsung tersimpan dalam file swf Membutuhkan flash plug-in di browser Membutuhkan flash plug-in di browser

4 Lily Puspa Dewi 4 Image 3 Jenis gambar yang dipakai : 3 Jenis gambar yang dipakai : GIF GIF JPEG / JPG JPEG / JPG PNG PNG

5 Lily Puspa Dewi 5 GIF Terbatas hanya 256 warna (Kumpulan warna disebut palette) Terbatas hanya 256 warna (Kumpulan warna disebut palette) Menunjang transparency Menunjang transparency Tidak mendukung progresive image Tidak mendukung progresive image Tidak ada kompresi gambar (lossless) Tidak ada kompresi gambar (lossless) Menunjang multiple image --> animasi Menunjang multiple image --> animasi Cocok untuk simbol, grafik, animasi Cocok untuk simbol, grafik, animasi

6 Lily Puspa Dewi 6 JPEG / JPG Mampu hingga 16 juta warna Mampu hingga 16 juta warna Tidak mendukung transparency Tidak mendukung transparency Mendukung progresive image Mendukung progresive image Ada kompresi gambar (lossy) Ada kompresi gambar (lossy) Cocok untuk gambar foto, pemandangan Cocok untuk gambar foto, pemandangan

7 Lily Puspa Dewi 7 PNG Menunjang 16 juta warna Menunjang 16 juta warna Menunjang transparency Menunjang transparency Menunjang progresive image Menunjang progresive image Ada kompresi gambar Ada kompresi gambar Cocok untuk segala jenis gambar Cocok untuk segala jenis gambar Belum sepenuhnya disupport oleh semua browser Belum sepenuhnya disupport oleh semua browser Didesain untuk menggantikan GIF Didesain untuk menggantikan GIF

8 Lily Puspa Dewi 8 Link

9 9 Linking Point to file Point to file Click object yang akan di-link (image/text) Click object yang akan di-link (image/text) Click tombol di Property panel Click tombol di Property panel Click & drag ke file di Folder Management Click & drag ke file di Folder Management Note: bisa dipakai untuk insert image Note: bisa dipakai untuk insert image Link history (only text) Link history (only text) Drop down menu di property inspector Drop down menu di property inspector

10 Lily Puspa Dewi 10 Linking (2) Email Link Email Link Gunakan di Object Panel Anchor Anchor Link dalam 1 halaman Link dalam 1 halaman Biasa dipakai pada halaman yang panjang Biasa dipakai pada halaman yang panjang Anchor: Menu Insert > Invisible Tags > Named Anchor Anchor: Menu Insert > Invisible Tags > Named Anchor Link: use Point to File and point to anchor Link: use Point to File and point to anchor

11 Lily Puspa Dewi 11Table Table banyak dipakai untuk layout Table banyak dipakai untuk layout Tag … Tag … Property inspector: Property inspector: Rows & column Rows & column Width (% atau pixel) Width (% atau pixel) Border Border V space : space above & below table V space : space above & below table H space : space left & right table H space : space left & right table Cellspace : tebal table / jarak antar cell Cellspace : tebal table / jarak antar cell Cellpad : jarak antara border dengan item cell Cellpad : jarak antara border dengan item cell Tag HTML dapat berada di dalam table Tag HTML dapat berada di dalam table

12 Lily Puspa Dewi 12 Table Table  Navigation Bar Bentuk: 1 column multiple row atau 1 row multiple column Latihan: Download dari shop.petra.ac.id/pub/incoming/ppa/image Buatlah navigasi bar seperti contoh (nav_bar.html)

13 Lily Puspa Dewi 13

14 Lily Puspa Dewi 14 Table Standar View (default, seperti yang telah dilakukan) Standar View (default, seperti yang telah dilakukan) Layout View Layout View Untuk menggambar table Untuk menggambar table Object panel: Object panel:

15 Lily Puspa Dewi 15 Latihan 2 Lanjutkan homepage Moon Nest Inn Lanjutkan homepage Moon Nest Inn