Как создать сайт

Этапы создания сайта

 

Для того, чтобы создать сайт самому, необходимо выполнить 3 этапа работ:

 

  • Создание шаблона сайта. Именно здесь необходимо определить, как сайт будет выглядеть.
  • Верстка сайта. Наполняем сайт контентом и заставляем все это работать.
  • Внедрение PHP. Делаем сайт динамичным.

 

Создание сайтов

 

Как правило, этот этап работ выполняется в достаточно мощном графическом редакторе, например, Adobe Photoshop или CorelDRAW. Photoshop несколько проще в освоении и использовании, а его возможности очень велики. Именно поэтому среди веб-дизайнеров Photoshop пользуется вполне заслуженной популярностью. Воспользуемся им и мы.

 

Создаем в Adobe Photoshop новый документ. Задаем имя – MySite.

 

Выбираем разрешение 1000 х 1000, это гарантирует корректное отображение у любого пользователя, размер по вертикали потом сможем увеличить. Выбираем разрешение 72 пикселя на дюйм и RGB-цвет. Эти установки делаем обязательно, именно они отвечают за корректное отображение веб-страницы.

 

Устанавливаем цвет фона F7F7C5 в шестнадцатеричном виде или выбираем с помощью палитры цветов.

 

Выбрав пункт меню «Просмотр» – «Направляющие» активируем отображение линеек и направляющих.

 

В пункте меню «Просмотр» — «Привязка к» не забываем убедиться, что включена привязка к направляющим и границам документа.

 

Создаем в Фотошопе новый документ

 

Используя инструмент «Текст», пишем текстовое название будущего сайта, слоган под ним, а также контактный телефон справа в верху макета.

 

Создаем шапку макета сайта

 

Слева от логотипа, как и справа от контактного телефона, проводим направляющие, которые позволят обозначить рамки по ширине сайта.

 

Затем с помощью инструмента «Формы» выбираем прямоугольник с закруглёнными краями (радиус – 8 точек), и с его помощью обозначаем место под изображение в шапке сайта:

 

Создаем основной визуальный блок

 

Далее вставляем изображение в шапку сайта. Подходящее изображение вы можете найти на любом из сервисов, предлагающих загрузку изображений.

 

Вставка изображения в основной блок

 

В помощью инструмента «Текст», и шрифта Georgia, входящего в стандартный набор MS Windows, создаем навигационное меню и заголовок главной страницы сайта.

 

Также, используя инструмент «Текст» и шрифт «Arial», добавляем текст главной страницы, здесь рекомендуем использовать блочный текст для последующей работы с ним.

 

Для заголовка и шрифтов в тексте используем черный шрифт. Для навигационного меню – белый.

 

Вставка текста на страницу

 

Перемещая правую границу основного текстового блока, вставляем изображение в тексте страницы (справа от текста).

 

Используя инструмент «Формы» — «Прямая», проводим заключительную линию под текстом страницы.

 

Под линией с помощью инструмента «Текст» (шрифт Arial) размещаем копирайт в подвале страницы.

 

Нарезаем нужные нам фрагменты изображений для вёрстки сайта с помощью инструмента «Раскройка» (мы выделили основную картинку в шапке и картинку в тексте страницы).

 

Нарезаем нужные нам фрагменты изображений для вёрстки сайта

 

В результате проделанных работ получаем эскиз сайта, который представлен в начале страницы. Однако, если вы решите внести собственные изменения в макет страницы, то PSD-файл вы также найдёте в архиве к странице.

 

Для сохранения результатов работы в виде изображений для вёрстки сайта переходим в меню «Файл» выбираем «Сохранить для Веб». Далее настраиваем качество изображений и сохраняем, в результате получаем множество графических фрагментов нашего шаблона. В папке, куда был сохранен сам шаблон, появилась папка images с изображениями. Отбираем нужные и переименовываем.