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

Да

Нет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



Статья 1 сборника
2016-10-18

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

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

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

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

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

  1. дизайн на заказ
  2. использование платных готовых шаблонов.
  3. использование бесплатных шаблонов
  4. самостоятельная разработка

В зависимости от того, по какому пути пойти, в большой степени будут зависеть все последующие действия...


Статья 2 сборника
2016-10-20

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

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

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

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

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

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


Статья 3 сборника
2016-10-24

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

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

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

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

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

Это можно сделать, используя размещенные в сети интернет различные обучающие материалы по работе с графическими редакторами, а также воспользоваться, имеющимися здесь, на сайте бесплатными видеокурсами, для Adobe Photoshop - Фотошоп для начинающих (бесплатная версия)", для GIMP - Видеосамоучитель GIMP.

Как ранее отмечалось, здесь будет показано создание дизайн-макета с использованием редактора Adobe Photoshop CC. Но, аналогично можно все это выполнять и в программе GIMP...


Статья 4 сборника
2016-10-26

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

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

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

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

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

В первую очередь нам нужно разблокировать слой "Фон", так как без этого мы не сможем вносить в него какие-либо изменения. Это можно сделать разными способами, но мы воспользуемся очень простым - для этого лишь только кликнем левой кнопкой мышки по значку замка, находящегося в этом слое (слои находятся в правой части, называемой областью палитр фотошопа)...


Статья 5 сборника
2016-11-02

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

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

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

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

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

Это обусловлено тем, что все операции, которые будут использованы при их создании, довольно подробно рассматриваются в предыдущих примерах, и нет необходимости снова на них подробно останавливаться.

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

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


Статья 6 сборника
2017-03-07

Создаем и размещаем фавикон

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

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

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

О том, зачем нужен фавикон - уникальный значок (иконка) сайта, говорилось ранее в разделе Что такое фавикон и для чего он нужен одной из статей на этапе верстки сайта. Где для формирования шапки мы временно разместили на его место небольшую фигуру в виде фиолетового кружка.

Поэтому, для подтверждения необходимости использования этого значка здесь можно лишь привести скриншот одного из вариантов результатов поиска Яндекса, как показано ниже...