Bagaimana Meluruskan Elemen dengan Floats di Dreamweaver - dummies

Desainer sering menyelaraskan gambar, tag, atau elemen lain ke kiri atau kanan halaman web di Dreamweaver dan kemudian membungkus teks atau konten lainnya di sekitar elemen itu. Gambar sejajar dengan kanan kolom sehingga teks membungkusnya di sebelah kiri. Pada langkah berikut, Anda mencari tahu bagaimana cara membuat gaya seperti ini.

kredit: Gambar dari istockphoto. com

CSS menawarkan banyak keuntungan ketika harus menyelaraskan elemen seperti ini, namun cara Anda mengatur gaya ini tidak sejelas yang Anda harapkan pada awalnya karena Anda menggunakan opsi pelampung.

Setelah Anda mengerti bahwa Anda dapat mengapung elemen, seperti gambar, ke sisi kiri atau kanan halaman, cukup mudah untuk menciptakan gaya yang mencapai tujuan ini. Dalam latihan ini, Anda belajar membuat dua gaya yang ideal untuk menyelaraskan gambar ke kiri dan kanan halaman, lengkap dengan sedikit margin tepat di tempat Anda membutuhkannya.

Tata letak CSS yang disertakan dalam Dreamweaver CC sudah memiliki gaya pelampung yang dapat Anda gunakan untuk menyelaraskan elemen ke kanan dan kiri. Gaya kelas ini dinamai. fltlft (untuk, Anda bisa menebaknya, float kiri) dan. fltrt (untuk float kanan).

Untuk membuat dua gaya kelas yang dapat Anda gunakan untuk menyelaraskan gambar dan elemen lainnya ke kiri dan kanan halaman, ikuti langkah-langkah ini:

1. 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.

2. 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 nama jika Anda membuat gaya kelas atau tanda # untuk gaya ID.

3. Klik dua kali nama baru dan edit sesuai keinginan.

   Meskipun Anda bisa memberi nama gaya ini sesuai keinginan Anda, gaya kesejajaran biasanya dinamai dengan fltrl dan flapl disingkat, yang masing-masing berdiri untuk mengapung dan melayang ke kiri.

   Misalnya, jika Anda membuat gaya untuk menyelaraskan elemen ke kiri, Anda akan menamainya. fltlft

4. Pada panel Properties, klik ikon yang menetapkan Float to Left.

   

5. Gunakan pengaturan Margin di panel Properties untuk membuat margin di sekitar elemen floated.

   Ada baiknya menambahkan ruang margin ke sisi yang berlawanan dari setting float. Jika Anda menciptakan sebuah gaya untuk mengapungkan gambar ke kiri, tambahkan 5 atau 10 piksel ruang ke bidang Right margin.Bila Anda menyelaraskan gambar ke sisi kiri halaman, margin akan dibuat antara gambar dan elemen lain yang membungkus di sebelah gambar.

6. Pilih gambar atau elemen lain yang ingin Anda selaraskan di halaman.

7. Pilih nama gaya yang Anda buat dari drop-down Kelas di Property inspector.

   Aturan gaya yang Anda definisikan saat Anda membuat style secara otomatis diterapkan. Jika Anda telah memilih gambar di halaman teks, gambar akan berpindah ke sisi kiri halaman dan teks akan membungkusnya dengan selisih antara gambar dan teks.

8. Ulangi Langkah 1-7, sekali dengan float diatur ke kanan dan 5 sampai 10 piksel ruang margin di bidang margin kiri dalam kategori Kotak, dan sekali lagi dengan Float set ke Left dan 5 sampai 10 pixels dari margin space di bidang Right margin dalam kategori Box.