Изображения на web страницах. Размещение графических изображений. Задаем размеры изображению
Как говорилось, HTML на сегодняшний день является основой для написания любой веб страницы во Всемирной паутине. При использовании CSS создание кода на языке HTML коренным образом меняется. Можно попрощаться с перепрофилированием неуклюжих HTML тегов просто для того, чтобы добиться тех или иных визуальных эффектов. О некоторых HTML тегов или атрибутах, таких как, например, устаревший тег …
Главная
Закажите сайт и займитесь бизнесом!
Данную фразу можно услышать и увидеть на многих сайтах, а это ведь не зря!
Сайт — это лицо компании. И он является самым современным и эффективным каналом коммуникации с потенциальным потребителем. Только возможности интернет сайта позволяют в полной мере использовать все способы донесения информационного сообщения до пользователя. Текст, аудио и видео информация могут быть поданы в рамках одного сайта для ознакомления потребителя с ними.
С помощью программного обеспечения сайта можно принимать платежи, разговаривать по телефону, вести базы данных, отправлять и получать факсы, обмениваться SMS сообщениями и совершать многие другие действия. Современный интернет сайт – это информационный центр не только любой компании, но и любого пользователя интернета.
И это беспроигрышный способ эффективного и вместе с тем простого и наглядного донесения своих идей или разработок до широчайшей аудитории. И на сегодняшний день Web-документы, написанные на языке гипертекстовой разметки HTML, продолжают оставаться основной формой представления данных в Web среде.
Важнейшими достоинствами HTML являются:
- простота, позволяющая изучить HTML в кротчайшие сроки.
- возможность создания собственных Web страниц
- и HTML работает абсолютно одинаково на всех существующих сегодня платформах, покупать дополнительного оборудования не надо. И достаточно воспользоваться любым доступным текстовым редактором, например Блокнот.
В этом сайте, я постаралась детально описать весь процесс создания собственного Web сайта, а именно публикации готового проекта в Internet с целью предоставления доступа к нему всем пользователям.
Надеюсь многим мои статьи будут очень полезны, ведь сама я не программист, но меня очень вдохновляет эта работа.
В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать длинное текстовое описание.
Существуют два способа размещения графических изображений на странице:
- вставка отдельных картинок;
- заполнение фона картинкой.
В любом случае графическое изображение берется из файла.
Вставка графических изображений
Вставка на страницу графического изображения из файла графического формата производится с помощью тэга
(от англ, image - изображение) с указанием адреса файла в качестве аргумента атрибута SRC:
< IMG SRC = "адрес_графического_файла" >
Адрес графического файла - этолибо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для показа графического файла logotip.jpg следует написать тэг:
< IMG SRC = "logotip.jpg" >
Для увеличения скорости передачи графического изображения в тэге
можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл logotip.jpg) содержит картинку, полученную с высоким разрешением, а другой (например, logotip.gif) - картинку, полученную с низким разрешением. Тогда тэг:
< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >
…предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере приема заменить его файлом logotip.jpg.
Другой способ ускорения загрузки графики заключается в задании размеров прямоугольной области, в которой будет размещено графическое изображение, с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:
< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >
Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN
тэга
с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ
для верхнего и нижнего полей и НSPACE
для боковых полей в тэге
. Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг
.
Следующий тэг задает обтекание графики из файла logotip.jpg справа (картинка будет находиться слева от текста):
< IMG SRC = "logotip.jpg" ALIGN = LEFT >
Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT :
< IMG SRC = "logotip.jpg" ALIGN = RIGHT >
Чтобы задать поля вокруг картинки, надо написать тэг вида:
< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >
Здесь числа 20 и 10 определяют размеры полей.
Рассмотрим пример совместного использования графики и текстов. Откройте Блокнот (текстовый редактор Notepad) Windows. Напишите в нем HTML-код с использованием рассмотренных выше тэгов. Ниже приводится программа, выводящая некоторый текст и графику. В качестве графического файла можно использовать любой из имеющихся у вас файлов. Здесь используется файл logotip.gif.
< HTML >
< HEAD >
< TITLE > Упражнение 1 < / TITLE >
< / HEAD >
< BODY BGCOLOR = "YELLOW" >
< IMG SRC = "logotip.gif " ALIGN = LEFT >
< H1 > Текст обтекает графику справа < / H1 >
Рис. 657 . Текст обтекает картинку справаШирокие возможности точного позиционирования изображений (как и других элементов) на странице предоставляют таблицы и стили . Эти элементы HTML будут рассмотрены позже. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.
Цвета в таблице
Как построить на странице таблицу
Списки в списках
Списки определений
Нумерованный список
Маркированный список
Как создать на странице список
Существует три основных типа списков: маркированные, нумерованные и списки определений. Главное различие перечисленных типов состоит в способе нумерации и структуре.
Наиболее часто используется ненумерованный, или маркированный список. Маркированный список задается тегами , а пункты списка между этими тегами - с помощью тега
Нумерованный список очень напоминает маркированный. Единственным отличием является то, что в нумерованном списке перед каждым пунктом вместо графических маркеров автоматически помещаются последовательные номера или буквы.
Нумерованный список задается с помощью тегов . Как и в маркированном списке, каждый пункт задается тегом
- ключевое слово TAPE.
- . Тег
- задает отдельный элемент, то есть определяемый термин, а тег
- - остальную информацию, которая выводится на следующей строке с отступом. Вторая строка информации называется определением. Задается список определений так же, как и другие списки. Единственное отличие - для каждого элемента требуется два тега.
Одно из замечательных свойств списков - это возможность вкладывать их друг в друга. Вложение списка в список производится так же, как простое создание списка. Для этого не существует специальных тегов HTML. Чтобы не запутать браузер, убедитесь, что вы закрыли каждый внутренний список с помощью тега . Вкладывать друг в друга можно даже различные типы списков.
Воспроизведите все вышеперечисленные списки
У списков есть один недостаток - они одномерны. Это означает, что вы можете располагать информацию только на следующих друг за другом строках. Таблицы же позволяют располагать данные не только по строкам, но и по столбцам.
Для задания таблиц используется целый ряд тегов. Теги
и
обрамляют таблицу целиком, а ряд других тегов определяют, каким образом будет выводиться информация. В таблице приведено полное описание тегов таблиц.Теги HTML для построения таблиц:
Теги Описание
и Эти теги охватывают таблицу. Тег
сообщает браузерам, что далее следует описание таблицы. Если вы хотите, чтобы была видна сетка, разделяющая строки и столбцы, добавьте ключевое слово BORDER.
и Текст, отмеченный этими тегами, выводится в виде заголовка. Для задания заголовка можно также применять теги
и .и Теги отображают текст заголовками строки или столбца немного более крупным полужирным шрифтом.и Теги определяют каждую строку таблицы. Тег необязателен, но он делает Ваш HTML-код более полным и понятным.и Эта пара тегов отделяет текст каждой ячейки таблицы.Создайте файл, в котором постройте таблицу из пяти строк и пяти столбцов.
Существует ряд тегов, позволяющих задавать цвета фона и сетки таблицы. В первом случае ключевое слово BGCOLOR вставляется в тег
следующим образов:
Кроме ключевого слова BGCOLOR, существуют и другие способы управлять цветом:
BORDERCOLOR Изменят цвет сетки таблицы
BORDERCOLORDARK/ Используется для изменения сетки с
BORDERCOLORLIGHT дополнительным эффектом трехмерности
Измените цвет сетки таблицы с эффектом трехмерности .
Урок 12-13. Использование графики
Рисунки и графика очень важны для WWW. Это единственное средство Интернета, позволяющее просматривать на экране одновременно изображения и текст.
Чтобы поместить изображение на Web-странице, нужно знать, как применять тег
. Введите тег
и ключевое слово SRC= для указания, какую графику загрузить.
Вводя этот тег, обратите внимание, что файл должен находиться в той же папке, что и Ваш HTML-файл.
Графические изображения, размещенные на Web-странице, не только способствуют лучшему восприятию информации, но и позволяют сделать страницы более яркими и запоминающимися. Графические изображения вы можете подготовить сами или воспользоваться услугами дизайнеров. Можно также использовать библиотеки графических файлов программных продуктов, таких как Microsoft Office, CorelDraw и т.д.
Разместим на домашней странице создаваемого нами Web-узла графическое изображение из библиотеки Clip Art, входящей в состав Microsoft Office. Для этого выполните следующие действия:
- Откройте созданный Web-узел.
- Откройте домашнюю страницу, дважды щелкнув мышью на имени файла index.htm в панели Список папок (Folder List).
- В меню Вставка (Insert) выберите команду Рисунок Картинки (Clip Art). В окне программы FrontPage появляется панель Вставка картинки (Insert Clip Art).
- Выберите на этой панели команду Коллекция картинок (Media Gallery). Открывается диалоговое окно, позволяющее выбрать графическое изображение (рис. 15.8).
Рис. 15.8.
В верхней части диалогового окна помимо кнопок, управляющих отображением показываемых в окне объектов, а также копированием и удалением объектов, содержатся кнопки назначения (см. таблицу).
- Панель Список коллекций содержит папки вашего компьютера с мультимедийными файлами, а также файлы картинок библиотеки Clip Art. Откройте папку интересующей вас категории картинок. В рабочей области окна появятся изображения данной категории. При установке курсора на изображение видна подсказка с указанием имени, размера изображения и файла, в котором он содержится, а также формата графического изображения (рис. 15.9).
- Нажмите кнопку со стрелкой с правой стороны выбранного изображения. Появляется контекстное меню.
- Выберите в контекстном меню команду Копировать (Сору).
- Перейдите на Web-страницу и вставьте на нее из буфера обмена изображение, используя для этого любое удобное средство. Например, нажмите комбинацию клавиш
+. - Сохраните Web-страницу с размещенным в ней графическим изображением, нажав кнопку Сохранить
(Save) на стандартной панели инструментов. Появляется диалоговое окно Сохранение внедренных файлов
(Save Embedded Files) (рис. 15.10), предлагающее сохранить размещенное на странице изображение в папке images
Web-узла под именем, с которым файл находился в библиотеке. Это окно содержит кнопки следующего назначения:
- Переименовать (Rename) - позволяет переименовать файл.
- Сменить папку (Change Folder) - открывает диалоговое окно Смена папки (Change Folder), содержащего папки текущего Web-узла, позволяя выбрать иную папку для сохранения файла.
- Действие (Set Action) открывает диалоговое окно Задание действия, позволяющее изменить значение Сохранить (Save) столбца Действие (Action) на Не сохранять (Don"t Save). При выборе значения Сохранить рисунок сохраняется в указанной вами папке Web-узла, в противном случае на Web-странице останется ссылка на изображение, находящееся в библиотеке Clip Art.
Область Рисунок (Picture preview) показывает размещаемое изображение. Установив в диалоговом окне Сохранение внедренных файлов нужные параметры, нажмите кнопку ОК. Графический файл будет сохранен в указанной вами папке Web-узла.
Рис. 15.10.
Размещение графического изображения из файла
Мы рассмотрели размещение на Web-странице графического изображения из библиотеки Clip Ait. Для размещения на странице графического изображения из файла выполните одно из следующих действий:
- В меню Вставка (Insert) выберите команду Рисунок (Picture), а затем в открывшемся подменю - опцию Из файла (From File)
- Нажмите кнопку Добавить рисунок из файла (Insert Picture From File) на стандартной панели инструментов
- Нажмите кнопку Добавить рисунок из файла (Insert Picture From File) на панели инструментов Рисунки (Pictures)
При выполнении любого из этих действий открывается диалоговое окно Рисунок (Picture) (рис. 15.11). Найдите с помощью этого окна требуемый графический файл и для его размещения на Web-странице нажмите кнопку Вставить (Insert). Диалоговое окно закроется, а изображение будет размещено на странице.
Рис. 15.11.
Настройка свойств изображения
После размещения изображения на Web-странице необходимо настроить его свойства, используя диалоговое окно Свойства рисунка (Picture Properties) (рис. 15.12). Для его открытия щелкните мышью на изображении, а затем выполните одно из следующих действий:
- В меню Формат (Format) выберите команду Свойства (Properties)
- Выберите команду контекстного меню Свойства рисунка (Picture Properties)
- Нажмите комбинацию клавиш
+
Диалоговое окно Свойства рисунка содержит три вкладки: Общие (General), Видеозапись (Video), Вид (Appearance). Рассмотрим более подробно возможности настройки с помощью данного диштогового окна.
Цели урока:
расширение и углубление представлений о языке гипертекстовой разметки HTML;
формирование умений создавать веб-страницы с графикой;
развитие логического мышления, умений анализировать, сравнивать, систематизировать, обобщать.
Тип урока: урок усвоения новых знаний и умений .
Учащиеся должны уметь: создавать в редакторе Блокнот веб-страницы
с графикой.Программное и методическое обеспечение урока: редактор Блокнот ;
учебное пособие «Информатика 11», § 3 ( п. 3 .2) ; приложения к уроку 6;
ЭСУ W eb11 6 .1. Проверка знаний предыдущего урока (репродуктивный метод обучения, индивидуальная и фронтальная формы работы).
Выполнение индивидуальных заданий на компьютере: оформить текст на предложенной учителем веб-странице в соответствии с рисунком упражения к §3 ( п.3 .1) пособия или ЭСУ W eb11-5 .
Предложите у чащимся ответить на вопросы: В чем заключается гипертекстовая разметка документов? Какова структура HTML-документа? Каким тегом задается абзац? Переход на новую строку? Какими тегами задается полужирное и курсивное начертание символов? Как задать фон и цвет текста всей веб-страницы? Какими тегами и атрибутами задается шрифт, размер и цвет символов? Возможно использование теста (приложение к уроку 6; ЭСУ W eb11 5).
2. Актуализация знаний и мотивация учащихся на изучение нового материала ( фронтальная форма работы).
Перед началом объяснения нового материала в форме фронтальной беседы обсудите роль, которую в оформлении веб-страниц играют графические объекты: фотографии, рисунки, фоновые изображения (обои), разделительные линии. Они не только делают страницы более привлекательными и наглядными, но во многих случаях являются основными источниками информации. Продемонстрируйте примеры ( ЭСУ W eb11 6 ).
Подчеркните, что предназначенные для веб-страниц изображения можно создавать и редактировать в различных графических редакторах. Они могут быть получены с помощью цифрового фотоаппарата, сканера или из сети Интернет. Наиболее предпочтительны графические форматы gif , jpg и png , файла которых имеют небольшие размеры, что позволяет ускорить процесс загрузки. Напомните, что в формате jpg обычно сохраняют фотографии. Формат gif поддерживает анимацию и прозрачность.
3. Объяснение нового материала (объяснительно -иллюстративный метод обучения в сочетании с частично-поисковым, фронтальная форма работы ).
Объяснение начните с вопроса: хранятся ли изображения на самой веб-странице? П одчеркните, что все изображения, которые мы видим на веб-странице, хранятся в отдельных файлах, а в HTML -коде имеются лишь ссылки на них. Для отображения рисунков предназначен тег < img > , неотъемлемым атрибутом которого является имя графического файла.
Далее продемонстрируйте действие некоторых атрибутов тега < img >. Так, высоту и ширину отображаемого на экране рисунка задают значениями атрибутов height и width , а толщину рамки вокруг изображения значением атрибута border . В классах с низким уровнем подготовки это делает учитель с помощью видеопроектора. При достаточной подготовленности учащихся можно предложить им провести самостоятельное исследование с последующим фронтальным обсуждением результатов.
Важно подчеркнуть, что указание размеров позволяет увеличить или уменьшить лишь видимое на экране изображение (при этом исходный рисунок и файл, в котором он хранится, остаются неизменными). Если размеры не указаны, то по мере загрузки рисунка может измениться расположение текста и других объектов на экране. Поэтому, полезно всегда явно задавать эти атрибуты. Значения атрибута align указывают на выравнивание текста относительно рисунка или на способ обтекания текстом.
С помощью атрибута alt можно задать текст сообщени я , которое будет выводиться вместо рисунка, если он не найден или показ отключен в браузере. Кроме того, это сообщение показывается в виде подсказки, когда курсор мыши подводится к рисунку. Продемонстрировать полезность явного задания атрибутов height , width и alt можно, сняв установленный по умолчанию флажок Показывать изображения на вкладке Дополнительно диалогового окна Свойства обозревателя.
В заключение продемонстрируйте использование изображения из файла в качестве фона веб-страницы с помощью атрибута background тега < body >. ополнительно предложите создать поздравительную открытку (пример 3 из §3 ( п.3.2) пособия , ЭСУ W eb11 6 .
5. Подведение итогов урока
Учащиеся демонстрируют созданные страницы. Обсуждаются этапы работы и затруднения учащихся. Кратко формулируются особенности использовании изображений на веб-страницах,
6. Домашнее задание
Изучить материал § 3 ( п. 3 .2 ) учебного пособия , ответить на вопросы 1 3, подготовиться к практическому выполнению одного из заданий упражнения 2
TAPE=1 – Стандартная нумерация(1,2,3,4,5, …)
TAPE=A – Прописные буквы(A, B, C, D, …)
TAPE=a – Срочные буквы(a, b, c, d, …)
TAPE=I – Римские цифры(I, II, III, IV, …)
TAPE=i – Строчные римские цифры(i, ii, iii, iv, …)
Списки определений выглядят несколько иначе, чем другие типы списков. Для описания каждого пункта списка в этом случае применяется два тега, а не один тег
