szablon strony www
DESCRIPTION
Three Columns szablon strony www oparty na znacznikach divTRANSCRIPT
© mgr Maria Ptak
W dwunastu krokach…
W dwunastu krokach…
Konieczne wyposażenie: znajomość HTML-a znajomość CSS-a edytor tekstowy - Notepad
© mgr Maria Ptak
W dwunastu krokach…
Typ projektowanego szablonu: stała szerokość kolumn bocznych zmienna – dostosowująca się do okna przeglądarki – szerokość kolumny głównej, nagłówka i stopki
%
fix fix
%
%
© mgr Maria Ptak
zobacz też inne typy szablonów trójkolumnowych
W dwunastu krokach…
© mgr Maria Ptak
1. Utwórz główną
strukturę dokumentuw HTML-u
<body><div id="top"></div><div id="wrapper"> dodany w celu wyrównania wysokości kolumn - za pomocą css
<div id="left"></div><div id="right"></div><div id="content"></div>
</div> <div id="footer"></div></body>
Krok 1
2. Dodaj arkusz CSS. Ostyluj w
nim znacznik body
body { width: 90%; margin: 10px auto; }
Krok 2
3. Dodaj np. kolor
czcionki, kolor tła
i wysokość wiersza
body { width: 90%; margin: 10px auto;color: #333; background-color: #fff;line-height: 130%; }
Krok 3
Krok 4
#top { height:100px; padding: .5em; background-color: # c00000; }
4. Nadaj styl divowi
top
Krok 5h1
#top h1 { padding: 0; margin: 0; }
5. Usuń marginesy i paddingi z
h1
Krok 6
w celu ukrycia przepełnienia
#wrapper{ overflow: hidden; background:#d9d9d9;}
6. Ostyluj dodatkowy
div obejmujący:
wrapper
7. Zastosuj opływanie =
float, tło,paddingi i
marginesy dla diva
left
#left { float: left;width: 160px;background-color: # 00b0f0;padding: 1em 1em 2000px; margin-bottom: -2000px; }
Krok 7
8. Zastosuj opływanie =
float, paddingi i
marginesy dla diva
right
#righ { float: right;width: 160px;background-color: # ffc000;padding: 1em 1em 2000px;margin-bottom: -2000px;}
Krok 8
9. Dodaj paddingi
i marginesy dla diva content
#content { padding: 1em 1em 2000px;margin: 0 200px -2000px; }
Krok 9
10. Usuń z zawartości
kolumn górne
marginesy
#left p, #right p { margin: 0 0 1em 0; }#content h2 { margin: 0 0 .5em 0; }
Krok 10
h2p p
11. Nadaj styl stopce –div footer,
wyjdź z oblewania
#footer { clear: both;height: 100%;margin: 0 auto;padding: .5em 0;background-color: # 92d050;overflow: hidden; }
Krok 11
zabezpiecza przed rozpychaniem
Krok 12 - ostatni!
© mgr Maria Ptak
12. Testuj szablon dla różnej wysokości kolumn, zmieniając
ich zawartość
W dwunastu krokach…
© mgr Maria Ptak
Po co ten div wrapper?
Gdyby nie było diva wrapper, ujemnych, dolnych - ogromnych marginesów i takich samych dodatnich
paddingów dla kolumn…
© mgr Maria Ptak
Dodatki
© mgr Maria Ptak
Inne sposoby na równe kolumny: Faux Columns - tło obrazkowe JavaScript - wymaga pliku
ze skryptem display: table - „zamienienie”
wyświetlania div-ów z blokowego na ten specyficzny dla tabel – nie działa w IE
Dodatki
© mgr Maria Ptak
Czytaj więcej: warstwy tutorial struktura oparta na divach kurs html-a boo rozciąganie divów stray div divowi równy dlaczego tabelki są głupie
Dodatki
© mgr Maria Ptak
Szablon w sieci: kody HTML i CSS
W dwunastu krokach…
© mgr Maria Ptak