- •Html не язык программирования.
- •Урок 2 Создание простой html странички.
- •Ничего сложного я тут не вижу. Пойдем дальше. Размер и шрифт текста.
- •Вот и все. Заданий пока не будет. :) Параграфы.
- •Заголовки.
- •Урок 7 Курсив, жирный текст, подчеркнутый текст.
- •Урок 8 Ссылки. Все о работе с ссылками.
- •Урок 9 Вставка картинок и их атрибуты.
- •Картинки как ссылки.
- •Специальные символы.
- •Урок 12 Линии - очень просто.
- •Списки, нумерация.
- •Урок 14 Создаем простую таблицу.
- •Урок 15 Создаем простую таблицу. Ширина, высота.
- •Настройка рамки.
- •Урок 16 Настройка рамки.
- •Урок 17 Выравнивание содержимого таблицы.
- •Урок 18 Как растянуть ячейки.
- •Вложенные таблицы.
- •Вступление. Понятие о фреймах.
- •Создаем простой фрейм.
- •Создаем усложненный фрейм.
- •Убираем лишнее.
Вложенные таблицы.
И вот наконец-то сейчас последний урок по работе с таблицами. Что же это за таблицы такие? Это просто таблицы находящиеся в ячейках других таблиц, и ничего особенного в них нет, почти ничего.
А теперь давайте посмотрим пример. На нем у нас 2 ряда и по 1-ой ячейке в каждом ряду. В каждой ячейке 1 таблица.
|
ячейка 1
| |
|
ячейка 2
|
Код таблицы выглядит так:
<table>
<tr>
<td bgcolor="white"><center>ячейка 1</center>
<table border="1" bordercolor="#CC0000" cellspacing="1">
<tr>
<td bgcolor="black"><font color="white">таблица 2 ячейка 1</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="white"><center>ячейка 2</center>
<table border="1" bordercolor="#CC0000" cellspacing="1">
<tr>
<td bgcolor="black"><font color="white">таблица 3 ячейка 1<font></font></font></td>
</tr>
</table>
</td>
</tr>
</table>
Этот пример рассчитан на Internet Explorer. На Netscape N нужно будет применять картинку как фон вложенной таблицы. Делается этот так <td background="картинка">. В пустые ячейки (<td></td>) лучше ставить пробул (<td> </td>).
Ну вот и все. С таблицами я закончил. Теперь Будем изучать фреймы!
Вступление. Понятие о фреймах.
С таблицами мы разобрались. Теперь мы будем говорить о фреймах. Что же это такое?
Фреймы позволяют нам открывать в одном окне браузера сразу несколько документов.
Для того, чтобы браузер открыл сразу несколько документов, надо создать страничку в которой мы укажем сколько документов нам нужно показать, их размеры и расположение.
Давайте создадим эту самую страничку. Назовем ее index.html.
<html>
<head>
<title>Вступление. Понятие о фреймах.</title>
</head>
</html>
Вроде выглядит как простой HTML документ. Опа... Тэга <body> та нет! :) А на этой страничке он нам и не нужен. Да, совсем не нужен. Вместо него нам нужен(обязательно, если хотим фреймы) тэг <frameset></frameset>. Он пишется между тэгами <head> и </head>.
<html>
<head>
<title>Вступление. Понятие о фреймах.</title>
<frameset></frameset>
</head>
</html>
А о атрибутах тэга <frameset> мы поговорим на следующем уроке.
Создаем простой фрейм.
На этом уроке вы будите учиться создавать простую страничку со фреймом. Хочу вам сказать, что на одной страничке можно разместить много фреймов, но мы пока будем работать с одним.
Итак, наша страничка будет выглядеть так:
|
Вы сохранили тот документ из предыдущего урока? Если нет, то создайте новый документ. Назовите его index.html и напишите там следующий код:
<html>
<head>
<title>Создаем простой фрейм</title>
<frameset cols="100,*">
<frame name="menu" target="main" src="menu.html">
<frame name="main" src="main.html">
</frameset>
</head>
</html>
А теперь я вам объясню что значит атрибут cols="чразмер"(rows="размер"). Cols - это колонки? т.е. фреймы будут расположены как колонки. Так же можно сделать фреймы в ряд. Для этого вместо cols надо написать rows. У нас документ делится на 2 части: 1 - меню, 2 - содержимое. Так вот, первое число 50 означает, что меню будет размером в 100 пикселей, а знак * означает, что содержимое будет занимать всю оставшуюся часть.
Атрибуты name="main" и name="menu" - это имена фреймов.
Что означает атрибут target="main"? Это значит, что, если пользователь кликнит по ссылке на странице menu.html, то ссылка откроется в содержимом.
Теперь о тэге <frame>. Этот тэг устанавливает какие документы в каком ряду у нас будут грузиться. Первый ряд - меню, второй - содержимое. Если что-то вас не устраивает, то можете поменять эти тэги местами и расположение изменится. Также у тэга <frame> есть атрибут src (<frame src="страничка">). Этот атрибут загружает указанную страничку во фрейм.
Пойдем дальше. У нас в коде видно, что грузятся две странички (menu.html и main.html). Так, если они будут грузиться, то нужно чтобы они было, а их у нас нет. Так давайте создадим эти странички.
Создайте menu.html(меню). Эти страницы уже должны быть простыми, т.е. с обязательными тэгами. Напишите там следующий текст :
<html> <head> <title>Меню</title> </head> <body bgcolor="#000000" link="white" vlink="yellow" alink="green"> <a href="тут сделайте ссылку на страничку" target="main">Урок 1</a><br> <a href="тут сделайте ссылку на страничку" target="main">Урок 2</a><br> <a href="тут сделайте ссылку на страничку" target="main">Урок 3</a><br> <a href="тут сделайте ссылку на страничку" target="main">Урок 4</a><br> <a href="тут сделайте ссылку на страничку" target="main">Урок 5</a> </body> </html>
Сохраняем в папку, где у нас находится этот index.html. Так же создайте страничку main.html(содержимое). Там уже напечатайте что хотите.
Что означает атрибут target="main"? Это значит, что, если пользователь кликнит по ссылке на странице menu.html, то ссылка откроется в содержимом.
Все. Посмотреть пример.
А теперь тренируйтесь и переходите на следующий урок.