Ступенька 39-ая.
Допустим, мы решили остановиться на последнем варианте фреймовой структуры для нашей страницы, значит будем приводить его в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме, содержащим документ logo.html.
Допустим, мы решили остановиться на последнем варианте фреймовой структуры для нашей страницы, значит будем приводить его в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме, содержащим документ logo.html.
<html> <head> <title>Хождение по фреймам</title> </head> <frameset cols="100,*"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no"> <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </html> (посмотреть) |
Scrolling - атрибут тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.
Собственно, scrolling="auto", можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появится, если она нужна, а если нет - ее не будет.
Если вы подведете мышку к границе какого-либо фрейма, то увидите, что потянув за нее, вы можете изменить размеры фрейма. Как же запретить вашему посетителю это делать? При помощи атрибута noresize для тэга <frame>:
Собственно, scrolling="auto", можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появится, если она нужна, а если нет - ее не будет.
Если вы подведете мышку к границе какого-либо фрейма, то увидите, что потянув за нее, вы можете изменить размеры фрейма. Как же запретить вашему посетителю это делать? При помощи атрибута noresize для тэга <frame>:
<html> <head> <title>Хождение по фреймам</title> </head> <frameset cols="100,*"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no" noresize> <frame src="menu.html" noresize> </frameset> <frame src="content.html" noresize> </frameset> </html> (посмотреть) |
Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым мы раньше уже встречались. Итак, border="0".
<html> <head> <title>Хождение по фреймам</title> </head> <frameset cols="100,*" border="0"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no"> <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </html> (посмотреть) |
Так уже лучше :). Но все же, что-то еще хочется исправить... А! Картинку с чёртом так и хочется прижать в левый верхний угол:
<html> <head> <title>Хождение по фреймам</title> </head> <frameset cols="100,*" border="0"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0"> <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </html> (посмотреть) |
Атрибуты marginwidth и marginheight вам уже знакомы, они определяют ширину полей фрейма. В нашем документе мы убрали поля, задав значения этим атрибутам равные нулю для фрейма, содержащего документ с нашим чертом (logo.html).
Стоп, стоп, скажет мой читатель, вы же говорили об этих атрибутах, как о нестандартных. Да, конечно, но не стандартны они лишь при употреблении с тэгом <body>, т.к. этого спецификация не предусматривает, однако для тэга <frame>, они могут использоваться без опасений, т.к. для него они в спецификации как раз и предусмотрены.
Вот такие пироги:) Остальное будет на других ступеньках.
Стоп, стоп, скажет мой читатель, вы же говорили об этих атрибутах, как о нестандартных. Да, конечно, но не стандартны они лишь при употреблении с тэгом <body>, т.к. этого спецификация не предусматривает, однако для тэга <frame>, они могут использоваться без опасений, т.к. для него они в спецификации как раз и предусмотрены.
Вот такие пироги:) Остальное будет на других ступеньках.
Ступенька 40-ая.
В этой главе мы поговорим о том, что становиться проблемой для каждого человека, начинающего осваивать фреймы.
Итак, обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме, в котором располагается документ с меню. А нам нужно, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать?
Для начала, господа, познакомьтесь с новым атрибутом тэга <frame> - name (кстати, name, мне кажется, что мы с вами уже знакомы:). Пустим name в дело:
В этой главе мы поговорим о том, что становиться проблемой для каждого человека, начинающего осваивать фреймы.
Итак, обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме, в котором располагается документ с меню. А нам нужно, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать?
Для начала, господа, познакомьтесь с новым атрибутом тэга <frame> - name (кстати, name, мне кажется, что мы с вами уже знакомы:). Пустим name в дело:
<html> <head> <title>Хождение по фреймам</title> </head> <frameset cols="100,*" border="0"> <frameset rows="100,*"> <frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0"> <frame src="menu.html"> </frameset> <frame src="content.html" name="window-1"> </frameset> </html> |
Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ content.html).
Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target="имя_фрейма"), с которым мы, кстати, тоже уже знакомы.
Введем атрибут target в документе со ссылками - menu.html.
Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target="имя_фрейма"), с которым мы, кстати, тоже уже знакомы.
Введем атрибут target в документе со ссылками - menu.html.
<html> <head> <title>Документ с Меню</title> </head> <body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff"> <center> <a href="content.html">Главная</a> <a href="tumki.html">Тумки</a> <a href="bumki.html">Бумки</a> <a href="tururumki.html">Турурумки</a> <a href="tra-la-la.html">Траляля</a> </center> </body> </html> |
Вот такой он (menu.html), в нашем случае. Теперь для каждой ссылки укажем параметр target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).
<html> <head> <title>Документ с Меню</title> </head> <body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff"> <center> <a href="content.html" target="window-1">Главная</a> <a href="tumki.html" target="window-1">Тумки</a> <a href="bumki.html" target="window-1">Бумки</a> <a href="tururumki.html" target="window-1">Турурумки</a> <a href="tra-la-la.html" target="window-1">Траляля</a> </center> </body> </html> (посмотреть) |
Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает, при этом мы не приложили никаких особых усилий, а только изменили немного два документа :) – наш фрейм-документ (index) и документ, содержащий ссылки (меню).
Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top:
<a href="project.html" target="_top">Мой проект о рыбках</a>
Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы).
Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top:
<a href="project.html" target="_top">Мой проект о рыбках</a>
Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы).
Вот мы добрались и до последней главы о фреймах. Собственно, о фреймах мы закончили говорить в предыдущей главе, а на этой ступеньке мы поговорим об IFrame - "плавающем" фрейме.
Итак, что такое Iframe, и чем он отличается от просто фреймов. IFrame - "плавающий" или встроенный фрейм. Вы, наверняка встречали его уже много раз на разных сайтах. Для Iframe нам не нужно создавать фрейм-документ, и прописывать в нем фреймовую структуру нашей страницы. Iframe позволяет нам вставить один html-документ в другой html-документ.
Как это выглядит:
Как вы видите, появляется форма заданного размера, в которой отображается нужный нам документ. Это очень удобно, вы уже наверняка встречались с "плавающим" фреймом, когда регистрировались на каких-либо сайтах, как правило соглашения с пользователем заключены для удобства в "плавающий фрейм", чтобы вы могли ознакомиться с соглашением, не переходя на другую страницу сайта, сразу.
«Плавающий» фрейм вводится в наш обычный html-документ при помощи тэга <iframe></iframe>:
<IFRAME src="ancorpri.html" width="300" height="250" scrolling="auto" frameborder="1"></IFRAME>
В атрибуте src мы указываем путь к документу, который отобразиться во встроенном фрейме.
Атрибуты height и width отвечают за ширину и высоту встроенного фрейма.
Атрибут scrolling (полоса прокрутки) и его значения мы тоже уже знаем из уроков по фреймам: он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.
Атрибут frameborder указывает отображать или нет границы встроенного фрейма, возможные значения 1 (да, отображать) и 0 (нет, не отображать).
Границы встроенного фрейма растягивать при помощи мыши ваш посетитель не может, поэтому атрибута noresize встроенные фреймы не имеют.
Iframe может выравниваться относительно содержимого страницы: текста и картинок, и может, соответственно, быть заключен в тэги выравнивания и таблицы.
Какие подводные камни нас могут ожидать при использовании Iframe – он не поддерживается многими броузерами, в основном старыми версиями броузеров, поэтому стоит подумать прежде, чем включать этот элемент на страницы вашего сайта, так ли это уж необходимо.
На этом наш разговор о фреймах завершен, напоминаю о полезных ссылках в правой колонке, советую изучить, а после переходить к следующей ступеньке, на которой мы начнем новую тему поговорим об объектах и дополнительных средствах, которые облегчают нашу жизнь, делают html-документы динамичными, расширяют наши возможности при создании страниц.
Ступенька 42-ая.
Как вы уже могли понять, html не слишком функционален, его возможности весьма ограничены. Из-за этого ему уже много лет предрекают скорую смерть, как стандарту веб, однако, он до сих пор жив и будет жить, скорее всего, еще долго. В чем же причина: он очень прост в изучении и эксплуатации, любой человек может освоить html. Но куда же деваться от недостатков? Для этого разработчики стандарта ввели в html тэги, при помощи которых мы можем встраивать в наш html-документ различные объекты, а также можем привязывать к html-документу другие технологии (CSS, Javascript и т.д.), при помощи которых наш документ становится динамичным. Но обо всем по порядку.
Итак, представьте себе елочку, которую вы принесли в свой дом под новый год. Html подобен такой елочке. Но елочку надо нарядить. Что мы для этого можем сделать – покрасить ветки, навесить мишуру – мы весьма ограничены без дополнительных средств для украшения нашей елки (html).
Итак, я говорила, о том, что мы можем встраивать объекты в нашу страницу. Один тэг для вставки объекта в страницу мы уже знаем <img>, вводя его в код нашего документа, мы указываем броузеру подгрузить картинку на нашу страницу. Т.е. <img> позволяет нам повесить на нашу елку шарик. Но шарик не является частью елки, это посторонний объект. А тэг <img> в данном случае играет роль веревочки, при помощи которой мы присоединяем шарик (картинку, объект) к елочке (html).
Вы должны понимать, что картинки, это не единственное, что мы можем повесить на нашу елочку. Кроме картинок мы можем включить в наш документ музыку, другой документ, flash-анимацию, апплеты, клипы и многие другие объекты.
Какие объекты, кроме картинок, мы уже умеем включать в наш документ? Это другие документы, мы научились их внедрять в наш документ при помощи тэга <iframe>.
Как же быть с остальными объектами, как же их вешать на нашу елочку, внедрять в наш документ? Для общего внедрения объектов в наш документ существует тэг <object>, этот тэг достаточно многофункционален, и обо всех тонкостях его применения и свойствах я вам рассказывать не буду, надеясь, что вы сами потом поближе познакомитесь с ним при помощи спецификации по HTML, однако, в приличном обществе принято представлять людей друг другу при первом знакомстве, поэтому позвольте вас немного ознакомить с тэгом <object>, полагаю, что вы не будете возражать :), но для начала немного вспомним пройденное ранее.
Итак, вы уже знакомы с тэгом <img>. Напишем код для вставки картинки в наш документ:
Как вы уже могли понять, html не слишком функционален, его возможности весьма ограничены. Из-за этого ему уже много лет предрекают скорую смерть, как стандарту веб, однако, он до сих пор жив и будет жить, скорее всего, еще долго. В чем же причина: он очень прост в изучении и эксплуатации, любой человек может освоить html. Но куда же деваться от недостатков? Для этого разработчики стандарта ввели в html тэги, при помощи которых мы можем встраивать в наш html-документ различные объекты, а также можем привязывать к html-документу другие технологии (CSS, Javascript и т.д.), при помощи которых наш документ становится динамичным. Но обо всем по порядку.
Итак, представьте себе елочку, которую вы принесли в свой дом под новый год. Html подобен такой елочке. Но елочку надо нарядить. Что мы для этого можем сделать – покрасить ветки, навесить мишуру – мы весьма ограничены без дополнительных средств для украшения нашей елки (html).
Итак, я говорила, о том, что мы можем встраивать объекты в нашу страницу. Один тэг для вставки объекта в страницу мы уже знаем <img>, вводя его в код нашего документа, мы указываем броузеру подгрузить картинку на нашу страницу. Т.е. <img> позволяет нам повесить на нашу елку шарик. Но шарик не является частью елки, это посторонний объект. А тэг <img> в данном случае играет роль веревочки, при помощи которой мы присоединяем шарик (картинку, объект) к елочке (html).
Вы должны понимать, что картинки, это не единственное, что мы можем повесить на нашу елочку. Кроме картинок мы можем включить в наш документ музыку, другой документ, flash-анимацию, апплеты, клипы и многие другие объекты.
Какие объекты, кроме картинок, мы уже умеем включать в наш документ? Это другие документы, мы научились их внедрять в наш документ при помощи тэга <iframe>.
Как же быть с остальными объектами, как же их вешать на нашу елочку, внедрять в наш документ? Для общего внедрения объектов в наш документ существует тэг <object>, этот тэг достаточно многофункционален, и обо всех тонкостях его применения и свойствах я вам рассказывать не буду, надеясь, что вы сами потом поближе познакомитесь с ним при помощи спецификации по HTML, однако, в приличном обществе принято представлять людей друг другу при первом знакомстве, поэтому позвольте вас немного ознакомить с тэгом <object>, полагаю, что вы не будете возражать :), но для начала немного вспомним пройденное ранее.
Итак, вы уже знакомы с тэгом <img>. Напишем код для вставки картинки в наш документ:
<img src="sobaka.jpg" alt="тут был большой любитель сосисок"> |
Это вам все знакомо – src - указывает, где находится изображение, которым будет подменен тэг <img>, alt – альтернативное описание, на всякий случай, если картинка не загрузится, тогда мы увидим его.
То же самое мы можем сделать при помощи тэга <object>, подгрузить картинку в наш документ.
То же самое мы можем сделать при помощи тэга <object>, подгрузить картинку в наш документ.
<object data="sobaka.jpg" type="image/jpeg"> тут был большой любитель сосисок </object> |
Теперь будем по обычаю разбираться, что к чему.
Атрибут data указывает местоположение данных для объекта, в нашем случае он указывает на то, где лежит подгружаемая картинка. Атрибут type указывает тип содержимого для данных, указанных в data, т.е. он указывает броузеру с каким типом объекта он имеет дело, в нашем случае это image – изображение, картинка, jpeg – тип картинки (изображения). Текст, который мы заключили в тэг <object></object>, ваш посетитель увидит, если броузер не сможет отобразить ваш объект – картинку.
Что, если мы хотим подгрузить другой объект (не картинку, а допустим какой-либо видеоклип)? Наши действия аналогичны, указываем местоположение данных объекта, и тип данных:
Атрибут data указывает местоположение данных для объекта, в нашем случае он указывает на то, где лежит подгружаемая картинка. Атрибут type указывает тип содержимого для данных, указанных в data, т.е. он указывает броузеру с каким типом объекта он имеет дело, в нашем случае это image – изображение, картинка, jpeg – тип картинки (изображения). Текст, который мы заключили в тэг <object></object>, ваш посетитель увидит, если броузер не сможет отобразить ваш объект – картинку.
Что, если мы хотим подгрузить другой объект (не картинку, а допустим какой-либо видеоклип)? Наши действия аналогичны, указываем местоположение данных объекта, и тип данных:
<object data="film.mpeg" type="application/mpeg"> здесь была фильма </object> |
Как видите, все не так уж сложно. Но на этом возможности и функции тэга <object> не ограничиваются. С помощью него мы можем сделать альтернативную генерацию объектов: это, допустим, когда ваш фильм (клип) не загрузился, вы можете указать, чтобы вместо него подгрузился клип с другого адреса, можете указать, что если и другой клип не подгрузится, чтобы вместо него подгрузилась картинка, и т.д. И это далеко не все, что вы можете сделать при помощи тэга <object>, но, как я говорила, наше знакомство с ним в данном учебнике будет кратким и обзорным, более тесно и серьезно познакомиться с <object> вам поможет спецификация (официальная документация по HTML), где наиподробнейшим образом расписаны все возможности применения <object> в ваших документах. А пока что наш с вами путь лежит на следующую ступеньку, где мы продолжим наш разговор об объектах и их внедрении в наш документ.
Ступенька 43-ая.
Очень часто для внедрения в документ таких объектов, как видеоклипы, музыкальные файлы, flash-анимация и прочих подобных используется не тэг <object>, а тэг <embed>. Почему происходит так, и что это такое за тэг:
Тэг <embed> не фигурирует в спецификации HTML (ни в нынешней, ни в старых), однако, он появился по инициативе одного из производителей броузеров и используется очень давно, и поддерживается на данный момент почти всеми броузерами, возможно, его даже безопаснее использовать, чем тэг <object>, для внедрения объектов в ваш документ. Итак, давайте посмотрим, как он работает, допустим, нам нужно внедрить музыкальный файл в наш документ:
Очень часто для внедрения в документ таких объектов, как видеоклипы, музыкальные файлы, flash-анимация и прочих подобных используется не тэг <object>, а тэг <embed>. Почему происходит так, и что это такое за тэг:
Тэг <embed> не фигурирует в спецификации HTML (ни в нынешней, ни в старых), однако, он появился по инициативе одного из производителей броузеров и используется очень давно, и поддерживается на данный момент почти всеми броузерами, возможно, его даже безопаснее использовать, чем тэг <object>, для внедрения объектов в ваш документ. Итак, давайте посмотрим, как он работает, допустим, нам нужно внедрить музыкальный файл в наш документ:
<embed src="music.mid" width="50" height="20" autostart="false" loop="true" play_loop="5" hidden="false"> </embed> |
1 - src="music.mid" – путь к музыкальному файлу (для веб, используюся файлы в формате *.mid и *.wav)
2 - width="50" height="20" - ширина (width) и высота (heigth) пульта управления
3 - autostart="false" - надо ли проигрывать снова ваш видео или музыкальный ролик (false - нет, true - да)
4 - loop="true" - повторять ролик с самого начала (false - нет, true - да)
5 - play_loop="5" - если да, то сколько раз (вместо 5 поставьте кол-во раз)
6 - hidden="false" - спрятать пульт ролика (false - нет, true - да)
Как видите, достаточно много возможностей для управления объектом, который вы внедряете в документ, однако, не все атрибуты, которые мы рассмотрели с вами сейчас, поддерживаются всеми броузерами, поэтому использовать их надо аккуратно.
Давайте поговорим о тех атрибутах тэга <embed>, которые по идее должны поддерживаться всеми броузерами, т.е. о безопасных. Часть этих атрибутов вы знаете: src (путь к объекту), align (выравнивание), width (ширина), height (высота), hspace (расстояние до текста или других объектов по горизонтали), vspace (расстояние до текста или других объектов по вертикали).
Из незнакомых нам атрибутов:
- pluginspage=”http://…” (путь к плагину, plug-in – небольшая программка, выполняющая какие-либо дополнительные функции в главной программе, так, например, чтобы проиграть flash-анимацию броузеру нужен плагин, в некоторых броузерах он есть, а в некоторых нет, для последних мы указываем путь к плагину, чтобы пользователь мог скачать плагин и просмотреть нашу flash-анимацию, мультик).
- hidden=”true” (false) - отображать указанный объект (да/нет)
- type=” image/jpeg” – тип подгружаемого объекта
Давайте рассмотрим новые атрибуты (и парочку старых, известных нам) на примере вставки flash-анимации в наш документ:
2 - width="50" height="20" - ширина (width) и высота (heigth) пульта управления
3 - autostart="false" - надо ли проигрывать снова ваш видео или музыкальный ролик (false - нет, true - да)
4 - loop="true" - повторять ролик с самого начала (false - нет, true - да)
5 - play_loop="5" - если да, то сколько раз (вместо 5 поставьте кол-во раз)
6 - hidden="false" - спрятать пульт ролика (false - нет, true - да)
Как видите, достаточно много возможностей для управления объектом, который вы внедряете в документ, однако, не все атрибуты, которые мы рассмотрели с вами сейчас, поддерживаются всеми броузерами, поэтому использовать их надо аккуратно.
Давайте поговорим о тех атрибутах тэга <embed>, которые по идее должны поддерживаться всеми броузерами, т.е. о безопасных. Часть этих атрибутов вы знаете: src (путь к объекту), align (выравнивание), width (ширина), height (высота), hspace (расстояние до текста или других объектов по горизонтали), vspace (расстояние до текста или других объектов по вертикали).
Из незнакомых нам атрибутов:
- pluginspage=”http://…” (путь к плагину, plug-in – небольшая программка, выполняющая какие-либо дополнительные функции в главной программе, так, например, чтобы проиграть flash-анимацию броузеру нужен плагин, в некоторых броузерах он есть, а в некоторых нет, для последних мы указываем путь к плагину, чтобы пользователь мог скачать плагин и просмотреть нашу flash-анимацию, мультик).
- hidden=”true” (false) - отображать указанный объект (да/нет)
- type=” image/jpeg” – тип подгружаемого объекта
Давайте рассмотрим новые атрибуты (и парочку старых, известных нам) на примере вставки flash-анимации в наш документ:
<embed src="mult.swf" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="300"> </embed> |
И снова ничего сложного не оказалось:)
Но что делать, если мы хотим подстраховаться, если мы боимся, что если, отдав предпочтение одному из тэгов <object> или <embed>, мы все же рискуем тем, что наш объект не отобразиться в броузере посетителя нашей страницы? Боязливые могут почитать рецепт здесь: http://flash-ripper.com/articles/.
Вот, собственно, и все, что я хотела вам рассказать об объектах. Однако, прежде, чем мы перейдем на следующую ступеньку, мне хотелось бы вас, мой читатель, предупредить и образумить: я понимаю, что когда мы создаем наши первые страницы нам хочется наполнить их и музыкой, и анимационными картинками, и многим прочим, однако, помните, что вы делаете страницу не для себя, а для своих посетителей, вы прежде всего заинтересованы в них, а значит надо делать так, как им будет удобнее. Так, возможно, стоит отказаться от музыки на веб-сайте, ведь многие, сидя за компьютером, слушают музыку с него же, а значит музыка, которую вы установите на своем сайте, ворвется какофонией в наушники (колонки) вашего посетителя, и вызовет только раздражение. Но даже, если вы устанавливаете музыку на свой сайт – постарайтесь, чтобы это был качественный звук, чтобы была возможность выключить эту музыку, также можно предупредить вашего посетителя, что на вашем сайте будет играть музыка, и предложить ему возможность отказаться от музыки на вашем сайте заранее.
Конечно, это касается не только музыкального сопровождения к вашему сайту, чтобы мы не вводили на наш сайт, нам надо прежде подумать: а действительно ли оно нужно, будет ли удобно это нашему посетителю. Вот теперь моя совесть чиста, и вы можете переходить к следующей ступеньке, где вы узнаете много нового и интересного :)
Но что делать, если мы хотим подстраховаться, если мы боимся, что если, отдав предпочтение одному из тэгов <object> или <embed>, мы все же рискуем тем, что наш объект не отобразиться в броузере посетителя нашей страницы? Боязливые могут почитать рецепт здесь: http://flash-ripper.com/articles/.
Вот, собственно, и все, что я хотела вам рассказать об объектах. Однако, прежде, чем мы перейдем на следующую ступеньку, мне хотелось бы вас, мой читатель, предупредить и образумить: я понимаю, что когда мы создаем наши первые страницы нам хочется наполнить их и музыкой, и анимационными картинками, и многим прочим, однако, помните, что вы делаете страницу не для себя, а для своих посетителей, вы прежде всего заинтересованы в них, а значит надо делать так, как им будет удобнее. Так, возможно, стоит отказаться от музыки на веб-сайте, ведь многие, сидя за компьютером, слушают музыку с него же, а значит музыка, которую вы установите на своем сайте, ворвется какофонией в наушники (колонки) вашего посетителя, и вызовет только раздражение. Но даже, если вы устанавливаете музыку на свой сайт – постарайтесь, чтобы это был качественный звук, чтобы была возможность выключить эту музыку, также можно предупредить вашего посетителя, что на вашем сайте будет играть музыка, и предложить ему возможность отказаться от музыки на вашем сайте заранее.
Конечно, это касается не только музыкального сопровождения к вашему сайту, чтобы мы не вводили на наш сайт, нам надо прежде подумать: а действительно ли оно нужно, будет ли удобно это нашему посетителю. Вот теперь моя совесть чиста, и вы можете переходить к следующей ступеньке, где вы узнаете много нового и интересного :)
В двух прошлых главах мы обсуждали с вами возможность вставки объектов в наш документ. Однако, вы должны понимать, что музыка, видеоклипы, flash и другие объекты – не единственное, чем мы можем оживить и сделать страницы нашего сайта интереснее. В этой и следующей главе мы поговорим с вами еще об одном средстве, которые позволяет нам делать наши документы более гибкими, дает нам больше возможностей в работе над нашим сайтом – это Таблицы Каскадных Стилей (CSS - Cascading Style Sheets), еще один стандарт и разработка Консорциума, организации занимающейся разработкой стандартов и спецификаций для веб.
Первое, что нам следует понять – CSS отличный от HTML стандарт. Почему же мы говорим о нем в рамках учебника о HTML, потому что CSS – это стандарт, расширяющий возможности HTML. Как мы уже с вами знаем – используя только HTML, мы весьма ограничены в средствах. Вспомним пример с елкой – так вот, CSS зажигает на нашей елочке огоньки, заставляет нашу елку искриться, сверкать. Однако, чтобы гирлянда горела на елке, надо ее прежде повесить на елку, вкрутить все лампочки, куда надо, и воткнуть в розетку.
Чтобы ввести CSS в наши HTML-документы, нам опять же, как и в случае с объектами, понадобятся связующие звенья – специальные тэги и их атрибуты. Но о них мы будем говорить в следующей главе, в этой же главе я вам дам представление о том, что такое CSS.
Давайте, подумаем, что вызывало у вас удивление, когда вы сталкивались с этим на других страницах, а потом хотели реализовать то же самое у себя на сайте, но не могли понять как. Это могли быть ссылки, которые изменяют цвет при наведении, ссылки у которых убрано подчеркивание, текст, который увеличивается в размере при наведении на него, ячейки таблицы, которые меняют цвет при наведении, картинки и текст, которые наслаиваются друг на друга – и многое другое. Теперь вы знаете, что такие и подобные трюки реализуются при помощи CSS.
Что же именно можно сделать при помощи CSS:
- Использовать собственные расширения HTML (так, например, вы можете окрасить текст в синий цвет при помощи атрибута color тэга FONT, а можете использовать Таблицы Каскадных стилей, для того, чтобы сделать тоже самое, преимущество в этом, что стили могут быть вынесены в отдельный файл, и, чтобы потом поменять цвет указанных блоков текста во всех документах вашего сайта, достаточно изменить одну строку в одном файле, а так вам бы пришлось вручную менять код многих страниц).
- Свободно управлять содержимым веб-страниц (позиционировать блоки текста, таблицы, картинки, как вам угодно, например, наложить текст и картинки друг на друга, в любом месте страницы).
- Различные визуальные эффекты (прозрачность, смена цвета при наведении и прочее)
- И так далее
Итак, в этой главе у меня была цель ознакомить вас с CSS, что я и сделала, в следующей же главе мы поговорим с вами о том, как внедрять CSS в наш документ, поэтому шагаем на следующую ступеньку за новыми знаниями.
Ступенька 45-ая.
Об одном из способов внедрения CSS в наш документ я почти проговорилась в прошлой главе, когда упомянула о том, что стили могут быть вынесены в отдельный файл, а это значит, что нам остается лишь указать путь к этому файлу, и указать, что это файл с CSS:
Об одном из способов внедрения CSS в наш документ я почти проговорилась в прошлой главе, когда упомянула о том, что стили могут быть вынесены в отдельный файл, а это значит, что нам остается лишь указать путь к этому файлу, и указать, что это файл с CSS:
<head> <link href="special.css" rel="stylesheet" type="text/css"> </head> |
Итак, когда стили вынесены в отдельный файл – это называется внешние таблицы стилей. Их мы вводим в документ при помощи тэга <link>, который размещается внутри тэга <head></head>, а не <body>, как мы привыкли.
Давайте ознакомимся с атрибутами тэга <link>:
1 – href=”http://…” – пусть к файлу со стилями
2 - rel="stylesheet" – указывает, является ли подгружаемые таблицы стилей постоянными, предпочитаемыми или альтернативными. В нашем случае мы установили постоянные таблицы стилей для документа. Подробнее об атрибуте rel и его значениях вам расскажет спецификация по HTML.
3 - type="text/css" – тип содержимого, подгружаемой информации, в нашем случае мы указываем, что это CSS.
Но не надо думать, что если вы связали документ с внешней таблицей стилей через тэг <link> – этого достаточно, чтобы все заработало. Надо еще указать для каких тэгов (элементов нашего документа) мы используем таблицы стилей.
Допустим, некоторая таблица стилей (которая у нас хранится в файле special.css) устанавливает красный цвет для абзаца, вот такой код будет у нее (в файле special.css):
Давайте ознакомимся с атрибутами тэга <link>:
1 – href=”http://…” – пусть к файлу со стилями
2 - rel="stylesheet" – указывает, является ли подгружаемые таблицы стилей постоянными, предпочитаемыми или альтернативными. В нашем случае мы установили постоянные таблицы стилей для документа. Подробнее об атрибуте rel и его значениях вам расскажет спецификация по HTML.
3 - type="text/css" – тип содержимого, подгружаемой информации, в нашем случае мы указываем, что это CSS.
Но не надо думать, что если вы связали документ с внешней таблицей стилей через тэг <link> – этого достаточно, чтобы все заработало. Надо еще указать для каких тэгов (элементов нашего документа) мы используем таблицы стилей.
Допустим, некоторая таблица стилей (которая у нас хранится в файле special.css) устанавливает красный цвет для абзаца, вот такой код будет у нее (в файле special.css):
P.special { color : red; } |
Однако, в данном случае, таблица стилей указывает, что не все блоки текста, заключенные в параграфы (<p>текст</p>), будут выделены красным цветом, а только те блоки, которым мы это укажем.
<html> <head> <title>Документ с CSS</title> <link href="special.css" rel="stylesheet" type="text/css"> </head> <body> <p class="special">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p> </body> </html> |
Посмотрите на код нашего документа, при помощи атрибута class мы задали тэгу <p> имя класса. Затем, когда мы писали код таблицы стилей (в файле special.css), мы указали, что этот стиль будет применяться только к тем тэгам (атрибутам) <p>, для которых мы задали имя класса special. Вот теперь у нас все связано между собой.
Таблицы стилей не обязательно должны быть вынесены во внешний файл, вы можете внедрять их непосредственно в ваш документ при помощи тэга <style>, в котором вы разместите код ваших таблиц стилей (<style>код таблицы стилей</style>):
Таблицы стилей не обязательно должны быть вынесены во внешний файл, вы можете внедрять их непосредственно в ваш документ при помощи тэга <style>, в котором вы разместите код ваших таблиц стилей (<style>код таблицы стилей</style>):
<html> <head> <title>Документ с CSS</title> <style type="text/css"> P.special { color : red; } </style> </head> <body> <p class="special">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p> </body> </html> |
Обратите внимание, тэг <style>, как и тэг <link>, размещается внутри тэга <head></head>, а не <body>.
Есть еще и третий способ внедрения CSS в ваш документ, когда при помощи атрибута (не путать с тэгом) style код CSS вводится непосредственно для какого-либо тэга:
Есть еще и третий способ внедрения CSS в ваш документ, когда при помощи атрибута (не путать с тэгом) style код CSS вводится непосредственно для какого-либо тэга:
<html> <head> <title>Документ с CSS</title> </head> <body> <p style="color: red">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не задали для него стиля.</p> </body> </html> |
color: red – это код таблицы стилей, задающей красный цвет для абзаца, ее мы ввели в наш документ при помощи атрибута style, естественно, что в атрибут style вы будете помещать уже свои, другие, таблицы стилей.
Вот и вся премудрость с внедрением стилей в наш HTML-документ. Уже не все так просто, как хотелось бы, но и не сложно при этом. Напоминаю вам, что о том, как писать коды таблиц стилей вы узнаете из спецификации по CSS, а также из учебников и пособий, ссылки на которые вы найдете в правой колонке.
Вот и вся премудрость с внедрением стилей в наш HTML-документ. Уже не все так просто, как хотелось бы, но и не сложно при этом. Напоминаю вам, что о том, как писать коды таблиц стилей вы узнаете из спецификации по CSS, а также из учебников и пособий, ссылки на которые вы найдете в правой колонке.