II
|
Проверка выполнения домашнего задания
Подготовка учащихся к усвоению нового материала
- Какому тэгу принадлежит атрибут FACE и что он позволяет изменить?
- Какой атрибут и у каких тэгов позволяет выравнивать текст?
- Что такое браузер?
- Что такое интерактивность?
- Как изменить цвет текста?
- Какие тэги являются обязательными для любой Web-страницы?
Таким образом, мы с вами повторили материал необходимый нам для изучения материала сегодняшнего урока.
|
Учащиеся отвечают на вопросы учителя, используя свои знания и свой конспект.
1. Атрибут FACE принадлежит тэгу и позволяет изменять гарнитуру текста
.
2. Это атрибут ALIGN. Он имеется у тэгов и .
3. Веб-браузер - программа, демонстрирующая веб-страницу.
4. Это когда возможна обратная связь с объектом, т.е. информация проходит не только от источника, но и к источнику.
5. Цвет текста можно изменять при помощи тэга и его атрибута COLOR. Пример:
…
6. Это тэги , , и <BODY>.<br /><br /></td> </tr> <tr valign=top> <td width=52> <br /><b>III</b><br /> </td> <td width=634> <br /><u> Изучение нового материала</u><br /><br /><br /><u>Объяснение учителя с использованием компьютерной презентации</u><br /><br /><br />Есть хорошая поговорка: «Лучше один раз увидеть, чем семь раз услышать». Она хорошо подходит к теме нашего урока, т.к. наглядность сайта, его привлекательность во многом зависит от иллюстративного материала: схем, графиков, фотографий и рисунков. Умение размещать их на сайте дает всегда преимущество в сравнении с чисто текстовым материалом на Web-странице, а в бизнесе это очень часто играет роль хорошей рекламы.<br /> <br />На Веб-страницах могут размещаться графические файлы трёх форматов – GIF, JPG и PNG. Если рисунок сохранён в другом формате, то его необходимо предварительно преобразовать в один из выше указанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office или даже обычный графический редактор Paint.<br /> <br />Для вставки изображения используется тэг <img> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Веб-страницы, то в качестве значении атрибута SRC достаточно указать только имя файла:<br /> <br /><img src="images/”computer.gif”"><br /> <br />Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе (по стандартам MS-DOS, но с использованием «обычной» косой черты – “/”, а не обратной - ”\”).<br /> <br />Например:<br /> <br /><img src="images/computer.gif”"><br /> <br /><img src="images/logo.jpg"><br /> <br />Если файл находится на удалённом сервере в Интернете, то должен быть указан URL-адрес этого файла. Например:<br /> <br /><img src="images/”-a"><u>r.ru/computer.png</u></a>”><br /> <br />Однако, пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст.<br /> <br />Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:<br /> <br /><img src="images/”my_foto.gif”"><br /> <br />Данный комментарий будет выводить заданную текстовую строку вместо рисунка. Эта же строка комментария выводится и при наведении на рисунок курсора мыши в качестве «всплывающей подсказки».<br /> <br />Можно управлять размерами выводимого на экран рисунка (независимо от его реальных размеров), используя параметр WIDTH=[ширина], где ширина картинки задается в процентах от ширины всей страницы (тогда после числа ставится знак «%») или в пикселях.<br /> <br />Пример:<br /> <br /><img src="images/”my_foto.gif”"><br /> <br />Высота рисунка при этом изменяется пропорционально уменьшению/увеличению его ширины. Аналогично действует и ещё один предусмотренный в HTML параметр HEIGHT, позволяющий указать высоту рисунка в пикселях, а при одновременном использовании WIDTH и HEIGHT можно указать точные размеры картинки, в том числе выполняя её непропорциональное масштабирование – «растягивая» и «сплющивая» изображение. Однако при этом нужно не забывать, что такое масштабирование может ухудшить качество рисунка, а время на его загрузку все равно определяется реальными размерами. Поэтому параметры WIDTH и HEIGHT гораздо чаще используются для другой цели: их значения в пикселях указываются равными реальной ширине и высоте рисунка (т.е. масштабирования не происходит), браузер же благодаря им может заранее, до загрузки графических элементов содержимого страницы, определить занимаемое данным рисунком место. За счёт этого исключаются неприятные «прыжки» текста, хорошо заметные, когда до загрузки рисунка ему отводится совсем небольшой участок страницы (достаточный для отображения значка-признака рисунка и строки, являющейся значением параметра ALT), а уже загруженный рисунок «оттесняет» текст и прочие элементы содержимого страницы, изменяя их расположение на экране. (Если HEIGHT отсутствует, то высота места, зарезервированного под ещё не загруженный рисунок, обычно автоматически приравнивается его указанной в качестве значения параметра WIDTH ширине).<br /> <br />Можно скомбинировать рисунок с текстом:<br /> <br /><u> Первый способ</u> – вставка картинки отдельно между абзацами текста, для чего надо заключить тэг <img> в обособленный контейнер <P>…</P>. Уже знакомый нам параметр ALIGN служит здесь для центрирования рисунка на странице (значения LEFT и RIGHT передвинули бы рисунок к левому или правому краю окна браузера, соответственно).<br /> <br /><i><u>Пример 1(рисунок между абзацами):</u></i><br /> <br /><H1 ALIGN=CENTER><B>Зимняя сказка</B></H1><br /> <br /><br /><img src="images/”winter.gif”"><br /><br /> <br /><P ALIGN=JUSTIFY>…</P><br /><br /><br /><u> Второй способ</u> – выполнение оборки («обтекания») рисунка текстом. Для этого служит уже знакомый нам параметр ALIGN, но уже входящий в состав тэга <img>. Его значение может быть равным LEFT (тогда рисунок выравнивается по левому краю, а текст обтекает его справа) или RIGHT (рисунок справа, а текст слева).<br /> <br /><i><u>Пример 2 (рисунок слева и текст «обтекает» его)</u></i><br /> <br /><br /><img src="images/”diablo_gamer2.gif”">…Текст…<br /><br /> <br /><i><u>Пример 3 (рисунок справа и текст «обтекает» его)</u></i><br /> <br /><br /><img src="images/”diablo_gamer2.gif”">…Текст…<br /><br />Заметим, что в обоих этих примерах мы видим по два параметра ALIGN, один их которых записан в составе тэга <img>, а второй – в тэге <P>. Соответственно действие этого параметра распространяется (при указанном значении) в первом случае на выравнивание рисунка относительно текста, а во втором – на выравнивание абзаца текста независимо от наличия рисунка. Таким образом, несмотря на одинаковое название параметра<i><b>, это разные по смыслу параметры</b></i>!<br /> <br />При желании можно вставить в один и тот же абзац и два рисунка сразу, разместив один из них слева, а другой справа, как это показано в следующем примере. Обратите внимание на то, что место вставки в текст каждого из двух тэгов <img> определяет высоту размещения соответствующих им рисунков на странице (верх рисунка примерно соответствует точке вставки его в тексте).<br /> <br /><i><u>Пример 4 (два рисунка слева и справа и текст «обтекает» их)</u></i><br /> <br /><P ALIGN= JUSTIFY ><img src="images/”diablo_gamer2.gif”">…Текст…<img src="images/”diablo_gamer2_z.gif”">…Текст…</P><br /><br /><br />Заметим, что перетекание текста происходит не только после добавления на Веб-страницу нового рисунка, но и при изменении размеров окна браузера (в том числе за счёт другого разрешения экрана) или общего размера шрифта в настройках браузера. С этой неприятностью приходится мириться, нужно лишь позаботиться о том, чтобы рисунки не были размещены слишком близко и не «налезали» друг на друга.<br /><br /></td> <td width=256> <br />Слушают учителя, записывают определения, примеры и новые слова (термины) в тетрадь,(ведут конспект) задают вопросы, когда что-нибудь не понятно.<br /> </td> </tr> <tr valign=top> <td width=52> <br /><b>IV</b><br /> </td> <td width=634> <br /><u> Первичная проверка усвоения знаний</u><br /><br /><br />Чего надо опасаться, когда одновременно при вставке картинки используются сразу два атрибута тега <img>: WIDTH и HEIGHT?<br /><br /><br />Что позволяет сделать с картинкой атрибут WIDTH?<br /><br /><br />К какому способу прибегают программисты (пользователи) при просмотре сайтов в браузере, когда Интернет не очень скоростной, и как поступают в этом случае создатели сайтов?<br /><br /><br />Что надо сделать, чтобы текст страницы «обтекал» вставленную картинку?<br /> </td> <td width=256> <br />Учащиеся отвечают на вопросы учителя.<br /> <br />Ответы на вопросы:<br /> <br />1.Если не знаешь точного размера рисунка в пикселях, то можно нарушить пропорции отображения на экране.<br /> <br />2.Этот атрибут тэга <img> позволяет уменьшить размеры отображаемого на экране рисунка до того количества пикселей (имеется ввиду ширина картинки), которое указывается в этом атрибуте.<br /> <br />3.При просмотре сайтов при низкоскоростном Интернете пользователи отключают в браузере просмотр графики, но программисты используют тогда всплывающий комментарий, описывающий что на картинке.<br /> <br />Надо тэг <img…> расположить внутри текста страницы, а чтобы закрепить его за каким-либо абзацем лучше поместить этот тэг внутрь контейнера абзаца, к которому прикрепляется картинка.<br /><br /></td> </tr> <tr valign=top> <td width=52> <br /><b>V</b><br /> </td> <td width=634> <br /><u> Первичное закрепление знаний</u><br /> <br /><u>Задание</u><br /> <br />Написать в рабочих тетрадях программу Web-страницы с названием «Картинка», чтобы картинка pict1.png расположилась в середине страницы между двумя абзацами текста:<br /> <br />- над картинкой должен быть текст: “Это мой рисунок” отформатированный по ширине, синего цвета, размером 6;<br /> <br />- под картинкой должен быть текст: “Это не лучший мой рисунок”, отформатированный по центру, красного цвета, размером 4.<br /> <br />- при наведении мышки на картинку должна всплывать подсказка “Улыбнись!”.<br /><br /><br />Те, кто справился с заданием, допускается к итоговому заданию на компьютере<br /> </td> <td width=256> <br />В тетрадях должен быть написан следующий текст:<br /> <br /><HTML><br /> <br /><HEAD><br /> <br /><TITLE> Картинка
Это мой рисунок
Это не лучший мой рисунок
|
VI
|
Самостоятельное выполнение задания и его контроль
Задание
На компьютерах заготовлены на рабочем столе два рисунка в формате bmp. Необходимо их преобразовать в формат jpg и сохранить в папке 9А класс (9Б класс). В этой папке с помощью блокнота создать файл index3.phpl – Web-страницу, на которой расположить текст: «Умозаключение – это форма мышления, с помощью которой из одного или нескольких суждений (посылок) может быть получено новое суждение (вывод)»;
Высказывание – это форма мышления, в которой что-либо утверждается или отрицается о реальных предметах, их свойствах и отношениях между ними. Высказывание может быть либо истинно, либо ложно».
Этот текст выровнять по ширине страницы и слева в начале текста вставить рисунок зайца с шириной рисунка 100 пикселей, а справа в нижней части текста вставить рисунок тигра с высотой рисунка 100 пикселей. К обоим рисункам сделать комментарии: к зайцу – «Это заяц», к тигру «Это тигр».
|
<br /> <br />Заяц и Тигр<br /> <br />
 Умозаключение – это форма мышления, с помощью которой из одного или нескольких суждений (посылок) может быть получено новое суждение (вывод)»;
Высказывание – это форма мышления, в которой что-либо утверждается или отрицается о реальных предметах, их свойствах и отношениях между ними. Высказывание может быть либо истинно, либо ложно».
|
