HTML HTML5 XHTML ПРИМЕРЫ СПРАВОЧНИК РЕКЛАМА ГОСТЕВАЯ

HTML Урок 22 Компоновки


« Назад Далее »

Компоновка веб страницы очень важна для того чтоб сделать ваш веб сайт привлекательным.

Проектируйте компоновку вашей веб страницы очень внимательно.


Компоновки веб сайтов

Большинство веб сайтов помещают содержимое в несколько столбцов (отформатированных подобно журналу или газете).

Эти столбцы создаются с помощью тегов <table> или <div>. Как правило CSS используются для позиционирования элементов или для создания фоновых изображений или художественного вида страниц.


HTML Компоновки - Использование Таблиц

Простейший способ создания компоновок - использование HTML тега <table>.

Следующий пример использует таблицу с тремя строками и двумя столбцами - первая и последняя строки занимают оба столбца используя атрибут colspan:

Пример

<html>
<body>

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

</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700; width:100px; text-align:top;">

HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#eeeeee; height:200px; width:400px; text-align:top;">

</tr>

<tr>
<td colspan="2" style="background-color:#FFA500; text-align:center;">

</tr>
</table>

</body>
</html>


Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

HTML код выше будет выглядеть в браузере так:

Главный Заголовок Страницы

Меню
HTML
CSS
JavaScript
Здесь идет содержание
© 2011 Uroki-HTML.ru

Замечание Замечание: Даже если с помощью HTML таблиц можно делать приличные компоновки, таблицы были созданы для представления табличных данных - НЕ как инструмент для компоновки!


HTML Компоновки - Использование Div Элементов

Элемент div - это блочный элемент для группировки HTML элементов.

Следующий пример использует пять элементов div для создания компоновки с несколькими стобцами, в результате получается тот же результат как и в предыдущем примере:

Пример

<html>
<body>

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

<div id="header" style="background-color:#FFA500;">


<div id="menu" style="background-color:#FFD700; height:200px; width:100px; float:left;">

HTML<br />
CSS<br />
JavaScript</div>

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


<div id="footer" style="background-color:#FFA500; clear:both; text-align:center;">


</div>

</body>
</html>


Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

HTML код выше приведет к следующему результату в браузере:

Главный Заголовок Страницы

Меню
HTML
CSS
JavaScript
Здесь идет содержание
© Uroki-HTML.ru


HTML Компоновки - Полезные Советы

Совет: Наибольшее преимущество использования CSS в том, что вы помещаете код CSS во внешний файл, и вашим сайтом становится ГОРАЗДО ПРОЩЕ управлять. Вы можете изменить дизайн всех ваших страниц редактируя один единственный файл. Чтобы узнать больше о CSS, начните изучать уроки CSS.

Подсказка: Поскольку создание продвинутых компоновок требует времени, более быстрый способ - использование шаблона. Используйте Google для поиска бесплатных шаблонов вебсайтов (эти уже готовые шаблоны веб сайтов вы можете использовать и настраивать под свои нужды).


HTML Теги Компоновок

ТегОписание
<table>Определяет таблицу
<div>Определяет блок в документе



« Назад Далее »
© 2011-2017 Уроки HTML
Рейтинг@Mail.ru