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

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

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

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

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

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

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

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

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

Лирическое отступление...

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

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

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

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

Лирическое отступление...

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

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

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

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

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

Заключение.

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

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

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

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

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

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

Самое читаемое:

STM32. Уроки по программированию STM32F4. Урок № 0. Вводный. Описание. Установка IDE.

STM32. Уроки по программированию STM32F4. Урок № 5. Работа с АЦП+DMA + фильтр скользящее среднее.

STM32. Уроки по программированию STM32F4. Урок № 1. Система тактирования STM32F4.

STM32. Уроки по программированию STM32F4. Урок № 6. Работа с таймерами TIM7 и TIM1.

STM32. Уроки по программированию STM32F4. Урок № 4. Программный многозадачный таймер STM32F4.

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

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

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