Сборник статей рубрики "Как сделать сайт"

На этой странице статьи блога, относящиеся практической работе в области сайтостроения, объединены в один общий раздел в виде сборника, где на реальном примере показано как можно своими руками с нуля сделать самописный сайт.
Отличительной особенностью этого материала является то, что каждый этап создания сайта сопровождается подробным описанием и бесплатным предоставлением исходных файлов. С основными особенностями и функциональными возможностями сайта можно ознакомиться в вводной статье к сборнику.
Таким образом, здесь в свободном доступе всем желающим предоставляется, практически, готовый сайт с подробным описанием его работы.
При этом, данный материал является интеллектуальной собственностью автора, и предназначен только для личного использования зарегистрированными пользователями блога. Какое-либо его тиражирование или продажа третьими лицами, в соответствии Законом об авторском праве, запрещена.
Цикл статей ведется в режиме обновления с периодическим дополнением последующих шагов по созданию сайта. Период обновления новыми статьями составляет одна, две статьи в неделю.
Возможно подписаться на получение уведомлений о выходе новых статей данной рубрики через приведенную ниже форму.
Вводная часть

- Причины создания пошаговой инструкции по разработке самописного сайта
- Тема создаваемого сайта
- В чем будет заключаться монетизация
- Функционал
- Этапы создания
- Текущее состояние создаваемого сайта

- Проверка при малых разрешениях экрана
- Проверка при больших разрешениях экрана
- Проверка на выделенном домене

- Подготовка локального веб-сервера
- Скачивание и распаковка исходных материалов
- Перенос файлов на локальный веб-сервер
- Импорт таблиц MySQL в базу данных текущего хоста

- Подготовка локального веб-сервера
- Скачивание и распаковка исходных материалов
- Перенос файлов в корневой каталог сайта
- Импорт таблиц MySQL в базу данных сервера
Способы создания сайта

- Какими способами разрабатываются сайты
- Как можно сравнить самописные сайты с основанными на CMS
- Быстродействие
- Безопасность
- Функциональность
- Простота создания
- Как выбрать способ создания сайта
Инструменты для создания сайта

- Выбор графического редактора
- Устанавливаем программу GIMP
- Устанавливаем Руководство пользователя

- Выбор текстового редактора
- Устанавливаем текстовый редактор Notepad++

- Зачем нужен локальный веб-сервер
- Устанавливаем программу Denwer
- Как удалить Denwer с компьютера

- Старый добрый Денвер, когда ж ты обновишься
- Open Server - хороший вариант веб-сервера под Windows
- Устанавливаем Open Server
- Первый запуск Open Server
Разработка дизайн-макета

- Какие существуют варианты дизайна
- Дизайн на заказ
- Дизайн на основе платных готовых шаблонов
- Дизайн на основе бесплатных шаблонов
- Самостоятельное выполнение дизайна

- Рисуем эскиз сайта
- Подбираем необходимые элементы
- Выполняем разметку макета

- Создаем новый документ композиции шапки дизайн-макета сайта
- Переносим картинки заготовок

- Создаем основной фон шапки
- Создаем подобие защитной ауры автомобиля
- Создаем луч прожектора, направленного на вора
- Объединяем композицию шапки дизайн-макета с областью меню
- Исходные файлы сайта

- Меню
- Ротатор
- Основное содержание и сайдбар
- Подвал
- Исходные файлы сайта

- Выбор способа создания фавикона
- Установка плагина в Фотошоп
- Дизайн фавикона
- Сохранение на сайте
- Подключение к страницам сайта
- Исходные файлы сайта
Верстка

- Какие существуют виды верстки
- Табличная или блочная
- Фиксированная или резиновая
- Зачем нужна адаптивная верстка
- Семантическая верстка
- Выводы

- Создание виртуального хоста на локальном веб-сервере
- Создание файла веб-страницы с проверкой работы локального веб-сервера
- Составление каркаса HTML-страницы
- Исходные файлы сайта

- Разметка шапки
- Разметка меню шапки
- Разметка футера
- Что такое фавикон и для чего он нужен
- Исходные файлы сайта

- Способы добавления стилей на HTML-страницу
- Подключаем внешнюю каскадную таблицу стилей CSS
- Для чего нужен сброс настроек стилей CSS по-умолчанию
- Делаем сброс свойств стилей по-умолчанию и устанавливаем базовые настройки файла CSS
- Исходные файлы сайта

- Установка параметров резиновой верстки
- Создания файла фонового изображения для шапки сайта
- Формирование области шапки
- Формирование областей контента и футера
- Временное размещение сайта в сети интернет
- Исходные файлы сайта

- Размещение элементов по вертикали
- Формирование отступов элементов по горизонтали
- Назначение свойств шрифта элементов
- Создание теней для текстовых элементов
- Исходные файлы сайта
- Преобразование списка в ячейки таблицы
- Установка ширины меню
- Формирование кнопок меню
- Формирование ссылок меню
- Формирование активной кнопки
- Создание меню футера
- Исходные файлы сайта

- Выбор способа резиновой верстки для блока ротатора
- Разметка блока ротатора
- Выбор способа резиновой верстки блока основного содержания и сайдбара
- Разметка блока основного содержания
- Разметка блока сайдбара
- Исходные файлы сайта

- Назначение размеров и размещение блока ротатора
- Размещение внутренних элементов
- Оформление текстового рекламного блока
- Оформление общего внешнего вида ротатора
- Исходные файлы сайта

- Размещение блоков основного содержания и сайдбара
- Формирование внутренних элементов блока основного содержания
- Оформление текста блока основного содержания
- Оформление элементов сайдбара
- Исходные файлы сайта

- Как сделать объемные кнопки
- Как сделать интерактивные кнопки
- Нужна ли валидация
- Как проверять на валидность HTML-код
- Как проверять на валидность CSS-код
- Исходные файлы сайта

- Создаем HTML-структуру выпадающего меню
- Трансформируем вложенный список в выпадающее меню
- Оформляем элементы созданной системы навигации
- Исходные файлы сайта
Создание динамического сайта

- Зачем нужен динамический сайт
- Как преобразовать статический сайт в динамический
- Формируем блоки динамического сайта
- Преобразуем веб-страницу из статической в динамическую
- Исходные файлы сайта

- Создаем файлы новых динамических веб-страниц
- Создаем файлы основного содержания
- Создаем объявления о не завершенном оформлении новых страниц
- Исходные файлы сайта
- Создаем функцию вывода всех строк заданной таблицы
- Формируем и подключаем файл start.php
- Формируем файлы главного меню и меню футера
- Проверка работы сайта при динамически формируемом меню
- Исходные файлы сайта

- Суть выполняемых преобразований
- Дополняем таблицу MySQL дополнительными данными
- Преобразуем URL используя GET-параметры
- Составляем скрипт получения данных из БД MySQL
- Преобразуем шаблон главной страницы
- Удаляем все освободившиеся файлы
- Проверяем результаты преобразования
- Исходные файлы сайта
Размещение в интернете

- Определяем условия выбора доменного имени
- Выбираем доменное имя
- Регистрируем домен

- Способы переноса файлов на хостинг
- Устанавливаем FTP клиент FileZilla
- Подключаемся к удаленному серверу
- Переносим файлы сайта на хостинг
- Проверяем работу сайта
- Исходные файлы сайта
Адаптация под мобильные

- Как имитировать просмотр сайта с мобильного устройства на обычном компьютере
- Составляем адаптивный макет (прототип)
- Определяем контрольные точки в медиа-запросах
- Определяем способ адаптация
- Изменяем масштабирование веб-страниц
- Исходные файлы сайта

- Принцип описания медиа-запросов методом Cначала мобильные
- Формируем медиа-запросы для минимального разрешения
- Назначаем стилевые свойства для разных разрешений в установленном диапазоне
- Исходные файлы сайта
- Добавляем в разметку элементы дополнительной кнопки для вызова меню
- Оформляем с помощью стилей CSS внешний вид выпадающего меню
- Составляем скрипт для управления выпадающим меню
- Создаем дополнительный элемент навигации Хлебные крошки
- Исходные файлы сайта
Работа с БД MySQL

- Зачем нужна база данных
- Что из себя представляет база данных MySQL
- Создаем базу данных на локальном веб-сервере Denwer
- Создаем базу данных на хостинге

- Общие вопросы по подключению к БД
- Отличие в подключении к БД на локальном веб-сервере и на хостинге
- Подключение к базе данных с использованием процедурного интерфейса
- Подключение к базе данных объектно-ориентированным стилем
- Исходные файлы сайта

- Определение основных параметров создаваемой таблицы
- Создание таблицы с помощью интерфейса phpMyAdmin
- Создание таблицы с помощью SQL-запросов
- Создание таблицы MySQL в PHP
- Исходные файлы сайта

- Ввод данных в таблицу с помощью интерфейса phpMyAdmin
- Создание копии таблицы MySQL на локальном веб-сервера
- Импорт таблицы MySQL в БД хостинга
- Исходные файлы сайта

- Формирование SQL-запроса
- Выполнение SQL-запроса в phpMyAdmin
- Исходные файлы сайта

- Записываем данные одной строки в таблицу MySQL
- Составляем PHP-скрипт для записи всех строк таблицы
- Составляем отдельную функцию записи данных в таблицу url_php
- Исходные файлы сайта

- Выборка одиночной уникальной строки с заданным условием
- Получение набора нескольких строк с сортировкой по заданному полю

- Вывод одиночной строки (использование одномерного массива)
- Вывод набора строк по заданному условию (использование двумерного массива)
- Проверка наличия записи в таблице
- Исходные файлы сайта

- Вариант с использованием SQL-функции count()
- Вариант с использованием PHP-функции count()
- Вариант с использованием PHP-функции mysqli_num_rows
- Исходные файлы сайта
URL для людей

- Отличие ЧПУ от обычных динамических ссылок
- Суть выполняемых преобразований
- Заменяем обычные динамические ссылки на статические ЧПУ
- Перенаправляем запросы с ЧПУ на главную страницу сайта
- Формируем динамические страницы из входящих статических ЧПУ
- Проверка работы сайта с ЧПУ
- Исходные файлы сайта

- Создаем новые записи значений GET-параметров таблицы MySQL
- Используя GET-параметры преобразуем обычные динамические ссылки в ЧПУ
- Исходные файлы сайта

- Составляем шаблоны правила RewriteRule модуля MOD_REWRITE
- Формируем динамические ссылки используя подстановку в RewriteRule
- Вносим необходимые дополнения в файл .htaccess
- Проверяем выполненные преобразования
- Исходные файлы сайта

- Помещаем полученные GET-параметры в одномерный числовой массив
- Получаем конечный элемент входящего ЧПУ в цикле обработки GET-параметров
- Формируем динамические страницы из текущего URL
- Дополняем цепочку навигации Хлебные крошки
- Исходные файлы сайта

- Добавляем расширение .html в шаблон правила RewriteRule MOD_REWRITE
- Формируем ссылки с .html
- Проверка работы сайта с расширением .html в URL
- Исходные файлы сайта
Оформление контента

- Необходимость оформления контента сайта
- Правила оформления контента
- Подготовка к оформлению
- Создание файлов для основного содержания веб-страниц и размещение их в соответствии со структурой сайта
- Дополнение шаблона для избирательного вывода основного содержания веб-страниц
- Размещение оформляемого текста в режиме вывода контента из файла
- Исходные файлы сайта

- Оформляем заголовок статьи
- Структурируем текст по содержанию
- Формируем оглавление (содержание) используя HTML якоря
- Формируем подзаголовки
- Выделяем разделы статьи
- Исходные файлы сайта

- Формируем стандартные нумерованные списки
- Оформляем нумерованные списки с помощью автоматического счета и нумерации
- Формируем стандартные маркированные списки
- Стилизуем маркированные списки с использованием спецсимволов
- Исходные файлы сайта

- Формируем блоки div для возможных вариантов размещения картинок
- Размещаем картинки в HTML-странице
- Задаем параметры картинок с помощью стилей CSS
- Исходные файлы сайта

- Получаем с YouTube нужный видеоролик
- Вставляем HTML-код видео в оформляемую страницу
- Встраиваем видеоплеер YouTube с помощью стилей CSS
- Исходные файлы сайта

- Скачивание слайдера
- Создание и скачивание сопутствующих файлов
- Подключение файлов к HTML-страницам
- Размещение слайдера на сайте
- Настройка работы слайдера
- Исходные файлы сайта
Работа с изображениями

- Способы формирования изображения для сайта
- Поиск по фотостокам (фотобанкам)
- Использование сервиса Гугл поиск по картинкам с применением фильтра
- Использование кадров из фильмов и видеороликов
- Исходные файлы сайта

- Проверка на уникальность с помощью специальных программ
- Проверка на уникальность с использованием сервисов Картинки Яндекс и Google Images
- Исходные файлы сайта

- Отражение по горизонтали
- Поворот на определенный градус
- Искажение пропорций
- Произвольная деформация
- Перемещение фрагментов изображения
- Исходные файлы сайта

- Зачем нужно оптимизировать размер изображений
- Определяем ширину графических элементов, размещаемых на сайте
- Оптимизируем размер картинок в графическом редакторе
- Исходные файлы сайта

- Почему необходимо сжимать изображения
- Сжатие в формате JPEG
- Сжатие в формате PNG
- Исходные файлы сайта

- Определяем названия изображений
- Формируем ЧПУ наименований файлов
- Формируем атрибуты alt
- Формируем атрибуты title
- Исходные файлы сайта
Поиск по сайту

- Что такое Яндекс.Вебмастер и для чего он нужен
- Добавляем сайт в Яндекс.Вебмастер и подтверждаем права на его управление
- Проверяем настройки и информацию о сайте

- Подготовка к созданию поиска
- Определение области поиска
- Настройка внешнего вида поисковой формы
- Настройка результатов
- Проверка настроенного поиска
- Получение кода для вставки на сайт

- Размещаем HTML-код формы поиска
- С помощью стилей CSS формируем внешний вид формы поиска
- Исходные файлы сайта

- Определяем динамически измененный HTML-код
- Определяем измененные CSS-свойства для элементов формы
- Дополняем CSS-код в соответствии с измененной формой поиска
- Дополняем медиазапросы для установки размера шрифта
- Исходные файлы сайта

- Проверяем фактические настройки HTTP-заголовков механизма кэширования
- Проверяем отображение страницы при изменении файла main.css до преобразований
- Суть способа автоматического обновления кэша браузера
- Выполняем преобразование имени файла main.css
- Проверяем обновление кэша браузера измененного файла main.css после преобразований
- Исходные файлы сайта

- Добавляем динамически формируемую страницу результатов поиска
- Вставляем HTML-код результатов поиска
- Оформляем страницу поиска под дизайн сайта с помощью CSS
- Исходные файлы сайта
Работа с формами HTML

- В общем о формах HTML
- форма онлайн заказа
- форма регистрации
- Форма авторизации
- форма обратной связи

- Формируем поля ввода данных об автомобиле
- Создаем для элементов формы таблицы БД MySQL
- С помощью PHP формируем списки полей Марка автомобиля и Страховая компания
- С помощью скрипта JavaScript формируем список поля Год выпуска
- Формируем поля выбора заказа и определения цены
- Применяем скрипт JavaScript для установки значений в полях Цена сервис-центра и Цена со скидкой
- Исходные файлы сайта

- Добавляем в форму дополнительные HTML-элементы
- Оформляем внешний вид полей формы
- Формируем размер и отступы полей для минимального разрешения экрана 320px
- Формируем по 2 элемента в ряду при увеличении разрешения
- Увеличиваем количество элементов в ряду до 3-х при значительном увеличении ширины экрана
- Исходные файлы сайта

- Формируем элементы формы регистрации
- Проверяем валидацию формы на стороне клиента
- Исходные файлы сайта

- Проверяем правильность ввода пароля при заполнении полей
- Выполняем валидацию пароля при отправке формы
- Исходные файлы сайта

- Получаем данные от элементов формы в PHP
- Создаем универсальную функцию проверки и обработки данных формы
- Выполняем валидацию формы на стороне сервера
- Проверяем валидацию на практических примерах
- Исходные файлы сайта

- Создаем таблицу БД MySQL
- Формируем функцию записи данных из формы в таблицу MySQL
- Дополняем скрипт отправки формы записью данных в БД MySQL
- Проверяем результат отправки формы
- Исходные файлы сайта

- Зачем нужно хешировать пароли
- Вскрываем пароль при слабо защищенном хеше
- Защищаемся от 'грубой силы' замедляя хеш-функцию
- Усложняем хеш добавляя 'соль'
- Исходные файлы сайта

- Использование функции crypt()
- Создание хеша функцией password_hash()
- Проверка на соответствие хеша паролю при помощи функции password_verify()
- Исходные файлы сайта

- Формируем элементы формы авторизации
- Получение данных
- Извлечение хеш-строки из базы данных
- Формирование хеша пароля
- Проверка на совпадение хеша пароля с хеш-строкой из базы данных
- Исходные файлы сайта
Авторизация

- Зачем нужны сессии и cookies
- Использование сессий и cookies в механизме авторизации
- Как узнать текущие настройки PHP
- Как изменить параметры настроек сессий и cookies
- Исходные файлы сайта

- Создание сессии, ее переменных и cookies при успешной аутентификации пользователя
- Проверка наличия активной сессии и предоставление прав доступа при подтверждении легальности пользователя
- Подключение блока меню авторизованного пользователя
- Автоматическое удаление сессии по истечение времени не активности
- Выход - ручное завершение сеанса
- Исходные файлы сайта

- Привязка пользователя к HTTP-заголовку User-Agent
- Проверяем работоспособность проверки на 'подпись' браузера
- Исходные файлы сайта

- Механизм привязки пользователя к IP-адресу
- Дополняем систему авторизации проверкой по IP-адресу
- Проверяем достоверность пользователя на соответствие IP-адреса
- Исходные файлы сайта

- Механизм управления доступом к сессии с помощью временных меток
- Дополняем систему авторизации проверкой на активность пользователя
- Проверяем автоматическое уничтожение сессии в случае достижения порога не активности пользователя.
- Исходные файлы сайта

- Недостатки существующего механизма сборки мусора
- Принцип действия пользовательского скрипта удаления истекших сессий
- Практическая реализация очищения хранилища с заданной периодичностью.
- Проверка работы созданного скрипта.
- Исходные файлы сайта

- Зачем нужен протокол HTTPS
- Виды SSL сертификатов
- Платить ли за SSL сертификат
- Включаем режим SSL и получаем бесплатный сертификат Let’s Encrypt
- Переводим сайт c протокола HTTP на HTTPS
- Проверяем SSL-сертификат и работу сайта с протоколом HTTPS
- Обеспечиваем доступ к сессионной cookie с использованием защищенного протокола HTTPS
- Исходные файлы сайта

- Формируем состояние активности кнопок меню Личного кабинета
- О месте расположения контента страниц личного кабинета
- В разделе 'Мои заказы' выводим данные о существующих заказах пользователя
- Вносим изменения в данные о заказах пользователя
- Исходные файлы сайта
Работа с почтой

- Подключаем домен к Mail.ru
- Настраиваем политику отправителя SPF
- Настраиваем подпись DKIM
- Создаем почтовый ящик
- Проверяем оправку почты
- Проверяем получение почты
- Исходные файлы сайта

- Подключаем домен к Яндекс.Почта
- Настраиваем SPF
- Настраиваем подпись DKIM
- Создаем почтовый ящик
- Проверяем оправку почты
- Проверяем получение почты

- Как мы будем отправлять письма обратной связи
- Создаем форму обратной связи
- Устанавливаем библиотеку PHPMailer
- Формируем скрипт отправки почты через SMTP
- Проверяем отправку email
- Исходные файлы сайта

- Порядок восстановления данных учетной записи пользователя
- Формируем форму восстановления логина
- Создаем обработчик формы восстановления логина
- Отправляем почту с восстановленным логином
- Исходные файлы сайта

- Алгоритм восстановления пароля учетной записи пользователя
- Формируем форму восстановления пароля
- Создаем обработчик формы
- Формируем страницу изменения пароля
- Проверяем работу созданного механизма восстановления пароля
- Исходные файлы сайта
Обработка ошибок

- Ошибка 404 (Page Not Found) статуса HTTP
- Фатальные ошибки PHP
- Некритичные ошибки PHP
- Сохранение лог-файлов ошибок
- Автоматическая отправка почтовых сообщений при критических ошибках

- Рекомендации по созданию страницы с ошибкой 404 Not found
- Создаем каркас страницы и оформляем основное ее содержание
- Перенаправляем запросы с ошибкой на страницу 404
- Исходные файлы сайта

- Создание страницы 500
- Перехват и обработка фатальных ошибок PHP
- Буферизация вывода в PHP
- Дополнение файла .htaccess директивой ErrorDocumen 500
- Проверка работы сайта при внутренней ошибке сервера
- Исходные файлы сайта