Как вставить изображение в dreamweaver

Adobe Dreamweaver

Обзор

Содержание

Вставка изображений

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

Изображения можно также вставлять динамически. Динамические изображения — это изображения, которые часто меняются. Например, в системах ротации рекламных баннеров нужно случайным образом выбирать отдельный баннер из списка потенциальных баннеров и динамически отображать его изображение при запросе страницы.

После вставки изображения можно настроить атрибуты специальных возможностей в его теге для восприятия средствами чтения с экрана для пользователей с ослабленным зрением. Эти атрибуты можно редактировать в коде HTML.

1 Установите курсор в том месте области «Окно документа», где следует вставить изображение, и выполните одно из следующих действий.

3 Перейдите к нужному изображению или источнику содержимого, чтобы его выбрать.
При работе в несохраненном документе Dreamweaver создает ссылку на файл изображения в виде file://. При сохранении документа в любом месте сайта Dreamweaver преобразует эту ссылку в относительный для документа путь.

Примечание. При вставке изображений можно также указать абсолютный путь к изображению на удаленном сервере (например, если изображение отсутствует на локальном жестком диске). В случае проблем с производительностью во время работы может потребоваться отключение просмотра изображений в представлении «Дизайн», для чего достаточно отменить выбор пункта «Команды» > «Отобразить внешние файлы».

4 Нажмите кнопку «ОК». Откроется диалоговое окно «Атрибуты специальных возможностей тега Image», если оно было активировано в установках («Редактирование» > «Установки»).

5 Введите значения в поля «Замещающий текст» и «Описание входа в систему», после чего
нажмите кнопку «ОК».
• В поле «Замещающий текст» введите название или краткое описание изображения. Введенная здесь информация считывается средством чтения с экрана. Значение следует ограничить примерно 50 символами. Для подробных описаний укажите в поле «Описание входа в систему» ссылку на файл, который содержит дополнительную информацию об изображении.
• В поле «Описание входа в систему» введите расположение файла, который будет отображаться после щелчка на изображении, или щелкните значок папки, чтобы перейти к этому файлу. В данном текстовом поле содержится ссылка на файл, относящийся к изображению или содержащий о нем дополнительную информацию.
Примечание. Можно заполнить как одно, так и оба поля, в зависимости от потребностей. Средство чтения экрана считывает атрибут изображения Alt.

Примечание. Если нажать кнопку «Отмена», изображение появится в документе, но Dreamweaver не свяжет с ним каких-либо специальных тегов или атрибутов.

6 В инспекторе свойств («Окно» > «Свойства») задайте свойства изображения.

Источник

Работа с изображениями в Dreamweaver

В этом уроке будет рассмотрена работа с изображениями в редакторе Dreamweaver.

Вы узнаете, какие средства для работы с изображениями имеются в Dreamweaver, а также научитесь вставлять, редактировать и позиционировать изображение.

Вначале давайте разберемся со вставкой изображения в html страницу.

За вставку изображения отвечает специальная кнопка Image расположенная на панели Insert (Панель объектов), во вкладке Common. Смотрите рисунок:

Для вставки изображения поставьте курсор в то место вашей страницы, куда бы вы хотели вставить ваше изображение. Затем нажмите на кнопку ( ) вставки изображения.

В результате появится окно Select Image Source:

При помощи данного окна вы можете выбрать необходимое вам изображение и вставить его, нажав на кнопку “ok”.

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

После того как Вы нажали на кнопку “ok” появится окно Image Tag Accessibility Attributes (Атрибуты доступности тега изображения):

Здесь имеются два параметра. Первый это Alternate text (Альтернативный текст) при помощи данного параметра вы можете добавить альтернативный текст к изображению. Данный текст будет показываться в том случае если на вашу страницу зайдет посетитель, у которого в браузере будет отключен показ графики. При этом вместо картинки отобразится рамка по размеру равная изображению, в которой и будет отображаться данный текст.

В поле Alternate text (Альтернативный текст) вы можете ввести краткий альтернативный текст. Он должен быть не более 50 символов.

После чего нажимаете на кнопку “ok” и ваше изображение вставляется на вашу страницу. Если Вы выделите изображение, то увидите, что вокруг него появится рамка с маркерами изменения размера. Перетаскивая эти маркеры, Вы можете изменять ширину и высоту изображения.

Если Вы хотите изменить размер изображения пропорционально, чтобы изображение не искажалось, то при перетаскивании маркеров нажмите и держите клавишу Shift. Смотрите изображение:

Теперь выделите изображение, и мы рассмотрим какие параметры, Вы можете ему присвоить при помощи инструментов расположенных на панели Properties (Редактор свойств):

При помощи полей W и H вы можете присвоить изображению необходимую ширину и высоту, так же как и при помощи маркеров изменения размера.

При помощи поля Src вы можете указать ссылку на файл изображения.

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

Далее мы обратимся к группе инструментов Edit (Правка). Данные инструменты предназначены для редактирования изображения. Рассмотрим их по порядку:

В результате откроется окно Preferences (Предпочтение). Из списка категорий выберите пункт File Types/Editors (Типы файлов/Редакторы). В результате в низу вашего окна появится два небольших окошка. Смотрите рисунок:

Шаг 2. Вам необходимо выбрать графический редактор, с помощью которого вы хотите редактировать изображения. Для этого кликните по значку “+” и выберите на своем диске запускной файл того редактора, которым Вы хотите редактировать изображение. В данном случае я выбрал графический редактор Photoshop.

Шаг 3. После выбора графического редактора нажмите на кнопку Make Primary (Сделать по умолчанию). Затем нажмите “ok”. Теперь все изображения с выбранными Вами расширениями будут открываться в этом графическом редакторе.

Можете попробовать нажать на кнопку Edit (Правка) и если вы все сделали правильно, то изображение откроется в вашем текстовом редакторе.

При помощи инструмента Optimize in Fireworks ( ) вы можете оптимизировать свое изображение.

Инструментом Crop ( ) вы можете вырезать необходимую вам часть изображения. Для этого выберите этот инструмент, в результате на изображении появятся уже знакомые вам маркеры перемещения, с помощью которых вы можете выделить необходимую часть изображения, после чего нажмите Enter и часть изображения будет вырезанна.

При помощи инструмента Resample (Преобразование) ( ) вы можете сделать изображение более четким.

Инструментом Brightness and Contrast (Яркость и Контрастность) ( ) вы можете изменять яркость и контрастность изображения перетягивая ползунки.

Инструментом Sharpen (Резкость) ( ) вы можете изменять резкость изображения.

При помощи поля Border Вы можете задать рамку вокруг изображения, в пикселях. Например, можете поставить в это поле значение “2” и нажать Enter. В результате вокруг изображения появится рамка размером 2 пикселя.

Ну и наконец, выпадающий список Align, с помощью которого Вы можете задать местоположение изображения. Он содержит следующие параметры:

Default (По умолчанию) – в этом случае местоположение будет зависеть от настроек браузера пользователя.

Baseline (Базовая линия) – изображение будет совпадать с базовой линией текста.

Top (В верху) – выравнивание изображения по верхнему краю.

Middle (Середина) – выравнивание изображения по середине, базовой линии текста.

Bottom (Внизу) – положение изображения в низу, относительно элемента в котором оно находится.

Text Top (В верху текста) – положение изображения при котором его верх совпадает с верхом самого высокого символа текста.

Absolute Middle – середина изображения будет совпадать с центральной линией текста.

Absolute Bottom – низ изображения будет совпадать с низом самого нижнего символа в тексте.

Right (Право) – изображение прижимается к правому краю страницы, при этом текст будет обтекать его слева.

Left (Лево) – изображение прижимается к левому краю страницы, а текст будет обтекать его с права.

Вот это и есть основные инструменты, предназначенные для работы с изображениями в Dreamweaver. Здесь мы еще не рассмотрели, каким образом можно сделать изображение-ссылку, и изображение-карту, но этому мы обязательно посвятим отдельный урок.

Источник

Использование файлов Photoshop в Dreamweaver

Узнайте, как интегрировать Photoshop в Dreamweaver. Работайте со смарт-объектами в процессах Photoshop и Dreamweaver.

Рабочие процессы интеграции Photoshop прекращены в Dreamweaver 21.0 и более поздних версиях.

Файлы изображений Photoshop (формат PSD) можно вставить на веб-страницу в Dreamweaver и оптимизировать их для веб (форматы GIF, JPEG или PNG) с помощью Dreamweaver. В результате этого Dreamweaver вставляет изображение как смарт-объект и поддерживает активное соединение с исходным PSD-файлом.

Кроме того, на веб-страницу в Dreamweaver можно добавить многослойные или многофрагментные изображения Photoshop (все или частично). Однако при копировании и вставке из Photoshop активное соединение с исходным файлом не поддерживается. Чтобы обновить изображение, выполните изменения в Photoshop, а затем повторите копирование и вставку.

При интенсивном использовании функции интеграции выгоднее сохранить файлы Photoshop на сайте Dreamweaver, чтобы ускорить доступ к ним. В этом случае не забудьте скрыть их, чтобы закрыть доступ к исходным ресурсам и исключить лишнюю передачу данных между локальным сайтом и удаленным сервером.

Руководство, посвященное интеграции Photoshop с Dreamweaver, см. в разделе Интеграция Dreamweaver с Photoshop.

Сведения о рабочих процессах смарт-объекта и Photoshop-Dreamweaver

При работе с файлами Photoshop в Dreamweaver существует два основных рабочих процесса: процесс копирования/вставки из буфера и процесс смарт-объекта.

Процесс копирования/вставки из буфера

Процесс копирования/вставки из буфера позволяет выбирать фрагменты или слои в файле Photoshop, а затем использовать Dreamweaver для вставки их как изображений, готовых для работы с Интернетом. Если необходимо обновить содержание позднее, следует открыть исходный файл Photoshop, внести изменения, повторно скопировать фрагмент или слой в буфер, а затем вставить обновленный фрагмент или уровень в Dreamweaver. Этот процесс рекомендуется использовать только в тех случаях, когда часть файла Photoshop (например, раздел плана разработки) необходимо вставить как изображение на веб-странице.

При работе с завершенными файлами Photoshop Adobe рекомендует использовать процесс смарт-объекта. Смарт-объект в Dreamweaver — это ресурс изображений, помещенный на веб-странице, на которой имеется активное подключение к исходному файлу Photoshop (PSD). В представлении «Дизайн»)·в Dreamweaver смарт-объект обозначается значком в верхнем левом углу изображения.

Если веб-изображение (т. е. изображение на странице Dreamweaver) не соответствует исходному файлу Photoshop, Dreamweaver определяет обновление исходного файла и отображает один из значков смарт-объекта красным цветом. Если выбрать веб-изображение в представлении «Дизайн» и нажать кнопку «Обновить из оригинала» в инспекторе свойств, то изображение обновится автоматически с учетом всех изменений, внесенных в исходный файл Photoshop.

При использовании процесса смарт-объекта для обновления веб-изображения не нужно открывать Photoshop. Кроме того, все обновления смарт-объекта в Dreamweaver не оказывают негативного влияния на остальные процессы. Таким образом поддерживается возможность внесения изменений в веб-версию изображения на странице, при этом первоначальное изображение Photoshop не затрагивается.

Также можно обновить смарт-объект, не выбирая веб-изображение в представлении «Дизайн». Панель «Ресурсы» используется для обновления всех смарт-объектов, включая изображения, для которых может быть заблокирована возможность выбора в окне документа (например, фоновые изображения CSS).

Параметры оптимизации изображения

При копировании и вставке из буфера обновления определенного фрагмента или слоя Dreamweaver запоминает исходные параметры и восстанавливает веб-изображение с использованием этих настроек. Точно так же при обновлении смарт-объекта с помощью инспектора свойств Dreamweaver использует те же настройки, которые использовались при вставке изображения в первый раз. Параметры изображения можно изменить в любой момент, выбрав веб-изображение в представлении «Дизайн») и щелкнув кнопку «Изменить параметры изображения» в инспекторе свойств.

Хранение файлов Photoshop

При вставке веб-изображения, если исходный файл Photoshop не сохранен на сайте Dreamweaver, то Dreamweaver распознает путь к исходному файлу как абсолютный локальный путь к файлу (это же относится и к процессу копирования/вставки из буфера, и к процессу смарт-объекта). Например, если путь к сайту Dreamweaver прописан как C:\Sites\mySite, а файл Photoshop сохранен в C:\Images\Photoshop, Dreameaver не распознает исходный ресурс как часть сайта mySite. Это может привести к затруднениям при необходимости общего доступа к файлу Photoshop для других участников рабочей группы, поскольку Dreamweaver определит файл как доступный только на определенном локальном диске.

Однако при сохранении файла Photoshop на сайте Dreamweaver устанавливает путь к файлу через сайт. Все пользователи, которые имеют доступ к сайту, смогут установить правильный путь к файлу при условии, что для загрузки был предоставлен исходный файл.

Для просмотра видеоруководства о двунаправленном редактировании в Photoshop см. раздел Двунаправленное редактирование с помощью Photoshop.

Создание смарт-объекта

При вставке в страницу изображения Photoshop (PSD-файла) Dreamweaver создает смарт-объект. Смарт-объект — это готовое для веб-публикации изображение, для которого поддерживается активное соединение с исходным изображением Photoshop. При изменении в Photoshop исходного изображения Dreamweaver дает возможность обновить изображение в Dreamweaver нажатием единственной кнопки.

Источник

Карты ссылок

Узнайте, как использовать карты ссылок в Dreamweaver для создания активных областей на веб-сайте.

Карта ссылок — это изображение, разделенное на области, называемые активными областями. При нажатии на активную область происходит какое-то действие (например, открывается новый файл).

Клиентские карты ссылок содержат сведения о гиперссылках в HTML-документе, а не в отдельном файле карты, как серверные карты ссылок. При щелчке на активной области изображения соответствующий URL-адрес перенаправляется напрямую на сервер. За счет этого клиентские карты ссылок работают быстрее серверных, так как серверу не приходится обрабатывать ввод пользователя.

Dreamweaver не изменяет ссылки на серверные карты ссылок в существующих документах. В одном документе могут использоваться как серверные, так и клиентские карты ссылок. Однако в браузерах, поддерживающих оба типа карт ссылок, большим приоритетом обладают клиентские карты ссылок. Для включения серверной карты ссылок в документ необходимо написать соответствующий HTML-код.

Вставка серверных карт ссылок

При вставке клиентской карты ссылки создается активная область, затем определяется ссылка, открывающаяся по щелчку пользователя в активной области.

Можно создать несколько активных областей, но они будут являться частями одной карты ссылок.

В поле «Карта» введите уникальное имя для карты ссылок. При использовании нескольких карт ссылок в одном документе убедитесь, что каждая карта имеет уникальное имя.

После создания активной области отобразится инспектор свойств активной области.

В поле «Ссылка» щелкните по значку папки для выбора файла, который должен открываться по щелчку пользователя в активной области, либо введите путь.

В раскрывающемся списке «Целевой объект» выберите окно, в котором следует открыть файл, либо введите его имя.

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

Параметр «Назначение» недоступен до тех пор, пока в выделенной активной области не будет создана ссылка.

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

Активные области, созданные на карте ссылок, можно легко редактировать. Активную область можно перемещать, двигать назад или вперед как элемент с абсолютным позиционированием, а также изменять размер области.

Изображения с активными областями можно копировать из документа в документ либо копировать одну или несколько активных областей с одного изображения на другое. Кроме того, активные области копируются в новый документ вместе с изображением.

Выбор нескольких активных областей в карте ссылок

Щелчком выберите остальные активные области, удерживая клавишу Shift.

Нажмите клавиши Ctrl+A (Windows) или Command+A (Macintosh), чтобы выбрать все активные области.

Источник

Свой сайт — это просто! Пособие для чайников

От азов к вершинам мастерства. Авторский проект Ольги Морозовой

Создание сайта в программе Dreamweaver. Вставка изображений, звуковых и видео файлов

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

Откроется диалоговое окно Select Image Source (Выбор источника изображения):

Обратите внимание, в правой части диалогового окна располагается панель Image Preview (Предварительный просмотр изображения), на которой не только осуществляется предварительный просмотр выбранного изображения, но и отображаются его характеристики: размер, формат, объем и предполагаемое время загрузки.

Раскрывающийся список Папка и список доступных гpaфических файлов, расположенный ниже, позволяют выбрать нужное изображение. Щелкаем на кнопке ОК. Изображение будет вставлено на место установки текстового курсора:

Изменить размеры изображения (если вы захотите это сделать), можно несколькими способами. Первый – ручной. Сначала выделите изображение щелчком левой кнопки мыши. На панели Properties (Свойства) отобразятся свойства выделенного изображения, а само изображение получит тонкую окантовку, на правой и нижней границах появятся три небольших черных квадрата. Это так называемые маркеры изменения размера изображения:

Второй способ заключается во вводе в соответствующие поля панели Properties (Свойства) значений вертикального (Н) и горизонтального (W) размеров. По умолчанию размеры изображения задаются в пикселах, но можно задавать их и в процентах от размера страницы. Для этого после введенного в поле размера нужно поставить знак процента %.

Если значения в полях размеров изображения выделены жирным шрифтом, значит, они уже были изменены. Первоначальные размеры изображения отображаются более тонким начертанием.

Чтобы восстановить истинные значения изображения нужно щелкнуть по закругленной стрелке, изображенной правее полей ввода размеров изображения.

В Dreamweaver также можно изменить относительное расположение изображения и обтекающего его текста. Для этого предназначен список Align (Выравнивание), расположенный, как Вы уже догадались, на панели Properties (Свойства):

По умолчанию установлено значение Default. Остальные девять параметров:

По умолчанию изображение помещается на страницу без всякой окантовки. Но бывает, что рисунок надо как-либо выделить. Для этого используется рамка (или, как ее еще часто называют, – граница). Ширина рамки в пикселах задается в поле ввода Border (Граница), расположенном на панели Properties (Свойства) графического изображения:

Нулевое значение или отсутствие значений не задают рамки вообще. Рамка имеет только черный цвет. На рисунке представлены примеры использования границ толщиной 0, 1, 5, 10, 25 пикселов:

Вставка звуковых и видео файлов

Путешествуя по Интернету, вы наверняка встречали сайты с музыкальным сопровождением. Чаще всего музыка встречается на домашних страничках, но и тематические сайты не исключение.

Мне, если честно, не очень нравятся сайты, которые используют музыкальное сопровождение в качестве фона. При длительном просмотре сайта одна и та же мелодия изрядно надоедает. Так что не увлекайтесь 🙂

Самое главное, что нужно учитывать при выборе фоновой музыки – это ее соответствие теме вашего сайта. И вообще подумайте, логично ли будет на вашем сайте использовать фоновую музыку?

Музыка, так же, как и фоновый рисунок, не должна отвлекать от содержимого страницы. Если это именно фоновая музыка, то лучше всего будет использовать просто мелодию без слов.

Впрочем, помимо фоновой мелодии можно записать приветствие голосом, и сделать так, чтобы оно запускалось при каждом заходе на сайт. Или добавить звуковые эффекты к различным действиям пользователя – к примеру, звук «клац» при нажатии на ссылки.

Прежде чем помещать на страницу звук, нужно создать или подобрать подходящий звуковой файл. Сейчас существует несколько форматов для хранения таких документов: MP3, WMA и WAV. Они являются универсальными и проигрываются практически всеми проигрывателями.

Внедрить звуковой файл на страницу можно посредством обычной ссылки (о создании ссылок будет рассказано немного позже). Но этот способ не лучший, так как требует много усилий со стороны пользователя. Лучше использовать его для представления, например, своей коллекции музыки.

Более эффективный способ – внедрить на страницу звук, который начнет воспроизводиться при загрузке данной страницы. Для этого необходимо подключить так называемый модуль расширения (Plugin). Это небольшие специальные программы представляют собой динамические библиотеки Windows (DLL) и загружаются браузером автоматически для воспроизведения аудио или видеофайла.

Для подключения такого модуля расширения, как всегда, сначала выбираем подходящее место на странице и устанавливаем там текстовой курсор. Затем выполняем команду меню Insert (Вставка) | Media (Мультимедиа) | Plugin (модуль расширения):

Для ускорения процесса можно воспользоваться кнопкой Media (Мультимедиа) на вкладке Common панели инструментов Insert. В раскрывшемся списке выбираем последний пункт – Plugin.

В любом из двух вариантов откроется диалоговое окно Select File (Выбрать файл). Если выбранный звуковой файл располагается не в папке сайта, Dreamweaver сообщит об этом и предложит сохранить его в нужной папке. В примере файл уже находится там, где ему и следует находиться.

Теперь нажимаем кнопку ОК и смотрим, что у нас получилось. В том месте на странице, где вы установили текстовой курсор, появился небольшой серый прямоугольник, на котором изображен такой же знак, как перед пунктом Plugin кнопки Media вкладки Common. Как вы уже догадались, это и есть знак модуля расширения.

Теперь переведем взгляд ниже, а именно, на панель Properties, где сейчас отображаются свойства модуля расширения:

Как видите, здесь можно настроить высоту, ширину модуля, отступы и выравнивание. А также ширину границы, путь к файлу и так далее. Заметное место на панели занимает кнопочка Play. Как Вы думаете, для чего она нужна?

Теперь давайте посмотрим, как этот значок модуля расширения будет выглядеть в браузере:

Все просто. Нажимаем на стрелку (1) файл проигрывается, нажимаем на «паузу» в виде двух вертикальных линий (2) – воспроизведение останавливается.

Просто – да, но настроек как-то маловато, даже на мини-прогрыватель не тянет. Поэтому давайте вернемся в Dreamweaver, увеличим ширину модуля до 100 пикселей и посмотрим, что же отобразится в браузере.

Уже лучше, не так ли? Стало видно больше кнопок управления. Теперь увеличим ширину еще на 100 пикселей. Может, еще что-нибудь появится? 🙂

Да, наши ожидания оправдались! Однако, больше новых кнопок не появится (во всяком случае, в моем примере), так что дальше можно не экспериментировать.

Если вам не нравится этот мини-проигрыватель, и вы хотите убрать его со страницы, оставив при этом сам звук, то в поля ввода размеров модуля расширения введите единичные значения. Он будет отображаться как небольшая точка, распознать в которой проигрыватель будет достаточно сложно. Однако, в этом случае посетитель не сможет проиграть файл заново, так же как и не сможет прервать проигрывание. Не думаю, что он будет рад такой перспективе. Особенно, если звук ему не понравится.

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

Вставлять видео на страницу можно также, как и звук – посредством Plugin. Не забудьте увеличить размеры модуля расширения, чтобы поля просмотра был больше. Пример окна проигрывателя для демонстрации видеофайла:

Источник