First One

HOME / Vytvoření webu / First One

First One

Zkusíme si vytvořit tento jednoduchý web:



Připravte si složku tak, jak je popsáno v Úvodu. V tomhle případě nám bude stačit vytvořit index (a samozřejmě master.css), protože všechny stránky webu by vypadaly skoro stejně. Otevřeme ho tedy a napišme do něj základní strukturu HTML:

<html>
 <head>
  <title></title>
 </head>
 <body>
 </body>
</html>

Nezapomeňtě linknout CSS!

Toto je font, který použijeme:

<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">


Teď už se vrhneme na body. Pro lepší pochopení si uděláme hrubý náčrtek layoutu:

Nápověda: Bude celý z divů

Čisté HTML byste již měli být schopni vytvořit (Menu a Content budete mít zatím pod sebou). Pro lepší vizualizaci do divů rovnou napíšeme jejich obsah (prázdné divy bez definované velikosti se stejně nezobrazují).

Do Header tedy dáme logo a umístíme ho do áčka (není potřeba definovat href), protože chceme, aby to byl odkaz. Source loga z obrázku je

https://devicarus.eu/img/logo.png


Do Title napiště třeba "home". Čáru pod tím uděláte tagem "<hr>". Do Menu pod sebe napište pár linků, nezapomeňtě na line breaky.
Do Content dejte tzv. Lorem ipsum, což je pseudolatinský text používaný k vyplnění grafických návrhů. Lze ho vygenerovat zde: cs.lipsum.com
Do Footer napište klidně jen "Footer", abychom viděli, kde div je. Nad footer zase udělejte horizontal line, jako pod Title.

Teď by naše stránka měla vypadat nějak takhle:

Nyní nastavíme pozadí, tento obrázek dejte do složky img: DOWNLOAD
V CSS se obrázek jako pozadí nastavuje následujícím způsobem:

[selektor] { /* V našem případě "body" */
 background: url('[cesta k obrázku]');
 background-position: [top/center/bottom/left/right];
 background-repeat: [repeat-x/repeat-y/repeat/no-repeat];
 background-size: [contain/cover];
 background-color: [barva];
}

Pomocí tohoto byste měli být schopni pozadí nastavit.
Logo na střed zarovnáme nastavením "margin" na "auto" a "display" na "block".
Text v Title a Footer jednoduše zarovnáme pomocí nastavení text-align pro dané divy.
Abychom využili náš font z Google Fonts, musíme do nastavení body přidat font-family:

font-family: 'Poiret One', cursive;

Nastavte pozadí Base na bílou a tímto zakulaťte její rohy:

border-radius: 5px;

Takto nastavte linky:

a {
 color: black;
 text-decoration: none;
}
a:hover {
 color: grey;
 text-decoration: underline;
}

Pomocí float zarovnáme Menu a Content vedle sebe (používání float je komplikované, tak to nebudu rozepisovat):

div.menu {
 width: 15%;
 text-align: right;
 font-size: 130%;
 float: left;
}
div.content {
 margin-left: 15%;
 width: 80%;
 font-size: 130%;
 padding-left: 3%;
}

Nyní už stačí nastavit odsazení pomocí margin a padding a velikost textu pomocí font-size.