Video: 03 - Membuat Layout 2024
Dreamweaver membolehkan anda memusatkan susun atur anda menggunakan margin CSS. Reka bentuk laman web banyak dipusatkan pada halaman supaya mereka kelihatan terapung di antara sisi tetingkap pelayar tidak kira seberapa luas atau sempit tetingkap menjadi. Ini membantu mewujudkan ilusi bahawa reka bentuk mengisi halaman, walaupun tetingkap penyemak imbas jauh lebih luas daripada reka bentuk halaman.
Kebanyakan reka bentuk halaman web yang dibuat dengan CSS mencapai kesan ini dengan membuat satu tag yang mengelilingi semua kandungan halaman dan kemudian memohon gaya pada tag itu yang termasuk peraturan gaya yang memusatkan tag itu. Seperti yang anda temukan dalam arahan langkah demi langkah berikut, mencipta gaya untuk memusatkan teg tidak begitu jelas seperti yang anda bayangkan tetapi mudah dilaksanakan.
Amalan biasa ialah dengan menggunakan gaya ID untuk tag yang menentusahkan reka bentuk anda, dan menamakannya #wrapper atau #container.
Jika halaman anda belum ditetapkan dengan tag di sekeliling semua kandungan anda, inilah tip untuk menambahkannya. Klik pertama dan seret untuk memilih semua teks, imej, dan kandungan lain pada halaman. Kemudian pilih Masukkan → Layout Objects → Div Tag. Dalam kotak dialog Taipkan Tag Tag, pastikan pilihan Bungkus Seleksi dipilih dari senarai juntai Sisipan.
Biarkan seluruh medan kosong dan klik OK untuk menambah tag di sekeliling semua kandungan halaman anda, dan anda bersedia untuk langkah yang mengikuti.
Untuk memusatkan keseluruhan reka bentuk halaman, pastikan teg mengelilingi semua kandungan halaman, dan ikuti langkah berikut:
-
Klik tanda tambah dalam panel CSS Designer Selectors.
Bergantung pada apa yang ada pada halaman, nama gaya baru atau medan kosong di mana anda boleh memasukkan nama gaya ditambah ke panel Selectors.
-
Klik dua kali untuk memilih nama yang Dreamweaver ditambahkan pada panel dan ubah ke nama yang anda inginkan untuk gaya baru anda, atau klik untuk memilih medan kosong dan masukkan nama.
Jika tiada nama ditambah, masukkan nama yang anda inginkan dalam medan kosong. Anda boleh menamakan gaya apa sahaja yang anda suka, tetapi pastikan untuk memasukkan tempoh sebelum nama jika anda membuat gaya kelas, atau tanda # untuk gaya ID.
-
Dalam panel Properties, tentukan lebar, margin, dan sebarang tetapan pemformatan lain yang anda mahu tentukan.
Lebar untuk tag kontena ditetapkan kepada 980 piksel. Inilah silap mata untuk memusatkan teg seperti ini: Tetapkan margin kiri dan kanan ke Auto. Dengan cara itu, pelayar secara automatik menambah ruang margin yang sama ke setiap sisi tag, dengan berkesan memusatkannya pada halaman.
-
Pilih ID yang mengelilingi semua kandungan pada halaman.
Untuk memastikan anda telah memilih tag yang betul, klik untuk meletakkan kursor anda di manapun di bahagian utama halaman, dan kemudian klik teg yang disenaraikan ke kiri paling jauh dalam Selector Tag Cepat di bahagian bawah ruang kerja.
-
Dengan teg yang dipilih, pilih nama gaya yang anda buat dari senarai juntai ID di pemeriksa Hartanah.
Peraturan gaya yang anda didefinisikan apabila anda mencipta gaya itu secara automatik digunakan pada teg. Dalam contoh ini, hasilnya ialah saiz tag ditukar kepada 980 piksel lebar dan tag dan semua isinya berpusat pada halaman.
Tidak semua ciri berfungsi apabila Dreamweaver ditetapkan kepada paparan Live. Walaupun paparan Live merupakan cara terbaik untuk melihat bagaimana reka bentuk halaman anda akan kelihatan dalam kebanyakan penyemak imbas web moden, penggunaan ciri paparan Live menjadikan banyak alat pengeditan Dreamweaver tidak dapat digunakan. Jika, sebagai contoh, pemeriksa harta kelihatan redup apabila anda mahu menggunakannya, pastikan butang Live dipilih.
