V několika kapitolách si ukážeme, jak si můžete vytvořit Vaši první jednoduchou, ale moderní webovou šablonu za použití jazyků html a css.
Kapitola druhá – Rozložení layoutu
Představa
Než začnu pracovat, potřebuji vědět, co chci. Občas se setkávám s tím, že někdo řekne, chci web a to je jediné co ví. Což je v pořádku, pokud to je klient, ale pokud to je webdesigner, tak je průser.
Je třeba si položit pro začátek pár otázek. Tj. kde bude hlavička webu? Co v ní bude? Kde bude menu? Kde reklamu? Pokud vůbec nějaká reklama bude? …apod. Možná úplně nejlepší je tužka, papír a udělat si aspoň základní náčrt, nebo se podívat na nějaké už hotové weby a tam se inspirovat.
Nezapomenout se optat klienta, zda má nějaké přání ohledně designu. Pokud ovšem neděláte web pro sebe.
Příklady náčrtů:
Pozn.: Naleznete na http://moderniweb.com/vyuka/html5/rozsirena_sablona.html (dole).
Tyto náčrty jsou základ, který se používá dnes na webu poměrně často, a ještě stále se s nimi v hojném měřítku setkáváme. Většinou mají šířku nějakých 960px nebo 1000px. Což je dnes již zastaralé, ale používat se to dá celkem bez větších problémů. Naopak tato řešení jsou jednoduchá a stále efektivní. Jen krapet nemoderní.
Pozn.: Tyto stránky moderniweb.com, také mají základní rozměr 1000px. Tj. tvrzení co je a není moderní, berme z nadhledem. 😉
My budeme pracovat na moderním responzivním řešením, které se táhne přes celou obrazovku.
K práci
Já jsem zvyklý pracovat na jednom monitoru (pokud má dostatečné rozlišení), kde na jedné polovině monitoru mám PSPad a na druhé otevřený prohlížeč. Krása při této práci je, že téměř hned vidíte výsledky svého příkazu. Stačí jen napsat příkaz a stisknout na prohlížeči F5, pokud se jedná tedy o vizuální příkaz. V PSPadu by také měli být otevřené dvě záložky. Jedna index.html a druhá style.css.
V souboru index.html se bude pracovat převážně v části:
<body> </body>
Tj. Psát se bude v prostoru mezi těmi to dvěma elementy.
<body> zde se bude psát </body>
V souboru style.css se bude psát odshora dolů. Obdobně jako při programování.
Základní kostra
Základní kostra není kupodivu element <body>. Dříve se považoval za základní kostru. Někdy se i dál používá, ale lepší je si vždy udělat vlastní základní kostru. Určitě to je lepší pokud děláte hodně složité weby, nebo hlavně pokud neděláte web přes celou obrazovku.
Jako naší základní kostru můžeme použít element <article>, nebo element <div>. Element <div> mám raději. Je více univerzální, navíc specifikace HTML5 kam patří element <article> stále není hotová, takže pro jednoduchost použijeme zatím <div>.
<body> <div> </div> </body>
Element <div> je třeba pojmenovat kvůli stylování.
<div id="kostra">
Jsme v ČR a navíc angličtinu neovládám, tak budeme v rámci výuky používat češtinu. Prozatím, ale pokud budete pracovat pro velké firmy, či prodávat do zahraničí, tak musíte anglicky. Na většině webech v angličtině se používá pojem „page“ (stránka).
První styl
Přepneme si na style.css a vložíme tento příkaz:
body {
background: rgb(0,0,0);
}
Přepneme na prohlížeč, stiskneme F5 a můžeme vidět první změnu. Pokud nic nevidíme. Chyba. Pokud se barva změnila na černou. Úkol propojení je opravdu splněn.
V některých starších, ale i poměrně nových prohlížečích jsou odlišnosti a proto doporučuji přidat minimálně tento následující příkaz, který nastaví mezery na okraji prohlížečů na 0.
html, body {
padding: 0;
margin: 0;
}
Soubory z lekce ke stažení: lekce-2.zip