J0hn R.

Z minulých dílů (1., 2., 3.) máme připravenu strukturu stránky a můžete mi začít hrát se vzhledem. Profesionální webový grafik by asi řekl, že vzhledem tvorba stránek začíná. V Photoshopu nebo Inkscape, že připravíme celkový vzhled a na ten pak napasujme kód stránky. Já ale nejsem webdesignér ani neovládám html, php, css, javascript apod. Takže postupuji způsobem který zvládnu.

Úvodem bych chtěl provést drobnou úpravu. V minulých dílech jsem hlavičku (logo) stránky umístil v kódu dovnitř divu „obal“. To teď napravím protože k tomu není důvod a bránilo by mě to v dalších úpravách co jsem chtěl v budoucnu provádět. Takže v html umístíme vše co se týká divu „hlavička“ před začátek divu „obal“. Z toho důvodu pak musíme upravit ve stylech její umístění přidáním do její deklarace

	margin: 0 auto 0 auto; /*Odsazení - zhora 0, z prava automaticky, zdola 0, zleva automaticky (zprava a zleva automaticky mi stránku vystředí) */

A teď již k další tvorbě.

Pozadí hlavičky

V Gimpu si tedy začnu připravovat pozadí pro hlavičku. pokračovat ve čtení …

Zopakování z minulého dílu (http://j0hn.hys.cz/zaciname-s-tvorbou-webovych-stranek-2-zaklady-css-trisloupcovy-layout):

• Nebudu zde podrobně rozepisovat co která značka, znak či výraz v html nebo css kódu znamená. Hlavním důvodem je, že html ani css neumím! Takže pokud se v textu vyskytne nějaký „odborný“ výraz například identifikátor napíšu ho takto kurzívou a Vy můžete postupovat jako já, tj. do vyhledávače zadejte daný výraz a doplňte ho o slova html a css.
• Mnou „poslepovaný“ kód jsem opatřil podrobnými poznámkami, které ve výsledné stránce nejsou vidět a slouží jen k zorientování se v kódu. Poznámky v css kódu jsou umisťovány mezi /* na začátku a */ na konci poznámky. V html kódu jede o znaky <!– na začátku a –> na konci.
• Znám vzhled jakého chci dosáhnout (Vzhled o pevně dané šířce obsahující hlavičku, 3 sloupce a patičku.).
• Mám připravenu strukturu html dokumentu.
• Mám v css nastavený třísloupcový layout, ale potřebuji zarovnat délku všech tří sloupců

Zarovnání délky všech tří sloupců se ukázalo jako ještě těžší oříšek než samotný třísloupcový layout. Dá se říci, že poctivé řešení neexistuje. Nicméně existuje řada „špinavých“ triků, pomocí kterých dosáhneme požadovaného výsledku. pokračovat ve čtení …

Zopakování z minulého dílu (http://j0hn.hys.cz/zaciname-s-tvorbou-webovych-stranek-1-uvod-struktura-html):

• Nebudu zde podrobně rozepisovat co která značka, znak či výraz v html nebo css kódu znamená. Hlavním důvodem je, že html ani css neumím! Takže pokud se v textu vyskytne nějaký „odborný“ výraz například identifikátor napíšu ho takto kurzívou a Vy můžete postupovat jako já, tj. do vyhledávače zadejte daný výraz a doplňte ho o slova html a css.
• Mnou „poslepovaný“ kód jsem opatřil podrobnými poznámkami, které ve výsledné stránce nejsou vidět a slouží jen k zorientování se v kódu. Poznámky v css kódu jsou umisťovány mezi /* na začátku a */ na konci poznámky. V html kódu jede o znaky <!– na začátku a –> na konci.
• Znám vzhled jakého chci dosáhnout (Vzhled o pevně dané šířce obsahující hlavičku, 3 sloupce a patičku.).
• Mám připravenu strukturu html dokumentu.

Pokud chci pevně danou šířku musím si určit kolik pixelů. Aby byl web co nejlépe přístupný pro různé rozlišení rozhodl jsem se pro 900 pixelů. Rozlišení z šířkou 800 pixelů už skoro nikdo nepoužívá a všem s vyšším rozlišením monitoru se web zobrazí korektně.

Teď něco k CSS. Jeho síla spočívá v tom že si můžeme nadefinovat vlastnosti jednotlivých prvků stránky a ty pak budou v celém dokumentu dodržovány. pokračovat ve čtení …

Rozhodl jsem se vytvořit web na jedno téma s tím, že nepoužiji žádný redakční systém, ale pokusím se stránky vytvořit ručně k vlastnímu obrazu. To jest bez pomoci editorů si ručně napíši zdrojový kód. Téma webu: Sérioví vrazi. Vzhled chci o pevně dané šířce obsahující hlavičku, 3 sloupce a patičku. V hlavičce bude umístěné nějaké logo nebo obrázek, v levém sloupci jmenný seznam, v prostředním vlastní informace a v pravém menu, vyhledávání a další případné doplňky co bych mohl chtít do webu přidat. Patička by pak obsahovala informace o autorovi apod.

Většina moderních webů má vzhled definovaný pomocí css stylů, takže i tato volba bylo poměrně jasná. pokračovat ve čtení …