Dreamweaver MX. Работа с изображениями
Dreamweaver MX. Работа с изображениями
Как вы помните, некоторое время тому назад мы обсуждали работу с текстовым контентом web-страниц, создаваемых при помощи программы Macromedia Dreamweaver MX. Несмотря на некоторую самодостаточность текста, никто не собирается отговаривать вас от использования изображений, это было бы неоправданно и несколько странно.
Я не думаю, что кто-либо ожидает от цикла, посвященного редактору web-страниц, разбора процесса создания самих изображений, для этого существует соответствующий софт и большое количество специальной литературы. Поэтому далее мы будем исходить из того предположения, что картинки у нас уже имеются. В принципе, неважно, как они были получены: нарисовали вы их самостоятельно, позаимствовали из клипарта либо приобрели любым другим законным способом. Наша задача — грамотно включить их в структуру своей странички средствами Dreamweaver.
Первым делом определимся, в каком качестве мы сможем использовать графические изображения на web-странице. Выделим следующие варианты. Во-первых, это применение картинок в иллюстративных целях — фотографии, разнообразные рисунки, схемы, чертежи и т.п. Во-вторых, это могут быть элементы интерфейса, например, кнопки или карты. Наконец, это вспомогательные элементы типа уже известных вам по предыдущим статьям spacer-изображений. Данная классификация не претендует на исчерпывающую полноту, но позволит нам структурировать дальнейший рассказ.
Скажем несколько слов о наиболее употребительных форматах графических файлов.
Формат JPEG (Joint Photographic Experts Group) предполагает сжатие исходного изображения, в ходе которого уменьшается количество пикселей в нем, при этом информация о цветах сохраняется. Таким образом, он прекрасно подходит для фотографий и многоцветных изображений, но не всегда хорош для графики с мелкими деталями и тонкими линиями. Качеством сжатия можно гибко управлять, находя компромисс между размером файла и его качеством.
Формат GIF (Graphic Interchange Format) также уменьшает размер исходной картинки, но использует другой принцип — ограничивает количество используемых в нем цветов, отсекая излишнюю информацию о них. Максимальное количество цветов в GIF — 256. Это подсказывает сферу его применения — картинки с небольшим количеством цветов, элементы интерфейса, схемы и тому подобные изделия художественного производства, для которых важна четкость деталей. Формат GIF обладает еще несколькими полезными для web-дизайна свойствами. В таких файлах могут присутствовать прозрачные участки, а кроме этого .gif-картинка может состоять из нескольких поочередно сменяющихся изображений, что позволяет создавать несложную анимацию.
PNG (Portable Network Group) — еще один возможный вариант. По сути, является близким аналогом GIF, но свободен от патентных ограничений. Поддерживает большое количество цветов и прозрачность.
Итак, перейдем к полевым экспериментам. Для своего проекта рекомендуется создать специальный каталог для хранения используемых изображений. Это позволит упорядочить будущую подборку. Называться он может, к примеру, images. Откроем панель инструментов Site, выберем необходимый проект, сделаем правый щелчок по значку корневой папки сайта и выберем в появившемся меню пункт New Folder, после чего задаем новой папке имя.
Допустим, что у нас уже есть хотя бы одна картинка и дело за малым — ее размещением на странице. Первым делом необходимо установить курсор там, где должно быть изображение (в тексте, ячейке таблицы и т.п.). Непосредственное добавление графики на страницу осуществляется рядом способов, так что выбирайте любой, подходящий именно вам. Первый способ — кнопка Image на панели инструментов Common. Второй способ — меню Insert — Image. Удобно пользоваться "горячей комбинацией" Ctrl+Alt+I.
Достаточно свободно можно пользоваться перетаскиванием требуемой картинки на место предполагаемого размещения. Это касается любого графического файла поддерживаемого формата на вашем компьютере и даже значка кнопки Image на панели инструментов Common. В этом случае Dreamweaver предупредит о том, что файл находится вне определенной для файлов сайта папки, и предложит скопировать туда этот файл. В окне Select Image Source указываем необходимые сведения об изображении, после чего новая картинка появляется на странице.
Добавить на создаваемую страницу новое изображение можно и с помощью панели Assets группы Files. Выбираем самую первую иконку в правом столбце. Теперь на панели отображается список всех связанных с вашим сайтом изображений. Имеется предварительный просмотр миниатюр. Таким образом, вся подборка картинок всегда находится под рукой, что упрощает работу с ней.
С помощью средств Dreamweaver можно изменить некоторые параметры добавленного изображения в рамках возможностей языка HTML. Нам доступны выравнивание картинки относительно других элементов страницы, изменение отображаемых размеров, а также добавление к ней некоторых интерактивных качеств.
Все необходимые на данном этапе инструменты сгруппированы в меню, вызываемом правым щелчком по картинке, а также на панели Properties. Для того чтобы они стали активными, необходимо выделить на странице нужное изображение.
Начнем с параметров выравнивания (Align). Dreamweaver MX предлагает десять вариантов: Left, Right, Top, Middle, Bottom, Browser Default, Baseline, Text Top, Absolute Middle, Absolute Bottom. Если первые пять пунктов не требуют особых пояснений, то для некоторых оставшихся дадим краткий комментарий.
Значение Browser Default отдает выравнивание объекта целиком на откуп установкам браузера клиента, так что если в его настройках прописано, допустим, Left, значит, так тому и быть. Absolute Middle и Absolute Bottom выравнивают изображение соответственно по абсолютной середине строки и по нижней точке строки. Все названные пункты генерируют соответствующий HTML-код, так что если вам потребуются более развернутые пояснения, обращайтесь к справочникам по этому языку.
Изменение размеров изображений в Macromedia Dreamweaver MX можно производить как в визуальном режиме, "на глазок", так и указывая точные числовые значения параметров ширины (Width) и высоты (Height) картинки.
При выборе первого варианта наши действия сводятся к манипулированию размерами выделенного изображения с помощью узловых точек. Минимальный достижимый таким образом размер изображения — 8 на 8 пикселей. Второй способ позволяет добиться значительно большей точности. На панели Properties для этого предназначены поля, отмеченные буквами W и H. Там отображаются текущие размеры картинки. Здесь мы и можем внести точные значения в пикселях. Напомним, что размеры самого файла при всех упомянутых манипуляциях не изменяются ни на байт, поэтому если у нас есть изображение "весом" 10Kb, то объем его будет одинаковым как при отображаемом размере 100x100, так и при 1x1 пиксель. Вернуть любое изображение к его оригинальному размеру можно с помощью кнопки Reset Size на панели Properties либо выбрав одноименный пункт выпадающего контекстного меню изображения.
Более серьезные операции над графическими элементами выполняются в соответствующих специализированных редакторах. Давайте настроим совместную работу пакета Dreamweaver с такой внешней программой. Данные рекомендации будут справедливы для любого приложения, предназначенного для редактирования графики.
Для этого благого дела надо открыть окно настроек Dreamweaver MX, которое, как мы уже знаем, вызывается через меню Edit — Preferences (Ctrl+U), где выбираем вкладку File Types / Editors. В списке Extensions указываем необходимое расширение, например, .gif, после чего в соседнем списке Editors указываем то приложение, в котором мы собираемся править файлы этого типа. С помощью кнопки, на которой изображен "плюс", добавим наше приложение в список, указав путь к нему в соответствующей форме. Кнопка с "минусом" удаляет приложение из списка доступных. То же самое касается и доступных типов файлов. Если вдруг вам понадобится что-нибудь экстравагантное, вы сможете добавить в список Extensions новый тип и определить для него внешний редактор стандартным способом, который был нами только что рассмотрен.
Теперь, выбрав изображение, мы можем сразу же открыть его с помощью внешнего редактора, а все внесенные изменения будут немедленно отражены на открытой в Dreamweaver странице.
Может возникнуть и такая проблема. Вы уже знаете, где на странице будут размещены конкретные изображения, но сами графические файлы пока еще не готовы, или, допустим, их делает для вас другой человек. Это не повод для приостановки работ над web-страницей, в такой ситуации нам поможет элемент Image Placeholder.
По сути, это автоматически сгенерированный файл-заглушка с геометрическими размерами, равными размерам будущего "правильного" изображения. Он позволит построить дизайн страницы, после чего со временем его можно будет заменить на подготовленную к тому времени графику.
Добавляется такой элемент с помощью кнопки Image Placeholder все той же панели Common или меню Insert — Image Placeholder. Появится окно настройки элемента. Там необходимо определить имя заглушки (мы же не хотим потом перепутать файлы), ее цвет, желательно хорошо выделяющийся на основном фоне страницы или подобный основным цветам будущей "настоящей" картинки. Обязательно указываются размеры элемента, которые, повторюсь, должны точно совпадать с размерами будущей графики. После этого мы получим на странице картинку с текстом, содержащим название элемента и его размеры, которая и будет резервировать место не нарушая дизайнерский замысел. Если вы посмотрите созданный пакетом Dreamweaver MX код, то увидите, что была использована обычная конструкция добавления изображения, но не был указан адрес файла.
Замена "заглушки" рабочим изображением производится следующим образом. Если вы пользуетесь еще одним продуктом компании Macromedia — редактором Fireworks, то вы сможете создать с его помощью изображение на основе данных элемента Image Placeholder. Если же используется другой графический редактор, то нам потребуется явно указать тот файл, который мы хотим поместить на зарезервированное место. Действовать для этого надо так: выделяем заменяемый Image Placeholder, смотрим на панель инструментов Properties, где нам понадобится иконка в виде папки рядом с пунктом Src. С помощью уже знакомого нам диалога Select Image Source выбираем требуемый файл, который и заменит нашу заглушку.
Как уже повелось, подведем краткие итоги статьи. Сегодня мы изучили приемы работы с простыми графическими элементами в программе Macromedia Dreamweaver MX. Теперь нам знакомы способы добавления картинок на страницу, а также изменения их параметров. Кроме этого, мы познакомились со вспомогательным объектом Image Placeholder и настроили внешний редактор графических файлов. В следующей статье попробуем несколько усложнить задачу и добавим графике интерактивности, для чего будем использовать Rollover Image и карты (Image Maps).
Алексей Кутовенко alteridem@tut.by
Как вы помните, некоторое время тому назад мы обсуждали работу с текстовым контентом web-страниц, создаваемых при помощи программы Macromedia Dreamweaver MX. Несмотря на некоторую самодостаточность текста, никто не собирается отговаривать вас от использования изображений, это было бы неоправданно и несколько странно.
Я не думаю, что кто-либо ожидает от цикла, посвященного редактору web-страниц, разбора процесса создания самих изображений, для этого существует соответствующий софт и большое количество специальной литературы. Поэтому далее мы будем исходить из того предположения, что картинки у нас уже имеются. В принципе, неважно, как они были получены: нарисовали вы их самостоятельно, позаимствовали из клипарта либо приобрели любым другим законным способом. Наша задача — грамотно включить их в структуру своей странички средствами Dreamweaver.
Первым делом определимся, в каком качестве мы сможем использовать графические изображения на web-странице. Выделим следующие варианты. Во-первых, это применение картинок в иллюстративных целях — фотографии, разнообразные рисунки, схемы, чертежи и т.п. Во-вторых, это могут быть элементы интерфейса, например, кнопки или карты. Наконец, это вспомогательные элементы типа уже известных вам по предыдущим статьям spacer-изображений. Данная классификация не претендует на исчерпывающую полноту, но позволит нам структурировать дальнейший рассказ.
Скажем несколько слов о наиболее употребительных форматах графических файлов.
Формат JPEG (Joint Photographic Experts Group) предполагает сжатие исходного изображения, в ходе которого уменьшается количество пикселей в нем, при этом информация о цветах сохраняется. Таким образом, он прекрасно подходит для фотографий и многоцветных изображений, но не всегда хорош для графики с мелкими деталями и тонкими линиями. Качеством сжатия можно гибко управлять, находя компромисс между размером файла и его качеством.
Формат GIF (Graphic Interchange Format) также уменьшает размер исходной картинки, но использует другой принцип — ограничивает количество используемых в нем цветов, отсекая излишнюю информацию о них. Максимальное количество цветов в GIF — 256. Это подсказывает сферу его применения — картинки с небольшим количеством цветов, элементы интерфейса, схемы и тому подобные изделия художественного производства, для которых важна четкость деталей. Формат GIF обладает еще несколькими полезными для web-дизайна свойствами. В таких файлах могут присутствовать прозрачные участки, а кроме этого .gif-картинка может состоять из нескольких поочередно сменяющихся изображений, что позволяет создавать несложную анимацию.
PNG (Portable Network Group) — еще один возможный вариант. По сути, является близким аналогом GIF, но свободен от патентных ограничений. Поддерживает большое количество цветов и прозрачность.
Итак, перейдем к полевым экспериментам. Для своего проекта рекомендуется создать специальный каталог для хранения используемых изображений. Это позволит упорядочить будущую подборку. Называться он может, к примеру, images. Откроем панель инструментов Site, выберем необходимый проект, сделаем правый щелчок по значку корневой папки сайта и выберем в появившемся меню пункт New Folder, после чего задаем новой папке имя.
Допустим, что у нас уже есть хотя бы одна картинка и дело за малым — ее размещением на странице. Первым делом необходимо установить курсор там, где должно быть изображение (в тексте, ячейке таблицы и т.п.). Непосредственное добавление графики на страницу осуществляется рядом способов, так что выбирайте любой, подходящий именно вам. Первый способ — кнопка Image на панели инструментов Common. Второй способ — меню Insert — Image. Удобно пользоваться "горячей комбинацией" Ctrl+Alt+I.
Достаточно свободно можно пользоваться перетаскиванием требуемой картинки на место предполагаемого размещения. Это касается любого графического файла поддерживаемого формата на вашем компьютере и даже значка кнопки Image на панели инструментов Common. В этом случае Dreamweaver предупредит о том, что файл находится вне определенной для файлов сайта папки, и предложит скопировать туда этот файл. В окне Select Image Source указываем необходимые сведения об изображении, после чего новая картинка появляется на странице.
Добавить на создаваемую страницу новое изображение можно и с помощью панели Assets группы Files. Выбираем самую первую иконку в правом столбце. Теперь на панели отображается список всех связанных с вашим сайтом изображений. Имеется предварительный просмотр миниатюр. Таким образом, вся подборка картинок всегда находится под рукой, что упрощает работу с ней.
С помощью средств Dreamweaver можно изменить некоторые параметры добавленного изображения в рамках возможностей языка HTML. Нам доступны выравнивание картинки относительно других элементов страницы, изменение отображаемых размеров, а также добавление к ней некоторых интерактивных качеств.
Все необходимые на данном этапе инструменты сгруппированы в меню, вызываемом правым щелчком по картинке, а также на панели Properties. Для того чтобы они стали активными, необходимо выделить на странице нужное изображение.
Начнем с параметров выравнивания (Align). Dreamweaver MX предлагает десять вариантов: Left, Right, Top, Middle, Bottom, Browser Default, Baseline, Text Top, Absolute Middle, Absolute Bottom. Если первые пять пунктов не требуют особых пояснений, то для некоторых оставшихся дадим краткий комментарий.
Значение Browser Default отдает выравнивание объекта целиком на откуп установкам браузера клиента, так что если в его настройках прописано, допустим, Left, значит, так тому и быть. Absolute Middle и Absolute Bottom выравнивают изображение соответственно по абсолютной середине строки и по нижней точке строки. Все названные пункты генерируют соответствующий HTML-код, так что если вам потребуются более развернутые пояснения, обращайтесь к справочникам по этому языку.
Изменение размеров изображений в Macromedia Dreamweaver MX можно производить как в визуальном режиме, "на глазок", так и указывая точные числовые значения параметров ширины (Width) и высоты (Height) картинки.
При выборе первого варианта наши действия сводятся к манипулированию размерами выделенного изображения с помощью узловых точек. Минимальный достижимый таким образом размер изображения — 8 на 8 пикселей. Второй способ позволяет добиться значительно большей точности. На панели Properties для этого предназначены поля, отмеченные буквами W и H. Там отображаются текущие размеры картинки. Здесь мы и можем внести точные значения в пикселях. Напомним, что размеры самого файла при всех упомянутых манипуляциях не изменяются ни на байт, поэтому если у нас есть изображение "весом" 10Kb, то объем его будет одинаковым как при отображаемом размере 100x100, так и при 1x1 пиксель. Вернуть любое изображение к его оригинальному размеру можно с помощью кнопки Reset Size на панели Properties либо выбрав одноименный пункт выпадающего контекстного меню изображения.
Более серьезные операции над графическими элементами выполняются в соответствующих специализированных редакторах. Давайте настроим совместную работу пакета Dreamweaver с такой внешней программой. Данные рекомендации будут справедливы для любого приложения, предназначенного для редактирования графики.
Для этого благого дела надо открыть окно настроек Dreamweaver MX, которое, как мы уже знаем, вызывается через меню Edit — Preferences (Ctrl+U), где выбираем вкладку File Types / Editors. В списке Extensions указываем необходимое расширение, например, .gif, после чего в соседнем списке Editors указываем то приложение, в котором мы собираемся править файлы этого типа. С помощью кнопки, на которой изображен "плюс", добавим наше приложение в список, указав путь к нему в соответствующей форме. Кнопка с "минусом" удаляет приложение из списка доступных. То же самое касается и доступных типов файлов. Если вдруг вам понадобится что-нибудь экстравагантное, вы сможете добавить в список Extensions новый тип и определить для него внешний редактор стандартным способом, который был нами только что рассмотрен.
Теперь, выбрав изображение, мы можем сразу же открыть его с помощью внешнего редактора, а все внесенные изменения будут немедленно отражены на открытой в Dreamweaver странице.
Может возникнуть и такая проблема. Вы уже знаете, где на странице будут размещены конкретные изображения, но сами графические файлы пока еще не готовы, или, допустим, их делает для вас другой человек. Это не повод для приостановки работ над web-страницей, в такой ситуации нам поможет элемент Image Placeholder.
По сути, это автоматически сгенерированный файл-заглушка с геометрическими размерами, равными размерам будущего "правильного" изображения. Он позволит построить дизайн страницы, после чего со временем его можно будет заменить на подготовленную к тому времени графику.
Добавляется такой элемент с помощью кнопки Image Placeholder все той же панели Common или меню Insert — Image Placeholder. Появится окно настройки элемента. Там необходимо определить имя заглушки (мы же не хотим потом перепутать файлы), ее цвет, желательно хорошо выделяющийся на основном фоне страницы или подобный основным цветам будущей "настоящей" картинки. Обязательно указываются размеры элемента, которые, повторюсь, должны точно совпадать с размерами будущей графики. После этого мы получим на странице картинку с текстом, содержащим название элемента и его размеры, которая и будет резервировать место не нарушая дизайнерский замысел. Если вы посмотрите созданный пакетом Dreamweaver MX код, то увидите, что была использована обычная конструкция добавления изображения, но не был указан адрес файла.
Замена "заглушки" рабочим изображением производится следующим образом. Если вы пользуетесь еще одним продуктом компании Macromedia — редактором Fireworks, то вы сможете создать с его помощью изображение на основе данных элемента Image Placeholder. Если же используется другой графический редактор, то нам потребуется явно указать тот файл, который мы хотим поместить на зарезервированное место. Действовать для этого надо так: выделяем заменяемый Image Placeholder, смотрим на панель инструментов Properties, где нам понадобится иконка в виде папки рядом с пунктом Src. С помощью уже знакомого нам диалога Select Image Source выбираем требуемый файл, который и заменит нашу заглушку.
Как уже повелось, подведем краткие итоги статьи. Сегодня мы изучили приемы работы с простыми графическими элементами в программе Macromedia Dreamweaver MX. Теперь нам знакомы способы добавления картинок на страницу, а также изменения их параметров. Кроме этого, мы познакомились со вспомогательным объектом Image Placeholder и настроили внешний редактор графических файлов. В следующей статье попробуем несколько усложнить задачу и добавим графике интерактивности, для чего будем использовать Rollover Image и карты (Image Maps).
Алексей Кутовенко alteridem@tut.by
Компьютерная газета. Статья была опубликована в номере 11 за 2004 год в рубрике soft :: интернет
