Создание простого шаблона сайта
Ну, вот и подошло время для того, чтобы применить полученные знания на практике, а засим потихонечку будем строить сайт. Вернее шаблон сайта, т.к. тематика сайта и его наполнение у всех у вас будет разная. При написании кода странички не старайтесь слепо копировать код, написанный мной. Меняйте размеры, цвета, подбирайте шрифты, удобные для Вас, вставляйте картинки и т.д. Побольше смелости в экспериментах и у Вас будет лучший сайт в Рунете. Не стесняйтесь просматривать исходные коды чужих страничек. В этом никакого криминала нет, но это может помочь Вам в строительстве вашего собственного сайта, натолкнув на неординарное решение вашего замысла.
Итак, с чего начинается написание кода для вашего сайта? Возьмите чистый лист бумаги и нарисуйте проект вашего будущего строения. Определите места расположения ваших картинок, логотипов, сопутствующего текста и т.д. Не забудьте выделить место под рекламу. На первых порах она Вам может быть и не нужна, но в недалеком будущем она Вам обязательно понадобится. Это необходимо для того, чтобы в корне не перестраивать сайт.
Еще раз напоминаю, что места в тексте выделенные красным цветом Вы можете изменять по своему усмотрению. Зеленым цветом выделены мои комментарии. Вы их можете опустить.
Ну-с, приступим.
Для начала напишем все обязательные тэги:
<html> <!-- начало документа -->
<head> <!-- голова документа -->
<meta name="Author" content="Автор"> <!-- МЕТА-тэг автора создания сайта и его реквизиты. Можно не указывать. -->
<meta name="content-type" content="text/html; charset=Windows-1251"> <!-- МЕТА-тэг указания языка написания сайта -->
<meta name="keywords" content="Ваши ключевые слова"> <!-- ключевые слова, по которым производится поиск информации пользователем -->
<meta name="Description" content="Краткое описание сайта."> <!-- кратко опишите назначение вашего сайта -->
</head>
<body bgcolor="#FFFFFF" background="Путь к фоновой картинке" link="#0000FF" alink="#0000FF" vlink="#0000FF"> <!-- цвет страницы-белый; если используете атрибут background-указывайте путь к фоновой картинке; цвет ссылок-синий; можете использовать свои цвета -->
... <!-- наполнение сайта -->
</body>
</html>
Эти обязательные тэги должны присутствовать во всех HTML документах. Поэтому в дальнейшем мы их рассматривать не будем, а уделим внимание разметке сайта. Первым делом создадим таблицы согласно заранее заготовленному проекту. Вверху у нас будет шапка для логотипа и названия сайта. Сам логотип Вы должны создать сами в каком-либо графическом редакторе. Название сайта выберите наиболее соответствующее его назначению. Затем у нас должно быть выделено место под меню, место под основную информацию и место, скажем, под рекламу.
Небольшое отступление:
Многоточие используется для указания ранее написанного кода, чтобы не делать в этом руководстве повторы.
Итак, определимся с шапкой. Шапка, может быть простой вставкой картинки логотипа, а может быть картинка вставлена в таблицу. Рассмотрим оба варианта.
1-й способ
...
<img width="100%" height="120" src="image/logo.gif"> <!-- длина-100%; ширина-120 пикселов; путь к картинке -->
2-й способ
...
<table bgcolor="#ffffff" border="1" width="100%"> <!-- таблица - цвет фона-белый; рамка в 1 пиксел; длина-100% -->
<tr> <!-- создание строки -->
<td> <!-- создание столбца -->
<img width="100%" height="120" src="image/logo.gif"> <!-- длина-100%; ширина-120 пикселов; путь к картинке -->
<td> <!-- закрытие столбца -->
<tr> <!-- закрытие строки -->
</table> <!-- закрытие таблицы -->
Какой способ выбрать, Вы решите сами. Использование таблицы иногда более целесообразно, т.к. помогает варьировать местом расположения логотипа и т. д.
Продолжим разметку сайта таблицами. Создадим таблицу, состоящую из одной строки и трех столбцов. Первый столбец будет служить для текстового меню и всякой вашей служебной информации. Второй столбец будет для размещения основной информации, а третий отведем для рекламы. Итак пишем код.
<table bgcolor="#ffffff" border="1" width="100%"> <!-- таблица - цвет фона-белый; рамка в 1 пиксел; длина-100% -->
<tr> <!-- создание строки -->
<td width="15%"> <!-- создание 1-го столбца длиной в 15% -->
...
</td> <!-- закрытие 1-го столбца -->
<td width="70%"> <!-- создание 2-го столбца длиной в 70% -->
...
</td> <!-- закрытие 2-го столбца -->
<td width="15%"> <!-- создание 3-го столбца длиной в 15% -->
...
</td> <!-- закрытие 3-го столбца -->
<tr> <!-- закрытие строки -->
</table> <!-- закрытие таблицы -->
Теперь рассмотрим меню. Если у Вас сайт состоит только из одной странички, то меню Вам не понадобится. Если у Вас многостраничный сайт, то без меню не обойтись. Меню может быть выполнено в виде текстовых или графических ссылок. Можно использовать заранее заготовленные картинки красивых кнопочек, можно использовать саму таблицу с текстовой ссылкой. Вариантов много и выбор варианта полностью ложится на Вас. Здесь мы будем рассматривать различные варианты меню.
Рассмотрим вариант меню, где текстовые ссылки расположены между тэгами <td> в первом столбце:
...
<a href="#"><b>Главная</b></a> <!-- символ # означает, что перехода нет, но можно поставить ссылку на самую себя (index.html) -->
<a href="Путь к документу"><b>Домашняя</b></a> <!-- в меню делаете столько ссылок, сколько у Вас страничек -->
...
Это выглядит следующим образом:
Следующее текстовое меню расположено в отдельной таблице. Если Ваша страничка не вмещается в один экран, такое текстовое меню следует размещать и внизу основной таблицы.
<table cellspacing="0" cellpadding="1" border="0" bgcolor="#4F94CD" width="100%"> <!-- создание таблицы - расстояние между ячейками; внутри ячеек; рамка; цвет фона; длина таблицы -->
...
<tbody> <!-- группа строк данных таблицы -->
<tr> <!-- строка -->
<td> <!-- столбец -->
<table cellspacing="0" cellpadding="3" border="0" width="750"> <!-- создание таблицы - расстояние между ячейками; внутри ячеек; рамка; длина таблицы -->
<tbody>
<tr>
<td><a href="#"> <font color="#ffffff" size="5pt">Главная</a></td> <!-- путь к документу; цвет ячейки; размер шрифта -->
<td><a href="#"> <font color="#ffffff" size="5pt">1-я страничка</a></td>
<td><a href="#"> <font color="#ffffff" size="5pt">2-я страничка</a></td>
<td><a href="#"> <font color="#ffffff" size="5pt">3-я страничка</a></td>
<td><a href="#"> <font color="#ffffff" size="5pt">...</a></td>
<td><a href="#"> <font color="#ffffff" size="5pt">Домашняя</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br>
Выглядеть это будет так:
|
Следующее меню выполнено в виде отдельных таблиц.
<center> <!-- выравнивание -->
<table border="10" width="140" height="50"> <!-- создание таблицы - рамка; длина и ширина таблицы -->
<tr border="3" bgcolor="#00FFFF"> <!-- строка - рамка; цвет рамки -->
<td align="center"> <!-- столбец - выравнивание текста -->
<a href="#"><b>Главная</b></a> <!-- путь к документу; название кнопки меню -->
</td>
</tr>
</table>
<table border="10" width="140" height="50">
<tr border="3" bgcolor="#00FFFF">
<td align="center">
<a href="#"><b>1-я страничка</b></a>
</td>
</tr>
</table>
<table border="10" width="140" height="50">
<tr border="3" bgcolor="#00FFFF">
<td align="center">
<a href="#"><b>2-я страничка</b></a>
</td>
</tr>
</table>
<table border="10" width="140" height="50">
<tr border="3" bgcolor="#00FFFF">
<td align="center">
<a href="#"><b>...</b></a>
</td>
</tr>
</table>
<table border="10" width="140" height="50">
<tr border="3" bgcolor="#00FFFF">
<td align="center">
<a href="#"><b>Домашняя</b></a>
</td>
</tr>
</table>
</center>
У Вас должно получиться так:
| Главная |
| 1-я страничка |
| 2-я страничка |
| ... |
| Домашняя |
В качестве меню, как вариант, можно использовать кнопки формы.
<center> <!-- выравнивание ячеек -->
<FORM ACTION="#.html"> <!-- создание формы - путь к документу -->
<INPUT TYPE=submit VALUE="Главная">"> <!-- тип формы и значение - название кнопки -->
</FORM> <!-- закрытие формы -->
<FORM ACTION="#.html">
<INPUT TYPE=submit VALUE="1-я страничка">
</FORM>
<FORM ACTION="#.html">
<INPUT TYPE=submit VALUE="2-я страничка">
</FORM>
<FORM ACTION="#.html">
<INPUT TYPE=submit VALUE="...">
</FORM>
<FORM ACTION="#.html">
<INPUT TYPE=submit VALUE="Домашняя">
</FORM>
</center>
У Вас должно получиться так. Если вы захотите расположить кнопки в ряд, используйте таблицу с одной строкой и количеством столбцов, равных количеству кнопок.
В качестве меню можно использовать картинки кнопок, как на этом сайте, да в принципе, любое изображение. Всевозможные кнопочки можно рисовать самим, а можно позаимствовать из интернета.
Фу-у-у, с меню вроде разобрались. Дальше я покажу, как вставить ссылку на Ваш почтовый ящик. Может быть Вам кто-то захочет написать, а если у Вас будет сайт, ну например, интернет-магазина, то и заказать товар. Делается это просто:
<p align="center"><b><font size="4">Обратная связь</font></b></p> <!-- выравнивание и размер шрифта -->
<p align="center"><a href="mailto:Ваш почтовый ящик"><img src="../../image/mail.gif" width="70" height="40" border="1"></a></p> <!-- выравнивание картинки или текста вместо картинки; имя вашего почтового ящика; картинка; длина и ширина картинки; рамка (если картинки нет - тэг img не применяйте) -->
<p align="center"><font color="#0033CC">Мой почтовый ящик</font></p> <!-- выравнивание текста; цвет текста -->
Ну вот мы и заполнили первый столбец таблицы нашего шаблона сайта. Сюда же Вы можете вставить и рекламные блоки, если они у Вас есть. Во второй столбец Вы вносите всю вашу информацию, которую Вы хотите донести до посетителей Рунета. Используйте бросские заголовки, ссылки на другие источники и т.д. В третий столбец вставляйте рекламу, новости с вашего сайта и всю сопутствующую информацию.
А теперь посмотрите, что получилось в итоге.
Вот и все, как это не грустно. В этом руководстве я не использовал другие приемы создания страничек, ведь я, как и Вы - НОВИЧОК. Но впереди у нас целая вечность. Сайт будет развиваться и в дальнейшем на нем будут выложены другие приемы создания сайта. А теперь у Вас есть начальные навыки по строительству вашего сайта на языке HTML. Интересуйтесь информацией по этому вопросу, размещенной на этом сайте и в интернете, совершенствуйте ваши знания и развивайте ваш сайт. У Вас все получится и через некоторое время Вам не будет равных в интернете.
Шадуро Николай 