69681

Графіка Web-сторінок

Доклад

Информатика, кибернетика и программирование

Графіка Web-сторінок може містити як прості зображення, так і складні. Важливим у використанні графіки є не міра її складності, а ефективність у питаннях передавання тієї інформації, яку необхідно надати користувачам.

Украинкский

2014-10-08

101.5 KB

0 чел.

Тема 13: ГРАФІКА

Графіка Web-сторінок може містити як прості зображення, так і складні. Важливим у використанні графіки є не міра її складності, а ефективність у питаннях передавання тієї інформації, яку необхідно надати користувачам.

Горизонтальні лінії

Горизонтальні лінії є простим способом поділу великих текстів або виділення частини документа.

Для розміщення горизонтальної лінії використовується тег <HR> (Horizontal Rule). Internet Explorer підтримує різні атрибути тега <HR>, які дозволяють управляти розміром, товщиною, вирівнюванням, кольором і виглядом тіні від лінії.

Атрибути тега <HR>

WIDTH =pixels|persent Дозволяє змінити розмір лінійки,

задавши його в пікселях або в процентах від ширини екрана.

ALIGH=LEFT|RIGHT|CENTER    Задає  вирівнювання  частини

лінійки (за замовчуванням 1).

SIZE=n Задає товщину лінії (за замовчу-

ванням 1).

COLOR=RGB (або назва кольору) Задає колір,'

яким відображається лінія.

ПРИКЛАД

Файл у форматі HTML:

<HTML>

<HEAD>

<ТІТLЕ>Моя перша НТМЬ-сторінка</ТІТLЕ>

</HEAD>

<BODY>

<Н2 ALIGN= CENTER>yKPAlHCbKA МИНУВЩИНА </Н2>

<HR SIZE=8 WIDTH=40%   COLOR=RED>

</H2><BR>

<P ALIGN= CENTER>Етнографічний  довідник</Р>

</BODY>

</HTML>

Відображення файла програмою-броузером:

Графічні зображення

Графічні зображення, які демонструються на Web-сторінках, зберігаються в окремих файлах. Для вміщення зображення на сторінку використовують тег <IMG SRC="URL">, де URL - адреса файла, який містить графічні дані.

Розташування тексту, який слідує за зображенням, і те, як зображення розташоване на сторінці, контролює атрибут ALIGN. За замовчуванням текст з'являється внизу зображення.

Internet Explorer дозволяє використовувати властивості тега IMG, які надають можливість задавати значення висоти і ширини зображення за допомогою атрибутів HIGHT і WIDTH. Висота і ширина вимірюються в пікселях.

ALIGN=TOP|MIDDLE

ВОТТОМІ LEFT|RIGHT Контролює розташування тексту.

Значення атрибуту ALIGN:

TOP MIDDLE

BOTTOM LEFT

Вирівнює текст по верху зображення. Вирівнює базову лінію тексту по центру зображення.

RIGHT

Вирівнює базову лінію по низу зображення. Розташовує зображення ліворуч, дозволяючи тексту "обтікати" зображення праворуч Розташовує зображення праворуч, дозволяючи тексту "обтікати" зображення ліворуч.

Ефективним для розміщення зображень є застосування атрибутів тега <BR>. Використання тега <BR> в його основному варіанті у тексті, який обтікає зображення, просто розбиває рядок без переривання ефекту обтікання. Щоб перервати рядок і очистити поле праворуч або ліворуч від зображення, застосовують атрибут CLEAR.

Атрибут CLEAR тега <BR> використовується для того, щоб зупинити у зазначеній точці обтікання текстом об'єкта, а потім продовжити текст у порожній зоні за об'єктом. Текст, який продовжується за об'єктом, вирівнюється у відповідності із значеннями LEFT, RIGHT або ALL атрибуту CLEAR:

<BR CLEAR=LEFT> - перериває рядок і очищає ліве поле (текст буде продовжений, починаючи з найближчого порожнього лівого поля);

<BR CLEAR=RIGHT> - перериває рядок і очищає праве поле {текст буде продовжений, починаючи з найближчого порожнього правого поля);

<BR CLEAR=ALL> перериває рядок і очищає обидва поля (текст буде продовжений, як тільки ліве і праве поля виявляться порожніми).

Наприклад, якщо зображення вирівняне ліворуч, а текст обтікає його праворуч, тоді необхідно очистити ліве поле, щоб якийсь інший елемент, який слідує за текстом, не виявився розміщеним праворуч від зображення.

ПРИКЛАД (текст буде розташований поряд з малюнком; після <BR CLEAR=LEFT> буде очищене ліве поле, і наступний текст буде розташований, починаючи з найближчого порожнього лівого поля):

<IMG SRC="iM'я файла" ALIGN=LEFT>

На цьому малюнку зображено....

<BR CLEAR=LEFT>

Атрибут ALT тега IMG визначає текст, який відображається бро-узером на місці зображення, якщо броузер не може знайти файл із зображенням або включений у текстовий режим. Текст, записаний у атрибут ALT, відображається біля курсору мишки при наведенні її вказівника на малюнок. У атрибуті, як правило, вказується текст з описом зображення.

ПРИКЛАД

Файл у форматі HTML:

<HTML> <HEAD>

<ТІТЕЕ>Моя перша HTML-CTopiHKa</TITLE> </HEAD> <BODY>

<H2><P ALIGN=CENTER>yKPAiHCbKA МИНУВШИНА </Р> <HR SIZE=8 WIDTH=40%  COLOR=RED> </H2> <IMG   SRC="MAMAI5JPG"   WIDTH=200   HIGHT=200 ALIGN=LEFT ALT ="Козак Мамай>"

<P ALIGN= СЕЇЛ^>Етнографічний довідник </Р>

</BODY>

</HTML>

Відображення файла програмою-броузером:

Створення маркірованого списку із графічними маркерами

При необхідності для створення маркірованого списку можна створити свої власні графічні зображення для використання їх як маркерів.

ПРИКЛАД

Файл у форматі HTML:

<HTML>

<HEAD>

<ТІТLЕ>Моя перша НТМЬ-сторінка</ТІТLЕ>

< IIEAD>

<B()[)Y>

<112><P ALIGN= CENTER>ПOCEЛEHHЯ) ЖИТЛО, ЗАБУДОВА </Р>

<HR SIZE=8 WIDTH=40% COLOR=RED></H2> ;

<IMG SRC="BUT1_UP.GIF"  WIDTH=60 ALT = " ' \>

<AHREF= "l.HTM">

<FONT SIZE=5><B>TnnH пoceлeнь</B></FONT></A><BR>

Поселення землеробської людності України, які складалися з будівель, пристосованих для життя, різноманітних підсобних занять, утримання свійських тварин та зберігання продуктів, сягають глибини BHdB.<BR>

<IMG SRC="BUT1_UP.GIF"  WIDTH=60  ALT = "   ">

<A HREF="2.HTM">

<FONT SIZE=5><B> Типи народного житла</В></РОШ> </A><BR>

В основі типології традиційного сільського житлового комплексу також лежить поділ території України на зони, проте він більш розгалужений і детальніший.

</BODY>

</HTML>

Відображення файла програмою-броузером:

При використанні графічних маркерів слід звернути увагу на такі особливості:

текст елементу списку знаходиться ближче до графічного зображення, ніж у звичайному невпорядкованому списку;

центр графічного зображення не вирівнюється по центру текстового рядка;

якщо текстовий елемент списку перевищує у довжину один рядок, він не вирівнюється так, щоб другий рядок починався точно під першим - другий і всі наступні рядки починаються під графічним зображенням.

Графічне зображення може бути використане як гіперпосилання: <А HREF= "http://www.nbuv.gov.ua"> <IMG SRC="адpeca графічного файла" ></А>


 

А также другие работы, которые могут Вас заинтересовать

77361. Вопросы выбора архитектуры интерактивного взаимодействия с параллельными программами 120 KB
  озможность интерактивного взаимодействия с суперкомпьютерной программой при проведении расчётов по сравнению с пакетной обработкой задач может существенно повысить эффективность труда исследователя. Однако организация такого взаимодействия сопряжена с рядом трудностей связанных с устоявшейся методикой программирования и проведения расчётов. Один из ключевых моментов построения такого взаимодействия выбор правил и принципов построения связи со счетными программами.
77362. DATAFLOW-BASED DISTRIBUTED COMPUTING SYSTEM 39.5 KB
  The method is bsed on the following concepts: storge tsk nd rule. Storge stores nmed dt on which three opertions could be pplied crete write red nd delete. Every item in the storge is selfsufficient nd contins dt some metinformtion nd hs unique nme. The term tsk identifies the progrm which could red dt with specific nmes from the storge nd generte new dt items which will be written into the storge s result of tsk execution.
77363. ПОИСК НОВЫХ ПОДХОДОВ К ВИЗУАЛИЗАЦИИ ПРОЦЕССОВ 33 KB
  Важная проблема разработки систем компьютерной визуализации связана с выбором методов представления данных возникающих в связи с описанием сложных процессов. Такие подходы появляются в различных областях компьютерной визуализации см. Нужен дополнительный поиск более простых метафор визуализации позволяющих более эффективно анализировать абстрактные данные.
77364. Применение алгоритмов распознавания образов с целью захвата жестовых языков без применения маркирующих устройств 23.5 KB
  В этой работе рассматривается возможность построения системы на базе принципов захвата движения для распознавания жестовых языков обладающих большим количеством знаков. В этой связи важным является изучение современных алгоритмов распознавания образов. Проведен анализ ряда алгоритмов преобразования изображений применяемых в области распознавания образов а также их комбинации для эффективности решения поставленной задачи.
77365. VISUAL SUPPORTING OF PROGRAM PARALLELIZING 26 KB
  We have developed the simple prototype of the system to support visually the parallelizing process. The prototype is realized twofold. One of the realizations has to deal with parallelism of Massage Passing paradigm; another has to deal with Shared Memory parallelization. That is our system works with MPI and OpenMP programs.
77366. ПРОЕКТ СРЕДЫ РАЗРАБОТКИ СПЕЦИАЛИЗИРОВАННЫХ СИСТЕМ ВИЗУАЛИЗАЦИИ 39.5 KB
  Средства визуализации результатов численного моделирования можно разделить на три класса: Универсальные системы визуализации способные отображать большое многообразие визуальных объектов. Специализированные системы визуализации предметной области вычислительного эксперимента или специфических визуальных сущностей. Специализированные системы визуализации созданные специально для данного исследовательского проекта или даже конкретного пользователя.
77367. РАЗРАБОТКА СРЕДСТВ ВИЗУАЛЬНОГО ПРЕДСТАВЛЕНИЯ СЕТОК 26 KB
  В настоящее время для визуализации сеток на этапе генерации используются средства разработанного в коллективе конструктора специализированных систем визуализации. Для визуализации сеток больших объемов проводится экспериментальная разработка по реализации параллельного программного воксельного рендеринга с применением графических ускорителей. Продолжаются исследования и опытные разработки по применению виртуальной реальности для визуализации сеточных данных. Система интерактивной визуализации параллельных вычислений 14я Международная...
77368. Remote Visualization in Computer Aided Engineering 14 KB
  IMM UrB RS Urls Stte University Computer ided Engineering softwre gin now the incresing distribution. To chieve dditionl productivity engineering clcultions re mde on the specil computing resources which re seprte from the engineers worksttion. It ssumes tht imges re rendered remotely from enduser worksttion close to the plce of ctul engineering computtions.
77369. РАЗРАБОТКА КОМПИЛЯТОРА ДЛЯ ЯЗЫКА ПРОГРАММИРОВАНИЯ RIDE.L 24 KB
  Согласно которой используя статическую типизацию и перегрузку операторов для описания семантики синтаксических конструкций языка на самом языке можно получать эффективный машинный код. Оператор в качестве аргументов получает несколько выражений и одну строковую константу содержащую ассемблерный код в тернарной форме. В общем случае аппликация операторов происходит так: код реализация оператора подставляется по месту обращения; код определяется следующим образом: если выражение это оператор код фрагментов при проходе слева...