2. diel - Tvorba Bootstrap šablóny z PSD - Založenie projektu

V minulej lekcii, Tvorba Bootstrap šablóny z PSD - Wireframe a grafický editor , sme sa zoznámili s grafickými editormi a stručne si o nich urobili prehľad. Už tiež vieme, ako pomocou nich vyrezať jednotlivé obrázky z PSD súboru s návrhom webovej prezentácie. Dnes si nakódujeme prvý kúsok bootstrapové šablóny, ktorú sme si predstavili minule. Bude sa jednať o časť s nadpisom Moderné bývanie:

Kódovanie bootstrapové šablóny z PSD súboru - Tvorba Bootstrap šablóny z PSD súboru

Založenie projektu

Samozrejme nezačneme inak, než že si založíme nový projekt napríklad v NetBeans, webstore alebo inom preferovanom IDE. Pomenujte si ho template (= angl. Šablóna).

V celom projekte budeme dodržiavať nasledujúce konvencii pre názvy súborov a priečinkov: Názvy budeme zadávať malými písmenami, bez mäkčeňov a dĺžňov. Pri dvouslovném názvu použijeme - alebo _. CamelCase notácie patrí skôr do zdrojového kódu JS alebo serverového jazyka. V tomto kurze budeme používať predvolenú šablónu priamo z Bootstrap frameworku od Twitteru. Ak by ste v budúcnosti zistili, že vám viac vyhovuje iný základ, môžete vychádzať z predpripravených Bootstrap šablón napr. Na https://startbootstrap.com, https://mdbootstrap.com alebo ďalšie. Uvidíte, že všetky budú fungovať podobne.

Priamo na stránke https://getbootstrap.com nájdeme pod tlačidlom Get started pripravenú šablónu pre rýchly začiatok. Je to HTML kód pod nadpisom "Starter template". Kód si uložíme do súboru index.html. Ten teraz vyzerá takto:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Orientačné komentáre môžeme zmazať a celý základ šablóny si trochu prispôsobíme. Pre istotu si ešte v rýchlosti pripomenieme, čo ktorá časť existujúceho kódu robí.

Pre začiatok si zmeníme jazyk z en na cs-cz:

<html lang="cs-cz">

Responzívne <meta> tag ponecháme tak, ako je. Ide o nasledujúce riadok:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Zaistí nám základné responzivitu pre prehliadanie webu z desktopu aj mobilných zariadení. Pre detailnejšie nastavenia zobrazenia je potrebná práca s jednotlivými elementami, k tomu sa dostaneme neskôr.

CSS

Samotný Bootstrap je nalinkovaný z CDN. Ak budeme mať stále pripojenie k internetu, vystačíme si s týmto linkom a nemusíme nič sťahovať do počítača. Jedná sa o časť:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Keby sme ale chceli pracovať napríklad vo vlaku, kde si nie sme istí, že bude wi-fi, môžeme si framework stiahnuť do počítača. Potom si súbor bootstrap.min.css uložíme do rovnakej zložky (väčšinou public_html/), v ktorej máme index.html. A v index.html štandardnej link vyššie nahradíme:

<link rel="stylesheet" href="bootstrap.min.css">

To nám zabezpečí, že v prípade, kedy nebudeme mať pripojenie, môžeme ďalej nerušene pracovať

Predpripravené komponenty sú pre nás veľmi výhodné. Nehrozí však, že by sme ich už potom neupravovali. Každý chce dnes mať originálnu stránku, a nie len inak preskladanie niečo, čo už má niekto iný. Budeme si preto musieť vytvoriť aj náš vlastný súbor style.css a na ten odkázať:

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

Javascript

Ak ešte len začínate s webdesignom ak programovania ste sa ešte nedostali, možno vás prekvapí tagy s JavaScriptom. Rozhodne je neumazávejte a nechajte ich presne v tom poradí, ako sú. Sú to skripty knižníc jQuery, Popper.js a vlastné javascriptové pluginy Twitteri, konkrétne jQuery 's slim build. Ak by ste túto časť kódu zmazali, stratíte možnosť interaktivity niektorých komponentov, napríklad rozbaľovaní dropdown menu. K tomu sa ešte dostaneme.

Ešte si zmeníme <title> na "MODERNÉ BÝVANIE" a môžeme začať!

Ak by ste náhodou už teraz mali pocit, že sa strácate, odporúčam si pred ďalším čítaním zopakovať lekcie z kurzov Webové stránky krok za krokom a Kompletné kurz CSS frameworku Bootstrap

Body

Obsah <body> si rozkouskujeme a budeme postupne pridávať jednotlivé časti.

Začneme tým jednoduchším z návrhu! Pridáme si do <body> časť s nadpisom "MODERNÉ BÝVANIE", textom, obrázkom sídla firmy a tlačidlom "VIAC O NÁS":

Sekcia moderné bývanie z Bootstrap šablóny v PSD súbore - Tvorba Bootstrap šablóny z PSD súboru

Obrázok nižšie si uložte do svojho projektu:

Všetky obrázky k projektu si ukladajte do podzložky v projekte, napr. images/. Bude ich veľa, tak nech v tom nie je zmätok.

Moderné bývanie

V kurze postupne nakódujeme celú stránku najskôr pre veľké rozlíšenie a až potom vyriešime responzívne zobrazenie na všetkých ostatných zariadeniach. Budeme používať grid, ktorý nášmu obsahu dodá pravidelné usporiadanie, základné responzivitu a rovnako nám prácu aj trochu uľahčí.

Pozrime sa vyššie na náhľad časti MODERNÉ BÝVANIE a predstavme si ju v riadkoch.

Na prvom riadku je nadpis.
Na druhom text a obrázok
a na treťom tlačidlo.

Poďme si to hneď napísať do kódu:

<section class="container">
    <div class="row">
        <div class="col">nadpis</div>
    </div>
    <div class="row">
        <div class="col">text</div>
        <div class="col">obrázek</div>
    </div>
    <div class="row">
        <div class="col">tlačítko</div>
    </div>
</section>

Výsledok je zatiaľ nasledovné:

Tvoja stránka

localhost

Kóduje jednu sekciu stránky, preto použijeme element <section>. Celá sekcia musí mať vždy, keď používame grid, triedu .container. Tým sa jej šírka nebude ľubovoľne meniť, ale bude vždy nadobúdať jednej z prichystaných veľkostí, tzv. Breakpoint, ktoré Bootstrap pre rôzne zariadenia používa. V <container> u potom máme jednotlivé riadky <row>, ktoré majú stĺpce <col>. Do stĺpcov následne vložíme, čo potrebujeme. Pre väčšiu prehľadnosť je zatiaľ v jednotlivých <col> text, aby sme vedeli, čo kam príde.

V budúcej lekcii, Tvorba Bootstrap šablóny z PSD - O firme , budeme pokračovať.

Článok pre vás napísala Lucie Hartingerová

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

Aktivity