Pole InDesign jsou stejně jednoduché jako kliknutí a přetahování. Vrstvy aplikace Photoshop umožňují malířům barevné pixely kdekoli. Ale rozložení s HTML a CSS je hra pošukování a kaskádování.

Stává se to každý den: režiséři umělecké grafiky Photoshopu vykreslují návrhy, honí jejich odstup a pečlivě vybírají vhodné písma a barvy. Odevzdávají práci dychtivému vývojáři HTML, který oznamuje, že návrh bude pravděpodobně trvat několik dní, než se změní na pracovní HTML / CSS. Ještě horší je, že provedou změny, aby zohledňovaly různé velikosti obrazovky. Časování je pro obě strany tajemstvím. Bude to mít vývojáře hodinu nebo týden, kdy změní svůj PSD na pracovní HTML / CSS?

Základy webového uspořádání - možné, praktické, možnosti - jsou snadno pochopitelné. Stejně jako samotný design, porozumění zásadám pomůže jakémukoli návrháři vytvořit lepší návrhy a urychlit proces budování místa.

Bloky prvků bloku, tok inline elementů

Všechno na webové stránce, od odstavců po obrázky až po odkazy na tučný text, je umístěno v neviditelných polích. Tyto krabice jsou dodávány ve dvou odrůdách: blok a inline. Rozdíl mezi inline a blokem spočívá v jejich chování.

• Blokové prvky jsou obdélníky. Milují plnit horizontální prostor.
• Inline elementy jsou obdélníkové, kromě toho, že se mohou zabalit.

Blokování prvků na sebe. Není-li řečeno jinak, zabírají co nejvíce horizontální prostor a tlačili vše kolem sebe nahoru nebo dolů. Pro konstrukci jsou prvky bloku nástrojem primárního rozvržení.

Inline prvky jsou založeny na formátování textu. Neporušují tok textu a jejich rozměry se rozšiřují tak, aby odpovídaly jejich obsahu. Povídání o vloženém prvku, který zachová šířku 200 pixelů, nebude fungovat. Vyplní jej text.

Ve výchozím nastavení je každý prvek v je buď vložený nebo blokový prvek. Návrháři mohou změnit svoji povahu pomocí malého CSS - řekněme tím, že vloží řadu položek seznamu (nativní bloky) do řady nebo řadu horizontálních vazeb (nativně inline) do vertikálního zásobníku. To znamená, že pro rozvržení lze použít jakýkoli viditelný prvek. To, zda by měly záviset na dotyčném uspořádání.

Nativní blokové prvky zahrnují:

• Divize
• Odstavce

• Seznamy
  • Položky v seznamu
  • Nadpisy

    -

  • Tabulky
    Blokovat citace

    Organizátoři v HTML5

    , ,
    Samotné tělo

    Inline prvky zahrnují:

    • Kotvy (hypertextové odkazy)
    • tučně a
    • Kurzíva a
    • snímky
    • Citace
    • Typ styling
    • Štítky formulářů
    • Na tobě

    Běžné značky, které nejsou blokovány ani inline:

    • Název dokumentu