Semasa merancang laman web, anda sering harus menyelesaikan persoalan mendasar: apakah tingkah laku halaman tersebut ketika dibuka dengan resolusi skrin yang berbeza? Terdapat dua pilihan di sini - halaman laman web "getah" (regangan) atau statik. Pilihan pertama akan dibincangkan. Apa pun pilihan anda untuk susun atur, prinsip utama reka bentuk regangan adalah skalabiliti relatif.
Ia perlu
- - pengetahuan mengenai HTML;
- - program untuk menyunting kod html.
Arahan
Langkah 1
Pilih fail utama untuk templat laman web anda, yang akan menunjukkan penanda utama. Ia boleh berupa index.html atau file index.php. Salah satu perisian penyuntingan templat laman web terbaik ialah Macromedia Dreamweawer. Penyuntingan yang diperlukan akan dilakukan berdasarkan program ini.
Buka fail templat atau buat yang baru dengan perintah "Fail" - "Baru", kategori - "Halaman asas" - "HTML" atau kategori "Halaman dinamik" - "PHP". Di sini kita mempertimbangkan kes umum apabila struktur laman web direkodkan di salah satu daripada dua fail tersebut.
Langkah 2
Sudah lama tidak menjadi rahsia bahawa terdapat pelbagai jenis susun atur - di atas meja, di blok-blok dan digabungkan (jadual dan blok pada masa yang sama). Tag html bertanggungjawab untuk susun atur jadual
Tentukan peratusan (100%) untuk setiap harta tanah. Ini akan mencapai kesan meregangkan sel meja secara automatik pada skrin dengan sebarang geometri. Ia boleh menjadi monitor 19 inci atau telefon pintar - masing-masing akan menghasilkan semula kandungan dengan betul.
Langkah 3
Sekiranya anda perlu menentukan persamaan antara sel jadual, gunakan contoh berikut:
| … … kandungan sel 1. … | … … kandungan sel 2. … |
Di sini anda akan melihat bahawa salah satu sel ditentukan dengan lebar 30% dari semua yang ditentukan untuk jadual itu sendiri. Pengiraan sederhana menunjukkan bahawa 100% -30% = 70% kekal untuk sel kedua. Ingat bahawa dalam kes ini salah satu sel jadual tidak boleh mempunyai atribut lebar yang ditetapkan. Penyemak imbas akan membuat semua pengiraan sendiri dan akan meregangkan meja dengan sel dengan betul. Kandungan di dalam meja juga akan meregang dan menyusut dengan betul di pelbagai skrin.
Langkah 4
Dalam situasi dengan tata letak div, blok tag diregangkan secara lalai ke lebar penuh layar dan ikuti satu demi satu dari kiri ke kanan, dari atas ke bawah. Untuk menyempurnakan geometri mereka, buat kelas CCS atau pengecam (ID), di mana anda menentukan, sebagai contoh, atribut dan / atau untuk kategori ukuran dan kedudukan kotak (Kotak). Jangan lupa untuk memautkan gaya yang ditentukan ke fail markup laman web dan mengikat kelas (ID) ke tag yang dikehendaki. Biasanya ia diletakkan di awal skrip, menentukan semua geometri laman web masa depan:
… … kandungan laman web. …
Atau seperti ini:
… … kandungan laman web. …
Kod untuk peraturan CSS adalah seperti berikut:
… kelas saya {
lebar: 30%;
tinggi: 50%;
}
#ID saya {
lebar: 30%;
tinggi: 50%;
}
