Přejít na obsah

J0hn R.

Software, foto, filmy, společnost, turistika

Archiv

Šťítky: tutoriál tvorba webu

V dnešní části vytvořím pozadí pro hlavní text, se vzhledem starého papíru, které bude moci být použito na libovolnou délku stránky bez známek přechodů.
Mám obrázek ze kterého budu vycházet:

Je jasné, že horní část s otisklou sponkou je nepoužitelná, neboť tvoří příliš výrazný prvek. Také pokud chceme zachovat otvory na levé straně je třeba počítat s tím, aby vzdálenosti mezi nimi měli přibližně stejnou vzdálenost. Dalším faktorem je, aby na hranách části kterou vybereme nebyly příliš výrazné prvky. V tomto případě nám to skoro jasně určilo jakou část pomocí nástroje “Ořez” vybereme:

Teď následuje klíčový prvek kterým si usnadníme práci. V menu Vrstva – Transformovat – Posun, vrstvu posuneme, abychom měli na okrajích zajištěnu návaznost a problematická část se nám dostala do středu obrázku, kde se se ní bude mnohem snadněji pracovat. Ovládací prvek obsahuje i tlačítko které nám posune vrstvu přesně o polovinu. Protože nám jde jen o vertikální návaznost vyplníme posun X nulový:

Teď zkopírujeme spodní část a vložíme ji jako novou vrstvu. Pomocí nástroje “Perspektiva” ji upravíme tak aby hrany papíru na sebe navazovali

Sloučíme vrstvy a budeme pracovat na “zneviditelnění” přechodu který zde vznikl. Na každou část se hodí jiný nástroj. Na nevýrazná místa se hodí nástroj “Léčení” v některých partiích uplatníme nástroj “Rozmazání” a v okrajových oblastech nástroj “Klonování”

Ještě můžeme pomocí “Klonování” posunout otvory po děrovačce blíže k okraji. Již po pár minutách dostáváme výsledek který jsme požadovali. Obrázek, který pokud použijeme jako pozadí bude na sebe vertikálně navazovat bez znatelných přechodů.

A takto vypadá výsledek: http://j0hn.hys.cz/wp-content/uploads/tutorialweb/tutorial-web-5.htm. (Tu reklamu poskytovatele webhostingu tam prosím zase ignorujte)

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í …