Создание дизайна HTML
Теперь, когда пройдены основные уроки и получены необходимые навыки, приступим к созданию полноценного сайта, который будет состоять из двух страниц.
К тому же, этот пример можно использовать как инструкцию создания сайта своего собственного.
Для начала нужно определиться со схемой, то есть нужно представить, как будет выглядеть сайт.
Схема будет такова:
В самом верху шапка сайта, которая будет знакомить посетителя с сайтом, то есть о чем сайт и так далее.
Слева расположиться колонка меню, в которой будут ссылки на другие страницы. Также сделаем низ сайта, для видимости завершенности страниц. Все остальное место оставим для контента – само содержимое сайта.
Все понятно? Тогда приступаем. Открываем блокнот и пишем основные теги, которые должны присутствовать в любом сайте.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Вот ее html код:
<table>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
Мы использовали в теге <td> новый параметр colspan="", со значением 2. Это команда указывает, что данная ячейка должна быть равной двум предыдущим.
Это относится к шапке сайта и к низу сайта. Так как эти ячейки как бы, созданы из двух объединенных.
Продолжим наш урок создания сайта. Зададим размер ячейкам таблицы и сделаем разметку, то есть где будет меню и так далее.
Наш сайт будет иметь размеры 900 на 600. Эти параметры нужно внести в главный тег таблицы <table>.
Теперь разберемся с размерами ячеек.
Шапка сайта будет 900 на 162 пикселя, меню сайта будет 205 на 387 пикселей, область под контент 695 на 387, низ сайта 900 на 51.
Итак, внесем все эти размеры в параметры ячеек, а также сделаем разметку
<table width =900 height=600>
<tr>
<td colspan="2" width=900 height=162>Шапка сайта</td>
</tr>
<tr>
<td width=205 height=387>Меню сайта</td>
<td width=695 height=387>Область под контент</td>
</tr>
<tr>
<td colspan="2" width=900 height=51>Низ сайта</td>
</tr>
</table>
Готово. Заметьте, что значения в параметрах width = height=, написаны без кавычек, такое допускается.
Урок создания 2-х страничного сайта, продолжение
Теперь займемся вставкой картинок в шапку сайта, а также созданием фона меню.
На предыдущих уроках создания сайта, мы разбирали эти вопросы. Вспомним.
Тег <img> отвечает за вставку картинок, а параметр background="" за создание фона, на котором можно писать.
Сейчас вставим следующие картинки:
Эту, в шапку сайта
Эту сделаем фоном меню
Эту сделаем фоном области под контент.
Эту, в низ сайта
Пропишем нужные теги и параметры, а потом вставим html код полученной таблицы в блокнот с минимальным набором тегов, который мы открыли в самом начале нашего пошагового создания сайта.
В результате урока создания сайта должен получиться следующий html код:
<html>
<head>
<title>Сайт об Интернете. Полезные ссылки и другая информация.</title>
</head>
<body>
<center>
<table width =900 height=600>
<tr>
<td colspan="2" width=900 height=162><img src="shapka.jpg"></td>
</tr>
<tr>
<td width=205 height=387 background="menu.jpg">Меню сайта</td>
<td width=695 height=387 background="kontent.jpg">Область под контент</td>
</tr>
<tr>
<td colspan="2" width=900 height=51><img src="niz.jpg"></td>
</tr>
</table>
</center>
</body>
</html>
Такой должен быть результат этого урока создания сайта
Заметьте, что фразы «шапка сайта» и «низ сайта» были удалены, так как вместо них мы вставили картинки. А фразы «меню сайта» и «область по контент» остались, потому что у этих ячеек мы сделали фон.
На следующем уроке создания сайта, мы доведем до ума получившуюся страницу и создадим вторую.
Если все получилось, следуйте далее, а если нет, следуйте пошаговому созданию сайта, возможно у вас ошибки в html коде.
Если готовы, следуйте далее.
