CSS a jednoduchá HTML stránka
Obsah lekce:
- Úvod
- Krok 1 – základ stránky
- Krok 2 – hlavní kostra stránky
- Krok 3 – vodorovné horní menu
- Krok 4 – levé postranní menu
- Krok 5 – patička, copyright
- Krok 6 – obsah (část první)
- Krok 7 – obsah (část druhá)
Úvod
V této lekci vytvoříme webovou stránku pro společnost HR manager, která se zabývá určitou problematikou ohledně zaměstnání. Vytvoříme tedy statickou stránku, použijeme HTML a CSS styly a pokusíme se celý design vytvořit příjemný pro návštěvníka, ovšem velmi jednoduchý, protože se jedná o prezentaci, která by měla být jednoduchá.
Na úvod si otevřeme program Adobe Dreamweaver a zvolíme nový HTML dokument. Ihned jej uložíme a do stejného adresáře poté rozbalíme archiv s obrázky.
Struktura tedy bude následující:
- images [obrazek1.jpg, obrazek2.jpg, ...]
- css [styly.css]
- index.html
Krok 1 – základ stránky
První věcí, kterou uděláme, bude změna názvu stránky. Nazveme ji tedy HR Manager. Do hlavičky ještě připojíme soubor se styly, abychom veškeré styly měli pohromadě v externím css souboru. Editování takových souborů je poté jednoduché, styly lze použít pro neomezený počet dokumentů a elementů a lze také velmi jednoduše periodicky měnit design stránek (například léto, zima, slevový týden, …).
U stylů můžeme vidět atribut media, kterým určujeme, že takový vzhled bude použit pouze pro klasické zobrazení v prohlížeči. Dále si můžeme všimnout meta tagu na druhém řádku, který udává, že celý dokument je uložen v kódování UTF-8. Díky tomuto kódování nebude problém s háčky a čárkami, proto budeme používat výhradně kódování UTF-8.
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HR Manager</title> <link href="css/styly.css" rel="stylesheet" type="text/css" media="screen" /> </head>
Než budeme dělat jakékoli stylování v externím .css souboru, ujistíme se, že na začátku máme přidaný následující příkaz:
* {
padding: 0px;
margin: 0px;
}
Tento příkaz zaručí, že žádný prohlížeč nebude zobrazovat chybné odsazení v místě, kde bychom to nečekali a pravděpodobně ani nechtěli. Stává se často, že je odsazení kvůli defaultním hodnotám v prohlížečích vykresleno někde, kde podle nás být nemá, a taková chyba se špatně hledá, proto jí tímto kódem předejdeme.
Dalším krokem bude přidání obrázku pozadí na celou stránku (budeme tedy stylovat celý tag body, který představuje celou stránku). Přidáme barvu na pozadí, obrázek, nastavíme jeho pozici na horní střed a zajistíme, že se nebude opakovat. Zároveň zde také nastavíme font pro celou stránku.
body {
background-color: #bcd748;
background-image: url(../images/bodybackground.jpg);
background-repeat: no-repeat;
background-position: center top;
font-family: Tahoma, Geneva, sans-serif;
}
Po tomto kroku bude naše stránka vypadat jako na následujícím obrázku.
Krok 2 – hlavní kostra stránky
V elementu body vytvoříme hlavní div, kterému přiřadíme id box. Toto bude ohraničení celého středového obsahu. Do divu box budeme umisťovat veškerý další kód.
Budeme pokračovat vytvořením jednotlivých div elementů, které budou určovat tvar středového boxu. Vytvoříme si pro to 4 elementy div pod sebe a id zvolíme popořadě header, menu, content a footer. Názvy napovídají, jakou roli budou hrát. Často se hodí metoda, že jednotlivým divům přidáme 1 px tenký, různě barevný okraj, abychom mohli stránku odladit v případě, že něco nefunguje, jak bychom si představovali.
<div id="header"> </div> <div id="menu"> </div> <div id="content"> </div> <div id="footer"> </div>
V boxu header bude umístěno vodorovné menu a horní proužek, v boxu menu bude klasické levé menu, v boxu content bude textový obsah hlavní strany a v textu footer bude copyright.
Zároveň do divu s id header vložíme obrázek horního proužku a nezapomene přidat popis pomocí atributu alt, protože v opačném případě by stránka nebyla ve finále vyhodnocena jako validní.
<img src="images/topstrip.jpg" alt="Horní proužek" />
Dále budeme pokračovat se stylováním těchto elementů. Začneme elementem box, kterému nastavujeme pevnou šířku, aby bylo možno jej centrovat pomocí příkazu margin: auto (ten si automaticky dopočítá okraje zleva a zprava, aby byl element přesně uprostřed nadřazeného elementu (zde je nadřazené jen body).
div#box {
width: 805px;
margin: auto;
margin-top: 200px;
background-color: #95af41;
}
Div s názvem header musí mít jen pevně nastavenou výšku kvůli výšce vnořeného obrázku a kvůli budoucí výšce menu, které přidáme v kroku 3.
div#header {
height: 39px;
}
Nyní budeme pokračovat divem s názvem menu, který je umístěn vlevo pod hlavičkou (header). Zde vidíme použití příkazu float: left. Tento příkaz vezme element a snaží se jej posunout co nejvíce na levou stranu nadřazeného dokumentu (samozřejmě za položky přidané před ním).
Stejně tak lze použít i příkaz float: right, který funguje stejně, jen posouvá obsah vpravo.
div#menu {
float: left;
width: 200px;
}
div#content {
background-color: #FFF;
border: solid 1px black;
float: right;
width: 581px;
padding: 10px;
}
(Obsah bude mít navíc tenký černý okraj.)
Zde tento příkaz používáme, protože potřebujeme umístit svisle vedle sebe dva elementy div, u kterých předem neznáme výšku, proto není možno použít například margin-top, nebo něco podobného (absolutní pozicování ani tabulky zde neuvažujme, protože od jejich používání se upouští). Bez použití příkazu float by se menu a content umístily pod sebe.
Ovšem příkaz float vyžaduje ukončení, jinak budou posouvány všechny následující objekty. Další problém vidíme na předchozím obrázku – div menu nemá stejnou výšku jako div content a kvůli neukončení příkazu float tudíž nejsou vykresleny stejně vysoké. Po přidání ukončení se div menu roztáhne na stejnou výšku jako div content (je k vidění v následujícím obrázku).
Možná vás napadá, proč má div content určitou výšku, zatímco div menu ji nemá. Vysvětlení je v CSS pravidlu, které jsme nastavili – padding: 10px. Toto pravidlo určuje, že veškerý obsah divu content bude mít 10px odstup od kraje, proto i prázdný obsah má tento odstup a tento odstup tvoří výšku divu.
Ukončuje se příkazem clear: both, který je nutno umístit do prvního elementu, který bude pod těmito dvěma a na který se již posouvání nemá vztahovat, což je element footer. Zároveň div footer bude mít výšku dle výšky obrázku na jeho pozadí.
div#footer {
clear: both;
height: 16px;
background-image: url(../images/botstrip.jpg);
}
Krok 3 – vodorovné horní menu
Vodorovné menu přidáme do divu s názvem header a přidáme jej jako odrážkový seznam, u kterého nastavíme, aby se puntíky před odrážkami nevykreslovaly pomocí příkazu list-style-type: none. Standardní seznam ovšem není vodorovný, nýbrž svislý. Tento problém odstraníme jednoduchým příkazem display: inline.
Kód pro seznam není těžký, jde jen o vnoření odkazů do odrážek:
<ul id="menutop"> <li class="menutop_active"><a href="hlavnistranka.html">Hlavní stránka</a></li> <li><a href="ofirme.html">O firmě</a></li> <li><a href="nastym.html">Náš tým</a></li> <li><a href="reference.html">Reference</a></li> <li><a href="partneri.html">Partneři</a></li> <li><a href="kontakty.html">Kontakty</a></li> </ul>
Jistě jste si všimli, že první odrážka má přidanou svou třídu – to proto, aby bylo pozadí aktivní položky zvýrazněno bílou barvou. U odkazů funguje pravidlo, že po najetí kurzorem myši změní barvu na červenou.
.menutop_active {
background-color: white;
}U samotných položek poté můžeme donastavit detaily jako padding, zarovnání textu, velikost fontu, barvu a další, které jsou vidět v následujícím úryvku kódu. Všimněme si použití vodorovného vykreslení seznamu ve druhém řádku.
div#header ul li{
display: inline;
font-size: 18px;
height: 24px;
list-style-type: none;
padding-top: 0px;
text-align: center;
padding-top: 1px;
padding-left: 10px;
padding-right: 10px;
}
div#header ul li a{
color: #275622;
text-decoration: none;
font-size: 14px;
font-weight: bold;
}
div#header ul li a:hover{
color: #d62f29;
text-decoration: none;
font-weight: bold;
}Pokud si ale stránku otevřeme v tomto okamžiku, zjistíme, že celé menu je umístěno vlevo, což jsme nechtěli. Nezbývá než přidat příkaz float: right na celý seznam (zde nemusí být ukončovací clear: both, protože v divu header žádný následující element není).
div#header ul {
float: right;
}
Krok 4 – levé postranní menu
Levé menu budeme přidávat do divu s id menu a budeme jej realizovat opět pomocí odrážkového seznamu, u kterého nastavíme, aby se puntíky před odrážkami nevykreslovaly.
<ul id="menuleve"> <li><a href="poradenstvi.html">Poradentství v oblasti řízení lidských zdrojů</a></li> <li><a href="vzdelavanilidi.html">Vzdělávání a rozvoj v oblasti vedení lidí</a></li> <li><a href="outsourcing.html">Outsourcing personální administrativy a mezd</a></li> </ul>
V CSS souboru vytvoříme pravidlo pro položku menu li, kde nastavíme vhodnou velikost fontu, zvolíme nevykreslování puntíku odrážky, zvolíme obrázek na pozadí a výšku nastavíme na hodnotu výšky obrázku z pozadí. Musíme si pohrát s nastavením hodnot padding, aby byl text skutečně uprostřed.
Po najetí kurzorem do obdélníkové plochy odrážky se kurzor změní, aby byl signalizován odkaz, a stejně tak se změní i barva textu. U odkazu je nastaveno, aby nebyl nijak dekorován (podtržení apod.) a byl tučný.
div#menu ul li{
font-size: 18px;
height: 41px;
list-style-type: none;
padding: 0px;
text-align: left;
background-image: url(../images/btn-bg.jpg);
background-repeat: no-repeat;
line-height: 15px;
padding-top: 6px;
padding-left: 16px;
}
div#menu ul li:hover{
color: white;
cursor: pointer;
}
div#menu ul li a
{
color: inherit;
text-decoration: none;
font-size: 11px;
font-weight: bold;
}
Krok 5 – patička, copyright
Do patičky se obvykle přidávají informace o autorských právech, případně zde můžeme vidět jméno tvůrce stránky, různé odkazy, čas, datum a další podobné věci, které se na stránku hodí. Lze sem přidat i obrázek, že je naše stránka validní, který nám poskytne validátor w3.org.
Přidáme tedy do divu footer další dva divy webmaster a copyright v tomto pořadí, protože webmaster bude umístěn nad copyrightem.
<div id="footer"> <div id="webmaster" >webmaster</div> <div id="copyright" >© HR Manager | info@hrmanager.cz | www.hrmanager.cz</div> </div>
Nyní opět použijeme posunutí textu na stranu pomocí atributu float, v případě webmaster napravo, v případě copyright nalevo. Pomocí hodnot padding texty umístíme na pozici, na kterou potřebujeme. Ukončovat floatování nemusíme, protože jsou to poslední elementy na stránce.
div#copyright {
float: left;
padding-top: 18px;
padding-left: 10px;
font-size: 11px;
color: #275622;
padding-bottom: 20px;
}
div#webmaster {
float: right;
font-size: 12px;
color: white;
padding-right: 5px;
}
Krok 6 – obsah (část první)
Do obsahu vytvoříme jednoduchý nadpis úrovně h1, kterému přidáme spodní tečkovaný okraj pro optické oddělení nadpisu, a poté odstavec textu.
Následně přidáme dva odrážkové seznamy (každý do samostatného divu, abychom mohli u těchto divů nastavit float: left – zarovnáme seznamy nalevo s pevně nastavenou šířkou, floatování bude ukončeno v příštím kroku). U seznamů je nutno správně nastavit hodnoty padding, aby text hezky vypadal. Šířku použijeme 200 px, aby se oba seznamy vedle sebe vešly.
Zajímavější část ovšem přijde v podobě položek seznamů, kde opět zrušíme klasické puntíky před odrážkami a použijeme místo nich dodané obrázky ze složky images (jsou zde dva typy, proto musíme vytvořit dvě sady css pravidel). Následně je nutno upravit výšku řádku, aby odrážka korespondovala s prvním řádkem, a atribut padding-bottom, aby nebyly jednotlivé odrážky příliš blízko u sebe.
Můžeme si všimnout, že na jednotlivé odrážky je také použit příkaz float: left, to proto, aby veškerý obsah seznamů byl rovněž posunutý na levou stranu.
<h1>Hlavní stránka</h1> <p class="texttoptucny"> Lidské zdroje jsou zásadním, finančně velmi náročným a také nejhůře ovladatelným kapitálem
společnosti. I přes tento fakt bývá oblasti řízení lidí věnováno málo pozornosti a výkon
společností tím ztrácí svou efektivitu a stabilitu. Služby HR Manager pomohou nastartovat,
revidovat či podpořit jednotlivé procesy řízení lidských zdrojů.
</p>
<div id="seznamlevy">
<ul>
<li class="seznamitemlevy">Poradenství v oblasti řízení lidských zdrojů </li>
<li class="seznamitemlevy">Design a implementace HR procesů a nástrojů </li>
<li class="seznamitemlevy">Fúze, akvizice a organizační projekty z hlediska HR</li>
</ul>
</div>
<div id="seznampravy">
<ul>
<li class="seznamitempravy">Vzdělávání v oblasti řizení lidských zdrojů a leadershipu </li>
<li class="seznamitempravy">Executive koučink </li>
<li class="seznamitempravy">Týmový koučink </li>
</ul>
</div>CSS:
h1 {
color: #275622;
text-align: right;
border-bottom: dotted 1px #34742a;
font-size: 20px;
text-decoration: none;
padding-bottom: 8px;
padding-top: 5px;
}
p.texttoptucny {
text-align: justify;
font-weight: bold;
font-size: 12px;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
div#seznamlevy{
padding-left: 50px;
padding-top: 25px;
float: left;
width: 200px;
}
div#seznampravy
{
padding-left: 110px;
padding-top: 25px;
float: left;
width: 200px;
}
.seznamitemlevy {
font-size: 12px;
list-style-type: none;
list-style-image: url(../images/yds.jpg);
line-height: 18px;
padding-bottom: 3px;
float: left;
width: 200px;
}
.seznamitempravy
{
font-size: 12px;
list-style-type: none;
list-style-image: url(../images/rds.jpg);
line-height: 18px;
padding-bottom: 3px;
float: left;
width: 200px;
}
Krok 7 – obsah (část druhá)
V druhé části se pouze přidává text, seznam a dva obrázky. Nadpis h2 má stejně jako h1 spodní okraj na optické oddělení. Můžeme si všimnout, že obrázek loga má nastavenu zápornou hodnotu margin-top. Společně s příkazem margin-left toto zajistí, že bude vsunut na pravou stranu a vytlačí text odstavce, který je vlevo od něj. Podobného efektu by se dalo docílit určením šířky odstavce s textem a přidáním příkazu float.
Na konci textu je odkaz, u kterého je nastaveno target="_blank", což zajistí, aby se po kliknutí na text otevřel odkaz v novém panelu (popř. okně) a aby se uživatel po prohlédnutí dané stránky mohl vrátit zpět pouze zavřením daného panelu (popř. okna).
<h2>AKTIP</h2> <div id="aktip_text"> <p> <strong>Konzultační a terapeutický institut Praha</strong> je privátní poradenské a konzultační
centrum, zaměřené na podporu sebepoznání, osobního rozvoje a rozšiřování možností za účelem
nacházení optimálního životního stylu. </p> <p> <strong>V rámci poradenských služeb firmám nabízí poradenství a lektorství, coaching a mentoring
v následujících oblastech: </strong> </p> <div id="aktip"> <img src="images/logo_aktip.jpg" alt="Aktip logo" /> </div> <div id="aktip_seznam"> <ul> <li>osobní rozvoj, slaďování osobních a firemních cílů zodpovědných osob </li> <li>vzdělávání v oblasti řizení lidských zdrojů a leadershipu </li> <li>krizový management, mediování konfliktů </li> <li>zacházení se stresem a nácvik relaxačních technik </li> </ul> </div> Více informací najdete na <a href="http://www.aktip.cz" target="_blank">www.aktip.cz</a> </div> <img src="images/HR-schema-popis.jpg" alt="HR Manager schema" />
CSS:
div#content h2
{
border-style: none;
border-bottom: 1px solid #b31521;
color: #b31521;
font-size: 14px;
text-align: left;
clear: both;
padding-top: 15px;
padding-bottom: 6px;
font-family: Tahoma, Geneva, sans-serif;
}
div#aktip_text
{
padding-top: 15px;
padding-left: 30px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
width: 420px;
text-align: justify;
padding-bottom: 20px;
}
div#aktip_text p
{
margin-bottom: 15px;
}
div#aktip_seznam
{
padding-top: 25px;
padding-left: 25px;
padding-bottom: 10px;
}
div#aktip_seznam ul li
{
padding-bottom: 3px;
}
div#aktip_text a
{
text-decoration: none;
font-weight: bold;
color: black;
}
div#aktip
{
margin-top: -110px;
margin-left: 440px;
}Další čtení
Otázky a úkoly
- Zkuste si celou stránku vytvořit bez použití nápověd, pokud to zvládnete, tak jste schopni vytvořit základ téměř jakékoli statické stránky.