Video: Dreamweaver CS6 tutorial: Positioning elements | lynda.com 2024
Adobe Dreamweaver CS6 menggunakan kontainer virtual yang dikendalikan CSS, atau , dibuat oleh tag DIV untuk memposisikan konten dengan bebas pada satu halaman. Tag DIV adalah tag dasar yang digunakan untuk membuat area untuk konten di laman Anda.
Anda dapat membuat tag DIV dari beberapa tempat di Dreamweaver, termasuk bagian Layout pada panel Insert. Setiap tag DIV dapat memiliki gaya ID unik yang ditugaskan untuk mengendalikan posisi, penampilan, dan ukurannya. Proses menempatkan konten sering membutuhkan dua langkah: membuat tag DIV dan kemudian menciptakan gaya yang sesuai.
Dreamweaver membuat tugas ini mudah dilakukan dengan alat AP Div, yang memungkinkan Anda menggambar kotak dengan bebas di halaman dan menempatkan konten di dalamnya.
CSS memperlakukan sebagian besar elemen penampung di halaman sebagai kotak ; Pendekatan ini, yang disebut sebagai model CSS Box , memungkinkan elemen ini untuk berbagi properti seragam seperti padding, margin, width, height, dan border.
Meskipun CSS dapat menganggap hampir semua elemen yang ada di halaman sebagai kotak (seperti tabel atau daftar), tag DIV paling umum digunakan untuk membuat kotak virtual yang dapat Anda gunakan untuk memposisikan teks, gambar, dan bahkan nested kotak.
Setiap kotak dapat memiliki lebar, tinggi, posisi sendiri (melalui properti atas dan kiri), batas, margin, dan padding; masing-masing diatur menggunakan properti CSS yang sesuai.
Untuk membuat diva AP (Absolute-Positioned), ikuti langkah-langkah ini:
-
Buat halaman baru atau buka halaman yang ada dari situs Anda.
-
Pada panel Insert, pilih kategori Layout.
-
Pilih alat Draw AP Div.
Kursor muncul sebagai rambut silang saat Anda memindahkannya kembali ke atas halaman.
-
Klik di manapun pada halaman dan seret untuk menggambar Div AP yang baru; lepaskan tombol mouse.
-
Pindahkan penunjuk mouse ke tepi kotak sampai berubah menjadi panah 4 arah; klik sekali dan gagang muncul di semua sisi.
-
Klik dan seret salah satu pegangan ini untuk mengubah ukuran kotak secara vertikal atau horizontal.
-
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.
-
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.
-
Klik di dalam kotak baru untuk mengetik, menempelkan, atau memasukkan konten baru.
Saat Anda menggambar AP Div di halaman, ada dua hal: Dreamweaver memasukkan tag untuk membuat kotak dan membuat pemilih CSS ID yang menyimpan posisi DIV, lebar, tinggi, dan properti lainnya.
Setelah membuat AP Div, Anda dapat mengetik, menempelkan, atau menyisipkan konten secara langsung di dalamnya. Anda juga dapat menetapkan aturan kelas ke DIV dari inspektur Properti - paling sering untuk menangani pemformatan konten, membiarkan pemilih ID mengontrol posisi dan dimensi.
