Saat mendesain situs, Anda sering kali harus memecahkan pertanyaan mendasar: bagaimana perilaku halaman saat dibuka dengan resolusi layar yang berbeda? Ada dua opsi di sini - halaman situs "karet" (peregangan) atau statis. Opsi pertama akan dibahas. Apa pun preferensi Anda untuk tata letak, prinsip utama desain peregangan adalah skalabilitas relatif.
Itu perlu
- - pengetahuan tentang HTML;
- - program untuk mengedit kode html.
instruksi
Langkah 1
Pilih file utama untuk templat situs Anda, yang akan mencerminkan markup utama. Itu bisa berupa file index.html atau index.php. Salah satu perangkat lunak pengedit template situs visual terbaik adalah Macromedia Dreamweawer. Pengeditan yang diperlukan akan dilakukan berdasarkan program ini.
Buka file template atau buat yang baru dengan perintah "File" - "Baru", kategori - "Halaman dasar" - "HTML" atau kategori "Halaman dinamis" - "PHP". Di sini kami mempertimbangkan kasus umum ketika struktur situs dicatat tepat di salah satu dari dua file.
Langkah 2
Sudah lama bukan rahasia lagi bahwa ada berbagai jenis tata letak - di atas meja, di blok div dan gabungan (tabel dan blok pada saat yang sama). Tag html bertanggung jawab atas tata letak tabel
Tentukan persentase (100%) untuk setiap properti. Ini akan mencapai efek meregangkan sel tabel secara otomatis pada layar dengan geometri apa pun. Ini bisa berupa monitor 19 inci atau smartphone - masing-masing akan mereproduksi konten dengan benar.
Langkah 3
Jika Anda perlu menentukan dengan tepat korespondensi antara sel tabel, gunakan contoh berikut:
| … … isi sel 1. … | … … isi sel 2. … |
Di sini Anda akan melihat bahwa salah satu sel ditentukan dengan lebar 30% dari semua yang ditentukan untuk tabel itu sendiri. Perhitungan sederhana menunjukkan bahwa 100% -30% = 70% tetap untuk sel kedua. Ingat bahwa dalam hal ini salah satu sel tabel tidak boleh memiliki set atribut lebar. Browser akan membuat semua perhitungan sendiri dan akan meregangkan tabel dengan sel dengan benar. Konten di dalam tabel juga akan meregang dan menyusut dengan benar di berbagai layar.
Langkah 4
Dalam situasi dengan tata letak div, blok tag diregangkan secara default ke lebar penuh layar dan mengikuti satu demi satu dari kiri ke kanan, dari atas ke bawah. Untuk menyempurnakan geometrinya, buat kelas CCS atau pengenal (ID), di mana Anda menentukan, misalnya, atribut dan / atau untuk kategori ukuran dan posisi kotak (Kotak). Jangan lupa untuk menautkan gaya yang ditentukan ke file markup situs dan mengikat kelas (ID) ke tag yang diinginkan. Biasanya ditempatkan di awal skrip, mendefinisikan semua geometri situs masa depan:
… … konten situs. …
Atau seperti ini:
… … konten situs. …
Kode untuk aturan CSS adalah sebagai berikut:
… kelasku {
lebar: 30%;
tinggi: 50%;
}
#IDsaya {
lebar: 30%;
tinggi: 50%;
}
