Menggunakan Layer untuk mengatur letak halaman

Layer cocok digunakan untuk membuat tata letak halaman yang kompleks karena Anda dapat dengan mudah merubah posisi elemen-elemen halaman yang Anda taruh dalam layer hanya dengan men-drag layerlayer tersebut. Dalam latihan ini Anda akan mengatur tata letak homepage dengan menggunakan layer dan kemudian mengkonversi tata letak tersebut menjadi sebuah tata letak tabel agar halaman dapat ditampilkan secara akurat seperti aslinya pada browser versi 3.0 dan 4.0. Anda tidak dapat mengkonversi layer menjadi tabel jika dokumen yang akan dikonversi mengandung  nested layers (layer yang mengandung layer) atau overlapping layers (layerlayer yang saling bertumpukan).

Menambah layer

1. Pilih Window | Layer untuk membuka Layer palette.

2. Yakinkan bahwa kotak Prevent Overlaps tercentang.

3. Klik jendela dokumen my_scall_home untuk membuat dokumen tersebut menjadi aktif.

4. Pilih Insert | Layer.

5. Pada panel Object palette’s Common, klik tombol Draw Layer.

6. Pindahkan pointer ke jendela dokumen; pointer berubah menjadi drawing tool. Dibawah layer pertama, klik dan tarik (drag) pointer untuk menggambar sebuah layer.

7. Lakukan langkah ke 5 dan 6 untuk menambahkan sebuah layer lagi. Halaman Anda harus tampak seperti tampilan di bawah ini

Memilih dan memanipulasi sebuah layer

Anda dapat mengubah posisi atau ukuran dari layerlayer yang ada di dokumen Anda.

1. Klik bingkai dari layer Muncul Handles (kotak hitam kecil sebanyak 8 buah) di sekitar layer terpilih.

2. Untuk mengubah ukuran        layer, klik salah satu      handles, dan geser    handles hingga sesuai dengan ukuran yang diinginkan.

3. Untuk menggerakkan sebuah layer, lakukan satu dari beberapa langkah di bawah ini :

‹     Gunakan tombol panah di keyboard.

‹     Tekan tombol Shift dan gunakan tombol panah untuk mengerakkan sebuah layer

5 pixel ke arah panah.

‹     Klik tab yang terletak di sudut kiri atas dari layer dan geser layer ke posisi yang diinginkan.

Menambahkan sebuah gambar

Sekarang Anda akan menambahkan gambar logo Scall ke dalam dokumen.

1. Klik di mana saja pada layer paling atas. Dengan mengklik di dalam sebuah layer maka posisi kursor akan berada di dalam sebuah layer tanpa menyorot layer. Sebuah aktif layer dengan kusor akan tampak sebagai berikut :

2. Pilih Insert | Image.

3. Dalam kotak dialog Select Image Source, pilih folder Sites/Scall_site/Images, pilih logo_scaal.gif, dan klik Select. Gambar muncul di layer.

Menambahkan gambar navigasi

Sekarang Anda akan menambahkan gambar-gambar untuk menjadi tombol navigasi. Setelah Anda menambahkan gambar tombol, beri spasi antara gambar-gambar tersebut: tambahkan sebuah paragraf kosong setelah Anda menyisipkan gambar-gambar.

1. Letakkan kursor pada layer navigasi (layer di kiri bawah).

2. Pada panel Oject palette’s Common, klik tombol Insert Image.

Kotak dialog Select Image Source muncul.

3. Pada folder Images dari Scall_site, pilih btn_ourstory_up.gif, dan klik Select untuk menempatkan gambar. Gambar Our Story muncul di layer

4. Letakkan kursor setelah gambar di layer, dan tekan Enter untuk memberikan spasi antar gambar ini dengan gambar yang akan Anda sisipkan berikutnya.

5. Pada Object palette, klik tombol Insert Image, dan pada kotak dialog yang muncul pilih btn_products_up.gif, dan kemudian klik Select.

6. Tempatkan kursor setelah gambar, dan tekan Enter.

7. Pada Object palette, klik tombol Insert Image, dan pada kotak dialog yang muncul pilih btn_thisweek_up.gif, dan kemudian klik Select. Tata letak dokumen Anda akan terlihat sama seperti di bawah ini :

Memberi nama gambar

Jadikanlah sebuah kebiasaan dengan memberi nama semua elemen yang ada di dalam

dokumen Anda. Jika di kemudian hari Anda butuh untuk referensi atau memilih sebuah

gambar tertentu, Anda akan dengan mudah mengidentifikasikannya.

1. Di dalam jendela dokumen, klik gambar Our Story.

2. Pada field Image di Property inspector, ketik ourstory.

3. Ulangi langkah-langkah di atas, pilih dan beri nama kedua gambar yang lain. Beri

nama products pada gambar kedua dan thisweek pada gambar ketiga.

Selamat Mencoba

~ oleh wahyututorial pada 14 April 2010.

Satu Tanggapan to “Menggunakan Layer untuk mengatur letak halaman”

  1. GNDKZi rjcvqxfigurj, [url=http://kkxajvxzabhd.com/]kkxajvxzabhd[/url], [link=http://ktprujnplhpp.com/]ktprujnplhpp[/link], http://fmlpdwtthbtn.com/

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: