Рейтинг@Mail.ru
Часть I. Статья №1. Выбор макета для сайта - ДРУиД: Верстка шаблона сайта своими руками.
Войти
или
Зарегистрироваться
Главная Файлы Видеоматериалы Форум
Карта сайта
Главная -> РУБРИКИ: -> Создание сайта | блога | своими руками -> Часть I. Статья №1. Выбор макета для сайта.

Статья опубликована: 2017-02-26/14:47:22-admin

Часть I. Статья №1. Выбор макета для сайта.



Часть I. Верстка шаблона сайта на основе макета фотошопа.

Часть I. Статья №1. Выбор макета для сайта. Обзор бесплатных источников.

 

Автор ресурса ~ДРУиД~ не является ГУРУ в сайтостроении, так что дизайном сайта на профессиональном уровне, да и на любительском тоже, не занимался. А по сему для шаблона будем использовать готовый бесплатный макет сайта (блога) в формате фотошоп.

 

Обзор источников готовых сайтов огромен. При запросе в гугле вида: «бесплатные шаблоны сайтов psd» можно найти множество разнообразных ресурсов. На сайте psd-html-css.ru был выбран макет cherry.psd. На основе данного дизайна будем верстать шаблон своего блога -  в данном случае ресурса ~ДРУиД~.

 

Вот как он выглядит:

Макет сайта в формате psd | Верстка шаблона сайта на основе макета фотошопа.

Рисунок №1. Макет сайта cherry.psd

 

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

 

Лирическое отступление...
Платные видеокурсы по HTML и CSS, также по HTML5, CSS3 можно найти в рунете. Они отличаются последовательностью изложения материала и т.д. Также есть много обучающих бесплатных уроков и видеокурсов. Они как правило менее систематизированы. Но если во время кодирования возникает конкретный вопрос по тому как и что сделать средствами HTML и CSS, то в результатах поиска можно легко найти нужный ответ.

 

В итоге HTML шаблон сайта будут выглядеть следующим образом:

 

Макет шаблона ресурса ~ДРУиД~ (ребрендинг) | Верстка шаблона сайта на основе макета фотошопа.

Рисунок №2. Шаблон ресурса ДРУиД (ребрендинг).

 

В данном шаблоне прослеживаются стилистика выбранного макета cheryy, а также уже существующего дизайна ресурса ДРУиД.

 

Лирическое отступление...
После окончания цикла статей «Верстка шаблона сайта на основе макета фотошопа», внешний вид ресурса ДРУиД измениться.

 

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

 

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

 

Теперь не много об учебниках по HTML и CSS. В рунете оформлено много статей на эту тему. Основным учебником является htmlbook.ru. Примеры остальных статей, ресурсов автор будет приводить по мере их использования во время написания кода шаблона.

 

Ознакомится с нововедениями и тенденциями в веб-разработке можно по следующей ссылке:"Современные тенденции и подходы в веб-разработке"

 

Заключение.

Макет для будущего сайта выбран. Инструментарий настроен. В следующих уроках приступим непосредственно к кодированию. Также в следующих уроках появятся видеоматериалы.

 


Просмотров: 429



Комментарии: (0)

Оставить комментарий

Да, Я Хочу Всегда Быть В Курсе Новых Событий На Сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности


Рекомендованные статьи:



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


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


РУБРИКИ:








Последняя статья:

Часть I. Статья №6. Верстка подвала – блока футтер

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

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


Справка Обратная связь Вопросы и ответы Контакты RSS-лента © 2013-2016, ДРУиД - Дом Рационально-Умный и Душевный
Рейтинг@Mail.ru Яндекс.Метрика