linki adsense

piątek, 29 marca 2013

KURS HTML - UKŁAD (SZABLON) STRONY


Żeby Twoja strona wyglądała dobrze, bardzo ważny jest dobrze zaprojektowany układ strony.
Bardzo dokładnie projektuj układ swojej strony

Examples

Przykład

Projektowanie układu strony za pomocą elementów <div>
Jak stworzyć układ strony za pomocą elementów <div>.
Projektowanie układu strony za pomocą elementów <table>
Jak stworzyć układ strony za pomocą elementów <table>.

Układ stron internetowych


Zawartość większości stron internetowych jest podzielona na kilka kolumn (jak w gazecie).
Te kolumny są stworzone za pomocą elementu <div> lub <table>. Do pozycjonowania elementów, tworzenia tła lub kolorowego wyglądu stron używany jest CSS. 
lampNawet jeśli myślisz, że tworzenie ładnego układu stron jest możliwe za pomocą tabel, to niestety tabele stworzone są do prezentowania danych tabelarycznych, a nie do tworzenia układu stron internetowych.


Projektowanie układu strony za pomocą elementu <div>

Element <div> to element blokowy używany do grupowania elementów HTML.
Poniższy przykład używa 5 elementów div do stworzenia układu kilku kolumn, otrzymujemy ten sam rezultat jak w poprzednim przykładzie:

Przykład

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Tytuł Strony</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Treść strony</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>

</div>

</body>
</html>

Spróbuj Sam »
Rezultat powyższego kodu HTML:

Tytuł Strony

Menu
HTML
CSS
JavaScript
Treść strony
Copyright © W3Schools.com


Projektowanie układu strony za pomocą elementu <table>

A simple way of creating layouts is by using the HTML <table> tag.
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.
Łatwym sposobem projektowania układu stron www, jest użycie do tego celu znacznika <table>.
Układ kilku kolumn można stworzyć za pomocą elementu <div> lub <table>. Do pozycjonowania elementów, tworzenia tła lub kolorowego wyglądu stron używany jest CSS. 
lampNawet jeśli myślisz, że tworzenie ładnego układu stron jest możliwe za pomocą tabel, to niestety tabele stworzone są do prezentowania danych tabelarycznych, a nie do tworzenia układu stron internetowych.

W poniższym przykładzie użyto tabeli z 3 wierszami i 2 kolumnami - pierwszy i ostatni wiersz rozdziela obydwie kolumny przy użyciu atrybutu colspan:

Przykład

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Tytuł Strony</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Treść strony</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>

</body>
</html>

Spróbuj Sam»
Rezultat powyższego kodu HTML:

Tytuł Strony


Menu
HTML
CSS
JavaScript
Treść strony
Copyright © W3Schools.com


Układ strony - wskazówki

Tip: Największą zaletą używania CSS jest to, że jeżeli wstawisz kod CSS do zewnętrznego arkusza stylów, Twoja strona stanie się dużo łatwiejsza w zarządzaniu. Możesz zmienić układ wszystkich swoich stron poprzez edycję jednego pliku. Żeby nauczyć się CSS, przejrzyj CSS tutorial.
Tip: Ponieważ tworzenie zaawansowanego wyglądu stron jest czasochłonne, szybszą opcją jest użycie szablonu. Wejdź na Google i poszukaj darmowych szablonów stron WWW (to gotowe układy stron, które możesz używać i zmieniać).

Znaczniki do projektowania układu stron WWW

ZnacznikOpis
<div>Definiuje sekcję w dokumencie (blokowo)
<span>Definiuje sekcję w dokumencie (w linii)

1 komentarz:

  1. Absolutne i dobre podstawy dla osób chcących tworzyć strony internetowe. Ja swoją witrynę zleciłam https://dolp.pl/strony-www bo się kompletnie na tym nie znam. Jednak wykonanie strony internetowej przez firmę dolp przeszło moje oczekiwania. Jest super !

    OdpowiedzUsuń