CSS - 4. Tvorba stránky – Layout (1/3)
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

CSS - 4. Tvorba stránky – Layout (1/3)CSS - 4. Tvorba stránky – Layout (1/3)

 

CSS - 4. Tvorba stránky – Layout (1/3)

Google       Google       18. 11. 2007       44 331×

4.1 ⋅ Čo je layout a prečo práve pomocou CSS
4.2 ⋅ Tvorba layoutu
   4.2.1 ⋅ Úvod
   4.2.2 ⋅ Kontajner
   4.2.3 ⋅ Hlava
   4.2.4 ⋅ Menu
   4.2.5 ⋅ Textbox
   4.2.6 ⋅ Reklama
   4.2.7 ⋅ Textbox bez odsadenia
   4.2.8 ⋅ Päta
4.3 ⋅ Záver

Reklama
Reklama

Čo je layout a prečo práve pomocou CSS

Layout je rozloženie základných prvkov stránky s blokovým charakterom. Medzi zložky layoutu patria napríklad hlava, menu alebo päta. Pre začiatočníkov je najlepším štartom jednostĺpcový layout s horizontálnym menu, téma tejto lekcie.

Výhody CSS layoutu:

  • Ide o najmodernejšiu technológiu, ktorá pri správnom písaní kódu spĺňa všetky najnovšie pravidlá validity či prístupnosti. Navyše tvorba pomocou CSS je častokrát omnoho jednoduchšia ako pomocou tabuliek.
  • Užívateľom s pomalým pripojením (dnes menšine) sa stránka zobrazí rýchlejšie, pretože tabuľka sa vykreslí až po jej úplnom načítaní, kdežto CSS sa zobrazuje postupne (podľa miery načítania).
  • Rámy (frames) sú dnes prežitok. Jednoducho ide o extrémne zastaralú technológiu, ktorá sa už na moderných weboch nepoužíva. Ani pre užívateľa nemusí byť práve príjemné, keď je portál rozkúskovaný na množstvo vnorených HTML súborov.

Na druhú stranu, najmä sporu CSS vs. tabuľky sa dnes venuje veľa pozornosti. Mnoho ľudí zastáva názor, že pre veľké biznisové/portálové projekty sa viac hodí tabuľkový layout (viď napr. Vyvojar.cz). Naopak, nová verzia portálu Programujte.com je vytvorená pomocou CSS layoutu. Víťaz v takomto prípade nie je úplne jasný, no ja sa viac prikláňam ku technológii CSS. Obraz si môžete vytvoriť sami po dlhodobom používaní obidvoch techník, nie je však celkom nereálne, že do niekoľkých rokov tabuľky úplne „zomrú“.

Tvorba layoutu

Náš layout teda bude pozostávať z jedného stĺpca, bude mať horizontálne menu a bude zarovnaný nastred. Všetky tieto prvky však musí spájať jeden veľký, neviditeľný blok nazývaný kontajner. Ak chceme celú stránku vycentrovať, vycentrujeme len kontajner, pretože všetky ostatné súčasti stránky sa nachádzajú v ňom (teda sa zarovnajú do stredu spolu s ním).

Začíname s tvorbou. Vytvorte si XHTML 1.0/1.1 dokument aj s body tagmi nazvaný index.html a s odkazom na CSS súbor style.css. Namiesto bezduchého kopírovania viac rozmýšľajte, prečítajte si jeden blok článku, zamyslite sa nad ním. Ak usúdite, že ste pochopili, o čom je v bloku písané, prejdite na ďalší.

Úvod

Ešte pred vytvorením kontajnera treba definovať niektoré nastavenia stránky samotnej. Vložte preto do CSS súboru tento kód:

body {
  background-color: #dbe2ee;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
  • font-family = rodina fontov, ktoré majú byť použité na stránke – najčastejšie sa vyberajú bezpätkové, kvôli lepšej čitateľnosti; v tomto prípade prehliadač vyhľadá na počítači font Arial a následne ho použije na vykreslenie stránky; ak ho na počítači nenájde, vyhľadá Helveticu a ak nenájde ani tú, vypíše text defaultným bezpätkovým písmom (univerzálne označenie sans-serif)
  • font-size = veľkosť textu na stránke, pre lepšiu čitateľnosť voľte 16px, pre decentnejšie technické písmo napríklad 12-14px

Kontajner

Je to neviditeľný blok, vo vnútri ktorého sa nachádzajú ostatné prvky stránky. Teda náš web drží pohromade a zároveň mu dáva niektoré základné vlastnosti. Vytvoríme si #kontajner (ID, keďže ho použijeme len raz) a nastavíme mu šírku + zarovnanie:

#kontajner {
  margin: 0 auto;
  width: 1000px;
}
  • margin = udáva pozíciu od (aj neviditeľného) rámu objektu smerom von, teda priestor okolo objektu; zápis margin: 3px odsadí objekt od iného o 3px zo všetkých strán, zápis margin-top: 3px odsadí objekt od iného o 3px iba zvrchu; poznáme aj margin-bottom, margin-left a margin-right; prípadne môžeme použiť zápis margin: t r b l
  • margin: 0 auto = špeciálny zápis margin, ktorý sa používa najmä v kombinácii s kontajnerom; zabezpečí, že kontajner bude na stránke vycentrovaný
  • width = určuje šírku objektu; v tomto prípade chceme, aby mal kontajner šírku 1 000 pixelov (normalizujeme stránku pre rozlíšenie 1024×768)

Priamo medzi tagy body pridajte:

<div id="kontajner">
</div>

Hlava

Po vytvorení kontajneru môžeme pokračovať s hlavou. Tá už bude mať viditeľný rám (border) a pevne nastavenú výšku aj odsadenie:

#hlava {
  border: 1px solid #6f90ba;
  height: 60px;
  margin-top: 20px;
  width: 100%;
}
  • border = nastavuje rám objektu; zapisuje sa v tvare border: šírka štýl farba, ale takisto môžeme jednotlivé vlastnosti oddeliť na border-width, border-style a border-color; najčastejšie používané hodnoty pre border-stylesolid, dotted a dashed
  • height = nastavuje výšku objektu
  • margin-top: 20px = pomocou tohto zápisu dosiahneme, že hlava bude od vrchného okraju kontajneru zarovnaná o 20 pixelov nižšie; neskôr, po dokončení layoutu, si skúste túto hodnotu nastaviť na 0px a uvidíte rozdiel
  • width: 100% = týmto zápisom sme objektu udali, že bude mať šírku veľkosti 100 % kontajnera, teda prakticky rovnakú ako kontajner. Hoci by sme mohli hodnotu zadať pomocou pixelov, vnútri kontajneru sa pre šírku doporučuje používať percentuálny zápis – ale to je len na vás

Nasledujúce súčasti kódu pre XHTML dokument vkladajte priamo do divu kontajner:

<div id="hlava">
  bicie
</div>

Menu

Navigácia bude vertikálna, a síce prúžok s rozmermi 800×20 pixelov:

#menu {
  border: 1px solid #6f90ba;
  height: 20px;
  margin: 10px auto;
  width: 80%;
}
  • margin: 10px auto = definovali sme, aby bol menu blok odsadený o 10 pixelov, pritom nám však hodnota auto blok centruje
<div id="menu">
  spev
</div>

Textbox

Textboxy budú na našej stránke dva a budú oddelené prúžkom pre reklamu. Tento je prvý, vrchný:

#text {
  border: 1px solid #6f90ba;
  min-height: 200px;
  margin-top: 10px;
  width: 100%;
}
  • min-height: 200px = definovali sme, že aj keď sa v textboxe budú nachádzať dve nerozvité vety (sotva plný riadok), vždy bude vysoký 200 pixelov a túto výšku prekročí iba k väčšiemu; chceme predsa, aby mal náš web nejakú formu
<div id="text">
  gitara
</div>

Reklama

Panel pre reklamu, či už AdSense-like alebo bannerovú, bude vysoký 60 pixelov a nebude odsadený o 10 pixelov ako ostatné bloky:

#reklama {
  border: 1px solid #6f90ba;
  border-top: none;
  height: 60px;
  width: 100%;
}
  • border-top: none = keďže obidva „zlepené“ prvky (textbox aj reklama) majú plný border, na mieste stretu by vznikol väčší, dvojpixelový rám; preto nastavíme reklame, aby mala border všade, len nie hore
<div id="reklama">
  basa 
</div>

Textbox bez odsadenia

Prečo bez odsadenia? Lebo aj on bude nalepený, podobne ako reklama na textbox. Myslím, že v tomto bode vašich vedomostí už nie je viac čo vysvetľovať:

#text-bez-odsadenia {
  border: 1px solid #6f90ba;
  border-top: none;
  min-height: 200px;
  width: 100%;
}
<div id="text-bez-odsadenia"> 
  klávesy 
</div>

Päta

Pre webdizajnérov najobľúbenejšia pasáž „programovania“, ich pätnásť minút slávy…

#pata {
  border: 1px solid #6f90ba;
  height: 20px;
  margin-top: 10px;
  width: 100%;
}
<div id="pata"> 
  trúbka 
</div>

Záver

Dokopy by váš kód mal vyzerať takto:

body {
  background-color: #dbe2ee;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
#kontajner {
  margin: 0 auto;
  width: 1000px;
}
#hlava {
  border: 1px solid #6f90ba;
  height: 60px;
  margin-top: 20px;
  width: 100%;
}
#menu {
  border: 1px solid #6f90ba;
  height: 20px;
  margin: 10px auto;
  width: 80%;
}
#text {
  border: 1px solid #6f90ba;
  min-height: 200px;
  margin-top: 10px;
  width: 100%;
}
#reklama {
  border: 1px solid #6f90ba;
  border-top: none;
  height: 60px;
  width: 100%;
}
#text-bez-odsadenia {
  border: 1px solid #6f90ba;
  border-top: none;
  min-height: 200px;
  width: 100%;
}
#pata {
  border: 1px solid #6f90ba;
  height: 20px;
  margin-top: 10px;
  width: 100%;
}

A XHTML dokument:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
 
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>Názov vašej stránky</title>  
 </head>
 
<body>
  
  <div id="kontajner">
  
  <div id="hlava">
    bicie
  </div>
  
  <div id="menu">
    spev
  </div>
  
  <div id="text">
    gitara
  </div>
  
  <div id="reklama">
    basa
  </div>
  
  <div id="text-bez-odsadenia">
    klávesy
  </div>
  
  <div id="pata">
    trúbka
  </div>

  </div>
       
 </body>

</html>

S novou funkciou portálu si môžete pozrieť výsledok priamo tu na Programujte. Týmto vám chcem pogratulovať, úspešne ste vytvorili váš prvý CSS layout. Predpokladám, že všetko je vysvetlené zrozumiteľne, no ak by ste predsa niečomu nerozumeli, napíšte do komentárov…


V ďalších častiach:

  • Vytvorenie základnej grafiky
  • Pridanie niektorých špeciálnych prvkov
  • Zdokonalenie kódu (majú byť textboxy naozaj divy?)

Článok bol upravený 10.12.2007, vďaka vašim postrehom a návrhom. Pridajte komentár a zvýšte úroveň tohto portálu!

Článok bol opäť upravený 29.12.2007, ďakujem užívateľovi m.a.d.d.o.x.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
Autor sa zaujíma o šport, je aktívnym hudobníkom a v minulosti písal pre portál Programujte. V súčasnosti je prakticky nemožné zastihnúť ho.

Nové články

Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý