Informacje o tworzeniu układu strony za pomocą stylów CSS

Informacje o układzie strony opartych na stylach CSS

Układ strony oparty na stylach CSS to układ wykorzystujący do organizowania zawartości na stronie WWW style CSS, a nie tradycyjne tabele czy też ramki HTML. Podstawowym elementem konstrukcyjnym układu CSS jest znacznik DIV. Jest to znacznik HTML, który najczęściej służy jako kontener tekstu, obrazów czy innych elementów strony. Tworząc układ CSS, wstawia się na stronie znaczniki DIV, wprowadza do nich zawartość i rozmieszcza je w różnych miejscach. W przeciwieństwie do komórek, które muszą znajdować się w siatce wytyczonej przez wiersze i kolumny tabeli, znaczniki DIV mogą pojawić się w dowolnym miejscu na stronie. Znaczniki DIV mogą być pozycjonowane bezwzględnie (przez podanie współrzędnych X i Y) albo względnie (przez podanie ich nowego położenia względem położenia obecnego). Inna metoda modyfikowania pozycji znaczników DIV polega na określaniu właściwości „float” oraz definiowaniu odstępów wewnętrznych i marginesów. Jest to metoda preferowana według obecnych standardów internetowych.

Informacje o strukturze układu strony CSS

Przed przejściem do tej sekcji należy znać podstawowe koncepcje CSS.

Podstawowym elementem składowym układu CSS jest znacznik div — znacznik HTML, który w większości przypadków działa jako kontener dla tekstu, obrazów i innych elementów strony.Poniższy przykład pokazuje stronę HTML zawierającą trzy oddzielne znaczniki div: jeden duży znacznika „container" oraz dwa inne znaczniki — znacznik paska bocznego i znacznik zawartości głównej — wewnątrz znacznika kontenera.

Poniżej przedstawiono kod HTML dla wszystkich trzech znaczników DIV:

<!--znacznik div kontenera-->

<div id="container">

<!--znacznik div paska bocznego-->

<div id="sidebar">

<h3>Zawartość paska bocznego</h3>

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

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

</div>

<!--znacznik div mainContent-->

<div id="mainContent">

<h1> Główna zawartość </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>Nagłówek poziomu 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>

W powyższym przykładzie żaden ze znaczników div nie ma dołączonego „stylu".Bez zdefiniowanych reguł CSS każdy znacznik div i jego zawartość znajduje się w domyślnej lokalizacji na stronie.Jednak, jeśli każdy znacznik div ma unikatowy identyfikator (jak w powyższym przykładzie), można użyć identyfikatorów do tworzenia reguł CSS, które po zastosowaniu zmienią styl i pozycjonowanie znaczników div.

Następująca reguła CSS, która może znajdować się w nagłówku dokumentu lub w zewnętrznym pliku CSS, tworzy reguły stylu dla pierwszego, czyli „kontenerowego" znacznika div na stronie:

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

Reguła #container nadaje stylizację znacznikowi div kontenera w celu nadania mu szerokości 780 pikseli, białego tła, braku marginesu (z lewej strony strony), jednolitej, czarnej, jednopikselowej ramki oraz tekstu wyrównanego do lewej. Wyniki zastosowania reguły do znacznika div kontenera są następujące:

Kolejna reguła CSS tworzy styl dla znacznika DIV paska bocznego:

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

Reguła #sidebar określa styl znacznika div paska bocznego tak, aby miał szerokość 200 pikseli, szare tło, górny i dolny odstęp 15 pikseli, prawy odstęp 10 pikseli i lewy odstęp 20 pikseli. (Domyślna kolejność dopełnień to góra-prawo-dół-lewo). Dodatkowo ta reguła pozycjonuje znacznik div paska bocznego za pomocą właściwości float: left, która przesuwa znacznik div paska bocznego na lewą stronę znacznika div kontenera.Wyniki zastosowania reguły do znacznika div paska bocznego są następujące:

Na końcu reguła CSS dla głównego znacznika div kontenera kończy układ:

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

Reguła #mainContent określa styl div głównej zawartości z lewym marginesem 250 pikseli, co oznacza, że umieszcza 250 pikseli przestrzeni między lewą stroną div kontenera a lewą stroną div głównej zawartości. Dodatkowo reguła zapewnia 20 pikseli odstępu po prawej, dolnej i lewej stronie elementu div głównej zawartości.Wyniki zastosowania zasady do elementu div mainContent są następujące:

Łączny kod wygląda następująco:

<head> 

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

<title>Dokument bez tytułu</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> 

<!--znacznik div kontenera-->

<div id="container">

<!--znacznik div paska bocznego-->

<div id="sidebar">

<h3>Zawartość paska bocznego</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> Główna zawartość </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>Nagłówek poziomu 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>

Tworzenie strony z układem CSS

Tworząc nową stronę w programie Dreamweaver, można utworzyć taką, która już zawiera układ CSS. Program Dreamweaver zawiera 16 gotowych układów CSS. Można również tworzyć własne układy CSS i dodawać je do folderu konfiguracyjnego, co spowoduje, że będą pojawiać się jako układy do wyboru w oknie dialogowym Nowy dokument.

Tworzenie strony z układem CSS

Dodaj niestandardowe układy CSS do listy opcji

Więcej podobnych

• Informacje o stylach CSS
• Tworzenie pustej strony
• Ustawianie domyślnego typu dokumentu i kodowania
• Łączenie z zewnętrznym arkuszem stylów CSS