Разработка структуры и содержания цифрового образовательного ресурса "Основы веб-программирования"
Автор работы: Пользователь скрыл имя, 24 Мая 2015 в 12:58, курсовая работа
Описание работы
Стремительное развитие информационного общества, проявление и широкое распространение технологий мультимедиа, электронных информационных ресурсов, сетевых технологий позволяют использовать информационные технологии (ИТ) в качестве средства обучения, общения, воспитания, интеграции в мировое пространство. Совокупность традиционных и информационных направлений внедрения информационной технологии создает предпосылки для реализации новой интегрированной концепции применения ИТ в образовании.
Файлы: 1 файл
!Курсовая веб-программирование.docx
— 264.09 Кб (Скачать файл)H1 {
color: navy;
font-size: 200%;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}
P {
padding-left: 20px;
}
Как видно из данного
примера, файл со стилем не хранит никаких
данных, кроме синтаксиса CSS. В свою очередь
и HTML-документ содержит только ссылку на файл
со стилем, т.е. таким способом в полной
мере реализуется принцип разделения
содержимого и оформления сайта. Поэтому
использование таблицы связанных стилей
является наиболее универсальным и удобным
методом добавления стиля на сайт. Ведь
стили хранятся в одном файле, а в HTML-документах
указывается только ссылка на него.
Таблица глобальных стилей
При использовании
таблицы глобальных стилей свойства CSS описываются
в самом документе и обычно располагаются
в заголовке веб-страницы. По своей гибкости
и возможностям этот способ добавления
стиля уступает предыдущему, но также позволяет
размещать все стили в одном месте. В данном
случае, прямо в теле документа, с помощью
контейнера <STYLE>, как показано в примере
3.
Пример 3. Использование таблицы
глобальных стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Глобальные стили</title>
<style type="text/css">
H1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
В данном примере определен
стиль тега <H1>, который затем можно
повсеместно использовать на данной веб-странице.
Замечание
Таблица глобальных
стилей может размещаться не только внутри
контейнера <HEAD>, но также в любом месте
кода HTML-документа.
Таблица внутренних стилей
Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей, пример 4.
Пример 4. Использование внутренних стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Внутренние стили</title>
</head>
<body>
<h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336">Заголовок</h1>
</body>
</html>
В данном примере стиль
тега <H1> задается с помощью параметра
style, в котором через точку с запятой перечисляются
стилевые атрибуты.
Замечание
Внутренние стили рекомендуется
применять на сайте ограниченно или вообще
отказаться от их использования. Дело в том,
что добавление таких стилей увеличивает
общий объем файлов, что ведет к повышению
времени их загрузки в браузере, и усложняет
редактирование документов для разработчиков.
Все описанные методы
использования CSS могут применяться как самостоятельно,
так и в сочетании друг с другом. В этом случае
необходимо помнить об их иерархии. Первым
всегда применяется внутренний стиль,
затем таблица глобальных стилей и в последнюю
очередь таблица связанных стилей. В примере
5 применяется сразу два метода добавления
таблиц стилей в документ.
Пример 5. Сочетание разных методов
подключения стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Подключение стиля</title>
<style type="text/css">
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
</style>
</head>
<body>
<h1 style="font-size: 36px; font-family: Times, serif; color: red">Заголовок
1</h1>
<h1>Заголовок 2</h1>
</body>
</html>
В данном примере первый
заголовок задается красным цветом размером
36 пикселов с помощью внутреннего стиля,
а следующий — зеленым цветом через таблицу
глобальных стилей.
Глава 4. Язык PHP
4.1. Начало работы с PHP
Для изучения PHP нужно 3 программы:
- Браузер
- Denwer - локальный сервер, который будет обрабатывать PHP код, так как браузер не обрабатывает PHP код
- Блокнот - для создания и изменения кода, или же можно использовать программу NotePad++, эта программа полезна тем, что в ней подсвечивается PHP и легче ориентироваться в коде.
4.2. Вывод текста на экран.
Оператор echo
Когда нужно отобразить текст на веб-странице, то оператор echo является наиболее употребляемым оператором в PHP. Как его иcпользовать - после слова echo нужно поместить строку текста в кавычки:
PHP код. Использование оператора echo
<?php echo 'Привет от PHP'; ?>
Отображение в браузере
Привет от PHP
Для отображения текста можно использовать как двойные кавычки, так и одинарные. Для чисел кавычки можно не использовать:
PHP код. Использование оператора echo д
<?php echo 2011; ?>
Оператор echo также может участвовать в форматировании веб-страницы:
PHP код. Использование оператора echo п
<?php echo 'Петров Иван<br>Родился<br> ...'; ?>
Отображение в браузере
Петров Иван
Родился
...
Синтаксис HEREDOC
Для отображения большого количества текста используют т.н. синтаксис heredoc. Он начинается с символов <<<, после которых может быть записан произвольный идентификатор. После располагаемого текста стоит указать тот самый идентификатор, что и в начале кода:
PHP код. Использование синтаксиса hered
<?php
echo <<<END
<p>Для отображения большого <br> количества
текста используют
синтаксис heredoc</p>
END;
?>
Отображение в браузере
Для отображения большого
количества текста используют синтаксис
heredoc
4.3. Переменные в PHP
PHP создан
не только для форматирования
статичного текста. Для того, чтобы
обрабатывать различные данные
были придуманы переменные. Пер
Синтаксис переменной состоит из знака
доллара - $ и "свободного"
идентификатора которому присваивается
какое-нибуть значение. Например:
PHP код. Запись переменной.
<?php
$name = "Виктор";
?>
Имя (идентификатор) не может начинаться с цифр, пробела.
Создание переменной
Переменная создается тогда, когда ей присваивают какое-нибуть значение. Для присвоения значения переменной используют "оператор присвоения", который состоит из знака равенства("="). Например:
PHP код. Создание переменной.
<?php
$surname = "Vukojevic";
$number = 1269794645;
$pi = 3.14159265;
$hello = "Hello all peoples";
?>
Переменную можно вывести на экран с помощью оператора echo, вот так:
PHP код. Вывод переменной.
<?php
$name = " Виктор";
echo "Ваше имя", $name, "<br>";
?>
Отображение в браузере
Ваше имя Виктор
Теперь давайте создадим переменyую которая будет содержать значение количества бананов, вторая переменная количество лимонов, а третья - их суммарное количество.
PHP код. Вывод переменной.
<?php
$bann = "5"; // Бананы
$lim = "10"; // Лимоны
$together = $bann + $lim; // Всего
echo "Количество фруктов", $together;
?>
Отображение в браузере
Количество фруктов 15
Как вы видите в третей переменной мы сами ничего не слаживали, за нас это сделал PHP.
4.4. Условный оператор IF в PHP
Во всех высокоуровневых языках программирования есть оператор IF, в PHP синтаксис этого оператора такой:
if (exp)
statement
exp - логическое выражение, которое
может быть Истиной (TRUE) или Ложью (FALSE).
Например, выражение 100 > 1 Истина.
Оператор statement выполняется тогда, когда exp Истина, и не выполняется когда exp Ложь !
Например, если скорость машины будет больше 60 то это значит, что водитель превышает скорость:
PHP код. Условный оператор IF.
<?php
$speed = 80;
if ($speed > 60)
echo "Превышение скорости !";
?>
Если нужно чтобы при выполнении условия выполнялись сразу несколько операторов, то нужно заключить их в фигурные скобки (" { } "):
PHP код. Условный оператор IF.
<?php
$speed = 80;
if ($speed > 60)
{ // Начало
echo "Превышение скорости ! <br>";
echo "Пожалуйста уменьшите скорость !";
} // Конец
?>
Отображение в браузере:
Превышение скорости !
Пожалуйста уменьшите скорость !
4.5. Множественный выбор
Оператор выбора if...else
К операторам выбора относят: условный
оператор (if...else) и переключатель (switch). Синтаксис условного оператора:
if(condition) statement 1 else statement 2
Условие condition может быть любым выражением. Если оно истинно, то выполняется оператор statement 1. В противном случае выполняется оператор statement 2. Допустима сокращенная форма записи условного оператора, в которой отсутствуют else и оператор statement 2.
В свою очередь, операторы statement 1 и statem
Синтаксис языка предполагает, что при вложенных условных операторах каждое else соответствует ближайшему if. В качестве такого ошибочного примера можно привести следующую конструкцию :
<?
$x = 1;
$y = 1;
if($x == 1)
if($y == 1)echo("x=1 and y=1");
else echo("x!=1");
?>
При х равном 1 и у равном 1
<?
$x = 1;
$y = 1;
if($x==1)
{
if($y==1)echo("x=1 and y=1");
}
else echo("x!=1");
?>
Заметим, что проверка дополнительных
условий возможна при помощи оператора elseif. Оператор if может включать сколько угодно
блоков elseif, но else в каждом if может быть только один. Как
правило, в конструкциях if…elseif…else оп
РНР предоставляет также возможность альтернативного синтаксиса условного оператора – без фигурных скобок, а с применением оператора endif. В следующем примере первая таблица помещается на страницу, если только $_GET['HDD'] равно "Maxtor", а вторая - если "Seagate". Наличие оператора endif в этом случае обязательно, так как фигурная скобка, обозначающая конец блока if, отсутствует:
<?
if($_GET['HDD'] == "Maxtor"):
?>
<table>
<caption> Maxtor </caption>
</table>
<?
elseif($_GET['HDD'] == "Seagate"):
?>
<table>
<caption> Seagate </caption>
</table>
<?
endif;
?>
Результат выполнения скрипта:
Форма запроса |
Результат выполнения скрипта |