Bagaimana Memodifikasi Absolute-Positioned (AP) Divs di Adobe Dreamweaver CS6 - dummies

Setiap Absolute-Positioned (AP) Div yang Anda gambar dalam Adobe Dreamweaver CS6 terdaftar secara otomatis di panel AP Elements (pilih Window → AP Elements untuk menampilkannya). Panel AP Elements dapat membantu Anda memilih, menyembunyikan, dan menampilkan AP Divs pada halaman. Panel ini berguna bila Anda memiliki banyak AP Divs pada halaman dan ingin menavigasi di antara mereka secara akurat.

Yang terpenting, karena Anda dapat memodifikasi properti AP Div dari gaya ID yang sesuai, panel membantu Anda mengetahui gaya ID milik AP Div.

Panel AP Elements sering dikelompokkan dengan panel CSS Styles, kalau-kalau Anda mencarinya.

Untuk memodifikasi kotak (AP Div), ikuti langkah-langkah ini:

1. Pilih Window → Elemen AP untuk membuka panel AP Elements.

2. Di panel, cari dan pilih apDiv1 untuk menyorotnya di halaman.

   Inspektur Properti menampilkan ukuran dan posisinya di samping properti lainnya.

3. Dengan menggunakan kotak teks di Property inspector, ganti kotak dengan memasukkan nomor ke kolom W dan ubah tinggi kotak dengan memasukkan nomor di bidang H.

4. Klik swatch di sebelah Bg Color dan pilih warna dari panel Swatches pop-up untuk mengatur warna latar belakang kotak.

   Untuk properti tambahan, seperti border atau padding, tambahkan di panel Styles CSS.

5. Jika panel CSS Styles belum terlihat, buka dengan memilih Window → CSS Styles.

6. Klik dua kali # ID ID apDiv1 yang mengontrol kotak.

   Kotak dialog Definisi Aturan CSS muncul.

   

7. Pilih kategori Perbatasan dari kiri untuk mengubah batas.

8. Pada kolom Style, gunakan daftar drop-down Top untuk mengatur gaya border (seperti Solid) ke keempat sisi.

   Gunakan daftar drop-down Top di bawah kategori Lebar untuk memilih ketebalan batas (misalnya, media) untuk keempat sisinya. Gunakan Color Picker paling atas di bawah kolom Warna untuk menetapkan warna border ke keempat sisinya.

   Untuk menetapkan nilai yang berbeda ke salah satu atau semua sisi untuk gaya, lebar, atau warna, hapus centang pada kotak centang Sama untuk Semua di bawah kolom masing-masing.

9. Dalam kategori Kotak di sebelah kiri, di bawah Padding, atur padding untuk keempat sisi kotak dengan ketebalan yang Anda inginkan (misalnya, masukkan 5 px ke dalam kotak teks).

10. Klik OK untuk keluar dari panel dan menerapkan perubahannya.

    Anda melihat bagaimana properti CSS yang Anda terapkan memengaruhi kotak apDiv1 pada halaman.

Untuk menyembunyikan kotak yang ditunjukkan di bawah panel Elemen AP, klik kolom di sebelah kiri namanya (di bawah ikon Mata) sampai ikon Eye yang tertutup muncul.Untuk membuat kotak muncul kembali, klik ikon Eye sampai kotak terbuka kembali.

Anda mungkin melihat kotak centang Mencegah Tumpang Tindih, tidak dipilih secara default, di bagian atas panel Elemen AP. Karena AP Divs dapat dengan mudah saling tumpang tindih, memilih kotak centang ini menimpa perilaku itu dengan memaksa kotak di samping satu sama lain dan mencegah pembuatan kotak baru di atas satu sama lain.