09. web design

Веб Дизайн

Лекция 9Гибкие сетки

Twitter Bootstrap

Vladimir Tomberg, PhD

Эстонский Университет Прикладных Наук

по Предпринимательству Майнор

Февраль 2016

Pic

ture

sou

rce:

http

://us

erce

nter

edco

nten

t.com

1

ГИБКИЕ СЕТКИ

2

3

Основа отзывчивого дизайна – Гибкая Сетка.

Одно содержание – несколько раскладок

Web Accessibility Workshop

4

Пример сетки

Web Accessibility Workshop

Source: http://aaronkwhite.com

Примеры сайтов изготовленных на основе сеток

http://960.gs/

5

Использование сеток в Axure

6

7

• Axure file with the 960 Grids already placed on Master pages

• Axure960GridSystem.zip• Bootstrap_08152013.zip

Несколько ссылок на шаблоны с сетками для Axure

Задание: Верстка с сеткой

• Переработайте свой макет таким образом, чтобы он строился на основе гибкой сетки;

• Используйте одну из сеток для Axure;• Попробуйте начать с мобильной версии;• Результаты опубликуйте в блоге

8

СРЕДА РАЗРАБОТКИ (FRAMEWORK) TWITTER BOOTSTRAP

9

Twitter Bootstrap

• Простой и легко настраиваемый HTML, CSS и Javascript фреймворк для более быстрой и удобной Web-разработки

10

Ссылка для загрузки

http://getbootstrap.com/getting-started/

11

Директория с файлами примеров

http://goo.gl/gZlUVV

12

Задание: Верстка в Bootstrap

• На основе новых макетов сверстать первую страницу используя Bootstrap;

• Исходный код и скриншот страницы опубликовать в Google Drive

13