Archiv pro rubriku: Student

V této rubrice naleznete přehledné informace pro studenty týkající se tvorby www stránek.

Začínáme s Moderním Webem

Začínáme s Moderním WebemPrávě se díváte na možná první knihu v historii, která propojí zdánlivě dva nepropojitelné světy.

Knihu si můžete zakoupit u nakladatele: www.kknihy.cz

Kniha propojuje svět tvorby www stránek, kde si projdete krok za krokem postup při tvorbě webové šablony. Zároveň bude výklad rozšířen o příběh ze světa fantasy, který se bude odehrávat na pozadí výuky, díky čemuž bude samotné učení o něco zábavnější.

Po přečtení knihy budete mít v ruce kompletní plně responzivní webovou stránku včetně fotogalerie napsanou jen za pomoci jazyků HTML a CSS.

Kniha je určena převážně pro začínající webdesignéry, dále studenty a jejich učitele. Inspiraci zde může najít každý, koho zajímá tvorba webových stránek a alternativní metody výuky, či práce na webovém projektu.

Knihu můžete sdítel na facebooku

K prodeji také na:

Alza: www.alza.cz

Google Play: play.google.com

eReading.cz: www.ereading.cz

Palm knihy: www.palmknihy.cz

Ráj knih: rajknih.cz

eBUX.cz: www.ebux.cz

arara.cz: ebooks.arara.cz

ExtraReader: extrareader.cz

Databáze knih: www.databazeknih.cz

Webová šablona 9

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 devátá – zbylé stránky

Zbylé stránky

Je třeba tedy dokončit ostatní html stránky.

Služba 1

Otevřeme si v PSPadu soubor sluzba-1.html a upravíme.

     <div id="nadpis">
      <h1>Služba 1</h1>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
        </p>
      </div>
     </div>

nahled-37

Dále potřebujeme nějakou strukturu obsahu. Nebudeme vymýšlet nic složitého. Struktura může vypadat různě. My tedy použijeme základ a to text s obrázky.

     <div id="obsah">
      <div class="produkt">
        <img src="img/produkt.jpg" alt="produkt" class="obr-1">
        <p>  
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Quisque porta. Nullam at arcu a est sollicitudin euismod. Morbi scelerisque luctus velit. Proin mattis lacinia justo. Nulla est. Pellentesque sapien. Nullam faucibus mi quis velit. In enim a arcu imperdiet malesuada. Ut tempus purus at lorem. Morbi scelerisque luctus velit. Curabitur bibendum justo non orci. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Curabitur vitae diam non enim vestibulum interdum.
        </p><p>
          Vivamus ac leo pretium faucibus. Morbi scelerisque luctus velit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aenean fermentum risus id tortor. Mauris metus. Praesent dapibus. Etiam commodo dui eget wisi. Ut tempus purus at lorem. In rutrum. Duis viverra diam non justo. Nam sed tellus id magna elementum tincidunt. Quisque tincidunt scelerisque libero.
        </p>
        <img src="img/produkt.jpg" alt="produkt" class="obr-2">
        <p>
          Integer lacinia. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nullam faucibus mi quis velit. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut tempus purus at lorem. Phasellus faucibus molestie nisl. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Sed convallis magna eu sem.   
        </p><p>
          Integer lacinia. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nullam faucibus mi quis velit. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut tempus purus at lorem. Phasellus faucibus molestie nisl. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Sed convallis magna eu sem.   
        </p>
      </div>
     </div>

Ještě si stáhněte tento obrázek: http://moderniweb.com/blog/stahnout/sablona/img/produkt.jpg a uložte do složky img. Výsledek by měl pak vypadat takto:

38

Výsledek je samozřejmě třeba upravit v souboru style.css

.produkt {
  padding: 10px;
  color: white;
  font-size: 22px;
}
.produkt img {
  margin: 20px;
  width: 350px;
}
.produkt .obr-1 {
  float: left;
}
.produkt .obr-2 {
  float: right;
}

Všimněte si, že používáme poslední dobou stále stejné vlastnosti.

nahled-39

V podstatě jsme právě dokončili obsah i pro ostatní html stránky až na fotogalerii.html a kontakt.html. To znamená, že můžete všechno, co jsme si v této kapitole sepsali, označit, zkopírovat do všech ostatních html stránek a změnit snad jen text v <h1>.

Fotogalerie

Většinou se fotogalerie dělají za pomocí javascriptu. Tím vás trápit nebudu. Můžete si jí ovšem zakoupit třeba zde: http://moderniweb.com/eshop/8-fotogalerie (pro studenty je budu zlevňovat na pár stovek, někdy v průběhu příštího roka a přidám postup tvorby).

Zatím použijeme základní náhled a to se dělá tak, že v index.html

    <div id="obsah" class="fotogalerie">
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
      <a href="img/produkt-v.jpg" target="_blank"><img src="img/produkt.jpg" alt="produkt"></a>
     </div>

nahled-40

Dále samozřejmě je třeba obrázek stáhnout ve větší velikosti: http://moderniweb.com/blog/stahnout/sablona/img/produkt-v.jpg a uložit do složky img.

Nakonec upravíme ve style.css.

.fotogalerie img {
  width: 350px;
  margin: 10px;
}

… a naše jednoduchá fotogalerie je hotova.

Kontakt

Už nám chybí jen kontakt. Tak se do něj pustíme. Otevřeme si tedy v PSPadu soubor kontakt.html.
Upravíme nadpis. Pokud nemáme.

<h1><strong>Kontakt</strong></h1>

Dále do obsahu vložíme toto:

    <div id="obsah">
      <div class="kontakt">
        <p>
        <strong>Firma, s.r.o</strong><br>
        Ulice 123/45<br>
        Město<br>
        100 00<br>
        </p><p>
        +420 765 432 100<br>
        +420 345 678 910
        </p><p>
        <a href="mailto:inf@firma.cz">inf@firma.cz</a>
        </p>
      </div>
     </div>

Element <br> slouží jako enter. Nebo se dá také napsat, ukončí řádek, který následně pokračuje níže.
<a href=“mailto:inf@firma.cz“> spustí ve většině případů emailového klienta po té, co návštěvník klikne na odkaz. Nefunguje ovšem vždy.

Přejdeme rovnou na style.css

.kontakt {
  color: white;
  font-size: 22px;
  width: 350px;
  margin-left: 10px;
}

nahled-41

Pěkný. Máte tu ovšem hromadu volného prostoru. My si tam vložíme nějakou mapu. Přepněte na https://www.google.cz/maps a najděte si v menu možnost Sdílet nebo vložit mapu. Google dělá často změny, tak to za pár měsíců může být jinde. Přepnout na Vložení mapy vygenerovaný element <ifrmae> i s obsahem vložit do index.html

     <div id="obsah">
      <div class="kontakt">
        <p>
        <strong>Firma, s.r.o</strong><br>
        Ulice 123/45<br>
        Město<br>
        100 00<br>
        </p><p>
        +420 765 432 100<br>
        +420 345 678 910
        </p><p>
        <a href="mailto:inf@firma.cz">inf@firma.cz</a>
        </p>
      </div>
      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d2218366.194868843!2d17.101884731977407!3d49.78105373142587!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1scs!2scz!4v1449478354074" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
     </div>

Pozice může být logicky jiná. Záleží na vás. Nejčastěji to bývá adresa firmy.
42
Ještě provedeme úpravu ve style.css

.kontakt {
  color: white;
  font-size: 22px;
  width: 350px;
  margin-left: 10px;
  float: left;
}
@media (max-width: 850px) {
  iframe {
    width: 350px;  
  } 
}

nahled-43

Myslím, že právě máte svojí možná první webovou šablonu hotovou.


Soubory z lekce ke stažení: lekce-9.zip

obr-1
obr-2
obr-3
obr-4
obr-5
obr-6
obr-7

Webová šablona 8

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 osmá – další stránky

Další stránky

Někomu se může zdát, že naše webové stránky nejsou úplně hotové. Ve skutečnosti máme opravdu hotovou jen úvodní stránku a web většinou obsahuje stránek daleko více.

V PSPadu si oevřeme index.html a provedeme změny, které jsme si už naznačili.

     <div id="menu">
        <a href="index.html">Úvod</a>
        <span class="sub-menu">
          <a href="sluzby.html">Služby</a>
          <span>
            <a href="sluzba-1.html">Služba 1</a>
            <a href="sluzba-2.html">Služba 2</a>
            <a href="sluzba-3.html">Služba 3</a>
            <a href="sluzba-4.html">Služba 4</a>
          </span>
        </span>
        <a href="historie.html">Historie</a>
        <a href="fotogalerie.html">Fotogalerie</a>
        <a href="kontakt.html">Kontakt</a>
     </div>

Uložíme. V podstatě jsme dokončili menu. Aby vše fungovalo, je třeba jednotlivé soubory ještě vytvořit.
Základní kostru a podobu stránek naštěstí už máme, takže nám stačí vzít úvodní stránku a smazat z ní obsah určení jen pro úvod. Zatím neukládat.

     <img id="poutac" src="img/foto.jpg" alt="foto">
     <div id="nadpis">
      <h1>Hlavní nadpis</h1>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
        </p>
      </div>
     </div>
     <div id="obsah">
      <!-- vše v tomto poli musí být prázdné -->
     </div>
     <div id="zapati">
      <hr>
      <a href="http://moderniweb.com" target="_blank">moderniweb.com © 2015
     </div>
    </div>
  </body>

V PSPadu zadejte Soubory – Uložit jako… a uložíte jako sluzby.html.

Pak znova a uložit jako:

  1. sluzba-1.html
  2. sluzba-2.html
  3. sluzba-3.html
  4. sluzba-4.html
  5. historie.html
  6. fotogalerie.html
  7. kontakt.html

Vše do složky, kde už máme i index.html.

Výsledek by měl vypadat takto:

nahled-32

Služby

Dále by jsme měli jednotlivé stránky zpracovat a doplnit jim obsah. Začneme od začátku. Tedy souborem služby.html. Otevřete si jej smažeme komentáře a doplníme…

     <div id="obsah"> 
       <!-- vše v tomto poli musí být prázdné --><!-- smazat -->  
       <a href="sluzba-1.html" class="sluzba sluzba-1">
        <h3>Služba 1</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
      <a href="sluzba-2.html" class="sluzba sluzba-2">
        <h3>Služba 2</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
      <a href="sluzba-3.html" class="sluzba sluzba-3">
        <h3>Služba 3</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
      <a href="sluzba-4.html" class="sluzba sluzba-4">
        <h3>Služba 4</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
     </div>

nahled-33

Každého určitě napadá, že jsou třeba styly. Přejdeme tedy k rozšíření souboru style.css a doplníme.

.sluzba {
  display: block;
  float: left;
  text-decoration: none;
  color: white;
  width: 250px;
  margin: 10px;
  padding: 10px;
  font-size: 18px;
}

34
V celku povedený. Žádná z vlastnotí pro nás není nová. Snad jen využití řádkového prvku <a> jako blokový prvek. Díky čemuž funguje celá oblast jako jedno velké tlačítko či odkaz.

Zlobí nás tam zápatí. Řešení je několik, ale aby jsme zase nemuseli mazat části zdorojového kódu což se v praxi děje často. Použijeme pro zatím toto řešení, kde doplníme do exitujícího zápisu dva příkazy.

#zapati {
  padding: 20px;
  text-align: center;
  color: silver;
  float: left;
  width: 96%;
}

nahled-35

Dále upravíme hlavní nadpos, aby jsme hned věděli, kde jsme.

<div id="nadpis">
      <h1>Služby</h1>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
        </p>
      </div>
     </div>

nahled-36

Původně jsem chtěl udělat něco propracovanějšího, ale pro zatím si myslím, že toto stačí.


Soubory z lekce ke stažení: lekce-8.zip

obr-1
obr-2
obr-3
obr-4
obr-5

Webová šablona 7

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 sedmá – responzivní design

Responzivní design

Jen pro pořádek. Responzivním designem je myšlena úprava webové šablony pro různá rozlišení obrazovek.

Naše šablona je z velké části responzivní, ale ne všude. Dalším a asi už i posledním krokem bude podívat se na to, jak šablonu upravit pro mobilní a jiná zařízení.

Velice pěkný nástroj pro práci s responzivní šablonou je v prohlížeči Mozilla (Nástroje – Vývoj webu – Responzivní design). Nástroj se dá spustit klávesovou zkratkou Ctrl+Shift+M.

Pokud budeme měnit velikost okna v naší šabloně (tahem z pravé strany okna nástroje), zjistíme, že problém máme až od rozlišení 1120px na šířku.

Vyřešíme to luxusně díky css dotazu na media. Jednoduše ve style.css pokračujeme a vložíme toto:

@media (max-width: 1120px) {
  .sekce .nadpis {
    top: 40px;
    left:  30%;
  } 
}

nahled-28

Díky této srandě máme klid až do rozlišení zhruba 840px, kdy se nám může začít překrývat text.

V této chvíli je ideální vše vyřešit tak, abychom měli klid až do cílového rozlišení 360px na šířku. Což je dle nástroje pro vývojáře od Google optimální šířka pro mobilní zařízení a tedy i náš cíl.

Nejlepší je nastavit procentuální délku a relativní umístění, tak, aby se vše měnil samo. Další možností, je neustále posouvat a centrovat elementy podle toho jak se kde střetávají tím, že přidáváme další a další dotazy na media.

Toto řešení není úplně nejhorší, někdy i nezbytné, ale zdlouhavé. V tomto případě se mu naštěstí můžeme vyhnout, ale bude třeba přenastavit většinu elementů v obsahu a hlavičce webu.

Začneme postupně:

@media (max-width: 850px) {
  img#poutac {
    position: absolute;
    top: 0;
    left: 0px;                
  }
  
}

nahled-31

Pokud to budeme brát odshora dolů. První je na řadě poutač. Sice se zdá, že nám nevadí, ale ve skutečnosti je třeba pro vertikální obtékání v tomto případě upřednostnit text nad obrázky. Poutač měl do teď výchozí relativní pozici a obsah pod ním se přibližoval k záhlaví dle toho, jak se poutač zmenšoval, až obsah překryl absolutní nadpis.

Dalším krokem, jak jsem napověděl je nastavení nadpisu na relativní pozici.

Následující příkazy vložit do media:

@media (max-width: 850px) {
  img#poutac {
    position: absolute;
    top: 0;
    left: 0px;                
  }
  #nadpis {
    position: relative;
    top: 0;
    left: 0;
    margin: auto; 
    margin-top: 80px;
  }       
  #nadpis h1, #nadpis p {
    margin-left: 20px;
  }
  #nadpis p, .nadpis p {
    max-width: 500px;
    width: 90%;
  }
  #obsah {
    padding: 20px 0;
    float: left;
    width: 100%;
  }
}

nahled-29

Ve skutečnosti, jak vám určitě po zhlédnutí víše uvedeného kódu došlo, tak problémů bylo více.

Nadpis bylo třeba po odsadit o 80px a hlavně u obsahu nastavit obtékání a tedy i délka. Zapomenout se nesmělo ani na odstavce a nadpisy druhé úrovně.
Když tak můžete postupně zadávat příkazy a koukat co se změnilo.

Hotoví však stále nejsme.
Zápatí se nějak nekamarádí s obtékajícím obsahem, takže jej také musíme nechat obtékat.
Doplníme do media a nastavíme okraje i obtékání:

  }          
  #obsah {
    padding: 20px 0;
    float: left;
    width: 100%;
  } 
  #zapati {
    float: left;
    width: 90%;
    padding: 20px 0;
    margin: 0 10px;
  }
}

Zápatí už se kamarádí s obsahem, ale jednotlivé sekce nikoli. Tak se musíme podívat ještě na sekce v obsahu a rovnou si je připravíme i pro ta nejnižší rozlišení.

  #zapati {
    float: left;
    width: 90%;
    padding: 20px 0;
    margin: 0 10px;
  }           
  .sekce .nadpis {
    top: 40px;
    left:  5%;
  }                    
  .sekce img {
    min-width: 350px; 
  }
}

30

Zdánlivě hotovo.

Problémy však můžou nastat, pokud budeme měnit délky obsahů. Dále si můžete hrát i s velikostí nadpisů a dalším nastavením. Oboje nechám už na vás.

Jen na závěr nezapomenout na jednu důležitou maličkost. Aby stránky opravdu fungovali i v mobilních zařízeních tak, jak jsme nastavili, je třeba nastavit viewport. Což se dělá v index.html v hlavičce head.

Jednoduše doplníte toto:

  <head>    
    <meta charset="utf-8">
    <title>Moje šablona</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="styly/style.css">
  </head>

To je ode mě vše. Pokud jakékoli dotazy, tak piště. Pokusím se odpovědět.
Děkuji za vaši přízeň.


Soubory z lekce ke stažení: lekce-7.zip

obr-1
obr-2
obr-3
obr-4

Webová šablona 6

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 šestá – Animace a vzhled menu

Vzhled

V první řadě je určitě vhodné, aby menu na sebe upozornilo. Nejčastěji tak, že vybočuje s designu webu například jiným písmem, tučným textem, výraznou či odlišnou barvou, stínem textu anebo nějakým efektem tlačítka.

Upravíme menu prozatím jen za pomoci css.

Najdeme si část, kterou jsme věnovali menu a přepíšeme (doplníme, upravíme) ji do této podoby:

#menu a {
  color: rgb(220,220,220);                   
  text-decoration: none;                     
  background: rgb(185,0,0);
  font-size: 20px;                            
  padding: 2px 10px;                          
  margin-left: -4px;
  padding: 6px 14px;
  font-weight: bold; 
  font-family: arial;
  text-shadow: 1px 1px 1px rgb(50,50,50);
}
.sub-menu span {
  position: absolute;
  top: 38px;
  margin-left: -114px;
  width: 130px;
  visibility: hidden;                      /* skrýt menu */
  line-height: 32px;                       /* výška řádku */
}

nahled-27

Musela se upravit i výška řádku v sub menu, protože jsme upravili vnitřní okraje, ale výška řádku zůstala stejná.

Menu už vypadá zajímavěji. Díky šedé je výraznější… možná až moc.  Necháme to.

Animace tlačítka

Sice se nejedná o typické tlačítko, ale i určitý efekt stisknutí tu máme, tak je načase jej modernizovat o plynulejší efekt.

Přídáme do css k #menu a .sub-menu span vlastnosti:

#menu a {
  transition-duration: 0.8s;                /* doba prolnutí */
} 

To samé přidáme i do sub menu a dáme větší prodlevu s novou vlastností:

.sub-menu span {
  position: absolute;
  top: 38px;
  margin-left: -114px;
  width: 130px;
  visibility: hidden;                      
  line-height: 32px;
  opacity: 0;                         /* průhlednost menu */
  transition-duration: 1.2s;
}
.sub-menu:hover span {
  visibility: visible;
  opacity: 1;
}

Jde o to, že vlastnost visibilityse nedá animovat za pomoci css3 vlastnosti transition-duration. Naštěstí vlastnost opacityano. Pokud bychom použili jen opacity, proměnu by submenu nezmizelo, ale jen se zneviditelnilo a dál by tak nějak překáželo a reagovalo na myš uživatele či překrývalo jiné elementy.


Soubory z lekce ke stažení: lekce-6.zip

obr-1

Webová šablona 5

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 pátá – Sub menu

Sub menu

Protože jsme použili v nadpisu řádkové prvky, kvůli vycentrování na střed. Může se zdát, že tvorba sub menu může být problém. Není.

Dokonce ani problém není to, že nepoužíváme seznamy pro menu.

Seznam <ul><li> se používají v menu opravdu hodně dlouho a přitom jsem pro to nenašel žádný důvod. Naopak si myslím, že ani seznam pro menu nebyl nikdy určen. Prakticky v každém prohlížeči musíte odstranit odrážky a vznikají i jiné problémy, třeba právě s tím, že už se rovnou používají pro menu blokové prvky a tudíž automaticky padá možnost centrování nadpisů na střed stránky či střed menu.

Naštěstí se to dá obejít css příkazem, který si v našem případě nezapisujme:

li {
  display: inline;
}

Příkaz udělá s blokového prvku, prvek řádkoví.
Na druhou stranu je využití seznamů pochopitelné. Je možné, že s tím počítají i někteří roboti. Dále se menu může brát jako seznam odkazů. Pak by využití elementů <ul><li> dávalo smysl. Porušením božího desatera to však není a navíc všichni víme jak to je s dodržováním desatera… pokud jej vůbec znáte.

Seznamy v menu jsou dle mého přežitek, ale občas je používám také. Chybu neudělá tak ani tak. Jen pokud jej nepoužijete, je to o něco jednodušší, navíc si o trochu zkrátíte kód a práci.

Vložení sub menu

Je třeba upravit menu v index.html a přidat tam toto:

      <div id="menu">
       <div id="tlacitka">                   <!-- smazat -->
        <a href="index.html">Úvod</a>
        <span class="sub-menu">
          <a href="#">Služby</a>
          <span>
            <a href="#">Služba</a>
            <a href="#">Služba</a>
            <a href="#">Služba</a>
            <a href="#">Služba</a>
          </span>
        </span>
        <a href="#">Historie</a>
        <a href="#">Fotogalerie</a>
        <a href="#">Kontakt</a>
      </div>                                 <!-- smazat -->
     </div>

Pokud jsme neudělali dříve, tak můžeme smazat <div id=“tlacitka“> už jej nepotřebujeme.

Proč <span>? Span je řádkový element a my stále pracujeme s řádky. Pokud se podíváme na výsledek, tak bez css bude všechno pěkně dál v řádku.

nahled-24

Zkuste si tam dát <div> místo <span> a uvidíte ten bordel. Také by to asi šlo přestylovat, ale bylo by to zbytečně složitější.

nahled-25

Pokud jste to zkoušeli tak dát párkrát zpět. Dalším krokem je css. Přidáme toto:

.sub-menu span {
  position: absolute;
  top: 32px;
  margin-left: -104px;
  width: 130px;
  visibility: hidden;                   /* skrýt menu */
}
.sub-menu:hover span {
  visibility: visible;                  /* odhalit menu */
}

nahled-26

Proč jsme použili v pozicování margin-left? Protože klasický left by se centroval od kraje elementu a menu je přes celou obrazovku. Stačilo by změnit velikost okna prohlížeče a hned by nám sub menu uteklo.

Pokud počítáte s tím, že po vás bude někdo měnit délku slov, je na místě dát za každý odkaz v submenu <br>. Pořád se pracuje s řádky a to i v sub menu. Jen jsme zmenšili šířku sub menu na 130px.

Taktéž, pokud je jiná délka slov v menu, bude i pozicování krapet jiné.

To je vše.


Soubory z lekce ke stažení: lekce-5.zip

obr-1
obr-2
obr-3

Webová šablona 4

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 čtvrtá – Obsah stránky

Upoutat

Prakticky každý veřejný web by měl nějak upoutat. Výjimkou jsou některé interní firemní weby, či nudné státní a jiné informační weby.

V současné době asi nejvíce upoutá grafika či fotografie. Dále také animace, světelné efekty a krátká videa. Dokonce i zvuk (s ním ale opatrně, aby se z něj nestal rušivý prvek).

Pokud jsme idealisté, tak úplně nejlepší je, pokud upoutá samotný obsah. Což je konec konců hlavní účel internetu. Bez kvalitního obsahu můžete mít super web, ale nakonec skončí pro mnoho návštěvníků jako pěkná vzpomínka. Což je také dobře, ale ideální to není.

Upoutáme fotografií:

Je to nejjednodušší a asi i nejlevnější řešení.

Pozn.: Vždy používejte vlastní fotografie, nebo fotografie zakoupené od vašeho fotografa či fotky zakoupené legálně z fotobank s patřičnou licencí. Spousta fotobank i fotografů poskytují fotografie pro web zdarma. Fotografie zdarma nebývají ty nejlepší ani nejkvalitnější, ale vybrat se z nich dá. Pro klienty ovšem nejlépe autentické fotografie od fotografa anebo kvalitní zakoupené. Dají se dnes pořídit už od 90,- do 600,- Kč a to i od fotografů.

Někde si stáhneme fotografii, třeba zde:
http://moderniweb.com/blog/stahnout/sablona/img/foto.jpg

V naší složce web vytvoříme novou složku img a do ní uložíme fotku. Jméno fotografie ponecháme.

Pozor: Někdy dostanete fotky s koncovkou JPG. Web rozlišuje velká a malá písmena. Musíte převést fotku na formát jpg.

Další průser bývá komprese fotek. Například 3M na fotku je opravdu hodně pro web. Je třeba v grafickém programu upravit, zmenšit velikost a i kvalitu fotky. Optimální je dnes 1980px na šířku a od 50 do 250kb kvality. Vše musí být úměrné velikosti fotky s ohledem na kvalitu fotky. Záleží na vašem oku a grafických dovednostech. V neposlední řadě i grafickém programu. Grafický program zdarma: www.gimp.org

Vložíme obrázek na web v index.html

  <body>
    <div id="kostra">
      <div id="menu">
       <div id="tlacitka">
        <a href="index.html">Úvod</a>
        <a href="#">Služby</a>
        <a href="#">Historie</a>
        <a href="#">Fotogalerie</a>
        <a href="#">Kontakt</a>
      </div>
     </div>
     <img id="poutac" src="img/foto.jpg" alt="foto">
     
    </div>
  </body>

Pokud se podíváme do prohlížeče a změníme velikost okna.

nahled-13

Obrázek není celý vidět. K tomu, aby byl vidět celý je třeba css. I když v tomto případě by to takto mohlo být, nemusí to tak být vždy. Proto si ukážeme jak jej dát přes celou obrazovku.

#poutac {
  width: 100%;        /* Šířka obrázku přes celý obsah nadřazeného elementu */
} 

nahled-14

Identifikace

Každý web by se měl nějak identifikovat. No a od toho jsou obvykle nadpisy. Samozřejmě jakýkoli druh obsahu slouží jako identifikace, ale nadpis je jejím základem.

Nadpis vložíme do index.html pod obrázek (pokud děláte SEO, tak můžete protestovat, ale pro výuku je to lepší takto), přidáme i nějaký slogan či podrobnější text a vše zabalíme do elementů kvůli dalšímu stylování:

     <img id="poutac" src="img/foto.jpg" alt="foto">
     <div id="nadpis">
      <h1>Hlavní nadpis</h1>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
        </p>
      </div>
     </div>

    </div>
  </body>

V HTML5 by se místo <div id=“nadpis“> použil <header>.

Výsledek v prohlížeči bez stylování nic moc. Výchozí barva je černá a proto na první pohled nemusíte nic vidět. Musíme přidat styly. Také budeme chtít umístit nadpis nad obrázek, tak aby byl čitelný.

#nadpis {
  top: 140px;          /* vzdálenost od horního okraje */
  left: 90px;          /* vzdálenost od levého okraje */
  color: white;
  position: absolute;  /* absolutní pozice nutná pro pozicování za pomoci příkazů top a left */
} 

15

Pro lepší čitelnost je dobré text i nadpis více zvýraznit a omezit šířku řádku.

#nadpis h1 {
  text-transform: uppercase;     /* všechna písmena velká */
  background: rgba(0,0,0,0.6);
  font-family: verdana;          /* změnit typ písma */
  font-size: 36px;
  padding: 8px;
  float: left;                   /* obtékání kolem textu nadpisu */
  margin: 0;                     /* odstranit vnější okraje (element &ltp> a h1 se smrsknou blíž k sobě) */
}
#nadpis div {                   /* nutné kvůli tomu, aby element 
                                    <p> neskočil vedle <h1> */
  float: left;
  width: 100%;
}
#nadpis p {
  width: 500px;
  margin-bottom: 0;
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;              /* nastavit tloušťku textu */
  text-shadow: 0px 0px 5px rgb(0,0,0), 0px 0px 5px rgb(0,0,0);
}

16

Nadpis hotov a až do rozlišení na šířku 580px nemáme s nadpisem problém.

Různá rozlišení obrazovky budeme řešit v jiné kapitole.

Obsah

Každý dobrý web musí mít nějaký obsah.

Nejdříve potřebujeme obrázky:

  1. http://moderniweb.com/blog/stahnout/sablona/img/obsah-1.jpg
  2. http://moderniweb.com/blog/stahnout/sablona/img/obsah-2.jpg
  3. http://moderniweb.com/blog/stahnout/sablona/img/obsah-3.jpg

Uložíme do složky img.
Obrázky vložíme na web do index.html tam kde jsme skončili a to v této brutální podobě. Níže si pak ukážeme sílu css.
Připomínám, že vkládáme jen tučný text. Nezvýraznění ukazuje na místo, kde jsme skončili. Vkládat celý zdrojový kód by bylo náročné s ohledem na velikost obsahu.

     </div>
     <div id="obsah">
      <div class="sekce sekce-1">
        <img src="img/obsah-1.jpg" alt="obsah">
        <div class="nadpis">
          <h2>Nadpis úrovně 2</h2>
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet l eo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
            </p>
          </div>
        </div>
      </div>
      <div class="sekce sekce-2">
        <img src="img/obsah-2.jpg" alt="obsah">
        <div class="nadpis">
          <h2>Nadpis úrovně 2</h2>
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
            </p>
          </div>
        </div>
      </div>
      <div class="sekce sekce-3">
        <img src="img/obsah-3.jpg" alt="obsah">
        <div class="nadpis">
          <h2>Nadpis úrovně 2</h2>
          <div>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
            </p>
          </div>
        </div>
      </div>
     </div>

    </div>
  </body>

V HTML5 by se použil místo <div id=“obsah“>, <article> a <div class=“sekce sekce-1″>, <sectio>.

nahled-17

Obrovská síla css je v té Cascade. Ve výsledku jedním příkazem převedete výsledný efekt na všechny elementy, které určíte.

Nejdříve vycentrujeme obsah:

#obsah {
  margin: auto;
  padding: 20px;
  max-width: 1160px; /* 1160px protože padding ubere 20px z každé strany, takto bude výsledná šířka, taková jakou jsme chtěli, tedy 1200px */
} 

nahled-18

… a jdeme na tu Cascadu:

.sekce img {
  display: block;
  margin: auto;
  width: 80%;
  min-height: 200px;      /* kvůli tomu, aby nedošlo k deformaci obrázku u menších rozlišení */
  min-width: 400px;       /* kvůli tomu, aby nedošlo k deformaci obrázku u menších rozlišení */
}

nahled-19

Nejsou vidět texty. Přidáme tedy už k existujícím stylům zápis:

#nadpis, .nadpis {
  position: absolute;                         
  top: 140px;                                 
  left: 90px;                                
  color: white;
}
#nadpis h1, .nadpis h2 {
  text-transform: uppercase;                 
  background: rgba(0,0,0,0.6);
  font-family: verdana;                       
  font-size: 36px;
  padding: 8px;
  float: left;                                
  margin: 0;                                  
}
#nadpis div, .nadpis div {                                 
  float: left;
  width: 100%;
}
#nadpis p, .nadpis p {
  width: 500px;
  margin-bottom: 0;
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;                          
  text-shadow: 0px 0px 5px rgb(0,0,0), 0px 0px 5px rgb(0,0,0);
}

nahled-20

Vše se nám seštosovalo na jedno místečko k nadpisu h1.
Čeká nás málé kouzlo, které je třeba si zapamatovat:

.sekce {
  position: relative;
}

nahled-21

Ve chvíli, kdy se pozicuje, musíme určit, odkud se bude počítat pozicování pro příkazy top a left. Pozicování se bere od nadřazeného elementu, který má příkaz position. Pokud neexistuje žádný nadřazený element s příkazem position (relative, absolute či fixed), pozice se počítají od levého horního rohu prohlížeče.

Posledním zápisem do style.css jsme vytvořili nadřazený element s příkazem position. Proto se vše tak nějak srovnalo.

Dokonalé to však není. Proto pokračujeme:

.sekce {
  position: relative;
  margin-bottom: 20px;
}
.nadpis {
  left: 130px;
}
.nadpis h2 {
  font-size: 26px;
}
.sekce-1 .nadpis {
  left: 600px;
}
.sekce-2 .nadpis {
  left: 400px;
}
.sekce-3 .nadpis {
  left: 200px;
}

22

To je vše.

Bude problém s menším rozlišením. Rozlišení se dá řešit jinak. To když tak v jiné kapitole.

Možná ještě přidáme zápatí:

     </div>
     <div id="zapati">
      <hr>
      <a href="http://moderniweb.com" target="_blank">moderniweb.com</a> © 2015
     </div>
    </div>
  </body>
</html>

..a dostylujeme (obsah zápatí samozřejmě může být jakýkoli):

#zapati {
  padding: 20px;
  text-align: center;
  color: silver;
}
#zapati a {
  color: blue;
}

V HTML5 by se místo <div id=“zapati“>, použil element <footer>.

nahled-23


Soubory z lekce ke stažení: lekce-4.zip

obr-1
obr-2
obr-3
obr-4
obr-5
obr-6
obr-7
obr-8
obr-9
obr-10
obr-11
obr-12

Webová šablona 3

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 třetí – Menu

Menu

Je načase vložit menu. Velice moderní je dávat menu na nějaké originální místo, kde jej nikdo nenajde. My jej dáme pro tento příklad na horní část stránky a ukotvíme jej tam nastálo. Tak, aby bylo vždy vidět.

Nejdříve se musí nějaké menu vytvořit v index.html:

  <body>
    <div id="kostra">
      <div id="menu">
        <a href="#">Úvod</a>
        <a href="#">Služby</a>
        <a href="#">Historie</a>
        <a href="#">Fotogalerie</a>
        <a href="#">Kontakt</a>
      </div>
    
    </div>
  </body>

Pokud se podíváte do prohlížeče a aktualizujete… (předtím uložit v PSPadu)… tak uvidíte změnu.

náhled

Symbol # znamená, že odkaz nikam nevede. Do budoucna se to může nahradit zápisem:

        <a href="index.html">Úvod</a>

Pokud máme rádi html5 tak se může místo <div id=“menu“> dá použít <nav>, ale počítejte s tím, že nebudou fungovat styl tak, jak je píši a budou třeba upravit.

Dále je třeba menu upravit ve style.css tento vzhled je nic moc.

#menu {
  padding: 5px;                            /* vnitřní okraj */
  text-align: center;                      /* text na střed */
  background: rgb(80,80,80);               /* barva pozadí */
  box-shadow: 0 1px 2px 1px rgb(80,80,80); /* stín menu */
}

Poznámky jsou označeny /**/

nahled-2

Zvolili jsme poměrně tmavou barvu, potřebujeme světlejší odkazy.

#menu a {
  color: rgb(220,220,220);                 /* barva textu */
}

náhled-3

Teď by to chtělo tlačítka. Stačí nějaká decentní. Předchozí zápis se rozšíří o:

#menu a {
  color: rgb(220,220,220); 
  text-decoration: none;              /* odstranit podtržení */
  background: rgb(120,120,120);
  font-size: 20px;                    /* velikost písma */
  padding: 2px 10px;                  /* vnitřní okraj 2px 
                                         nahoře i dole, 
                                        10px vlevo a v pravo */
}

náhled-4

Blokový vs. řádkový element

Problém, nastane, pokud budeme chtít naše tlačítka semknout. Je strašně důležité vědět co je a co není řádkový či blokový element. Element <a> je řádkový prvek. Kdežto <div> je blokový.

Logicky. Řádkové elementy jsou elementy určené do řádku pro text, třeba pro úpravu textu jako je <b>, <i>, <strong>, <em>, <span> i naše <a> a další…

Blokové jsou <body>, <div>, <p>, <h1><h6>. Dále také méně používané <pre> a najde se jich víc…

Většina elementů (až třeba na <span> ) má nějaký přednastavený styl a toto přednastavení se liší prohlížeč od prohlížeče. Což je asi největší boj, nejčastěji se jednotlivé styly složitě vypnou a pak se styluje dle toho jak potřebujete.

Já k tomuto problému přistupuji systémově. Prakticky nic dopředu nevypínám do doby, než ten element skutečně použiji a teprve pak mu ten přednastavený styl vypnu, pokud je třeba. Přednastavený styl se vypne tak, že použijete vlastní styl. Př.: <h1> má vnější okraj a velký font. Použiji tedy vlastní velikost fontu a vlastní okraj pro <h1>.

Proč to nemít dopředu připravené a pokaždé, když děláte nový web to stylování otrocky rušit?

Hlavně kvůli učení. Pokud víte, že <h1> má okraj  a někde po někom něco opravujte či upravujete. Snáz odhalíte chybu, pokud víte, že to může dělat ten či onen element.

V našem menu vidíme, že mezi tlačítky je nějaká mezera a to aniž jsme ji zadali v css. Vtip je v tom, že ta mezera je normální mezera mezi slovy a odstraňovat ji za pomocí css není úplně optimální. Mohlo by to vyvolat další chyby. Navíc tlačítko, přeci není řádek, ale objekt (blok). Proto musíme změnit element <a> na blok.

Sledujte, co se stane, pokud uděláme s tlačítek <a> blokový prvek. Dělá se to za pomoci css. Přidá se příkaz:

#menu a {
  display: block;               /* změnit na blokový element */
}

Podívejte se na prohlížeč a aktualizujte.

náhled-5

Docela síla, ale zmizely aspoň ty mezery, což jsme chtěli.

Nepříjemná vlastnost všech blokových prvků je ta, že se natáhnou přes celý obsah nadřazeného elementu. V našem případě to je menu. Menu má nastaven padding: 5px;. Proto vidíme trochu tmavě šedé z našeho menu.

My chceme zpátky pěkná malá tlačítka vedle sebe:

#menu a {
  display: block;               /* změnit na blokový element */
  float: left;                          /* obtékání elementů */
}

Schválně se znova podívejte, co se stalo. Pokud v budoucnu budete hledat chybu, tak ji můžete najít ve vlastnosti float: left;. Je to zákeřná, ale velice užitečná vlastnost a pro nás klíčová. Musíme pochopit, co dělá a naučit se jí používat.

6

V podstatě nastaví obtékání elementu zleva. Elementy obklopí obsah uvnitř bloku v našem příkladu <a> a postaví vedle něj další, pro který platí, zarovnání z leva. Navíc pokud měl element <a> nadřazený element, v našem případě <div id=“menu“>, bude jej částečně ignorovat. Kupodivu mezera 5px tam zůstává. Ignoruje se totiž jen obtékání. Ve výsledku nadřazený element zapomene, jak velcí jsou jeho potomci (<a>),  takže se celý element <div id=“menu“> smrští jen na svojí velikost bez ohledu na svůj obsah.

Je třeba tedy nastavit obtékání i pro menu ( <div id=“menu“> ):

#menu {
  float: left;
}

Pokud mrknete do prohlížeče.

nahled-7

Už to vypadá lépe, ale my jsme chtěli, aby bylo menu pře celou stránku, takže… to nastavíme takto:

#menu {
  float: left;
  width: 100%;                  /* délka přes celý obsah */
} 

nahled-8

Jak ovšem vrátit zpátky tlačítka na střed? text-align: center; není úplně ignorován, ale bohužel funguje jen na text a element <a> už textový element není. Průšvih je i v tom, že zarovnáváme z leva. Narovinu neexistuje žádný příkaz jak to jednoduše dostat zpět na střed a „float: center“ neexistuje.

Něco však udělat můžeme a to v index.html uděláme změnu:

  <body>
    <div id="kostra">
      <div id="menu">
       <div id="tlacitka">
        <a href="index.html">Úvod</a>
        <a href="#">Služby</a>
        <a href="#">Historie</a>
        <a href="#">Fotogalerie</a>
        <a href="#">Kontakt</a>
      </div>
     </div>
    </div>
  </body>

Tučně jsem zvýraznil změnu. Sama o sobě však nic neudělá. Je třeba přejít zpět do style.css:

#tlacitka {
  width: 50%;   /* délka elementu na 50% délky nadřazeného */
  margin: auto; /* nastav automatické okraje (dává na střed) */
}

9

Pokrok. Úplně přesně na středu to není, ale jsme o pořádný kus blíž k cíli.

Pokud chcete vědět kde je element <div id=“tlacitka“>. Můžete zadat do css:

#tlacitka {
  background: red;                          /* obarvit */
  padding: 2px;                             /* nastav mezeru */
}

10

Oba nové elementy, až se podíváte, můžete znova smazat a také zase smažte. Jsou tam jen, abychom viděli, co se stalo a jakou máme rezervu. Navíc ta rezerva se mění dle velikosti okna prohlížeče.

#tlacitka {           /* vše smazat */ 
  width: 50%;                   
  margin: auto;                 
  background: red;              
  padding: 2px;                 
}

Pokud nechcete mazat. Postup si můžete uložit jinam, nebo vše zabalit do komentáře.

Pokud se zadíváte na jednotlivé stránky tak si všimnete, že málo kdo má horizontální menu vycentrované na střed.

Na střed to můžeme vycentrovat jedině tak, že se vrátíme zpátky k řádkovým prvkům. Jakmile se použije vlastnost float: left; máte smůlu a nemůžete zarovnávat na střed. Občas kvůli tomu také zůstávám u řádkových prvků.

Provedeme další změny. Přidáme margin-left: -4px;, pokud chceme smazat tu mezeru. S tím že ještě smažeme display: block; a float: left;

#menu a {
  color: rgb(220,220,220);
  text-decoration: none;
  padding: 2px 10px;
  background: rgb(185,0,0);
  font-size: 20px;
  margin-left: -4px;
  float: left;               /* smazat */
  display: block;            /* smazat */ 
}
#menu {               /* vše smazat */
  float: left;
  width: 100%;                  
} 

Nezapomenout po té sérii mazání přidat margin-left: -4px;.

11

Ta série mazání tu byla kvůli tomu, aby jsme si předtím ukázali zaběhlou metodu, která není nutná, vyvolává další a další následné problémi při kódování. To jsem Vás ještě navíc netrápil seznami jako menu. Takto to je jednoduché a efektivní.

Prakticky je zbytečné i v index.html i element <div id=“tlacitka“>. Můžeme jej tam ponechat, kdyby jsme náhodou chtěli umístit další stylování či odkazy mimo tlačítka. Element nám nijak nepřekáží.

Efekt po najetí myší

Můj velice oblíbený efekt a dnes i standart. Vše jednoduše za pomocí css:

#menu a:hover {
  background: rgb(100,0,0);
} 

12

Vždy viditelné menu

Aby bylo menu vždy vidět, stačí přidat:

#menu {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

Vlastnost z-index posune jakoby menu o deset pozic blíž k vaším očím. Normálně mají všechny elementy hodnotu z-index:0.

Tato změna nebude vidět, dokud nebudeme mít hotový obsah. Bude to tak pro vás malé překvapení na závěr výuky.

A menu je hotové.


Soubory z lekce ke stažení: lekce-3.zip

obr-1
obr-2
obr-3
obr-4
obr-5
obr-6
obr-7
obr-8
obr-9
obr-10
obr-11
obr-12

Webová šablona 2

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ů:
layout webů
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

Webová šablona 1

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 první – Nejnutnější základy

PSPad editor

Pro začátek budeme potřebovat editor pro psaní zdrojového kódu. Prozatím doporučuji tedy PSPad editor.

Ke stažení:
http://www.pspad.com/cz/
http://forum.pspad.com/read.php?6,64865
http://www.stahuj.centrum.cz/vyvojove_nastroje/www-tvorba/ostatni_editory/pspad/

Nainstalovat. Spustit.

Rozkliknout ikonku Otevřít nový soubor ikonka kliknutím na tu šipku dolu. Vybrat xhtml, nebo html. Je to to samé.

Na ploše vytvořit složku web. V PSPadu rozkliknout Soubor a zvolit Uložit jako…, přejmenovat na index.html a uložit do té složky web.

Znova rozkliknout Otevřít nový soubor ikonka a vybrat Cascading Style Sheet. Uložit jako style.css vše do té složky web/styly. Ano. Je třeba ještě vytvořit podsložku styly. Je to třeba do budoucna kvůli přehlednosti.

Propojení

Je třeba přepsat tu příšernost v index.html. Veškerý obsah smazat a nakopírovat tam toto:

<!doctype html>
<html lang="cs">
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="styly/style.css">
 </head>
 <body>

 </body>
</html>

K použití také zde:
http://moderniweb.com/vyuka/html5/sablona.html

Právě by mělo dojít k propojení index.html se style.css. Propojení zajišťuje řádek:

  <link rel="stylesheet" href="styly/style.css">

Provedeme test. Otevřeme webový prohlížeč. Doporučuji Mozilla Firefox a pro přesnost při této výuce to bude dle mého i lepší, pokud budeme pro začátek používat stejný.

Ke stažení: http://www.mozilla.cz/stahnout/firefox/

V tomto prohlížeči otevřeme náš index.html. Měla by tam prozatím být bílá stránka.


Soubory z lekce ke stažení: lekce-1.zip