Ступенька 26-ая. дополнительная

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

Допустим, у нас уже есть большая таблица, забитая текстом какого-то отчета

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

Вот таблица, которая показывает сколько бук, бяк и других обитает в интернете:

буки 65% населения

бяки 20% населения

др. 15% населения

За сим все

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

<table>

<tr>

<td width="200" valign="top" background="blue.gif" align="center">С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутсвие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете.</td>

<td width="200" valign="top" background="blue.gif" align="center">Вот таблица, которая показывает сколько бук, бяк и других обитает в интернете:

<tr>

<td width="50" background="white.gif">буки</td><td background="white.gif">65% населения</td>

</tr>

<tr>

<td width="50" background="white.gif">бяки</td><td background="white.gif">20% населения</td>

</tr>

<tr>

<td width="50" background="white.gif">др.</td><td background="white.gif">15% населения</td>

</tr>

</table>

За сим все</td>

</tr>

</table>

Увы, код получился объемный, но зато в нем нет ничего сложного: вложенная таблица от обычной ничем не отличается. Благодаря вложенным таблицам гораздо проще управлять содержимым сайта.

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

А теперь сам нюанс: вроде было бы логичнее прописать просто белый фон для вложенной таблицы (bgcolor="#ffffff"), а не мучиться, создавая просто белую картинку и делая ее фоном (background="white.gif"), ведь так оно быстрее. Да, быстрее, но дело в том, что если IE (Internet Explorer) отображает атрибут bgcolor для вложенных таблиц, то некоторые другие броузеры отказываются этот атрибут для вложенных таблиц отображать, поэтому приходиться идти обходным путем, используя background.

Вот так мы и убили двух зайцев сразу: узнали, что можно задать атрибут background для таблиц, и при этом ознакомились с некоторыми тонкостями ремесла. Теперь будем добивать оставшихся заек:

Давайте обратимся к коду нашей таблицы и вспомним, что эту ячейку мы ввели для красоты. Чтобы ячейка не пустовала, в нее введен   (символ неразрывного пробела, это спецсимвол, с ними мы ознакомимся подробно чуть позже). Это не просто так. Дело в том, что есть любители использовать конструкцию типа: <td></td>. Вот такую конструкцию некоторые броузеры просто-напросто игнорируют, т.к. не любят пустых ячеек, поэтому для корректного отображения вашей таблицы везде вставляйте в пустые ячейки или  , или мелкую картинку размеров 1х1 пиксела.

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

В этой последней главе, посвященной таблицам, мы поговорим о рамках. Рамка вводится параметром border. Зададим рамку равную 3 пикселям:

Нашей рамке мы можем задать цвет. Пусть он будет черным в нашем примере:

таблица с рамкой

Посмотреть

Все очень просто.

Если вы хотите создать однотонную рамку (допустим черную), то мы используем таблицу с черным фоном и атрибутом cellpadding, который, как мы помним, задает размер поля ячейки. В нашу таблицу мы вкладываем другую таблицу – в итоге получится, что вокруг вложенной таблицы образовалась рамка с толщиной в пикселах, которую мы задали для атрибута cellpadding, и цветом, который мы задали для фона (bgcolor="#000000", в нашем случае) основной таблицы.

Для наглядности пример кода:

<tr>

<td>

</td>

</tr>

</table>

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

Итак, возьмем за основу один, из рассмотренных нами примеров:

<tr>

</tr>

<tr>

</tr>

</table>

Давайте, попытаемся на основе его сделать полноценную страницу. Первое, что мы сделаем, введем обязательные тэги и атрибуты для них:

<html>

<head>

<title>Мой первый сайт с таблицами</title>

</head>

<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

(посмотреть)

Если вы посмотрите, что у нас получилось, то увидите, что таблица маленькая по размеру, а значит, что мы должны изменить значения атрибутов, отвечающих за высоту и ширину таблицы. Убираем все старые значения ширин и высот, и прописываем новые:

<html>

<head>

<title>Мой первый сайт с таблицами</title>

</head>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

(посмотреть)

Мы задали для всей таблицы ширину 700 пикселов. Соответственно, общая сумма ширин ячеек не может превышать 700 пикселов: 300+400=700. Мы задали ширину только двум ячейкам, т.к. оставшиеся ячейки сами распределят выделенные под них 400 пикселов поровну. Мы не задали высоту (height), т.к. нельзя задать стопроцентную высоту (во весь экран) для таблиц, это не предусмотрено спецификацией, так что, наша таблица сама растянется, когда мы введем в нее какое-либо содержание (текст, картинки).

<html>

<head>

<title>Мой первый сайт с таблицами</title>

</head>

<center>

<tr>

<div align="left">

Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b>еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего. <br><br>. Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке? Кто знает, может быть, мы и в реальной жизни станем друзьями.

</div>

</td>

</tr>

<tr>

</tr>

</table>

</center>

</body>

</html> (посмотреть)

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

Если вы обратите внимание, то заметите, что текст слишком близко расположен к краям нашей ячейки и это смотрится не красиво. Что мы можем сделать? Конечно, ввести атрибут cellpadding для таблицы.

<html>

<head>

<title>Мой первый сайт с таблицами</title>

</head>

<tr>

<h3>Добро пожаловать на мою страницу!</h3>

Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b>еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке? Кто знает, может быть, мы и в реальной жизни станем друзьями.

</div>

</td>

</td>

</tr>

<tr>

</tr>

</table>

</center>

</body>

</html> (посмотреть)

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

Давайте введем содержание для оставшихся двух ячеек:

<html>

<head>

<title>Мой первый сайт с таблицами</title>

</head>

<tr>

<h3>Добро пожаловать на мою страницу!</h3>

Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b>еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего. <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке? Кто знает, может быть, мы и в реальной жизни станем друзьями.

</div>

</td>

</td>

</tr>

<tr>

<div align="center"><a href="mailto:[email protected]">напиши мне письмо</a></div>

</td>

<div align="center"><a href="#">посмотри мои фотографии</a></div>

</td>

</tr>

</table>

</center>

</body>

</html> (посмотреть)

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

<a href="#"> … </a> - заметьте, что мы не прописали путь к документу с фотографиями, и вместо него подставили значок решетки. Как вы помните, значок решетки используется при создании закладок внутри страницы. Однако, в нашем случае имя закладки не указано, и самой закладки в нашей странице нет. А это значит, что при нажатии на такую странную ссылку, которую мы прописали, ваш посетитель никуда не перейдет с вашей страницы. Т.е. это пустая ссылка. Такие ссылки кодеры очень часто используют при создании макета сайта, когда еще точно не известно, какие будут имена у *.html документов вашей страницы.

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

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

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

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

(1) - < - <

(2) - > - >

(3) - " - "

(4) -   - пробел

(5) - & - &

Т.к. все заключенное между < и > броузер воспринимает как тэг, то, чтобы ввести символ скобки > в текст для него придумали спецсимвол (1 или 2). Кавычка (3). В принципе, не обязательно ее так прописывать, броузеры понимают этот значок прекрасно.

Символ пробела (4). Зачем он нужен? Ну, допустим, вам понадобилось пять пробелов подряд, а тэг <pre> с его принудительным переносом строки вам вовсе не нужен, вот тогда вам понадобится спецсимвол, ведь спецсимвол пробела можно написать хоть тысячу раз (если вы забыли или не знали – обычные пробелы игнорируются броузером, если их больше одного между словами или тэгами).

Но тут существует одно но:

слово1 слово2 слово3 = слово1 слово2 слово3

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

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

Спецсимволы не надо включать ни в какие тэги, надеюсь, вы это поняли, считайте их просто текстом.

Кстати, Красную Строку вы можете сделать при помощи спецсимвола неразрывного пробела, о котором мы сейчас говорили: несколько таких пробелов перед первым словом в абзаце текста – и у вас будет отступ.

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

Линия задается тэгом <Hr> и не требует закрывающего тэга.

У линии есть много разных параметров:

(1) <Hr align="right"> (center или left)

(2) <Hr width="30%"> (ширина линии в процентах/пикселях)

(3) <Hr size="6"> (толщина линии)

(4) <Hr NoShade> (отмена объемности)

(5) <Hr color="cc0000"> (цвет линии, только в IE)

Не злоупотребляйте атрибутом Color, т.к. он действует только в Интернет Иксплорер (если вам все же хочется цветную линию, то сделайте, допустим красную картинку 1x1 пиксель и вставьте ее в свой документ. Тут пригодятся уже известные вам атрибуты height и width. Пусть height=1, а width=500 - вот вам и линия:).

Пунктирную и другие типы нестандартных линий мы опять же создаем при помощи картинок.

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

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

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

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

К счастью, если нам нужно мы можем управлять ими: мы можем увеличить их, если они нам нужны, а если они нам не нужны, то мы можем убрать их. Рассмотрим вариант, когда нам нужно убрать поля документа:

<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0">

Topmargin- определяет ширину верхнего поля документа, leftmargin- определяет ширину левого поля документа. Чтобы убрать поля мы приравняли эти параметры к нулю. Можете посмотреть, что у нас получилось.

Вы можете удивиться, в чем же специфичность этих параметров. Дело в том, что topmargin и leftmargin поддерживаются только Internet Explorer.

Но не стоит расстраиваться, Нетскейп (Netscape Navigator) не окажется за бортом, т.к. для этого броузера есть свои аналогичные специфические атрибуты для тега Body - marginheight и marginwidth. Marginheight - аналогичен topmargin, а marginwidth - аналогичен leftmargin.

Теперь, чтобы убрать отступы и для NN, и для IE, надо просто прописать все эти атрибуты вместе для тэга BODY:

Таким образом, и в IE все будет хорошо, и NN будет не обижен, и многие другие броузеры тоже.

Topmargin и leftmargin в Интернет Иксплорер убирает только верхнее и левое поля документа. Чтобы убрать правое и нижнее надо ввести еще атрибуты rightmargin и bottommargin для тэга Body.

Итак, мы узнали, как убирать поля в IE и NN. Но, что же с другими броузерами?

body{margin:0px;padding:0px;}

--></style>

Вставьте этот загадочный код между тегами <head></head>, и проблему с полями можно считать решенной.

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

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

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

Тоже самое и со списками, они также определяют структуру документа. Визуально списки отображаются следующим образом:

Текст один

Текст другой

Текст сякой

Текст эдакий

Это называется неупорядоченный список. Кроме неупорядоченных списков существуют еще и упорядоченные списки:

1. Сначала сделаем это.

2. Затем мы сделаем то.

3. А также действие третье.

4. И с ним нас четвертое ждет.

Различные типы списков можно употреблять одновременно друг с другом. Неупорядоченные списки вводятся тэгом <ul>:

<ul>

...

</ul>

Чтобы ввести элементы списка (текст один, текст другой…), нам нужно ввести в нашу конструкцию тэг <li> (не требует закрывающего тэга):

<ul>

<li>Текст один

<li>Текст другой

<li>Текст сякой

<li>Текст эдакий

</ul>

(посмотреть)

У тэга <li> есть атрибут type, он отвечает за стиль элемента списка, визуально это выглядит так:

· По умолчанию - (1)

o Полый кружок - (2)

¨ Не будь таким квадратным - (3)

В случае (1) - <li type="disk">,

в случае (2) - <li type="circle">,

в случае (3) - <li type="square">.

Атрибут type может вводиться не только для каждого элемента списка <li>, но и для всего списка в целом:

<li>Текст один

<li>Текст другой

<li>Текст сякой

<li>Текст эдакий

</ul>

(посмотреть)

Очень часто тэг <ul></ul>, которым вводятся неупорядоченные списки, используется кодерами немного нестандартно, для создания отступа (табуляции). Если вы пользовались текстовыми редакторами (допустим Вордом), то вы знаете, что такое табуляция (это когда вы жмете на кнопочку Tab и весь текст сдвигается, допустим, вправо), тоже самое мы можем сделать средствами html:

<ul>Ваш текст</ul>

В этом случае мы не использовали тэг <li>, и не ввели элементы списка. Как я уже говорила, такое применение тэга <ul></ul> не стандартно, а значит нежелательно, т.к. не предусмотрено спецификацией, однако, если вам это нужно, то я считаю, что, в данном случае, не страшно нестандартно воспользоваться тэгом <ul>, ведь визуально это отобразиться всеми броузерами, а также избавит вас от необходимости вводить лишние таблицы в ваш документ, чтобы достичь того же эффекта стандартными средствами. Чтобы отступ (табуляция) был больше, можно вложить тэг <ul> в самого себя:

<ul><ul>Два отступа</ul></ul>

<ul><ul><ul>Три отступа</ul></ul></ul>

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

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

Упорядоченные списки вводятся тэгом <ol>:

<ol>

...

</ol>

Как и в случае с неупорядоченными списками, нам нужно ввести в нашу конструкцию тэг <li>:

<ol>

<li>Сначала сделаем это

<li>Затем мы сделаем то

<li>А также действие третье

<li>И с ним нас четвертое ждет

</ol>

В итоге получим:

1. Сначала сделаем это

2. Затем мы сделаем то

3. А также действие третье

4. И с ним нас четвертое ждет

Для упорядоченных списков также может употребляться атрибут type. Для упорядоченных списков возможны следующие значение атрибута type:

	арабские цифры	1 2, 3, ...
a	буквы нижнего регистра	a, b, c, ...
A	буквы верхнего регистра	A, B, C, ...
i	римские цифры в нижнем регистре	i, ii, iii, ...
I	римские цифры в верхнем регистре	I, II, III, ...

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

<li>Сначала сделаем это

<li>Затем мы сделаем то

<li>А также действие третье

<li>И с ним нас четвертое ждет

</ol>

Получаем:

I. Сначала сделаем это

II. Затем мы сделаем то

III. А также действие третье

IV. И с ним нас четвертое ждет

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

Эту главу мы с вами посвятим специфическом тэгу, речь пойдет о тэге Marquee - бегущей строке (текста).

Тэг Marquee поддерживается только Internet Explorer, но многих людей, начинающих осваивать сайтостроение, это не останавливает, и они с удовольствием его употребляют. Т.к. это болезнь массовая, то мне придется рассказать подробно о тэге Marquee (те, у кого броузер не IE, не будут в этой главе оставлены за бортом, для них я бросила спасательный круг в конце главы).

Бегущая строка, высота - 10, ширина - 270 пикселов, фон - 99CCFF

</marquee>

Как видите, все просто. Текст, который мы помещаем в тэге <marquee></marquee>, становится бегущей строкой.

Все атрибуты тэга <marquee></marquee> вам уже знакомы: bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.

Также для бегущей строки можно задать и другие знакомые вам атрибуты - hspace, vspace и align (тот, кто их не помнит, срочно возвращается к Простейшим ступенькам и освежает свою память). В наш пример я их вводить не буду, вы можете сами.

<marquee height="10" width="270" loop="2">

Бегущая строка

</marquee>

(посмотреть)

Атрибут loop задает сколько раз прокрутится строка, в нашем примере указано loop="2" - 2 раза, а это значит, что к тому моменту, когда вы дойдете до этого примера, строка может уже не бежать, поэтому обновите страницу и убедитесь в правоте моих слов - строка пробежит только два раза.

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

Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).

Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию). Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.

Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.

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

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

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

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

<html>

<head>

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

</head>

</html>

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

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

<html>

<head>

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

</head>

<frameset></frameset>

</html>

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

Ступенька 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>

<frame src="menu.html">

<frame src="content.html">

</frameset>

</html>

(посмотреть)

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

<html>

<head>

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

</head>

</frameset>

</html>

(посмотреть)

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

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

<html>

<head>

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

</head>

</frameset>

</html>

(посмотреть)

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

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

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

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

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

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

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

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

или

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

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

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

<html>

<head>

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

</head>

<???>

</frameset>

</html>

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

<html>

<head>

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

</head>

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

</frameset>

</html>

(посмотреть)

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

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

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

<html>

<head>

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

</head>

</frameset>

</frameset>

</html>

(посмотреть)

Scrolling - атрибут тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.

Собственно, scrolling="auto", можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появится, если она нужна, а если нет - ее не будет.

Если вы подведете мышку к границе какого-либо фрейма, то увидите, что потянув за нее, вы можете изменить размеры фрейма. Как же запретить вашему посетителю это делать? При помощи атрибута noresize для тэга <frame>:

<html>

<head>

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

</head>

</frameset>

</frameset>

</html>

(посмотреть)

Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым мы раньше уже встречались. Итак, border="0".

<html>

<head>

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

</head>

</frameset>

</frameset>

</html>

(посмотреть)

Так уже лучше. Но все же, что-то еще хочется исправить... А! Картинку с чёртом так и хочется прижать в левый верхний угол:

<html>

<head>

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

</head>

</frameset>

</frameset>

</html>

(посмотреть)

Атрибуты marginwidth и marginheight вам уже знакомы, они определяют ширину полей фрейма. В нашем документе мы убрали поля, задав значения этим атрибутам равные нулю для фрейма, содержащего документ с нашим чертом (logo.html).

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

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

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

Для начала, господа, познакомьтесь с новым атрибутом тэга <frame> - name (кстати, name, мне кажется, что мы с вами уже знакомы. Пустим name в дело:

<html>

<head>

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

</head>

</frameset>

</frameset>

</html>

Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ content.html).

Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target="имя_фрейма"), с которым мы, кстати, тоже уже знакомы.

Введем атрибут target в документе со ссылками - menu.html.

<html>

<head>

<title>Документ с Меню</title>

</head>

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

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

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

Словарь тэгов.

Тэг	Назначение и атрибуты, рассматриваемые в учебнике

A ссылка

href="другой_документ.html" - путь к документу

target=_blank - открывает ссылку в новом окне

name="anchor1" - имя закладки

title="Ваша подсказка" - подсказка к ссылке (текстовой)

AREA определяет геометрические области внутри карты и ссылки для них

shape="rect" (circle, poly) - тип области

coords="x1,y1,..." - координаты области

alt="описание" - описание, подсказка

href="document.html" – ссылка

B выделение текста полужирным шрифтом

BIG выделение текста более крупным шрифтом, чем основной

BODY тело документа, обязательный тэг

text="#cc0000" - задает цвет текста всего документа

bgcolor="#000000" - задает цвет фона документа

background="картинка.jpg" - задает фоновую картинку

link="#ff9999" - задает цвет ссылки

alink="#ff9999" - задает цвет активной (нажатой) ссылки

vlink="#ff9999" - задает цвет посещенной ссылки

topmargin="0" - ширина верхнего и нижнего полей документа для IE

leftmargin="0" - ширина левого и правого полей документа для IE

marginheight="0" - ширина верхнего и нижнего полей документа для NN marginwidth="0" - ширина левого и правого полей документа для NN

BR принудительный перенос текста на другую строку

clear="all" (left, right) - завершение обтекания текстом объекта

CENTER центрирование текста и объектов

DIV выравнивание текста и объектов

align="center" - центрирование

align="right" - выравнивание по правому краю документа

align="left" - выравнивание по левому краю документа

align="justify" - выравнивание по обоим краям документа

FONT управление шрифтами

color="#cc0000 - задает цвет для блока текста

size="+0" - задает размер шрифта текста (от -2 до +4)

face="Arial" - задает определенный тип шрифта

FRAME определяет содержимое и вид одного фрейма

marginheight="0" - ширина верхнего и нижнего полей фрэйма

marginwidth="0" - ширинау левого и правого полей фрэйма

scrolling="yes" (no, auto) - линейка прокрутки

name="window-1" - имя фрейма

noresize - запретить посетителю менять размеры фреймов

FRAMESET определяет макет основного окна в виде прямоугольных пространств

rows="100,200,*" - определяет расположение горизонтальных фреймов

cols="10%,20%,70%" - определяет расположение вертикальных фреймов

border - определяет ширину рамок фрэймов в пикселах

Hx заголовки (H1, H2, H3, H4, H5, H6)

HEAD голова документа, обязательный тэг

HR линия

align="right" (center или left)

width="30%" (ширина линии в процентах)

size="6" (толщина линии)

NoShade (отмена объемности)

color="cc0000" (цвет линии, только в IE

HTML указывает на тип документа, обязательный тэг

I выделение текста курсивом

IFRAME "плавающий" фрейм

src="ancorpri.html" - путь к подгружаемому документу

width="300" - вширина "плавающего" фрейма

height="250" - высота "плавающего" фрейма

scrolling="auto" (yes, no) - полоса прокрутки

frameborder="1" (0) - отображать или нет границы фрейма

IMGподгрузка изображений (картинок)

Border="5" - рамка покруг картинки

width="500" - ширина картинки

height="100" - высота картинки

align="left" - расположение текста по отношению к картинке

vspace="10" - расстояние от картинки до текста по вертикали

hspace="30" - расстояние от картинки до текста по горизонтали

alt="описание" - описание картинки

usemap="#karta1" - ссылка на карту

LI определяет элемент списка

MAP определяет клиентскую навигационную карту

name="karta1" - имя карты

MARQUEE бегущая строка текста (только IE)

bgcolor - цвет фона бегущей строки

height - высота строки

width - ширина строки

behavior="scroll" обычная прокрутка

behavior="slide" - строка пробегает до края и останавливается

behavior="alternate" - строка будет двигаться от края к краю

scrollamount="1" (1-10) - скорость движения строки

direction="left" (right, up, down) - движение влево (вправо, вверх, вниз) 34

OL упорядоченные списки

type="I" (i, 1, a, A) - стиль элемента списка

Pпараграф, выравнивание текста и объектов

align="center" - центрирование

align="right" - выравнивание по правому краю документа

align="left" - выравнивание по левому краю документа

align="justify" - выравнивание по обоим краям документа

PREформатированный текст

S перечеркнутый текст

SMALL выделение текста более мелким шрифтом, чем основной

STRIKE перечеркнутый текст

SUB нижний индекс

SUP верхний индекс

TABLE таблица

bgcolor="#FFCC33" - цвет фона таблицы (строки, ячейки)

background="картинка.gif" - задает фоновый рисунок

width="50" или width="50%"- ширина таблицы

height="45" или height="45%"- высота таблицы

cellspacing="5" - расстояние между ячейками

cellpadding="5" - расстояние внутри ячеек

border="3" - задает толщину рамки таблицы

bordercolor="#000000" - задает цвет рамки таблицы

TDячейка данных таблицы

bgcolor="#FFCC33" - цвет фона

background="картинка.gif" - задает фоновый рисунок

width="50" или width="50%"- ширина

height="45" или height="45%"- высота

align="center" (right, left) - горизонтальное выравнивание содержимого

valign="middle" (top, bottom) - вертикальное выравнивание содержимого

colspan="2" - растянуть ячейку на несколько стобцов

rowspan="2" - растянуть ячейку на несколько рядов

cellspacing="5" - расстояние между ячейками

TITLEзаголовок документа

TRстрока таблицы

bgcolor="#FFCC33" - цвет фона

background="картинка.gif" - задает фоновый рисунок

width="50" или width="50%"- ширина

height="45" или height="45%"- высота

TT шрифт пишущей машинки (моноширинный)

U подчеркнутый текст

ULнеупорядоченные списки

type="disk" (circle, square) - стиль элемента списка

Наши рекомендации

Ступенька 24-2 - дополнительная.

Ступенька четвёртая «Людей неинтересных не бывает»

Между каждыми двумя частями есть промежуточная ступенька, включающая в себя их обе.

Когда может понадобиться промежуточная ступенька

Ступенька с точки зрения лестницы

Фестиваль — это обязательная ступенька Большого КВНа

Ступенька 7 – резко заниженная самооценка

Последняя ступенька исторической лестницы капитализма

Ступенька 24-2 - дополнительная.

Стало очень тихо, в этой тишине отчетливо скрипнула лестничная ступенька – к ним спускалась Рада. Очевидно, она все слышала.

← Предыдущая страница | Следующая страница →