Файл: Лабораторнаяработа Графиканавеб странице. Основные способы применения графики.docx
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 03.12.2023
Просмотров: 47
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Л а б о р а т о р н а я р а б о т а № 6 . Г р а ф и к а н а в е б - с т р а н и ц е .Основные способы применения графики.Фоновое изображениеДопустим, что у нас заготовлен соответствующий фоновый рисунок (откройте на диске С папку Мои документы/Мои рисунки/ и выберите любой понравившейся рисунок, сохраните его в созданную папку Лаб№6, переименуйте его например img1.jpg.(Если в папке Мои рисунки нет подходящего фона для страницы, то можно сделать так:_ Открыть текстовый редактор MS Word;_ Нарисовать большой прямоугольник на размер страницы;_ Добавить заливку – градиентная , выберите готовую заготовку;_ Выполните копирование вида экрана – нажмите кнопку PrintScreen;_ Зайдите в любой графический редактор, например в Paint;_ Выполните Правка/Вставить, вырежьте изображение и вставьте в новый пустой файл;_ Выполните Файл/Сохранить как, дайте имя файлу - img1 и Тип файла jpg).Чтобы поместить рисунок на веб-страницу в качестве фона, нужно установить в теге атрибутBACKGROUXD= со значением, содержащим имя файла рисунка.Если рисунок меньше окна браузера, то он будет повторяться по горизонтали и по вертикали. Это происходит автоматически, и до недавнего времени это нельзя было отменить. Теперь же, если вы не хотите повторения можно указать либо относительное местоположение файла рисунка (то есть путь доступа к нему относительно расположение исходного HTML-файла), либо его полный URL-адрес. Здесь и далее мы предполагаем, что вы разместили в той же папке, что и HTML-файл.Самостоятельно создайте новую web-страничку и примените к ней фоновый рисунок. Примените также цвет к тексту, так чтобы он был четким на вашем фоне. В качестве заголовка используйте следующий текст - Александр Сергеевич Пушкин.Затем введите на веб- страницу следующий текст - Творчество Александра Сергеевича Пушкина. Применитеформатирование по центу и тип заголовка – первый. Затем установите горизонтальную линию.Затем впишите по центру, курсивом и типом заголовка второй текст - Пушкин: Краткий очерк жизни и творчества.Установите горизонтальную линию.Затем впишите по ширине и шрифтом меньше на один пункт от основного текста следующий текст: 1799, 26 мая (6
июня) - А. С. Пушкин родился в Москве в семье офицера Гвардии Сергея Львовича Пушкина и внучки Ганнибала А. П.,сына эфиопского князя, попавшего в Россию ок. 1706 г. (Арап Петра Великого), Надежды Осиповны Ганнибал.Установите горизонтальную линию.Затем впишите по центру и третьим типом заголовка, текст - Стихи Пушкина, на следующей строке, подчеркнутый текст- Я вас любил: любовь еще, быть может.Установите горизонтальную линию.Затем впишите с левой стороны и шрифтом меньше на один пункт от основного текста следующий текст:«Я вас любил: любовь еще, быть можетВ душе моей угасла не совсем;Но пусть она вас больше не тревожит;Я не хочу печалить вас ничем.Я вас любил безмолвно, безнадежно,То робостью, то ревностью томим;Я вас любил так искренно, так нежно,Как дай вам бог любимой быть другим.1829»Графические иллюстрацииПроиллюстрируем наш текст, вставив перед стихотворением фотографию Пушкина. Предположим, что фотография унас уже готова и лежит в текущей папке Лаб6 под именем Pushkin.jpg. Вставить ее в текст можно с помощью тега ,например, вот так:На месте этой записи браузер отобразит нашу картинку.Атрибуты тега .Изображения загружаются из сети всегда намного медленнее, чем обычный текст. Поэтому сам файл картинки долженбыть не очень большого объема. Многие браузеры, начав загружать картинку, приостановят загрузку последующего текстадо тех пор, пока картинка не будет загружена полностью. Но для читателя было бы удобнее, если бы текст продолжалзагружаться параллельно с картинкой: пока она догружается, можно было бы что-то уже читать. Чтобы браузер мог этосделать, ему нужно явно указать размеры будущей картинки с помощью атрибутов WIDTH= и HEIGHT=:Вообще говоря, с помощью этих атрибутов можно задать какие угодно размеры картинки, “растянув” или сжав ее.Однако обычно этого не делают. Представлять картинку меньшей, чем она есть, нецелесообразно. Файлы для картинокбольшого размера имеют большой размер и грузятся из Интернета, соответственно, намного дольше. Лучше сделать
маленький файл для картинки маленького размера и быстро загрузить его. А если представить картинку большей, чем онаесть, то, как правило, она будет выглядеть малопривлекательно за счет появления “ступенчатости” как в формах, так и вцвете.Далее, хорошим тоном является наличие так называемого альтернативного текста для тех случаев, когда в браузереотключен просмотр графики. Тогда на месте нашей картинки будет выведен прямоугольник соответствующего размера,который сопровождается пояснением, что за картинка на этом месте должна быть. Альтернативный текст вводится какзначение атрибута ALT:Вокруг рисунка можно отобразить рамку. Толщина этой рамки задается как значение атрибута BORDER=. Если мы, какв данном случае, не хотим отображать рамку вокруг рисунка, то можем ничего и не указывать, так как большинствобраузеров по умолчанию рамку не рисуют. Но некоторые браузеры все же это делают, и “для верности” неплохо бы указатьи отсутствие рамки тоже:Картинки могут содержать гиперссылки. Например, можно при щелчке на изображении Пушкина перейти на сайттворчества Пушкина.Тег может иметь собственный атрибут ALIGX=, который управляет расположением рисунка относительнотекста. Если рисунок “встроен” в текст, то есть несколько вариантов его расположения:ALIGX="left" — текст обтекает рисунок, который располагается слева;ALIGX="right" — текст обтекает рисунок, который располагается справа;ALIGX="top" — рисунок располагается внутри текстовой строки, и его верхняя граница совпадает с верхней границейбукв текста (можно также применять значение "texttop");ALIGX="middle" — рисунок располагается внутри текстовой строки, которая вертикально выравнивается по центрурисунка (можно также при менять значение "absmiddle");ALIGX="bottom" — рисунок располагается внутри текстовой строки, и его нижняя граница совпадает с нижнейграницей букв текста (можно также применять значение "absbottom" или "baseline").
Кроме того, чтобы рисунок не слишком “прижимался” к тексту, можно оставить между ними немного “воздуха”. Дляэтого в теге используют атрибуты HSPACE= и VSРАСЕ=, значения которых задают соответственно горизонтальноеи вертикальное “поля” рисунка.Самостоятельно добавьте обтекание рисунка текстом и установите отступы.Результат у Вас должен получится похожим на рис.6.1.Браузер Internet Explorer (версия 4 и выше) позволяет с помощью тега загружать и просматривать такжевидеофрагменты в формате AVI (Video for Windows). Для этого можно установить атрибут DYXSRC=, в качестве значениякоторого указать имя AVI-файла. При этом можно дополнительно указать в атрибуте START=, когда следует начинатьпроигрывание видео: "FILEOPEX" — сразу после загрузки файла или "MOUSEOVER" — после наведения указателямыши на изображение. Атрибут LOOP= позволяет установить количество проигрываний: "0" означает бесконечноеповторение, а любое другое число указывает точное количество повторов.Рис.6.1. Пример странички с фоновым рисунком и иллюстрацией
июня) - А. С. Пушкин родился в Москве в семье офицера Гвардии Сергея Львовича Пушкина и внучки Ганнибала А. П.,сына эфиопского князя, попавшего в Россию ок. 1706 г. (Арап Петра Великого), Надежды Осиповны Ганнибал.Установите горизонтальную линию.Затем впишите по центру и третьим типом заголовка, текст - Стихи Пушкина, на следующей строке, подчеркнутый текст- Я вас любил: любовь еще, быть может.Установите горизонтальную линию.Затем впишите с левой стороны и шрифтом меньше на один пункт от основного текста следующий текст:«Я вас любил: любовь еще, быть можетВ душе моей угасла не совсем;Но пусть она вас больше не тревожит;Я не хочу печалить вас ничем.Я вас любил безмолвно, безнадежно,То робостью, то ревностью томим;Я вас любил так искренно, так нежно,Как дай вам бог любимой быть другим.1829»Графические иллюстрацииПроиллюстрируем наш текст, вставив перед стихотворением фотографию Пушкина. Предположим, что фотография унас уже готова и лежит в текущей папке Лаб6 под именем Pushkin.jpg. Вставить ее в текст можно с помощью тега ,например, вот так:На месте этой записи браузер отобразит нашу картинку.Атрибуты тега .Изображения загружаются из сети всегда намного медленнее, чем обычный текст. Поэтому сам файл картинки долженбыть не очень большого объема. Многие браузеры, начав загружать картинку, приостановят загрузку последующего текстадо тех пор, пока картинка не будет загружена полностью. Но для читателя было бы удобнее, если бы текст продолжалзагружаться параллельно с картинкой: пока она догружается, можно было бы что-то уже читать. Чтобы браузер мог этосделать, ему нужно явно указать размеры будущей картинки с помощью атрибутов WIDTH= и HEIGHT=:Вообще говоря, с помощью этих атрибутов можно задать какие угодно размеры картинки, “растянув” или сжав ее.Однако обычно этого не делают. Представлять картинку меньшей, чем она есть, нецелесообразно. Файлы для картинокбольшого размера имеют большой размер и грузятся из Интернета, соответственно, намного дольше. Лучше сделать
маленький файл для картинки маленького размера и быстро загрузить его. А если представить картинку большей, чем онаесть, то, как правило, она будет выглядеть малопривлекательно за счет появления “ступенчатости” как в формах, так и вцвете.Далее, хорошим тоном является наличие так называемого альтернативного текста для тех случаев, когда в браузереотключен просмотр графики. Тогда на месте нашей картинки будет выведен прямоугольник соответствующего размера,который сопровождается пояснением, что за картинка на этом месте должна быть. Альтернативный текст вводится какзначение атрибута ALT:Вокруг рисунка можно отобразить рамку. Толщина этой рамки задается как значение атрибута BORDER=. Если мы, какв данном случае, не хотим отображать рамку вокруг рисунка, то можем ничего и не указывать, так как большинствобраузеров по умолчанию рамку не рисуют. Но некоторые браузеры все же это делают, и “для верности” неплохо бы указатьи отсутствие рамки тоже:Картинки могут содержать гиперссылки. Например, можно при щелчке на изображении Пушкина перейти на сайттворчества Пушкина.Тег может иметь собственный атрибут ALIGX=, который управляет расположением рисунка относительнотекста. Если рисунок “встроен” в текст, то есть несколько вариантов его расположения:ALIGX="left" — текст обтекает рисунок, который располагается слева;ALIGX="right" — текст обтекает рисунок, который располагается справа;ALIGX="top" — рисунок располагается внутри текстовой строки, и его верхняя граница совпадает с верхней границейбукв текста (можно также применять значение "texttop");ALIGX="middle" — рисунок располагается внутри текстовой строки, которая вертикально выравнивается по центрурисунка (можно также при менять значение "absmiddle");ALIGX="bottom" — рисунок располагается внутри текстовой строки, и его нижняя граница совпадает с нижнейграницей букв текста (можно также применять значение "absbottom" или "baseline").
Кроме того, чтобы рисунок не слишком “прижимался” к тексту, можно оставить между ними немного “воздуха”. Дляэтого в теге используют атрибуты HSPACE= и VSРАСЕ=, значения которых задают соответственно горизонтальноеи вертикальное “поля” рисунка.Самостоятельно добавьте обтекание рисунка текстом и установите отступы.Результат у Вас должен получится похожим на рис.6.1.Браузер Internet Explorer (версия 4 и выше) позволяет с помощью тега загружать и просматривать такжевидеофрагменты в формате AVI (Video for Windows). Для этого можно установить атрибут DYXSRC=, в качестве значениякоторого указать имя AVI-файла. При этом можно дополнительно указать в атрибуте START=, когда следует начинатьпроигрывание видео: "FILEOPEX" — сразу после загрузки файла или "MOUSEOVER" — после наведения указателямыши на изображение. Атрибут LOOP= позволяет установить количество проигрываний: "0" означает бесконечноеповторение, а любое другое число указывает точное количество повторов.Рис.6.1. Пример странички с фоновым рисунком и иллюстрацией