Pola programu InDesign są tak proste, jak kliknięcie i przeciągnięcie. Warstwy programu Photoshop umożliwiają malarzom kolorowe piksele w dowolnym miejscu. Ale układ z HTML i CSS jest grą trącania i kaskadowania.

Zdarza się to każdego dnia: artyści-artyści z programu Photoshop wymyślają projekty, szlifując ich odstępy, starannie dobierając odpowiednie kroje pisma i kolory. Oddają swoją pracę prężnemu deweloperowi HTML, który ogłasza, że ​​jego zaprojektowanie zajmie kilka dni, zanim przekształci się w działający HTML / CSS. Co gorsza, wprowadzą zmiany uwzględniające różne rozmiary ekranu. Czas jest dla obu stron zagadką. Czy programista przekształci PSD w działający HTML / CSS na godzinę lub tydzień?

Podstawy układu strony - możliwe, praktyczne, możliwości - są łatwe do uchwycenia. Podobnie jak sam projekt, zrozumienie zasad pomoże każdemu projektantowi stworzyć lepsze projekty i przyspieszyć proces budowy witryny.

Blokuj stos elementów, przepływ elementów w linii

Wszystko na stronie internetowej, od akapitów do obrazów, po linki do pogrubionego tekstu, znajduje się w niewidocznych ramkach. Te pudełka występują w dwóch odmianach: blokowej i liniowej. Różnica między liniowym a blokowym polega na ich zachowaniu.

• Elementy blokowe to prostokąty. Uwielbiają wypełniać przestrzeń poziomą.
• Elementy śródliniowe są prostokątne, z wyjątkiem tego, że mogą się zawijać.

Blokuj stosy elementów jeden na drugim. O ile nie powiedziano inaczej, zajmują one jak najwięcej przestrzeni poziomej, popychając wszystko dookoła w górę lub w dół. W przypadku projektu elementy blokowe są podstawowym narzędziem układu.

Elementy śródliniowe oparte są na formatowaniu tekstu. Nie przerywają przepływu tekstu, a ich wymiary rozszerzają się, dopasowując je do zawartości. Powiedzenie elementu wbudowanego, aby zachować szerokość 200 pikseli, nie będzie działać. Wypełnienie go tekstem.

Domyślnie każdy element w jest elementem wbudowanym lub blokowym. Projektanci mogą zmienić swoją naturę za pomocą małego CSS - na przykład, zamieniając stos elementów listy (natywnie blokuje) w rząd lub serię poziomych łączy (natywnie inline) w stos pionowy. Oznacza to, że do układu można użyć dowolnego widocznego elementu. To, czy powinny one zależeć od danego układu.

Natywne elementy blokowe to:

• Dywizje
• Akapity

• Listy
  • Elementy na liście
  • Nagłówki

    -

  • Tabele
    Cytaty blokowe

    Organizatorzy w HTML5

    , ,
    Ciało

    Elementy śródliniowe to:

    • Kotwice (hiperłącza)
    • Pogrubienie i
    • italski i
    • Obrazy
    • Cytaty
    • Wpisz styl
    • Formuj etykiety
    • Zależy od Ciebie

    Typowe znaczniki, które nie są ani blokowe, ani wbudowane:

    • Tytuł dokumentu