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

На этой странице статьи блога, относящиеся практической работе в области сайтостроения, объединены в один общий раздел в виде сборника, где на реальном примере показано как можно своими руками с нуля сделать самописный сайт.

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

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

При этом, данный материал является интеллектуальной собственностью автора, и предназначен только для личного использования зарегистрированными пользователями блога. Какое-либо его тиражирование или продажа третьими лицами в соответствии Законом об авторском праве запрещена.

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

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

Вводная часть

2016-09-25 Как сделать сайт с нуля своими руками (вводная часть)

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

2018-01-17 Текущее состояние создаваемого сайта

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

2018-03-15 Инструкция по загрузке исходных файлов сайта на локальный веб-сервер

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

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

2016-05-07 Способы создания сайта

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

Инструменты для создания сайта

2016-10-12 Устанавливаем графический редактор GIMP

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

2016-10-13 Устанавливаем текстовый редактор nodepad++

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

2016-10-15 Устанавливаем локальный веб-сервер Denwer

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

Разработка дизайн-макета

2016-10-18 Определяем способ создания дизайн-макета

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

2016-10-20 Делаем эскиз и готовим картинки для дизайн-макета

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

2016-10-24 Создаем новый документ в фотошопе и переносим на него картинки

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

2016-10-26 Создаем композицию шапки дизайн-макета сайта

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

2016-11-02 Создаем дизайн-макет веб-страницы

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

2017-03-07 Создаем и размещаем фавикон

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

Верстка

2016-11-17 Определяем способ верстки

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

2016-11-06 Создаем веб-страницу и размещаем ее на локальном веб-сервере

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

2016-11-23 Делаем разметку шапки и футера HTML-страницы

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

2016-11-27 Подключаем таблицу стилей CSS и назначаем общие стили для HTML-страницы

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

2016-12-03 Начинаем оформлять сайт с помощью стилей CSS

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

2016-12-07 Оформляем элементы шапки сайта стилями CSS

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

2016-12-10 Создаем меню сайта с помощью стилей CSS

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

2016-12-16 Делаем разметку области контента с использованием резиновой верстки

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

2016-12-21 Оформляем блок ротатора с помощью стилей CSS

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

2016-12-25 Оформляем область контента с помощью стилей CSS

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

2016-12-29 Оживляем кнопки и проверяем сайт на валидность кода HTML и CSS

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

2017-02-28 Устанавливаем слайдер изображений

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

Создание динамического сайта

2017-01-10 Создаем динамический сайт с помощью php

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

2017-01-14 Добавляем новые страницы динамического сайта

• Создаем файлы новых динамических веб-страниц
• Создаем файлы основного содержания
• Создаем объявления о не завершенном оформлении новых страниц
• Исходные файлы сайта

2017-08-17 Создаем динамически формируемое меню

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

2017-08-25 Преобразуем динамический сайт на основе шаблона главной страницы

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

Размещение в интернете

2017-01-20 Выбираем и регистрируем домен

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

2017-01-24 Покупаем хостинг для сайта

• Как выбрать хостинг-провайдера
• Покупаем хостинг для сайта

2017-01-26 Переносим сайт на хостинг с помощью FTP клиента FileZilla

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

Адаптация под мобильные

2017-04-02 Подготавливаем сайт к адаптации под мобильные устройства

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

2017-04-08 Формируем медиа-запросы для разных разрешений экранов

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

2017-04-12 Создаем выпадающее меню под мобильные устройства

• Добавляем в разметку элементы дополнительной кнопки для вызова меню
• Оформляем с помощью стилей CSS внешний вид выпадающего меню
• Составляем скрипт для управления выпадающим меню
• Создаем дополнительный элемент навигации Хлебные крошки
• Исходные файлы сайта

Работа с БД MySQL

2017-06-21 Создаем базу данных MySQL

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

2017-06-27 Подключаем базу данных MySQL с использованием процедурного и объектно-ориентированного стиля "MySQLi

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

2017-07-02 Создаем таблицы MySQL c помощью phpMyAdmin, SQL-команд и в PHP

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

2017-07-10 Вводим и копируем данные в БД  MySQL с помощью phpMyAdmin

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

2017-07-16 Записываем данные MySQL с использованием SQL-запросов

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

2017-07-21 Записываем данные MySQL с использованием PHP

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

2017-07-26 Выводим данные из БД MySQL с помощью SQL-запросов

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

2017-08-03 Выводим данные из БД MySQL в PHP

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

2018-06-20 Выводим количество записей в таблице MySQL

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

URL для людей

2017-09-03 Используем в сайте человеко-понятные урлы (ЧПУ)

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

2017-09-12 Преобразуем динамичские URL в ЧПУ-ссылки используя GET-параметры

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

2017-09-20 Преобразуем входящие ЧПУ с помощью модуля MOD_REWRITE

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

2017-09-26 Формируем из входящих ЧПУ динамические страницы

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

2017-10-06 Добавляем в URL расширение .html

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

Оформление контента

2017-10-21 Оформляем контент сайта

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

2017-11-06 Оформляем текст статей сайта

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

2017-11-14 Оформляем стилизованные нумерованные и маркированные списки

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

2018-02-25 Вставляем картинки в HTML-страницы

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

2018-03-04 Вставляем видео с YouTube на сайт

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

Работа с изображениями

2017-12-09 Находим картинки для статей сайта

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

2017-12-20 Проверяем картинки на уникальность

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

2017-12-24 Делаем картинку уникальной

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

2018-01-31 Оптимизируем размер (ширину, высоту) изображений

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

2018-02-02 Уменьшаем вес изображений

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

2018-02-15 SEO-оптимизация изображений

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

Поиск по сайту

2018-04-04 Добавляем сайт в Яндекс.Вебмастер и подтверждаем его права

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

2018-04-12 Устанавливаем Яндекс Поиск на сайт

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

2018-04-23 Формируем форму поиска для сайта (для исходного кода Яндекс.Поиск)

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

2018-04-30 Формируем форму поиска для сайта (для динамического измененного кода Яндекс.Поиск)

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

2018-06-05 Обновляем кэш браузера для статических файлов

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

2018-06-12 Размещаем результаты Яндекс.Поиск на сайте

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

Работа с формами HTML

2018-06-28 Создаем формы HTML

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

2018-07-12 Создаем форму онлайн заказа

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

2018-07-21 Стилизуем элементы формы с помощью CSS

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

2018-08-15 Создаем форму регистрации

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