Общая структура создания сайтов

Общая структура сайта

Как известно, есть множество способов сделать сайт в Интернете: использование шаблонов и тем, установка различных движков на сайт, создание html сайтов, php программирование и т.д. Сегодня пойдет речь о создании html сайта. Именно на этом основано всё остальное.

Для начала, давайте посмотрим на общую схему сайта:

Структура сайта

Header - шапка сайта (верхняя часть сайта). В основном здесь располагается заголовок, горизонтальное меню сайта и какой-нибудь рисунок.

Sidebar - боковая колонка. Колонок на сайте можно сделать множество. А можно и не делать, если это сайт-визитка или одностраничник. Разместить можно всё, что угодно (календарь, вертикальное меню, приложения, баннера, рекламу и пр.)

Single - основной текст статьи (с пер. от англ. "Запись").

Footer - подвал (нижняя часть сайта). Сюда размещается информация о компании, названии сайта, год создания, меню, счетчики и др.

Создать такую структуру очень просто. Например, используя стили сайта (через div), или используя таблицы. Давайте воспользуемся вторым методом и создадим простенький сайт.

Для начала откроем "Блокнот" и пропишем следующие теги:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Между тегами title необходимо написать название сайта. Теги head предназначены только для объявления и подключения различных модулей, а теги body - для отображения содержимого на сайте.

Давайте попробуем сделать таблицу и выравним её по середине. Для этого нужно заключить теги таблицы между внутри body. Для объявления таблицы используются теги table. Для создания новой строки - tr, а для создания колонок в таблице - td. Тогда, чтобы сделать таблицу, необходимо прописать следующий код:

<table>
<tr>
<td></td>
</tr>
</table>

Текст в таблице, соответственно, заключается внутри тегов td.

Однако, таблица расположилась в левой части экрана, а нужно - по середине. Для этого в теге table (сразу после слова table) прописываем align="center". Чтобы установить размер таблицы (ширину), необходимо там же прописать width="800", а чтобы убрать границы таблицы, задаем ширину границ, равную 0: border="0". Получился такой код таблицы:

<table width="800" border="0" align="center">
<tr>
<td>Текст сайта</td>
</tr>
</table>

Чтобы текст выравнить по-вертикали, необходимо в теге td прописать valign="top":

<td valign="top">Текст сайта</td>

Теперь таким же образом создадим общую структуру сайта.

Согласно картинке выше, есть одна большая таблица, расположенная по середине, и имеющая три строки. В первой строке размещается шапка сайта. Во второй строке находится еще одна таблица, содержащая три столбца и одну строку. А в третье строке будет находится подвал сайта.

Тогда полный код сайта выглядит приблизительно так:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table width="800" border="0" align="center">
  <tr>
    <td><div align="center">Header</div></td>
  </tr>
  <tr>
    <td><table width="800" border="0">
      <tr>
        <td valign="top" width="170px"><p>Sidebar1</td>
        <td valign="top" width="auto">Single</td>
        <td valign="top" width="170px">Sidebar2</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="center">footer</td>
  </tr>
</table>
</body>
</html>

Опубликовано:

Читайте также:
Заказывайте товары и услуги:

Комментарии (0)
Оставить комментарий