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

Да

Нет

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

    1. Какими способами разрабатываются сайты
    2. Как можно сравнить самописные сайты с основанными на CMS
    3. Быстродействие
    4. Безопасность
    5. Функциональность
    6. Простота создания
    7. Как выбрать способ создания сайта

    Здравствуйте уважаемый посетитель!

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

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

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

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

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

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

    Здравствуйте уважаемый посетитель!

    Как ранее отмечалось, в представленных материалах Сборника в случае, если в ходе рассмотрения статей в программный код сайта или базу данных MySQL вносятся какие-либо изменения, то к ним прилагается последний вариант исходных материалов, включающий все файлы сайта в каталоге "www" и таблицы базы данных MySQL.

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

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

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

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

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

    Что же касается загрузки на хостинг файлов сайта, то по этому вопросу имеется отдельная статья Переносим сайт на хостинг, где показано, как это можно сделать с использованием FTP клиента FileZilla.

Самописный сайт своими руками!

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

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

Описание которого сопровождается исходными файлами с таблицами MySQL, предоставляемые бесплатно в дополнительных материалах.

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

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

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

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

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

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

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

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

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

Введение

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

Инструкция по загрузке исходных файлов

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

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

Статья 1 сборника
2016-10-12 Устанавливаем графический редактор GIMP
  • Выбор графического редактора
  • Устанавливаем программу GIMP
  • Устанавливаем Руководство пользователя
Статья 2 сборника
2016-10-13 Устанавливаем текстовый редактор nodepad++
  • Выбор текстового редактора
  • Устанавливаем текстовый редактор Notepad++
Статья 3 сборника
2016-10-15 Устанавливаем локальный веб-сервер Denwer
  • Зачем нужен локальный веб-сервер
  • Устанавливаем программу Denwer
  • Как удалить Denwer с компьютера

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

Статья 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
  • Способы переноса файлов на хостинг
  • Устанавливаем FTP клиент FileZilla
  • Подключаемся к удаленному серверу
  • Переносим файлы сайта на хостинг
  • Проверяем работу сайта
  • Исходные файлы сайта

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

Статья 1 сборника
2017-04-02 Подготавливаем сайт к адаптации под мобильные устройства
  • Как имитировать просмотр сайта с мобильного устройства на обычном компьютере
  • Составляем адаптивный макет (прототип)
  • Определяем контрольные точки в медиа-запросах
  • Определяем способ адаптация
  • Изменяем масштабирование веб-страниц
  • Исходные файлы сайта
Статья 2 сборника
2017-04-08 Формируем медиа-запросы для разных разрешений экранов
  • Принцип описания медиа-запросов методом Cначала мобильные
  • Формируем медиа-запросы для минимального разрешения
  • Назначаем стилевые свойства для разных разрешений в установленном диапазоне
  • Исходные файлы сайта
Статья 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
  • Исходные файлы сайта

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

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

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

Статья 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
  • Исходные файлы сайта

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

Статья 1 сборника
2018-04-04 Добавляем сайт в Яндекс.Вебмастер и подтверждаем его права
  • Что такое Яндекс.Вебмастер и для чего он нужен
  • Добавляем сайт в Яндекс.Вебмастер и подтверждаем права на его управление
  • Проверяем настройки и информацию о сайте
Статья 2 сборника
2018-04-12 Устанавливаем Яндекс Поиск на сайт
  • Подготовка к созданию поиска
  • Определение области поиска
  • Настройка внешнего вида поисковой формы
  • Настройка результатов
  • Проверка настроенного поиска
  • Получение кода для вставки на сайт
Статья 3 сборника
2018-04-23 Формируем форму поиска для сайта (для исходного кода Яндекс.Поиск)
  • Размещаем HTML-код формы поиска
  • С помощью стилей CSS формируем внешний вид формы поиска
  • Исходные файлы сайта