Создание веб-страниц
Создание сайта начинается с создания обычного текстового файла, имеющего имя index.html. Этот файл является главным, т.е. при загрузки веб-страницы, по умолчанию открывается именно этот файл. Файл будет содержать в себе ссылки на другие страницы, пределах сайта, а также ссылки на другие ресурсы. Для создания файла может быть использован любой текстовый редактор, автором данной работы использовался редактор «Notepad++».
В начале создадим скелет-основу нашей страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Первые две строки указывают, документом какого типа является страница и какому стандарту она отвечает. Декларирование типа документа (doctype) также указывает браузеру на файл в Интернете, содержащий описание данного типа файлов. Остальные теги являются базовыми тегами.
Далее необходимо задать название страницы. Делается это в заголовке <head> </head>, с помощью специальной пары тегов <title> </title>.
<title> Mos Records – студия звукозаписи </title>
Построение названия таким образом, облегчит работу роботов – поисковиков, а также идентификацию сайта при поиске.
Здесь же в заголовке необходимо задать указатели на будущие таблицы стилей, на библиотеки с которыми мы будем работать. Это можно сделать с помощью следующих строк:
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="libs/lib1.js"></script>
<link href="style/style.css" rel="stylesheet" type="text/css">
Первые две строки указывают, где располагаются библиотеки JS. Третья строчка указывает, где найти таблицу стилей. Данная таблица стилей будет работать одинаково в большинстве современных браузеров, за исключением IE, поэтому с помощью специального условного комментария, мы подключим отдельную таблицу стилей, отдельно для IE.
<!--[if IE]>
<link href="style/style-ie.css" rel="stylesheet" type="text/css">
<![endif]-->
Здесь же в заголовке документа описываются все функции, которые будут использоваться в документе.
Теперь перейдем к разделу <body>. Он будет состоять из двух частей: навигационного меню, расположенного вверху экрана, и таблицы размера 3х3 с элементами веб-страницы.
Начнем с панели навигации. Вначале создадим контейнер для панели:
<div>
…
</div>
Далее создаем список с помощью тегов <ul>, который будет включать в себя следующие пункты: Прокрутка вниз, прокрутка вверх, На главную, Форум, Звукозапись, Контакты, Вконтакте, FAQ.
<div id="nav"> <!-- панель навигации-->
<ul>
<li><a class="top" href="#sound"><span></span></a></li>
<li><a class="bottom" href="#theend"><span></span></a></li>
<li><a href="index.html">На главную</a></li>
<li><a href="http://mos70.hdd1.ru/bb3/bb3/portal.php" target="_blank" title="Форум">Форум</a></li>
<li><a>Звукозапись</a></li>
<li><a>Фото</a></li>
<li><a href="kontakts.html" title="Наши контакты">Контакты</a></li>
<li><a href="http://vkontakte.ru/" target="_blank" title="Наша группа в контакте">Вконтакте</a></li>
<li><a href="FAQ.html">FAQ</a></li>
</ul>
</div>
В выше указанном коде осуществляется создание меню, состоящего из 8-ми функциональных кнопок, каждая кнопка связанна с отдельной страницей, при помощи тега <a> </a> и свойства href=”…”.
Следующим шагом будет создание таблицы размера 3х3. Делается это при помощи тегов:
<table> - создать таблицу
<tr> - создать строку в таблице
<td> - создать ячейку таблицы
Таким образом, скелет основа для таблиц будет выглядеть следующим образом:
<table>
<tr>
<td>…</td> <td>…</td> <td>…</td>
</tr>
<tr>
<td>…</td> <td>…</td> <td>…</td>
</tr>
<tr>
<td>…</td> <td>…</td> <td>…</td>
</tr>
</table>
Таблица готова. Теперь нам необходимо поместить некоторые элементы в таблицу. В каждую ячейку первого столбца таблицы, а также в последнюю ячейку первой и второй строки, будет помещено информационно окно (рис. 1).
<td> <!-- Окно 1-->
<div class="a_first1">
<div class="a_first_name">
<h2>Первое окошечко</h2>
</div>
<div class="a_first_photo" style="background:url('../images/bg.png') repeat-x; width:250px; height:130px;">
</div>
<div class="a_first_details">
<span>
<a class="box" href="http://mos70.hdd1.ru/">Подробнее >>></a>
</span>
</div>
</div>
</td>
Данный код выполняет поставленную задачу.
В последнюю ячейку третьей строки мы помести:
Часы(рис. 2):
<script src="http://www.clocklink.com/embed.js" type="text/javascript"></script><script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="5012-black.swf";obj.TimeZone="Russia_Moscow";obj.width=151;obj.height=50;obj.wmode="transparent";showClock(obj);</script>
Рисунок 2 - часы
информер погоды(рис. 3):
<a href="http://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*http://pogoda.yandex.ru/moscow"><img src="http://info.weather.yandex.net/moscow/1.png" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="http://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*http://img.yandex.ru/i/pix.gif" alt="" border="0"/></a>
Рисунок 3 – информер погоды
Метрику(рис. 4):
<!-- Yandex.Metrika informer -->
<a href="http://metrika.yandex.ru/stat/?id=5541061&from=informer" target="_blank" rel="nofollow"><img src="//bs.yandex.ru/informer/5541061/3_0_707070FF_505050FF_1_pageviews" style="width:88px; height:31px; border:0;" alt="" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" /></a>
<!-- /Yandex.Metrika informer -->
<!-- Yandex.Metrika counter -->
<div style="display:none;"><script type="text/javascript">
(function(w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter5541061 = new Ya.Metrika(5541061);
yaCounter5541061.clickmap(true);
yaCounter5541061.trackLinks(true);
} catch(e) { }
});
})(window, 'yandex_metrika_callbacks');
</script></div>
<script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript" defer="defer"></script>
<noscript><div><img src="//mc.yandex.ru/watch/5541061" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
Рисунок 4 - метрика
Дату
<script type="text/javascript">
var today = new Date();
var message = dateString(today, '%W: %d.%N.%Y');
document.write(message);
</script>
Теперь первый и третий столбцы таблицы заполнены элементами. Ячейки второго столбца необходимо объединить для создания большой области, где, при необходимости можно будет поместить большой логотип, или выдать некоторую общую информацию. Для этого зададим значения атрибутов второй ячейки:
<td rowspan="3" style="vertical-align: top; border: 0px solid #FFFFFF;">
После добавления элементов на страницу, перейдем к созданию следующей страницы – страницы с контактной информацией.
Название файла будет kontakts.html. Ссылка на эту страницу находиться в навигационном меню, на кнопке Контакты. Структура страницы таблица 3х3 и навигационное меню. Эта страница будет содержать всю контактную информацию. Таблица на этой странице будет заполнена следующим образом: первая ячейка первой строки, будет содержать информационное окно (рис 1.), а в третьей ячейки, - часы, дату и метрику. По центру окна будет располагаться контактная информация:
Телефон
Email
Адрес
ICQ
Skype
Под этими данными будет находиться карта сервиса Google, с указанием места(рис. 5):
Рисунок 5 – Контактная информация
Следующей страницей будет страница FAQ.
FAQ(Frequently Asked Question(s)) — часто задаваемые вопросы. Страница, с названием FAQ.html, будет содержать наиболее часто задаваемые вопросы и ответы на них. Страница также имеет вид таблицы 3х3 и оформлена, как и страница с контактами, за исключением центральной части, где будут располагаться вопросы и ответы.
Изначально ответы будут скрыты (рис 6), и при необходимости, посетитель, нажав на крестик рядом с вопросом, получить ответ(рис. 7).
Рисунок 6 – вопросы
Рисунок 7 – вопрос с ответом
Также страница содержит панель навигации, информационное окно (рис. 1), часы, дату и метрику.