Pri oblikovanju spletnih mest morate pogosto rešiti temeljno vprašanje: kakšno bo obnašanje strani, ko se odpre z različnimi ločljivostmi zaslona? Tu sta na voljo dve možnosti - "gumijaste" (raztezne) strani strani ali statične. Razpravljali bomo o prvi možnosti. Ne glede na vaše nastavitve, glavno načelo raztezanja je relativna razširljivost.
Potrebno je
- - znanje HTML;
- - program za urejanje html-kode.
Navodila
Korak 1
Izberite glavno datoteko za predlogo spletnega mesta, ki bo odražala glavno oznako. Lahko je datoteka index.html ali index.php. Ena najboljših programov za urejanje vizualnih spletnih mest je Macromedia Dreamweawer. Potrebno urejanje bo izvedeno na podlagi tega programa.
Odprite datoteko s predlogo ali ustvarite novo z ukazom "Datoteka" - "Novo", kategorija - "Osnovna stran" - "HTML" ali kategorija "Dinamična stran" - "PHP". Tu upoštevamo splošen primer, ko je struktura spletnega mesta zabeležena v natančno eni od obeh datotek.
2. korak
Že dolgo ni skrivnost, da obstajajo različne vrste postavitve - na mizah, na blokih div in kombinirane (tabele in bloki hkrati). Oznaka html je odgovorna za postavitev tabele
Navedite odstotek (100%) za vsako lastnost. To bo doseglo učinek samodejnega raztezanja celic mize na zaslone s poljubno geometrijo. Lahko je 19-palčni monitor ali pametni telefon - vsak od njih bo pravilno reproduciral vsebino.
3. korak
Če morate natančno določiti ujemanje med celicami tabele, uporabite naslednji primer:
| … … vsebina celice 1. … | … … vsebina celice 2. … |
Tu boste videli, da je ena od celic določena s širino 30% vsega, kar je določeno za samo tabelo. Preprost izračun pokaže, da za drugo celico ostane 100% -30% = 70%. Ne pozabite, da v tem primeru ena od celic tabele ne sme imeti nastavljenega atributa širine. Brskalnik bo sam izračunal sam in pravilno raztegnil tabelo s celicami. Vsebina v tabelah se bo prav tako raztezala in skrčila na različnih zaslonih.
4. korak
V primeru postavitve div so bloki oznak privzeto raztegnjeni na celotno širino zaslona in sledijo drug za drugim od leve proti desni, od zgoraj navzdol. Če želite izboljšati njihovo geometrijo, ustvarite razred ali identifikator CCS (ID), v katerem določite na primer atribute in / ali kategorijo velikosti in položaja polja (polje). Ne pozabite povezati določenega sloga z datoteko za označevanje spletnega mesta in razred (ID) povezati z želeno oznako. Običajno je postavljen na sam začetek skripta in opredeljuje vso prihodnjo geometrijo spletnega mesta:
… … vsebina spletnega mesta. …
Ali takole:
… … vsebina spletnega mesta. …
Koda pravila CSS bo naslednja:
… moj razred {
širina: 30%;
višina: 50%;
}
#myID {
širina: 30%;
višina: 50%;
}
