Jelikož jsem při brouzdání po diskuzi tutoriálů zjistil, že se nemálo z vás dožaduje po tutoriálu na weblayout od tvorby grafiky v PS až po psaní html a css, rozhodl jsem se tedy, že se pokusím tento tutoriál pokusím udělat. Předem prozradím že tutoriál je pro začínající „photoshopery“, mírně pokročilé HTML kodery a mírně pokročilé css kodery (stačí vědět alespoň co je to CSS a nějaké ty atributy). Ale jestli se chcete zabývat mým tutoriálem, přestože css neznate, tak se podívejte na jakpsatweb.cz a počtěte si základy…

celkový výsledek : tady
výsledek photoshopu :
Takže jedem :

I. PHOTOSHOP

1.) Otevřete si v Photoshopu nový soubor veliký 500×500 pixelů. Dejte zobrazení > zobrazovat > mřížka a nastavte jí v úpravy > předvolby > vodítka, mřížka, řezy…. V tomto okně nás bude zajímat pouze mřížka a tu nastavíme takto:
barva : jakou chcete, já mám #828282
styl : čáry
čáry mřížky po : 20px
dělení : 1
 Tak a teď bude layout hezky podle mřížky a tím líp se nám bude ořezávat v Image ready a ještě se nám budou doře zapisovat hodnoty v css (lepší width: 600; než width: 598px; )

2.) Tak, teď si udělejte obdélníkový výběr veliký 500×160px (25×8 čtverečků) a barvu pozadi nastavte na #606060 a pomocí klávesové zkratky ctrl+delete vybarvěte. Ve vplbách prolnutí jí nastavte vytažení 2px uvnitř a barva černá(#000).

3.) Teď si uděláme textové pole. Pod logem vynechte 20 px (jeden čtvereček mřížky) a udělejte obdélník až dolů opět barvou #606060. Proveďte vytažení jako u loga.

4.) Do pravého dolního rohu dáme čtyři butónky veliké 80×20px opět pomocí obdélníkového výběru. Barvy butonků zleva doprava – #ff0000 #fffc00 #00ff00 #00f6ff.

5.) Obdélníkem si označte pruh nad prvním butonkem (červeným) a vybarvěte barvou #884848. Pak to udělejte nad druhým (žlutým) barvou #888748, nad zeleným barvou #488848 a nad světle modrým #488688. Udělejte tyto pruhy i v textovém poli, a pak je s logem i s textovým polem slučte pomocí ctrl+e (sloučit dolů).

6.) Doplňte text do odkazů libovolným písmem, já použil amerika sans z dafont.com. Fakt stylovej font … Tak vepište do butonků „home“, „about“, „works“ a „links“, nebo co chcete, páč na tom opravdu vůbec nesejde.

7.) Hoďte si ještě do loga co chcete, já tam dal holubici z nástroje jiný tvar. Přepněte se do Image Ready ikonkou na spodku toolbaru.

II. Image Ready

8.) Image Ready je nejkratší etapa našeho tutu, protože v ní jenom rozřežeme layout na obrázky ze kterých „slepíme“ web. Takže si dejte nástroj řezy a (samozdřejmě se zaplou mřížkou) označte první butónek, pak druhý, třetí a čtvrtý. teď se zaměříme na textové pole. Označte vršek pole po celé šířce a o výšce 20px (jeden čtvereček), a stejně tak i spodek. Kdekoliv v textovém poli si ještě jeden 1px vysoký a 500px široký řez.


9.)Soubor > uložit optimalizovaný, vyberte html a obrazy a uložte.

10.) Každopádně složku „obrazy“ přejmenujte na „images“ a html soubor rovnou smažte, protože Image Ready vyprodukoval přímo odporný kód, který je v html z dob nám neznámých xD. Ve složce images se taky přehrábnem, to znamená, že vymažeme obrázky, které jsou nepotřebné. A to jest obrázek působící mezi vrškem textového pole a 1px vysokým obrázkem, mezi 1px a spodkem text. pole a mezi logem a text. polem. Zbytek si pojmenujte jak chcete hlavně aby se vám to dobře pamatovalo .

11.) Jenom na chvilku se překopněte zpět do PS a textovým vrstvám nastavte jakýkoliv efekt, já dal přeškrtnutí, a přepněte se zase do IR a vykrájejte si jenom ty butónky, protože nás nic jiného už nezajímá. Budou to hovery (to co se stane až na odkaz najedete myší). Odkazy pojmenujte home_hover atd. a zkopírujte do složky images. Zbytek smažte(už ho přeci máme). Na obrázku jsou vyznačeny efekty u písma :
12.) Otevřete si malování (ano, myslím to vážně), protože pro nadcházející věc je to nejpohodlnější způsob a hlavně taky protože v PS nemůžeme nic dělat s indexovaným gifem. Otevřete home_hover.gif a nástrojem Výběr si ho celý označíme a stiskneme ctrl+c. Otevřeme home_base.gif (butonek home) a v obrázek > atributy zvetšíme výšku na dvojnásobek(40px). Stiskem ctrl+v vložíme hover a dáme ho pod base. A uložíme jako home.gif :
No a takto to uděláme se všemi butónky.

III. HTML A CSS

13.) Jestliže nemáte PSPad tak si ho stáhněte na http://www.pspad­.com/. Pokud máte jiný editor, který vám vyhovuje, nevadí, jediné vám můžu doporučit, abyste nepoužívali MS Poznámkový blok. Otevřete pspad a nový soubor index.html a začněte klasicky tagem <html>. Uložte si ho do složky ve které máte složku images.

14.) Nyní si uděláme hlavičku. Takže náš kód bude vypadat takle:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
  <meta http-equiv="content-type"
  content="text/html; charset=windows-1250" />
  <meta name="author" content="Martin 'zizi' Chvatal" />
  <meta name="description" content="portfolio nekoho" />
  <meta name="keywords" content="grafika, css, html, webdesign" />
  <link rel="shortcut icon" type="image/gif" href="favicon2.gif" />
  <link rel="stylesheet" href="styl.css" type="text/css" />
  <title>Portfolio</title>
</head>
<body>

</body>
</html>

Tagy <meta> předávají informace o stránce prohlížeči.
Takže první meta tag říká prohlížeči, že web je ve znakové sadě windows-1250. Kdybychom místo windows-1250 napsali utf-8, tak to bude v UTF-8 atd.
Druhý meta tag nám atributem author říká, že jeho obsah bude autor webu a atribut content je jeho obsah. V našem případě já Martin ‚zizi‘ Chvátal.
Třetí meta tag description je popis, čtvrtý keywords jsou klíčová slova pro vyhledávače, většina vyhledávačů už však tyto tagy ignoruje.
Tagy <link> náš kód na něco odkazují. První na ikonku naší stránky (takzvaný favicon) a druhý na externí css soubor.
Tag <title> udává název naší stránky.
Taky jsem už udělal tag <body>, což je tělo našeho webu a cokoli do něj napíšete už bude prohlížeč zobrazovat v samotné stránce(narozdíl od head).

15.) Taky nesmíme na úplný začátek dokumentu zapomenout umístit doctype, což Anubis v jednom ze svých html tutoriálů (Tvorba jednoduchého webu, část prvni) popisuje jako element, který nám udává druh použitého (x)html (v našem případě xhtml) a typ dtd . Takže

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

16.) Teď se začneme zabývat obsahem webu, čili tomu co je mezi <body> </body>. Udělejte <div id=„vse“> pomocí kterého to celé validně vycentrujeme. Teď si vytvořte externí css soubor a to styl.css, který umístěte opět do složky.

body {
        background-color: #bdbdbd; /*barva pozadí celého webu*/
        font-family: verdana; /*písmo webu*/
        color: #000; /*barva písma*/
        text-align: center; /*vystředění webu pro MSIE*/
        margin-top: 40px;
        margin-bottom: 40px;
        font-size: 12px; /*velikost písma*/
}
/*nadefinujeme nadpis*/
h1 {
  font-size: 16px;
  color: #FF7373;
  text-decoration: none;
  margin: 0 0 10px 10px;
  font-weight: bold;
}
/*odkazy*/
a:link, a:visited {
  color: #000;
        text-decoration: underline;
        font-weight: bold;
}
a:hover {
  color: #000;
        text-decoration: none;
        background-color: #bdbdbd;
                font-weight: bold;
}
/*odstavec*/
p {
  text-indent: 10px;/*odražení prvního řádku odstavce od levého okraje*/
  margin: 0px;
  padding: 5px 0 10px 0; /*nahore vpravo dole vlevo*/
}
/*acronym*/
acronym {
  text-decoration: none;
  border-bottom: 1px dashed #000;
  cursor: help;
  font-weight: bold;
  font-size: 12px;
}
/*vystředění webu pro FF Operu atd...*/
#vse {
        margin: 0 auto;
        width: 500px;
        text-align: left;
}

17.) Div <div id=„head“></div> je logo, které v css nadefinujeme :

#head {
  width: 500px; /*šířka obrázku*/
  height: 140px; /*výška*/
  background-image: url("./images/vrsek_loga.gif"); /*cesta k obrázku*/
  margin: 0px;
  padding: 0px;
}

18.) Teď se pustíme do menu. Uděláme si v html :

<div id="menu">
  <div id="spodek_loga"></div>
  <div id="home"><a href="#" title="home"></a></div>
  <div id="about"><a href="#" title="about"></a></div>
  <div id="works"><a href="#" title="works"></a></div>
  <div id="links"><a href="#" title="links"></a></div>
</div>

A CSS :

/***menu***/
#menu {
  width: 500px;
  height: 20px;
  margin: 0px;
  padding: 0px;
  margin-bottom: 10px; /* odstrčíme od loga textové pole */
}
/* levá spodní část loga */
#spodek_loga {
  width: 180px;
  height: 20px;
  background-image: url("./images/spodek_loga.gif");
  float: left; /*díky tomuto nejsou divy pod sebou ale vedle sebe*/
  display: block; /*díky tomuto nejsou divy pod sebou ale vedle sebe*/
}
/* odkaz HOME */
#home a {
  width: 80px;
  height: 20px;
  background-image: url("./images/home.gif");
  margin: 0px;
  padding: 0px;
  float: left;
  display: block;
}
#home a:hover {
  width: 80px;
  height: 20px;
  background-image: url("./images/home.gif");
  margin: 0px;
  padding: 0px;
  float: left;
  display: block;
  background-position: 0% 100%; /* obrázek posuneme o 100% nahoru */
}

Ptáte se proč jsem prostě neudělal dva obrázky home_base.gif a home_hover.gif, které by se po najetí myší střídali? Je to prosté. Kdybych to tak udělal a vy byste najeli na odkaz myší obrázek home_hover.gif by se ještě načítal, kdežto takle už je předem načtený a po najetí myší se pouze home.gif posune nahoru. Podrobněji na wellstyled.com.
Ostatní odkazy udělejte stejně jako home (pouze změníte název divu a cestu k obrázku).

19.) Nyní to nejjednodušší – a to textové pole. Doufám že na tom je všechno jasné, tady je to :

<div id="vrsek_textu"></div>
<div id="text">
<div id="podtext">
  <h1>Portfolio</h1>
  <p>
    text
  </p>
  <h1>info</h1>
  <ul>
    <li>
    odrážka
    </li>
    <li>
    odrážka
    </li>
    <li>
    odrážka
    </li>
  </ul>
</div>
</div>
<div id="spodek_textu"></div>
________________________________________________

#vrsek_textu {
  width: 500px;
  height: 20px;
  background-image: url("./images/vrsek_textu.gif");
  margin: 0px;
  padding: 0px;
}
#text {
  width: 500px;
  background-image: url("./images/prostredek.gif");
  text-align: center;
}
#spodek_textu {
  width: 500px;
  height: 20px;
  background-image: url("./images/spodek_textu.gif");
  margin: 0px;
  padding: 0px;
}
#podtext {
  width: 460px;
  margin: 0 20px 0 20px;
  text-align: left;
}

Doufám že vám to k něčemu je a že jsem to napsal srozumitelně i pro laika. Když vzniknou potíže stačí napsat na fórum a už je jedno jestli vám pomůžu já nebo kdokoliv jiný.
Celý web (zip soubor) ke stažení zde web.zip.
Tutoriál pro vás napsal ZiZi.

Hodnocení tutoriálu: 2.8 (hodnotilo 33 uživatelů)