Как видно из приведенного HTML кода, первый ряд таблицы состоит из четырех тегов <TD>, а остальные из трех. На самом деле все четыре ряда таблицы состоят из четырех ячеек, просто последние ячейки объединены в одну вертикальную ячейку, в которой написано товары. Объединение ячеек таблицы по вертикали происходит сверху вниз. То есть объединяется n-ное число ячеек, начиная от той, в которой использован параметр ROWSPAN. Давайте еще раз посмотрим повнимательнее на фрагмент HTML кода ячейки в которой происходит объединение:

В четвертой ячейке происходит объединение четырех (ROWSPAN=4) ячеек в столбце. В результате три последующих ряда таблицы должны содержать только три ячейки (четвертая объединена в первом ряду), как и показано в нашем примере.

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

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

Аккуратный бордюр шириной в 1 пиксел черного цвета вокруг таблицы. Как добиться такого результата. Все достаточно просто.

• Нужно создать первую таблицу и задать ширину таблицы с помощью параметра WIDTH тега <TABLE> Первая таблица должна состоять из одного ряда, в котором одна ячейка.
• В эту ячейку нужно вставить еще одну таблицу, задав значение параметра WIDTH этой таблицы равным 100%. В результате ширина второй (внутренней) таблицы будет стремиться к ширине ячейки первой таблицы, в которой она находится.
• Далее нужно задать параметр CELLPADDING первой таблицы равным ширине бордюра в пикселах, который вы хотите увидеть вокруг вашей мнимой таблицы. В нашем примере CELLPADDING=1 для первой таблицы. В результате вторая таблица стремиться сравняться с шириной ячейки первой таблицы, но параметр CELLPADDING не дает ей это сделать, оставляя бордюр.
• Остается задать параметр BGCOLOR для первой таблицы (это будет цвет бордюра) и BGCOLOR для второй таблицы (это будет цвет фона нашей мнимой таблицы).
• Параметр BORDER обоих таблиц должен быть равным 0, чтобы избежать отображения настоящих бордюров таблиц.

Более темным фоном выделен HTML код второй таблицы, которая вставлена в ячейку первой таблицы. Чтобы регулировать внешний вид вашей мнимой таблицы, используйте:

BGCOLOR первой таблицы - для цвета бордюра
CELLSPACING первой таблицы - для ширины бордюра
WIDTH первой таблицы - для ширины мнимой таблицы
BGCOLOR второй таблицы - для фона мнимой таблицы

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

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

Давайте посмотрим на следующий пример. Предположим, вам нужна страница, состоящая из трех колонок. Колонка слева будет содержать навигационное меню по сайту, и по ширине должна составлять 150 пикселов (точек монитора). Колонка справа должна занимать 100 пикселов, а колонка в центре должна занимать все оставшееся пространство, независимо от разрешения монитора у того, кто просматривает страницу. Цвет левой колонки должен быть темно-синим. Представьте что таблица, расположенная ниже представляет экран монитора, тогда ваш сайт должен выглядеть следующим образом:

Меню сайта:   ссылка 1   ссылка2     ссылка3     ссылка4   ссылка5   ссылка6     Текст основного содержания вашей страницы. Здесь вы пишите все основное содержание, картинки и т.д. Текст основного содержания вашей страницы. Здесь вы пишите все основное содержание, картинки и т.д.    Реклама: Рекламный текст и картинки вы можете поместить в эту колонку рекламный текст и картинки

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

Первый шаг - создание внешней таблицы
Прежде всего нужно создать внешнюю таблицу, которая будет представлять основу вашей страницы. В нашем примере внешняя таблица состоит из 5 ячеек. Первая ячейка - это левая колонка, вторая и четвертая ячейки будут пустыми и предназначены для создания небольшого расстояния между колонками нашей страницы, третья ячейка - центральная колонка и наконец пятая ячейка - это правая колонка с рекламой. На начальном этапе нужно задать величину бордюра вокруг равной 1, чтобы было видно где находятся ячейки таблицы. Когда страница будет готова, нужно убрать бордюр, задав значение параметра BORDER равным нулю. Итак, вот код нашей внешней таблицы:

Как видно из HTML кода вся таблица состоит из одного ряда, в котором находится 5 ячеек. Общая ширина таблицы задана равной 100% (WIDTH=100%). Далее применяется следующий прием. Ширина каждой ячейки задается в процентах, при чем сумма параметров WIDTH всех ячеек должна равняться 100%. В противном случае не во всех броузерах будет одинаковым результат. Хитрость заключается в том, чтобы задать заведомо больший размер в процентах для центральной колонки (третья ячейка), и заведомо меньший размер левой и правой колонок (первая и последняя ячейки ряда), а затем вставить в первую и последнюю ячейку так называемую "распорку". Роль распорки выполняет прозрачная картинка размером в один пиксел. <IMG SRC=p.gif WIDTH=150 HEIGHT=1 ALT="">
(см. HTML код выше). Таким образом третья ячейка таблицы стремиться к 94% размера таблицы, но сделать ей это не дают распорки (прозрачные картинки шириной 150 пикселов в первой ячейке и 100 пикселов в последней ячейке).

Обратите внимание на то, что значение параметра VALIGN (вертикальное выравнивание внутри ячейки) задано top. Это сделано для того, чтобы текст во всех трех колонках начинался от самого верхнего края ячейки.

Каркас вашей страницы готов. Осталось сделать красивое оформление рекламного блока в правой колонке страницы. Для этого в последнюю ячейку нашей внешней таблицы вместо слова 'Реклама:' нужно вставить другую таблицу. Здесь приводится только HTML код этой таблицы. Вы должны уже уметь разбираться в HTML коде и понять как построена таблица. Считайте это практическим заданием. Более подробно о создании подобной таблицы вы можете прочесть еще раз здесь.

Теперь остается только убрать бордюр нашей внешней таблицы (BORDER=0), чтобы получилась наша страница.

Последний штрих, это задание фона страницы так, чтобы по краям таблицы не было белых промежутков. Это можно сделать задав параметр BACKGROUND тега <BODY> в виде картинки, левая часть шириной в 150 пикселов которой темно синяя, а правая часть картинки шириной в 1500 пикселов - серая. Почему именно 1500 пикселов? Наибольшее разрешение монитора обычно не превышает 1624 пиксела. Поэтому картинка, которая заполнит фон страницы должна быть шире 1624 пикселов, чтобы темно-синяя полоса не повторялась.

Ширину первой и последней колонок нашей страницы можно регулировать при помоши значения параметра WIDTH прозрачных картинок (распорок) в первой и последней ячейках нашей внешней таблицы (каркаса). Все что добавлено в этом последнем примере, это <BODY BACKGROUND=back.gif> вместо просто <BODY>.

Как видно на окончательной странице, вторая ячейка заползает на левую темно-синюю колонку. Для того, чтобы избавиться от этого, достаточно немного увеличить ширину прозрачной картинки (распорки), которая вставлена в первую ячейку внешней таблицы (каркаса). Например, вместо WIDTH=150 поставить WIDTH=160 и убрать параметры BGCOLOR из пяти ячеек внешней таблицы, так как больше эти параметры не нужны (их заменяет картинка фона страницы). Вот окончательный HTML код, который составляет страницу:

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

Материал предоставлен
Студией Интернет-поддержки
Автор статьи Анатолий Курушин
все права на распространение данного
материала принадлежат автору статьи

Введение в Java Script.

В JavaScript Вам разрешено пользоваться некоторыми заранее заданными объектами. Примерами таких объектов могут служить Date, Array или Math. Есть еще несколько таких же объектов - полное описание см. в документации, предоставляемой фирмой Netscape.

Для начала давайте рассмотрим объект Date. Судя по названию, он позволяет Вам работать как со временем, так и с датой. Например, Вы можете легко определить, сколько дней еще остается до следующего рождества. Или можете внести в Ваш HTML-документ запись текущего времени.

Так что давайте начнем с примера, который высвечивает на экран текущее время. Сперва мы должны создать новый объект Date. Для этого мы пользуемся оператором new:

today= new Date()

Здесь создается новый объект Date, с именем today. Если при создании этого нового объекта Date Вы не указали какой-либо определенной даты и времени, то будут предоставлены текущие дата и время. То есть, после выполнения команды today= new Date() вновь созданный объект today будет указывать именно те дату и время, когда данная команда была выполнена.

Объект Date предоставляет нам кое-какие методы, которые теперь могут применяться к нашему объекту today. Например, это методы - getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() и так далее. Полное описание объекта Date и его методов Вы сможете найти в документации по JavaScript, предоставляемой фирмой Netscapes.

Обратите пожалуйста внимание, что объект Date лишь содержит определенную запись о дате и времени. Он не уподобляется часам, автоматически отслеживающим время каждую секунду, либо миллисекунду.

Чтобы зафиксировать какое-либо другие дату и время, мы можем воспользоваться видоизмененным конструктором (это будет метод Date(), который при создании нового объекта Date вызывается через оператор new):

today= new Date(2000, 0, 1, 17, 35, 23)

При этом будет создан объект Date, в котором будет зафиксировано первое января 2000 года 17:35 и 23 секунд. Таким образом, Вы выбираете дату и время по следующему шаблону:

Date(year, month, day, hours, minutes, seconds)

Заметьте, что для обозначения января Вы должны использовать число 0, а не 1, как Вы вероятно думали. Число 1 будет обозначать февраль, ну и так далее.

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

Time: 17:53
Date: 4/3/2010

Сам же код выглядит следующим образом:
<script language="JavaScript">
<!-- hide

now= new Date();

document.write("Time: " + now.getHours() + ":" + now.getMinutes() + "<br>");
document.write("Date: " + (now.getMonth() + 1) + "/" + now.getDate() + "/" +
(1900 + now.getYear()));

// -->
</script>

Здесь мы пользуемся такими методами, как getHours(), чтобы вывести на экран время и дату, указанные в объекте Date с именем now. Можно видеть, что мы добавляем к записи года еще число 1900. Дело в том, что метод getYear() указывает количество лет, прошедших после 1900 года. А стало быть, если сейчас 1999 год, то будет выдано значение 99, а если 2010 год - то 110, а не 10! Если мы так и будем всякий раз добавлять 1900, то у нас не будет проблемы 2000 года. Помните также, что мы обязаны увеличивать на единицу значение, получаемое от метода getMonth().

В данном скрипте не выполняется проверки на тот случай, если количество минут окажется меньше, чем 10. Это значит, что Вы можете получить запись времени примерно в следующем виде: 14:3, что на самом деле должно было бы означать 14:03. Решение этой проблемы мы рассмотрим в следующем примере.

Рассмотрим теперь скрипт, создающий на экране изображение работающих часов:

<html>
<head>

<script Language="JavaScript">
<!-- hide

var timeStr, dateStr;

function clock() {
now= new Date();

// врем\я
hours= now.getHours();
minutes= now.getMinutes();
seconds= now.getSeconds();
timeStr= "" + hours;
timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;
timeStr+= ((seconds < 10) ? ":0" : ":") + seconds;
document.clock.time.value = timeStr;

// дата
date= now.getDate();
month= now.getMonth()+1;
year= now.getYear();
dateStr= "" + month;
dateStr+= ((date < 10) ? "/0" : "/") + date;
dateStr+= "/" + year;
document.clock.date.value = dateStr;

Timer= setTimeout("clock()",1000);
}

// -->
</script>
</head>

<body onLoad="clock()">

<form name="clock">
Время:
<input type="text" name="time" size="8" value=""><br>
Дата:
<<input type="text" name="date" size="8" value="">
</form>

</body>
</html>

Здесь для ежесекундной коррекции времени и даты мы пользуемся методом setTimeout(). Фактически это сводится к кому, что мы каждую секунду создаем новый объект Date, занося туда текущее время. Можно видеть, что функции clock() вызываются программой обработки события onLoad, помещенной в тэг <body>. В разделе body нашей HTML-страницы имеется два элемента формы для ввода текста. Функция clock() записывает в оба эти элемента в корректном формате текущие время и дату. Для этой цели используются две строки timeStr и dateStr

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

timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;

Как видим, количество минут заносится в строку timeStr. Если у нас менее 10 минут, то мы еще должны приписать спереди 0. Для Вас эта строка в скрипте может показаться немного странной, и ее можно было бы переписать в более знакомом Вам виде:

if (minutes < 10) timeStr+= ":0" + minutes
   else timeStr+= ":" + minutes;



Stefan Koch. Перевод Радик Усманов. www.citforum.ru/internet/koch/tutorial.htm
Продолжение следует

Использован материал сайта http://www.citforum.ru

Как менюшку сделать?

Довольно много бродив по Инету, я видел огомное число жутких, убогих сайтов! На одном народе.ру в каталоге посмотришь-жуть, что творится... Меня долгое время удивляло, что многие не в состоянии сделать не то,что красивую, но просто сносоную менюшку на сайте!!!
Да, именно этот элемент сайта часто является самым страшным. В своей статье я хочу предложить этим горе-вебмастерам (если они только читают эту рассылку) несколько способов создания более-менее нормальной менюшки. Заранее прошу не заваливать мой почтовый ящик письмами о том, что эту менюшку можно сделать и по-другому, и что вообще моя статья только для ламеров и годится.
Итак, приступим.

Способ 1-ый.
Без графики вообще (грузится быстро,но выглядеть может несколько блекло :-( ).Этот способ, как и другой, использует JavaScript.

<table border="0" cellspacing="1" width="90" id="table1"
onmouseover="table1.bgColor='gray'"
onmouseout="table1.bgColor='#C0C0C0'"
onclick="document.href='start.htm'"
style="cursor: hand">
<tr>
<td><p align="center"><font size="4">Начало</font></p>
</td>
</tr>
</table>

И используется это очень просто:

1.) меняем во 2-ой строке gray на имя или код цвета, в который будет перекрашиваться кнопочка при наведении на неё мышки.
2.) меняем во 3-ой строке #c0c0c0 на имя или код первоначального цвета, в этот цвет кнопка будет перекрашиваться при убирании мышки.
3.) в 4-ой строке меняем start.htm на имя страники, на которую указывает кнопка.
4.) и, естественно меняем "Начало" на другую надпись на кнопке.
И важное примечание:если Вы ставите эту кнопку несколько раз,то каждый раз во всём коде надо table1 менять на что-нибудь другое...
Поставив несколько таких кнопочек друг над другом, получаем сносную менюху.

Способ 2-ой.
Первый способ неплохой, но без графики всё равно получается не очень круто.
<img src="image1.jpg" name="buttom1"
OnMouseOver='document.buttom1.src="image2.jpg"'
OnMouseOut='document.buttom1.src="image1.jpg"'
OnClick='location.href="document.htm"'>

где: image1.jpg- изображение нормальной кнопки, image2.jpg- изображение активной кнопки (когда мышку подвели),document.htm-это HTML-документ, на который ссылается кнопка,ну а buttom1- эту фигню надо менять на какую-нибудь другую каждый раз, когда вставляем кнопку.Ставим кнопки друг на друга и получаем тоже менюшку,но красивее 1-ой.

Я надеюсь, что после этой публикации некоторые сайты станут чуть-чуть красивее!

Ругань (обоснованную) и комментарии направлять на stark@echo.ru. Мой сайт - http://cybcat.i-connect.ru.

PS:на http://cybcat.i-connect.ru Вы можете скачать программу ButtoMake,с помощью которой можно создавать довольно неплохие кнопки автоматически.
(C)2000 by $k aka Соловьёв Михаил.

Софт для Вебмастера.