O používání souborů CC k rozvržení stránky

O rozvržení stránek CSS

Rozvržení stránek CSS pro organizaci obsahu na webové stránce používá formát kaskádových stylů, spíše než tradiční tabulky nebo rámce HTML. Základním stavebním blokem rozvržení CSS je tag div – tag HTML, který se ve většině případů chová jako kontejner pro text, obrazy a další elementy stránky. Při vytváření rozvržení CSS umístíte na stránku tagy div, přidáte k nim obsah a posunete je do různých umístění. Na rozdíl od buněk tabulky, které jsou omezené na polohu někde mezi řádky a sloupci tabulky, tagy div se mohou objevit kdekoliv na webové stránce. Tagy div můžete umístit absolutně (zadáním souřadnic x a y) nebo relativně (zadáním umístění v souvislosti se stávajícím umístěním). Tagy div můžete také umístit zadáním plovoucích rámečků, odsazení a okrajů – podle dnešních webových standardů se jedná o preferovanou metodu.

O struktuře rozvržení stránek CSS

Než přejdete k této části, měli byste se seznámit se základními koncepty CSS.

Základním stavebním prvkem rozložení CSS je značka div—HTML značka, která ve většině případů funguje jako kontejner pro text, obrázky a další prvky stránky.Následující příklad zobrazuje HTML stránku, která obsahuje tři samostatné div tagy: jeden velký tag „container" a dva další tagy—tag postranního panelu a tag hlavního obsahu—v rámci tagu kontejneru.

Následuje kód pro všechny tři tagy div v HTML:

<!--značka div kontejneru-->

<div id="container">

<!--značka div postranního panelu-->

<div id="sidebar">

<h3>Obsah postranního panelu</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<!--značka div mainContent-->

<div id="mainContent">

<h1> Hlavní obsah </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>Záhlaví úrovně H2</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

</div>

Ve výše uvedeném příkladu není k žádnému z tagu div připojen žádný "styling".Bez definovaných pravidel CSS každý tag div a jeho obsah spadá do výchozího umístění na stránce.Pokud však každý div tag má jedinečný identifikátor (jako v předchozím příkladě), můžete použít tyto identifikátory k vytvoření pravidel CSS, která při použití změní styl a umístění div tagů.

Následující pravidlo CSS, které může být umístěno v hlavičce dokumentu nebo v externím souboru CSS, vytváří pravidla stylování pro první neboli „kontejnerový" prvek div na stránce:

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

Pravidlo #container styluje kontejnerový div tag tak, aby měl šířku 780 pixelů, bílé pozadí, žádný okraj (od levé strany stránky), plný, černý, 1pixelový rámeček a text zarovnaný doleva. Výsledky použití pravidla na kontejnerový div tag jsou následující:

Následující pravidlo CSS tvoří pravidla používání stylů pro tag div bočního sloupce:

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

Pravidlo #sidebar styluje div tag postranního panelu tak, aby měl šířku 200 pixelů, šedé pozadí, horní a dolní odsazení 15 pixelů, pravé odsazení 10 pixelů a levé odsazení 20 pixelů. (Výchozí pořadí pro odsazení je horní-pravý-dolní-levý.) Pravidlo navíc umisťuje div tag postranního panelu pomocí float: left—vlastnosti, která posouvá div tag postranního panelu na levou stranu div tagu kontejneru.Výsledky použití pravidla na značku div postranního panelu jsou následující:

Nakonec pravidlo CSS pro značku div hlavního kontejneru dokončí rozložení:

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

Pravidlo #mainContent upravuje styl hlavního obsahu div s levým okrajem 250 pixelů, což znamená, že umístí 250 pixelů prostoru mezi levou stranu kontejneru div a levou stranu hlavního obsahu div. Pravidlo navíc poskytuje 20 pixelů mezer na pravé, dolní a levé straně hlavního obsahu div. Výsledky použití pravidla na div mainContent jsou následující:

Kompletní kód vypadá následovně:

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Nepojmenovaný dokument</title>

<style type="text/css">

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

} 

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

} 

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

} 

</style> 

</head> 

<body> 

<!--značka div pro container-->

<div id="container">

<!--značka div pro sidebar-->

<div id="sidebar">

<h3>Obsah bočního panelu</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<!--mainContent div tag-->

<div id="mainContent">

<h1> Hlavní obsah </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>Záhlaví úrovně H2 </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

</div>

</body>

Vytvoření stránky s rozvržením CSS

Když vytváříte novou stránku v aplikaci Dreamweaver, můžete vytvořit takovou, která už obsahuje rozvržení CSS. Aplikace Dreamweaver se dodává s 16 různými rozvrženími CSS. Navíc si můžete vytvořit vlastní rozvržení CSS a přidat je do konfigurační složky, takže se objeví v nabídce rozvržení v dialogovém okně Nový dokument.

Vytvoření stránky s rozvržením CSS

Přidat vlastní rozložení CSS do seznamu možností

Další podobné

• Pochopení kaskádových seznamů stylů
• Vytvoření prázdné stránky
• Nastavení výchozího typu dokumentu a kódování
• Odkaz na externí seznam stylů CSS