Bij het ontwerpen van sites moet je vaak een fundamentele vraag oplossen: wat zal het gedrag van de pagina zijn wanneer deze wordt geopend met verschillende schermresoluties? Er zijn hier twee opties: "rubberen" (uitrekkende) sitepagina's of statisch. De eerste optie wordt besproken. Wat uw voorkeur voor lay-out ook is, het belangrijkste principe van stretchontwerp is relatieve schaalbaarheid.
Het is nodig
- - kennis van HTML;
- - programma voor het bewerken van html-code.
instructies:
Stap 1
Selecteer het hoofdbestand voor uw sitesjabloon, dat de hoofdopmaak weerspiegelt. Het kan een index.html- of index.php-bestand zijn. Een van de beste software voor het bewerken van visuele sitesjablonen is Macromedia Dreamweawer. Op basis van dit programma zullen de nodige bewerkingen plaatsvinden.
Open het sjabloonbestand of maak een nieuwe aan met het commando "Bestand" - "Nieuw", categorie - "Basispagina" - "HTML" of categorie "Dynamische pagina" - "PHP". Hier beschouwen we het algemene geval wanneer de sitestructuur in precies één van de twee bestanden is vastgelegd.
Stap 2
Het is lang geen geheim geweest dat er verschillende soorten lay-outs zijn - op tafels, op div-blokken en gecombineerd (tafels en blokken tegelijk). De html-tag is verantwoordelijk voor de tabellay-out
Geef voor elke eigenschap een percentage (100%) op. Dit zal het effect bereiken van het automatisch uitrekken van tabelcellen op schermen met elke geometrie. Het kan een 19-inch monitor of een smartphone zijn - elk van hen zal de inhoud correct reproduceren.
Stap 3
Als u precies de overeenkomst tussen tabelcellen moet specificeren, gebruik dan het volgende voorbeeld:
| … … de inhoud van cel 1. … | … … de inhoud van cel 2. … |
Hier ziet u dat een van de cellen is gespecificeerd met een breedte van 30% van alles wat is gedefinieerd voor de tabel zelf. Een simpele rekensom leert dat er 100% -30% = 70% overblijft voor de tweede cel. Onthoud dat in dit geval een van de tabelcellen niet het attribuut width mag hebben. De browser maakt alle berekeningen zelf en zal de tabel correct uitrekken met cellen. Inhoud in tabellen wordt ook correct uitgerekt en krimpt over verschillende schermen.
Stap 4
In een situatie met een div-layout worden de tagblokken standaard uitgerekt tot de volledige breedte van het scherm en volgen ze de een na de ander van links naar rechts, van boven naar beneden. Om hun geometrie te verfijnen, maakt u een CCS-klasse of identifier (ID) aan, waarin u bijvoorbeeld de attributen en/of voor de categorie van grootte en positie van het vak (Box) specificeert. Vergeet niet de opgegeven stijl te koppelen aan het site-opmaakbestand en de klasse (ID) aan de gewenste tag te binden. Meestal wordt het helemaal aan het begin van het script geplaatst en definieert het alle toekomstige sitegeometrie:
… … inhoud van de site. …
Of zo:
… … inhoud van de site. …
De code voor de CSS-regel is als volgt:
… mijn klas {
breedte: 30%;
hoogte: 50%;
}
#Mijn ID {
breedte: 30%;
hoogte: 50%;
}
