Kada dizajnirate web stranice, često morate riješiti temeljno pitanje: kakvo će biti ponašanje stranice 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.
Neophodno je
- - znanje HTML-a;
- - program za uređivanje html-koda.
Instrukcije
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 vizuelnih web stranica je Macromedia Dreamweawer. Potrebno uređivanje obavit će se na osnovu ovog programa.
Otvorite datoteku predloška ili kreirajte 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 tačno jednoj od te dvije datoteke.
Korak 2
Dugo 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 efekt automatskog istezanja ćelija 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.
Korak 3
Ako trebate točno navesti korespondenciju između ćelija tablice, tada 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. Jednostavna kalkulacija pokazuje da 100% -30% = 70% ostaje za drugu ćeliju. Imajte na umu da u ovom slučaju jedna od ćelija tablice ne smije imati postavljeni atribut width. Preglednik će sam izvršiti sve proračune i pravilno će razvući tablicu sa ćelijama. Sadržaj unutar tablica također će se pravilno protezati i smanjivati na različitim ekranima.
Korak 4
U situaciji s div rasporedom, blokovi oznaka su prema zadanim postavkama rastegnuti na cijelu širinu ekrana 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 navedete, 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 lokacije i povezati klasu (ID) sa željenom oznakom. Obično se postavlja na sam početak skripte, definirajući svu buduću geometriju web lokacije:
… … sadržaj web stranice. …
Ili ovako:
… … sadržaj web stranice. …
Kôd za CSS pravilo bit će sljedeći:
… moj razred {
širina: 30%;
visina: 50%;
}
#myID {
širina: 30%;
visina: 50%;
}
