Подписаться на обновления блога?

Да

Нет

Картинка 3D коробки

Узнать больше

922

HTML базовый курс

БЕСПЛАТНЫЙ обучающий курс предназначен тем, кто делает первые шаги в сайтостроении.

В этом видеокурсе в доступной форме даются основы языка HTML, являющегося незаменимым при составлении веб-страниц.

Бесплатные видеокурсы!

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

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

Вы здесь: Главная → Сборник статей о том как сделать самописный сайт

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

Почему самописный сайт

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

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

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

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

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

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

Введение

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

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

Статья 1 сборника
2016-10-18 Определяем способ создания дизайн-макета
  • Какие существуют варианты дизайна
  • Дизайн на заказ
  • Дизайн на основе платных готовых шаблонов
  • Дизайн на основе бесплатных шаблонов
  • Самостоятельное выполнение дизайна
Статья 2 сборника
2016-10-20 Делаем эскиз и готовим картинки для дизайн-макета
  • Рисуем эскиз сайта
  • Подбираем необходимые элементы
  • Выполняем разметку макета
Статья 3 сборника
2016-10-24 Создаем новый документ в фотошопе и переносим на него картинки
  • Создаем новый документ композиции шапки дизайн-макета сайта
  • Переносим картинки заготовок
Статья 4 сборника
2016-10-26 Создаем композицию шапки дизайн-макета  сайта
  • Создаем основной фон шапки
  • Создаем подобие защитной 'ауры' автомобиля
  • Создаем луч прожектора, направленного на вора
  • Объединяем композицию шапки дизайн-макета с областью меню
  • Исходные файлы сайта
Статья 5 сборника
2016-11-02 Создаем дизайн-макет веб-страницы
  • Меню
  • Ротатор
  • Основное содержание и сайдбар
  • Подвал
  • Исходные файлы сайта
Статья 6 сборника
2017-03-07 Создаем и размещаем фавикон
  • Выбор способа создания фавикона
  • Установка плагина в Фотошоп
  • Дизайн фавикона
  • Сохранение на сайте
  • Подключение к страницам сайта
  • Исходные файлы сайта

Верстка

Статья 1 сборника
2016-11-17 Определяем способ верстки
  • Какие существуют виды верстки
  • Табличная или блочная
  • Фиксированная или резиновая
  • Зачем нужна адаптивная верстка
  • Семантическая верстка
  • Выводы
Статья 2 сборника
2016-11-06 Создаем веб-страницу и размещаем ее на локальном веб-сервере
  • Создание виртуального хоста на локальном веб-сервере
  • Создание файла веб-страницы с проверкой работы локального веб-сервера
  • Составление каркаса HTML-страницы
  • Исходные файлы сайта
Статья 3 сборника
2016-11-23 Делаем разметку шапки и футера HTML-страницы
  • Разметка шапки
  • Разметка меню шапки
  • Разметка футера
  • Что такое фавикон и для чего он нужен
  • Исходные файлы сайта
Статья 4 сборника
2016-11-27 Подключаем таблицу стилей CSS и назначаем общие стили для HTML-страницы
  • Способы добавления стилей на HTML-страницу
  • Подключаем внешнюю каскадную таблицу стилей CSS
  • Для чего нужен сброс настроек стилей CSS по-умолчанию
  • Делаем сброс свойств стилей по-умолчанию и устанавливаем базовые настройки файла CSS
  • Исходные файлы сайта
Статья 5 сборника
2016-12-03 Начало оформления сайта с помощью стилей CSS
  • Установка параметров резиновой верстки
  • Создания файла фонового изображения для шапки сайта
  • Формирование области шапки
  • Формирование областей контента и футера
  • Временное размещение сайта в сети интернет
  • Исходные файлы сайта
Статья 6 сборника
2016-12-07 Оформляем элементы шапки сайта стилями CSS
  • Размещение элементов по вертикали
  • Формирование отступов элементов по горизонтали
  • Назначение свойств шрифта элементов
  • Создание теней для текстовых элементов
  • Исходные файлы сайта
Статья 7 сборника
2016-12-10 Создаем меню сайта с помощью стилей CSS
  • Преобразование списка в ячейки таблицы
  • Установка ширины меню
  • Формирование кнопок меню
  • Формирование ссылок меню
  • Формирование активной кнопки
  • Создание меню футера
  • Исходные файлы сайта
Статья 8 сборника
2016-12-16 Делаем разметку области контента с использованием резиновой верстки
  • Выбор способа резиновой верстки для блока ротатора
  • Разметка блока ротатора
  • Выбор способа резиновой верстки блока основного содержания и сайдбара
  • Разметка блока основного содержания
  • Разметка блока сайдбара
  • Исходные файлы сайта
Статья 9 сборника
2016-12-21 Оформляем блок ротатора с помощью стилей CSS
  • Назначение размеров и размещение блока ротатора
  • Размещение внутренних элементов
  • Оформление текстового рекламного блока
  • Оформление общего внешнего вида ротатора
  • Исходные файлы сайта
Статья 10 сборника
2016-12-25 Оформляем область контента с помощью стилей CSS
  • Размещение блоков основного содержания и сайдбара
  • Формирование внутренних элементов блока основного содержания
  • Оформление текста блока основного содержания
  • Оформление элементов сайдбара
  • Исходные файлы сайта
Статья 11 сборника
2016-12-29 Оживляем кнопки и проверяем сайт на валидность кода HTML и CSS
  • Как сделать объемные кнопки
  • Как сделать интерактивные кнопки
  • Нужна ли валидация
  • Как проверять на валидность HTML-код
  • Как проверять на валидность CSS-код
  • Исходные файлы сайта
Статья 12 сборника
2017-02-28 Устанавливаем слайдер изображений
  • Скачивание слайдера
  • Создание и скачивание сопутствующих файлов
  • Подключение файлов к HTML-страницам
  • Размещение слайдера на сайте
  • Настройка работы слайдера
  • Исходные файлы сайта

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

Статья 1 сборника
2017-01-10 Создаем динамический сайт с помощью php
  • Зачем нужен динамический сайт
  • Как преобразовать статический сайт в динамический
  • Формируем блоки динамического сайта
  • Преобразуем веб-страницу из статической в динамическую
  • Исходные файлы сайта
Статья 2 сборника
2017-01-14 Добавляем новые страницы динамического сайта
  • Создаем файлы новых динамических веб-страниц
  • Создаем файлы основного содержания
  • Создаем объявления о не завершенном оформлении новых страниц
  • Исходные файлы сайта
Статья 3 сборника
2017-08-17 Создаем динамически формируемое меню
  • Создаем функцию вывода всех строк заданной таблицы
  • Формируем и подключаем файл 'start.php'
  • Формируем файлы главного меню и меню футера
  • Проверка работы сайта при динамически формируемом меню
  • Исходные файлы сайта
Статья 4 сборника
2017-08-25 Преобразуем динамический сайт на основе шаблона главной страницы
  • Суть выполняемых преобразований
  • Дополняем таблицу MySQL дополнительными данными
  • Преобразуем URL используя GET-параметры
  • Составляем скрипт получения данных из БД MySQL
  • Преобразуем шаблон главной страницы
  • Удаляем все освободившиеся файлы
  • Проверяем результаты преобразования
  • Исходные файлы сайта

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

Статья 1 сборника
2017-01-20 Выбираем и регистрируем домен
  • Определяем условия выбора доменного имени
  • Выбираем доменное имя
  • Регистрируем домен
Статья 2 сборника
2017-01-24 Покупаем хостинг для сайта
  • Как выбрать хостинг-провайдера
  • Покупаем хостинг для сайта
Статья 3 сборника
2017-01-26 Переносим сайт на хостинг
  • Способы переноса файлов на хостинг
  • Устанавливаем FTP клиент 'FileZilla'
  • Подключаемся к удаленному серверу
  • Переносим файлы сайта на хостинг
  • Проверяем работу сайта
  • Исходные файлы сайта

Адаптация под мобильные устройства

Статья 1 сборника
2017-04-02 Подготавливаем сайт к адаптации под мобильные устройства
  • Как имитировать просмотр сайта с мобильного устройства на обычном компьютере
  • Составляем адаптивный макет (прототип)
  • Определяем контрольные точки в медиа-запросах
  • Определяем способ адаптация
  • Изменяем масштабирование веб-страниц
  • Исходные файлы сайта
Статья 2 сборника
2017-04-08 Формируем медиа-запросы для разных разрешений экранов
  • Принцип описания медиа-запросов методом 'сначала мобильные'
  • Формируем медиа-запросы для минимального разрешения
  • Назначаем стилевые свойства для разных разрешений в установленном диапазоне
  • Исходные файлы сайта
Статья 3 сборника
2017-04-12 Создаем выпадающее меню под мобильные устройства
  • Добавляем в разметку элементы дополнительной кнопки для вызова меню
  • Оформляем с помощью стилей CSS внешний вид выпадающего меню
  • Составляем скрипт для управления выпадающим меню
  • Создаем дополнительный элемент навигации 'Хлебные крошки'
  • Исходные файлы сайта

Работа с базой данных MySQL

Статья 1 сборника
2017-06-21 Создаем базу данных MySQL
  • Зачем нужна база данных
  • Что из себя представляет база данных MySQL
  • Создаем базу данных на локальном веб-сервере Denwer
  • Создаем базу данных на хостинге
Статья 2 сборника
2017-06-27 Подключаем базу данных MySQL с использованием процедурного и объектно-ориентированного стиля "MySQLi
  • Общие вопросы по подключению к БД
  • Отличие в подключении к БД на локальном веб-сервере и на хостинге
  • Подключение к базе данных с использованием процедурного интерфейса
  • Подключение к базе данных объектно-ориентированным стилем
  • Исходные файлы сайта
Статья 3 сборника
2017-07-02 Создаем таблицы MySQL c помощью phpMyAdmin, SQL-запросов и в PHP
  • Определение основных параметров создаваемой таблицы
  • Создание таблицы с помощью интерфейса phpMyAdmin
  • Создание таблицы с помощью SQL-запросов
  • Создание таблицы MySQL в PHP
  • Исходные файлы сайта
Статья 4 сборника
2017-07-10 Вводим и копируем данные в БД  MySQL с помощью phpMyAdmin
  • Ввод данных в таблицу с помощью интерфейса phpMyAdmin
  • Создание копии таблицы MySQL на локальном веб-сервера
  • Импорт таблицы MySQL в БД хостинга
  • Исходные файлы сайта
Статья 5 сборника
2017-07-16 Записываем данные MySQL с использованием SQL-запросов
  • Формирование SQL-запроса
  • Выполнение SQL-запроса в phpMyAdmin
  • Исходные файлы сайта
Статья 6 сборника
2017-07-21 Записываем данные MySQL с использованием PHP
  • Записываем данные одной строки в таблицу MySQL
  • Составляем PHP-скрипт для записи всех строк таблицы
  • Составляем отдельную функцию записи данных в таблицу 'url_php'
  • Исходные файлы сайта
Статья 7 сборника
2017-07-26 Выводим данные из БД MySQL с помощью SQL-запросов
  • Выборка одиночной уникальной строки с заданным условием
  • Получение набора нескольких строк с сортировкой по заданному полю
Статья 8 сборника
2017-08-03 Выводим данные из БД MySQL в PHP
  • Вывод одиночной строки (использование одномерного массива)
  • Вывод набора строк по заданному условию (использование двумерного массива)
  • Проверка наличия записи в таблице
  • Исходные файлы сайта

URL для людей

Статья 1 сборника
2017-09-03 Используем в сайте человеко-понятные урлы (ЧПУ)
  • Отличие ЧПУ от обычных динамических ссылок
  • Суть выполняемых преобразований
  • Заменяем обычные динамические ссылки на статические ЧПУ
  • Перенаправляем запросы с ЧПУ на главную страницу сайта
  • Формируем динамические страницы из входящих статических ЧПУ
  • Проверка работы сайта с ЧПУ
  • Исходные файлы сайта
Статья 2 сборника
2017-09-12 Преобразуем динамичские URL в ЧПУ-ссылки используя GET-параметры
  • Создаем новые записи значений GET-параметров таблицы MySQL
  • Используя GET-параметры преобразуем обычные динамические ссылки в ЧПУ
  • Исходные файлы сайта
Статья 3 сборника
2017-09-20 Преобразуем входящие ЧПУ с помощью модуля MOD_REWRITE
  • Составляем шаблоны правила RewriteRule модуля MOD_REWRITE
  • Формируем динамические ссылки используя подстановку в RewriteRule
  • Вносим необходимые дополнения в файл '.htaccess'
  • Проверяем выполненные преобразования
  • Исходные файлы сайта
Статья 4 сборника
2017-09-26 Формируем из входящих ЧПУ динамические страницы
  • Помещаем полученные GET-параметры в одномерный числовой массив
  • Получаем конечный элемент входящего ЧПУ в цикле обработки GET-параметров
  • Формируем динамические страницы из текущего URL
  • Дополняем цепочку навигации 'Хлебные крошки'
  • Исходные файлы сайта
Статья 5 сборника
2017-10-06 Добавляем в URL расширение .html
  • Добавляем расширение .html в шаблон правила RewriteRule MOD_REWRITE
  • Формируем ссылки с .html
  • Проверка работы сайта с расширением .html в URL
  • Исходные файлы сайта

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

Статья 2 сборника
2017-10-21 Оформляем контент сайта
  • Необходимость оформления контента сайта
  • Правила оформления контента
  • Подготовка к оформлению
  • Создание файлов для основного содержания веб-страниц и размещение их в соответствии со структурой сайта
  • Дополнение шаблона для избирательного вывода основного содержания веб-страниц
  • Размещение оформляемого текста в режиме вывода контента из файла
  • Исходные файлы сайта
Статья 3 сборника
2017-11-06 Оформляем текст статей сайта
  • Оформляем заголовок статьи
  • Структурируем текст по содержанию
  • Формируем оглавление (содержание) используя HTML якоря
  • Формируем подзаголовки
  • Выделяем разделы статьи
  • Исходные файлы сайта
Статья 4 сборника
2017-11-14 Оформляем стилизованные нумерованные и маркированные списки
  • Формируем стандартные нумерованные списки
  • Оформляем нумерованные списки с помощью автоматического счета и нумерации
  • Формируем стандартные маркированные списки
  • Стилизуем маркированные списки с использованием спецсимволов
  • Исходные файлы сайта

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

Статья 1 сборника
2017-12-09 Находим картинки для статей сайта
  • Способы формирования изображения для сайта
  • Поиск по фотостокам (фотобанкам)
  • Использование сервиса Гугл поиск по картинкам с применением фильтра
  • Использование кадров из фильмов и видеороликов
  • Исходные файлы сайта
Статья 2 сборника
2017-12-20 Проверяем картинки на уникальность
  • Проверка на уникальность с помощью специальных программ
  • Проверка на уникальность с использованием сервисов Картинки Яндекс и Google Images
  • Исходные файлы сайта
Статья 3 сборника
2017-12-24 Делаем картинку уникальной
  • Отражение по горизонтали
  • Поворот на определенный градус
  • Искажение пропорций
  • Произвольная деформация
  • Перемещение фрагментов изображения
  • Исходные файлы сайта
Статья 4 сборника
2018-01-31 Оптимизируем размер (шририну, высоту) изображений
  • Зачем нужно оптимизировать размер изображений
  • Определяем ширину графических элементов, размещаемых на сайте
  • Оптимизируем размер картинок в графическом редакторе
  • Исходные файлы сайта
Статья 5 сборника
2018-02-02 Уменьшаем вес изображений
  • Почему необходимо сжимать изображения
  • Сжатие в формате JPEG
  • Сжатие в формате PNG
  • Исходные файлы сайта
Статья 6 сборника
2018-02-15 SEO-оптимизация изображений
  • Определяем названия изображений
  • Формируем ЧПУ наименований файлов
  • Формируем атрибуты alt
  • Формируем атрибуты title
  • Исходные файлы сайта