Dreamweaver как сделать фон

Обновлено: 07.07.2024

Существует множество различных типов графических файловых форматов, но в веб-страницах обычно используются три из них — GIF, JPEG и PNG. Форматы файлов GIF и JPEG поддерживаются лучше всего и доступны для просмотра в большинстве браузеров.

GIF (Graphic Interchange Format — формат обмена графикой)

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

JPEG (Joint Photographic Experts Group — объединенная группа экспертов по фотографии)

Формат файлов JPEG отлично подходит для фотографий и изображений с плавными переходами тонов, так как файлы JPEG могут содержать миллионы цветов. С повышением качества файла JPEG возрастает его размер и время загрузки. Часто хорошего баланса между качеством изображения и размером файла можно достичь путем сжатия файла JPEG.

PNG (Portable Network Graphics — переносимая сетевая графика)

Формат файлов PNG — это свободная от патентов замена для GIF, которая поддерживает индексированные цвета, оттенки серого и полноцветные изображения, а также альфа-канал для прозрачности. PNG — «родной» формат файлов Adobe® Fireworks®. В файлах PNG сохраняется вся исходная информацию о слоях, векторах, цветах и эффектах (вроде отбрасываемых теней), а все элементы в любое время полностью доступны для изменения. Для распознавания в Dreamweaver файлы PNG должны иметь расширение .jpg.

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

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

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

Руководство по вставке изображений см. в разделе Добавление изображений.

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

В категории «Общие» на панели «Вставка» щелкните значок «Изображения» .

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

Перетащите изображение с панели «Ресурсы» ( «Окно» > «Ресурсы» ) в нужное место области «Окно документа», а затем перейдите к шагу 3.

Перетащите изображение с панели «Файлы» в нужное место области «Окно документа»; затем перейдите к шагу 3.

Перетащите изображение с рабочего стола в нужное место области «Окно документа»; затем перейдите к шагу 3.

В появившемся диалоговом окне выполните одно из следующих действий.

Чтобы выбрать файл изображения, выберите пункт «Файловая система» .

Чтобы выбрать динамический источник изображения, выберите пункт «Источники данных» .

Чтобы выбрать файл изображения из удаленной папки на одном из ваших сайтов Dreamweaver, выберите пункт «Сайты и серверы» .

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

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

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

Введите значения в поля «Замещающий текст» и «Описание входа в систему», после чего нажмите кнопку «ОК».

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

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

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

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

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

Задание свойств изображения

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

Чтобы просмотреть инспектор свойств для выбранного изображения, выберите пункт меню «Окно» > «Свойства» .

В текстовом поле под изображением эскиза введите имя, по которому можно будет ссылаться на изображение как в вариантах поведения Dreamweaver (например, «Замена изображений»), так и при использовании языка сценариев типа JavaScript или VBScript.

W и H (ширина и высота)

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

Если заданные значения «Ш» и «В» не соответствуют фактической ширине и высоте изображения, оно может неправильно отображаться в браузере. (Чтобы восстановить исходные значения, щелкните метки текстовых полей «Ш» и «В» или нажмите кнопку сброса размера изображения, отображаемую справа от полей «Ш» и «В» при вводе нового значения.)

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

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

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

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

Средства «Имя карты» и «Активная область»

Позволяют разметить и создать клиентскую карту ссылок.

Указывает фрейм или окно, в котором будет загружена связанная страница. (Этот пункт недоступен, если изображение не привязано к другому файлу.) В списке «Целевой объект» отображаются имена всех фреймов из текущего набора. Можно также выбрать одно из зарезервированных имен целевых объектов:

_blank означает загрузку связанного файла в новом окне браузера без имени.

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

_self — загрузка связанного файла в том же фрейме или окне, что и ссылка. Этот целевой объект установлен по умолчанию, поэтому обычно ее не требуется указывать.

_top — загрузка связанного файла в полном окне браузера с удалением всех фреймов.

Запускает редактор изображений, указанный в установках «Внешние редакторы», и открывает выбранное изображение.

Обновить из оригинала

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

Изменение параметров изображения

Открывает диалоговое окно «Оптимизация изображения» и позволяет оптимизировать изображение.

Урезает размер изображения, удаляя нежелательные области из выделенного изображения.

Интерполирует изображение с измененным размером, улучшая его качество при новых размере и форме.

Яркость и контраст

Регулирует параметры яркости и контрастности изображения.

Регулирует четкость изображения.

Редактирование атрибутов специальных возможностей изображений в коде

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

Редактируйте соответствующие атрибуты изображения в представлении кода.

Щелкните правой кнопкой мыши (Windows) или щелкните, удерживая нажатой клавишу Control (Macintosh), затем выберите команду «Изменить тег».

Измените значение атрибута Alt в инспекторе свойств.

Dreamweaver дает возможность визуально изменять размер элементов (изображений, внешних модулей, файлов Shockwave и SWF, апплетов и элементов ActiveX).

Визуальное изменение размера изображения помогает увидеть, как изображение влияет на макет при различном масштабе, но не масштабирует сам файл изображения до указанных пропорций. Если визуально изменить размер изображения в Dreamweaver без масштабирования его файла до нужного размера в программе для редактирования изображений (например Adobe Fireworks), в браузере пользователя при загрузке страницы изображение будет масштабироваться. Это может увеличить время загрузки страницы и привести к неправильному отображению изображения в пользовательском браузере. Для уменьшения времени загрузки и гарантии того, что все экземпляры изображения будут отображены в одинаковом размере, воспользуйтесь графическим редактором для масштабирования изображений.

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

Изучите этот раздел, чтобы узнать, как использовать панель CSS Designer для применения градиентов к фону веб-страницы и их редактирования.

С помощью панели конструктора CSS можно применять градиенты к фону страниц веб-сайтов. Свойство градиента находится в категории фона.

Свойство градиента

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

Выберите цвета из разных цветовых моделей ( RGBa , HSLa ) или с помощью шестнадцатеричного кода цвета . Затем сохраните различные сочетания цветов в виде цветовых образцов.
- Чтобы сбросить вновь заданный цвет на исходный, щелкните исходный цвет (K).
- Для изменения порядка расположения цветовых образцов перетащите цветовые образцы в нужное положение.
- Чтобы удалить цветовой образец, перетащите его за пределы панели.
Давайте разберем следующий код.
- 57deg : указывает угол линейного градиента
- rgba (255, 255, 255, 1.00) : цвет первой контрольной точки цвета
- 0% : указывает положение контрольной точки цвета
В Dreamweaver значения положения контрольных точек цвета указываются в процентах. Если указать другие единицы, например «px» или «em», Dreamweaver воспримет значение как «nil». Кроме того, Dreamweaver не поддерживает цвета CSS. Поэтому, если в коде задать эти цвета, программа воспримет их как значения «nil».

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

Вместе с форматом w3c Dreamweaver может записать следующие префиксы браузеров:

По умолчанию Dreamweaver записывает префиксы браузера для Webkit и интерактивного просмотра Dreamweaver. В диалоговом окне Настройки ( Настройки > Стили CSS ) можно выбрать другие браузеры.

Для теней Box всегда формируются префиксы Webkit и w3c, независимо от того, выбраны они в настройках или нет.

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

Порядок фоновых изображений и градиентов (в котором они расположены в коде) можно изменить одним щелчком мыши.

Щелкните по стрелке рядом с ближайшим свойством url или gradient в конструкторе CSS.

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

В Dreamweaver вы можете изменить фон и цвета текста, доступные в категориях «Внешний вид». Обратите внимание, что параметры CSS рекомендуется по вариантам HTML. Когда вы используете опции «Внешний вид» (CSS), Dreamweaver автоматически создает соответствующие стили для тега body. Когда вы используете какие-либо параметры CSS в диалоговом окне «Свойства страницы», Dreamweaver автоматически создает соответствующие стили и перечисляет их на панели «Стили CSS».

Хотя вы можете применять глобальные настройки, такие как размер текста и цвет, в диалоговом окне «Свойства страницы» вы можете переопределить эти параметры с другими параметрами форматирования в определенных случаях. Например, вы можете установить весь текст в Helvetica в свойствах страницы, а затем изменить шрифт для заголовков в Arial с помощью CSS.

Чтобы изменить настройки шрифта, цвет фона, цвет текста и поля страницы для всей страницы, выполните следующие действия:

Выберите «Изменить» → «Свойства страницы».

Отображается категория появления (CSS) диалогового окна «Свойства страницы».

В раскрывающемся списке «Шрифт страницы» укажите шрифты, которые вы хотите для текста на своей странице.

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

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

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

В раскрывающемся списке «Размер» укажите размер шрифта, который требуется для текста на вашей странице.

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

Нажмите поле «Цвет текста», чтобы открыть палитру цветов. Выберите любой цвет, который вам нравится.

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

Щелкните поле «Цвет фона», чтобы открыть палитру цветов. Выберите любой цвет, который вам нравится.

Выбранный вами цвет заполняет окно выбора цвета, но цвет не заполняет фон, пока вы не нажмете кнопку «Применить» или «ОК».

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

Когда вы вставляете фоновое изображение, оно автоматически повторяется или плитки, по страницам и вниз по странице, если вы не выберете опцию из раскрывающегося списка «Повторить». No-Repeat предотвращает повторное воспроизведение фонового изображения. Повторите-X и повторите-Y по вертикали (по оси x) или по горизонтали (по оси y), соответственно, переверните изображение по всей странице.

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

Большинство веб-браузеров добавляют небольшое пространство в верхнюю и левую стороны окна браузера вокруг любой веб-страницы. Ввод 0 во всех четырех из этих полей удаляет любое пространство по умолчанию, позволяющее создавать проекты, которые начинаются с краю браузера.

Нажмите «ОК», чтобы завершить и закрыть диалоговое окно «Свойства страницы».

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

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

Кредит: Фото Кейси Столла

Текст, помещенный на определенные фоны, может быть трудночитаемым. Внимательно выберите фоновые изображения и убедитесь, что ваш фон и текст имеют большой контраст. Чтение на экране компьютера достаточно сложно.

С помощью CSS вы можете иметь гораздо больший контроль над отображением фонового изображения. Когда вы создаете стиль фона CSS, вы можете вставить фоновое изображение, которое не повторяется или повторяется только по оси Y или по оси X на странице.

Чтобы вставить фоновое изображение в Dreamweaver, выберите «Изменить» → «Свойства страницы», нажмите кнопку «Обзор» справа от поля «Фоновое изображение» и выберите изображение, которое вы хотите использовать в качестве фона. Если изображение еще не находится в папке вашего локального сайта, Dreamweaver предлагает его скопировать, когда вы нажмете OK.

Когда вы вставляете изображение, используя функцию «Свойства страницы Dreamweaver», вы можете использовать раскрывающийся список «Повторить», чтобы указать, как изображение повторяется на странице. Когда вы укажете опцию повтора, Dreamweaver автоматически создает стиль для страницы с этими настройками фона. Если вы используете диалоговое окно «Определение CSS», чтобы редактировать параметры фона в стиле кузова, вы можете указать, где будет отображаться фоновое изображение.

Читайте также: