Ступенька 44-ая.

Вторник, 07 Февраля 2012 г. 12:04 + в цитатник

Объекты, скрипты и другие средства, чтобы оживить наш документ.

Ступенька 44-ая.

В двух прошлых главах мы обсуждали с вами возможность вставки объектов в наш документ. Однако, вы должны понимать, что музыка, видеоклипы, flash и другие объекты – не единственное, чем мы можем оживить и сделать страницы нашего сайта интереснее. В этой и следующей главе мы поговорим с вами еще об одном средстве, которые позволяет нам делать наши документы более гибкими, дает нам больше возможностей в работе над нашим сайтом – это Таблицы Каскадных Стилей (CSS - Cascading Style Sheets), еще один стандарт и разработка Консорциума, организации занимающейся разработкой стандартов и спецификаций для веб.

Первое, что нам следует понять – CSS отличный от HTML стандарт. Почему же мы говорим о нем в рамках учебника о HTML, потому что CSS – это стандарт, расширяющий возможности HTML. Как мы уже с вами знаем – используя только HTML, мы весьма ограничены в средствах. Вспомним пример с елкой – так вот, CSS зажигает на нашей елочке огоньки, заставляет нашу елку искриться, сверкать. Однако, чтобы гирлянда горела на елке, надо ее прежде повесить на елку, вкрутить все лампочки, куда надо, и воткнуть в розетку.

Чтобы ввести CSS в наши HTML-документы, нам опять же, как и в случае с объектами, понадобятся связующие звенья – специальные тэги и их атрибуты. Но о них мы будем говорить в следующей главе, в этой же главе я вам дам представление о том, что такое CSS.

Давайте, подумаем, что вызывало у вас удивление, когда вы сталкивались с этим на других страницах, а потом хотели реализовать то же самое у себя на сайте, но не могли понять как. Это могли быть ссылки, которые изменяют цвет при наведении, ссылки у которых убрано подчеркивание, текст, который увеличивается в размере при наведении на него, ячейки таблицы, которые меняют цвет при наведении, картинки и текст, которые наслаиваются друг на друга – и многое другое. Теперь вы знаете, что такие и подобные трюки реализуются при помощи CSS.

Что же именно можно сделать при помощи CSS:

Использовать собственные расширения HTML (так, например, вы можете окрасить текст в синий цвет при помощи атрибута color тэга FONT, а можете использовать Таблицы Каскадных стилей, для того, чтобы сделать тоже самое, преимущество в этом, что стили могут быть вынесены в отдельный файл, и, чтобы потом поменять цвет указанных блоков текста во всех документах вашего сайта, достаточно изменить одну строку в одном файле, а так вам бы пришлось вручную менять код многих страниц).
Свободно управлять содержимым веб-страниц (позиционировать блоки текста, таблицы, картинки, как вам угодно, например, наложить текст и картинки друг на друга, в любом месте страницы).
Различные визуальные эффекты (прозрачность, смена цвета при наведении и прочее)
И так далее

Как вы сами теперь можете понять, CSS стоит того, чтобы вы его изучили, вы даже должны его изучить, если хотите создавать профессионально свои странички, в этом вам поможет спецификация по CSS, а также различные учебники и статьи, ссылки на которые вы по традиции найдете в правой колонке. А пока что мы с вами вернемся на землю, и продолжим осваивать HTML, ведь мы можем с вами перейти к изучению других, более сложных технологий не раньше, чем мы освоим с вами простейшие, но все-таки нужные, такие как HTML.

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

Рубрики:

Учебник по Html для чайников

Метки: учебник по Html для чайников

Комментарии (0)

Ступенька 43-ая.

Вторник, 07 Февраля 2012 г. 12:03 + в цитатник

Объекты, скрипты и другие средства, чтобы оживить наш документ.

Ступенька 43-ая.
Очень часто для внедрения в документ таких объектов, как видеоклипы, музыкальные файлы, 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-анимации в наш документ:

<embed src="mult.swf" pluginspage="http://www.macromedia.com/shockwave/download/index...d_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="300"> </embed>

И снова ничего сложного не оказалось:)

Но что делать, если мы хотим подстраховаться, если мы боимся, что если, отдав предпочтение одному из тэгов <object> или <embed>, мы все же рискуем тем, что наш объект не отобразиться в броузере посетителя нашей страницы? Боязливые могут почитать рецепт здесь: http://flash-ripper.com/articles/.

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

Конечно, это касается не только музыкального сопровождения к вашему сайту, чтобы мы не вводили на наш сайт, нам надо прежде подумать: а действительно ли оно нужно, будет ли удобно это нашему посетителю. Вот теперь моя совесть чиста, и вы можете переходить к следующей ступеньке, где вы узнаете много нового и интересного :)

Рубрики:

Учебник по Html для чайников

Метки: учебник по Html для чайников

Комментарии (0)

Ступенька 42-ая.

Вторник, 07 Февраля 2012 г. 12:02 + в цитатник

Объекты, скрипты и другие средства, чтобы оживить наш документ.

Ступенька 42-ая.

Как вы уже могли понять, 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 data="sobaka.jpg" type="image/jpeg"> тут был большой любитель сосисок </object>

Теперь будем по обычаю разбираться, что к чему.

Атрибут data указывает местоположение данных для объекта, в нашем случае он указывает на то, где лежит подгружаемая картинка. Атрибут type указывает тип содержимого для данных, указанных в data, т.е. он указывает броузеру с каким типом объекта он имеет дело, в нашем случае это image – изображение, картинка, jpeg – тип картинки (изображения). Текст, который мы заключили в тэг <object></object>, ваш посетитель увидит, если броузер не сможет отобразить ваш объект – картинку.

Что, если мы хотим подгрузить другой объект (не картинку, а допустим какой-либо видеоклип)? Наши действия аналогичны, указываем местоположение данных объекта, и тип данных:

<object data="film.mpeg" type="application/mpeg"> здесь была фильма </object>

Как видите, все не так уж сложно. Но на этом возможности и функции тэга <object> не ограничиваются. С помощью него мы можем сделать альтернативную генерацию объектов: это, допустим, когда ваш фильм (клип) не загрузился, вы можете указать, чтобы вместо него подгрузился клип с другого адреса, можете указать, что если и другой клип не подгрузится, чтобы вместо него подгрузилась картинка, и т.д. И это далеко не все, что вы можете сделать при помощи тэга <object>, но, как я говорила, наше знакомство с ним в данном учебнике будет кратким и обзорным, более тесно и серьезно познакомиться с <object> вам поможет спецификация (официальная документация по HTML), где наиподробнейшим образом расписаны все возможности применения <object> в ваших документах. А пока что наш с вами путь лежит на следующую ступеньку, где мы продолжим наш разговор об объектах и их внедрении в наш документ.

Рубрики:

Учебник по Html для чайников

Метки: учебник по Html для чайников

Комментарии (0)

Ступенька 41-ая.

Вторник, 07 Февраля 2012 г. 12:01 + в цитатник

Учебник по Html для чайников. Фреймы.

Ступенька 41-ая.

Вот мы добрались и до последней главы о фреймах. Собственно, о фреймах мы закончили говорить в предыдущей главе, а на этой ступеньке мы поговорим об 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-документы динамичными, расширяют наши возможности при создании страниц.

Рубрики:

Учебник по Html для чайников

Метки: Учебник по Html для чайников.

Комментарии (0)

Ступенька 40-ая.

Вторник, 07 Февраля 2012 г. 12:00 + в цитатник

Учебник по Html для чайников. Фреймы.

Ступенька 40-ая.

В этой главе мы поговорим о том, что становиться проблемой для каждого человека, начинающего осваивать фреймы.

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

Для начала, господа, познакомьтесь с новым атрибутом тэга <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.

<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>

Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы).

Рубрики:

Учебник по Html для чайников

Метки: Учебник по Html для чайников.

Комментарии (0)

Ступенька 39-ая.

Вторник, 07 Февраля 2012 г. 11:58 + в цитатник

Учебник по Html для чайников. Фреймы.

Ступенька 39-ая.

Допустим, мы решили остановиться на последнем варианте фреймовой структуры для нашей страницы, значит будем приводить его в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме, содержащим документ 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>:

<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>, они могут использоваться без опасений, т.к. для него они в спецификации как раз и предусмотрены.

Вот такие пироги:) Остальное будет на других ступеньках.

Рубрики:

Учебник по Html для чайников

Метки: Учебник по Html для чайников.

Комментарии (0)

Ступенька 38-ая.

Вторник, 07 Февраля 2012 г. 11:57 + в цитатник

Учебник по Html для чайников. Фреймы.

Ступенька 38-ая.

В этой главе мы разберемся, как расположить документы в окне следующим образом

или

В предыдущей главе я говорила, что не можем использовать атрибуты rows и cols одновременно применительно к одному тэгу <frameset>. Тогда как же расположить наши документы в окне так, как указано на рисунках? Просто, ввести в наш фрейм документ еще одного господина <frameset>, но обо всем по порядку.

Начнем с первого рисунка:

Каким образом мы будем делить окно? - На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на два столбца, в которых будут располагаться документы menu.html и content.html.

<html> <head> <title>Хождение по фреймам</title> </head> <frameset rows="100,*"> <frame src="logo.html"> <???> </frameset> </html>

Принцип построения ясен, только вот как обозначить ряд, разбитый на два столбца? Как я уже говорила, тут нам поможет господин Frameset.

<html> <head> <title>Хождение по фреймам</title> </head> <frameset rows="100,*"> <frame src="logo.html"> <frameset cols="150,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </frameset> </html> (посмотреть)

Для тех, кто не уследил за движениями моих рук, поясняю. Первый ряд мы оформили как положено, при помощи тэга frame. Во втором ряду на сцену выгодит тэг <frameset></frameset>.

С помощью атрибута cols тэга <frameset></frameset> мы делим второй ряд на два столбца (первый шириной 150 пикселов, второй по ширине занимает все оставшееся пространство). А тэги <frame>, которые содержит <frameset></frameset>, определяют, какие документы будут показаны загружены в вертикальных фреймах во втором ряду (menu.html и content.html).

Теперь разберем вариант, изображенный на втором рисунке:

Здесь мы будем делить окно на столбцы. Второй столбец будет содержать в себе документ content.html (содержание), а первый столбец мы разобьем на два ряда, и поместим в них документы logo.html и menu.html.

<html> <head> <title>Хождение по фреймам</title> </head> <frameset cols="100,*"> <frameset rows="100,*"> <frame src="logo.html"> <frame src="menu.html"> </frameset> <frame src="content.html"> </frameset> </html> (посмотреть)

Вот так. Ничего сложного здесь нет:)

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

Рубрики:

Учебник по Html для чайников

Метки: Учебник по Html для чайников.

Комментарии (0)

Ступенька 37-ая.

Вторник, 07 Февраля 2012 г. 11:56 + в цитатник

Учебник по Html для чайников. Фреймы.

Ступенька 37-ая.

Эту главу мы начнем с небольшого фокуса: замените атрибут rows, на cols:

<html> <head> <title>Хождение по фреймам</title> </head> <frameset cols="100,150,*"> <frame src="logo.html"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html> (посмотреть)

Ну-ка, посмотрите наш пример. Ловкость рук и никакого мошенства :)

Итак, атрибут cols говорит нашему броузеру, что наши фреймы будут расположены вертикально (столбцами). Т.е. значения атрибута cols (cols="100,150,*") задают уже не высоту, а ширину каждого фрейма. Ширина первого фрейма – 100 пикселов, ширина второго – 150, а третий фрейм занимает по ширине все оставшееся пространство.

Кстати, мы получили еще один из четырех вариантов, которые собирались сделать:

Итак, подведем итоги. Мы можем расположить наши фреймы горизонтально (рядами) или вертикально (колонками) относительно друг друга, делаем мы это с помощью параметров тэга <frameset> Cols и Rows. Другого способа деления не существует. Одновременно эти параметры использовать нельзя.

При помощи rows мы разбиваем располагаем фреймы горизонтально (рядами) и задаем какую высоту будет иметь каждый фрейм, при помощи cols располагаем фреймы вертикально (столбцами) и задаем какую ширину будет иметь каждый фрейм.

Кстати, ширина и высота могут задаваться не только в пикселях, но и в процентах от общей ширины (высоты) окна:

<frameset cols="10%,15%,75%">

Помните, что в сумме это все должно равняться 100%. А то бывают же умники...

Рубрики:

Учебник по Html для чайников

Метки: Учебник по Html для чайников.

Комментарии (0)

Ступенька 36-ая.

Вторник, 07 Февраля 2012 г. 11:53 + в цитатник

Учебник по Html для чайников. Фреймы.

Ступенька 36-ая.

Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Предлагаю классический вариант - logo.html, menu.html, content.html - о котором я упоминала в предыдущей главе.

Расположить мы можем это по-разному, вот для примера четыре варианта из множества возможных:

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

Т.к. документы, которые мы размещаем во фреймах независимые, то соответственно каждый документ может содержать в себе что угодно (и текст, и картинки, и таблицы). Почему я особо оговариваю этот момент: некоторые неразумные читатели почему-то воображают, что фреймы – это альтернатива таблицам. ЭТО НЕ ВЕРНО!

Итак, сначала создадим такой вариант (предварительно не забудьте создать обычные *.html документы с логотипом, меню и основным содержанием):

<html> <head> <title>Хождение по фреймам</title> </head> <frameset rows="100,*,150"> <frame src="logo.html"> <frame src="content.html"> <frame src="menu.html"> </frameset> </html> (посмотреть)

Давайте разберемся, что и для чего. При помощи атрибута rows тэга <frameset> мы указали, что наши фреймы будут расположены горизонтально (рядами). В значении атрибута rows мы прописали высоту каждого фрейма (rows="100,*,150"). Высота первого фрейма - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство по высоте (это мы указали значком *), - полагаю, здесь должно быть все ясно.

Тэг frame сообщает броузеру какие же документы у нас будут загружены во фреймах. В нашем случае: в первом фрейме будет загружен - logo.html (документ с логотипом), второй фрейм займет документ с непосредственным содержанием (content.html), а третий - меню. Если вы хотите, чтобы меню было во втором ряду (фрейме), то вам следует поменять его местами с content.html

<html> <head> <title>Хождение по фреймам</title> </head> <frameset rows="100,*,150"> <frame src="logo.html"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html> (посмотреть)

Посмотрите что у нас получилось. Опаньки... Поменять-то мы их местами - поменяли, а вот теперь надо задать новые значения атрибуту rows, чтобы меню у нас снова занимало только 150 пикселов по высоте, а содержание - все остальное:

<html> <head> <title>Хождение по фреймам</title> </head> <frameset rows="100,150,*"> <frame src="logo.html"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html> (посмотреть)

Вот теперь другое дело:) Все-таки от перемены мест слагаемых кое-что меняется...

Рубрики:

Учебник по Html для чайников

Метки: Учебник по Html для чайников.

Комментарии (0)

Ступенька 35-ая.

Вторник, 07 Февраля 2012 г. 11:52 + в цитатник

Учебник по Html для чайников. Фреймы.

Ступенька 35-ая.

Вот мы добрались и до фреймов (frames). Что же это такое и чем они замечательны? Фреймы позволяют нам открыть в окне броузера - не один, а одновременно несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и content.html - документ с непосредственным содержанием нашего сайта).

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

Вы могли слышать на форумах или где-то еще о том, что фреймы это плохо. Отсюда у вас вполне закономерно может возникнуть ко мне вопрос: "Фреймы это хорошо, или все же плохо?"

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

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

Что же касается моей позиции - то я всегда считала, что фреймы - это хорошо, очень хорошо, если их использование оправдано, если они смотрятся красиво и эстетично, и использованы они с умом. С умом, это значит, что, когда мы вводим фреймы в наш документ, мы не ограничиваемся средствами HTML, мы также вводим скрипты для корректной работы фреймов. Но об этом все в правой колонке, наша же с вами задача научиться создавать фреймы при помощи стандартных средств, не более того.

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

Т.к. первый документ на сайте, который показывается посетителю это index.html (или вроде него), то мы его и будем мучить, пусть он будет фрейм-документом. Создадим документ index.html:

<html> <head> <title>Хождение по фреймам</title> </head> </html>

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

Что ж, не будем грустить о тэге body, и найдем ему вполне достойного заместителя:

<html> <head> <title>Хождение по фреймам</title> </head> <frameset></frameset> </html>

Здравствуйте Frameset, какое красивое имя, говорят, что вы решили изменить кое-что в жизни нашего сайта и ввести фреймы :), очень приятно, мы всегда рады новым и практичным решениям.

Теперь надо найти frameset достойных помощников и задать ему некоторые жизненно необходимые атрибуты, но это на следующей ступеньке.

Рубрики:

Учебник по Html для чайников

Метки: Учебник по Html для чайников

LiveInternetLiveInternet

-Рубрики

-Ссылки

-Музыка

-Всегда под рукой

-Метки

-Приложения

-Подписка по e-mail

-Интересы

-Друзья

-Статистика

--марина--

Перейти к полной формеБыстрая запись

Ступенька 44-ая.

Объекты, скрипты и другие средства, чтобы оживить наш документ.

Ступенька 43-ая.

Объекты, скрипты и другие средства, чтобы оживить наш документ.

Ступенька 42-ая.

Объекты, скрипты и другие средства, чтобы оживить наш документ.

Ступенька 41-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 40-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 39-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 38-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 37-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 36-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 35-ая.

Учебник по Html для чайников. Фреймы.

Поиск по блогу

по комментариям по друзьям