×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

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

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

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

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

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

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

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



Автор: / Дата:

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

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

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

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

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

Содержание


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

Рисуем эскиз сайта


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

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

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

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

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

  • Шапка

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

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

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

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

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

  • Меню

    Меню предполагаю разместить в нижней части шапки на ширину контента вместе с сайдбаром. Каждая ячейка меню должна отражать пассивное/активное ее состояние.

  • Ротатор

    В чем причина использования ротатора?

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

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

    К примеру, если посетитель после того, как попал на сайт, даже просмотрит только 3-4 картинки и покинет его, то для поисковой системы Яндекс это не будет считаться отказом. (в Яндекс для отказа необходимо одновременное выполнение двух условий: посещение за один визит не более одной страницы и время посещения меньше 15 секунд).

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

  • Основное содержание (main)

    Область основного содержания предполагаю разделить на две части: область для теста статей и комментарии.

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

  • Сайдбар (sidebar)

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

  • Подвал (footer)

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

Ниже, на рис 1 показано, что получилось после нескольких набросков на листе бумаги примерного вида сайта.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 1), картинка 1

Рис.1

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 1), картинка 2

Рис.2

Подбираем необходимые элементы


Как было сказано в описании шапки, для создания изображения потребуются заготовки картинок автомобиля и вора с поднятыми руками.

Для того, чтобы найти подходящие заготовки воспользуемся поисковой системой Яндекс, сделав запрос "картинки автомобиля". Можно также воспользоваться и аналогичным запросом в "Картинках Google". Но в данном случае, воспользуемся Яндексом.

Для этого на странице поиска находим заголовок "картинки автомобиля - смотрим картинки" и подбираем любой подходящий вариант.

На рис. 3 показан скриншот страницы поиска.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 1), картинка 3

Рис.3

После того, как определимся с вариантом, кликнем на картинку, далее на правую кнопку, в открывшемся меню нажимаем "Сохранить изображение как" и сохраняем выбранное изображение в нужную папку (рис.4).

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 1), картинка 4

Рис.4

В итоге мы получим файл картинки автомобиля, как показано на рис.5.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 1), картинка 101

Рис.5

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 1), картинка 102

Рис.6

На этом поиск наших заготовок закончим и перейдет к разметке макета.

`

Выполняем разметку макета


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

При работе с дизайном обычно используют графический редактор Adobe Photoshop или GIMP. Здесь, при создании сайта будет использоваться Photoshop. Но это не принципиально, можно и GIMP, кому как больше нравится

Перед тем, как перейти к данной операции, необходимо установить какой-либо графический редактор, GIMP или Photoshop, если он еще не установлен. Подробно о том, как это сделать, можно посмотреть в отдельной статье Устанавливаем графический редактор GIMP , в которой также упомянута и установка фотошопа.

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

Далее, определим предварительные размеры основных блоков макета, таких как, шапка, контент, сайдбар и подвал.

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

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

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

Остальные блоки предварительно определим в следующих размерах:

  • ширину сайдбара установим фиксированной, составляющую 240рх, что обусловлено возможностью использования баннеров со стандартной шириной в 240рх;
  • расстояние между областью контента, сайдбара и крайними границами страницы (промежуточные поля) определим в 100рх;
  • ширину области контента будем определять как оставшуюся часть от всей ширины страницы, минус сайдбар и промежуточные поля, что составит 660px;
  • высоту подвала предварительно определим в размере 140px при ширине на всю страницу.
  • высоту области контента примем а размере 1180px.
  • в итоге, общая высота макета будет составлять 1530px (210px + 140px + 1180px).

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

  • "Шапка";
    • "Меню";
    • "Композиция";
  • "Контент";
  • "Сайдбар";
  • "Подвал";

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 1), картинка 5

Рис.7

Скриншот разметки макета.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 1), картинка 6

Рис.8

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

С уважением, Николай Гришин

Читать дальше


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments