Wanneer u webwerwe ontwerp, moet u dikwels 'n fundamentele vraag oplos: wat sal die gedrag van die bladsy wees as dit met verskillende skermresolusies oopgemaak word? Daar is twee opsies hier: "rubber" (rek) werfbladsye of staties. Die eerste opsie sal bespreek word. Ongeag u voorkeur vir uitleg, die belangrikste beginsel van rekontwerp is relatiewe skaalbaarheid.
Dit is nodig
- - kennis van HTML;
- - program vir die redigering van html-kode.
Instruksies
Stap 1
Kies die hooflêer vir u werfsjabloon, wat die hoofopmaak sal weerspieël. Dit kan 'n index.html- of index.php-lêer wees. Een van die beste sagteware vir die redigering van sagteware vir werfsjablone is Macromedia Dreamweawer. Die nodige redigering sal aan die hand van hierdie program gedoen word.
Open die sjabloonlêer of skep 'n nuwe een met die opdrag "File" - "New", category - "Base page" - "HTML" of category "Dynamic page" - "PHP". Hier kyk ons na die algemene geval wanneer die webwerfstruktuur in presies een van die twee lêers opgeteken is.
Stap 2
Dit is lankal geen geheim dat daar verskillende soorte uitleg is nie - op tafels, op div-blokke en gekombineerd (gelyktydig tafels en blokke). Die html-etiket is verantwoordelik vir die tafeluitleg
Spesifiseer 'n persentasie (100%) vir elke eiendom. Dit sal die effek bereik van die outomatiese rek van tafelselle op skerms met enige meetkunde. Dit kan 'n 19-inch monitor of 'n slimfoon wees - elkeen sal die inhoud korrek weergee.
Stap 3
As u die korrespondensie tussen tafelselle presies moet spesifiseer, gebruik dan die volgende voorbeeld:
| … … die inhoud van sel 1. … | … … die inhoud van sel 2. … |
Hier sal u sien dat een van die selle gespesifiseer word met 'n breedte van 30% van alles wat vir die tabel self gedefinieer is. 'N Eenvoudige berekening toon dat 100% -30% = 70% vir die tweede sel oorbly. Onthou dat in hierdie geval nie die breedte-kenmerk in een van die tafelselle moet wees nie. Die blaaier sal alle berekeninge op sy eie maak en die tabel korrek met selle uitrek. Inhoud in tabelle sal ook korrek oor verskillende skerms rek en krimp.
Stap 4
In 'n situasie met 'n div-uitleg word die etiketblokke standaard gerek tot die volle breedte van die skerm en volg die een na die ander van links na regs, van bo na onder. Om hul meetkunde te verfyn, skep 'n CCS-klas of -identifiseerder (ID) waarin u byvoorbeeld die eienskappe en / of vir die kategorie van grootte en posisie van die vak (Box) spesifiseer. Moenie vergeet om die gespesifiseerde styl aan die opmerklêer van die werf te koppel en die klas (ID) aan die gewenste etiket te bind nie. Gewoonlik word dit heel aan die begin van die teks geplaas, wat die toekomstige meetkunde van die webwerf definieer:
… … webwerf-inhoud. …
Of so:
… … webwerf-inhoud. …
Die kode vir die CSS-reël is soos volg:
… my klas {
breedte: 30%;
hoogte: 50%;
}
#myID {
breedte: 30%;
hoogte: 50%;
}
