Как создать сайт с нуля?
Дизайн сайта. Создание макета
Весь процесс создания сайта состоит из отдельных шагов. Начинается создание сайта с определения его структуры. При этом необходимо выделить основные страницы сайта и определить для каждой из них внешний вид. Для этого создаётся макет страницы. Он представляет собой картинку, которая показывает, что должно получиться в итоге, то есть как будет выглядеть сайт в браузере.
Наличие готового макета значительно упрощает процесс создания сайта. Создать все функциональные блоки, имеющиеся в макете, и расположить их на странице не должно вызвать затруднений. А вот создание дизайна на лету
(добавление новых элементов в готовую страницу) неизбежно приведёт к значительным изменениям уже готовых элементов страницы, что является ненужной потерей времени.
Ресурсы, затраченные на создание макета, (личное время или деньги на оплату услуг профессионального дизайнера) окупятся при вёрстке сайта. Однако, обязательным условием для этого должно быть тщательное продумывание структуры страницы. В макете как минимум должны быть отражены все основные элементы. Чем серьёзнее подход к дизайну сайта, тем больше эффект в конечном итоге.
Чаще всего макеты создаются в программе Photoshop, но можно использовать абсолютно любые графические редакторы. Иногда может быть достаточно набросать макет от руки.
Если сайту не требуется уникальность, то можно воспользоваться готовыми шаблонами. На просторах интернета можно найти огромное количество шаблонных макетов в формате .psd (формат Photoshop).
Вёрстка сайта
Преобразование графического макета дизайна в текстовый код, понятный веб-браузеру, называется вёрсткой
. Для этого используются специальные языки разметки и стилей.
Разметка страницы
После определения дизайна страницы выполняется её разметка.
Любая веб-страница состоит из отдельных элементов (блоков), отличающихся внешним видом, назначением или содержанием. Каждый блок выполняет определённую функцию. На странице всегда можно выделить верхнюю, центральную и нижнюю части, а также панель навигации и т.п. Блоки наполняются содержимым - это может быть простой текст, картинки, гиперссылки, разного рода таблицы и списки, а также формы (основной элемент для взаимодействия пользователя с сайтом).
Процесс разбиения страницы на отдельные блоки называется разметкой
. Разбиение выполняется с помощью специальных языков разметки (HTML, XML). Содержимое каждого элемента заключается в различные теги в соответствии с назначением элемента. Когда браузер выводит страницу на экран, он на основании указанных тегов выбирает, как отобразить тот или иной элемент.
Оформление страницы
Все браузеры интерпретируют теги одинаково, но одна и та же страница может выглядеть по-разному в различных браузерах. Так происходит, потому что разработчики браузеров имеют свой взгляд на представление элементов (различные шрифты, цвета, отступы и т.п.).
Чтобы страница выглядела во всех браузерах одинаково (кроссбраузерная
вёрстка), оформление элементов страницы выполняется разработчиком сайта самостоятельно. Для этого используются каскадные таблицы стилей (CSS). Кроме того, использование CSS позволяет расположить элементы в заданных местах в соответствии с дизайном страницы.
Средствами CSS можно внести немалую динамичность на страницу (реакцию на действия пользователя) при максимальной простоте использования.
Программирование на стороне клиента
Все браузеры имеют встроенный язык программирования JavaScript (встроенные языки ещё называются клиентскими
). Его использование позволяет создавать динамические страницы любой сложности. Все сложные анимированные элементы страницы (баннеры, слайдеры, галереи) создаются с его помощью.
Управление элементами страницы и браузера осуществляется с помощью встроенных в JavaScript интерфейсов DOM и BOM (DOM - объектная модель документа, BOM - объектная модель браузера). Для взаимодействия сайта с пользователем используется интерфейс событий.
Для упрощения работы со страницей обычно используются сторонние библиотеки JavaScript. Их подключение расширяет возможности языка, сильно сокращая время разработки. Одной из популярных библиотек является jQuery. Она очень обширная и в то же время очень лёгкая для изучения.