Hlavička stránky

Layout 4

Čo by sme už mali vedieť a mať

Ak ste urobili predchádzajúci layout, mali by ste vedieť zabezpečiť funkčnosť všetkých tlačidiel. Prišli ste na to, že stačí mať dobre urobený index.html, skopírovať ho do súborov, ktoré budú tvoriť Vašu webovú stránku a v týchto súboroch pomeniť obsah. Treba dať pozor, aby sa zachovala pri zmenách textu štruktúra id elementov v každom zo súborov. Všetky id elementy sa musia nachádzať vo všetkých súboroch, musia mať svoj počiatočný a koncový div.

V tomto aj v predchádzajúcich layoutoch som robil a aj v tomto robím jednu zásadnú chybu. Pod jedným tlačidlom mám veľmi veeeeeľa textu, návštevníkom sa však nechce čítať obsiahle články. Vy musíte, lebo to potrebujete. Ale na svojich stránkach rozdeľte texty radšej do viacerých súborov (do viacerých tlačidiel). Ideálne by bolo, keby ste nepresiahli rozsah, ktorý sa naraz zobrazí na monitore a nie je potrebný rolovací pruh. Buď túto radu dodržíte na všetkých podstránkach, alebo nech všetky presahujú výšku a automaticky sa zobrazí rolovací pruh (inak bude stránka skákať v horizontálnom smere).

Čo budeme riešiť

Zatiaľ sú naše stránky dosť neprívetivé. Obsahujú len nadpisy, text, číslované a nečíslované zoznamy, možno nejaké linky. Atraktivitu zvýšime vložením textu a obrázkov, ktoré budeme presne pozicovať (určovať ich polohu).
V minulosti bolo možné na webe umiestniť obrázok asi tak, ako umožňuje word obtekaním (obrázok vľavo, na stred, vpravo). To by sa Vám určite nepáčilo, ale naše pozicovanie bude presne na pixle v rámci stránky. Navyše je vcelku jednoduché, postačí sa s každou vysvetľovanou vlastnosťou trochu pohrať. Treba vyskúšať, ako budú texty a obrázky reagovať na Vaše pokyny.
Všetky tu vysvetľované vlastnosti skúšajte v súbore pokusny.html, linkuje ho tlačidlo Pokusy úlohy

Čo urobím a neurobím za Vás

Súbor style.css je odkomentovaný, funkčný, obsahuje len niekoľko rád. V cvičeniach ho ale budete musieť editovať a hrozia rôzne nepríjemnosti. Preto by ste si ho mali pred prvými úpravami odzálohovať (uložiť ako style_zaloha.css). Do pravého menu som pridal dva odkazy na stránky, ktoré popisujú CSS

Chvíľu mi vadilo (a bude vadiť celý čas, kým budem písať tento layout), že môj text nemá správne zarovnanie, že sa veľmi tlačí k ľavému a pravému okraju, že je použitý nevhodný font a mnoho ďalších estetických nedostatkov.
Ale povedal som si, že by Vás hnevalo, keby som všetko ponastavoval v style.css za Vás a že ste si to chceli aj tak ponastavovať sami. Takže máte príležitosť. V minulých layoutoch som niektoré vyššie uvedené vlastnosti nastavené mal.

Úlohy v tejto podstránke

  1. Odzálohujte si pre istotu celý adresár layout_4
  2. Pracujte v dvoch oknách prehliadača, jeden, v ktorom skúšate, jeden, v ktorom sú návody
  3. Vždy najskôr naštudujte novú funkcionalitu a vyskúšajte ju na niektorom zo súborov v layout_4
  4. Potrebujete pripravovať stránku na odovzdanie
  5. Kliknite do tlačidla Poloha textu, tam pokračuje vysvetľovanie a sú tam aj úlohy

Odkazy

Hlavná ulica č.123,
960 01 Zvolen;
tel. +421 999 123 456;
web: IT Pizza
Objednávky posielajte na e-mail: Pizzeria.