Практическая работа № 8: Работа с графикой - История изменений

User16 в 19:15, 5 марта 2012

2012-03-05T19:15:33Z

← Предыдущая		Версия 19:15, 5 марта 2012
Строка 87:		Строка 87:
	\|}		\|}

-	~~<br><br>~~                   '''                                             Часть 2<br><br>                                                     Выравнивание текста'''<br><br>Атрибут ALIGN тэга <IMG>, принимающий значения top, middle, bottom позволяет задавать вертикальное положение текста относительно границ графического изображения. По умолчанию браузер выравнивает текст по нижней кромке изображения. Если в строке текста включено несколько изображений, то выравнивание может привести к неожиданным эффектам. Следует учесть и тот факт, что если атрибут ALIGN уже был применен для задания параметра обтекания графики текстом, установить признак выравнивания текста относительно графики в пределах конкретной страницы не удастся.	+	'''                                           '''<br><br>
-		+
-	~~'''''Пример:'''''~~	+
-		+
-	~~{\| cellspacing="1" cellpadding="1" border="1" style="width: 753px; height: 110px;"~~	+
-	\|-	+
-	\| <br> '''HTML-код:'''<br> <br> <p><img src="img/majak.jpg" align="top">Выравнивание по верхней кромке</p><br> <p><img src="img/majak.jpg" align="middle">Выравнивание по середине</p><br> <p><img src="img/majak.jpg" align="bottom">Выравнивание по нижней кромке</p>  <br>	+
-	\| '''Отображение в браузере:'''<br> <br>  Выравнивание по верхней кромке<br>  Выравнивание по середине<br>  Выравнивание по нижней кромке	+
-	\|}	+
-		+
-	<br>                '''                                    Пустая область вокруг изображения'''<br><br>Графические изображения в Вэб-браузере имеют, по умолчанию, пустую рамку в несколько пикселей, которая отделяет их от текста. Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>.	+
-		+
-	Текст, отделенный от графики лучше усваивается, а пустая область между соседними изображениями предотвращает толкование их в виде единого целого.	+
-		+
-	Атрибут HSPACE задает ширину чистой области СЛЕВА И СПРАВА от изображения.<br>Атрибут VSPACE задает ширину чистой области СВЕРХУ И СНИЗУ от изображения.	+
-		+
-	~~'''''Пример:'''''~~	+
-		+
-	~~{\| cellspacing="1" cellpadding="1" border="1" style="width: 752px; height: 22px;"~~	+
-	\|-	+
-	\| <br> '''HTML-код:'''<br> <br> <p><img src="img/tigr.jpg" align="left" hspace="20" vspace="20">Этот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.</p>   <br>	+
-	\| '''Отображение в браузере:'''<br> <br> Этот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.	+
-	\|}	+
-		+
-	<br>                   '''                                       Горизотнальная линейка'''<br><br>Для построения горизонтальной линейки служит дескриптор <HR>. По умолчанию браузер строит линейку толщиной в 2 пикселя. Для изменения ширины и длины линейки служат атрибуты SIZE, WIDTH.	+
-		+
-	По умолчанию браузер выравнивает линейку посреди страницы. Для изменения выравнивания надо воспользоваться атрибутом ALIGN.	+
-		+
-	~~Атрибут NOSHADE устраняет эффект объемности линейки.~~	+
-		+
-	~~'''''Пример''''':~~	+
-		+
-	~~{\| cellspacing="1" cellpadding="1" border="1" style="width: 748px; height: 22px;"~~	+
-	\|-	+
-	~~\| '''HTML-код:'''<br> <br> <hr><br> <hr align="left" width="50" size="5" noshade>   ~~	+
-	\|	+
-	~~<br>'''Отображение в браузере:'''~~	+
-		+
-	~~<br> <br> ________________________________________________________________________________~~	+
-		+
-	\|}	+
-		+
-	<br>            '''                                     Списки с графическими маркерами'''<br><br>С помощью маленьких изображений можно строить списки. Такие списки с графическими маркерами заметно оживляют внешний вид страницы. Размеры изображений должны соответствовать параметрам форматирования текста.	+
-		+
-	Чтобы воспользоваться графическими маркерами, надо применить атрибут ALIGN, присвоив ему одно из значений - top, middle, bottom, позволяющих соответствующим образом выровнять строку текста элемента списка по вертикали относительно границ маркера.	+
-		+
-	Улучшить внешний вид данных посредством задания ширины чистой полосы, отделяющей маркер от текста элемента списка, поможет атрибут HSPACE.	+
-		+
-	~~'''''Пример:'''''<br>~~	+
-		+
-	~~{\| cellspacing="1" cellpadding="1" border="1" style="width: 728px; height: 22px;"~~	+
-	\|-	+
-	\| '''HTML-код:'''<br> <br> <ul><br> <br><img src="img/list.gif" align="middle" hspace="5">Глава 1<br> <br><img src="img/list.gif" align="top">Глава 2<br> <br><img src="img/list.gif" align="middle" hspace="15">Глава 3<br> </ul>  <br>	+
-	~~\| '''Отображение в браузере:'''<br> <br> <br>  Глава 1 <br>  Глава 2 <br>  Глава 3~~	+
-	\|}	+
-		+
-	~~  Дополнительная информация по теме:~~<br><br>	+

	Надіслав викладач інформатики Миловидов Юрій Олегович, университет «КРОК»		Надіслав викладач інформатики Миловидов Юрій Олегович, университет «КРОК»

	[[Category:Структура_веб-сайтів,_різновиди_веб-сайтів._Практикуми,_лабораторні,_кейси]]		[[Category:Структура_веб-сайтів,_різновиди_веб-сайтів._Практикуми,_лабораторні,_кейси]]

User16 в 19:10, 5 марта 2012

2012-03-05T19:10:54Z

Внесённые изменения

User16: Новая страница: «Гіпермаркет Знань - перший в світі!, Гіпермаркет Знань, Інформатика 11 клас, клас, ур...»

2012-03-03T20:32:16Z

Новая страница: «<metakeywords>Гіпермаркет Знань - перший в світі!, Гіпермаркет Знань, Інформатика 11 клас, клас, ур...»

Новая страница

<metakeywords>Гіпермаркет Знань - перший в світі!, Гіпермаркет Знань, Інформатика 11 клас, клас, урок, на Тему, Структура веб-сайтів, різновиди веб-сайтів, Создание списков, Работа с графикой, Практикуми, лабораторні, кейси</metakeywords>

'''[[Гіпермаркет Знань - перший в світі!|Гіпермаркет Знань]]>>[[Інформатика|Інформатика]]>>[[Інформатика 11 клас|Інформатика 11 клас]]>> Інформатика: Структура веб-сайтів, різновиди веб-сайтів'''

Практична робота до предмету '''[[Інформатика 11 клас|Інформатика 11 клас]]'''.

Тема '''«[[Структура веб-сайтів, різновиди веб-сайтів|Практическая работа №8: «Работа с графикой"]]»'''.

 Розгляд теми: Структура веб-сайтів, різновиди веб-сайтів 

'''                                        Практическая работа №8: Работа с графикой''' '''                                                                  Часть 1''' 1. Вставка изображения 2. Добавление фона 3. Обтекание графики текстом                           '''                            Вставка изображения''' Для вставки графических элементов служит тэг <IMG>.

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

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

Графика должна быть представлена в виде файлов с расширениями .jpg .gif.

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

Чтобы вставить графику в текст html-страницы надо указать имя и место хранения соответствующего файла. Если файл находится в той же папке, что и страница, то достаточно указать имя файла с расширением. Если графический файл находится в другой папке, то, помимо имени файла с расширением необходимо указывать путь к этому файлу. Для выравнивания изображения по центу используется тэг <CENTER>, для размещения на новой строке - тэг 

'''''Пример:'''''

{| cellspacing="1" cellpadding="1" border="1" style="width: 695px; height: 93px;"
|-
| '''HTML-код:''' <center><img src="img/tigr.jpg" alt="Это изображение тигра"></center>
|
'''    Отображение в браузере:'''

|}

                           '''                                                  Добавление фона''' Если белый фон страницы вас не устраивает, то с помощью атрибута BACKGROUND тэга <BODY>, можно снабдить страницу любым графическим фоном. Т.к. браузер автоматически размещает копии изображения таким образом, чтобы заполнить всю страницу, то изображение, применяемое для формирования фона можно делать небольшим по размеру.

Формируя графический фон страницы, используйте такие изображения, которые способны вызвать интересные зрительные эффекты, а с другой стороны не мешали бы восприятию текстовой информации. Хорошее изображение при его многократном повторении выглядит "гладким", без "швов". Не исключено, что после использования графического фона, вам придется изменить цвет шрифта, чтобы достичь его удобочитабельности.

Рамка придает изображению четкость и определенность. Для создания рамки служит атрибут BORDER тэга <IMG>. Используя этот атрибут можно указать толщину линии рамки в пикселях. Если указать нулевое значение, то рамка отображаться не будет.

'''''Пример:'''''

{| cellspacing="1" cellpadding="1" border="1" style="width: 684px; height: 22px;"
|-
| ''' HTML-код:''' <BODY background="img/fon.jpg"> <img src="img/teacher.jpg" border="3"> <BODY>   
|
'''Отображение в браузере:'''

|}

                           '''                                   Обтекание графики текстом''' Если хотите, чтобы графический рисунок органически вписывался в дизайн вашей Вэб-страницы, то в этом вам поможет атрибут ALIGN тэга <IMG>.

Этот атрибут допускает задание двух значений - left right.

Значение left заставляет браузер помещать изображение слева от текста, а right - справа от него. Если надо, чтобы форматированию подвергался только определенный фрагмент текста, следует применить тэг BR с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики.

Следует заметить, что если атрибут ALIGN уже был применен вами для выравнивания текста относительно графики в пределах конкретной Вэб-страницы, установить параметр обтекания графики текстом вам не удастся.

Атрибут ALIGN дает возможность разместить текст между двумя графическими изображениями. В этом случае тэги, описывающие изображения, должны быть расположены над текстом, который будет заключен между ними.

'''''Пример:'''''

{| cellspacing="1" cellpadding="1" border="1" style="width: 684px; height: 22px;"
|-
|
 '''HTML-код:''' <img src="img/majak.jpg" align="left"> <img src="img/sea.jpg" align="right"> 

 <img src="img/majak.jpg" align="left"> <img src="img/sea.jpg" align="right">

|
'''Отображение в браузере:'''

 

Этот маяк расположен на берегу моря и служит кораблям для ориентира. Он очень помогает морякам в плохую погоду.

Это небольшая яхта.

Я люблю море, но не умею плавать.

Море, море - мир безбрежный   

|}

                    '''                                             Часть 2                                                      Выравнивание текста''' Атрибут ALIGN тэга <IMG>, принимающий значения top, middle, bottom позволяет задавать вертикальное положение текста относительно границ графического изображения. По умолчанию браузер выравнивает текст по нижней кромке изображения. Если в строке текста включено несколько изображений, то выравнивание может привести к неожиданным эффектам. Следует учесть и тот факт, что если атрибут ALIGN уже был применен для задания параметра обтекания графики текстом, установить признак выравнивания текста относительно графики в пределах конкретной страницы не удастся.

'''''Пример:'''''

{| cellspacing="1" cellpadding="1" border="1" style="width: 753px; height: 110px;"
|-
| '''HTML-код:''' <img src="img/majak.jpg" align="top">Выравнивание по верхней кромке <img src="img/majak.jpg" align="middle">Выравнивание по середине <img src="img/majak.jpg" align="bottom">Выравнивание по нижней кромке  
| '''Отображение в браузере:'''  Выравнивание по верхней кромке  Выравнивание по середине  Выравнивание по нижней кромке
|}
 
               '''                                    Пустая область вокруг изображения''' Графические изображения в Вэб-браузере имеют, по умолчанию, пустую рамку в несколько пикселей, которая отделяет их от текста. Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>.

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

Атрибут HSPACE задает ширину чистой области СЛЕВА И СПРАВА от изображения. Атрибут VSPACE задает ширину чистой области СВЕРХУ И СНИЗУ от изображения.

'''''Пример:'''''

{| cellspacing="1" cellpadding="1" border="1" style="width: 752px; height: 22px;"
|-
| '''HTML-код:''' <img src="img/tigr.jpg" align="left" hspace="20" vspace="20">Этот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.   
| '''Отображение в браузере:''' Этот зверь называется тигр. Он относится к семейству хищных зверей и питается свежим мясом.
|}

                    '''                                       Горизотнальная линейка''' Для построения горизонтальной линейки служит дескриптор <HR>. По умолчанию браузер строит линейку толщиной в 2 пикселя. Для изменения ширины и длины линейки служат атрибуты SIZE, WIDTH.

По умолчанию браузер выравнивает линейку посреди страницы. Для изменения выравнивания надо воспользоваться атрибутом ALIGN.

Атрибут NOSHADE устраняет эффект объемности линейки.

'''''Пример''''':

{| cellspacing="1" cellpadding="1" border="1" style="width: 748px; height: 22px;"
|-
| '''HTML-код:''' <hr> <hr align="left" width="50" size="5" noshade>   
|
 '''Отображение в браузере:'''

 ________________________________________________________________________________

|}

             '''                                     Списки с графическими маркерами''' С помощью маленьких изображений можно строить списки. Такие списки с графическими маркерами заметно оживляют внешний вид страницы. Размеры изображений должны соответствовать параметрам форматирования текста.

Чтобы воспользоваться графическими маркерами, надо применить атрибут ALIGN, присвоив ему одно из значений - top, middle, bottom, позволяющих соответствующим образом выровнять строку текста элемента списка по вертикали относительно границ маркера.

Улучшить внешний вид данных посредством задания ширины чистой полосы, отделяющей маркер от текста элемента списка, поможет атрибут HSPACE.

'''''Пример:''''' 

{| cellspacing="1" cellpadding="1" border="1" style="width: 728px; height: 22px;"
|-
| '''HTML-код:''' <ul> <img src="img/list.gif" align="middle" hspace="5">Глава 1 <img src="img/list.gif" align="top">Глава 2 <img src="img/list.gif" align="middle" hspace="15">Глава 3 </ul>  
| '''Отображение в браузере:'''  Глава 1  Глава 2  Глава 3
|}
 
Дополнительная информация по теме: 

Надіслав викладач інформатики Миловидов Юрій Олегович, университет «КРОК»

[[Category:Структура_веб-сайтів,_різновиди_веб-сайтів._Практикуми,_лабораторні,_кейси]]