Når du designer websteder, skal du ofte løse et grundlæggende spørgsmål: Hvad vil sidens opførsel være, når den åbnes med forskellige skærmopløsninger? Der er to muligheder her - "gummi" (stretching) websider eller statisk. Den første mulighed vil blive diskuteret. Uanset hvad du foretrækker for layout, er hovedprincippet om stretchdesign relativ skalerbarhed.
Er det nødvendigt
- - kendskab til HTML;
- - program til redigering af html-kode.
Instruktioner
Trin 1
Vælg hovedfilen til din webstedsskabelon, som afspejler hovedmarkeringen. Det kan være index.html eller index.php-fil. En af de bedste redigeringssoftware til visuelle webstedsskabeloner er Macromedia Dreamweawer. Den nødvendige redigering udføres på basis af dette program.
Åbn skabelonfilen, eller opret en ny med kommandoen "File" - "New", category - "Base page" - "HTML" eller category "Dynamic page" - "PHP". Her betragter vi det generelle tilfælde, når webstedsstrukturen registreres i nøjagtigt en af de to filer.
Trin 2
Det har længe ikke været nogen hemmelighed, at der findes forskellige typer layout - på borde, på div-blokke og kombineret (tabeller og blokke på samme tid). HTML-koden er ansvarlig for bordlayoutet
Angiv en procentdel (100%) for hver ejendom. Dette opnår effekten af automatisk strækning af tabelceller på skærme med enhver geometri. Det kan være en 19-tommer skærm eller en smartphone - hver af dem gengiver indholdet korrekt.
Trin 3
Hvis du har brug for at angive nøjagtigt korrespondancen mellem tabelceller, skal du bruge følgende eksempel:
| … … indholdet af celle 1. … | … … indholdet af celle 2. … |
Her vil du se, at en af cellerne er angivet med en bredde på 30% af alt, hvad der er defineret for selve tabellen. En simpel beregning viser, at 100% -30% = 70% forbliver i den anden celle. Husk at i dette tilfælde må en af tabelcellerne ikke have breddeattributten indstillet. Browseren foretager alle beregninger alene og strækker tabellen korrekt med celler. Indholdet i tabellerne strækker sig også og krymper korrekt på tværs af forskellige skærme.
Trin 4
I en situation med et div-layout strækkes tagblokkene som standard til skærmens fulde bredde og følger den ene efter den anden fra venstre mod højre, fra top til bund. For at forfine deres geometri skal du oprette en CCS-klasse eller identifikator (ID), hvor du f.eks. Angiver attributterne og / eller for kategorien af størrelse og placering af feltet (Box). Glem ikke at linke den angivne typografi til webstedsmarkeringsfilen og binde klassen (ID) til det ønskede tag. Normalt placeres den i begyndelsen af scriptet og definerer al fremtidig webstedsgeometri:
… … webstedsindhold. …
Eller sådan:
… … webstedsindhold. …
Koden til CSS-reglen vil være som følger:
… min klasse {
bredde: 30%;
højde: 50%;
}
#myID {
bredde: 30%;
højde: 50%;
}
