Puzzle мозаика



Скачать 32.52 Kb.
Дата26.07.2014
Размер32.52 Kb.
ТипДокументы

PUZZLE

мозаика

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


Рис. 1. Пример разрезанного на функциональные куски (slices) дизайна страниц веб-сайта созданного в программе Photoshop


Но прежде чем начинать создавать HTML шаблон стоит на листе бумаги формата А4 согласно исходному дизайну схематично зарисовать расположение нарезанных кусков, выписать их названия и размеры ширину и высоту в пикселах (рис. 2).

Рис. 2. Набросок схематичного расположения функциональных кусков (slices) с их названиями и размерами


Пары чисел указанные через значок «х» обозначают размеры изображений в пикселах. Первое число – это ширина изображения, второе число – это его высота (рис. 3).

Рис. 3. Пример определения размеров изображения
Обязательно при выписывании размеров проверяйте, например, чтобы высота кусков навигационной строки была одинаковая. Потому, что так должно быть. Если это не так, значит во время разрезания дизайна на куски (slices) вы допустили ошибку и промахнулись. В этом случае нужно вернуться в программу Photoshop, открыть исходный PSD файл дизайна страниц веб-сайта и произвести необходимые корректировки. Потом заново сохранить оптимизированные куски и заменить неправильно разрезанный кусок на правильный.

Так же стоит произвести небольшие математические вычисления и сложить ширины всех маленьких кусков относящихся к навигации (меню) и сравнить полученную сумму с шириной большой картинки (визуала). Они должны совпасть, если это не так, то вновь необходимо вернуться в программу Photoshop, открыть исходный PSD файл дизайна страниц веб-сайта и произвести необходимые корректировки. Потом заново сохранить оптимизированные куски и заменить неправильно разрезанный кусок на правильный.


57+172+192+162+178+59=820 = 820

Рис. 4. Пример сравнение суммы ширин кусков навигационной строки с шириной визуала

Таким образом, если все числа сходятся и если присмотреться к схематичному расположения функциональных кусков (slices), то можно заметить, что изображения находятся в своеобразных ячейках, которые можно представить в виде ячеек таблицы (рис. 5).

























Рис. 5. Пример таблицы, собирающей мозаику из функциональных кусков (slices) дизайн страниц веб-сайта
Однако в общем случае любая страница кроме навигации, визуала должна содержать и контент, т.е. наполнение. Тогда итоговый внешний вид таблицы для макета будущих страниц веб-сайта может быть представлен в виде (рис. 6).

Рис. 6. Пример табличного макета страниц веб-сайта


Представленная на рис. 6 таблица имеет сложную структуру. Дело в том, что первая строчка этой таблицы разбита на шесть ячеек. В подобных случаях используется метод вложения простых таблиц друг в друга (рис. 7).

Рис. 7. Пример вложения простых таблиц с целью создания сложной таблицы


В итоге получается, что исходная таблица, состоящая из трех строк (row) и одного столбца (column) содержит в первой своей ячейке еще одну таблицу состоящую из одной строки (row) и шести столбцов (column).
Таким образом, любое мозаичное представление дизайна страниц веб-сайта можно представить в виде ячеек сложной таблицы, которая в свою очередь может быть составлена путем вложения друг в друга простых таблиц.

ПРИЛОЖЕНИЕ

Примеры табличных макетов для разных шаблонов дизайна страниц веб-сайта с горизонтальной навигацией

Рис. А1. Примеры шаблона дизайна страниц веб-сайта с горизонтальной навигацией


Рис. А2. Пример табличного макета страниц дизайна веб-сайта для рисунка А1


Рис. А3. Структуры вложения таблиц для создания табличного макета изображенном на рисунке А2


Рис. B1. Примеры шаблона дизайна страниц веб-сайта с горизонтальной навигацией


Рис. B2. Пример табличного макета страниц дизайна веб-сайта для рисунка B1


Рис. B3. Структуры вложения таблиц для создания табличного макета изображенном на рисунке B2


Рис. C1. Примеры шаблона дизайна страниц веб-сайта с горизонтальной навигацией


Рис. C2. Пример табличного макета страниц дизайна веб-сайта для рисунка C1




Рис. C3. Структуры вложения таблиц для создания табличного макета изображенном на рисунке C2

Похожие:

Puzzle мозаика iconМозаика через века
Изучение декоративно-прикладного искусства такого как мозаика, её виды и применение
Puzzle мозаика iconЛарри Нивен. Человек-мозаика Ларри Нивен. Человек-мозаика
А, В, ав и о по совместимости. Впервые стало возможно сделать пациенту переливание крови с некоторой надеждой, что это его не
Puzzle мозаика iconТрофимова Ксения «puzzle» проект мебели для детей младшего школьного возраста

Puzzle мозаика iconТолерантность в действии
Германии, в старинном университетском городе Йена, состоялся международный молодёжный семинар, посвящённый многообразию нашего общества...
Puzzle мозаика iconСоздание эффекта Puzzle
Но сегодня мы будем учиться ходить без помощи мам и пап, и тем более без помощи посторонних
Puzzle мозаика iconКонкурс «Мозаика презентаций»
Тарасюк Вера Егоровна, учитель начальных классов высшей квалификационной категории
Puzzle мозаика iconПеруанская мозаика
Завтрак. Переезд в аэропорт для вылета в город Куско. Встреча и трансфер в выбранную гостиницу
Puzzle мозаика iconВоробейлистопаддоктормозаикардиналебастразговор
Воробей бейлис листопад паддок доктор тормоз мозаика икар кардинале алебастр страз разговор
Puzzle мозаика iconПриродные самоцветные уральские камешки
Каменная самоцветная мозаика для цветочных композиций, японских садиков, аквариумов, фонтанов
Puzzle мозаика iconПриложение № План совместных мероприятий гродненского еврейского общинного дома «Менора» и отдела маркетинга ЦБ им. А. Макаёнка в рамках работы программы «Национальная мозаика» и Литературного Салона на 2007 г
План совместных мероприятий гродненского еврейского общинного дома «Менора» и отдела маркетинга ЦБ им. А. Макаёнка в рамках работы...
Разместите кнопку на своём сайте:
ru.convdocs.org


База данных защищена авторским правом ©ru.convdocs.org 2016
обратиться к администрации
ru.convdocs.org