КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Погромыч знакомится с Дусей
|
|
|
|
...
Чертёж третий Картинки и бегущие строки
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.
Осталось добавить, что размер, цвет шрифта для бегущей строки задаётся так же, как для обычного текста. И констатировать, что наш третий чертёж готов.
Чертёж четвёртый
Гиперссылки
1. Можно без лукавства сказать, что сегодняшний тег <A> – самый главный в системе сайтостроительства. С его помощью создаются те самые волшебные дверки, через которые можно легко и быстро перебраться в сколь угодно далёкую комнатку-страничку. Называются эти «дверки» затейливо и звучно – гиперссылки. Но что попусту болтать, будем работать:
c в той же папке my_site создай новую страничку – файл pogrom.htm;
<HTML>
<HEAD>
<TITLE>Мой друг Погромыч</TITLE>
</HEAD>
<BODY bgcolor=#ffddff text=#880088>
<H2 align=center><FONT color=#ff0088>
Мой друг Погромыч</FONT></H2>
<P>В нашей дружной семье Погромыч оказался совершенно
случайно…
и дальше рассказ о щенке, возможно, с картинками и фотографиями
</BODY>
</HTML>
c в файл index.html добавь тег <A>:
<P>А друзья мои – это <I><FONT size=+0>синичка
<B>Клава</B></FONT>,
кошка <B>Дуся</B> и <FONT size=+2> <A href=pogrom.htm> щенок
<B>Погромыч </A>. </B></I></FONT></FONT>
Тег <A> имеет атрибут href, указывающий имя файла, к которому гиперссылка нас и отправляет.
Всё, что находится между «теговыми скобками» <A> и </A>, становится гиперссылкой (это может быть текст, картинки и что угодно).
c открой страничку index.html в браузере, обрати внимание на выделенные слова щенок Погромыч (именно так, синим цветом и подчёркиванием, показывается гиперссылка);
c подведи указатель мыши к щенку-ссылке – он (указатель) изменился, превратившись в «лапку» (указующий перст);
c если теперь этой лапкой ты щёлкнешь ссылку, то тут же увидишь рассказ о том, как Погромыч появился в нашей семье – в окно браузера загрузится указанная в атрибуте href страничка.
2. Чтобы, прочитав захватывающую историю щенка Погромыча, вернуться на начальную страничку, достаточно нажать кнопку Назад в панели инструментов браузера. Но хорошие строители (web-МАСТЕРА) на каждую страничку помещают так называемую панель навигации, которая состоит из ссылок на все значимые странички своего сайта. Ты хочешь стать мастером? Тогда за дело:
|
|
|
c открой в блокноте файл pogrom.htm;
c после рассказа о проделках щенка добавь строчки:
<CENTER>
<A href=index.html><img src=images/home.gif></A>
<A href=dusja.htm><img src=images/dusja.gif></A>
<A href=klava.htm><img src=images/klava.gif></A>
</CENTER>
Что здесь стоит пояснить? Тег <CENTER> выравнивает помещённые в него объекты по центру.
Ссылками на этот раз являются маленькие картинки:
c добавь в теги <IMG> атрибуты width, height, alt;
c создай ещё два файла dusja.htm и klava.htm, в которых расскажи о кошке Дусе и синичке Клаве;
c нарисуй картинки-кнопки с соответствующими изображениями и сохрани их в папке images под именами home.gif, dusja.gif, klava.gif и pogrom.gif;
c на все свои странички помести панели навигации.
3. Как только ты выполнишь все эти задания, можешь считать наш четвёртый чертёж законченным.
Для самых любопытных, которые заметили, что щенок Погромыч на главной страничке из синего стал фиолетовым.
Чтобы посетителю странички было легче ориентироваться в ссылках (какие он уже посетил, а какие ещё нет), посещённые ссылки принимают другую окраску, обычно фиолетовую.
Но мы можем изменить цвет гиперссылок, используя атрибуты link (цвет гиперсылки) и vlink (цвет посещённой гиперссылки) тега <BODY>:
<BODY bgcolor=#ffddff text=#880088 link=#ff00ff
vlink=#880000 >
И, наконец, для самых замечательных – тех, кто всё замечает, и, наверняка, уже успел заметить, что вокруг рисунков-ссылок появляется рамочка того же цвета, что назначен для ссылок. Если эта рамка вдруг портит дизайн твоей странички, убери её, задав в теге <IMG> атрибут border=0.
Чертёж пятый
Таблицы
Можно смело утверждать, что тег <TABLE>, с которым мы будем работать сегодня, один из самых главных и сложных и, в то же время, самых незаметных тегов. Без использования таблиц нельзя построить грамотную красивую страничку, ну, разве что, самую простенькую. Таблицы – это что-то вроде шкафчиков с полочками, на которых мы расставляем различные вещи. Можно, конечно, всё разложить и на полу…
Но мы желаем стать настоящими мастерами, поэтому принимаемся за изучение таблиц.
1. Для начала создадим что-то вроде фотогалереи на страничке Погромыча, используя таблицу для разметки. Открой файл pogrom.htm и добавь в него выделенные строки:
<HTML>
<HEAD>
<TITLE>Мой друг Погромыч</TITLE>
</HEAD>
<BODY bgcolor=#ffddff text=#880088>
<H2 align=center><FONT color=#ff0088>
Мой друг Погромыч</FONT></H2>
<P>В нашей дружной семье Погромыч оказался совершенно
случайно…
<TABLE border=1>
<TR>
<TD align=right>
</TD>
<TD>
<IMG src=images/foto1.jpg>
</TD>
</TR>
<TR>
<TD align=right >
<IMG src=images/foto2.jpg>
</TD>
<TD>
|
|
|
|
|
Дата добавления: 2014-11-16; Просмотров: 459; Нарушение авторских прав?; Мы поможем в написании вашей работы!