12778

Использование графики в HTML

Практическая работа

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

Использование графики в HTML Для того чтобы вставить в Webстраницу изображение необходимо либо нарисовать его либо взять уже готовое. В любой программе рисования можно создать простое изображение и сохранить его в нужном формате. Если программа этот формат не поддержива...

Русский

2013-05-03

568 KB

6 чел.

Использование графики в HTML

Для того чтобы вставить в Web-страницу изображение, необходимо либо нарисовать его, либо взять уже готовое. В любой программе рисования можно создать простое изображение и сохранить его в нужном формате. Если программа этот формат не поддерживает, необходимо преобразовать файл в требуемый формат. Существует множество программ, предназначенных для преобразования одного графического формата в другой. Позаимствовать же картинки можно из различных программных пакетов или с других Web-страниц в Internet, содержащих библиотеки свободного доступа художественных изображений. Когда браузер выводит Web-страницу с изображением, соответствующий графический файл временно хранится в памяти компьютера. В большинстве браузеров есть команда, позволяющая сохранить файл на локальном диске. Существует также множество других вариантов получения графических файлов.

Тегом HTML, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.

УПРАЖНЕНИЕ 4.1

<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">

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

Для обозначения изображения как гипертекстовой метки используется тег <A>, но между <A> и </A> вставляется тег изображения <IMG> :

<A HREF="адрес файла или изображения"> <IMG SRC="image.gif"></A>

УПРАЖНЕНИЕ 4.2

Создать файл с названием:

«РИСУНОК_ссылка_на_Текст___ТЕКСТ_ссылка_на_Портрет.htm»

Снимок экрана приведен ниже:Зеленая рамка вокруг рисунка – гиперссылка перехода к текстовому файлу Париж.RTF

Нижняя текстовая строка на рисунке – гиперссылка перехода к .JPG файлу.

При этом:

  •  Изображение, используемое в качестве гипертекстовой ссылки, обводится дополнительной рамкой.
  •  Непройденные гиперссылки выделены зеленым цветом
  •  Обе гиперссылки, и текстовая и в виде рамки, выровнены по середине строки

Тег изображения <IMG> имеет один обязательный атрибут SRC и необязательные: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.

Атрибут SRC

Указывает файл изображения и путь к нему; изображение должно быть загружено в браузер и размещено в том месте документа, где расположен тег изображения.

Атрибут ALT

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

Атрибут АLIGN 

Внимание! Атрибут ALIGN тега SRC не следует путать с атрибутом ALIGN тега P.

Атрибут ALIGN тега SRC определяет положение изображения относительно окружающего его текста. Возможные значения аргумента = ["top" | "middle" | "bottom"] (соответственно, "вверху", "посередине", "внизу").

ALIGN="top" выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста.

ALIGN="middle" выравнивает центр изображения по базовой линии строки окружающего текста.

ALIGN="bottom" выравнивает нижний край изображения по базовой линии строки окружающего текста.

Упражнение 4.3

Создать HTML-файл в соответствии с приведенным снимком.

На снимке видно имя файла. Размеры рисунка должны быть небольшими (см. ниже по тексту Лаб 4, Атрибуты WIDTH и HEIGHT), рисунки отделены горизонтальнымит линиями, (см Лаб 3, тег HR). Как изменить цвет и размер части шрифта, см. Лаб 3, FONT, SIZE, COLOR.

Дополнительные возможные значения аргумента ALIGN = ["left" | "right" |"absmiddle" | "absbottom" ].

Примечание

Помимо рассматриваемых, атрибут ALIGN принимает и ряд других значений. Новых свойст атрибуту ALIGN эти значения не приносят, следовательно здесь и не рассматриваются.

ALIGN="left" определяет огибаемое текстом изображение. Изображение располагается вдоль левой границы документа, а последующие строки текста огибают его справа.

ALIGN="right" определяет огибаемое текстом изображение. Изображение располагается вдоль правой границы документа, а последующие строки текста огибают его слева.

ALIGN="absmiddle" выравнивает центр изображения по центру строки окружающего текста.

ALIGN="absbottom" выравнивает нижний край изображения по нижнему краю строки окружающего текста.

Упражнение 4.4

Создать HTML-файл в соответствии с приведенным снимком.

Атрибут USEMAP

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

Атрибут BORDER

Целочисленное значение аргумента определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует. Чтобы не вводить пользователей в заблуждение, не стоит задействовать BORDER=0 в изображениях, которые представляют собой часть элемента якоря, поскольку рисунки, применяемые в качестве гиперссылок, обычно выделяются цветной рамкой.

Атрибут HSPACE

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

Атрибут VSPACE

Целочисленное значение этого атрибута задает вертикальное расстояние между строками текста и изображением.

Атрибуты WIDTH и HEIGHT

Оба атрибута задают целочисленные значения размеров изображения по горизонтали и по вертикали соответственно. Это позволяет уменьшить время загрузки страницы с графикой. Браузер сразу отводит рамку для изображения и продолжает загружать текст на страницу. Пока загружается графика, пользователь может начать читать текст. Определить размер изображения нетрудно, для этого достаточно воспользоваться любой программой просмотра графических файлов, например ACDSee или графическим редактором Corel PhotoPaint или Adobe Photoshop. Откройте файл в графическом редакторе и определите размер картинки в пикселах. В теге изображения следует указать ширину и высоту картинки.

<IMG SRC="image.gif" ALT="изображение"

WIDTH="100" HEIGHT="200" HSPACE="10" VSPACE="10"

BORDER="2" ALIGN="left">

Упражнение 4.4

Используя ранее созданный, в упражнении 4.2 файл «РИСУНОК_ссылка_на_Текст___ТЕКСТ_ссылка_на_Портрет.htm», создать новый HTML-файл. Снимок экрана при работе этого файла приведен ниже:

Форматы графических файлов

Самыми распространенными графическими форматами в Web являются GIF и JPEG. GIF — наиболее подходящий формат для обмена изображениями между системами. Архивы с изображениями в формате GIF можно найти на многих серверах Internet. Данный формат поддерживают многие графические приложения, в том числе все программы просмотра графики World Wide Web.

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

Формат GIF использует один из лучших алгоритмов сжатия LZW, который изначально не предназначался специально для графики. Он не очень подходит для работы с двухцветными (черно-белыми) или фотографическими изображениями.

С развитием аппаратного обеспечения, поддерживающего высокое разрешение и богатую цветовую гамму, графические файлы значительно увеличились в размерах. Профессиональные художники теперь, как правило, работают с файлами, содержащими 10 и более мегабайт данных на каждое изображение. Даже пользователи с более скромными запросами подчас имеют дело с изображениями 640 на 480 пикселов в 256 цветах (а это более 300 килобайт). Кроме того, многие сейчас начинают работать с полноцветными изображениями 1024 на 768 пикселов (это более 2,3 мегабайт данных). Так как высококачественные изображения встречаются все чаще, ограничения, накладываемые традиционными методами сжатия (например, LZW), становятся все более ощутимыми.

Для поиска оптимального способа сжатия изображений фотографического качества две международные организации по стандартизации, International Telecommunications Union (ITU, Международный союз телекоммуникаций) и International Organization for Standartization (ISO, Международная организация по стандартизации), создали Joint Photographic Experts Group (JPEG, объединенная экспертная группа по фотографии). С тех пор сокращение "JPEG" используется как название этой техники сжатия. Кроме того, оно входит в названия некоторых использующих ее файловых форматов.

Имя JPEG указывает на метод сжатия, но не на формат файла. На самом деле метод сжатия JPEG используют как многочисленные мало различающиеся форматы, зачастую известные, например "JPEG", так и единичные радикально отличающиеся форматы, такие как TIFF и Quick Time. К счастью, все же большинство форматов, известных под именем "JPEG", очень похожи, и, скорее всего, у вас не возникнет с этим проблем, однако знать о возможных осложнениях не помешает.

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

Метод сжатия "с потерями" имеет много реализаций. JPEG достигает существенного сжатия за счет отбрасывания той графической информации, которая обычно не проявляется в реальных изображениях. Однако при сжатии с помощью JPEG изображений с четкими контурами линии начинают заметно "дрожать". Так, например, если изображение содержит какие-либо подписи, подобный эффект может возникнуть вокруг символов. Этот эффект можно свести к минимуму, задав очень высокие значения параметра качества, однако при этом нельзя достичь приемлемых показателей сжатия.

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

Одна из наиболее распространенных ошибок заключается в интерпретации значения параметра качества от нуля до ста как процента сохраняемых данных. Чтобы развеять это заблуждение, некоторые современные программные продукты JPEG просто используют шкалу "лучшее сжатие" — "лучшее качество".

Хитрость заключается в том, чтобы при наименьшей величине параметра качества получить изображение без видимого его ухудшения. Лучше начинать со средних значений и внимательно оценивать результат. Если вы отмечаете некоторое ухудшение, попробуйте увеличить значение параметра, если нет — попытайтесь его уменьшить. При просмотре изображения обращайте внимание на следующие моменты: четкость очертаний и углов, например вокруг текста, или контур детали изображения, выделяющейся на общем фоне. Часто бывает заметно, что контур "смазан" или линия "дрожит".

Сжатие JPEG использует мозаику размером восемь на восемь пикселов. Если задаются слишком низкие значения качества, ее границы могут стать заметны. Если у вас уже есть изображения в GIF или другом восьмиразрядном формате, возможно, вы захотите попробовать конвертировать их в JPEG. Несмотря на то, что иногда это все же приводит к уменьшению необходимого для хранения файлов пространства, в большинстве случаев игра не стоит свеч. Если вы все же хотите попытаться, сначала выясните, сколько цветов использует изображение GIF. Если в нем только 64 цвета, то конверсия вряд ли себя оправдает, так как изображение с такой бедной цветовой палитрой не имеет тех плавных цветовых переходов, которые хорошо сжимает JPEG. В результате вы просто ухудшите качество изображения, не освободив места.

Одна из серьезных проблем конверсии изображений GIF в JPEG заключается в том, что изображения в формате GIF, лимитированные набором из 256 (или менее) цветов, часто используют клиширование (dithering) и полутона (halftoning), в результате чего пикселы двух цветов смешиваются для получения эффекта третьего тона. В результате использования этой техники образуются шаблоны, крайне плохо сжимаемые с помощью JPEG. Отдельные программы позволяют усреднять значения этих шаблонов, "смягчая" таким образом изображение до преобразования, в результате чего сжатие с помощью JPEG оказывается более эффективным.

Нарезка изображений

Если вы создали большой и сложный рисунок для своей страницы, то имеет смысл его нарезать на несколько маленьких, которые затем поместить в таблицу с невидимыми разделителями (border=0). Зачем это надо? Во-первых, скорость загрузки такой страницы увеличится, за счет параллельной загрузки сразу нескольких файлов. Во-вторых, если правильно подойти к делу, то суммарный размер нарезанных картинок можно сделать меньшим, чем исходного файла. Допустим, на всей картинке у вас используется 256 цветов и вы записываете ее в соответствующий файл .gif. Теперь если вы правильно порежете картинку, то обнаружите, что в отдельных областях достаточно 128 или 64 цветов (правильная нарезка как раз и состоит в выделении областей с небольшим количеством цветов). Убирая лишние цвета, вы уменьшите размер файла. Эта же техника позволит сделать как бы единую gif-картинку, содержащую больше 256 цветов - думаю понятно как.

Формат gif может показывать не больше 256 цветов, но эти цвета могут быть любыми из TrueColor (16 млн). Описания цветов, используемых на картинке, хранится в самом файле в проиндексированном виде, например так - цвет номер 0 имеет RGB составляющие 0,0,0 (черный), а номер 2 -255, 255, 255 (белый). Соответственно, чем больше цветов вы используете на картинке, тем больше размер файла. Если у вас на картинке используется только 16 цветов, а вы записали файл gif в 256-цветном режиме, то лишние цвета просто занимают место в таблице, увеличивая размер.

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

Теперь о самой нарезке - первый вариант - резать в Photoshop. Для этого надо расставить в изображении guides (направляющие) - это горизонтальные и вертикальные линии, не влияющие на само изображение. В первую очередь выберите режим показа guides - (View /Show guides или Ctrl+;) и показа линеек (View/Show Rulers или Ctrl+R). Теперь на линейке нажимаем на мышь и тянем ее с нажатой кнопкой на изображение - появляется синенькая линия - вот это guide и есть.


 
Теперь, если вы выберете инструмент перемещения, guides можно таскать туда-сюда или временно убрать показ guides. Расставьте guides так, как вы собираетесь порезать картинку. Далее - включаем режим "прилипания" инструментов к guides (View/Snap to Guides). Теперь все инструменты выделения будут липнуть к расставленным направляющим.

Выделить соответствующие области и скопировать их в отдельные файлы (или наоборот сделать так сказать crop) и записать их. При записи лучше пользоваться не самим Photoshop’ом, а какой-нибудь программой, позволяющей оптимизировать размер файла - например замечательной программой Smart Saver фирмы Ulead.

Для автоматической нарезки картинок существуют и специальные программы - Adobe ImageReady, Macromedia Fireworks и Image cutter.

Если вы хотите добиться супервысококачественных результатов используйте Photoshop+Smart Saver, а для быстрой работы - Image Ready. Предлагаю еще промежуточное решение - режете в Image Ready и задаете сохранить нарезанные куски ни в gif и ни в jpeg, а в TrueColor PNG-формате (новый многообещающий формат, в том числе поддерживает полупрозрачность (!)). Потом открываете PNG файлы и оптимизируете их до нужного количества цветов по отдельности.

В сложных случаях приходится нарезать изображение на большое количество кусков. Для их компоновки можно использовать вложенные друг в друга таблицы или атрибуты тэга table, позволяющие объединять столбцы (colspan) и строки (rowspan).

Активные изображения

Активные изображения (image maps), или изображения, чувствительные к щелчкам мыши, позволяют создать на узле графические меню произвольной формы. Активное изображение — это изображение с так называемыми активными областями (hot spots), которые ссылаются на URL других страниц или узлов.

Есть два метода формирования активных изображений:

  •  на сервере
  •   
  •  у клиента.

Изображения первого типа используют сервер для того, чтобы найти соответствующий данной активной области URL и передать на браузер нужную страницу. Активные изображения, работающие на клиентской машине, задают информацию об активной области на НТМL-странице, так что браузер сам выясняет, какие области являются активными, и запрашивает с сервера соответствующую страницу.

Активные изображения, работающие у клиента, имеют несколько преимуществ. Во-первых, страницы с ними можно перенести на другой сервер. Во-вторых, серверу не приходится выполнять лишнюю работу (например, просматривать всю информацию об активных областях), то есть нагрузка на сервер уменьшается. При использовании работающих на сервере активных изображений в каталоге сgi-bin сервера должен быть соответствующий сценарий. Из соображений безопасности многие системные администраторы не записывают сценарии в каталог сgi-bin. Поэтому более подробно мы рассмотрим создание активных изображений у клиента.

Создание активного изображения. Процесс создания активного изображения состоит из двух этапов. Сначала необходимо определить на картинке области, которые нужно сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселах). Все это можно сделать вручную, определив координаты углов активных областей, но гораздо проще воспользоваться какой-нибудь программой, например МарЕdit.

Определить карту легко. Нужно открыть в МарEdit HTML-файл, содержащий изображение, на котором требуется создать активные области, после чего выбранное изображение будет загружено в рабочее окно. Затем следует выбрать тип активной области (квадрат, треугольник и круг), щелкнуть и потянуть мышкой, обозначив границу области. Программа автоматически производит запись в HTML-файл, описывающий границы активной области. Затем этой области нужно приписать URL. В любых местах изображения можно нарисовать активные области и определить для каждой из них URL. Важно оставлять между областями немного места, чтобы при чтении быть уверенным, что активизируется правильная ссылка. Границы активных областей задаются координатами углов прямоугольника и многоугольника или центра и радиуса круга. Если вы решили делать активное изображение у клиента, Map Edit поставляет данные только для тегов <MAP>. Вам придется самим задать тег изображения с атрибутом USEMAP и поместить его после тега </MAP>. Не забудьте перед именем карты в атрибуте USEMAP записать символ "#" следующим образом:

<IMG SRC="mymap.gif" USEMAP="#sitemap">

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

<IMG SRC="image.gif" ALT="Изображения" USEMAP="#imap">

<MAP NAME="imap">

<AREA SHAPE="rect" COORDS="0,0,100,100" HREF="http://www.intuit.ru/help/index.html">

<AREA SHAPE="rect" COORDS="100,0,200,100" HREF="http://www.intuit.ru/shop/index.html">

<AREA SHAPE="default" nohref>

</MAP>

Изображения в миниатюре

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


Создайте
, в соответствии с приведенным снимком экрана, файл

«IMG SRC и альтернативное изображение.htm»

и соответсвующий ему файл изображения «кораблик.bmp». Продемонстрируйте, что при отсутствии файла с изображением, на экране остается место для вставки изображения. При наведении курсора на это место экрана всплывает соответствующее сообщение.


 

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

54319. Чи можливо виховати генія? 75.5 KB
  От чому в процесі навчання необхідно систематично збуджувати розвивати і укріплювати пізнавальний інтерес учнів і як важливий мотив навчання і як стійку рису особистості і як могутній засіб виховуючого навчання підвищення його якості. Основна мета роботи вчителя по активізації пізнавальної діяльності учнів розвиток їх творчих здібностей. Досягнення цієї мети дозволяє вирішити багато завдань навчання: забезпечити міцні і усвідомлені знання навчального матеріалу; підготувати учнів до активної участі у виробничій...
54320. Пути развития европейской культуры в эпоху Нового времени 20.7 KB
  Название «Новое время» в истории культуры Европы обычно употребляется по отношению к трем векам – XVII, XVIII и XIX. Эти века наполнены событиями политическими, экономическими, философскими, художественными. XVII век не имеет общепризнанного названия как Возрождение или век Просвещения.
54321. Створення та редагування таблиць із застосуванням режиму конструктора, використання звязків між таблицями, створення форм із застосуванням майстра форм, створення звітів із застосуванням майстра звітів 2.97 MB
  ЗАДАЧА: створити БД для підприємства (фірми), яке займається реалізацією продовольчих товарів. 1.1 Створити БД в папці Мої документи та надати ім’я «Прізвище_група_учня_фірма» 1 Створити таблиці, які будуть містити основну інформацію про діяльність фірми.
54322. Метод проектов 26.5 KB
  В последние годы в связи с реформами в образовании и изменениями в школьном математическом образовании в частности остро стоит вопрос об организации учебного процесса направленного на развитие творческих способностей личности и навыков исследовательской деятельности. В результате этого возник метод проектов как способ актуализации и стимулирования познавательной деятельности учащихся. Однако за последние несколько лет многое изменилось – общество поднялось на новую ступень экономического развития потребовались кардинальные перемены во...
54323. МЕТОД ПРОЕКТІВ ЯК ТЕХНОЛОГІЯ НАВЧАННЯ 257.5 KB
  Метод проектів це метод в основі якого лежить розвиток пізнавальних творчих навичок студентів умінь самостійно конструювати свої знання орієнтуватися в інформаційному просторі критично мислити. Мета застосування методу полягає у формуванні навичок ефективного використання різних джерел інформації при навчанні студентів за допомогою інноваційних педагогічних технологій якими передбачається самостійна індивідуальна чи групова дослідницькопошукова та творча діяльність студентів підвищення рівня комунікабельності. Завдання методу...
54324. З’єднання болтом і шпилькою 496 KB
  Оформлення завдання Завдання виконується на креслярському папері в олівці у відповідність з правилами ЕСКД. Креслення повинне мати основний напис. Діаметри крізних отворів
54325. МЕТОДИЧНІ РЕКОМЕНДАЦІЇ ДО СТВОРЕННЯ НАВЧАЛЬНОГО ПРОЕКТУ 146.5 KB
  АНАТОМІЯ НАВЧАЛЬНОГО ПРОЕКТУ. Планування реалізації проекту. Методика управління для неосяжної кількості найрізноманітніших проектів має єдину структуру у якій можна виділити такі групи процесів: ініціації прийняття рішення щодо запуску проекту зазвичай завершується складанням і затвердженням уставу проекту із визначенням його мети терміну виконання критеріїв успіху призначенням та чітким окресленням повноважень керівника проекту; планування безперервне визначення кращих...
54326. Особливості використання кейс-методу при викладанні інженерної графік 704.5 KB
  Наявність головної умови використання кейс-методу при викладанні будь–якої дисципліни – наявність протиріч, на основі яких формуються і формулюються проблемні ситуації, задачі, практичні завдання для обговорення та знаходження оптимального розвязання учнями або студентами.
54327. Методичні рекомендації щодо формування комунікативно-мовленнєвих умінь в учнів початкових класів на уроках української мови в російськомовних класах 367.5 KB
  Діти що приходять у 1 клас особливо російськомовні мають обмежений словниковий запас для спілкування українською мовою. Наприклад: ТВАРИНИ Ведмідь –медведь Лисиця – лисица Вовк – волк Заєць – заяц Білка – белка Їжак – ежик Мавпа – обезьяна Пташка – птичка Жаба – лягушка Ящірка ящерица Бобер бобёр Кажан – летучая мышь Паралельно з цією карткою діти працюють з карткою з малюнками на якій намальовані ті предмети які були записані в картці словами. Скажіть діти кого із названих членів сім'ї ви вдома називаєте не так Пропоную з...