Når du designer nettsteder, må du ofte løse et grunnleggende spørsmål: hvordan vil siden være når siden åpnes med forskjellige skjermoppløsninger? Det er to alternativer her - "gummi" (strekk) sider eller statisk. Det første alternativet vil bli diskutert. Uansett hva du foretrekker for layout, er hovedprinsippet i stretch design relativ skalerbarhet.
Det er nødvendig
- - kunnskap om HTML;
- - program for redigering av html-kode.
Bruksanvisning
Trinn 1
Velg hovedfilen for nettstedsmalen din, som gjenspeiler hovedmarkeringen. Det kan være index.html eller index.php-fil. En av de beste programvare for redigering av mal for visuelle sider er Macromedia Dreamweawer. Den nødvendige redigering vil bli gjort på grunnlag av dette programmet.
Åpne malfilen eller opprett en ny med kommandoen "File" - "New", category - "Base page" - "HTML" eller category "Dynamic page" - "PHP". Her vurderer vi det generelle tilfellet når nettstruktur er registrert i nøyaktig en av de to filene.
Steg 2
Det har lenge ikke vært noen hemmelighet at det finnes forskjellige typer layout - på bord, på div-blokker og kombinert (bord og blokker samtidig). HTML-koden er ansvarlig for tabelloppsettet
Angi en prosentandel (100%) for hver eiendom. Dette vil oppnå effekten av å automatisk strekke bordceller på skjermer med hvilken som helst geometri. Det kan være en 19-tommers skjerm eller en smarttelefon - hver av dem gjengir innholdet riktig.
Trinn 3
Hvis du trenger å spesifisere nøyaktig korrespondansen mellom tabellceller, bruk følgende eksempel:
| … … innholdet i celle 1. … | … … innholdet i celle 2. … |
Her vil du se at en av cellene er spesifisert med en bredde på 30% av alt som er definert for selve tabellen. En enkel beregning viser at 100% -30% = 70% gjenstår for den andre cellen. Husk at en av tabellcellene i dette tilfellet ikke må ha breddeattributtet satt. Nettleseren vil gjøre alle beregninger alene og vil strekke tabellen riktig med celler. Innhold i tabeller vil også strekke seg og krympe riktig på tvers av forskjellige skjermer.
Trinn 4
I en situasjon med en div-layout, strekkes tagblokkene som standard til skjermens fulle bredde og følger etter hverandre fra venstre til høyre, fra topp til bunn. For å avgrense geometrien, opprett en CCS-klasse eller identifikator (ID), der du spesifiserer for eksempel attributtene og / eller for kategorien størrelse og posisjon for boksen (boks). Ikke glem å koble den spesifiserte stilen til markeringsfilen for nettstedet og binde klassen (ID) til ønsket tag. Vanligvis plasseres den helt i begynnelsen av skriptet, og definerer all fremtidig stedgeometri:
… … nettstedets innhold. …
Eller slik:
… … nettstedets innhold. …
Koden for CSS-regelen vil være som følger:
… klassen min {
bredde: 30%;
høyde: 50%;
}
#myID {
bredde: 30%;
høyde: 50%;
}
