Video: Cara Mengatur Jarak pada Teks dengan CSS 2024
Dreamweaver memungkinkan Anda untuk memusatkan tata letak Anda menggunakan margin CSS. Banyak desain halaman web terpusat pada halaman sehingga terlihat melayang di antara sisi jendela browser tidak peduli seberapa lebar atau sempitnya jendela. Ini membantu menciptakan ilusi bahwa desain mengisi halaman, bahkan jika jendela browser jauh lebih lebar daripada desain halaman.
Sebagian besar desain halaman web yang dibuat dengan CSS mencapai efek ini dengan membuat satu tag yang mengelilingi semua konten halaman dan kemudian menerapkan gaya pada tag itu yang mencakup aturan gaya yang memusatkan tag tersebut. Seperti yang Anda temukan dalam petunjuk langkah-demi-langkah berikut, membuat gaya untuk memusatkan tag tidak sejelas yang Anda bayangkan tapi mudah diterapkan.
Praktik umum adalah menggunakan gaya ID untuk tag yang memusatkan desain Anda, dan beri nama #wrapper atau #container.
Jika halaman Anda belum disiapkan dengan tag di sekitar semua konten Anda, inilah tip untuk menambahkannya. Pertama klik dan seret untuk memilih semua teks, gambar, dan konten lainnya pada halaman. Kemudian pilih Insert → Layout Objects → Div Tag. Di kotak dialog Insert Div Tag, pastikan pilihan Wrap around Selection dipilih dari daftar drop-down Insert.
Biarkan sisa kolom kosong dan klik OK untuk menambahkan tag di sekitar semua konten halaman Anda, dan Anda siap mengikuti langkah-langkah berikut.
Untuk memusatkan keseluruhan desain halaman, pastikan bahwa tag mengelilingi semua konten halaman, dan ikuti langkah-langkah ini:
-
Klik tanda plus di panel Desainer CSS Designer.
Bergantung pada apa yang ada di halaman, nama gaya baru atau bidang kosong tempat Anda dapat memasukkan nama gaya ditambahkan ke panel Selectors.
-
Klik dua kali untuk memilih nama yang ditambahkan Dreamweaver ke panel dan mengubahnya menjadi nama yang Anda inginkan untuk gaya baru Anda, atau klik untuk memilih bidang kosong dan masukkan nama.
Jika tidak ada nama yang ditambahkan, masukkan nama yang Anda inginkan di lapangan kosong. Anda bisa memberi nama gaya apapun yang Anda suka, tapi pastikan untuk memasukkan periode sebelum namanya jika Anda membuat gaya kelas, atau tanda # untuk gaya ID.
-
Di panel Properties, tentukan lebar, margin, dan pengaturan pemformatan lainnya yang ingin Anda definisikan.
Lebar untuk tag penampung diatur ke 980 piksel. Inilah trik untuk memusatkan tag seperti ini: Setel margin kiri dan kanan ke Auto. Dengan cara itu, browser secara otomatis menambahkan jumlah ruang margin yang sama ke setiap sisi tag, yang secara efektif memusatkannya di halaman.
-
Pilih ID yang mengelilingi semua konten di halaman.
Untuk memastikan Anda memilih tag yang tepat, klik untuk menempatkan kursor Anda di manapun di bagian utama halaman, lalu klik tag yang tercantum di sebelah terjauh kiri di Quick Tag Selector di bagian bawah ruang kerja.
-
Dengan tag yang dipilih, pilih nama gaya yang Anda buat dari daftar drop-down ID di Property inspector.
Aturan gaya yang Anda tetapkan saat membuat style secara otomatis diterapkan pada tag. Dalam contoh ini, hasilnya adalah ukuran tag berubah menjadi lebar 980 piksel dan tag beserta isinya dipusatkan pada halaman.
Tidak semua fitur bekerja saat Dreamweaver diatur ke tampilan Live. Meskipun Live view adalah cara yang bagus untuk melihat bagaimana desain halaman Anda akan terlihat di kebanyakan web browser modern, penggunaan fitur Live view membuat banyak alat editing Dreamweaver tidak dapat digunakan lagi. Jika, misalnya, inspektur Properti tampak redup saat Anda ingin menggunakannya, pastikan tombol Live tidak terpilih.
