Лабораторная работа №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 для обозначения атрибутов будут использоваться одинарные кавычки (апострофы).