Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Вставка графических изображений

Стр 1 из 2Следующая ⇒

1.2.1. Методические рекомендации

Вставка графики

Для вставки в документы изображений с целью повышения наглядности и привлекательности документов, а также для вставки рисунков-текстов, например, математических формул, которые трудно воспроизвести при помощи текста, используется следующий тег:

<IMG SRC=”images/ris1.jpg”>.

Это минимальная форма, в которой ris1.jpg – это имя графического файла, вставляемого в документ, images – папка, в которой рекомендуется хранить все графические изображения.

Развернутая (максимальная) форма тега IMG имеет следующий вид:

<IMG SRC=”image1.jpg” LOWSRC=”image1-1.jpg”

ALT=”image1.jpg” WIDTH=… HEIGHT=… ALIGN=”left”

HSPACE=”20” VSPACE=”10” BORDER=”2” >.

Здесь:

– LOWSRC – необязательный параметр, используемый для увеличения скорости передачи графики. Файл image1-1.jpg содержит то же изображение, что и image1.jpg, но выполнен с низким разрешением. Этот файл загружается вместе с текстом, а затем уже загружается основное изображение;

– ALT – задает имя файла изображения, которое отображается при наведении курсора на ссылку. Особенно полезно, когда программа по каким-то причинам не находит файла изображения. Этот файл загружается вместе с текстом, а затем уже загружается основное изображение;

– WIDTH, HEIGHT – ширина и высота изображения в пикселях. Использование этих атрибутов существенно ухудшает качество изображения и не обеспечивает более быстрой загрузки изображения, так как фактический размер файла изображения (в байтах) при этом не изменяется (качество не ухудшится, если точно выдержать соотношение размеров изображения по ширине и высоте);

–атрибут ALIGN принимает значения:

1) left – обеспечивает выравнивание изображение по левому краю. При этом текст обтекает изображение располагается справа;

2) right – обеспечивает выравнивание изображение по правому краю. При этом текст обтекает изображение слева;

3) top – выравнивает одну строку текста (например название рисунка) по верху изображения. При этом текст располагается слева или справа от изображения, в соответствии с расположением текста относительно изображения в исходном тексте. При этом не надо ставить тег <BR>;

4) bottom – выравнивание текста внизу изображения (по высоте);

5) midlle – выравнивание текста по середине изображения (по высоте);

– HSPACE – горизонтальное поле (отступ в пикселах) вокруг изображения;

– VSPACE – вертикальное поле (отступ в пикселах) вокруг изображения;

– BORDER – ширина черной рамки вокруг изображения.

Замечание

Анимационные GIF-файлы встраиваются в документ точно таким же образом, и не требуют дополнительных параметров.

Теги абзаца и перевода строки для графики

Тег перевода строки <BR> отделяет строку от последующего текста или графики.

Тег <NoBR> предотвращает произвольное перемещение графики и текста при переполнении строки окна браузера. Этот тег парный.

Чтобы прервать обтекание встроенной графики, используется тег <BR Clear=…>. В качестве аргумента может применяться одно из трех ключевых слов: right, left, all, обеспечивающие размещение текста там, где свободно левое, правое или оба поля соответственно (не надо многократно писать <BR>).

Теги <LEFT>, <RIGHT>, <CENTER> выравнивают графику по левому, правому краю, в центре.

Дополнительные элементы оформления

1. Разделительные полосы

Тег <HR> (horizontal rule –горизонтальная полоса) разбивает текст (аналогично тегу <P>) и проводит горизонтальную полосу шириной во весь экран.

Вид стандартных полос можно изменить с помощью необязательных атрибутов: SIZE – толщина полосы, WIDTH – длина полосы, ALIGN – выравнивание полосы. Атрибут NOSHADE создает сплошную черную полосу без оттенения (Color – цвет полосы).

Пример

<HR SIZE=”10” WIDTH=”200” ALIGN=”center” NOSHADE

COLOR=”blue”>

2. Установочные атрибуты тега <BODY>

Цвета фона, текста и ссылок определяются в начале HTML-файла в теге BODY:

<BODY BGCOLOR=”#aaefff” TEXT=“black” LINK =”#ff0000” VLINK=”red” BACKGROUND = ”recbg.jpg” BGPROPERTIES=”fixed”>.

Атрибуты тега:

– BGCOLOR – задает цвет фона;

– TEXT – цвет основного текста;

– LINK – цвет непросмотренных гипертекстовых ссылок;

– VLINK – цвет просмотренных ссылок;

– BACKGROUND – имя графического файла, используемого в качестве фона. Фоновое изображение – это графический файл (расширение GIF или JPG). Если размеры изображения малы, то при просмотре в браузере это изображение многократно повторяется, заполняя все окно. Чем меньше объем изображения в байтах, тем быстрее будет загружаться весь фон. В качестве фоновых изображений чаще всего используют текстуры, а не полноцветные изображения;

– BGPROPERTIES="fixed". Аргумент fixed отключает прокрутку фона в окне браузера (действует только в Internet Explorer).

Цвета ссылок можно определить также в теге стилей <STYLE> (это так называемые каскадные стили). При этом значения атрибутов, определенных в теге <STYLE> имеют приоритет перед определениями, сделанными в теге BODY или в теле документа.

Пример

<head>

<style>

a:link {color:”#ff5500”; font-weight:”normal”; }

a:visited {color:”#00ff00”; font-weight:”normal”; }

a:hover {color:”blue”; font-weight:”normal”; }

</style>

</head>

Здесь link – цвет гипертекстовой ссылки; visited – цвет посещавшейся ссылки; hover – цвет, приобретаемый ссылкой при наведении на нее курсора.

3. Фоновый звук

Internet Explorer распознает оба формата оцифрованного звука (WAV, AU), а также формат MIDI. Следует помнить, что большие звуковые файлы замедляют время передачи и загрузки Web-страниц.

Тег <BGSOUND SRC=”file.wav” LOOP=”10”> обеспечивает загрузку и воспроизведение на соответствующем аппаратном обеспечении.

Здесь:

– SRC это сокращение от Sourse (источник);

– LOOP определяет число повторений звукового клипа. Чтобы звук повторялся бесконечно, надо задать ключевое слово infinite.

Задание к лабораторной работе №2

1. В программе Photoshop создать графическое изображение (размер не более 100х100 пикселей) для использования в качестве элемента текстуры заднего плана WEB-документа. Изображение сохранить в формате JPG или GIF, используя при сохранении режим оптимизации.

2. Установить это изображение как фоновый рисунок (тег BODY, атрибут BACKGROUND) в WEB-странице, созданной на 1-й лабораторной работе.

3. Ввести на WEB-странице между параграфами текста разделительные полосы (тег HR), придав атрибутам полосы различные значения высоты, ширины и выравнивания.

4. В программе Photoshop подготовить 5 графических изображений (на основе существующей коллекции) и вставить их в WEB-документе в различные абзацы текста. Изменить размеры изображений в соответствии с особенностями абзацев созданного документа и его общей компоновкой. Выполнить подрисуночные надписи, привести примеры выравнивания и обтекания графики текстом. Сделать отступы и выделение изображений рамкой.

5. Ввести в документ WEB-страницы фоновый звук.

Лабораторная работа №3

Создание гиперссылок

1.3.1. Методические рекомендации

Гиперссылки позволяют щелчком по выделенному слову или фразе перейти к другому документу или части того же документа. Эта возможность называется гипертекстом. Гипертекстовые ссылки выделяются в тексте документа специальным цветом.

Чтобы включить ссылку в ваш документ, необходимо указать в тексте открывающего тега <A> имя файла, на который происходит ссылка, в следующем формате: HREF=”имя файла”. Далее ввести текст ссылки и указать на завершение тега </а>.

Пример (простая ссылка)

<A HREF=”glava2.htm”> Глава вторая </a>

В данном примере фраза «Глава вторая» является ссылкой на HTML-документ, содержащийся в файле GLAVA2.htm, в том же каталоге (папке), что и текущий документ. Если же документ находится в подчиненном каталоге, то необходимо указать имя этого каталога, например:

<A HREF=”BOOK/glava2.htm”> Глава вторая </a>.

Такие ссылки называются относительными. При необходимости можно задать и абсолютные имена файлов в формате UNIX. Последние обычно используются для ссылок на несвязанные между собой документы, например:

<A HREF=”http://www.cpress.ru/BOOK/glava2.htm”> Глава вторая </a>.

Здесь http:/www.cpress.ru – это URL-адрес сайта (Uniform Resource Locator – унифицированный адрес ресурса).

12 Следующая ⇒

Статус республик в составе РФ

Понятие финансов, их функции и особенности

Сущность демографической политии

Последнее изменение этой страницы: 2016-04-18; просмотров: 269; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.145.63.136 (0.013 с.)