Разрезаем изображения - Создание сайта
В последнее время весьма актуальной задачей, стоящей перед Web-дизайнерами является разработка интерактивной графики. Одной из разновидностей такой графики являются изображения, разбитые на фрагменты (Slices). Каждый фрагмент представляет собой прямоугольный участок изображения, который становится ячейкой таблицы в HTML-файле. Каждый такой фрагмент можно "оживить", применив к нему эффект Rollover (Наведение). При просмотре в браузере, в зависимости от действий мыши, состояние этого фрагмента будет меняться.
Создадим меню для левой части страницы Kontakt. htm.
В программе FrontPage оцените размер левой части макетной таблицы. Убедившись, что в программе PhotoShop закрыты все документы, перейдите в программу ImageReady с помощью кнопки.
Установите на панели инструментов Adobe ImageReady белый цвет переднего плана и синий цвет фона и создайте новый документ с нужным размером и синим цветом фона.
Введите названия пунктов меню как показано на рисунке, так, чтобы каждый из них располагался на отдельном слое. Сохраните документ в своей папке на Server под именем Menu. psd.
Теперь можно приступить к нарезке изображения. Эта операция выполняется с помощью инструмента Раскройка на панели инструментов.
Вырежем в изображении первый пользовательский фрагмент, включающий название пункта меню Главная Страница. Установите указатель мыши в левом верхнем углу окна документа. Нажмите и удерживайте левую кнопку мыши. В левом верхнем углу фрагмента появится 2 серых значка-индикатора. Левый значок означает порядковый номер фрагмента, а правый - его тип - изображение. Фрагменты нумеруются по порядку слева направо и сверху вниз. Созданный фрагмент будет выделен также более ярким цветом и ему будет присвоен номер 01. автоматически будет создан фрагмент с номером 02, содержащий остальную часть документа. Этот автофрагмент будет отличаться от выделенного пользовательского фрагмента оттенком. В его левом верхнем углу, кроме значков-индикаторов номера и типа, появится значок связи данного фрагмента с пользовательским. Если размер вырезанной части изображения вас не устраивает, его можно изменить, переместив маркеры выделения с помощью инструмента Выделение Фрагмента. Этим же инструментом можно выделить фрагмент и переместить его.
С помощью инструмента Раскройка вырежьте все остальные фрагменты с названиями пунктов меню. Всего должно получиться 5 пользовательских фрагментов.
Разметку нарезанных частей можно временно скрыть, чтобы она не мешала выполнять другие операции редактирования документа. Эта операция выполняется с помощью кнопки Вкл/выкл. Показ Фрагментов
Нарезать изображение можно и другим способом - создав выделенную область и выбрав команду меню Выделение>Создать Фрагмент Из Выделенной Области.
Для каждого из полученных фрагментов создадим эффект Rollover (Наведение) таким образом, чтобы при установке указателя в браузере на каждом из пунктов меню цвет фона этого фрагмента менялся с синего на темно-синий. Начнем с первого фрагмента. Его необходимо предварительно выделить. Включите панель инструментов Web-содержимое, если она отсутствует в рабочем окне (Окно>Web-содержимое) и увеличьте высоту окна палитры, чтобы были видны все фрагменты.
В палитре Web-содержимое уже создан первый кадр эффекта для состояния Нормальный, при котором указатель мыши находится за пределами выбранного фрагмента. Фрагмент Menu_01 выделен. Имя фрагмента состоит из имени файла без расширения и порядкового номера фрагмента.
Нажмите кнопку Создать Состояние Ролловера в нижней части панели Web-содержимое, чтобы создать кадр для следующего состояния - Курсор Наведен.
Теперь нужно определить как будет выглядеть выделенный фрагмент изображения при событии Курсор Наведен, т. е. когда указатель мыши находится над фрагментом. При этом цвет фона должен меняться на темно-синий. Для этого создадим из фрагмента выделенную область, поместим ее на новый слой и зальем темно-синим цветом.
Выберите команду Выделение>Создать Выделенную Область Из Фрагмента. Выделенная область будет создана.
Выделите щелчком мыши в палитре Слои слой Задний План.
Нажмите кнопку Создать Новый Слой в нижней части палитры Слои. Над слоем Задний План появится новый слой Слой 1.
Установите темно-синий цвет для переднего плана.
С помощью команды Редактирование>Выполнить Заливку заполните выбранным цветом переднего плана выделенную область активного слоя Слой 1. Снимите выделение (Выделение>Отменить Выделение Фрагментов).
Таким образом мы определили состояние Курсор Наведен для фрагмента изображения с Надписью Главная Страница.
Обратите внимание на то, что для состояния Нормальный фрагмента Menu_01 индикатор видимости слоя Слой 1 должен быть сброшен. Чтобы убедиться в этом выполните следующие шаги:
Щелкните на имени фрагмента Menu_01 в палитре Web-содержимое.
Если индикатор видимости слоя - значок глаза присутствует напротив слоя Слой 1 в палитре Слои, сбросьте данный индикатор щелчком мыши.
Щелкните мышью на строке Курсор Наведен под фрагментом Menu_01 в палитре Web-содержимое, чтобы выделить состояние эффекта Rollover для этого фрагмента.
Если индикатор видимости слоя - значок глаза отсутствует напротив слоя Слой 1 в палитре Слои, установите данный индикатор.
Аналогичным образом создайте эффект Курсор Наведен для остальных 4 фрагментов.
Чтобы просмотреть как созданное Вами меню будет работать в визуальном режиме нажмите кнопку Предварительный Просмотр Документана панели инструментов и протестируйте созданное вами изображение с помощью мыши.
После того как изображение нарезано и для фрагментов создан эффект Курсор Наведен есть 2 варианта дальнейших действий. Можно сохранить готовые фрагменты изображения и затем вручную в текстовом редакторе вставить ссылки на них в код HTML. Но можно ввести адреса ссылок для каждого фрагмента в программе Adobe ImageReady и сохранить вместе с нарезанными частями изображения также и HTML файл, который будет создан автоматически с уже готовым меню. Назначение ссылок фрагментам изображения выполняется с помощью палитры Фрагмент (Окно>Фрагмент).
Выделите с помощью инструмента Выделение Фрагмента фрагмент изображения с надписью Главная Страница. Задайте свойства выделенного фрагмента в палитре Фрагмент.
В поле Имя указано имя фрагмента, предлагаемое по умолчанию - Menu_01. Под этим именем фрагмент будет сохранен.
В открывающемся списке Тип можно выбрать тип фрагмента. По умолчанию тип всех фрагментов - Изображение, т. е. фрагмент содержит графические данные.
Чтобы связать выбранный фрагмент изображения с другим HTML документом, который будет загружаться в браузере после щелчка мышью на данном фрагменте, следует в поле URL ввести адрес нужного документа. Напишите в этом поле Index. html т. к. с данной ссылки будет открываться главная страница.
В поле Alt можно указать текст который будет отображаться вместо графического фрагмента в текстовых браузерах, а также если функция загрузки графики выключена.
В программе FrontPage создайте еще 2 новых страницы: Novosty. html и O_Nas. html. Сохраните их в корневой папке сайта.
Используя возможности палитры Фрагмент настройте ссылки с оставшихся фрагментов как показано на рисунке.
После того, как ссылки назначены, остается только оптимизировать фрагменты изображения и сохранить их. Для оптимизации следует поочередно выбирать каждый фрагмент и устанавливать наиболее подходящие параметры. Но, так как все части нашего документа имеют практически одинаковое графическое содержание, их можно связать и применить единые оптимизационные параметры.
Выделите все фрагменты Фрагменты>Выделить Все Пользовательские Фрагменты.
Выберите команду Фрагменты>Связать Фрагменты Для Оптимизации. Все части изображения будут связаны и в левом верхнем углу каждой из них появится дополнительный значок-индикатор, указывающий на связь. Все значки-индикаторы окрасятся в красный цвет. Это помогает идентифицировать все связанные фрагменты.
Теперь можно выполнить оптимизацию всех фрагментов одновременно.
Щелкните мышью на ярлыке 2 Варианта в верхней части окна документа. Будет выполнена оптимизация документа с параметрами, применявшимися при последней оптимизации.
В палитре Оптимизация, которая по умолчанию находится в правом верхнем углу окна, выберите формат GIF. В открывающемся списке Цвета палитры Оптимизация выберите 16.
Перед сохранением документа желательно еще определить цвет фона Web-страницы, которая будет создана автоматически, и на которую будет помещена таблица с нарезанными частями изображения. Если цвет фона не определить, то по умолчанию будет использован белый цвет.
Выберите команду Файл>Настройки Экспорта>Фон. На экране появится одноименный диалог.
Установите переключатель Изображение. В открывающемся списке Цвет Фона выберите Основной Цвет. Закройте диалоговое окно.
Выберите команду Файл>Сохранить Оптимизированный. Сохраните документ в корневой папке сайта.
В процессе сохранения будет автоматически создана HTML-страница, имя которой - Menu - предлагается по умолчанию в поле ввода Имя Файла. Одновременно с файлом HTML будут сохранены также нарезанные фрагменты, так как в открывающемся списке Тип Файла автоматически выбрано HTML And Images (*.html).
Откройте созданную страницу Menu. html с помощью программы Блокнот. Скопируйте автоматически сгенерированный текстовый фрагмент начиная со слов <!-- ImageReady Preload Script (menu. psd) --> и заканчивая словами <!-- End ImageReady Slices --> включительно.
Откройте страницу Kontakt. html в программе FrontPage. Установите текстовый курсор в левой ячейке макетной таблице и перейдите в режим С Разделением. Отследите положение текстового курсора в коде, и вставьте из буфера скопированный ранее фрагмент. Перейдите в режим конструктора. Сохраните результат и просмотрите в программе-обозревателе.
Дополните содержание страницы Kontakt. htm приведенной ниже информацией, чтобы привести ее к виду как на рисунке. Чтобы в браузере отображалось название страницы Контактная Информация задайте это через свойства страницы (пункт Название). Для привлечения внимания посетителя оживим верхнюю строку текста - сделаем ее бегущей. Для этого выделите текст и воспользуйтесь командой меню Вставка>Вэб-компонент>Бегущая Строка. Самостоятельно настройте параметры эффекта в соответствии со своими пожеланиями. Сохраните результат и просмотрите в браузере.
Сайт web документ программа
Похожие статьи
-
Создание баннера - Создание сайта
Баннер представляет собой рекламный рисунок для рекламы в Интернете созданного сайта. Как правило, баннер - это графическое изображение прямоугольной...
-
Создание заголовка страницы - Создание сайта
Создайте в программе Adobe PhotoShop новый документ с размерами, соответствующими размерам заголовочной части страницы (посмотреть размер с помощью...
-
Бесшовный фон - Создание сайта
Фон web-страниц в значительной мере определяет стиль и привлекательность всего сайта. В программе PhotoShop создайте документ размером 100х100 пикселов с...
-
Создание заголовков - Создание сайта
Заголовки - отличный инструмент структурной организации содержимого Веб-страницы. Стандарт HTML предусматривает возможность использования заголовков...
-
Для того, чтобы создать страницу сайта достаточно в текстовом редакторе, в блокноте сделать следующую надпись: Первая страница сайта создана. После...
-
Создание Web-страниц в прикладной программе FrontPage - Создание сайта
Создание новой пустой Web-страницы Если при открытии окна программы FrontPage в нем отображается пустая страница, то разработку веб - страницы можно...
-
Программные средства создания растровых изображений Среди программ, предназначенных для создания компьютерной двумерной живописи, самыми популярными...
-
Знакомство с программой FrontPage - Создание сайта
Прикладная программа FrontPage 2003 - это визуальный html-редактор для быстрого создания сайта. Язык HTML является основным языком программирования Web -...
-
Структура web-документа - Создание сайта
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE...>, которая обычно...
-
Что такое Flash? Flash (от англ. Flash - "вспышка", произносится "флэш") Flash - это технология веб-мультипликации и создания интерактивного контента от...
-
Сервисы сайта - Создание сайта
Сервисы сайта направлены на облегчение использования сервисов компании. Так, например, онлайн-консультация позволяет пользователю быстро получить ответ...
-
Center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Left...
-
Структура сайта в виде блок-схемы (Рисунок 1) Рисунок 1 - Структура сайта в виде блок-схемы Mockup главной страницы Макет сайта (Рисунок 2) был выполнен...
-
Окно прикладной программы FrontPage - Создание сайта
После запуска программы FrontPage (Пуск - программы - Microsoft Office - FrontPage ) на экране появится окно программы, в котором отображается новая...
-
Adobe Dreamweaver Adobe Dreamweaver - это HTML-редактор от компании Adobe, который на сегодняшний день очень известный. Первая его версия была выпущена в...
-
Оформление сайта, Язык HTML - Создание сайта
Оформление или дизайн - это внешний вид сайта. Эта та оболочка, которую вам придется надевать на ваш сайт, как этикетку на коробку с товаром. От этой...
-
Проектирование и разработка сайта Средства разработки Язык гипертекстовой разметки HTML В Интернете сосредотачивается и передается достаточно большое...
-
Шаблоны сайта Bootstrap3 Веб-дизайн является одним из основных элементов в процессе создания сайта. Именно от него зависит, насколько удобно и комфортно...
-
Практическое решение примеров в программе Macromedia Flash (скриншоты примеров) Пример анимационная баннер сайта. Пример баннер сайта состоит 227 кадров...
-
Анкеты, опросные листы и многие другие документы представляют собой бланки, предназначенные для заполнения и последующей обработки, Часто бланк также...
-
Анализ целевой аудитории. - Создание сайта
Пользовательская аудитория - преимущественно мужчины (80%), а так же женщины (20%) в возрасте от 18 до 50 лет. Можно разделить на четыре (4) основные...
-
Использование техники фреймов позволяет разбить окно браузера на произвольное число независимых подокон, каждое из которых отображает отдельную HTML -...
-
Выводы и рекомендации к сайту - Создание сайта
Хотя полного аналога проекта компании "Музыкальная компания BOOM", найти на белорусском рынке не удалось, все же были выведены общие критерии, актуальные...
-
Инвестиционная привлекательность рынка - Создание сайта
К настоящему времени наблюдается устойчивый тренд роста числа белорусских потребителей, использующих Интернет для получения всевозможной информации. По...
-
Как создать свой сайт? Итак, создание сайта всегда начинается с идеи. Прежде, чем приступить к работе над сайтом, вы должны четко представлять, что вы в...
-
Для создания трехмерной реконструкции сцены или объекта необходимо создать его трехмерную модель и вычислить цвет ее вершин. Для геометрической...
-
Организация связи в Internet - Создание сайта
При организации связи между вычислительными машинами, используется специальный набор правил, которые называются протоколом связи. Схема связи: клиент -...
-
Источники изображений, Работа с текстом - Adobe Photoshop CS6
Любое изображение можно создать, открыть, редактировать и сохранить в 12 различных форматах Photoshop. Но обычно используются только несколько форматов:...
-
Автоматизированное извлечение текстов для корпуса политических статей сайта Lenta. ru Для создания полезного обучающего корпуса требуется постоянное...
-
Резюме Наименование проекта: Компания услуги по созданию интернет-сайтов. Инициатор проекта: Иванов Иван Иванович Организационно-правовая форма -...
-
Задание 3. Создание Web-страниц в PowerPoint - PowerPoint и презентация
Программа PowerPoint, входящая в состав Microsoft Office, позволяет на профессиональном уровне подготовить слайды для проведения презентаций. Благодаря...
-
Объектом автоматизации сайта "вопрос-ответ" является предметная область "Проектирование информационных систем". Основное назначение сайта "вопрос-ответ"...
-
Этапы создания сайта - Разработка интернет-магазина компьютерной техники
Разработка сайта - процесс трудоемкий, в котором обычно участвуют несколько специалистов. Чтобы проект был успешным, необходимо как минимум определить:...
-
Для вызова ЛЕКСИКОНа следует набрать LEXICON или LEXICON имя редактируемого - файла Если в команде вызова ЛЕКСИКОНа указано имя файла, которого нет на...
-
Разработка сайта, Среда разработки web-сайта - Разработка сайта для компании
Среда разработки web-сайта При разработке web-сайта используются: - HTML - язык разметки web-страниц; - CSS - формальный язык описания внешнего...
-
Разработка графической части На данном этапе создания веб-сайта для рекламного агентства "ART", был разработан дизайн подобающе данной тематике. Стиль...
-
Создание форм для ввода данных, Создание отчетов - Разработка информационной системы "Гостиница"
Для того чтобы нам было в дальнейшем удобно и быстро работать с базой данной мы должны создать ряд нужных форм. Формы в БД Access можно создавать с...
-
Разработка структуры сайта Разработка структуры web-сайта является одним из ключевых моментов его создания, который в большой степени определяет...
-
Для создания нового сайта используем пункт меню "ФайлСоздатьСтраница или веб-узел". При этом появляется окно для выбора типа сайта (см. рис.). Кроме...
-
Точечное изображение В этом фотошоп уроке вы узнаете, как из обычной фотографии сделать полутоновое точечное изображение. Шаг 1. Откройте изображение, к...
Разрезаем изображения - Создание сайта