Верстка страниц — подготовка

После того как дизайн готов можно переходить к следующему пункту – верстке страниц.
Верстка – это процесс преобразования картинки, которую нарисовали Вы или дизайнер в HTML и CSS код. То есть, картинка преобразуется в Web-страницу, на которую пользователь может зайти, кликнуть по ссылкам или заполнить какую-то форму. Нужно сразу сказать что этот этап долгий и сложный.

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

Вам могут потребоваться такие программы как сервер Apache, PHP интерпретатор, MySQL и т.д. Все эти программы можно скачать одним пакетом. На сайте http://www.denwer.ru/base.html Вы сможете найти один из таких пакетов.

Верстать можно при помощи блокнота Notepadd ++ в ней так же можно работать с кодом HTML, CSS, PHP или же с любым другим кодом. Это программа очень проста и имеет хорошие функциональные возможности. Найти ее можно на странице http://notepad-plus-plus.org/.

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

Так же есть еще хорошая среда, Adobe Muse, есть смысл обратить внимание и в эту сторону.

Но тут мы пойдем по другому пути, более сложному. После того как выбрали нужный пакет, нужно соответсвенно начать установку Денвера.

На сайте Денвера есть все инструкции по установке, однако бывают моменты когда что-то идет не так, и установить не получается или же установилось но не работает, можно попробовать пойти другим путем чтобы не мучаться, можете попробовать пакетом от Open-server, https://ospanel.io.

Для верстки страниц вашего сайта он Вам не потребуется. Этот пакет потребуется Вам на будущее, когда у Вас появяться сайты с использованием скриптов на PHP Поэтому лучше установить его сразу. Часто нужно что-то протестировать, что-то добавить, сразу на рабочем сайте — не лучший вариант, а арендовать место на хостинге только ради этого — не всем под силу, и выбирают такую альтернативу.

После установки пакета Денвер и программы Notepad++, необходимо создать виртуальный хост. В пакете OpenServer он создается иначе.

Итак сам процесс:
Вы заходите на диск вашего компьютера, где установлен пакет Денвер, и находите папку home.

Заходите в эту папку и в ней создаете новый виртуальный хост, а именно папку, которую называете, например, mysite.local

Внутри этой папки создаете папку www.

Вот в принципе и все – виртуальный хост создан.
Теперь Вам нужно перезапустить сервер. Заходите в папку denwer и находите в ней файл Restart.exe и запускаете его.

После его запуска необходимо убедиться, что он работает. Для этого перейдите по адресу mysite.local прямо в браузере и на экране монитора у Вас должна появиться вот это:

После этого вы должны создать файл .htaccess.
Создается он так. Вы заходите в программу Notepad++ и в меню «файл» нажимаете
кнопку «Сохранить как…» и сохраняете его впапке www, которую Вы создали. Файл называете «.htaccess». Здесь нужно отметить что имени файла нет, есть только расширение htaccess.

В поле программы Notepad++ нужно написать одну строчку:
AddDefaultCharsetUTF-8.

Эта запись означает, что ваш сайт будет написан в кодировке UTF-8, что бы все клиенты, которые подключаются к вашему сайту, в частности браузеры, ставили кодировку UTF-8.

Следующий этап – это создание файла index.html. Это страница с таким именем, которая будет открываться по умолчанию. Как правило, она называется index.html или index.php. Нужно сново зайти в меню «файл», и нажать на кнопку «Сохранить как…» и сохраняете его в папке www. Файл называете «index.html». Для проверки, что вы все сделали правильно, можно обновить страницу. Перед Вами откроется белый пустой экран. Это говорит о том, что все работает. Теперь в этом файле Вы можете писать все что угодно. Все это будет выводиться.
HTML-код начинается с DOCTYPE. Это выражение характеризует, в какой версии HTML или XHTML написан данный документ. На данный момент используется в основном и рекомендуется к использованию версия HTML 5.

На этом пока все, в следующей статье уже поговорим о самом процессе и принципе верстки.