Разработка WEB / Лабораторная работа 2 Dreamweaver / Вставка графического изображения
.pdf
веб-студия
SEVIDI
разработка веб-сайтов и уроки по созданию сайтов
Урок 9
Вставка графического изображения
В первом цикле уроков "Мой первый сайт", мы создали папку images, куда поместили несколько рисунков. Воспользуемся этими рисунками и разместим их на сайт с помощью Dreamweaver. Установим текстовой курсор перед строкой "Компания АВС — поставки электронной техники ведущих мировых производителей."
|
|
|
|
|
яSevidi |
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
б |
|
|
|
|
е |
|
|
|
|
|
В |
|
|
|
|
|
Теперь обратим внимание на вкладку Общее, панели Вставить. Там находится кнопка Изображение.
1
|
|
|
|
|
яSevidi |
|
|
|
|
и |
|
|
|
|
д |
|
|
|
|
у |
|
|
|
|
|
т |
|
|
|
|
|
с |
|
|
|
|
|
- |
|
|
|
|
б |
|
|
|
|
е |
|
|
|
|
|
Нажимаем на кнопку и в появивш мся диалоговом окне выбираем кнопку Изображение. Нажимаем на кнопку. На экране |
|||||
В |
|
|
|
|
|
появится диалоговое окно Выбрать источник изображения. |
|
|
|||
|
|
|
|
|
|
2
|
|
|
яSevidi |
|
|
и |
|
|
д |
|
|
у |
|
|
|
т |
|
|
|
с |
|
|
|
- |
|
|
|
В поле ввода Папка выбираем изв стнуюебнам папку images. В этой папке имеется знакомый нам рисунок "Логотип АВС", в файле abc.gif. Выбираем файл.ВСправа мы увидим его изображение. Раскрывающейся список Тип файлов, задает тип графических файлов. В поле ввода URL-адрес мы можем ввести полный интернетадрес изображения, если оно находится на другом web-сервере. Раскрывающейся список Относительно позволяет нам задать абсолютный (пункт Документ) или относительный (пункт Корень сайта) интернетадрес вставляемого изображения.
Выбрав нужный файл, нажимаем ОК. Откроется еще одно диалоговое окно Атрибуты доступности тега изображения.
3
|
|
|
яSevidi |
|
|
и |
|
|
д |
|
|
у |
|
|
|
т |
|
|
|
с |
|
|
|
- |
|
|
|
Комбинированный список Замещающийебт кст служит для задания текста замены. Это придумано для пользователей медленных каналов связи. ЕслиВнам надо выводить на экран более подробный текст замены, его нужно оформить в отдельный файл и указать в поле ввода Описание входа в систему.
Закончив ввод данных, нажимаем кнопку ОК. Dreamweaver сам поместит графическое изображение в то место, где в данный момент находится текстовой курсор. Наша страница примет вид, указанный на рисунке.
4
|
|
|
яSevidi |
|
|
и |
|
|
д |
|
|
у |
|
|
|
т |
|
|
|
с |
|
|
|
- |
|
|
|
Для того чтобы уменьшить изображениеб, щелкнем по нему мышью и выделим рисунок (Dreamweaver автоматически выделит изображение после егоВвставки). После этого вокруг изображения появится тонкая черная рамка, на правой и нижней границе которой появятся небольшие черные квадратики. Это маркеры изменения размера. Мы можем "захватить"мышью любой маркер и перетащить его на новое место, изменив тем самым горизонтальный и вертикальный размер изображения. А если мы хотим, чтобы оба размера изменились пропорционально, то перетащим мышью маркер, находящийся в правом нижнем углу изображения, при нажатой клавише <Shift>.
В окне веб-браузера это будет выглядеть ТАК.
5
Компания АВС
Компания АВС — поставки электронной техники ведущих мировых производителей.
В компании АВС вы всегда найдете:
телевизоры |
|
|
|
|
|
|
видиомагнотофоны |
|
|
|
|
|
|
видеоплейеры |
|
|
|
|
|
|
музыкальные центры |
|
|
|
|
|
|
компьютеры |
|
|
|
|
|
|
принтеры и сканеры |
|
|
|
|
|
|
и другие товары. |
|
|
|
|
|
яSevidi |
|
|
|
|
|
|
|
Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта. |
||||||
Компания оказывает услуги по обслуживанию продаваемой электоники. |
||||||
Пишите сюда. |
|
|
|
|
|
|
© АВС |
|
|
|
|
и |
|
|
|
|
|
|
||
|
|
|
|
д |
|
|
|
|
|
у |
|
|
|
|
|
|
т |
|
|
|
|
|
|
с |
|
|
|
|
|
|
- |
|
|
|
|
|
б |
|
|
|
|
|
е |
|
|
|
|
|
|
В |
|
|
|
|
|
6