Nadin Design  
EnglishFrenchGermanItalianDutchRussianPortugueseJapaneseKorean ArabicChinese Simplified Spain
Творческая мастерская профессора Трубочкиной Надежды Константиновны
 
Web-дизайн (WD)


    Задания по курсам "Web-дизайн" и "Web-технологии" (Технология 5)


Адаптивная верстка


Из векипедии:

Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное отображение сайта на различных устройствах, подключённых к интернету.

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

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

Что такое фреймворк?


В мире веб-дизайна фреймворк определён как пакет, скомпонованный из файлов и папок стандартизированного кода (HTML, CSS, JS документов и т.д.), который может быть использован для разработки вебсайтов или как базис для построения сайта.

Нет нужды изобретать велосипед


      • Большинство вебсайтов имеют схожую (а иногда и одинаковую) структуры. Целью фреймворка является обеспечение общей структуры, чтобы разработчикам не приходилось делать всё сначала и можно было использовать разработанные куски кода. Таким образом фреймворки позволяют уменьшить объём работы и затрачиваемое время.

      • В двух словах нет нужды изобретать велосипед.

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

       

 

Примеры сайтов с адаптивной версткой

Один из таких шаблонов:

Girder - http://comfypixel.com/Girder/example-css.html Скачать шаблон этого примера

 

17 бесплатных HTML5 и CSS3 шаблонов - http://modx.ws/besplatnie-html5-css3-shablony

Если захотите вставить видео в сайт смотрите сюда.



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


cпроектируйте сайт на базе шаблона сайта (template_5.rar), который можно скачать здесь.

Шаблон построен на использовании HTML5, CSS3 и JS-скриптов jQuery.

В технологии и конструкции проекта шаблона вам необходимо сделать сайт со своим содержанием:

свой текст,

своя графика,

свое видео.

Кто смелый, может "поломать" CSS'ы и может сделать свой шаблон.

И не забывайте про:

justify в абзацах с мелким шрифтом,

отступы ("воздух"),

баланс (гармонию) цвета,

отсутствие пустого места ("дыр") в верстке.

 

Профессиональный свой дизайн и профессиональный свой контент - основа для высокой оценки на зачете.

 

Защищать на зачете придется все рассмотренные технологии!!! Удачи!

 

 

 

© 1998-2015 ND  
Сделать стартовой Напечатать страницу Назад  
Добавить в избранное Закрыть окно Вперед
Яндекс цитирования Rambler's Top100