Чертёж третий Картинки и бегущие строки

1. Пришла пора поместить на нашу страничку фотографию – твою, твоих друзей, или всех вас вместе. Подготовь её – обрежь всё лишнее, если она слишком большая, уменьши (это всё можно сделать в редакторах Photoshop, Photo Editor, и даже в Paint). Если у тебя нет фотографии, то для нашей учебной странички просто нарисуй её и сохрани в формате jpg. Пусть имя файла с фотографией будет drug.jpg.

2. В папке my_site создай папку images (для рисунков и фотографий) и перемести в неё файл drug.jpg.

3. А теперь в файл index.html сразу после заголовка добавь строчку:

...

< H2 align=center> < FONT color=#ff0088>

Здравствуйте! Меня зовут Вася! < /FONT> < /H2>

< IMG src=”images/drug.jpg”>

...

Посмотри результат в браузере. Есть фотография?

Любое изображение (рисунок, фотографию, чертежи…) вставляется на страничку тегом < IMG>, атрибут src которого указывает дорожку к файлу, которая состоит из имени папки, содержащей файл-картинку, и имени самого файла, записанного через / (слэш).

4. Тег < IMG> имеет довольно много атрибутов, с которыми мы сейчас и разберёмся.

Атрибут align задаёт обтекание изображения текстом. Он может принимать значения left, right. Проверь, как он работает и выбери подходящий.

< IMG src=”images/drug.jpg” align=right >

Атрибуты vspace и hspace отвечают за поля вокруг рисунка (сверху и снизу, справа и слева), задаваемые в точках. Это необходимо для того, чтобы текст слишком близко не прижимался к рисункам.

< IMG src=”images/drug.jpg” align=right hspace=10 >

Атрибуты width и height задают ширину и высоту рисунка в точках. Узнать её можно в графическом редакторе, например, в Paint.

5. Загрузи свою «фотографию» в Paint, выбери Рисунок à Атрибуты… и посмотри ширину и высоту в открывшемся окне.

< IMG src=”images/drug.jpg” align=right hspace=10 width=217 height=150 >

Атрибут border задаёт толщину рамки вокруг рисунка, а атрибут alt – альтернативный текст-подсказку. Что это такое?

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

< IMG src=”images/drug.jpg” align=right hspace=10 width=217 height=150 border=3 alt=”Мои друзья” >

6. Помещать картинки и фотографии на страничку, конечно, интересно, но ещё интереснее формировать фон странички. Оказывается, в качестве фона можно использовать любое изображение. Попробуем. Добавь в тег < BODY> атрибут background, отвечающий за фон:

< BODY bgcolor=#ffddff text=#880088

background=”images/drug.jpg” >

7. Посмотри результат. Нравится? Вряд ли. Для фона нужна совсем другая картинка – неяркая, неброская, с плавными переходами цвета. Она не должна отвлекать внимание на себя. Такие картинки делают художники с помощью специальных программ. Попробуем и мы создать простенькую фоновую картинку:

c запусти редактор Paint, в окне Рисунок à Атрибуты… задай размеры рисунка 30х30 (в точках);

c изобрази белый ромбик на светло-голубом фоне ;

c сохрани рисунок в папке images под именем fon, выбрав в поле Тип файла строчку GIF;

c замени в теге < BODY> имя файла drug.jpg на fon.gif.

8. Обнови страничку. Лучше? Идём дальше:

c открой файл fon.gif в редакторе Photo Editor;

c раскрой меню Effects (Эффекты);

c возможно, в нём не все пункты активны; в этом случае выполни File à Properties (Файл à Свойства), в открывшемся окне в списке Type (Тип) выбери True Color (24bit) и нажми Ok;

c теперь выбери Effects à Edge à Thin edge (Эффекты à Выделение краёв à Тонкий край), Ok;

c сохрани файл под именем fon2.gif (File à Save as… или Файл à Сохранить как…);

c выбери Effects à Notepaper (Эффекты à Почтовая бумага), установи бегунки Image balance (баланс изображения) в 37-38, Graininess (зернистость) в 12, Relief (рельеф) в 13, нажми кнопку Preview (просмотр); изменяя положения бегунков и нажимая Preview, добейся наиболее удачного, на твой взгляд, результата, и нажми кнопку Apply (применить);

c сохрани файл под именем fon3.gif;

c в Photo Editor есть и другие эффекты, можно обрезать картинку, изменить её размер, яркость и цветовую гамму, но всё это выходит за рамки нашего курса.

9. Попробуй в качестве фона вставить картинки из файлов fon2.gif, fon3.gif. Возможно, поэкспериментировав с фоновыми рисунками, ты решишь вернуть обыкновенный гладкий фон (фоновая картинка – дело тонкое и капризное, тут нужен хороший вкус и, главное, чувство меры. Этот случай из тех, в которых лучше недобрать, чем перебрать). Тогда удали из тега < BODY> атрибут background.

10. И, под конец, разберёмся ещё с одним интересным, но довольно опасным тегом – < MARQUEE> – бегущая строка.

Чем опасен этот тег? Перебором.

Бегущая строка привлекает к себе внимание, отвлекая посетителя от содержимого странички. Поэтому применять её стоит очень осторожно, только тогда, когда это действительно необходимо.

Но наша страничка учебная, мы хотим всё познать. Поэтому вставляем бегущую строку.

< HTML>

< HEAD>

< TITLE> Моя домашняя страничка< /TITLE>

< /HEAD>

< BODY bgcolor=#ffddff text=#880088>

< MARQUEE behavior=alternate> Заходите ко мне

в гости< /MARQUEE>

< H2 align=center> < FONT color=#ff0088>

Здравствуйте! Меня зовут Вася! < /FONT> < /H2>

< IMG src=”images/drug.jpg” align=right hspace=10

width=217 height=150 border=0 alt=”Мои друзья”>

< P> < FONT size=+1> Я учусь в 9 классе одиннадцатой школы

города Иркутска.

< P> Я люблю информатику, рисовать и своих

четвероногих и пернатых друзей.

< P> А друзья мои – это < I> < FONT size=+0> синичка

< B> Клава< /B> < /FONT>,

кошка < B> Дуся< /B> и < FONT size=+2> щенок

< B> Погромыч.< /B> < /I> < /FONT> < /FONT>

< /BODY>

< /HTML>

Тег < MARQUEE> имеет несколько атрибутов, с которыми ты разберёшься сам:

height – высота строки;

width – ширина строки;

bgcolor – цвет фона;

vspace – расстояние от бегущей строки до текста по вертикали;

hspace – расстояние от бегущей строки до текста по горизонтали;

loop – сколько раз прокрутится строка;

direction (left, right, up, down) – направление движения строки (влево, вправо, вверх, вниз);

behavior (scroll, slide, alternate) – поведение строки (обычная прокрутка, прокрутка с остановкой, от края к краю);

scrollamount – скорость движения строки, может принимать значения от 1 до 10.

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