Материал: Web-дизайн. лабораторный практикум. Суворов А.П., Проценко В.Н
Пример наложения текста:
<html>
<body>
Слой1 наверху
<div style="position:relative; font-size:50px; z-index:2; color: navy">
Слой 1 </div>
<div style="position:relative; top:-55; left:5; color:orange; font-size:80px; z-index:1">
Слой 2 </div>
Слой 2 наверху
<div style="position:relative; font-size:50px; z-index:3; color: navy">
Слой 1 </div>
<div style="position:relative; top:-55; left:5; color:orange; font-size:80px; z-index:4">
Слой 2 </div> </body> </html>
Тип позиционирования слоя определяется параметром position, положение элемента - двумя координатами top и left.
Кроме тегов <div> и <span> абсолютное позиционирование
поддерживают следующие элементы: <applet>, <input>, <button>, <object>, <select>, <fieldset>, <iframe>, <table>, <img>, <textarea>.
Параметр position:relative используется для смещения слоя относительно родительского элемента. Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left, то слой смещается от своего нормального положения в документе.
В то время как свойство position указывает тип системы координат, параметры top и left определяют точную позицию слоя. Значения этих параметров могут определяться в процентном отношении или пикселах, принимать положительные и отрицательные величины. Это дает возможность размещать контент выше или ниже на странице независимо от физической позиции кода HTML. То есть, в верхней части страницы можно поместить слой, который описан внизу HTML-документа.
Свойство z-index
Свойство z-index определяет порядок слоев, или их перекрытие по отношению к другим слоям. По умолчанию все слои позиционированы со значением z-index равным нулю. Другие слои могут размещаться ниже путем установки отрицательного значения z-index. Для слоев, у которых z-index не
60
установлен, это значение назначается неявно в соответствии с их положением в документе. Поэтому слой, который помещен в документ позже, размещается выше остальных элементов, позиционированных ранее.
Свойства visibility и display
Для отображения или скрытия слоя используется свойство visibility. Он может принимать значения visible, установленное по умолчанию, для показа слоя, и hidden, которое его прячет.
Например, скрытый блок текста можно оформить следующим образом:
<div style="visibility: hidden">Спрятанный слой</div>
При этом, когда используется данное свойство для скрытия элемента, соответствующий данному элементу блок занимает прежнее положение на странице, но сома содержимо не отображается.
Чтобы на странице не оставалось пустого блока, соответствующего скрываемому элементу, можно использовать свойство display со значением none. Для отображения элемента display равно block.
Динамическое управление слоями
Сценарии JavaScript позволяют динамически управлять параметрами установленных слоев. Это позволяет получить такие эффекты, как скрытие и отображение слоя, изменение порядка отображения, перемещение слоя в окне браузера. Все эти эффекты достигаются с помощью изменения соответствующих стилевых параметров установленных слоев.
61
Для обращения к слоям из сценариев JavaScript, удобнее всего каждому слою дать собственное имя при помощи параметра id. Например:
<div id="div1">
...
</div>
Для того, чтобы скрыть отображение слоя div1, можно использовать следующую команду:
div1.style.visibility='hidden';
Для повторного отображения слоя следует выполнить следующее присвоение:
div1.style.visibility='visible';
Пример динамической смены слоев: в данном примере для отображения некоторого слоя следует нажать на соответствующую ссылку. Эту идею можно применить и для организации выпадающих меню.
<html>
<head>
<style type="text/css"> div {
position: absolute; top: 20;
left: 160; visibility: hidden;
}
</style>
<script language="JavaScript"> function show_d(d)
{
div1.style.visibility='hidden';
div2.style.visibility='hidden';
div3.style.visibility='hidden';
div4.style.visibility='hidden';
div5.style.visibility='hidden';
d.style.visibility='visible';
}
</script>
</head>
<body>
<a href="javascript:void(0)" onClick="show_d(div1);">
показать слой 1
62
</a><br>
<a href="javascript:void(0)" onClick="show_d(div2);">
показать слой 2 </a><br>
<a href="javascript:void(0)" onClick="show_d(div3);">
показать слой 3 </a><br>
<a href="javascript:void(0)" onClick="show_d(div4);">
показать слой 4 </a><br>
<a href="javascript:void(0)" onClick="show_d(div5);">
показать слой 5 </a><br>
<div id="div1">
<h3>Слой номеродин</h3>
Некоторый текст, на слое расположенный. Его можно скрыть и показать. Текст может содержать несколько строк.
</div>
<div id="div2">
<h3>Слой номер два</h3>
Содержит свой текст. Если показывается, то текст на других слоях не виден.
</div>
<div id="div3">
<h3>Слой номертри</h3>
Тоже текст. При работе со слоями надо следить, чтобы текст одного слоя не "выглядывал" из-под другого слоя при самых различных размерах окна браузера и используемых шрифтах.
</div>
<div id="div4">
<h3>Слой номер четыре</h3>
Здесь нет текста.
</div>
<div id="div5">
<h3>Слой номер пять</h3>
И тут тем более нет.
</div>
63
</body>
</html>
Динамическое изменение цвета фона ячеек
Использование стилей и управление ими с помощью JavaScript позволяет менять вид ячейки "на ходу", при выполнении определенных условий, таких как наведение курсора на ссылку или саму ячейку.
Рассмотрим самый простой прием - цвет фона ячейки меняется, когда курсор мыши наводится на нее. Наведение мыши на область отслеживается событием onMouseover, а вывод мыши за ее пределы - событием onMouseout. Поскольку цвет фона меняется у той же самой ячейки, на которую наводим курсор мыши, то изменение стиля делается с помощью метода this.style.background.
<table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center> <tr>
<td align=center bgcolor=#cccccc onMouseover="this.style.background='#ffcc33'" onMouseout="this.style.background='#cccccc'"><a href="#">Пункт 1</a></td>
<td align=center bgcolor=#cccccc><a href="#">Пункт 2</a></td> </tr>
</table>
1.7.Основы PHP
1.7.1.Общий обзор языка программирования PHP
На сегодняшний день PHP является наиболее распространенным языком веб-программирования. Подавляющие большинство сайтов и вебсервисов в интернете написано с помощью PHP. По некоторым оценкам PHP применяется более чем на 80% сайтов, среди которых такие сервисы, как facebook.com, vk.com, baidu.com и другие. И такая популярность неудивительна. Простота языка позволяет быстро и легко создавать сайты и порталы различной сложности.
PHP был создан в 1994 году датским программистом Расмусом Лердорфом и изначально представлял собой набор скриптов на другом языке Perl. Позже этот набор скриптов был переписан в интерпретатор на языке Си. И с самого возникновения PHP (сокращение от PHP: Hypertext Preprocessor - PHP: Препроцессор гипертекста) представлял удобный набор инструментов для упрощенного создания веб-сайтов и веб-приложений.
64