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

~ДРУиД~

Дом рационально-умный и душевный

ДРУиД - Дом Рационально-Умный и Душевный
Строительство частного "Умного" дома своими руками
Изучение МК STM32
Материалы по сайтостроению
Изготовление девайсов для быта и не только
Часть I. Статья №1. Выбор макета для сайта.

26 February 17 г. Автор - admin


Часть 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. Примеры остальных статей, ресурсов автор будет приводить по мере их использования во время написания кода шаблона.

 

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

 

Заключение.

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

 


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



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

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

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


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

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

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


Часть I. Статья №2. Основная разметка. Reset CSS.

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

Верстка дизайна сайта. Оформляем «подвал» - блок футер.

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



РУБРИКИ САЙТА:



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

Выбор системы оплаты труда - изобретаем велосипед

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

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

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

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

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


Рейтинг@Mail.ru Яндекс.Метрика