När du utformar webbplatser måste du ofta lösa en grundläggande fråga: hur kommer sidan att fungera när den öppnas med olika skärmupplösningar? Det finns två alternativ här - "gummi" (stretching) sidor eller statisk. Det första alternativet kommer att diskuteras. Oavsett vad du föredrar för layout är huvuddragen i stretchdesign relativ skalbarhet.
Det är nödvändigt
- - kunskap om HTML;
- - program för redigering av html-kod.
Instruktioner
Steg 1
Välj huvudfilen för din webbplatsmall, som återspeglar huvudmarkeringen. Det kan vara index.html eller index.php-fil. En av de bästa visuella webbplatsredigeringsprogramvarorna är Macromedia Dreamweawer. Den nödvändiga redigeringen kommer att göras på grundval av detta program.
Öppna mallfilen eller skapa en ny med kommandot "File" - "New", category - "Bas page" - "HTML" eller category "Dynamic page" - "PHP". Här betraktar vi det allmänna fallet när webbplatsstrukturen registreras i exakt en av de två filerna.
Steg 2
Det har länge inte varit någon hemlighet att det finns olika typer av layout - på bord, på div-block och kombinerade (tabeller och block samtidigt). HTML-taggen ansvarar för tabelllayouten
Ange en procentsats (100%) för varje fastighet. Detta uppnår effekten av att automatiskt sträcka tabellceller på skärmar med vilken geometri som helst. Det kan vara en 19-tums bildskärm eller en smartphone - var och en av dem återger innehållet korrekt.
Steg 3
Om du behöver ange exakt överensstämmelsen mellan tabellceller, använd följande exempel:
| … … innehållet i cell 1. … | … … innehållet i cell 2. … |
Här ser du att en av cellerna är specificerad med en bredd på 30% av allt som är definierat för själva tabellen. En enkel beräkning visar att 100% -30% = 70% återstår för den andra cellen. Kom ihåg att i detta fall får en av tabellcellerna inte ha attributet bredd. Webbläsaren gör alla beräkningar på egen hand och sträcker tabellen korrekt med celler. Innehållet i tabellerna kommer också att sträcka sig och krympa korrekt över olika skärmar.
Steg 4
I en situation med en div-layout sträcks taggblocken som standard till skärmens fulla bredd och följer efter varandra från vänster till höger, från topp till botten. För att förfina deras geometri, skapa en CCS-klass eller identifierare (ID), där du till exempel anger attributen och / eller för kategorin storlek och position för rutan (rutan). Glöm inte att länka den angivna stilen till platsmarkeringsfilen och binda klassen (ID) till önskad tagg. Vanligtvis placeras den i början av skriptet och definierar all framtida platsgeometri:
… … webbplatsinnehåll. …
Eller så här:
… … webbplatsinnehåll. …
Koden för CSS-regeln kommer att vara följande:
… min klass {
bredd: 30%;
höjd: 50%;
}
#mitt ID {
bredd: 30%;
höjd: 50%;
}
