Категории:

Астрономия
Биология
География
Другие языки
Интернет
Информатика
История
Культура
Литература
Логика
Математика
Медицина
Механика
Охрана труда
Педагогика
Политика
Право
Психология
Религия
Риторика
Социология
Спорт
Строительство
Технология
Транспорт
Физика
Философия
Финансы
Химия
Экология
Экономика
Электроника

Верстка страницы с использованием таблицы.

Посмотрите на этот пример с таблицей, он Вам ничего не напоминает??

<html>
<head>
<title>Верстка страницы</title>
</head>
<body>
<center>
<table border="1" width="640" height="480">
<tr>
<td colspan="5" height="30"><center>Заголовок</center></td>
</tr>
<tr>
<td height="30" width="20%"><center>кнопка1</center></td>
<td width="20%"><center>кнопка2</center></td>
<td width="20%"><center>кнопка3</center></td>
<td width="20%"><center>кнопка4</center></td>
<td width="20%"><center>кнопка5</center></td>
</tr>
<tr>
<td valign="top">содержание:</td>
<td colspan="4"><center>куча текста</center></td>
</tr>
</table>
</center>
</body>
</html>

смотреть пример

Как видите, таблица это хороший и главное удобный инструмент для верстки страницы..

Любая ячейка таблицы может служить самостоятельной ёмкостью для наполнения другими тегами и текстовым содержанием, а также иметь те или иные индивидуальные свойства - атрибуты.

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

Добавим красок:

<html>
<head>
<title>Таблица и краски</title>
</head>
<body>
<center>
<table width="300" height="300">
<tr>
<td bgcolor="#c0e4ff">1</td>
<td bgcolor="#c5ffa0">2</td>
<td bgcolor="#c0e4ff">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5">5</td>
<td bgcolor="#c5ffa0">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff">7</td>
<td bgcolor="#c5ffa0">8</td>
<td bgcolor="#c0e4ff">9</td>
</tr>
</table>
</center>
</body>
</html>

смотреть пример

Выровняем текст:

Здесь появляется новый атрибут valign - Вертикальное выравнивание. До этого момента нам был знаком атрибут align - горизонтальное выравнивание.

<html>
<head>
<title>Выравнивание в таблице</title>
</head>
<body>
<center>
<table width="300" height="300">
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</body>
</html>

смотреть пример

Теперь о новых атрибутах.

Cellspacing - задаёт расстояние в пикселях между ячейками таблицы. Задав значение cellspacing="0" можно избавиться от "зазора" между ячейками.

Пример, увеличим "зазор":

<html>
<head>
<title>Расстояние между ячейками</title>
</head>
<body>
<center>
<table width="300" height="300" cellspacing="15">
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</body>
</html>

смотреть пример

Атрибут cellpadding (не путайте с cellspacing) - в пикселях задаёт поля ячеек (отступ от границ ячеек до текста)

Пример:

<html>
<head>
<title>Поля таблицы</title>
</head>
<body>
<center>
<table width="300" height="300" cellspacing="0" cellpadding="25">
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</body>
</html>

смотреть пример

Отдельно, пожалуй, еще следует обратить внимание на так называемые вложенные таблицы, я уже говорил про то, что каждая отдельно взятая ячейка может служить емкостью для других тегов.. и тег <table> не является исключением. По сути можно вставить одну таблицу в другую..

Смотрим пример:

<html>
<head>
<title>Вложенная таблица</title>
</head>
<body>
<center>
<table width="600" height="400" border="1">
<tr>
<td colspan="2"><center>Заголовок</center></td>
</tr>
<tr>
<td valign="top">содержание:</td>
<td valign="top">
<center>
<br><br>
В одну ячейку вложена целая таблица!!
<br><br><br>
<table width="200" height="200" cellspacing="0" cellpadding="15">
<tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
</tr>
<tr>
<td bgcolor="#c5ffa0">4</td>
<td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td>
</tr>
<tr>
<td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</body>
</html>

смотреть пример

Такой вот растянутый код получился… Сложно? Запутанно? Может быть на первый взгляд оно так и есть, но ведь не зря же я приводил столько примеров! Если что то не понятно вернитесь назад, перечитайте, идите от простого к более сложному и тогда всё станет на свои места! Практика - залог успеха. Не ленитесь, пробуйте писать код самостоятельно..

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

У меня она уже вот такая:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">
<center>
<table width="640" height="480" cellpadding="5" cellspacing="2" border="1">
<tr>
<td colspan="3" height="30" bgcolor="#b2ff80">
<center><img src="graphics/privet.png" width="200" height="40" alt="Привет мир!!!"></center>
</td>
</tr>
<tr>
<td height="30" width="33%" bgcolor="#ffa0cf"><center><b>Обо мне!!!</b></center></td>
<td width="33%" bgcolor="#c0e4ff"><center><b>Здесь мои фотки!!</b></center></td>
<td bgcolor="#c0e4ff"><center><b>Напишите мне письмо..</b></center></td>
</tr>
<tr>
<td colspan="3" valign="top" bgcolor="#b2ff80">
<p align="justify">
<img src="graphics/foto.jpg" align="left" hspace="10" width="100" height="90" alt="Это моя фотка!!!" title="Это моя фотка!!">
&nbsp;&nbsp;&nbsp;Разрешите представиться Карлсон! который живет на крыше.
Спокойствие! Только спокойствие! подумаешь с жильём проблемы..<br> Я - умный, красивый, в меру упитанный мужчина, в полном расцвете сил! Женщины сходят по мне сходят с ума.. эх.. какая досада.. в общем со мной не соскучишься..
</p>
<p>&nbsp;&nbsp;&nbsp;По телевизору показывают жуликов... Ну чем я хуже?! - так что вот решил сделать свою страничку!</p>
<p>&nbsp;&nbsp;&nbsp;Хочу здесь найти себе новых друзей, для того чтобы вместе гулять по крышам!</p>
<p>&nbsp;&nbsp;&nbsp;Я очень очень сильно люблю <font size="+1" color="#ff0000"> варенье</font> !!! С нетерпеньем буду ждать Вашего приглашения на чай.. побалуемся плюшками… пошалим…</p>
<center><b>Прилечу!!</b></center>
<p>&nbsp;&nbsp;Ну зачем тебе этот щенок? Я же лучше, Малыш…</p>
</td>
</tr>
</table>
</center>
</body>
</html>

смотреть пример

Читайте так же: И снова таблицы..

Полезные советы:

  • При создании больших сложных таблиц рекомендую сначала рисовать их на бумаге. Так будет удобнее представить её общую картину, подсчитать количество строк и столбцов, увидеть с какой ячейки и на какое количество следует растягивать "объединять" те или иные ячейки.
  • При выборе будущих размеров Вашей страницы, особенно это касается её ширины (атрибут width), ориентируйтесь на стандартные разрешения мониторов 640 на 480, 800 на 600, 1024 на 768… Но самое главное помните, что у разных пользователей в зависимости от их мониторов и зрения выставлены разные разрешения и если указанные Вами размеры будут выходить за их рамки то соответственно на экранах таких пользователей будут появляться полосы прокрутки. Вертикальная полоса это беда нестрашная, благо колёсико на мышке придумали, да и пишут у нас слева направо, а не сверху вниз.. а вот горизонтальная полоса прокрутки уже вызывает значительные неудобства при чтении страницы.. Так что не советую указывать большую ширину страницы. По-моему ширина в 1024 пикселей будет оптимальным размером… хотя… ну да ладно.. решайте сами.

Глава 5

Ссылки

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

Лирическое отступление:
Как-то в армии подходит ко мне начальник штаба и отдаёт приказ, цитирую:
Принеси мне вот тот документ, правда я не знаю где он и какой!! Что стоишь? Бегом давай!! Опаздываю я!!!

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

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

1. Открываем блокнот.

2. Пишем код на html языке. к примеру страничку с рядом фотографий.

3. Сохраняем его как html страничку в ту же рабочею папку, где уже есть созданный нами первый документ. Давайте, что б не путаться назовем его primer.html, да и первый тоже пожалуй переименуйте в index.html

Теперь я знаю, что у Вас два html документа index.html и primer.html и что теперь у Вас есть минимальный набор для дальнейшего обучения.

Текстовые ссылки.

Знакомимся тег <a> (от anchor- якорь), в него можно заключить текст или рисунок, которые станут ссылкой на те или иные документы. Атрибут тега <a> href задаёт имя и путь к документу на который указывает ссылка.

Всё вместе пишется так:

<a href="primer.html">Здесь мои фотки!!</a>

Как Вы наверное поняли primer.html это имя нашего второго html документа, а надпись "Здесь мои фотки!!" это кусочек текста из файла index.html.

По аналогии с рисунками тег <img> путь ссылки к открываемому документу прописывается теми же способами:

<a href=" stranica/primer.html">Здесь мои фотки!!</a> - Такая запись подразумевает, что в директории, где расположен наш первый html документ есть папка stranica в которой расположен файл primer.html
<a href="../primer.html">Здесь мои фотки!!</a> - А это значит, что файл primer.html размещен на уровень выше от документа
<a href="http://www.site.ru/primer.html">Здесь мои фотки!!</a> - документ расположен на сайте www.site.ru..

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

Пример:

Файл index.html:

<html>
<head>
<title>Делаем ссылкой кусочек текста</title>
</head>
<body>
<div align="center">
<br><br><br><b>Скажи мне, милый ребёнок: в каком ухе у меня жужжит?</b>
<br><br><br>
В <a href="primer.html">правом</a> или <a href="primer.html">левом</a>?
</div>
</body>
</html>

Файл primer.html:

<html>
<head>
<title>Перешли по ссылке сюда</title>
</head>
<body>
<br><br><br><br>
<div align="center"><font size="+2">А вот и не угадал! У меня жужжит в обоих ухах.</font></div>
<br><br><br>
<div align="center"><a href=" index.html">Ну я так не играю...</a></div>
</body>
</html>

смотреть пример

 

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

link - цвет ссылки.
alink - цвет нажатой, активной ссылки.
vlink - цвет посещенной ссылки.

Пишется так:

<body link="#008000" alink="#ff0000" vlink="#ffff00">

Продолжая говорить о цвете текстовой ссылки стоит упомянуть, что при необходимости можно принудительно выделять цветом как всю ссылку, так и отдельные её части (фразы слова буквы) знакомым тегом <font> </font> и его атрибутом color. Впрочем, это касается не только цвета так же отдельно можно задать размер, стиль и шрифт текста. Но помните, что манипуляции с цветом нужно проводить внутри тега <a>вот здесь</a> а не за бортом, иначе цвет ссылки будет либо по умолчанию, либо так как прописано в теге <body>

Пример:

Файл index.html:

<html>
<head>
<title>Радуга</title>
</head>
<body link="#008000" alink="#ff0000" vlink="#ffff00">
<center>
<h3>Посмотрите на фразу которая поможет Вам запомнить места цветов в радуге</h3>
<br>
<a href="primer2.html">
<font size="+1" color=#ff0000>Р</font>
<font size="+2" color=#ff8c40>А</font>
<font size="+3" color=#ffff00>Д</font>
<font size="+3" color=#008000>У</font>
<font size="+2" color=#0000ff>Г</font>
<font size="+1" color=#800080>А</font>
</a>
</center>
</body>
</html>

Файл primer.html:

<html>
<head>
<title>Радуга</title>
</head>
<body link="#008000" alink="#ff0000" vlink="#ffff00">
<center>
<font size="+3">
<font color=#ff0000>Каждый</font>
<font color=#ff8c40>охотник</font>
<font color=#ffff00>желает</font>
<font color=#008000>знать</font>
<font color=#40caff>где</font>
<font color=#0000ff>сидит</font>
<font color=#800080>фазан</font>
</font>
<br><br><br>
<a href="index.html">вернуться на главную</a>
</center>
</body>
</html>

смотреть пример

Такие вот дела…

Рисунок ссылка.

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

Вот так:

<a href="primer3.html"><img src="knopa.gif"></a>

Перед тем как привести очередной пример расскажу про то, как при переходе по ссылке открыть документ в новом окне браузера, до этого если Вы обратили внимание он у нас открывался в текущем, что не всегда удобно. Решает эту проблему атрибут target (цель) и его значение _blank.

Пишется так:

<a href="primer3.html" target="_blank">открыть в новом окне</a>

Пример:

Файл index.html:

<html>
<head>
<title>кнопка</title>
</head>
<body>
<center>
<h1> Не в коем случае не нажимайте на эту кнопку!!!</h1>
<br>
<a href="primer3.html" title="Не нажимать!!!" target="_blank"><img src="graphics/knopa.gif" border="0" alt="Не нажимать!!!" ></a>
</center>
</body>
</html>

Файл primer.html:

<html>
<head>
<title>итог..</title>
</head>
<body>
<div align="center"><font size="+3">Ракеты ушли... Америки больше нет...</font></div>
</body>
</html>

смотреть пример

Я надеюсь, Вы не додумались нажать большую красную кнопку? Ох уж этот русский менталитет.. :)

Что ещё можно почерпнуть из этого примера?

Во-первых. Мы применили уже знакомые атрибуты описания title="Не нажимать!!!" для тега <a> и одновременно alt="Не нажимать!!!" для тега <img> если Вы помните, эти атрибуты позволяют сделать нам всплывающие подсказки. Но зачем я их продублировал? Один для ссылки, а другой для рисунка, если сам по себе рисунок является ссылкой?.. долгая история, когда ни будь напишу статью: "Спецификации HTML, браузеры и головная боль.." - а сейчас скажу лишь то, что разные браузеры не всегда воспринимают те или иные теги и их атрибуты. А описание для ссылки картинки нам просто таки необходимо! Помните, я рассказывал, что есть люди, умышленно отключающие загрузку рисунков?- это для них.

Во-вторых. В примере использован атрибут тега <img> border="0" - рамка рисунка. 0 - это значит выключить рамку, так как она портит весь вид страницы в данном примере, но бывают случаи когда рамки рисунка вполне актуальны и так сказать вписываются в страницу. Здесь нужно помнить, что когда рисунок является ссылкой, его рамка окрашивается в цвета ссылки: link - цвет ссылки, alink - цвет нажатой, активной ссылки, vlink - цвет посещенной ссылки тега <body>.

Ссылка на e-mail

Я тут Вас чуть-чуть с толку сбил, вроде бы договаривались вместе писать полноценный сайт, а я тут какие то мелкие примерчики выкладываю.. Не волнуйтесь! В конце главы покажу готовый сайт про Карлсона целиком. А сейчас думаю так будет удобнее Вам читать, и мне писать.. : Да и подразумеваю что Вы уже самостоятельно можете вставлять теги в нужные места.

Напишите мне письмо.. - строчка из того примера..

Для того что бы сделать текст или рисунок ссылкой на e-mail - почтовый ящик его нужно заключить в тег <a>, но не простой, а с использованием mailto

Пишем так:

<a href="mailto:karlson@kruha.ru"> Напишите мне письмо.. </a>

Эта непривычная запись будет говорить что, кликнув по тексту ссылке "Напишите мне письмо.." посетитель сайта попадет в свою почтовую программу, которая выдаст ему бланк для отправки письма, где в строчке Кому: уже будет указан нужный нам почтовый ящик karlson@kruha.ru

Пример:

<html>
<head>
<title>e-mail</title>
</head>
<body>
<center><h2>
<a href="mailto:karlson@kruha.ru"> Напишите мне письмо.. </a>
</h2></center>
</body>
</html>

смотреть пример

Помимо этого в почтовом бланке можно заранее прописать следующие вещи:

?subject= - Тема пиcьма
&Body= - Текст сообщения
&cc= maluh@kruha.ru,maluh2@kruha.ru - Копии письма
&bcc= freken_bok@kruha.ru,freken_bok2@kruha.ru - Скрытые копии письма

Адреса ящиков для копий и скрытых копий письма пишутся через запятую.

Пример:

<html>
<head>
<title>e-mail</title>
</head>
<body>
<center><h2>
<a href="mailto:karlson@kruha.ru?subject=А у вас молоко убежало.. &Body=Текст письма &cc=maluh@kruha.ru &bcc=freken_bok@kruha.ru">Напишите мне письмо.. </a>
</h2></center>
</body>
</html>

смотреть пример

 

Закладки.

Закладки или якоря - это особый вид ссылок. Данные ссылки, как правило, не ведут к какому либо документу, а предназначены для навигации внутри страницы.

Предположим на странице в удобном месте находится некое содержание или меню.. по принципу:

Глава1
Глава2
Глава3

А далее идет большой текст с этими главами, так вот чтобы посетитель страницы нажав на одну из этих глав "перенёсся" в нужное место текста нам нужно сделать две вещи:

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

Вот так:

<а name="glava1">Глава1 </а>
<а name="glava2">Глава2 </а>
<а name="glava3">Глава3 </а>

Имя можно присвоить любое необязательно glava1

А теперь собственно прописываем на них ссылки в нашем меню, содержании.

Вот так:

<a href="#glava1"> Глава1</a>
<a href="#glava2"> Глава3</a>
<a href="#glava3"> Глава3</a>

Замете перед каждым именем ставим знак решётки #.

Ладно, думаю, на примере будет понятнее:

<html>
<head>
<title>Закладки</title>
</head>
<body>
<h2>А. С. ПУШКИН</h2>
<a href="#skazka1">Сказка о попе и работнике его Балде</a><br>
<a href="#skazka2">Сказка о рыбаке и рыбке</a><br>
<a href="#skazka3">Сказка о царе Cалтане</a>
<h3><a name="skazka1">Сказка о попе и работнике его Балде</a></h3>
<pre>
Жил-был поп,
Толоконный лоб.
... ... ...
</pre>
<h3><a name="skazka2">Сказка о рыбаке и рыбке</a></h3>
<pre>
Жил старик со своею старухой
У самого синего моря.
... ... ...
</pre>
<h3><a name="skazka3">Сказка о царе Cалтане</a></h3>
<pre>
Три девицы под окном
Пряли поздно вечерком.
... ... ...
</pre>
</body>
</html>

смотреть пример

Хотя, как я уже говорил, закладки используют для навигации внутри страницы, на них всё же можно ссылаться с других страниц или сайтов

<a href="primer.html#glava1"> идем к главе1 с другой страницы сайта</a>
<a href="http://www.site.ru/ primer.html#glava2"> разместив такую ссылку на любом другом сайте мы согласно указанному пути сначала попадаем на наш сайт www.site.ru надём там документ primer.html и сразу начинам читать главу2</a>

Ну а теперь, как и обещал, выкладываю "большой" пример он тоже состоит из двух отдельных страниц:

Файл index.html:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">
<center>
<table width="640" height="480" cellpadding="5" cellspacing="2" border="1">
<tr>
<td colspan="3" height="30" bgcolor="#b2ff80">
<center><img src="graphics/privet.jpg" width="200" height="40" alt="Привет мир!!!"></center>
</td>
</tr>
<tr>
<td height="30" width="33%" bgcolor="#ffa0cf">
<center><b><a href=" index.html">Обо мне!!!</a></b></center>
</td>
<td width="33%" bgcolor="#c0e4ff">
<center><b><a href=" myfoto.html">Здесь мои фотки!!</a></b></center>
</td>
<td bgcolor="#c0e4ff">
<center><b><a href="mailto:karlson@kruha.ru">Напишите мне письмо..</a></b></center>
</td>
</tr>
<tr>
<td colspan="3" valign="top" bgcolor="#b2ff80">
<img src="graphics/foto.jpg" align="left" hspace="10" width="100" height="90" alt="Это моя фотка!!!">
<p align="justify">&nbsp;&nbsp;&nbsp;Разрешите представиться Карлсон! … … …</p>
</td>
</tr>
</table>
</center>
</body>
</html>

Файл myfoto.html:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">
<center>
<table width="640" height="480" cellpadding="5" cellspacing="2" border="1">
<tr>
<td colspan="3" height="30" bgcolor="#b2ff80">
<center><img src="graphics/privet.jpg" width="200" height="40" alt="Привет мир!!!"></center>
</td>
</tr>
<tr>
<td height="30" width="33%" bgcolor="#c0e4ff">
<center><b><a href=" index.html">Обо мне!!!</a></b></center>
</td>
<td width="33%" bgcolor="#ffa0cf">
<center><b><a href=" myfoto.html">Здесь мои фотки!!</a></b></center>
</td>
<td bgcolor="#c0e4ff">
<center><b><a href="mailto:karlson@kruha.ru">Напишите мне письмо..</a></b></center>
</td>
</tr>
<tr>
<td colspan="3" valign="top" bgcolor="#b2ff80">
<img src="graphics/foto1.jpg" align="middle" vspace="10" hspace="10" width="140" height="120" alt="Это моя фотка!!!">
это я <br>
<img src="graphics/foto2.jpg" align="middle" vspace="10" hspace="10" width="140" height="120" alt="Это моя фотка!!!">
и это я <br>
<img src="graphics/foto3.jpg" align="middle" vspace="10" hspace="10" width="140" height="120" alt="Это моя фотка!!!">
снова я
</td>
</tr>
</table>
</center>
</body>
</html>

смотреть пример

Фух.. ну вроде всё.. Думаю, на этом примере с Карлсоном мы распрощаемся, разросся он через чур.. да и как сайт с точки зрения построения имеет законченный вид...

Он улетел - но обещал вернуться!.. :)

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

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

Полезные советы:

  • Одна из Ваших страничек на сайте обязательно должна называться index.html. Именно файл с таким названием на Вашем сайте будет искать программа робот, когда человек введет имя Вашего сайта. Так как страница index.html будет открываться первой, делайте её главной. Остальные страницы можете называть, как угодно… больше никаких нюансов с именами нет.
  • Про регистр.. Прописывая путь и имена документов помните, что, к примеру: Page.html, page.html и PAGE.html это имена разных документов! Это же касается имен закладок и рисунков. Всегда учитывайте регистр при написании кода, есть большая вероятность, что такие имена не будут распознаны тем или иным браузером. Возьмите за правило все писать и обзывать маленькими латинскими буквами, тогда риск человеческого фактора и капризов программ сведется к нулю.
  • Правило трех кликов..

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

Глава 7

Фреймы.

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

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

Ну что, начнем? Допустим нам необходимо в одном окне браузера открыть сразу три HTML документа и расположить их к примеру вот таким способом:

Что нам для этого нужно? Для начала естественно нам необходимо создать три отдельных html документа которые мы собственно и будем открывать в одном окне.. Пусть первый документ будет нести в себе графическое изображение и будет выполнять роль логотипа назовём его logotype.html , вторым документом будет некое содержание.. назовём menu.html , ну и третьим документ с кучей текста. text.html. Конечно Вы можете придумать свои названия, как впрочем и содержание документов, но пока лучше всё же копируйте мои.. так будет удобнее и мне и Вам.

Итак, есть три файла logotype.html, menu.html и text.html.. которые нам необходимо разместить под одной крышей, а крыши у нас как раз таки ещё пока и нет..

Пишем "крышу", главный документ к которому будем подключать наши файлы. Раз он будет главным, присваиваем ему имя index.html.

<html>
<head>
<title>фреймы</title>
</head>
<body>
</body>
</html>

Вот привычная для нас структура документа которую мы пережевали ещё в самом начале нашего обучения.. Фреймы ломают сложившиеся стереотипы! Структура фрейм документа имеет вот такой вид:

<html>
<head>
<title>фреймы </title>
</head>
<frameset>
</frameset>
</html>

Отсутствие тега <body> компенсирует новый тег <frameset> - установить фрейм или набор фреймов.. с этим товарищем мы собственно и будем работать дальше.

Тег <frameset> имеет атрибуты rows и cols - эти атрибуты указывают браузеру на то, как следует размещать фреймы в окне браузера

rows - горизонтально cols - вертикально

В нашем случае нам необходимо горизонтальное размещение фреймов.. значит пишем так:

<html>
<head>
<title>фреймы </title>
</head>
<frameset rows="15%,15%,70%">
</frameset>
</html>

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

Вот несколько примеров написания:
<frameset rows="15%,15%,70%"> - такая запись говорит о том, что будет три горизонтальных окошка где последнее займет 70% площади окна браузера, а первые два по 15%.
<frameset cols ="200,240,200"> - здесь три окна расположены вертикально ширина которых указана в пикселях.
<frameset rows="100,*,180"> - такая запись значит, что первое и третье окно будут иметь ширину 100 и 180 пикселей соответственно, а второй фрейм займет всю оставшеюся площадь.

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

Тег <frame> и его атрибут src укажет браузеру путь к html документу который следует открыть в отведенном для него месте. У нас имеется три отдельных документа logotype.html, menu.html и text.html теперь к каждому нужно прописать путь, что мы собственно и делаем. (предполагаю, что у Вас все четыре файла находятся в одной папке и пути к ним имеют самую простую запись по типу: <frame src="logotype.html">)

Пример:

Файл index.html
<html>
<head>
<title>фреймы</title>
</head>
<frameset rows="15%,15%,70%">
<frame src="logotype.html">
<frame src="menu.html">
<frame src="text.html">
</frameset>
</html>

Файл logotype.html
<html>
<head>
<title>фреймы</title>
</head>
<body>
<img src="logotype.jpg" width="800" height="120" alt="Кулинария">
</body>
</html>

Файл menu.html
<html>
<head>
<title>фреймы</title>
</head>
<body bgcolor="#e8e8e8" background="fon1.jpg">
<font face="Monotype Corsiva" size="6"color="#ff0000">Меню:</font><br>
<font face="Comic Sans MS" size="3">
<a href="text.html">Суп из шампиньонов</a><br>
<a href="text1.html">Бобы в горшочке по-итальянски</a><br>
<a href="text2.html">Австралийский летний салат</a><br>
... ... ...
</font>
</body>
</html>

Файл text.html
<html>
<head>
<title>фреймы</title>
</head>
<body bgcolor="#f5f5f5">
<center><font face="Comic Sans MS" size="3">Суп из шампиньонов</font></center>
<br>
куча текста..
</body>
</html>

смотреть пример

В данном примере я выложил все четыре HTML документа где index.html является основным, а остальные три, это подключаемые страницы, каждая из которых в принципе может работать автономно и содержать в себе всё что угодно картинки, таблицы, тексты, ссылки.. сделал я это для того что бы дать Вам понять принцип работы с фреймами. В дальнейших примерах я буду выкладывать лишь головной файл с фреймами, (а то уж больно много места на странице они все вместе занимают), а Вы знайте что у меня "где то там" есть все остальные файлы содержащие в себе графику, тексты, может быть ещё что ни будь.. ну и не отставайте за мной потихоньку редактируйте свои собственные странички к будущему тренировочному сайту.. Не знаю про что Вы будите писать свой, а я тут пообещался помочь одной девушке в написании сайта посвящённого кулинарии..)) так что решил так сказать сразу на двух зайцев замахнуться.. на девушку зайку и сайт..)) как-то так..))

В выше изложенном примере мы расположили все окна горизонтально, поменяв атрибут rows на cols можно расположить их в вертикальном порядке. А как быть, если требуется разместить наши окна


вот так?: или так?: или даже так?:

Выход есть. Разберём на примерах.

Начнём с первого случая.. что мы видим? А видим мы две строки, где вторая поделена на два столбца.

A теперь по порядку:

<frameset rows="20%,80%"> - делим окно браузера на две строки
<frame src="logotype.html">- в первую строку загружаем наш логотип
<frameset cols="30%,70%">- а вторую строку делим на два столбца
<frame src="menu.html"> - в первом будет меню
<frame src="text.html">- а во втором куча текста
</frameset> - закрываем тег деления на столбцы
</frameset> - закрываем тег деления на строки

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

Ну да ладно, смотрим пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset rows="15%,85%">
<frame src="logotype.html">
<frameset cols="20%,80%">
<frame src="menu.html">
<frame src="text.html">
</frameset>
</frameset>
</html>

смотреть пример

Во втором случае у нас имеется два столбца в котором второй поделен на две строки, значит будем писать так:

<frameset cols="30%,70%"> - делим окно на два столбца
<frame src="menu.html"> - в первом будет содержание
<frameset rows="20%,80%"> - а второй делим на две строки
<frame src="logotype.html"> - логотип
<frame src="text.html"> - и основной текст
</frameset> - закрываем деление на строки
</frameset> - закрываем деление на столбцы

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols="20%,80%">
<frame src="menu.html">
<frameset rows="15%,85%">
<frame src="logotype.html">
<frame src="text.html">
</frameset>
</frameset>
</html>

смотреть пример

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

<frameset cols="*,800,*"> - делим окно на три столбика (обратите внимание второй столбец занимает ровно 800 пикселей а два крайних точного размера не имеют и поделят пополам оставшееся место)
<frame src="dekor.html"> -в первый столбец загружаем html документ который будет выполнять сугубо декоративную функцию

<frameset rows="15%,85%"> -
<frame src="logotype.html"> -
<frameset cols="20%,80%"> - во второй столбец вставляем наш "первый случай"
<frame src="menu.html"> -
<frame src="text.html"> -
</frameset> -
</frameset> -

<frame src="dekor.html"> - в третий столбец загружаем всё тот же файл с декорациями
</frameset> - захлопываем

Посмотрите пример, а потом я объясню почему избрал путь с пятью окнами

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols="*,800,*">
<frame src="dekor.html">
<frameset rows="120,*">
<frame src="logotype.html">
<frameset cols="200,600">
<frame src="menu.html">
<frame src="text.html">
</frameset>
</frameset>
<frame src="dekor.html">
</frameset>
</html>

смотреть пример

Так почему пять окон? Помнится мне, я уже писал про то, что у разных пользователей сети Интернет на мониторах выставлены разные разрешения и соответственно на разных экранах наш сайт будет выглядеть по разному.. и если нет конкретных размеров все наши рисунки, тексты, таблицы что называется "поплывут" у тех пользователей, разрешения мониторов которых отлично от Вашего. Когда мы верстали сайт с помощью таблицы, вопрос с размерами страницы решался при помощи присуждения этой таблице конкретной ширины и высоты, к сожалению, с фреймами так поступить нельзя.. даже если указывать ширину фреймов не в процентах, а в пикселях, всё равно последний столбец растянется на оставшеюся ширину окна браузера и страница, что называется, потеряет "товарный вид". Так как же быть? Приходится идти на маленькие хитрости.. Задав центральному столбцу (в котором у нас собственно и размещена вся страница) размер 800 пикселей мы раз и навсегда определи его ширину, а безразмерные первый и третий столбцы помимо декора выполняют роль своего рода "пружин" на которых подвешен центральный столбец.. Так, у людей с маленьким разрешением монитора эти окна/поля будут узкими, а людей с большим разрешением широкими, таким образом центральный столбец никак не пострадает и теперь мы можем с полной уверенностью размещать в нём какие либо объекты, с точной привязкой по месту, не переживая за их дальнейшую судьбу. Сравните первый пример, где три окна и третий, где их уже пять, неправда ли так лучше?

На этом с размещением и размерами фреймов закончим.. и так здесь долго задержались.. идём дальше.