Bagaimana membuat Tata Letak Cairan Satu Kolom dalam Dreamweaver - dummies

Sebelum Anda menyelam untuk membuat desain kotak cairan yang rumit di Dreamweaver, pertimbangkan untuk mencoba yang lebih sederhana. Mulailah dengan membuat tata letak kotak fluida satu kolom yang sederhana, ikuti petunjuk mudah ini:

1. Pilih File → New.

   Jendela New Document akan terbuka. Catatan: Pastikan Anda telah menyelesaikan proses penyiapan situs sebelum mulai mengerjakan tata letak kotak fluida yang baru.

2. Dari sisi kiri layar, pilih Tata Letak Cairan.

   Opsi jendela New Document berubah menjadi pilihan grid fluida.

   

3. Tentukan jumlah kolom yang Anda inginkan di masing-masing dari tiga layout.

   Untuk menambahkan atau menghapus kolom, pilih bidang teks di atas setiap kolom secara bergantian dan masukkan jumlah kolom yang Anda inginkan.

4. Tentukan persentase jendela browser yang Anda inginkan untuk setiap tata letak.

   Pilih bidang teks di bawah setiap layout secara bergantian dan masukkan angka yang mewakili persentase ruang yang Anda inginkan agar tata letaknya ditutup saat desain dilihat di jendela browser. Misalnya, secara default tata letak desktop diatur untuk mengambil 90 persen ruang yang tersedia, namun Anda bisa mengubahnya menjadi 95 persen untuk memberi ruang desain lebih banyak dan mengurangi ruang margin.

5. Ubah persen lebar kolom untuk mengubah jumlah ruang margin di antara masing-masing kolom.

   Secara default, Dreamweaver menetapkan setiap margin untuk mengambil 25 persen dari ruang yang tersedia.

6. Gunakan daftar drop-down untuk menentukan DOCTYPE.

   Secara default, layout grid fluida dibuat menggunakan DOCTYPE HTML5. Kecuali Anda perlu mengubah DOCTYPE agar lebih kompatibel dengan format lain yang digunakan di situs web Anda, HMTL5 adalah pilihan yang disarankan untuk desain web responsif.

7. Klik Buat

   Dialog Save As terbuka untuk menyimpan file CSS.

8. Masukkan nama untuk file CSS Anda dan klik Save.

   File HTML baru akan terbuka di ruang kerja Dreamweaver, namun belum disimpan. File CSS yang Anda namai disimpan dan namanya menjadi terlihat di panel File.

   Catatan: Berbeda dengan proses pembuatan jenis halaman lainnya di Dreamweaver, file CSS akan disimpan terlebih dahulu dan file HTML akan disimpan di langkah berikutnya.

9. Pilih File → Save

   Kotak dialog Save As akan terbuka.

10. Masukkan nama untuk file HTML Anda, dan klik OK.

    Kotak dialog Save As ditutup dan sebuah pemberitahuan muncul di Dreamweaver yang memberitahu Anda bahwa tata letak kotak fluida Anda memerlukan dua file tambahan: boilerplate. css dan merespon min. js.

11. Klik OK untuk menyalin boilerplate.css dan merespon min. js file ke folder situs Anda.

    Ketiga file ditambahkan ke panel File dan Anda kembali ke file HTML yang baru dinamai terbuka di ruang kerja Dreamweaver.

    

12. Berikan judul halaman dengan memasukkan teks di kolom Title di bagian atas ruang kerja.

Dan itu menyelesaikan proses pembuatan seperangkat file baru untuk layout grid fluida Anda.