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

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

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

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

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

• параграф,
• таблица,
• список и т.д…

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

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

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

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

• Язык документа – язык, в котором закодирован данный документ. В нашем случае это язык HTML.
• Элемент – оператор языка HTML, представленный в виде узла на древе документа.
• Атрибут – значение, связанное с элементом, состоит из названия и присвоенного текстового значения.
• Корень – начальный элемент древа (не имеет родителя). В случае документов HTML, элементом, представляющим собой корень, является какой-либо оператор HTML.
• Ребенок – элемент «В» является ребенком элемента «А», если элемент «А» является родителем элемента «В», то есть если элемент «А» выступает на один уровень выше в иерархии древа. Каждый элемент древа документа (за исключением корня) всегда имеет одного родителя.
• Потомок – элемент «В» является потомком элемента «А», если элемент «А» выступает на один уровень выше, чем элемент «В» в иерархии древа, или если элемент «В» является ребенком элемента «С», являющегося потомком элемента «А».
• Брат – элементы «А» и «В» называются братьями, если у них общтй родитель.

Как это работает:

Скачайте файлы:

• iepngfix.htc
• blank.gif

и поместите их в хом-директорию вашего сайта.

В таблицу стилей вашего сайта (CSS) добавьте следующую строку:

img, div { behavior: url("iepngfix.htc") }

Теперь все элементы img и div будут "понимать" PNG прозрачность.

Что делать если:

Все сделали как описано, но прозрачность не работает. – Проверьте внимательно пути к файлу iepngfix.htc в стилях и к файлу blank.gif в коде самого iepngfix.htc. Попробуйте добавить строчку:

alert(‘This works’);

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

Работает локально, но не работает на сервере. – Необходимо убедиться, что сервер отдает корректный MIME type "text/x-component" для .HTC файлов. Можно добавить в ваш .htaccess строчку:

AddType text/x-component .htc

либо, если и это не помогает, воспользоваться PHP. Создайте PHP файл с именем iepngfix.php следующего содержания:

<?php
header(‘Content-type: text/x-component’);
include(‘iepngfix.htc’);
?>

и залейте его в ту же, директорию, где лежит iepngfix.htc. А в стилях вызывайте не .htc файл, а .php файл, например:

img, div { behavior: url("iepngfix.php") }

Таким образом будет отдаваться нужный MIME для HTC файла.

Надеюсь, статья будет вам полезна, и жду отзывов и комментариев…

<?xml version=”1.0″?>

Данный тег говорит о том, что это именно xml документ.

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

<document></document>

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

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

<document title=”Пример документа”>

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

<empty />

Вот пример xml-документа, который хранит в себе данные о мобильных телефонах

<?xml version=”1.0″ encoding=”UTF-8″?>
<phones>
<phone>
<manufacturer>Siemens</manufacturer>
<name>CX75</name>
<camera>1.3 Mpix</camera>
</phone>
<phone>
<manufacturer>Nokia</manufacturer>
<name>6300</name>
<camera>2.0 Mpix</camera>
</phone>
</phones>

Хранение данных в формате xml удобно по сравнению с обычными файлами при написании php-приложений. Об использовании xml в php мы поговорим следующий раз.

• “шапка” (то, что перед текстом)
• содержимое страницы (текст)
• “подвал” (то, что после текста)

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

Но можно сделать гораздо удобнее! Ведь в SSI можно использовать переменную QUERY_STRING, которая содержит всё, что расположено после знака “?” в запросе. Тогда можно сделать только один файл шаблона и файлы с контентом, которые будут содержать только текст. А реализуется это так:

Листинг файла index.shtml

<!– Ваша шапка, теги html, head, меню и так далее –>
<!–#if expr=”$QUERY_STRING”–>
<!–#include virtual=”path/to/content/$QUERY_STRING”–>
<!–#else –>
<!–#include virtual=”path/to/content/index.txt”–>
<!–#endif –>
<!– Ваш подвал – счётчики, копирайты, закрытие страницы –>

в папке path/to/content (путь естественно можно и нужно заменить) должны лежать текстовые файлы с содержимым страниц. Содержимое файла index.txt будет текстом на главной странице. Ссылки будут иметь вид http://сайт.ru/index.shtml?name, где name — название текстового файла, в котором содержится контент текущей странички.

Конечно, ссылки выглядят криво, и сейчас мы это исправим. Создадим файл .htaccess, в который загоним следующее содержимое

RewriteEngine on
Options +FollowSymlinks
RewriteBase /
RewriteRule ^([a-zA-Z0-9]*).html index.shtml?$1

Теперь к страницам можно обращаться, используя URLы вида http://сайт.ru/name.html.

После этих модификаций сайт не приобрёл каких–либо кардинальных изменений, но зато теперь его гораздо проще обновлять.

Итак, что такое SSI? SSI (Server Side Includes, включения с серверной стороны) – это технология, способная избавить Вас от некоторой рутины при редактировании сайта. Чаще всего используется для шаблонизации, но может привнести в сайт и немного динамики.

Начнём с того, как использовать SSI. Для использования SSI нужен просто сервер с его поддержкой. Таковым, например, является Apache.

Директивы SSI обрабатываются в файлах с расширением .shtml, хотя можно настроить сервер так, чтобы директивы SSI обрабатывались и в файлах с расширением .html.

Директивы SSI имеют следующий вид:

<!–#команда параметр1=”значение” параметр2=”значение” –>

Вот список команд SSI (не исчерпывающий, но содержащий самые нужные команды:

echo — выводит значение какого-либо серверного параметра. Вот вид команды (а заодно и пример использования):

<!–#echo var=”HTTP_REFERER” –>

Доступные для вывода параметры (список не полный):
HTTP_REFERER — адрес страницы, с которой пришёл посетитель
HTTP_USER_AGENT — информация о браузере пользователя
REMOTE_ADDR — IP адрес пользователя

include — добавляет в текущий файл содержимое другого файла

<!–#include virtual=”./file.txt” –>

Пример добавляет содержимое файла file.txt

fsize — выводит информацию о размере файла

<!–#fsize file=”./file.zip” –>

flastmod — выводит дату и время последней модификации файла.
Формат вывода соответствует настройкам на сервере.

<!–#flastmod file=”./file.zip” –>

config — команда для изменеия некоторых серверных настроек (на время выполнения программы). Например, можно изменить формат вывода даты и времени для команды flastmod:

<!–#config timefmt=”%d.%m.%Y %H:%M:%S” –>

exec — с помощью этой команды можно выполнить внешнюю программу (параметр cmd) или cgi-скрипт (параметр cgi)

printenv — программа выводит системные переменные, параметров не имеет

<!–#printenv –>

if — известный всем программистам оператор логического перехода

<!–#if expr=”$HTTP_USER_AGENT = /Firefox/”–>
Отличный выбор браузера! Нам тоже нравится Firefox!
<!–#else –>
Рекомендуем Вам использовать Firefox!
<!–#endif –>

Если Вы решите перейти с использования чистого HTML на HTML+SSI, то знайте, что это грозит Вам меньшими затратами времени и большим динамизмом страниц =)

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

Разработка HTML/шаблонов – верстка.

Разработка Базы Данных – если проект достаточно большой, без неё Вы вряд ли обойдётесь.

Непосредственно программирование – создание функциональности, работа с Базой и пр.

Рассмотрим каждый из этих пунктов немного подробнее.

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

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

Второе – используйте HTML только для того, чтобы разметить документ – обозначить абзацы, таблицы, блоки – для всего остального используется каскадные таблицы стилей (CSS). Для чего это нужно? Множество причин: во-первых, Ваш код становится более читабельным, когда он не нагружен избыточными элементами font, center, style и пр. Во-вторых, Вы значительно уменьшаете размер итогового html файла. Представьте, на Вашей странице 10 кнопок навигации, для их размещения и оформления Вы 10 раз пишите почти один и тот же код, вместо того, чтобы написать это один раз в CSS файле и привязать к элементу. Это будет экономить не только размер Вашей странички, но и Ваше время. Если Вы захотите изменить цвет кнопки, Вам нужно будет внести изменение в один файл, в одну строку.

Наконец, третье, пожалуй, самое важное – отделяйте HTML код от PHP кода. Это плохой стиль – писать html и php в одном файле. Для удобного и красивого разделения существует технология Smarty, о которой я в прошлых статьях уже упоминал не раз. Плюсы от этого разделения так же достаточно весомые. Во-первых, повышается восприятие кода. Во-вторых, улучшается и упрощается расширяемость/изменяемость всего проекта – гораздо проще что-то заменить/добавить в чистый шаблонный файл без php кода. В-третьих, если Вы захотите отдать код для доработки/изменения html-верстальщику, который не знает php, а в коде будет все в php-вставках, вряд ли он возьмётся за эту работу. Поэтому всегда помните о разделении кода!

Разработка Базы Данных является достаточно значимым этапом так же. Конечно, если Вы рассчитываете на 100-200 посетителей в день, то можно особо не думать о создании правильной базы данных, но если Вы ожидаете несколько тысяч посетителей – то Вам безусловно необходимо ознакомиться с методами оптимизации Баз Данных, оптимизации запросов к Базе, избавления от избыточности в Базе. Это основные моменты на которые стоит обратить внимание, при разработке БД для крупного сайта.

Наконец, стоит отметить основные аспекты хорошо написанного PHP-кода.

1. Объективно-ориентированный код – используйте активно ООП в своих проектах. Создавайте класса, методы, свойства. Используйте и разберитесь со всеми парадигмами ООП: инкапсуляция, полиморфизм, наследование. Создайте классы по работе с Базами Данных, по работе с информацией, по работе со страницами Вашего сайта. Никогда не повторяйте код, выполняющий одни и те же действия, отличающиеся лишь входными данными.
2. Комментарии – не забывайте писать комментарии к Вашему коду. Конечно, когда Вы изо дня в день погружены в работу над сайтом, все знаете и помните в коде, они, возможно, будут казаться избыточными. Но подумайте, если Вас попросят поработать над проектом через 2-3 месяца после его окончания? Думаю, процентов 60-70 кода будут Вам уже не так ясны, как сейчас, а о функциональности некоторых частей Вы можете и не вспомнить. Другая ситуация – Вы стали работать в команде и другим людям надо как можно быстрее разобраться в том, что вы сделали -  в Вашем коде. Очень и очень непросто разобраться в тысячах строках чужого кода, оставленных без единого комментария. Поэтому, пишите комментарии – это позволит Вам выглядеть, если не как профессиональным программистом, то человеком, серьёзно относящимся к делу и уважающим своё время и чужое.

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

Успехов!

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

position (static | relative | absolute | fixed | inherit)

По умолчанию мы имеем значение static. Данное css свойство применимо ко всем элементам на странице. С помощью свойства position осуществляется выбор одного из четырёх методов позиционирования. Рассмотрим каждый подробнее.

1. static – позиционирование по умолчанию – прямоугольники элементов отображаются в порядке их описания в документе.
2. relative – в данному случае осуществляется перемещение прямоугольника элемента, но изначальное пространство для него в документе остаётся за ним.
3. absolute – задает абсолютное позиционирование. В данном случае, элемент не влияет на размещение других, окружающих его элементов. Элементы с таким позиционированием фактически являются блоками (по поведению).
4. fixed – аналогичен absolute, однако положение элемента определяется относительно окна браузера.

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

top,right,bottom,left (длина | процент | auto | inherit)

По умолчанию auto. Применимо только к позиционируемым элементам типа relative,absolute,fixed. Значение, которое будет задано для каждого из этих свойств означает расстояние, на которое будет осуществлен сдвиг от выбранного края. Например, значение свойства left определяет расстояние между левым краем блока и левым внешним краем самого элемента.

Одной из проблем позиционирования является проблема обработки «непредвиденных» случаев. Допустим, вы задали позиционирования для элемента и вставили туда текст. Затем текст был изменён в базе данных, автоматически он изменился на странице – добавилось несколько абзацев и… И он перестал помещаться в выбранную Вами область. Для обработки таких проблем нам пригодится свойство overflow.

overflow (visible | hidden | scroll | auto | inherit)

По умолчанию значение visible. Применимо к любым элементам уровня блока и замещаемым элементам. Рассмотрим смысл этих значений подробно.

1. visible – данный режим позволяет вывод контента вне пределы выделенной для него области.
2. hidden – если контент не умещается в выделенную ему область, «лишний» текст будет отсекаться. Видно на странице его не будет.
3. scroll – данное значение добавляет к элементу размещения полосы прокрутки, таким образом, пользователь имеет возможность просмотреть тот текст, который не уместился в данной области, используя скролл. Необходимо заметить, что при выборе этого значения, полосы прокрутки будут видны даже тогда, когда весь текст умещается в свои пределы.
4. auto – кладет обработку данной ситуации на плечи броузеру, предоставляя ему право включать и выключать полосы прокрутки, в зависимости от наполнения блока контентом.

Теперь вернёмся к непосредственному позиционированию. Одним из распространенных приемов позиционирование – является наложение «слоев». По умолчанию наложение элементов происходит в порядке их появления в документе, при этом более «поздние» отображаются поверх тех, которые следовали до них. Для изменения этого необходимо использовать свойство z-index. Это свойство принимает любое целочисленное значение, как положительное, так и отрицательное. Соответственно, чем больше это значение, тем «выше» данный слой будет наложен. Можете поэкспериментировать с этим свойством, наложив друг на друга несколько блоков различного цвета (для наглядности).

Наконец, один из наиболее важных моментов позиционирования: абсолютное позиционирование.

Абсолютно позиционируемые элементы можно описать следующим образом:

• Для объявления элементов служит констуркция {position : absolute;}.

• Элементы располагаются относительно краев блока с учетом одного или нескольких свойств, определяющих сдвиг (top,right,bottom,left).

• Элементы в такой позиции полностью исключаются из потока содержимого документа.

Для наглядности, приведём простой пример абсолютного позиционирования элемента.

div {position: absolute; background-color: #ccc; width: 500px;}

ul {position: absolute; left: 60px; top: 30px; backround-color: #EEE; margin: 0px;}

<div>

<p>Test. Test. Test.</p>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

<p>Ещё текст некоторый.</p>

</div>

Это основные свойства позиционирования в CSS о которых я хотел рассказать в этой статье. Успехов!

<table border=1 cellspacing=2 cellpadding=5 width=”50%” align=”Center”>
<tr>
<td>Тут текст</td>
</tr>
</table>

border это размер границы таблицы(окантовка), cellspacing – растояние от одного до другого края окантовки, cellpadding – расстояние внутри таблицы, от ближнего края до содержимого, align – расположение таблицы в окне браузера (center, left, right, top…). width – ширина таблицы, если ширина указана в процентах, то это означает процентное соотношение размера окна браузера к размеру таблицы. Очень удобно использовать % в width если дизайн верстается под разные разрешения экрана. height – высота ячейки.
<tr></tr> – строки таблицы
<td></td> – столбцы таблицы

Цвет ячеек и таблицы в целом определяет – bgcolor.

Пример окрашенной таблицы:

<table bgcolor=”#fffccc”>
<tr>
<td>Тут текст</td>
<td>Тут текст</td>
</tr>
<tr>
<td>Тут текст</td>
<td>Тут текст</td>
</tr>
</table>

Пример окрашенной ячейки:

<table>
<tr>
<td bgcolor=”#fffccc”>Тут окрашенный цвет ячейки</td>
</tr>
<tr>
<td>Тут обычный цвет ячейки</td>
</tr>
</table>

Можно задавать размер для каждой ячейки. Как и для таблицы, это осуществляется атрибутом width. Содержимое каждой ячейки можно выравнивать. Это осуществляется атрибутом align. Также можно выровнить содержимое по центру, поместив его в теги между тегами <center> и </center>.
Вертикальное выравнивание осуществляется атрибутом valign, который может принимать значения: middle, top, bottom. Расстояние между ячейками определяется атрибутом cellspacing, по умолчанию cellspacing=”2″.
Пример:

<table border=”0″ cellspacing=”0″>
<tr>
<td bgcolor=”#3366FF” height=”35″ width=”50″ valign=”top”> <center>1×1</center> </td>
<td bgcolor=”#61646B” width=”50″ align=”center”>1×2</td>
<td bgcolor=”#3366FF” width=”50″ valign=”bottom”> <center>1×3</center> </td>
</tr>
<tr>
<td bgcolor=”#61646B” height=”35″ width=”50″ valign=”bottom”> <center>2×1</center> </td>
<td bgcolor=”#3366FF” width=”50″> <center>2×2</center> </td>
<td bgcolor=”#61646B” width=”50″ valign=”top”> <center>2×3</center> </td>
</tr>
</table>

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

<table cellspacing=”0″>
<tr>
<td bgcolor=”#61646B” height=”35″ colspan=”2″> <center>1×1</center> </td>
<td bgcolor=”#3366FF” width=”50″ rowspan=”2″> <center>1×2</center> </td>
</tr>
<tr>
<td bgcolor=”#3366FF” height=”35″ width=”50″ > <center>2×1</center> </td>
<td bgcolor=”#61646B” width=”50″> <center>2×2</center> </td>
</tr>
</table>

Цвет окантовки таблицы указывается в атрибуте bordercolor. Обратите внимание на то, что этот атрибут обрабатывается не всеми браузерами, например браузер opera игнорирует это атрибут. Пример:

<table border=”2″ bordercolor=”red”>
<tr>
<td bgcolor=”#61646B” height=”35″ colspan=”2″> Текст </td>
<td bgcolor=”#3366FF” width=”50″ rowspan=”2″> Текст </td>
</tr></table>

Вот в общем-то и всё, что я хотел рассказать в ходе этого урока.

Различия между XHTML и HTML:

1) Кодировкой по умолчанию в XHTML является UTF-8, в то время как HTML кодировкой по умолчанию является ISO 8859-1).

2) В XHTML более строгие правила написания кода. По рекомендации W3C – “браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ”. Для HTML же, браузеры продолжают выполнять код с ошибкой и разбирают – “что хотел автор кода”.

3) Все элементы кода должны быть закрыты. Все теги типа (<*>) не имеющие закрывающего тега типа (</*>) должны иметь на конце “/” например:

<br /><img src=”images.jpg” mce_src=”images.jpg” />

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

<IMG SRC=“images.gif” ALT= “” />

Правильно будет так:

<img src=“images.gif” alt= “” />

Правила хорошего кода XHTML:

В верху страницы нужно размещать следующий код:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Где XHTML 1.1 – версия XHTML.

Не стоит допускать таких ошибок как: незакрытые элементы, писать теги заглавными буквами, игнорировать теги alt(т.к. многие устройства не могут отображать картинки), не заключать атрибуты в кавычки, вложение блочных элементов внутрь внутристрочных (например, блочные элементы <div> или <p> не могут быть вложены внутрь внутристрочных элементов <a>, <span>, <em> и так далее).

Преимущества XHTML над HTML заключается в том, что синтаксис XML строже, чем SGML, обработка XHTML возможна даже на мобильных телефонах с малыми ресурсами.