Лабораторная работа №3. Графика в Web-дизайне
Настало время применить полученные знания на практике. Для этого с помощью любого графического редактора, позволяющего оперировать текстурными заливками, например программы Macromedia FreeHand, подготовьте простой файл, заполненный однородной текстурой. Сохраните этот файл на диске в папке Images под именем background.gif. Поместите в туже папку какую-либо иллюстрацию, например вашу отсканированную фотографию, назвав данный файл mypicture.jpg.
Теперь откройте файл index.html и дополните тег <BODY> атрибутом BACKGROUND:
<BODY BGCOLOR=”#FCEAD4” TEXT=”#000000 LINK=”#014CA1” VLINK=”#FD1200” ALINK=”#FD1200” BACKGROUND=”images\backgroung.gif”>
После тега описания первого абзаца <P> добавим еще одну директиву HTML:
<P ALIGN=”JUSTIFY”><FONT FACE=”Verdana, Sans Serif” SIZE=”3”><IMG SRC=”images\mypicture.jpg” WIDTH=”ширина картинки в пикселах” HEIGHT=”высота картинки в пикселах” ALIGN=”LEFT” BORDER=”0” ALT=”Это моя фотография”>
Таким образом, код данного участка нашего HTML-документа будет иметь следующий вид:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Моя первая веб-страничка</TITLE>
</HEAD>
<BODY BGCOLOR=”#FCEAD4” TEXT=”#000000” LINK=”#014CA1” VLINK=”#FD1200” ALINK”#FD1200” BACKGROUND=”images\background.gif>
<H1 ALIGN=”CENTER”>ДОБРО ПОЖАЛОВАТЬ НА МОЮ ДОМАШНЮЮ СТРАНИЧКУ!</H1>
<P ALIGN=”JUSTIFY”><FONT FACE=”Verdana, Sans Serif” SIZE=”3”><IMG SRC=”images\mypicture.jpg” WIDTH=”ширина картинки в пикселах” HEIGHT=”высота картинки в пикселах” ALIGN=”LEFT” BORDER=”0” ALT=”Это моя фотография”> Спасибо Вам, уважаемый посетитель, за то, что ВЫ нашли время и возможность заглянуть на мою страничку во Всемирной Сети. Здесь Вашему вниманию будет предложена информация <EM>о моих увлечениях, моей биографии, моих друзьях, работе и семье</EM>. В отдельной рубрике я опубликую несколько собственных фотографий. Надеюсь, они вам понравятся. </FONT>
………………….
ЗАДАНИЕ:
Сохраните внесенные в документ изменения и откройте Вашу страничку в браузере. Как видите, ваша страничка приобрела приятный текстурный фон, в левой части экрана появилась фотография ее владельца. Добавив отображение фона во все остальные документы сайта, сохраните их на диске, после чего заново опубликуйте измененные веб-страницы в Internete, не забыв перенести на сервер используемые вами графические изображения – файлы background.gif и mypictyre.jpg.
Для добавления рисунка в HTML-файл, редактируемый в программе Dreamweaver, воспользуйтесь кнопкой Add Image, расположенной на панели инструментов. В поле Source вам следует указать полный путь к файлу, содержащему требуемое изображение, также вы можете воспользоваться расположенной справа от данного поля кнопкой, чтобы отыскать рисунок вручную. Поле Alt text предназначено для записи альтернативного текста, который будет демонстрироваться в окне браузера в случае, если картинку по каким-либо причинам загрузить не удалось. В полях Width и Height указывается ширина и высота рисунка в пикселах, в полях HSpace и VSpace вы можете настроить величину горизонтальных и вертикальных отступов от изображения, что может быть очень полезно, например, если Вы планируете организовать обтекание рисунка текстом. В поле Border укажите толщину обрамляющей рамки изображения (в пикселах), раскрывающийся список Align предназначен для выбора варианта выравнивания рисунка на странице.
В самой нижней части окна имеются два флажка, при помощи которых вы можете настроить режим использования кавычек в теге IMG: установка флажка Quote all attributes подразумевает, что все атрибуты тега IMG будут обозначены кавычками, а при установке флажка Single quotes on attributes для обозначения атрибутов будут использоваться одинарные кавычки (апострофы).