AP Divs Creation in Adobe CS5 Dreamweaver - dummies

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver menggunakan wadah virtual yang diposisikan CSS, atau , dibuat oleh tag DIV untuk secara bebas memposisikan konten pada halaman. Tag DIV adalah tag dasar yang digunakan untuk membuat area untuk konten di laman Anda. Setiap tag DIV dapat memiliki gaya ID unik yang ditugaskan untuk mengendalikan posisi, penampilan, dan ukurannya.

Proses menempatkan konten seringkali memerlukan dua langkah: membuat tag DIV dan kemudian menciptakan gaya yang sesuai. Alat AP Div memungkinkan Anda menggambar kotak dengan bebas di halaman dan menempatkan konten di dalamnya.

AP Div adalah singkatan dari DIV mutlak; item dengan posisi absolut ditetapkan pada lokasi tertentu pada halaman. Saat Anda menggambar AP Div, posisinya biasanya diatur menggunakan properti CSS bagian atas dan kiri, dengan sudut kiri atas halaman sebagai rujukannya.

CSS memperlakukan setiap elemen pada halaman sebagai kotak yang menyimpan konten; disebut sebagai model CSS Box. Meskipun CSS dapat mempertimbangkan sebuah kotak untuk sebagian besar elemen yang ada pada halaman (seperti tabel atau daftar), tag DIV paling umum digunakan untuk membuat kotak virtual yang dapat Anda gunakan untuk memposisikan teks, gambar, dan bahkan kotak lainnya

Setiap kotak dapat memiliki lebar, tinggi, posisi sendiri (melalui properti atas dan kiri), batas, margin, dan padding; masing-masing diatur menggunakan aturan CSS.

1. Pada panel Insert, pilih kategori Layout.

2. Pilih alat Draw AP Div.

   Kursor muncul sebagai rambut silang saat Anda memindahkannya kembali ke atas halaman.

3. Klik di manapun pada halaman dan seret untuk menggambar Div AP yang baru; lepaskan tombol mouse.

   

   Klik dan seret halaman dengan alat Draw AP Div untuk membuat kotak.

4. Pindahkan penunjuk mouse ke tepi kotak sampai berubah ke tangan; klik sekali dan gagang muncul di semua sisi.

5. Klik dan seret salah satu pegangan ini untuk mengubah ukuran kotak secara vertikal atau horizontal.

6. Untuk memindahkan kotak, klik dan seret dengan tab yang berada di tepi kiri atas dan letakkan kotak yang Anda inginkan di halaman.

   Lihatlah inspektur Properti, dan Anda melihat namanya dan juga banyak properti DIV yang terdaftar.

7. Jika panel CSS Styles tidak terbuka, pilih Window → CSS Styles untuk membukanya; di bawah panel All, klik di sebelah kiri style sheet () untuk memperluasnya.

   Anda melihat gaya ID # apDiv1 yang baru yang terpasang pada AP Div baru yang Anda buat. Untuk setiap DIV baru yang dibuat, Dreamweaver memberi apDiv dengan nomor yang sesuai sesuai urutan penciptaan.

8. Klik di dalam kotak baru untuk mengetik, menempelkan, atau memasukkan konten baru.

Saat Anda menggambar AP Div di halaman, Dreamweaver menyisipkan sebuah tag untuk membuat kotak dan membuat pemilih ID yang menyimpan posisi DIV, lebar, tinggi, dan properti lainnya. Setelah Anda membuat AP Div, Anda dapat mengetik, menempelkan, atau menyisipkan konten secara langsung di dalamnya. Anda juga dapat menetapkan aturan kelas ke DIV manapun dari inspektur Properti.

Setiap AP Div yang Anda gambar tercantum 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.

Use panel AP Elements untuk memilih, menyembunyikan, dan mengatur ulang AP Divs di halaman Anda.