Cara Mencipta Layout Grid Bendalir Satu-Column di Dreamweaver - dummies

Sebelum anda menyelam membuat reka bentuk grid cecair rumit di Dreamweaver, pertimbangkan untuk mencuba yang lebih mudah. Mula dengan mencipta susun atur grid cecair satu lajur, mengikuti arahan mudah ini:

1. Pilih Fail → Baru.

   Tetingkap Dokumen Baru dibuka. Nota: Pastikan anda telah menyelesaikan proses persediaan tapak sebelum mula bekerja pada susun atur grid cair yang baru.

2. Dari sebelah kiri skrin, pilih Layout Grid Bendalir.

   Pilihan tetingkap Dokumen Baru berubah kepada pilihan grid bendalir.

   

3. Nyatakan bilangan lajur yang anda mahu dalam setiap tiga susun atur.

   Untuk menambah atau mengalih keluar lajur, pilih medan teks pada setiap lajur seterusnya dan masukkan bilangan lajur yang anda mahu.

4. Tentukan peratusan tetingkap pelayar yang anda mahu setiap susun atur ditutup.

   Pilih medan teks di bawah susun atur setiap giliran dan masukkan nombor yang mewakili peratusan ruang yang anda mahu susun atur ditutup apabila reka bentuk dilihat dalam tetingkap penyemak imbas. Sebagai contoh, secara lalai susunatur desktop ditetapkan untuk mengambil 90 peratus daripada ruang yang ada, tetapi anda boleh mengubahnya menjadi 95 peratus untuk memberikan ruang reka bentuk yang lebih banyak dan mengurangkan ruang margin.

5. Tukar peratus lebar lajur untuk mengubah jumlah ruang margin di antara setiap lajur.

   Secara lalai, Dreamweaver menetapkan setiap margin untuk mengambil 25 peratus ruang yang tersedia.

6. Gunakan senarai juntai bawah untuk menentukan doctype.

   Secara lalai, susun atur grid cecair dicipta menggunakan doctype HTML5. Kecuali anda perlu menukar doctype agar lebih serasi dengan pemformatan lain yang digunakan di laman web anda, HMTL5 adalah pilihan yang disyorkan untuk reka bentuk web yang responsif.

7. Klik Buat.

   Dialog Simpan Sebagai bersedia untuk menyimpan fail CSS.

8. Masukkan nama untuk fail CSS anda dan klik Simpan.

   Fail HTML baru dibuka di ruang kerja Dreamweaver, tetapi belum disimpan. Fail CSS yang anda namakan disimpan dan namanya dapat dilihat di panel Fail.

   Nota: Tidak seperti proses membuat jenis halaman lain di Dreamweaver, fail CSS disimpan dahulu dan fail HTML disimpan dalam langkah seterusnya.

9. Pilih Fail → Simpan

   Kotak dialog Save As terbuka.

10. Masukkan nama untuk fail HTML anda, dan klik OK.

    Kotak dialog Save As ditutup dan notis muncul di Dreamweaver memberitahu anda bahawa susun atur grid bendalir anda memerlukan dua fail tambahan: boilerplate. css dan balas. min. js.

11. Klik OK untuk menyalin boilerplate.css dan balas. min. js fail ke folder tapak anda.

    Semua tiga fail akan ditambah ke panel Fail dan anda kembali ke fail HTML yang baru bernama anda di ruang kerja Dreamweaver.

    

12. Beri tajuk halaman dengan memasukkan teks dalam medan Judul di bahagian atas ruang kerja.

Dan itu menyelesaikan proses mewujudkan satu set fail baru untuk susun atur grid bendalir anda.