Hvordan få Web Page Smaller



Nettlesere som Internet Explorer, Chrome og Firefox støtte universelle hurtigtaster for å zoome inn og ut av nettsider, men HTML og CSS utforming avgjør hvordan en side oppfører seg når den er skalert av en bruker. Hvis du ønsker å gjøre din webside mindre i alle nettlesere, kan du bruke bredden og høyden attributter i malen kode, men du må være forsiktig når du angir absolutte mål for et objekt fordi siden din vises på en rekke skjermstørrelser. En elegant løsning i de fleste tilfeller er å angi objektets bredde som en prosentdel av den overordnede.

Bruksanvisning

1 Lag en webside som du ser i nettleseren din mindre ved å trykke "Ctrl-Minus" for å zoome ut. Alternativt kan du stille zoomen til 100 prosent ved å trykke "Ctrl-0". Disse snarveiene er universelle for de fleste nettlesere, inkludert Internet Explorer, Chrome og Firefox. Zoome ut på en webside har samme effekt på HTML-elementer som skalering av vinduet; deres posisjonering bestemmes av hvor mye plass i vinduet. For å skalere vinduet, venstreklikk et hjørne av vinduet, dra den mot motsatt hjørne, og slipp den.

2 Kontrollere høyden og bredden på en webside som du utformer for å prøve å gjøre seerne erfaring konsekvent. Start med å åpne malen kode i en teksteditor. Nettstedet maler er delt inn grafiske blokker med div eller muligens tabellelementer, selv om bord ikke er laget for dette formålet. Den ytterste div blokken kan ha barnet div blokker, eller websiden kan ha flere topp div-elementer uten foreldre. Hvis en div blokk har barn, sin åpning "<div>" foran dem og sin avsluttende "</ div>" følger dem.

3 Finn hver div elementets høyde og bredde attributter. Avhengig av malens layout, blir disse innstillingene kodet i CSS eller HTML, og malen kode kan omfatte separate CSS og HTML-filer eller kombinere dem i en HTML-fil. Hvis websiden har separate CSS og HTML-filer, har de samme filnavn som index.css og index.html, for eksempel. Du kan søke etter div-elementer i de fleste tekstbehandlingsprogrammer ved å trykke "Ctrl-F" for å åpne Søk-boksen, og deretter søke etter "div."

4 Senk en div element høyde eller bredde ved å erstatte sin nåværende verdi med en mindre en. Dette trinnet kan ta litt eksperimentering, og du kan se endringene ved å åpne den oppdaterte malen koden i en nettleser. For å gjøre dette, høyreklikker du på HTML-fil på skrivebordet, velg "Åpne i" og velg nettleseren din.

5 Skalere websiden til å passe i nettleservinduet automatisk. Finn den ytterste div elementets CSS-klasse i HTML-fil eller dens eksternt stilark. Sett sin max-bredde og høyde attributter til følgende verdier:

.outermost-div-element {
max-width: 100%;
height: auto;
}

Hvis du vil at elementet å ta opp mindre plass, setter en lavere prosentandel for maks bredde. Ved hjelp av denne koden, justerer høyden automatisk i henhold til bredden, som bestemmes av vinduets størrelse som den er skalert. Maks bredde attributt gir en ensartet utseende for din webside i alle skjermstørrelser.

Hint

  • Bredden, maks bredde og høyde attributter bestemme størrelsen på HTML-elementet. For eksempel vil automatisk skalere et bilde, legge til følgende attributter til sin CSS definisjon:
  • img {
  • max-width: 100%;
  • height: auto;
  • bredde: auto / 9;
  • }
  • "Auto / 9" verdi for bredden attributtet korrigerer en skalerings problem i eldre versjoner av IE.