High Star

Текст и графика

Два барана

Что ж, пора подвести некоторые итоги. Так чему же мы научились за предыдущие уроки?

1. Обрабатывать и вставлять изображения
2. Работать с текстом

Вот, пожалуй, и все. Хотя, не так уж это и мало. Потому как в основном, веб-странички и состоят из текста и изображений. До этого урока мы их рассматривали, в основном, отдельно. Ну, а в этом уроке мы познакомим их друг с другом поближе. Чтоб не дай бог, не подрались! Если раньше я допускала некоторые погрешности, то теперь увольте! Будем делать все так, как надо. С чувством, толком и расстановкой.

Нам понадобятся для этого урока несколько фотографий и большой текст. Может это будут ваши детские воспоминания, и тогда, как нельзя более кстати, подойдут личные фотографии из архива. Может это рассказ о путешествии, где наверняка вы не забыли засняться у водопада, горной вершины, а может и с папой Римским в обнимку. Либо это будет рассказ о встрече старых друзей, где вы заснялись на фоне пива, таранки и милиционеров. Главное, чтоб вам самим было интересно вспоминать, писать и делать.

Вы, возможно, возразите, мол, что еще за новости? Учили-учили, и опять у разбитого корыта? Опять все не так?

Но, спешу заметить, разве высшую математику проходят в первом классе? На первых уроках я подсунула вам здоровенный крючок с красивой начинкой, сказав, что делать странички - плевое дело! И даже сразу и фотографию впихнули и разместили свою страничку в Интернете. И вы с жадностью заглотили наживку! И теперь вы в моей власти. Обратной дороги нет. Только вперед и вперед! Не бросать же все на полпути? Когда столько наворочено?

А вообще, кроме шуток, если честно-честно… я вам благодарна. За то, что не бросили меня одну тут, среди тегов и разных атрибутов. Потому как что стоит полководец без армии, учитель без учеников и мать Тереза без своей доброты?

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

И пока наши бараны стоят, вытаращив друг на друга глаза, мы поговорим о тонких материях.

Ну что? Настращала вас? На самом деле ничего страшного не будет и дальше. Да и вы, наверняка уже полны решимости узнать все премудрости веб-строительства. И если бы не моя болтовня, наверняка продвинулись дальше. Так что бегу за вами!

Итак, у нас есть изображение. Мы его полностью оптимизировали. И даже знаем его размеры. Пусть оно будет 380 на 340 пикселов. Это важно - запомнить размеры. Наверняка вы наблюдали при загрузке сайта такую картину - изображение еще не загрузилось, вместо него малюсенький квадратик с крестиком, а вокруг - текст.

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

Так что надо показать посетителю просто размер изображения (в виде прямоугольника), размер которого соответствует размеру изображения, и текст тогда будет обтекать его так, как надо. Независимо от того, загрузилось или нет изображение.

Поэтому мы укажем размер своего изображения сразу:

<img src="foto/sea.jpg" width=380 height=340>

Но и этого мало! Хорошо бы еще на этом квадратике надпись сделать, мол, в этом квадратике, если захотите, увидите такое, что еще никто и никогда не видел. И тогда посетитель, вполне вероятно, плюнет на экономию и включит ваше изображение. Что он потом вам скажет - я не знаю.

Зато я знаю, как сделать альтернативный текст к нашему изображению с помощью атрибута alt, например так:

alt="это я в новом пиджаке"

Но и это еще не все! С помощью атрибута align мы должны определить метод выравнивания нашего изображения top (вверху), bottom (по умолчанию - внизу) или middle (в середине), left (слева) или right (справа) относительно текста.

Я вот возьму и выберу позицию справа, и у меня получится:

<img src="foto/sea.jpg" width=380 height=340 alt="это я в новом пиджаке" align=right>

Но и это не все! Вы же не хотите, чтоб текст прилипал вплотную к изображению? Если хотите, тогда конечно можете этот абзац пропустить. А я вот хочу, чтоб текст не пихался со всех сторон, и я его отгоню от своего изображения на 20 пикселов с помощью атрибутов hspace (отступ по горизонтали) и vspace (отступ по вертикали):

hspace=20 vspace=20

Ну, пока и хватит. Записываю окончательно:

<img src="foto/sea.jpg" width=380 height=340 alt="это я в новом пиджаке" align=right hspace=20 vspace=20>

Вы можете ставить атрибуты в любом порядке. И вам за это ничего не будет! Итак, вот как надо правильно записать в NotePad (Блокноте):

Листинг 14. Файл index.html

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

Для тех, у кого не орлиное зрение, поясняю -
в прямоугольнике написано "это я в новом пиджаке"

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

Например, у меня изображение, как я и говорила 380х340 пикселов. И вот, вставив его в страничку, я вдруг понимаю, что поторопилась с размерами, и что лучше уменьшить изображение раза в два. И возьму и просто заменю строчку

<img src=" foto/sea.jpg " width=380 height=340 >

на строчку

<img src=" foto/sea.jpg " width=190 height=170>

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

Так что запомните! Вы можете потренироваться, изменить размеры и в редакторе, но потом вернуться в Adobe Photoshop, либо в другой графический редактор, и там установить новые размеры (не забудьте опять оптимизировать для web!), и уже потом вставить правильные размеры в страничку.

Ну, и на последок… Смотрите, чтобы ваше изображение изменялось пропорционально. Чтобы не получилось так:

Вот что бывает с теми, кто не выдерживает размеры!!!

Эх, и почему вот в жизни так нельзя… взять и убавить себя на половину?