Разработка структуры и содержания цифрового образовательного ресурса "Основы веб-программирования"

Автор работы: Пользователь скрыл имя, 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/strict.dtd">

<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/strict.dtd">

<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/strict.dtd">

<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 программы:

  1. Браузер
  2. Denwer - локальный сервер, который будет обрабатывать PHP код, так как браузер не обрабатывает PHP код
  3. Блокнот - для создания и изменения кода, или же можно использовать программу 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 код. Использование синтаксиса heredoc


<?php  
echo <<<END 
<p>Для отображения большого <br> количества текста используют  
синтаксис heredoc</p>  
END; 
?>

Отображение в браузере

Для отображения большого  
количества текста используют синтаксис heredoc

 

4.3. Переменные в PHP

PHP создан  не только для форматирования  статичного текста. Для того, чтобы  обрабатывать различные данные  были придуманы переменные. Переменная - контейнер c данными. Каждая переменная содержит определенное значение.  
Синтаксис переменной состоит из знака доллара - $ и "свободного" идентификатора которому присваивается какое-нибуть значение. Например:

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 и statement 2 могут быть условными, что позволяет организовывать цепочки проверок любой глубины вложенности. И в этих цепочках каждый условный оператор может быть как полным, так и сокращенным. В связи с этим возможны ошибки неоднозначного сопоставления if и else.

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

<?

   $x = 1;

   $y = 1;

   if($x == 1)

   if($y == 1)echo("x=1 and y=1");

   else echo("x!=1");

?>

При х равном 1 и у равном 1 совершенно справедливо печатается фраза «х = 1 and у = 1». Однако фраза «х != 1» может быть напечатана при х равном 1 и при у не равном 1, так как else соответствует ближайшему if. Внешний условный оператор, где проверяется $x == 1, является сокращенным и в качестве statement 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 оператор elseопределяет, что нужно делать, если никакие другие условия не являются true. Однако, вообще говоря, использование оператора elseifдовольно сильно ухудшает читабельность кода, и лучше в этом случае пользоваться переключателем (switch).

РНР предоставляет также возможность альтернативного синтаксиса условного оператора – без фигурных скобок, а с применением оператора 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;

?>

Результат выполнения скрипта:

Форма запроса

 

Результат выполнения скрипта

Информация о работе Разработка структуры и содержания цифрового образовательного ресурса "Основы веб-программирования"