Kada dizajnirate web stranice, često morate riješiti temeljno pitanje: kakvo će se ponašanje stranice pojaviti kada se otvori s različitim rezolucijama zaslona? Ovdje postoje dvije mogućnosti - "gumene" (istezanje) stranice web mjesta ili statične. Razgovarat će se o prvoj opciji. Bez obzira na vašu preferenciju za raspored, glavno načelo rastezljivog dizajna je relativna skalabilnost.
Nužno je
- - znanje HTML-a;
- - program za uređivanje html-koda.
Upute
Korak 1
Odaberite glavnu datoteku za predložak web lokacije koja će odražavati glavnu oznaku. To može biti datoteka index.html ili index.php. Jedan od najboljih softvera za uređivanje vizualnih web stranica je Macromedia Dreamweawer. Potrebno uređivanje izvršit će se na temelju ovog programa.
Otvorite datoteku predloška ili izradite novu naredbom "Datoteka" - "Novo", kategorija - "Osnovna stranica" - "HTML" ili kategorija "Dinamična stranica" - "PHP". Ovdje razmatramo općeniti slučaj kada je struktura web mjesta zabilježena u točno jednoj od dvije datoteke.
Korak 2
Odavno nije tajna da postoje različite vrste rasporeda - na tablicama, na div-blokovima i kombinirano (tablice i blokovi istovremeno). Oznaka html odgovorna je za izgled tablice
Navedite postotak (100%) za svako svojstvo. To će postići učinak automatskog rastezanja stanica tablice na zaslone s bilo kojom geometrijom. To može biti 19-inčni monitor ili pametni telefon - svaki od njih pravilno će reproducirati sadržaj.
3. korak
Ako trebate točno navesti korespondenciju između ćelija tablice, upotrijebite sljedeći primjer:
| … … sadržaj ćelije 1. … | … … sadržaj ćelije 2. … |
Ovdje ćete vidjeti da je jedna od ćelija navedena sa širinom od 30% svega što je definirano za samu tablicu. Jednostavan izračun pokazuje da za drugu ćeliju ostaje 100% -30% = 70%. Imajte na umu da u ovom slučaju jedna od ćelija tablice ne smije imati postavljeni atribut širine. Preglednik će sam izvršiti sve izračune i ispravno će razvući tablicu sa ćelijama. Sadržaj unutar tablica također će se ispravno protezati i smanjivati na različitim zaslonima.
4. korak
U situaciji s div rasporedom, blokovi oznaka su prema zadanim postavkama rastegnuti na cijelu širinu zaslona i slijede jedan za drugim slijeva udesno, od vrha do dna. Da biste pročistili njihovu geometriju, stvorite CCS klasu ili identifikator (ID), u kojem navodite, na primjer, atribute i / ili za kategoriju veličine i položaja okvira (okvir). Ne zaboravite povezati navedeni stil s datotekom za označavanje web mjesta i povezati klasu (ID) sa željenom oznakom. Obično se postavlja na sam početak skripte, definirajući svu buduću geometriju mjesta:
… … sadržaj web mjesta. …
Ili ovako:
… … sadržaj web mjesta. …
Kôd za CSS pravilo bit će sljedeći:
… moj razred {
širina: 30%;
visina: 50%;
}
#Moj ID {
širina: 30%;
visina: 50%;
}
