Kuriant svetaines dažnai tenka išspręsti esminį klausimą: koks bus puslapio elgesys, kai jis bus atidarytas skirtingomis ekrano raiškomis? Čia yra du variantai - „guminiai“(tempimo) svetainės puslapiai arba statiniai. Pirmasis variantas bus aptartas. Nepriklausomai nuo to, ar pageidaujate išdėstymo, pagrindinis „stretch“dizaino principas yra santykinis mastelis.
Tai būtina
- - HTML žinios;
- - programa, skirta redaguoti HTML kodą.
Nurodymai
1 žingsnis
Pasirinkite pagrindinį savo svetainės šablono failą, kuris atspindės pagrindinį žymėjimą. Tai gali būti index.html arba index.php failas. Viena geriausių vaizdinių svetainių šablonų redagavimo programinės įrangos yra „Macromedia Dreamweawer“. Būtinas redagavimas bus atliekamas remiantis šia programa.
Atidarykite šablono failą arba sukurkite naują naudodami komandą „File“- „New“, kategorija - „Base page“- „HTML“arba kategoriją „Dynamic page“- „PHP“. Čia nagrinėjame bendrą atvejį, kai svetainės struktūra įrašoma tiksliai vienoje iš dviejų bylų.
2 žingsnis
Jau seniai ne paslaptis, kad yra skirtingų tipų maketai - ant lentelių, ant div blokų ir kombinuoti (lentelės ir blokai tuo pačiu metu). HTML lentelė yra atsakinga už lentelės išdėstymą
Nurodykite kiekvienos nuosavybės procentą (100%). Tai padės pasiekti, kad stalo langeliai būtų automatiškai ištempiami bet kokios geometrijos ekranuose. Tai gali būti 19 colių monitorius arba išmanusis telefonas - kiekvienas iš jų teisingai atkurs turinį.
3 žingsnis
Jei reikia tiksliai nurodyti lentelės langelių atitikimą, naudokite šį pavyzdį:
| … … 1 langelio turinys. … | … … 2 langelio turinys. … |
Čia pamatysite, kad viena iš langelių nurodoma 30% pločio viskam, kas apibrėžta pačiai lentelei. Paprastas skaičiavimas rodo, kad antrajai ląstelei lieka 100% -30% = 70%. Atminkite, kad tokiu atveju vienoje iš lentelės langelių neturi būti nustatytas atributas plotis. Naršyklė pati atliks visus skaičiavimus ir teisingai ištemps lentelę su langeliais. Lentelių turinys taip pat bus tinkamai ištemptas ir susitraukęs skirtinguose ekranuose.
4 žingsnis
Situacijoje su div išdėstymu žymos blokai pagal numatytuosius nustatymus yra ištempti iki viso ekrano pločio ir eina vienas po kito iš kairės į dešinę, iš viršaus į apačią. Norėdami patikslinti jų geometriją, sukurkite CCS klasę arba identifikatorių (ID), kuriame nurodysite, pavyzdžiui, atributus ir (arba) langelio dydžio ir padėties kategoriją (langelį). Nepamirškite susieti nurodyto stiliaus su svetainės žymėjimo failu ir susieti klasę (ID) su norima žyma. Paprastai jis dedamas pačioje scenarijaus pradžioje, apibrėžiant visą būsimą svetainės geometriją:
… … svetainės turinį. …
Arba taip:
… … svetainės turinys. …
CSS taisyklės kodas bus toks:
… Mano klasė {
plotis: 30%;
aukštis: 50%;
}
#myID {
plotis: 30%;
aukštis: 50%;
}
