Přejít na obsah

J0hn R.

Software, foto, filmy, společnost, turistika

Archiv

Rubrika: WEB

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

Pokud chcete přidat ikonu, která by byla vidět v panelu (listu) prohlížeče – tzv. favorite icon a používáte WordPress, stačí udělat 3 věci.
1. Vytvořit ikonu (např. v programu GIMP). Ideální je ikona o rozměrech 16×16 pixelů, uložená ve formátu „Ikona Microsoft Windows“ samozřejmě s koncovkou „ico“ – například favicon.ico.
2. Nahrát ji do adresáře vašich stránek – ideálně do adresáře kde máte umístěnou šablonu – adresawebu/wp-content/themes/vašešablona/
3. V editoru šablon umístit do Záhlaví (header.php) (za<head> ):

<link rel="shortcut icon" href="/wp-content/themes/vašešablona/favicon.ico" />

Řešil jsem problém jak nejlépe zjistit nejen návštěvnost stránek, ale i odkud návštěvník přišel, případně jaký používá prohlížeč, jaké má rozlišení apod. Pro wordpress existuje celá řada pluginů které statistiky stránek umožňují. Uvedu jen několik příkladů z těch co jsem vyzkoušel: pokračovat ve čtení …

V předchozím příspěvku jsem psal jak zviditelnit svoje stránky na internetu. Po dvou dnech mohu říci, že nejvíce asi prospělo přidání odkazů do několika českých linkovacích služeb, což byla lepší pozvánka pro Google indexovač, než registrace na jeho stránkách pro webmastery 😡 . Proto jsem se rozhodl přidat odkazy na několik českých linkovacích služeb pod každý svůj příspěvek což může návštěvníkům usnadnit na články co je zaujmou upozornit. pokračovat ve čtení …

Jelikož mám stránku založenou jen několik dní a indexovací robot od googlu ani jiné vyhledávací služby mě ještě nenavštívil (zda vás google indexuje si můžete prověřit na https://www.google.com/webmasters/tools/sitestatus?hl=cs), hledal jsem na webu jak to urychlit a jak se připravit na jejich příchod. Našel jsem množství rad, takže jsem je vyzkoušel a uvidím jak to dopadne. Vypíšu zde zatím ty co mi přišli nejlepší. pokračovat ve čtení …

Změnil jsem šablonu na „Eos 1.3.6“ a povedlo se mi poměrně snadno za pomoci programu Poedit šablonu přeložit. Pokud by měl někdo zájem může si jí i s češtinou stahnout – eos.1.3.6-cs.zip.  Nebo jen samotnou češtinu.