На главную страницу ЗАО Софткей
 Главная   Новости   Статьи   Пресс-релизы   Рассылки 
 
MS O365 test

Рисуем веб-интерфейс

06.02.2003 / Интернет / Александр Якутский

Именно эту картинку мы попробуем превратить в веб-интерфейсРаз уж технологии веб-программирования позволяют нам создавать интерактивные страницы, то почему бы этой возможностью не воспользоваться? Причем воспользоваться разумно, излишне не усердствуя, чтобы не раздражать посетителя. Однако как быть, если сайтостроитель имеет хороший вкус и вообще - замечательный дизайнер, а вот с программированием у него нелады? С чего начать? Или лучше сразу бросить эту затею и продолжать использовать шаблоны веб-страниц, предлагаемые службами бесплатного хостинга, начисто лишенные какой бы то ни было интерактивности? Ответ один: попробовать стоит. А для начала воспользуйтесь неким автоматизатором процессов программирования. Посмотрите, как и что он делает, а затем решите: способны ли вы сделать так же, и даже лучше. Ведь "ручная сборка" всегда ценнее, чем изделие "с конвейера".

Предлагаем испытать достижения программы Ulead SmartSaver в области создания интерактивных графических веб-интерфейсов. Почему именно этого продукта, а не более распространенной Adobe ImageReady, входящей в комплект поставки Photoshop? Как мы уже писали, SmartSaver гораздо эффективнее оптимизирует графику, а "легкие" изображения - не последнее качество хорошего веб-дизайна.

С чего начнем? Во-первых, выберем файл для экспериментов. В комплект поставки SmartSaver входит board.jpg, с ним и позабавимся (несколько уменьшенная копия файла приведена в самом начале этой статьи). Во-вторых, хотелось бы преобразовать этот файл в GIF-формат. Это совсем не обязательно, но подобные изображения гораздо эффективнее хранить именно в формате GIF, а не в JPEG, который хорош для полутоновых фотографий.

Итак, открываем файл и на вкладке Optimizer программы переводим его в GIF с Optimized-палитрой из 64 цветов. Качество изображения не ухудшилось, зато объем файла сократился до 19055 байт:
Преобразуем изображение в GIF-формат
Преобразуем изображение в GIF-формат

Но что мы будем делать с этим телефоном и доской для записей рядом с ним? Попробуем превратить их в некий интерактивный интерфейс. Например, сделаем так, чтобы кнопка Samples 1 "подсвечивалась" при наведении на нее мышиного курсора. Чтобы при нажатии на эту же кнопку на доске для записей появлялся логотип каталога SoftKey.ru. Наконец, чтобы после щелчка мыши по логотипу открывалось новое окно браузера с загруженной в нем главной страницей каталога. Этим, пожалуй, и ограничимся. Мы ведь не делаем заставку для настоящего сайта, а лишь демонстрируем возможности программы.

Что нам потребуется? Изготовим в Photoshop (куда ж без него, любимого) "подсвеченную" кнопку и сохраним логотип каталога (вы видите его в верхней части каждой страницы журнала) на своем жестком диске.

Вот теперь все готово, приступим. Первым делом переходим на вкладку Slicer и размечаем активные области нашего будущего интерфейса, некие ячейки воображаемой таблицы. Для этого нам потребуется инструмент Add Sliced Line. Он изображен на панели инструментов в виде кисточки с волнистой линией. Подводим кисточку к верхней границе кнопки Samples 1 и проводим линию слева направо. Затем точно так же проводим линии по остальным границам кнопки, а заодно очерчиваем и рабочую поверхность доски для записей. В итоге должно получиться нечто, подобное изображенному ниже:

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

Немного поработаем над разметкой: с помощью "ластика" сотрем лишние линии, а инструментом "стрелка" передвинем их, если это необходимо:

Немного подчистим разметку
Немного подчистим разметку

Обратите внимание: ячейка с кнопкой Samples 1 обведена красными линиями. Это означает, что она готова к преобразованиям. Перейдем на вкладку Java Script. Да-да, начинается программирование, причем воспользоваться им можно при минимальных познаниях в этой области. Взгляните на открывшуюся панель Java Script:

На панели Java Script мы можем указать, как интерфейс будет обрабатывать те или иные события
На панели Java Script мы можем указать, как интерфейс будет обрабатывать те или иные события

В поле Current Cell указана текущая активная ячейка. Поле Events содержит список событий, обрабатываемых программой. Например, событие Over наступает, когда на объект (в нашем случае - ячейку с кнопкой) наводится курсор мыши. Событие Click наступает, когда по объекту "щелкают" мышью. И так далее. Что же должно произойти, когда на нашу кнопку будет наведен курсор? Изображение должно смениться на "подсвеченную" кнопку. Чтобы добиться этого, указываем в поле Rollover cells ту же самую ячейку, а в поле Rollover Image, точнее, Image File указываем путь к файлу "подсвеченной" кнопки. И двигаемся дальше.

Обрабатываем событие Click для той же ячейки (с кнопкой Samples 1). На этот раз щелчок должен привести к изменениям в другой ячейке, содержащей рабочую поверхность доски для записей. Добиваемся того, чтобы в поле Current Cell была по-прежнему указана ячейка с кнопкой, а в поле Rollover cells - ячейка с доской для записей, и указываем путь к логотипу SoftKey.ru.

Последнее, что осталось сделать - заставить наш веб-интерфейс при щелчке по логотипу открывать новое окно браузера с главной страницей каталога SoftKey. Для этого перейдем на вкладку Image Map, из панели инструментов выберем инструмент Draw Rectangle и "начертим" прямоугольник прямо на доске для записей. В нижней части окна видим область для внесения параметров ссылки. Заполним ее следующим образом:

Изготовить Image Map - секундное дело
Изготовить Image Map - секундное дело

Понятно, что в поле URL указан адрес страницы, которая должна открыться. Переменная _blank в поле Target указывает, что страница должна быть загружена в новом окне. Атрибутом Alt тоже ни в коем случае нельзя пренебрегать. Во-первых, если изображение не загрузится по каким-то причинам, пользователь будет осведомлен, что именно здесь должно было быть. Во-вторых, даже при наличии картинки может возникнуть желание уточнить, с какой целью она здесь представлена и что на ней изображено. При наведении мыши на такую картинку содержимое атрибута Alt будет показано в виде выпадающей подсказки.

Вот, кажется, и все. Подобие веб-интерфейса готово. Осталось только каким-то образом сохранить наше детище в виде веб-страницы. Нажимаем комбинацию клавиш Ctrl+H. Откроется окно Save HTML. Что мы можем в нем указать? Само собой, имя файла. Кроме того, кодировку страницы. К сожалению, SmartSaver не поддерживает кириллических кодировок. Именно поэтому чуть раньше поле Alt мы заполнили фразой на английском.

Обратите внимание, что SmartSaver предлагает сохранить изображения в отдельном подкаталоге. Какие изображения? Ведь мы использовали один-единственный файл! Но, во-первых, не единственный. Сюда же мы присовокупили "подсвеченную" кнопку и логотип. А во-вторых, исходное изображение больше не является одним целым. SmartSaver создал настоящую HTML-таблицу, исходное изображение порезал на кусочки и разложил их по соответствующим ячейкам, а все это богатство снабдил функциями Java Script, самостоятельно описав все обрабатываемые события. Таким образом, нам даже не потребовалось понимание объектной модели браузера. Программа почти все сделала самостоятельно. И наиболее интересно то, что все это работает! Не верите? Убедитесь сами: ниже на эту страницу вставлен код, сгенерированный SmartSaver. Welcome to the SoftKey.ru! Welcome to the SoftKey.ru! Welcome to the SoftKey.ru!


Ссылки по теме:

Автор статьи: Александр Якутский


Рубрики статей
Все статьи
Аналитика
Программы
Игры
Интернет
Авторские права
Интервью
События в мире ПО
Рассылки
Новости мира ПО
Статьи: Мир ПО
Статьи: Программы
Статьи: Игры
Архив выпусков
  «   Июнь 2018   »  
Пн Вт Ср Чт Пт Сб Вс
    123
45678910
11121314151617
18192021222324
252627282930 
Поиск в архиве

Логин / пароль:
запомнить




Наши партнеры:

 САПР и графика



Написать редактору  | RSSЭкспорт новостей и обзоров


Rambler's
Top100 Rambler's Top100

Разработка компании «Битрикс»
Разработано
«Битрикс»


Copyright © 2001-2018 ЗАО «Софткей»