Как вставить изображение в dreamweaver
Обновлено: 07.07.2024
Как вставлять, редактировать и заменять изображения, а также менять их размер в Dreamweaver.
Изображения — неотъемлемая составляющая веб-сайта, предоставляющая дополнительный контекст для его посетителей. Существует множество различных типов форматов графических файлов, однако на веб-страницах широко используются три из них — GIF, JPEG и PNG. Файлы форматов GIF и JPEG совместимы с веб-страницами и доступны для просмотра в большинстве браузеров. Дополнительные сведения об этих форматах файлов см. в следующем тексте.
GIF (формат обмена графическими данными). В формате GIF используется 256 цветов максимум. Этот формат лучше всего подходит для изображений без плавных переходов тонов. GIF-файлы идеально подходят для отображения больших областей ровного цвета (панели навигации, кнопки, значки, эмблемы) или других изображений с однородными цветами и оттенками.
JPEG (стандарт, разработанный объединенной группой экспертов в области фотографии). Формат JPEG превосходно подходит для фотографий и изображений с плавными переходами тонов, так как файлы JPEG могут содержать миллионы цветов. С повышением качества файла JPEG возрастает его размер и время загрузки. Хорошего баланса между качеством изображения и размером файла можно достичь путем сжатия файла JPEG.
PNG (формат переносимой сетевой графики). Формат файлов PNG — это не связанная патентными ограничениями замена для формата GIF, поддерживающая индексированные цвета, градации серого и полноцветные изображения, а также альфа-канал для прозрачности. В PNG-файлах сохраняется исходная информация о слоях, векторах, цветах и эффектах типа, например, отбрасываемых теней. Кроме того, все элементы, всегда полностью доступны для редактирования. Для распознавания в Dreamweaver файлы PNG должны иметь расширение .jpg.
Dreamweaver не является редактором типа WYSIWYG («что видишь на экране, то и получишь при печати»). Другими словами, можно добавлять или вставлять изображения с помощью Dreamweaver, но нельзя перемещать или позиционировать изображения из интерфейса.
Чтобы перемещать изображения в макете, необходимо использовать CSS, который отображает HTML-контент требуемым образом. Вы можете обратиться к базовым руководствам по HTML и CSS, чтобы узнать, как работать с изображениями с помощью кода. Кроме того, см. учебное пособие по работе с изображениями в Dreamweaver.
Сведения о вставке и использовании изображений с помощью приложения Dreamweaver см. в следующих разделах.
При вставке изображения в документ Dreamweaver в исходном коде HTML создается ссылка на файл изображения. Для гарантии правильности этой ссылки файл изображения должен находиться на текущем сайте. Если изображение не расположено на текущем сайте, Dreamweaver запрашивает, следует ли скопировать файл на сайт.
Dreamweaver позволяет также вставлять изображения динамически. Динамические изображения — это изображения, которые часто меняются. Например, системы ротации рекламных баннеров, где отдельный баннер случайным образом выбирается из списка потенциальных баннеров. Система динамически отображает изображение выбранного баннера при запросе страницы.
Можно также перетащить любой слой с панели «Извлечение» в любое место представления «Интерактивный просмотр» Dreamweaver с помощью интерактивных направляющих и средства быстрого просмотра элемента. Панель «Извлечение» позволяет загружать PSD-файлы, а затем перетаскивать любой слой из PSD-файла непосредственно в документ Dreamweaver.
После вставки изображения можно настроить тег изображения и атрибуты специальных возможностей для чтения с экрана пользователями с ослабленным зрением. Эти атрибуты можно редактировать в коде HTML.
Сведения об извлечении изображений из композиций PSD см. в разделе Извлечение изображений из файлов PSD.
В этом уроке будет рассмотрена работа с изображениями в редакторе Dreamweaver.
Вы узнаете, какие средства для работы с изображениями имеются в Dreamweaver, а также научитесь вставлять, редактировать и позиционировать изображение.
Вначале давайте разберемся со вставкой изображения в html страницу.
За вставку изображения отвечает специальная кнопка Image расположенная на панели Insert (Панель объектов), во вкладке Common. Смотрите рисунок:
Для вставки изображения поставьте курсор в то место вашей страницы, куда бы вы хотели вставить ваше изображение. Затем нажмите на кнопку ( ) вставки изображения.
В результате появится окно Select Image Source:
При помощи данного окна вы можете выбрать необходимое вам изображение и вставить его, нажав на кнопку “ok”.
Лучше всего будет, если вы заранее скопируете данное изображение в папку с вашим файлом, в который вы собираетесь вставлять изображение. Либо же создадите в данной папке еще одну, специально для изображений, можете назвать ее images и туда скопируете изображение.
После того как Вы нажали на кнопку “ok” появится окно Image Tag Accessibility Attributes (Атрибуты доступности тега изображения):
Здесь имеются два параметра. Первый это Alternate text (Альтернативный текст) при помощи данного параметра вы можете добавить альтернативный текст к изображению. Данный текст будет показываться в том случае если на вашу страницу зайдет посетитель, у которого в браузере будет отключен показ графики. При этом вместо картинки отобразится рамка по размеру равная изображению, в которой и будет отображаться данный текст.
В поле Alternate text (Альтернативный текст) вы можете ввести краткий альтернативный текст. Он должен быть не более 50 символов.
В случае если вам понадобится ввести более длинный текст, можете воспользоваться вторым параметром Long description (Длинное описание) . Здесь вам необходимо указать путь к отдельному файлу, в который вы поместили свой альтернативный текст. Указать путь к данному файлу вы можете, вписав ссылку на данный файл в соответствующем поле, либо щелкнув по значку папки выбрать данный файл.
После чего нажимаете на кнопку “ok” и ваше изображение вставляется на вашу страницу. Если Вы выделите изображение, то увидите, что вокруг него появится рамка с маркерами изменения размера. Перетаскивая эти маркеры, Вы можете изменять ширину и высоту изображения.
Если Вы хотите изменить размер изображения пропорционально, чтобы изображение не искажалось, то при перетаскивании маркеров нажмите и держите клавишу Shift. Смотрите изображение:
Теперь выделите изображение, и мы рассмотрим какие параметры, Вы можете ему присвоить при помощи инструментов расположенных на панели Properties (Редактор свойств):
При помощи полей W и H вы можете присвоить изображению необходимую ширину и высоту, так же как и при помощи маркеров изменения размера.
При помощи поля Src вы можете указать ссылку на файл изображения.
При помощи выпадающего списка Class вы можете придать необходимое стилевое оформление вашему изображению, если вы используете CSS для оформления страницы.
Далее мы обратимся к группе инструментов Edit (Правка). Данные инструменты предназначены для редактирования изображения. Рассмотрим их по порядку:
Инструмент Edit (Правка) ( ) предназначен для редактирования изображения, в каком либо стороннем графическом редакторе. По началу в нем не определен графический редактор, который мы будем применять для редактирования изображений. Поэтому для того чтобы его определить вам необходимо пройти в пункт меню Edit (Правка) - Preferences (Предпочтение) или нажать сочетание клавиш Ctrl+U.
В результате откроется окно Preferences (Предпочтение). Из списка категорий выберите пункт File Types/Editors (Типы файлов/Редакторы). В результате в низу вашего окна появится два небольших окошка. Смотрите рисунок:
Шаг 1. Вам нужно будет выбрать расширение файлов, которые вы хотите редактировать. В данном случае это будут расширения .jpg .jpe .jpg. Кроме того вы можете выбрать графический редактор и для файлов с такими расширениями как .jpg и .jpg. они очень часто используются при создании веб страниц.
Шаг 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. Здесь мы еще не рассмотрели, каким образом можно сделать изображение-ссылку, и изображение-карту, но этому мы обязательно посвятим отдельный урок.
При вставке изображения в документ Dreamweaver в исходном коде HTML создается ссылка на файл изображения. Для гарантии правильности этой ссылки файл изображения должен находиться на текущем сайте. Если его нет на текущем сайте, Dreamweaver запрашивает, скопировать ли файл на сайт.
Изображения можно также вставлять динамически. Динамические изображения — это изображения, которые часто меняются. Например, в системах ротации рекламных баннеров нужно случайным образом выбирать отдельный баннер из списка потенциальных баннеров и динамически отображать его изображение при запросе страницы.
После вставки изображения можно настроить атрибуты специальных возможностей в его теге для восприятия средствами чтения с экрана для пользователей с ослабленным зрением. Эти атрибуты можно редактировать в коде HTML.
1 Установите курсор в том месте области «Окно документа», где следует вставить изображение, и выполните одно из следующих действий.
• В категории «Общие» на панели «Вставка» нажмите кнопку «Изображения» и выберите значок «Изображение». Когда значок «Изображение» находится на панели «Вставка», его можно перетащить в область «Окно документа» (или в окно представления «Код», если вы работаете с кодом).
• Выберите пункт меню «Вставка» > «Изображение».
• Перетащите изображение с панели Активы («Ресурсы») в нужное место области «Окно документа»; затем перейдите к шагу 3.
• Перетащите изображение с панели «Файлы» в нужное место области «Окно документа»; затем перейдите к шагу 3.
• Перетащите изображение с рабочего стола в нужное место области «Окно документа»; затем перейдите к шагу 3.
2 В появившемся диалоговом окне выполните одно из следующих действий.
• Чтобы выбрать файл изображения, выберите пункт «Файловая система».
• Чтобы выбрать динамический источник изображения, выберите пункт «Источники данных».
• Чтобы выбрать файл изображения из удаленной папки на одном из ваших сайтов Dreamweaver, выберите пункт «Сайты и серверы».
3 Перейдите к нужному изображению или источнику содержимого, чтобы его выбрать.
При работе в несохраненном документе Dreamweaver создает ссылку на файл изображения в виде file://. При сохранении документа в любом месте сайта Dreamweaver преобразует эту ссылку в относительный для документа путь.
Примечание. При вставке изображений можно также указать абсолютный путь к изображению на удаленном сервере (например, если изображение отсутствует на локальном жестком диске). В случае проблем с производительностью во время работы может потребоваться отключение просмотра изображений в представлении «Дизайн», для чего достаточно отменить выбор пункта «Команды» > «Отобразить внешние файлы».
5 Введите значения в поля «Замещающий текст» и «Описание входа в систему», после чего
нажмите кнопку «ОК».
• В поле «Замещающий текст» введите название или краткое описание изображения. Введенная здесь информация считывается средством чтения с экрана. Значение следует ограничить примерно 50 символами. Для подробных описаний укажите в поле «Описание входа в систему» ссылку на файл, который содержит дополнительную информацию об изображении.
• В поле «Описание входа в систему» введите расположение файла, который будет отображаться после щелчка на изображении, или щелкните значок папки, чтобы перейти к этому файлу. В данном текстовом поле содержится ссылка на файл, относящийся к изображению или содержащий о нем дополнительную информацию.
Примечание. Можно заполнить как одно, так и оба поля, в зависимости от потребностей. Средство чтения экрана считывает атрибут изображения Alt.
Примечание. Если нажать кнопку «Отмена», изображение появится в документе, но Dreamweaver не свяжет с ним каких-либо специальных тегов или атрибутов.
6 В инспекторе свойств («Окно» > «Свойства») задайте свойства изображения.
Цель : ознакомиться с Dreamweaver при создании веб-страницы, а так же с рабочей областью программы.
Задачи:
- Исследовать рабочую область.
- Научиться создавать новую страницу, используя содержимое CSS.
- Научиться сохранять документ.
- Научиться изменять название страницы и текстовые заголовки.
- Научиться вставлять текст из внешнего документа.
- Научиться добавлять изображения на передний план и в качестве фоновых изображений.
- Научиться создавать, изменять и выбирать стили CSS.
- Научиться работать с режимами отображения Code (Код) и Code and Design (Код и дизайн).
В процессе выполнения всех лабораторных работу, вами будет создан полноценный веб-сайт туристической компании.
Структура веб-страниц представлена на рисунке 1.
Рисунок 1 - Структура итогового веб-сайта
В результате выполнения данной лабораторной работы у вас должна получиться такая веб-страница (рисунок 1.1):
Рисунок 1.1 - Предварительный просмотр веб-страницы
Использование Welcome screen
Окно Welcome screen (Экран приветствия) обеспечивает быстрый доступ к страницам, с которыми вы недавно работали, помогает легко создавать разные типы страниц и предоставляет прямой доступ к некоторым ключевым темам, в которых можно найти ответы на интересующие вас вопросы. Welcome screen появляется при первом запуске программы или если не открыты какие либо иные документы.
Давайте используем окно Welcome screen, чтобы изучить способы открытия документа.
1. Чтобы открыть новую пустую страницу, щелкните по варианту HTML в столбце Create New (Создать) (рисунок 1.2).
Рисунок 1.2 - Окно Welcome screen
2. Перед вами откроется новый HTML документ (рисунок 1.3).
Рисунок 1.3 - Новое окно HTML
Выбор макета CSS
В Adobe Dreamweaver CS4 есть 32 файла макетов CSS, дизайн каждого из которых отличается. В этом задании мы выберем один файл и изменим его.
- Выполните File => New (Файл => Создать).
- Выберите столбец BlankPage (Пустая страница) в диалоговом окне NewDocument (Создать документ).
- Выберите HTML в столбце PageType (Тип страницы).
- Выберите 2 columnfixed, leftsidebar, headerandfooter (2 колонки фиксированной ширины, боковое поле слева, верхний и нижний колонтитул) в столбце Layout (Макет).
- Не изменяйте настройки других опций, установленные по умолчанию, и щелкните по кнопке Create (Создать).
- Выберите File => Save (Файл => Сохранить).
- После появления диалогового окна Save As (Сохранить как) перейдите в папку lab1. Введите «Umbria.html» и кликните по кнопке Save.
Выбор режима отображения документа
Большинство операций по веб-дизайну мы будем выполнять в окне Design, но помните что у окна Document есть четыре режима отображения (рисунок 1.4):
- Design (Дизайн) – представляет страницу в контексте подобном браузеру;
- Code (Код) – отображает исходный код страницы;
- CodeandDesign (Код и дизайн) – объединяет и режим отображения Design и режим отображения Code. Щелкните по кнопке Split (разбить), чтобы отобразился этот режим отображения.
- Live (Интерактивный просмотр) – представляет страницу в браузере, функционирующем в режиме реального времени.
Рисунок 1.4 - Режимы отображения
Режимы отображения связаны друг с другом. Любые изменения, сделаные в одном из них, сразу можно увидеть и в других.
Изменение заголовка страницы
Заголовок страницы отображается в строке заголовка браузера. Заголовки страницы являются одним из ключевых элементов, используемых поисковыми системами для индексации веб-сайтов.
- Выберите заполнитель текста «Untitled Document» («Документ без названия») в поле Title(название) панели инструментов Document (рисунок 1.5).
- Напечатайте туда «Umbria Hill Town Tours» и нажмите Enter.
Рисунок 1.5 - Панель инструментов Document
Изменение заголовков
Заполнители заголовков в Dreamweaver легко изменить.
1. Два раза щелкните по тексту заполнителя Title, чтобы его выбрать. Затем введите «Путешествуйте по Умбрии с нами» (рисунок 1.6).
Рисунок 1.6 - Изменение заполнителя заголовка
2. Наведите курсор в начало текста заполнителя Main Content (Основное содержание) и выделите всю фразу.
3. Выделив текст, введите «Ты получаешь удовольствие. Мы работаем.» (рисунок 1.7)
Рисунок 1.7 - Изменение заполнителя содержания
4. Выберите File => Save (Файл => Сохранить).
Вставка текста
Простой текс можно изменять так же легко, как и заголовки.
1. Поместите курсор перед простым текстом заполнителя и выделите текст до конца, чтобы выбрать второй заполнитель заголовка и все абзацы.
2. Нажмите клавишу Delete, чтобы удалить то, что вы выбрали.
3. Перейдите к файлу Text.txt расположенный в папке Lessons/lab1/Text.txt.
4. Скопируйте текст в буфер обмена.
5. Вставьте скопированный текст под заголовком «Ты получаешь удовольствие. Мы работаем.» (рисунок 1.8).
Рисунок 1.8 - Вставка текста
Текст автоматически будет отформатирован как абзацы.
6. Таким же образом введите «Umbria Hill Town Tours» в поле Footer.
7. Создайте конец строки нажав Shift+Enter, затем введите «Наши контакты».
Вставка изображений
1. Выберите в боковой панели все содержимое, включая заголовок заполнителя Sidebar1 Content и два последующих абзаца.
2. Нажмите Delete.
3. Щелкните по <h3> и нажмите Delete в селекторе тегов, расположенном внизу окна Document, чтобы удалить тег <h3> (рисунок 1.9).
Рисунок 1.9 - Селектор тегов
4. Если панель Insert (Вставка) является невидимой, сделайте её видимой, выбрав Window => Insert (Окно => Вставка). Выполните Insert => Common => Images (Вставка => Общий => Изображение) (рисунок 1.10).
Рисунок 1.10 - Панель Insert
5. Перейдите к файлам находящимся в папке Lessons/lab1/ и выберите sculpted-garden.jpg и нажмите OK (рисунок 1.11).
Рисунок 1.11 - Вставка изображения sculpted-garden.jpg
6. Поместите курсор в начале основного абзаца, который начинается словами «Приходите и насладитесь», и выберите Images на панели Insert.
7. Выберите изображение italian-hill-town.jpg и нажмите ОК.
8. Введите «italian-hill-town» в качестве дополнительного текста. Нажмите ОК (рисунок 1.12).
9. Если панель Properties невидима, выберите Window => Properties.
10. Выбрав только что вставленное изображение, активируйте fltrt во всплывающем меню Class (Класс) панели Properties.
Класс fltrt аббревиатура от float right, соответственно fltlft – float left.
11. Выберите File => Savе.
Рисунок 1.12 - Вставка изображения italian-hill-town.jpg
Выбор и изменение стилей CSS
В современных веб-страницах используются каскадные таблицы стилей (CSS) для стилизованного оформления и макета. Веб-страницу часто сравнивают со стулом с тремя ножками, в роли которых выступают HTML, CSS и JavaScript, являющиеся компонентами ее структуры. HTML — это содержимое, материал, который вы вводите в режиме отображения Design. CSS — это внешний вид и макет с определенными элементами, цветами и фонами. JavaScript добавляет интерактивную функцию. В этом упражнении вы измените цвет фона существующей страницы, добавите графики на задний план и настроите несколько текстовых атрибутов. Все эти действия выполняются посредством использования панели CSS Styles (Стили CSS).
CSS можно использовать для изменения свойств стиля любого тега HTML, например тега <body>.
1. Выберите Window => CSS Styles (Окно => Стили CSS). Откроется панель CSS Styles.
2. При необходимости щелкните по кнопке All (Все) на панели CSS Styles, чтобы изменить текущий режим Current (Текущий).
Режим All отображает все стили CSS, ассоциируемые с текущей страницей. У вас должен быть открыт документ в окне просмотра документа, чтобы увидеть какие-либо стили на панели CSS Styles.
3. Откройте запись <style> на панели All Rules (Все правила), щелкнув по кнопке (+).
В первой лабораторной работе (lab1) правила стилей находятся вверху документа. При помощи скобок Dreamweaver указывает, что стили являются внутренними для документа: <style>. В последующих уроках вы будете работать со стилями, хранимыми во внешней таблице стилей. Dreamweaver отобразит эти таблицы стилей на панели CSS Styles по имени (например, mystyles.css).
4. Выберите body и щелкните по опции Edit Rule (Редактировать правило) – символ карандашика внизу панели CSS Styles (рисунок 1.13).
Рисунок 1.13 - Панель CSS Styles
5. После появления диалогового окна CSS Rule (Определение правила CSS) для «body» выберите категорию Background (Фон). Щелкните по палитре цветов Background чтобы открыть color picker (выбор цвета).
6. Используйте «пипетку» в выборе цвета и щелкните по ячейке белого цвета.
Рисунок 1.14 - Диалоговое окно CSS Rule
7. Щелкните по кнопке ОК, чтобы подтвердить изменение. Dreamweaver обнаружит новый цвет на панели Properties. Вам, возможно, потребуется расширить нижнюю границу панели CSS Styles, чтобы увеличить панель Properties и увидеть необходимый цвет.
8. Выберите File => Save.
Вставка графического фона заголовка
В то время как изображения переднего плана вставляются непосредственно на страницу, фоновые изображения размещаются при помощи CSS.
Рисунок 1.15 - Диалоговое окно CSS Rule (Background)
Настройка текста, шрифтов и цветов
1. Поместите курсор в любое место текста заголовка «Путешествуйте по Умбрии с нами».
2. Выберите <h1> в селекторе тегов (рисунок 1.16)
Рисунок 1.16 - Выделенный заголовок h1
Рисунок 1.17 - Диалоговое окно CSS Rule (Type)
Использование панели Properties
Рисунок 1.18 - Диалоговое окно New Css Rule
9. Используйте «пипетку», чтобы выбрать новый цвет любой, отличный от белого. Щелкните по кнопке ОК (рисунок 1.19).
Рисунок 1.19 - Результат изменений
В правила стиля теперь включено новое правило, которое вы можете применять к любым дополнительным словам, фразам или предложениям в абзаце в рамках mainContent div. Просто выберите текст, который хотите изменить, и выделите его, щелкнув по кнопке I на панели Properties. Вы воспользовались панелью Properties, чтобы создать выделенный текст и добавить новые правила CSS к стилям.
Предварительный просмотр страниц в браузере
Выбрав Preview/Debug (Просмотр и отладка в браузере) в окне Document (рисунок 1.20), вы сможете выполнить предварительный просмотр в браузере.
Рисунок 1.20 - Команда Preview
Поздравляем! Вы создали свою первую веб-страницу в Dreamweaver (рисунок 1.21): изменили текст и цвета, добавили изображения и новые правила CSS, а также быстро создали профессиональную веб-страницу. Вы выполнили предварительный просмотр страницы в браузере.
Читайте также: