Материал: 1896
Рис. 40. Вид Web-страницы в окне браузера
3.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 41):
Рис. 41. Вид Web-страницы в окне браузера
1.5.ГРАФИКА НА WEB-СТРАНИЦЕ
1.5.1.Типы графических файлов, размещаемых на Web-странице
Изображение можно сохранять в нескольких форматах. У каждого из них свои преимущества и недостатки. WWW поддерживает два основных формата изображений – GIF и JPEG.
Тип файлов GIF (Graphical Interchange Format – графический формат обмена) был впервые применен много лет назад CompuServe (онлайновая информационная служба) для предоставления информации в стандартном графическом формате. Он стал первым типом файлов, поддерживаемых
WWW.
Формат JPEG (Joint Photographic Experts Group – объединенная группа экспертов фотографии). Во многих случаях он оказался существенно эффективнее GIF, особенно для больших изображений. Файлы в формате JPEG занимают меньше места и соответственно быстрее загружаются. JPEG использует специальную технику компрессии изображений, что определяет его преимущество для рисунков и фотографий. Кроме того, JPEG сохраняет цвета и детали лучше, чем GIF.
Оптимальные размеры файлов
При использовании изображений на Web-странице необходимо обратить внимание на размеры файлов. Когда кто-то посещает Webстраницу, ему обычно необходимо загрузить весь текст и все изображения на свой компьютер. Текст загружается недолго, чего нельзя сказать об изображениях. Необходимо представлять себе, насколько велика Webстраница и сколько времени требуется на ее загрузку. Загрузка должна занимать разумный промежуток времени, иначе после одного-двух посещений посетители больше у вас не появятся.
Максимальный размер файла
Лучше любые изображения на странице ограничивать размером 20 Кбайт. Такие изображения достаточно подробны и быстро загружаются. Ограничение в 20 Кбайт очень приблизительно. Если встретилось потрясающее изображение, занимающее больше 20 Кбайт, спокойно используйте его. Просто помните, что если вставляете слишком много больших изображений, время ожидания посетителей существенно возрастет.
1.5.2.Размещение изображений на Web-странице
Втабл. 14 приведены теги, используемые для размещения графических изображений на Web-странице.
Таблица 14. Теги размещения графики на Web-странице
Тег |
Комментарий |
<IMG SRC="name"> |
Добавляет изображение в HTML документ |
|
|
<IMG SRC="name" ALIGN=" "> |
Выравнивает изображение одним из способов: |
|
left – горизонтальное выравнивание по левому |
|
краю (выполняется по умолчанию); |
|
right – горизонтальное выравнивание по |
|
правому краю; |
|
top – вертикальное выравнивание по верхнему |
|
краю; |
|
middle – вертикальное выравнивание по |
|
центру; |
|
bottom – вертикальное выравнивание по |
|
нижнему краю |
<IMG SRC="name" BORDER=" "> |
Устанавливает толщину рамки вокруг |
|
изображения |
|
|
<IMG SRC="name" ALT=" "> |
Задает альтернативный текст |
<IMG SRC="name" WIDTH=" " > |
Задает ширину изображения в пикселях |
<IMG SRC="name" HEIGHT=" "> |
Задает высоту изображения в пикселях |
<IMG SRC="name" HSPACE=" "> |
Устанавливает отступы от левой и правой |
|
сторон изображения в пикселях, составляет 5 |
|
– 30 пикселей |
<IMG SRC="name" VSPACE=" "> |
Устанавливает отступы от верхней и нижней |
|
сторон изображения в пикселях, составляет 5 |
|
– 30 пикселей |
Замечание: всегда указывайте имя графического файла в точном соответствии с его видом в файловой системе (в том числе с учетом прописных букв). Обычно достаточно указать только имя файла и его расширение, но если файл расположен не в текущем каталоге, придется привести полный путь. Имена файлов и расширения должны быть представлены маленькими латинскими буквами, например computer.gif.
1.5.3 Уменьшение размера и миниатюризация изображений
Если общий размер файлов превышает желаемый, у вас есть несколько способов поместить изображения на домашнюю страницу, не заставляя каждого посетителя долго загружать их. Можно масштабировать изображения, уменьшив их размер на экране и соответственно размер файла. После уменьшения размера ваше изображение становится труднее
рассматривать. Некоторые изображения в сжатом виде смотрятся хорошо, другие же практически невозможно разглядеть. Другая возможность, которой можно воспользоваться, – создание миниатюрных дубликатов более крупных изображений. Создайте на Web-странице миниатюру большого изображения и вставьте ссылку (о ссылках поговорим позднее) на изображение-оригинал, чтобы посетители смогли увидеть его, если захотят. Миниатюры очень популярны, поскольку дают посетителям возможность выбирать только те изображения, которые они хотят увидеть.
Выравнивание изображения и задание рамки
Приведем примеры размещений изображений на Web-странице:
1.Выравнивание изображения относительно левой стороны документа
(рис. 42):
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Computer</TITLE>
</HEAD>
<BODY><IMG SRC="computer.gif" ALIGN="left"> </BODY>
</HTML>
Рис. 42. Вид Web-страницы в окне браузера
2.Выравнивание изображения относительно правой стороны документа (рис. 43):
…
<IMG SRC="computer.gif" ALIGN="RIGHT">
…
Рис. 43. Вид Web-страницы в окне браузера
3. Выравнивание изображения по центру документа (рис. 44):
…
<P ALIGN="CENTER">
<IMG SRC="computer.gif">
…
Рис. 44. Вид Web-страницы в окне браузера
4. Установка рамки изображения (рис. 45):
…
<IMG SRC="computer.gif" BORDER="14" ALIGN="RIGHT">
…