Аранжиране на съдържанието с таблици
HTML дизайна е лесен. Не съществуват много възможности за аранжиране на елементите съдържанието и дизйана. Таблиците са основен метод за създаване и аранжиране на уеб дизайн, като в тях може да бъде подредено всичко, дори друга таблица.
HTML код:
<table id="shell" bgcolor="black" border="1" heigh="200" width="300">
<tr><td>
<table id="inner" bgcolor="white" heigh="100" width="100">
<tr><td>Tables inside tables!</td></tr>
</table>
</td></tr></table>
Резултатът – таблица в таблицата:
Бялата таблица съществува вътре в черната родителска таблица. Сигурно веднага ви светва лампичката в главата колко безгранични възможности за дизайн има с таблиците.
Един стандартен дизайн на страница съдържа някакъв банер в горната част, навигация и съдържание. Това „гръбнакът” на един страхотен уеб сайт.
HTML код:
<table cellspacing="1" cellpadding="0" border="0"
bgcolor="black" id="shell" height="250" width="400">
<tr height="50"><td colspan="2" bgcolor="white">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td></tr>
<tr height="200"><td bgcolor="white">
<table id="navigation" title="Navigation" border="0">
<tr><td>Links!</td></tr>
<tr><td>Links!</td></tr>
<tr><td>Links!</td></tr>
</table>
</td><td bgcolor="white">
<table title="Content" id="content" border="0">
<tr><td>Content goes here</td></tr>
</table>
</td></tr></table>
Резултатът в браузъра:
Този пример беше прост, но организиран. Често се срещат уеб сайтове с твърде объркан за потребителят дизайн, който им пречи да следят съдържанието. Кодът, показан за този пример следва да се усложни като се добави CSS, в който са описани цвят на фона, рамките, височина и широчина на клетките. Внимавайте много, когато описвате именно широчината и височината на клетките! Не бива широчината на всички клетки от един ред да надхвърля общата широчина на таблицата!
Аранжиране на съдържанието с div блокове
Това е другата основна възможност за създаване на оформление за уеб страница.
Нека разгледаме два примера.
HTML код:
<div id="menu" align="right" >
<a href="">HOME</a> |
<a href="">CONTACT</a> |
<a href="">ABOUT</a>
</div>
<div id="content" align="left">
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
</div>
Резултатът, който вижаме в браузъра:
Както е видно от кода на този пример, цялото оформление на страницата е изградено от 2 div блока, разположение един под друг. Div с id=”menu” има атрибут align=”right”, което кара всичко разположено вътре в този блок да бъде дясно ориентирано. В нашият случай дясно ориентирани са трите линка HOME, CONTACT и ABOUT.
NB! Ако си спомняте от предните лекции и упражнения, поставяйки атрибут align=”right” на дадена таблица ние я позиционирахме в дясно на страницата. Когато обаче използваме същият този атрибут за div блокове, значението му е друго. Използван като атрибут на div елементи, align ще позиционира съдържанието на елемента, това което е между <div>…</div> а не самият блок.
По подразбиране всички div елементи заемат 100% от широчината на страницата. За да ги ограничим до някакъв конкретен размер използваме CSS.
Когато желаем да ориентирамя нашият div блок вляво или вдясно, използваме CSS атрибутът float. Той приема стойности left, right, none.
За да центрираме по средата на страницата div елемент използваме CSS атрибута margin със стойност auto.
Задължително условие за да бъде един div позициониран вляво, вдясно или център е да има зададена фиксирана дължина!
Ето и по-важните CSS атрибути, използвани за стилизиране на DIV:
| Атрибут | Възможни стойности | Действие |
| Float | Left, right, none | Позиционира блока вляво, вдясно или премахва „плаването” (float на англ. означава „плаващ”) |
| Clear | None, left, right | „изчистване” (clear) на плаващи блокове. Ако имаме div блок, поставен непосредствено след друг div, на който му е зададено плаване вляво или вдясно (float: left или float:right), то той нормално би застанал на същият ред до него. За да форсираме блока да слезне под елемента със зададено плаване, използваме този атрибут. |
| Width | Auto, px, % | Широчина на блока |
| Height | Auto, px, % | Височина на блока |
| Min-width | Px; % | Минимална широчина |
| Min-height | Px; % | Mинимална височина |
