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

Да

Нет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

Содержание


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

Меню


Прежде, чем приступить к формированию меню, откроем два ранее созданных файла:

Далее, все слои композиции шапки, которую мы должны перенести, объединим в один слой. Это можно сделать через меню "Слои", выбрав в открывшемся окне опцию "Объединить видимые".

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

Рис.1

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

При этом, вновь созданный слой переместим в группу "Композиция" в панели палитр.

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

Рис.2

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

На рис.3 показан скриншот такой установки параметров.

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

Рис.3

Следующим шагом изобразим меню шириной на всю страницу (за вычетом полей с каждой стороны по 100px) и состоящее из 5 кнопок. Если рассчитать ширину каждой кнопки, то она будет составлять 200(px) = (1200 - 100 * 2) / 5.

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

  • цвет - "Нет цвета";
  • ширина бордюра - 2px;
  • ширина прямоугольника - 200px;
  • высота прямоугольника - 50px;
  • радиус округления верхних углов - 6px;
  • радиус округления нижних углов - 0px;
Для увеличения / уменьшения размера изображения кликните по картинке
Создание дизайн-макета сайта (часть 4), картинка 4

Рис.4

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

Таким образом копируем и остальные прямоугольники.

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

Рис.5

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

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

Рис.6

А, затем через панель "Стиль слоя" создадим внутреннюю тень, установив, параметры как показано ниже.

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

Рис.7

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

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

Рис.8

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

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

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

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

Рис.9

Ротатор


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

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

Рис.10

Основное содержание и сайдбар


Далее, показан вариант блоков "Основное содержание" и "Сайдбар" с элементами поиска, подписки и баннера. В основном содержании приведен фрагмент текста, который взят для примера из вводной статьи, а ниже размещена область с комментариями.

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

Рис.11

Подвал


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

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

Рис.12

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

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

Рис.13

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

Исходные файлы сайта


Исходный файл дизайн-макета, выполненного в графическом редакторе Adobe Photoshop можно скачать из прилагаемых дополнительных материалов.

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

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

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


Комментарии


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

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

comments powered by HyperComments