BLASSENweb - the future of your web !

V tomto návodu bych se vám rád pokusil vysvětlit, jak si vyrobit vlastní jednoduchý vzhled.

V programování se častokrát stane, že design se ujasní teprve po dokončení systému, když vše funguje. Teprve v praxi vyjdou najevo problémy a nedostatky. Pak je třeba vše udělat znovu. Design je tedy cyklus, který není nikdy dokončen.

Pojetí moderního webdesignu zní, oddělit obsah od vzhledu. Neboli kaskádové styly mají určovat vzhled dokumentu a HTML značky zase jeho smysl.

v první řadě budete potřebovat nějaký grafický program, kde si celý vzhled namalujete.
jako vhodný se jeví například Gimp, Photoshop a nebo Jasc Paint Shop.

Další užitečný prográmek který budete potřebovat je na rozkrájení obrázku.
Opět pár příkladů: Image Splitter, splitz
poznámka: doporučuji použít takový, který zároveň vygeneruje i html stránku, ušetří Vám to hodně práce.

Pak už jen poznámkový blok nebo nějaký html editor, ve kterém si to všechno dáte zase dohromady. ;-)

Namalovaný vzhled by měl mít minimálně tyto části (doporučuji odděleně):

!!! pro jednoduchost bude v tomto článku obrázek rozkrájen jen velice nahrubo. !!!

Hlavička by měla obsahovat logo a banner, případně další informace.

Blok by měl obsahovat titulek a obsah

U článku je narozdíl od modulu nutno počítat ještě s nadpisem stránky, není však podmínkou.

Nakonec patička, která uzavírá stránku a obsahuje informace o Copyrightu, času vygenerování stránky, případně reklamní nebo jiný prvek.

poznámka: kreslit si vlastní vzhled samozřejmě není podmínkou a můžete si vystačit pouze s pomocí kaskádových stylů (css).
poznámka 2: pod hlavičkou stránky může být například ještě menu.

Tak a ted výčet povinných funkcí pro správný chod vzhledu:

1/ function OpenTable() Otvírá tabulku modulu
2/ function CloseTable() Zavírá tabulku modulu
3/ function OpenTable2() Otvírá tabulku modulu 2 (pěkně je to vidět ve statistikách)
4/ function CloseTable2() Zavírá tabulku modulu 2
5/ function FormatStory() definuje kdo článek odeslal (anonymní-registrovaný) **
6/ function themeheader() Hlavička stránky s logem
7/ function themefooter() Patička stránky
8/ function un_themeindex() Náhledy článků v modulu news
9/ function un_themearticle() Definuje celý otevřený článek
10/ function themesidebox() Zde je definován styl bloků
11/ function un_themecenterbox() Doplňující funkce ke správnému zobrazení aktualit na úvodní stránce **

** není potřeba počítat do vzhledu
Pak jsou ve vzhledu ještě další funkce, kde je například definováno zobrazení titulku a další....

HEADER hlavička stránky
-- doporučené rozměry - šířka 770px - výška 250px maximálně -- (px = pixel)
základní obrázek....

si rozkrájejte na tyto části:

prostřednímu sloupci poté přiřadíte šířku 100% aby se Vám vzhled pěkně roztahoval podle rozlišení.

BLOK
-- doporučené rozměry - šířka 150px - výška 100% -- (px = pixel)
základní obrázek....

si rozkrájejte na tyto části:

MODUL nebo ČLÁNEK
-- doporučené rozměry - šířka 100% - výška 100% --
základní obrázek....

si rozkrájejte na tyto části:

FOOTER patička stránky
-- doporučené rozměry - šířka 100% - výška 100% --

Nevím jestli to je složité nebo jednoduché, ale nyní když už máme vše tak pěkně připravené, začneme se konečně zabývat tím jak z toho vlastně ten vzhled vytvořit.