Obrázky a plovoucí prvky

Důležitou složkou sdělení by měly být obrázky. Tedy nejen fotografie a informační grafika (schémata, grafy...), ale někdy i komplikované tabulky, vzorce atd. vytvořené speciálními programy, které by bylo pracné přenášet na web jinak, než jako obrázek. Před vložením obrázku se musíme rozhodnout jak má být velký. Teoreticky sice můžeme kódem stránky určit jeho velikost, prakticky však jsme omezeni tím, že roztažením malého obrázku vznikne odporně rozbitá příšernost, při zmenšení zase zbytečně přenášíme velká data a významně zpomalujeme načítání stránky. Úpravy a převzorkování obrázků provádíme ve specializovaných obrazových editorech (Photoshop, Lightroom, FastStone ...).

Častou chybou je použití příliš malých obrázků s mnoha detaily, které jsou na stránce nečitelné, nepřinášejí žádnou další informaci a tedy jsou jen ornamentem bez praktického smyslu. Při praktickém návrhu stránky bývá důležité pořadí a rozložení obrázků a jejich proložení textem. Obvykle usilujeme o klidné obtékání obrázků textem, snažíme se o to, aby nevznikaly „opuštěné řádky" (sazeči říkají vdovy a sirotci).  Pokud je prostor vedle obrázku příliš úzký, bývá lepší nastavit zarovnání textu vlevo, aby nevznikaly příliš velké mezislovní mezery.

Na vkládání obrázků jsou připraveny styly pro zarovnání obrázku vlevo (imgl), vpravo (imgr) a na střed (imgc).  V dialogu CKeditoru pro vkládání obrázku napíšeme jméno stylu do rozšířené/třída stylu.

Pro tvorbu maket stránek se často používá „slepý text". Stránky se jím snadno naplní a text nás nerozptyluje svým obsahem. Lorem ipsum dolor sit amet, elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.