2179
.pdfПример наложения текста:
<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
Какие преимущества предоставляет PHP?
Для всех наиболее распространенных операционных системам (Windows, MacOS, Linux) есть свои версии пакетов разработки на PHP, а это значит, что вы можете создавать веб-сайты на любой из этих операционных систем.
PHP может работать в связке с различными веб-серверами: Apache, Nginx, IIS
Простота и легкость освоения. Как правило, уже имея небольшой опыт в программировании на PHP, можно создавать простенькие веб-сайты
PHP похож на язык Си, поэтому, зная Си или один из языков с сиподобным синтаксисом, будет проще овладеть PHP
PHP поддерживает работу с множеством систем баз данных (MySQL, MSSQL, Oracle, Postgre, MongoDB и другие)
Распространенность хостинговых услуг и их дешевизна. Так как, как правило, хостинговые компании размещают веб-сайты на PHP на вебсерверах Apache или Nginx, которые работают на одной из операционных систем семейства Linux. И веб-серверы, и операционные системы на базе Linux бесплатны, что снижает общую стоимость использования хостинга
Постоянное развитие. PHP продолжает развиваться, выходят все новые версии, которые несут новые функции, адаптируя язык программирования к новым вызовам. И, как правило, перейти на новую версию не составляет труда.
1.7.2. Переменные в PHP
Как и во многих языках программирования, в PHP есть переменные. Переменные хранят отдельные значения, которые можно использовать в выражениях на PHP. Для обозначения переменных используется знак доллара $. Например,
<?php $a = 10; echo $a; ?>
Здесь определена переменная, которая будет хранить число 10. Присвоение значения происходит с помощью знака равенства =.
Можно присваивать значение другой переменной:
$a = 10; $b=$a; echo $b;
65
PHP |
является |
регистрозависимым |
языком, |
а |
значит, |
|
переменные $counter и $Counter будут |
представлять |
две |
разные |
|||
переменные.
Также при наименовании переменных нам надо учитывать следующие правила:
Имена переменных должны начинаться с алфавитного символа или с подчеркивания
Имена переменных могут содержать только символы: a–z, A–Z, 0–9, и знак подчеркивания
Имена переменных не должны включать в себя пробелы
Проверка существования переменной. Оператор isset
Если переменная объявлена, но ей изначально не присвоено никакого значения (иначе говоря она не инициализирована), то нам будет проблематично ее использовать. Например:
<?php $a; echo $a; ?>
При попытке вывести значение переменной мы получим диагностическое сообщение о том, что переменная не определена: Notice: Undefined variable: a in C:\localhost\echo.php on line 3.
Оператор isset() позволяет определить, инициализирована ли переменная или нет. Если переменная определена, то isset()возвращает значение true. Если переменная не определена, то isset() возвращает false. Например:
<?php $a; if(isset($a)) echo $a; else
echo "переменная a не определена"; ?>
Для проверки переменной использовалась конструкция if...else, которая определяет истинность выражения. И если выражение истинно, тогда выполняется выражение после блока if. Если же выражение ложно (то есть равно false), выполняется выражение после блока else
Здесь переменная не инициализирована, поэтому оператор isset($a) будет возвращать значение false, и, следовательно, будет срабатывать блок else. Если бы мы присвоили переменной некоторое начальное значение, например, $a=20, то оператор isset возвратил бы значение true, и браузер вывел бы ее значение.
66
С помощью оператора unset() мы можем уничтожить переменную:
<?php $a=20;
echo $a; // 20 unset($a);
echo $a; // ошибка,переменная не определена
?>
1.7.3. Типы данных
PHP является языком с динамической типизацией. Это значит, что тип данных переменной выводится во время выполнения, и в отличии от ряда других языков программирования в PHP не надо указывать перед переменной тип данных.
PHP поддерживает восемь простых типа данных:
boolean (логический тип)
integer (целые числа)
double (дробные числа)
string (строки)
array (массивы)
object (объекты)
resource (ресурсы)
NULL
Integer (целочисленный тип)
Представляет целое число со знаком размером в 32 бита (от -2 147 483 648
до 2 147 483 647).
$int = -100; echo $int;
Здесь переменная $int представляет целочисленный тип, так как ей присваивается целочисленное значение.
Кроме десятичных целых чисел PHP обладает возможностью использовать также двоичные, восьмеричные и шестнадцатеричные числа. Шаблоны чисел для других систем:
шестнадцатеричные: 0[xX][0-9a-fA-F] восьмеричные: 0[0-7]
двоичные: 0b[01] Например:
<?php
// Все числа в десятичной системе имеют значение 28 $int_10 = 28; // десятичное число
$int_2 = 0b11100; // двоичное число
67
$int_8 = 034; // восьмеричное число $int_16 = 0x1C; // шестнадцатеричное число echo "int_10 = $int_10 <br>";
echo "int_2 = $int_2 <br>"; echo "int_8 = $int_8 <br>"; echo "int_16 = $int_16"; ?>
Тип double (числа с плавающей точкой)
Размер числа с плавающей точкой зависит от платформы. Максимально возможное значение, как правило, составляет ~1.8e308 с точностью около 14 десятичных цифр. Например:
<?php $a1 = 1.5;
$a2 = 1.3e4; // 1.3 * 10^4 $a3 = 6E-8; // 0.00000006
echo $a1 . " | " . $a2 . " | " . $a3; ?>
Тип boolean (логический тип) |
|
|
|
|
|
Переменные |
логического |
типа |
могут |
принимать |
два |
значения: true и false или, иначе |
говоря, истина и ложь. Чаще |
всего |
|||
логические значения используются в условных конструкциях: |
|
||||
<?php $foo = true; $a=10; $b=5;
echo "foo = true <br>"; if($foo)
echo $a+$b; else
echo $a-$b; $foo = false;
echo "<br> foo = false <br>"; if($foo)
echo $a+$b; else
echo $a-$b; ?>
Выражение if() проверяет истинность выражения. В данном случае проверяется значение переменной $foo. Или оно истинно или равно true, то выполняется следующее за оператором if выражение. А если переменная или выражение в операторе if равно false, то выполняется выражение после оператора else.
68
Специальное значение NULL
Значение NULL указывает, что значение переменной не определено. Использование данного значения полезно в тех случаях, когда мы хотим указать, что переменная не имеет значения. Например, если мы просто определим переменную без ее инициализации, и затем попробуем ее использовать, то нам интерпретатор выдаст диагностическое сообщение, что переменная не установлена:
<?php $a; echo $a; ?>
Использование значения NULL поможет избежать данной ситуации. Кроме того, мы сможем проверять наличие значения и в зависимости от результатов проверки производить те или иные действия:
<?php $a=NULL; if($a)
echo "Переменная a определена"; else
echo "Переменная a не определена"; ?>
Константа NULL не чувствительна к регистру, поэтому мы можем написать и так:
$a=null
Тип string (строки)
Для работы с текстом можно применять строки. Строки бывают двух типов: в двойных кавычках и одинарных. От типа кавычек зависит обработка строк интерпретатором. Так, переменные в двойных кавычках заменяются значениями, а переменные в одинарных кавычках остаются неизменными.
<?php $a=10; $b=5;
$result = "$a+$b <br>"; echo $result;
$result = '$a+$b'; echo $result;
69