InDesign-laatikot ovat yhtä helppoja kuin napsauttamalla ja vetämällä. Photoshopin kerrokset antavat maalareille väripisteitä missä tahansa. Mutta ulkoasu HTML: llä ja CSS: llä on nudging ja CSS.

Se tapahtuu joka päivä: Photoshop-savvy-taiteen johtajat mallistavat malleja, tasoittavat niiden välit, huolellisesti valitsemalla sopivat kirjasimet ja värit. He luovuttavat työtään innokkaalle HTML-kehittäjälle, joka ilmoittaa, että suunnittelu todennäköisesti kestää muutamia päiviä muuttamaan HTML / CSS-työpöydälle. He voivat tehdä muutoksia erilaisten näytön koon huomioon ottamiseksi. Ajoitus on mysteeri molemmille osapuolille. Aikooko kehittäjä tunti tai viikko muuttaa PSD: nsa toimivaksi HTML / CSS: ksi?

Web-asettelun perusteet - mahdolliset, käytännölliset ja mahdollisuudet - ovat helposti ymmärrettävissä. Kuten suunnittelu itsessään, periaatteiden ymmärtäminen auttaa jokaista suunnittelijaa tuottamaan parempia malleja ja nopeuttamaan sivuston rakentamista.

Estä elementit pino, inline-elementit virtaavat

Kaikki web-sivun, kappaleista kuviin ja linkkiin lihavoidulle tekstille, jää näkymätönihin ruutuihin. Nämä laatikot tulevat kahteen lajikkeeseen: lohko ja sisäinen. Inline- ja block-välinen ero on niiden käyttäytymisessä.

• Lohkoelementit ovat suorakulmioita. He rakastavat täyttää horisontaalisen tilan.
• Inline-elementit ovat suorakaiteen muotoisia, paitsi että ne voivat kääriä.

Estä elementit pinoon toistensa päälle. Jollei toisin mainita, ne käyttävät mahdollisimman paljon horisontaalista tilaa, työntäen kaikki ympärillään ylös tai alas. Suunnittelussa elementit ovat ensisijainen layout-työkalu.

Inline-elementit perustuvat tekstin muotoiluun. Ne eivät riko tekstin virtaa, ja niiden ulottuvuudet laajenevat sen sisällön mukaan. Sisäisen elementin ilmoittaminen pitämään 200 pikselin leveys ei toimi. Se täyttää tekstin.

Oletusarvoisesti jokainen elementti on joko sisään- tai lohkoelementti. Suunnittelijat voivat muuttaa luonteensa pienellä CSS: llä - kääntämällä joukko listan kohteita (natiivisti lohkoja) riviin tai sarja vaakasuoria linkkejä (luonnollisesti sisäänpäin) pystysuoraan pinoon. Tämä tarkoittaa, että kaikki näkyvät elementit voidaan käyttää asetteluun. Olisivatpa ne riippuvaisia ​​kyseisestä asettelusta.

Native-lohkoelementteihin kuuluvat:

• Toimialojen
• kappaleissa

• Listat
  • Kohteita luettelossa
  • otsikot

    -

  • taulukot
    Lohko lainausmerkkejä

    Järjestäjät HTML5: ssä

    , ,
    Keho itse

    Inline-elementteihin kuuluvat:

    • Ankkurit (hyperlinkit)
    • rohkea ja
    • kursivoitu ja
    • kuvat
    • lainaukset
    • Tyyppien muotoilu
    • Lomaketjut
    • Sinusta kiinni

    Yhteisiä tunnisteita, jotka eivät ole lohko tai sisäinen muoto:

    • Asiakirjan otsikko