Dreamweaver CC - Как добавить изображения и фоны [ПОЛНОЕ РУКОВОДСТВО]
Содержание
- Введение
- Различия между изображениями и фонами в Dreamweaver
- Добавление изображений в режиме "Дизайн"
- Основные свойства изображений
- Добавление и удаление изображений
- Изменение свойств изображений
- Альтернативный текст для изображений
- Добавление фона на Div-элемент
- Опции фона: цвет и градиент
- Использование фонов для адаптивного дизайна
- Заключение
- Ссылки на ресурсы
Введение
Добро пожаловать! В этой статье мы рассмотрим, как добавлять изображения и фоны в Adobe Dreamweaver CC. Если вы уже следовали предыдущим видеоурокам, то уже можете создавать простую базовую структуру. В противном случае, вы можете скачать ее из описания к видео. Для лучшего понимания мы добавили видимые черные границы ко всем тегам Div.
🖼️ Различия между изображениями и фонами в Dreamweaver
Перед тем, чтобы продолжить, нам необходимо разобраться в разнице между изображениями и фонами в Dreamweaver. Изображения представляют собой файлы, находящиеся внутри тега Div. Если размер блока Div изменяется, изображение сохраняет свой размер. С другой стороны, фоновое изображение всегда полностью покрывает тег Div. Поэтому, если размер блока Div изменяется, фон также изменяется. Давайте рассмотрим это подробнее.
📷 Добавление изображений в режиме "Дизайн"
Изображение или фотографию можно импортировать в режиме "Дизайн". Например, вы можете скопировать и вставить изображение или перетащить сам файл. Вы увидите, что текст не может находиться на изображении, за исключением случаев, когда используются переносы строк. Импортированное изображение указывается через команду "img src=...", а ширина и высота задаются в пикселях и могут быть отредактированы путем перетаскивания маленьких квадратов на изображении. Изображение можно перемещать, выбрав его и перетащив. Для удаления изображения просто выберите его и нажмите комбинацию клавиш "CTRL+X". На панели "Свойства" отображаются все свойства изображения. Просто выберите его, когда отключен "Режим предварительного просмотра". "Src" задает изображение, "Link" добавляет веб-адрес назначения при щелчке по изображению. Разделы "W" и "H" отображают размер изображения. Рядом с кнопкой "Edit" можно применять простые изменения к изображению. Для более сложных изменений можно использовать Photoshop, щелкнув по значку "PS", если он установлен. Обратите внимание, что все эти изменения являются постоянными, поэтому, возможно, вам понадобится использовать "Отменить изменение" для возвращения к исходному состоянию. "Alt" означает альтернативный текст, который отображается вместо изображения в случае, если оно по какой-либо причине не может быть показано. Например, мы можем импортировать изображение для создания баннера. Не забудьте настроить правильный макет в конце. Вы также можете импортировать меньшие изображения, которые могут представлять содержимое каждого столбца.
🎨 Добавление фона на Div-элемент
Помимо изображений, вы также можете добавлять фоны на Div-элементы. Все опции фона находятся в списке селекторов, при выборе нужного Div-элемента и переходе к вкладке "Фон". Например, вы можете установить простой цвет фона, который будет влиять на Div-элементы без фона и находящиеся на цветном Div-элементе. Чтобы добавить фон, вы также можете использовать изображение. Перейдите к опции "background-image", выберите "url" и выберите изображение через кнопку "Папка". Изображение будет покрывать любой предыдущий цвет фона. Вы также можете использовать градиентный фон. Если размер использованного изображения неправильный, просто перейдите к настройке "background-size" и выберите пиксели, чтобы установить правильный размер. Не забудьте включить "Режим предварительного просмотра". Учтите, что текст Div-элемента будет отображаться на фоне. Кроме того, если добавить фон на другой Div-элемент, который находится на нем, он будет отображаться сверху.
📱 Использование фонов для адаптивного дизайна
При создании веб-сайта, который должен адаптироваться к разным размерам экранов, рекомендуется использовать в большинстве случаев фоны. Это особенно полезно, если вам необходимо изменять размер изображения в зависимости от размера блока Div, например, когда изображение является подписью к чему-либо. Теперь, когда вы знаете об этом, вы можете просто импортировать изображение для баннера, фон для Div-элемента и, если хотите, нежный сплошной цвет для колонок. Все зависит от вас! Имейте в виду, что вам может потребоваться адаптировать макеты в случае импорта изображений. Итак, с практикой!
Заключение
Теперь вы знаете, как добавлять изображения и фоны в Adobe Dreamweaver CC. Используйте эти знания, чтобы создавать удивительные веб-сайты с привлекательным дизайном. Спасибо за просмотр!
Ссылки на ресурсы
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
