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

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

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

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

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

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

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

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

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

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

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

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

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

Текст в таблице, соответственно, заключается между тегами <td> и </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>

 
 

Хочешь научиться создавать настоящие сайты в Интернете быстро и профессионально? Записывайся на бесплатный онлайн-тренинг по созданию сайтов в Интернете!

<< Записаться >>

Автор

admin

Программист - техник, разработчик сайтов и программного обеспечения, владелец сервера, администратор сайта "Немного о компьютере..."

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *