Suunnitellessasi sivustoja joudut usein ratkaisemaan perustavanlaatuisen kysymyksen: mikä on sivun käyttäytyminen, kun se avataan eri näytön tarkkuuksilla? Tässä on kaksi vaihtoehtoa - "kumiset" (venyttävät) sivustosivut tai staattiset. Ensimmäisestä vaihtoehdosta keskustellaan. Riippumatta siitä, mitä mieltä olet ulkoasusta, venytyssuunnittelun pääteema on suhteellinen skaalautuvuus.
Se on välttämätöntä
- - HTML-taito;
- - ohjelma HTML-koodin muokkaamiseen.
Ohjeet
Vaihe 1
Valitse sivustotiedostosi päätiedosto, joka heijastaa päämerkintää. Se voi olla index.html tai index.php. Yksi parhaista visuaalisen sivuston mallin muokkausohjelmista on Macromedia Dreamweawer. Tarvittava muokkaus tehdään tämän ohjelman perusteella.
Avaa mallitiedosto tai luo uusi komennolla "File" - "New", kategoria - "Base page" - "HTML" tai kategoria "Dynamic page" - "PHP". Tässä tarkastellaan yleistä tapausta, kun sivuston rakenne on kirjattu täsmälleen toiseen tiedostoista.
Vaihe 2
Ei ole ollut kauan salaisuus, että asetteluja on erityyppisiä - taulukoissa, div-lohkoissa ja yhdistetyissä (taulukot ja lohkot samanaikaisesti). HTML-tagi on vastuussa taulukon asettelusta
Määritä prosenttiosuus (100%) kullekin omaisuudelle. Tämä saavuttaa pöydän solujen automaattisen venyttämisen kaikilla geometrioilla varustetuissa näytöissä. Se voi olla 19 tuuman näyttö tai älypuhelin - kukin niistä toistaa sisällön oikein.
Vaihe 3
Jos sinun on määritettävä tarkasti taulukon solujen välinen vastaavuus, käytä seuraavaa esimerkkiä:
| … … solun 1 sisältö. … | … … solun 2 sisältö. … |
Täällä näet, että yksi soluista on määritelty 30 prosentin leveydellä kaikesta, mikä itse taulukolle määritetään. Yksinkertainen laskelma osoittaa, että toiselle solulle jää 100% -30% = 70%. Muista, että tässä tapauksessa yhdellä taulukon soluista ei saa olla leveysmääritettä. Selain tekee kaikki laskelmat itse ja venyttää taulukon oikein soluilla. Taulukoiden sisällä oleva sisältö venyy ja kutistuu oikein eri näytöissä.
Vaihe 4
Tilanteessa, jossa on div-asettelu, tagilohkot venytetään oletuksena koko näytön leveydelle ja seuraavat peräkkäin vasemmalta oikealle, ylhäältä alas. Laajenna niiden geometriaa luomalla CCS-luokka tai -tunniste (ID), jossa määrität esimerkiksi attribuutit ja / tai laatikon koon ja sijainnin luokan (Box). Älä unohda linkittää määritettyä tyyliä sivuston merkintätiedostoon ja sitoa luokka (ID) haluttuun tagiin. Yleensä se sijoitetaan komentosarjan alkuun ja määrittelee kaikki tulevat sivuston geometriat:
… … sivuston sisältö. …
Tai näin:
… … sivuston sisältö. …
CSS-säännön koodi on seuraava:
… luokkani {
leveys: 30%;
korkeus: 50%;
}
#minun henkilötietoni {
leveys: 30%;
korkeus: 50%;
}
