PENGENALAN HTML - 3
A.
Layer
Layer merupakan salah satu keunggulan Dreamweaver dibandingkan dengan editor HTML lainnya. Dengan layer, kita dapat membuat halaman HTML yang tampilannya lebih fleksibel. Layer digunakan untuk menampilkan objek dengan posisi yang dapat diatur-atur sesuka kita, tanpa terbatas pada pandangan barisdemi-baris. Analoginya,
layer diumpamakan sebagai plastic transparan yang
dapat diletakkan dimana saja di atas kertas. Selama bekerja dengan layer, alangkah baiknya apabila window Layers dalam keadaan aktif. Caranya, klik menu Window, kemudian Layers.
Gambar 1. Layer Toolbar
A.1
Memasukkan Layer ke dalam Dokumen
Untuk memasukkan layer ke dalam dokumen, kita dapat mengklik menu Insert > Layout Object > Layer. Maka, akan muncul objek seperti ini :
Gambar 2. Tampilan Layer (design view) Anda dapat memasukkan lebih dari satu layer ke dalam dokumen Anda. Namun perlu diingat bahwa semakin banyak layer maka semakin besar pula dokumen
24
Anda. Setelah memasukkan layer ke dalam dokumen, maka window Layer akan menampilkan status dari semua layer yang ada di dalam dokumen.
Gambar 3. Active Layer Penjelasan : Prevent Overlaps, berarti setiap layer yang ada akan dilarang untuk saling tumpang tindih.
Tabel di dalam window
Layers menampilkan semua layer yang ada pada
dokumen. Urutannya yaitu dimulai dari yang paling atas sampai dengan paling bawah. Layer yang terletak di atas layer yang lain, akan ditampilkan lebih di atas (lebih kelihatan). Kolom bergambar mata, menandakan layer apakah terlihat atau tidak. Kolom Name menandakan nama layer, dan kolom Z menandakan ketinggian layer. Semakin besar Z, maka layer akan ditampilkan semakin terlihat (menutupi layer-layer lain dengan Z lebih kecil). Untuk mengubah urut-urutan ini, Anda dapat men-drag layer ke atas atau ke bawah atau mengubah nilai Z yang dimilikinya.
A.2.
Mengaktifkan Layer
Untuk mengaktifkan layer, Anda dapat mengklik pada kotak kecil di pojok kiri atas layer yang bersangkutan, atau mengklik pada pinggiran layer yang bersangkutan.
A.3.
Memindahkan dan Mengubah Ukuran Layer
Untuk memindahkan layer, aktifkan dulu layer yang diinginkan. Kemudian Anda dapat men-drag pinggiran layer ke tempat yang Anda inginkan. Untuk mengubah
25
ukuran layer, Anda dapat men-drag salah satu kotak di pinggiran layer sampai ukuran yang diinginkan tercapai.
Gambar 4. Tampilan Layer
A.4.
Mengubah Properti-Properti Layer
Untuk mengubah properti layer, Anda dapat mengaktifkan dahulu layer yang dinginkan, kemudian lihat pada Object Properties.
Gambar 5. Layer Properties Kita akan membahas sebagian saja dari Layer Properties ini. •
Properti L menandakan posisi horizontal layer terhadap pinggir kiri dokumen
•
Properti T menandakan posisi vertikal layer terhadap bagian atas dokumen
•
Properti W menandakan lebar layer
•
Properti H menandakan tinggi layer
•
Z-index adalah urutan layer
•
Vis adalah visibility, dimana jika default atau visible, maka layer akan terlihat. Sedangkan bila invisible, maka layer tidak terlihat. Dan jika inherit, maka layer akan menuruti sifat layer induknya. Bila layer induk visible maka ia juga visible. Begitu pula sebaliknya.
•
Bg Image adalah gambar latar belakang dari layer
•
Bg Color adalah warna latar belakang dari layer
26
•
A.5.
Class adalah jenis style css dari layer
Mengisi Objek Pada Layer
Untuk mengisikan objek ke dalam layer, klik kiri mouse di atas layer yang diinginkan. Kemudian mulailah mengetik atau memasukkan gambar, table, dan objek-objek lain.
Gambar 6. Contoh pengisian objek pada layer Pada gambar diatas, terdapat 2 buah layer, dimana layer pertama berada di bawah layer kedua karena Z-index layer pertama lebih kecil dari Z-index layer kedua. Jika Anda melihat hasilnya pada browser, maka pinggiran layer tidak akan terlihat.
Gambar 7. Tampilan Layer pada Browser
27
B.
Frame
Frame ialah cara untuk menampilkan beberapa halaman HTML dalam satu jendela browser. Yaitu dengan membagi-bagi satu jendela browser menjadi beberapa bagian, dimana tiap bagian
menampilkan halaman HTML yang
berbeda-beda.
Untuk bekerja dengan frame, Anda harus membuat satu halaman baru sebagai frameset. Dimana di dalam frameset ini terdapat beberapa halaman HTML untuk ditampilkan. Jadi, satu frameset bisa mengandung beberapa halaman HTML.
Gambar 8. Struktur Frameset
Selama bekerja dengan frame, alangkah baiknya bila toolbar frame dala keadaan aktif. Caranya, klik menu Window, Frame (atau Shift+F2). Sedangkan Object Properties juga sebaiknya dalam keadaan aktif (menu Window, Properties atau Ctrl+F3).
Gambar 9. Toolbar Frame
28
B.1.
Menambahkan dan Mengaktifkan Frame
Untuk menambahkan frame, pertama-tama Anda aktifkan dulu halaman yang akan ditambahkan frame. Kemudian pada insert tab > Layout pilih Frames,
Gambar 10. Frame Tool Pilih salah satu dari frame layout :
Gambar 11. Frame Layout Frame
Desciption Menambahkan frame kecil di sebelah kiri Menambahkan frame kecil di sebelah kanan Menambahkan frame kecil di atas Menambahkan frame kecil di bawah Menambahkan frame di sebelah kiri dan bawah, dengan frame bawah diprioritaskan Menambahkan frame di sebelah kanan dan bawah, dengan frame bawah diprioritaskan Menambahkan frame di sebelah kiri dan bawah, dengan frame kiri diprioritaskan Menambahkan frame di sebelah kiri dan bawah, dengan frame
29
kanan diprioritaskan Menambahkan frame di atas dan bawah Menambahkan frame di sebelah kiri dan atas, dengan frame kiri diprioritaskan Menambahkan frame di sebelah kanan dan atas, dengan frame kanan diprioritaskan Menambahkan frame di sebelah kiri dan atas, dengan frame atas diprioritaskan Menambahkan frame di sebelah kanan dan atas, dengan frame atas diprioritaskan
Sebagai contoh, jika halaman HTML asalnya kosong, dan kemudian dimasukkan frame di sebelah kiri, maka halaman menjadi tampak seperti in (ilustrasi) :
Gambar 12. Contoh Left Frame Sedangkan window frame menjadi seperti ini :
Gambar 13. Tampilan Left Frame pada Window Frame
30
Lihat pada contoh gambar di atas. Saat ini, frame yang aktif adalah frame di sebelah kiri, yang ditandai dengan garis kotak tebal di sekeliling diagram. Jika Anda ingin mengaktifkan frame yang lain, klik pada diagram yang mewakili frame yang Anda inginkan. Jika Anda ingin mengaktifkan frameset, maka Anda dapat mengklik di pinggiran diagram tersebut.
Gambar 14. Active Frameset Lihat pada diagram di atas, tampak bahwa garis tebal mengelilingi keseluruhan frame. Berarti, frameset sekarang dalam keadaan aktif.
B.2.
Mengubah Properti-Properti Frame
Untuk mengubah properti frame, secara sederhana Anda dapat mengaktifka frame yang akan Anda ubah propertinya. Untuk cara mengaktifkan frame Anda dapat melihat kembali di bagian sebelumnya. Kemudian, lihat pada window Object Properties. Tampak properti-properti yang dimiliki oleh sebuah frame.
Gambar 15. Frame Properties Frame Name adalah nama dari frame yang sedang aktif. Nama frame ini penting untuk dicatat karena dapat digunakan untuk membuat link lintas frame.
31
Src adalah nama file sumber dari frame yang sedang aktif. Untuk mengubah halaman yang ditampilkan, Anda dapat mengganti properti Src dengan salah satu file HTML yang telah Anda buat. Scroll untuk menentukan apakah frame yang sedang aktif akan diberi scrollbar ataukah tidak. Jika dipilih Auto, maka scrollbar diberikan hanya jika dokumen tidak dapat ditampilkan dalam satu layar sehingga diberikan scrollbar. No Resize : Jika dalam keadaan ter-cawang, maka frame tidak bisa diresize oleh user. Sedangkan jika tidak dalam keadaan ter-cawang, maka frame dapat di-resize oleh user. Borders menentukan apakah frame diberi border. Border Color menentukan warna dari border frame.
B.3.
Mengubah Properti-Properti Frameset
Untuk mengubah properti frameset, Anda dapat mengaktifkan dahulu framesetnya. Kemudian properti dapat diubah pada Object Properties.
Gambar 16. Frameset Properties Penjelasan : • Borders menentukan apakah semua frame diberi border. • Border Width menentukan lebar border • Border Color menentukan warna border
B.4.
Mengubah Ukuran dan Menghapus Frame
Untuk mengubah ukuran frame, secara sederhana Anda dapat men-drag batas frame ke arah horizontal atau vertikal sampai ukuran yang diinginkan tercapai. Untuk menghapus frame, Anda dapat men-drag batas frame sampai ke luar Document Window.
32
B.5.
Save Semua Frame
Yang perlu diingat dalam bekerja dengan frame yaitu sebelum mem-preview hasil pekerjaan Anda, Anda perlu menyimpan semua frame yang telah dibentuk. Caranya, klik menu File, kemudian Save All Frames. Maka Anda akan diminta untuk memberi nama file untuk
frameset beserta frame-frame yang ada di
dalamnya.
33
