Вёрстка подвала .......................................................................... 84
Валидность и кроссбраузерность ..................................... 93
Адаптация сайта под разные разрешения экра на 96
Создание страницы «О нас» ................................................ 100
Создание страницы «Услуги» ............................................. 103
Создание страницы «Контакты» ................................... 111
Создание страницы «Записаться» ................................. 112
Добавление JavaScript ............................................................. 131
Программная часть.................................................................. 136
Отправка формы на e-mail ................................................. 136
Михаил Русаков –специалист в области создания сайтов.
Личный сайт: http://MyRusakov.ru
Блог: http://Blog.MyRusakov.ru
Служба поддержки: http://Support.MyRusakov.ru
Основная специализация – обучение начинающих (и не только)
созданию
профессиональных
сайтов.
Ведёт
свою
обучающую
деятельность уже более 4-х лет. Сам он имеет опыт программирования
более 8 лет.
Автор популярных курсов по вёрстке сайтов, по PHP и MySQL, по
JavaScript, по созданию Интернет-магазина и массе других.
Полный список всех курсов можно посмотреть у него на блоге:
http://Blog.MyRusakov.ru/courses.html
Более подробно о себе и о том, как он начинал, Михаил рассказывает в
этом видео: http://Blog.MyRusakov.ru/history.html
MyRusakov.ru
4
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
К данной книге имеются дополнительные материалы в виде дизайна
сайта в PSD-формате и исходников сайта, созданных в данной книге.
Скачать их можно по этой ссылке:
http://files.myrusakov.ru/subscribe/book_sources.rar
Вы так же можете приобрести полную видеоверсиюкурса «Создание
сайта от начала и до конца», по мотивам которого была написана
данная книга.
Данный курс можно приобрести и мгновенно получить все его уроки
через Интернет в течение ближайших 10 минут.
Воспользуйтесь выгодной возможностью прямо сейчас
http://srs.myrusakov.ru/bookv
MyRusakov.ru
5
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Введение
Цель этой книги рассказать и показать, как создать сайт-визитку
самостоятельно. Сайт-визитка – это самый простой вариант сайта, но,
тем не менее, для его создания необходимо иметь определенное
количество знаний и навыков. Для новичка создание такого простого
сайта будет очень непростой задачей.
Когда мы хотим достичь какой-либо цели, мы, обычно, путь к ее
достижению разбиваем на этапы. Так мы поступим и в этой книге:
разобьем на этапы работу над созданием сайта и подробно разберем
варианты их прохождения.
Этапы создания сайта
Существует четыре этапа создания сайта:
Создание дизайна
Верстка страниц
Создание движка (написание скриптов)
Размещение в интернете
Сейчас мы разберем варианты прохождения этих этапов, и вы сможете
выбрать для себя наиболее подходящий.
MyRusakov.ru
6
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Создание дизайна
Есть три варианта создания дизайна вашего сайта:
Сделать дизайн самостоятельно
Заказать дизайн профессионалу
Найти бесплатный вариант
Дизайн сайта обычно создается в программе Photoshop. В результате
работы у вас может получиться один или несколько файлов psd (формат
файлов Photoshop).
В случае создания сайта-одностраничника или сайта, страницы
которого не меняют общий вид оформления, будет достаточно одного
файла psd. А если ваш сайт более сложный? Например, на главной
страницерасположена какая-нибудь статья, а на следующей какаянибудь форма со своими текстовыми полями и кнопками. Такие
страницы называются второстепенными или внутренними и должны
иметь другой дизайн.
Если вы считаете, что хорошо знаете Photoshop и в состоянии заняться
художественным оформлением вашего сайта, то, конечно, лучше
сделать это самому. Недаром есть пословица: «Если хочешь что-то
сделать хорошо, то сделай это сам».
MyRusakov.ru
7
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Если же вы считаете что дизайн это не ваше, что у вас есть более
интересные и важные дела, чем художественное оформление вашего
сайта, то лучше обратиться к профессионалам.
В этом случае вы должны учесть, что нужно составить подробное
техзадание для дизайнера и обсудить его с ним для того, чтобы в
конечном итоге получить то, что вы хотите. Ведь каждый человек, а тем
более художник, дизайнер видит мир по-своему. Поэтому вы должны
обсудить с дизайнером, какие блоки должны быть на вашем сайте, где
они будут находиться, какие цвета вы предпочитаете. Желательно
предоставить ему список сайтов, которые вам нравятся и которые не
нравятся.
Этот вариант подойдет, если вы создаете какой-то серьезный сайт с
определенными целями.
Если же вы толькообучаетесь сайтостроению и ваша задача научиться
верстать страницы, создавать движок, писать скрипты, то вам подойдет
бесплатный вариант. Он будет описан в следующем разделе книги,
посвященном дизайну.
Теперь о ценах на дизайнерские услуги.
Цена оформления главной страницы колеблется от 100 до 150
долларов. При желании, конечно, можно найти и за 3000 долларов, но
это того не стоит.
MyRusakov.ru
8
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Найти дешевле 100 долларов, при желании, тоже можно, но в этом
случае результат будет очень плохой.
Цена внутренних страниц будет зависеть от того, насколько они
отличаются от главной. Как обычно выглядит сайт: верхнее меню –
шапка, какой-нибудь блок с новостями, подвал и центральная часть,
которая изменяется. То есть, дизайнер должен только стереть
центральный блок и нарисовать какой-нибудь новый контент. В
некоторых случаях, конечно, бывают какие-то более серьезные
изменения. Поэтому цена на внутренние страницы колеблется от 15 до
30 долларов.
Верстка страниц
После того как дизайн готов можно переходить ко второму этапу –
верстке страниц.
Верстка – это процесс преобразования картинки, которую нарисовали
вы или дизайнер вHTMLиCSS код. То есть, картинка преобразуется в
Web-страницу, на которую пользователь может зайти, кликнуть по
ссылкам или заполнить какую-то форму.
Этап этот сложный и долгий. Поэтому в этой книге займет самый
большой раздел с большим количеством подразделов.
MyRusakov.ru
9
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Создание движка
После того как сделана верстка, можно приступать к созданию движка.
Движок – это невидимый элемент сайта, который обрабатывает
запросы от пользователей и переводит их на запрашиваемые страницы.
Движок нужен не всегда. Потребность в нем возникает, если на сайте
есть
формы
регистрации,
модераторов или, если сайт
аккаунты
пользователей,
аккаунты
новостной, с большим количеством
страниц.
Для таких простых сайтов как сайт-визитка движок не нужен. Но если
вы, например, хотите чтобы посетитель вашего сайта заполнил какуюнибудь форму обратной связи, и эти данные пришли на ваш e-mail, как
администратора сайта, то движок потребуется.
На самом деле движков разработано достаточно много. Их можно
найти в интернете. Есть платные и бесплатные варианты – выбор за
вами.Но самый лучший вариант – создавать всё-таки свой.
Мы же с Вами будем создавать скрипт формы обратной связи. В одном
из разделов этой книги будет дана подробная информация технологии
написания скриптов и проверки их в работе.
MyRusakov.ru
10
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Размещение в интернете
После того как сайт полностью готов его нужно разместить в интернете,
для того чтобы его увидели пользователи глобальной сети.
Этот этап можно разделить на четыре части.
В первую очередь нужно выбрать доменное имя вашего сайта.
Что это такое? Например, google.ru, yandex.ru– это доменные имена. То
есть, это адрес вашего сайта. В соответствующем разделе этой книги
будет дано разъяснение, по каким критериям нужно выбирать домен.
После выбора доменного имени его нужно купить. Цены на домены
различные и зависят от нескольких показателей.
После покупки домена необходимо купить хостинг. Если домен – это
адрес вашего сайта, то хостинг – это непосредственное хранилище всех
файлов вашего сайта.
После покупки хостинга вы получаете от хостера (владельца сервера,
где будут храниться файлы вашего сайта)dns, который нужно будет
прописать в настройках доменного имени.
И, наконец, последний этап – перенести сайт на хостинг. То есть,
загрузить файлы вашего сайта на сервер хостера, чтобы его увидели
пользователи глобальной сети.
MyRusakov.ru
11
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
В разделе этой книги, посвященном размещению сайта в интернете,
будут подробно описаны все четыре этапа.
MyRusakov.ru
12
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Дизайн сайта
В этой главе мы более подробно разберем, как создать дизайн вашего
сайта. Как вы помните, при создании дизайна сайта есть три варианта.
Если вы решили заняться дизайном своего сайта самостоятельно, то
вам необходима программа AdobePhotoshop. В этой программе
работают почти все дизайнеры.
Чтобы скачать и установить ее на ваш компьютер вам нужно зайти на
официальный сайт компании Adobe и загрузить пробную версию
программы. Она стабильно работает и обладает всеми функциями
платной версии.
Если вы решили заказать дизайн вашего сайта у специалиста, то можете
зайти на сайт https://www.fl.ru/ или http://freelance.ru/. Интерфейс этих
сайтов несложный. Как разместить задание на этих сайтах, описано
довольно подробно. Составьте подробное техзадание дизайнеру. Чем
более конкретным и полным оно будет, тем лучше будет результат.
Вариант бесплатного дизайна мы сейчас разберем боле подробно.
В интернете можно найти много сайтов, где есть готовые шаблоны.
Примером такого сайта может служить сайт http://www.internettechnologies.ru/templates/.
Посетив этот сайт,вы можете выбрать рубрику, соответствующую вашей
теме.
MyRusakov.ru
13
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Вам нужно выбрать один из шаблонов.Из списка материалов,
прилагающихся к этому шаблону, вам нужен только файл PSD.
MyRusakov.ru
14
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Для того чтобы бесплатно скачать нужный шаблон вам придется
зарегистрироваться на сайте. После регистрации скачиваете шаблон,
выбираете файл PSD и открываете его в программе Photoshop.
Универсального дизайна, к сожалению, не существует. И вам в любом
случае придется дорабатывать его под себя. Впрочем, для обучения это
не так важно, а вот для уже реального сайта, а не учебного, лучше всётаки заказать дизайн профессионалам.
MyRusakov.ru
15
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Верстка сайта
В этом разделе мы подробно рассмотрим следующий этап создания
вашего сайта – верстку страниц. Это самый трудоемкий и длительный
этап, если не считать движок, который требуется далеко не каждому
сайту.
Прежде чем приступить к верстке вам потребуется набор инструментов,
то есть программ, с помощью которых вы будете делать верстку.
Подготовка к верстке
Вам
потребуются
такие
программы
как
сервер
Apache,
PHP
интерпретатор, MySQL и т.д. Все эти программы можно скачать одним
пакетом. На сайте http://www.denwer.ru/base.html вы сможете найти
один из лучших таких пакетов.
MyRusakov.ru
16
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Прочитайте внимательно все особенности установки пакета, скачайте и
установите его на свой компьютер. Обычно проблем с этим
программным пакетом не возникает. Если же все-таки проблема
возникла,
то
вы
можете
перейти
на
страницу
с
адресом
http://support.myrusakov.ru/article?id=5и прочитать статью, в которой
описаны все проблемы, возникающие при установке пакета, и пути их
решения.
MyRusakov.ru
17
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Бывают такие случаи, когда пакет невозможно установить или он
устанавливается, но не работает.
Тогда воспользуйтесь другим пакетом, который вы можете найти по
адресу http://open-server.ru/.
Пользователи очень хорошо отзываются о нем.
MyRusakov.ru
18
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
На этом сайте так же внимательно прочитайте инструкцию, скачайте и
установите пакет.
Для верстки страниц вашего сайта он вам не потребуется. Этот пакет
потребуется вам на будущее, когда на этой платформе вы будете
создавать любые сайты с использованием скриптов на PHP(скриптовый
язык программирования) или без них. Поэтому лучше установить его
сразу.
Вам также потребуется программа Notepad++, в которой вы будете
писать код HTML, CSS,PHPи любой другой код. Это программа очень
проста и имеет хорошие функциональные возможности. Найти ее
можно на странице http://notepad-plus-plus.org/download/v6.5.1.html.
MyRusakov.ru
19
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Скачайте наиболее свежую версию и установите на ваш компьютер.
В этой программе, можно сказать,
будет находиться кухня, где
создается ваше блюдо, ваш сайт.
После установки пакета Денвер и программы Notepad++, необходимо
создать виртуальный хост. В этой книге будет описано создание
виртуального хоста в Денвере. В пакете OpenServerон создается иначе.
Итак, вы заходите на диск вашего компьютера, где установлен пакет
Денвер, и находите папкуhome.
MyRusakov.ru
20
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Заходите в эту папку и в ней создаете новый виртуальный хост, а
именно папку, которую называете, например, mysite.local.
Внутри этой папки создаете папку www.
MyRusakov.ru
21
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Все – виртуальный хост создан.
Теперь вам нужно перезапустить сервер. Заходите в папку denwerи
находите в ней файл Restart.exe и запускаете его.
MyRusakov.ru
22
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
После его запуска необходимо убедиться, что он работает. Для этого
перейдите по адресу mysite.localи на экране монитора у вас должна
появиться вот такая картинка:
После этого вы должны создать файл .htaccess.
Создается он так.
Вы заходите в программуNotepad++ и в меню «файл» нажимаете
кнопку «Сохранить как…» и сохраняете его в папке www, которую вы
создали. Файл называете «.htaccess»,
MyRusakov.ru
23
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
То есть, имени файла нет, есть только расширение htaccess.
В
поле
программы
Notepad++
пишете
одну
строчку:
AddDefaultCharsetUTF-8.
Эта запись означает, что ваш сайт будет написан в кодировке UTF-8, что
бы все клиенты, которые подключаются к вашему сайту, в частности
браузеры, ставили кодировку UTF-8.
MyRusakov.ru
24
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Следующий этап – это создание файла index.html. Это страница с таким
именем, которая будет открываться по умолчанию. Как правило, она
называется index.html или index.php.
Вы опять заходите в меню «файл», нажимаете кнопку «Сохранить как…»
и сохраняете его в папке www. Файл называете «index.html».
Для проверки, что вы все сделали правильно, можно обновить
страницу. Перед вами откроется белый пустой экран. Это говорит о том,
что все работает. Теперь в этом файле вы можете писать все что угодно.
Все это будет выводиться.
HTML-код начинается с DOCTYPE. Это выражение характеризует, в какой
версии HTML илиXHTMLнаписан данный документ. В этой книге будет
использоваться версияHTML5. Это самая свежая версия этого языка.
Дальше вы должны записать несколько тегов. Это все основные теги,
которые нужно писать на любом сайте, на любой странице.
MyRusakov.ru
25
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Тег говорит о том, что дальше идетHTML код.
Тег содержит различные служебные теги, например, заголовок
страницы,
кодировка
страницы,
описание,
ключевые
слова,
подключение всяких скриптов, файлов стилей и так далее.
В находится само тело страницы. То есть все, что вы видите на
странице.
Последним идет закрывающий тег .
В область тега вписывается заголовок страницы , то есть то,
что будет отображаться вместо http://mysite.local/.
При записи конкретного заголовка внутри этого тега, после обновления
страницы с помощью кнопки F5, заголовок появляется на вкладке. На
страницах этой книги мы будем использовать заголовок «Шиномонтаж
GOahead».
F5
MyRusakov.ru
26
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Далее прописывается метатег с атрибутом http-equiv, значение
которого Content-Type.Далееcontent, тип содержимого идет как
текстовый, формат html и charset=utf-8 (кодировка utf-8). Эту строку вы
будете копировать от сайта к сайту. Выглядит она так:
Далее идут теги «описание страницы» и «ключевые слова».
Эти теги относятся к оптимизации сайта под поисковые системы, а не к
его созданию. Сейчас они будут пустыми. Но лучше их прописать, что
бы в дальнейшем их заполнил оптимизатор сайта или вы сами, если
будете раскручивать свой сайт.
Дальше нужно указать путь к CSS файлу, т.е. к тому файлу, который
будет отвечать за стили. Вы указываетев теге linkатрибут type со
MyRusakov.ru
27
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
значением text и css. Указываете, что это таблица стилей, и указываете
путь: что в папке styles содержится файл main.css.
Эту папку нужно создать. Для этого заходите в папку «www» и в ней
создаете папку «styles». Затем в ней создайте с помощью программы
Notepad++ файл main.css, так же как вы создавали файлы «.htaccess»
и«index.html».
Далее внутри папки «www»создайте папку «images». В ней будут
храниться изображения вашего сайта.
В
программе
Notepad++
обязательно
зайдите
во
вкладку
«Опции/Настройки» и радио-кнопку переключите в положение, как
показано на скриншоте:
MyRusakov.ru
28
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Это нужно для того, чтобы в дальнейшем избежать проблем с
кодировкой на сайте, а если точнее, то эта опция все новые документы
будет кодировать в UTF-8, которую мы и используем.
Проблемы с кодировкой довольно частое явление. Если они у вас
возникнут, вы можете зайти на страницу http://myrusakov.ru/phpencoding-problems.html, где размещена статья, описывающая причины
проблем с кодировкой на сайтах и пути их решения.
Итак, в этом разделе вы сделали подготовку к верстке вашего
сайта.Установили весь необходимый софт, а именно Денвер, либо
OpenServer, установили Notepad++ для создания кода. Создали
виртуальный хост.Написали DOCTYPE, написали основные HTML-теги,
написали заголовок, подключили таблицу стилей, которой еще пока
нет, хотя вы уже создали файл main.css.
На этом этап подготовки к верстке завершен.
MyRusakov.ru
29
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Нарезка макета
В этом разделе будет дано описание, как нарезать макетна
определенные картинки, изображения, которые вы потом будете
вставлять к себе на страницу.
Допустим, вы выбрали бесплатный вариант создания дизайна вашего
сайта. Скачали шаблон и загрузили файл PSDв программу Photoshop.
Давайте рассмотрим такую картинку в качестве примера.
Дело в том, что различные изображения и фон нельзя сделать на CSS и
HTML. Поэтому эти объекты вам придется вырезать. В этом примере к
таким объектам относятся блок с колесом и текстом около него, иконка
возле слова «Новости» и желто-оранжевый фон. Начните с самого
крупного объекта – фона.
MyRusakov.ru
30
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Для этого нажмите на правой панели программы кнопку «Слои» и в
выпадающем меню отключите все изображения кроме «Фон». А потом
нажмите на левой панели кнопку с изображением ножа и выберете
инструмент «Раскройка».
Инструментом «Раскройка» выделяете весь фон. Нажимаете на кнопку
«Файл» и в выпадающем меню кликаете «Сохранить для Web…».
MyRusakov.ru
31
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
После этого появится окно, в котором вам нужно выбрать формат PNG24. Этот формат дает наиболее качественное изображение.
Нажимаете кнопку «Сохранить». Открываете ту папку, в которую вы
сохраняете эти картинки. Эту картинку нужно переименовать в bg.png
(background).
Теперь перейдем к следующему крупному объекту – шапке сайта. Для
того чтобы ее вырезать отключите фон в выпадающем меню «Слои».
Выберите инструмент «Раскройка». Нажмите клавишу «Delete», чтобы
удалить старую раскройку и выделите инструментом блок шапки. При
выделении постарайтесь, чтобы на картинке не осталось ничего
лишнего и в тоже время какие-нибудь элементы не были обрезаны.
MyRusakov.ru
32
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Опять нажимаете на кнопку «Файл» и в выпадающем меню кликаете
«Сохранить для Web…». Снова выбираете PNG-24 и нажимаете
«Сохранить».
Заходите
в
папку
сохраненных
рисунков
и
переименовываете картинку в logo.png.
При создании сайтов использование латинского шрифта имеет
принципиальное значение. Это связано с кодировкой. Поэтому при
названии файлов вы можете использовать только латинский алфавит,
точку, тире и черту подчеркивания. Другие буквы и знаки недопустимы.
MyRusakov.ru
33
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Далее нужно вырезать иконку возле слова «Новости». Для более
точного выделения воспользуйтесь увеличением области в Photoshop.
Последовательность действий такая же, как описано выше.
Переименуйте картинку в new_icon.png.
Теперь выделите все три картинки и перенесите их в папку
imagesвашего сайта.
MyRusakov.ru
34
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Добавление фона и favicon
В этом разделе вы научитесь устанавливать favicon и фон на ваш сайт.
Что такоеfavicon? Favicon – это такое маленькое изображение, которое
отображается около названия сайта. В разных браузерах оно
отображается по-разному. Примеры favicon показаны на скриншоте.
MyRusakov.ru
35
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Вам нужно найти и загрузить favicon на ваш сайт. Для этого можно
использовать сайт https://www.iconfinder.com/. На этом сайте вам
нужно найти изображение, которое соответствует вашему сайту. Это
изображение должно иметь формат .ico. Изображения могут быть двух
размеров: 16×16 либо 32×32. Лучше выбрать размер 16×16.Введите
ключевое слово, которое соответствует тематике вашего сайта.
В этой книге рассматривается построение сайта на тему шиномонтажа.
Поэтому для примера будет введено слово «tire» - шина.
MyRusakov.ru
36
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
После ввода ключевого слова вы попадаете на страницу с библиотекой
иконок, соответствующих ключевому слову. На этой странице вам
нужно настроить размер в 16 пикселей. Выбираете свою иконку с
форматомico.
Кликаете по ней. Попадаете на страницу загрузки и скачиваете.
MyRusakov.ru
37
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Затем заходите в папку, в которой сохраняются ваши загрузки, находите
вашу иконку и переименовываете ее в favicon.ico. Теперь ее нужно
скопировать в папку «www» , т.е. там, где находится файл index.html.
программу Notepad++, где вы до этого записывали данные для вашего
сайта. Конечный результат записи подключения показан на скриншоте.
В записи используется тег link, далее в атрибуте href указывается путь к
этой иконке, в атрибуте relуказываетсяshortcuticon и указывается
атрибут type.
Если вы сейчас обновите страницу,favicon не появится. Это связано с
тем, что информация о таких вещах как favicon обновляется достаточно
редко. Для того чтобы проверить, что вы все сделали правильно
MyRusakov.ru
39
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
откройте ваш сайт в браузере, в котором вы его еще не открывали и
favicon появится.На этом установка favicon закончена.
Теперь вы можете вывести фон вашего сайта.
Для того чтобы вывести фон на страницу вашего сайта нужно зайти в
папку «stiles» и кликнуть по файлу main.css. Это переведет вас в
программу Notepad++. В поле программы вы указываете для селектора
body, т.е. для всей страницы в целом,свойствоbackground. Далее его
значение - url,в котором указываете путь к вашему фону bg.png
(../images/bg.png–где ../ - это родительская директория, ведьmain.css
лежит не внутри www, а на уровень ниже), и пишете«no-repeat», что
говорит о том, что его повторять не нужно ни по вертикали, ни по
горизонтали. Конечное выражение будет выглядеть таким образом:
После этого можно сразу посмотреть на результат.
MyRusakov.ru
40
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Как видите, фон полностью не заполняет вашу страницу. Такое же
белое поле будет внизу. Как это исправить?
Необходимо внести дополнение в файл main.css. То есть, в выражение
добавляется строка:
Когда вы обновите страницу, то увидите, что фон растянут.
Эта строка показываетзначение свойстваbackground-size - cover.
На этом установка фона на страницу вашего сайта завершена.
MyRusakov.ru
41
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Вывод логотипа
В этом разделе вы сделаете вывод логотипа вашего сайта на страницу.
Существует два типа верстки – фиксированная и резиновая.
Фиксированная верстка сайта отличается среди других видов HTMLверстки четко определенными размерами элементов. То есть,
элементы веб-страницы имеют фиксированные размеры в пикселях.
Основным преимуществом фиксированной верстки является тот факт,
что HTML-кодерлегко подгонит дизайн шаблона до пикселя, используя
стили.
Главным недостатком фиксированной верстки является,как раз таки,
фиксированные размеры шаблона. При просмотре веб-страницы сайта
с шириной шаблона 1000 px, на мониторе с разрешением в 1400px (по
ширине), по бокам страницы остается свободное пространство в
200px.А при просмотре html-страницы на мониторе с разрешением в
900px (по ширине), часть страницы будет за кадром монитора, снизу
появится скролбар (полоса прокрутки), что не очень удобно для
пользователей.
Резиновая верстка сайта отличается от фиксированной верстки
относительными размерами элементов веб-страницы (процентное
отношение), все элементы соответственно имеют относительные
размеры, в зависимости от размеров своих родительских элементов.
MyRusakov.ru
42
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Соответственно блок, имея ширину 80% от своего родительского
элемента, который может иметь ширину как 10px так и 100000px. И от
ширины родительского блока вычисляется 80%. В свою очередь
родительский блок так же может иметь относительный размер. И, в
конечном итоге, всё определяется шириной окна браузера.
В отличие от фиксированной верстки, резиновая верстка позволяет
адаптировать шаблон под любой тип и разрешение монитора, выводя
элементы страницы в процентном отношении к монитору. Отчего и
появилось ее название «резиновая верстка».
Недостатком резиновой верстки, как правило, является нестабильность
дизайна сайта, который также меняется в зависимости от разрешения
монитора, и относительная сложность самой верстки. Хотя можно
адаптировать дизайн шаблона сугубо под резиновую верстку.
В этой книге будет рассматриваться фиксированная верстка, как более
простой вариант для начинающих.
В программе Notepad++ вы должны создать родительский контейнер.
Выражение имеет вид: блок div родительский, атрибут id,который вам
потребуется для задания стилей css для данного блока. Потом внутри
MyRusakov.ru
43
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
него вы выводителоготип вашего сайта через тег img иуказываете
атрибут alt, который может иметь произвольное значение.
Результат выражения вы можете увидеть, открыв страницу вашего
сайта. Вот как это выглядит на примере:
MyRusakov.ru
44
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Как видите, логотип разместился в углу. Ваша задача переместить его в
середину. Так же нужно убрать имеющиеся отступы.
Они появляются потому,что тег body имеет свои какие-то заранее уже
заготовленные отступы и поля. Поэтому, чтобы их не было, нужно их
сразу обнулить.
Выражение обнуления полей имеет такой вид:
Обновите страницу. Теперь никаких полей нет.
MyRusakov.ru
45
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Теперь можно приступать к контейнеру.
Продолжаем работать в Notepad++. Записываем выражение такого
вида:
MyRusakov.ru
46
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Это выражение можно расшифровать так:
Первая строка: значок # - селекторid, container – его название
Вторая строка: свойство margin, через которое вы выставите
логотип по центру; 0 – означает, что отступы сверху и снизу нулевые;
«авто» - слева и справа автоматическое выравнивание
Третья строка: размер контейнера – 717 рх
Размер контейнера можно найти в папке images, где расположена
картинка вашего логотипа:
Обновив страницу вашего сайта, вы увидите результат вашей записи.
MyRusakov.ru
47
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Итак, в этом разделе вы вывели логотип вашего сайта и создали
родительский контейнер для всех элементов, которые вы будете
использовать для верхнего меню, для блока новостей, и для всего
остального.
Верстка верхнего меню
В этом разделе будет дано описание вывода верхнего меню вашего
сайта.
Обратите внимание, что при наведении курсора на какой либо пункт
меню вокруг него появляется серый прямоугольник
(активная
составляющая ссылки или hover-составляющая). Это тоже нужно будет
прописать в CSS.
MyRusakov.ru
48
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
В программе Notepad++, в файле «index.html», создаете новый блок. Он
должен
находиться
выше
блока
логотипа,
потому
что
меню
расположено выше логотипа.
Меню можно создавать разными путями. В этой книге будет описан
способ создания меню с помощью таблицы. Этот способ наиболее
прост и легко объясним.
Таблица будет иметь одну строку и пять столбцов, то есть, по
количеству разделов меню.
Блок выражений вывода меню будет выглядеть так:
MyRusakov.ru
49
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Теперь разберем, что означают эти строки.
В первой строке прописывается название нового блока: topmenu.
В следующей строке прописывается тег table, который говорит о том,
что создается таблица.
Далее выражением открываем строку таблицы меню и создаем в
ней пять ячеек. Выражения открывают и закрывают ячейки.
Между ними прописывается содержимое ячеек.
Содержимое ячеек расшифровывается так:
- тег, отвечающий за вывод ссылок.
href – ссылка на адрес страницы
MyRusakov.ru
50
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
«index.html», «about.html», «services.html», «contact.html» и
«feedback.html» - адреса страниц
«Главная», «О нас», «Услуги», «Контакты», «Записаться» -
название страниц, которые будут видны пользователю (т.н. анкор
ссылки).
следующие строки сообщают о том, что закрывается строка
таблицы (), таблица () и блок ()
Блок меню прописан.
Открываете ваш сайт. Нажимаете кнопку клавиатуры F5 для обновления
страницы и смотрите на результат:
MyRusakov.ru
51
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
На этом верстка верхнего меню закончена. Точнее не верстка, а HTMLструктура. Но, как видите, ваше меню не соответствует стилю меню,
взятого примера.Для того чтобы привести ваше меню в соответствие с
меню в примере, вам нужно перейти в программе Notepad++ в файл
main.css.
Прежде всего, давайте разберем, как назначить шрифт, который будет
использоваться в меню и вообще в тексте вашего сайта.
На сайте, который взят в качестве примера, тексты написаны шрифтом
Verdana.
Поэтому переходите в файл main.cssи пропишите этот шрифт. У
некоторых пользователей в операционной системе могут быть разные
наборы шрифтов. И тогда текст вашего сайта не будет у них
отображаться. Поэтому желательно добавить к вашему шрифту еще
MyRusakov.ru
52
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
несколько, наиболее часто используемых. К таким шрифтам относятся
ArialиTimesNewRoman.
Конечный результат выражения выглядит так:
Свойство font-family указывает список шрифтов, используемых на
вашем сайте. Если название шрифта состоит из нескольких слов с
пробелами нужно его заключать в кавычки.
Свойство font-size указывает размер используемого шрифта (могут быть
pt – пункты, px – пиксели, % и em – относительные размеры).
Далее нужно прописать цвет и стиль шрифта. Для этого переходите в
программу Photoshop, выбираете инструмент «Пипетка» и кликаете им
по какой либо букве меню. Затем кликаете по иконке «Выбор цвета».
Появляется окно «Палитра цветов». Из него нужно скопировать
шестнадцатеричный код цвета шрифта вашего сайта.
MyRusakov.ru
53
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Переходите в файл main.css и делаете запись. Конечное выражение
будет выглядеть так:
MyRusakov.ru
54
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Первая строка этого выражения означает, что описывается стиль и цвет
ссылкименю (#topmenua – для всех тегов , находящихся внутри
элемента с id="topmenu"). Во второй строке указан шестнадцатеричный
код цвета шрифта, который вы скопировали из программы Photoshop
(color: #2e2e2e). В третьей строке указан стиль шрифта – полужирный
(font-weight: bold).
Обновив страницу вашего сайта, вы можете увидеть результат:
Как видите, в вашем меню есть еще отличия от взятого примера – это
подчеркивание текста и расстояние между словами. Для того, чтобы
исправить это, нужно дополнить предыдущее выражение.
Окончательное выражение будет выглядеть так:
MyRusakov.ru
55
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Расстояние между ссылками можно отрегулировать свойством margin: 0
10 рх. Что означает, что сверху и снизу у вас будет 0 рх отступа, а справа
и слева 10 рх. Подчеркивание можно убрать, сделав запись -textdecoration: none.То есть, декорирования текста нет.
Обновив страницу, вы можете увидеть результат:
MyRusakov.ru
56
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Как видите, увеличились промежутки между ссылками и исчезло
подчеркивание.
Теперь можно заняться введением активной составляющей, которая
определяет стиль данного элемента, когда на него наводят курсор
мыши.
Это делается через псевдоэлемент hover. Тут вы указываете те стили,
которые у вас будут появляться при наведении курсора мыши. Вам
нужно у этого элемента, у этой ссылки изменить background-color, то
есть цвет фона.
Конечное выражение будет выглядеть так:
MyRusakov.ru
57
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Цвет фона определяется также, как и цвет шрифта. То есть, в
программеPhotoshopинструментом «Пипетка»
кликаете
по фону,
возникающему вокруг ссылки меню при наведении курсора, и из окна
«Палитра цветов» копируете шестнадцатеричный код цвета фона.
Результат записи выражения на странице сайта выглядит так:
Как вы видите, фон вокруг надписи появился, но расположен почти
впритык. Поэтому вам нужно задать отступы, а, вернее сказать, поля.
Задаются они свойством padding. Его нужно ввести в блок #topmenua.
Выражение будет таким:
MyRusakov.ru
58
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Указанные размеры полей 10px и 5рх ориентировочные. В каждом
конкретном случае эти показатели нужно подбирать.
Обновите страницу и посмотрите на результат записи выражения:
MyRusakov.ru
59
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Как видно на скриншоте изменения фона есть, но они недостаточны.
Теперь нужно добавить отступ сверху и снизу. Для этого нужно создать
еще один селектор в CSS- #topmenu со свойством margin.
Значения свойство margin показывают, что размеры отступов:
сверху – 20рх
слева и справа – 0
снизу – 10рх
Обновляете страницу и смотрите результат:
MyRusakov.ru
60
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Теперь ваше меню полностью соответствует изображению на примере.
MyRusakov.ru
61
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
Михаил Русаков
Верстка блока новостей
В этом разделе вы сделаете вывод блока новостей на свой сайт.
Для начала давайте посмотрим на пример. На нем блок новостей
состоит из двух частей:правый блок и левый блок.
Поэтому
при
записи
выражений,
выводящих
блок
новостей,
необходимо показать и сам блок, и его составные части. В
файлеindex.html это будет выглядеть так:
MyRusakov.ru
62
Михаил Русаков
СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА
В этой записи первая строка описывает большой блок(
