Saitide kujundamisel peate sageli lahendama põhimõttelise küsimuse: milline on lehe käitumine, kui see avatakse erineva eraldusvõimega? Siin on kaks võimalust - "kummist" (venitatavad) saidilehed või staatilised. Arutatakse esimest võimalust. Ükskõik, mis eelistate paigutust, on venituskujunduse põhimõte suhteline mastaapsus.
See on vajalik
- - HTML-i oskus;
- - programm HTML-koodi redigeerimiseks.
Juhised
Samm 1
Valige saidimalli põhifail, mis kajastab peamist märgistust. See võib olla fail index.html või index.php. Üks parimatest visuaalsete saidimallide redigeerimise tarkvaradest on Macromedia Dreamweawer. Selle programmi põhjal tehakse vajalik redigeerimine.
Avage mallifail või looge uus käsuga "File" - "New", kategooria - "Base page" - "HTML" või kategooria "Dynamic page" - "PHP". Siin käsitleme üldist juhtumit, kui saidi struktuur on salvestatud täpselt ühte kahest failist.
2. samm
Pole ammu saladus, et paigutusi on erinevat tüüpi - tabelitel, div-plokkidel ja kombineeritud (tabelid ja plokid korraga). HTML-märgend vastutab tabeli paigutuse eest
Määrake igale atribuudile protsent (100%). Sellega saavutatakse lauarakkude automaatse venitamise efekt mis tahes geomeetriaga ekraanidel. See võib olla 19-tolline monitor või nutitelefon - igaüks neist reprodutseerib sisu õigesti.
3. samm
Kui peate täpselt määrama tabelirakkude vastavuse, kasutage järgmist näidet:
| … … 1. lahtri sisu. … | … … 2. lahtri sisu. … |
Siin näete, et üks lahtritest on määratud laiusega 30% kõigest, mis on tabeli enda jaoks määratletud. Lihtne arvutus näitab, et teise lahtrisse jääb 100% -30% = 70%. Pidage meeles, et sel juhul ei tohi ühel tabeli lahtritest olla määratud atribuut laius. Brauser teeb kõik arvutused iseseisvalt ja venitab tabeli lahtritega õigesti. Tabelites olev sisu venib ja kahaneb õigesti ka eri ekraanidel.
4. samm
Div paigutusega olukorras venitatakse sildiplokid vaikimisi kogu ekraani laiusele ja järgnevad üksteise järel vasakult paremale, ülevalt alla. Nende geomeetria täpsustamiseks looge CCS-klass või identifikaator (ID), milles määrate näiteks atribuudid ja / või kasti (kasti) suuruse ja asukoha kategooria. Ärge unustage linkida määratud stiil saidi märgistusfailiga ja siduda klass (ID) soovitud märgendiga. Tavaliselt asetatakse see skripti alguses, määratledes kogu tulevase saidi geomeetria:
… … saidi sisu. …
Või niimoodi:
… … saidi sisu. …
CSS-reegli kood on järgmine:
… minu klass {
laius: 30%;
kõrgus: 50%;
}
#myID {
laius: 30%;
kõrgus: 50%;
}
