Создание электронного пособия по web-дизайну
Обзор создания интерфейса учебного пособия для облегчения изучения языков верстки сайтов. Описания применения на практике примеров языка программирования JavaScript, создания фреймов и слоев. Анализ определения параметров кадров, оформления web-страниц.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | реферат |
| Язык | русский |
| Дата добавления | 27.09.2011 |
| Размер файла | 113,4 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Размещено на http://www.allbest.ru/
Министерство образования и науки РФ
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
ФГОУ СПО «Кунгурский сельскохозяйственный колледж»
Реферат
по дисциплине WEB - дизайн
Создание электронного пособия по web-дизайну
«Автоматизированные системы обработки информации и управления»
ИСПОЛНИТЕЛЬ: студент гр. А-492 Р.Ю.Сычёв
РУКОВОДИТЕЛЬ: А. Ю. Скорнякова
Кунгур 2009
Содержание
- Введение
- Глава 1. Создание интерфейса учебного пособия
- 1.1 Создание главной страницы
- 1.2 Создание меню
- Глава 2. Возможности пособия
- 2.1 Создание фреймов
- 2.2 Работа с CSS
- 2.3 Создание слоев
- 2.4 Дата и время
- 2.5 Слайд шоу
- 2.6 If и Else
- 2.7 Массивы: функция внутри функции
- Заключение
- Список использованных источников и литературы
Введение
Не задавались ли вы вопросом: как и с помощью чего созданы Web-страницы и мини-сайты?
В перечне самых актуальных задач стоит проблема недостаток информации и непонятность. Проблема огромного количества пользователей Интернета заключается в том, что они мечтают о создании своих собственных сайтах, но не имеют для этого определённого образования и навыков. Цель: создать проект, помогающий преодолеть трудности начинающих создателей сайтов.
В работе рассмотрены языки HTML и JavaScript, а так же принципы создания фреймов и их применение на практике.
Использование данного пособия может существенно облегчить процесс изучения языков верстки сайтов. Оно позволяет самостоятельно изучить выше указанные языки.
Задачи работы:
? разработать дизайн пособия;
? придумать и реализовать структуру для легкого освоения пособия;
? рассмотреть JavaScript и HTML на практике;
? апробировать Фреймовую структуру на web страницах.
Глава 1. Создание интерфейса учебного пособия
1.1 Создание главной страницы
- программирование учебный фрейм верстка
- Проект состоит из фрейм: меню, основной части и размещения рекламы.
- Главная страница представляет такую структуру:
- Размеры фрейм заданы в пикселях, которые закреплены для изменения, что позволяет сохранять на 80% вид на разных расширениях монитора.
- <frameset rows="*,57" frameborder="2" bordercolor=#000000>
- <frameset cols="240,*">
- <frame src="002.htm" name="fr1" scrolling="auto" noresize>
- <frameset rows="85,*">
- <frame src="001.htm" name="fr2" scrolling="no" noresize>
- <frame src="./gl/index.htm" name="fr3" scrolling="yes" noresize>
- </frameset>
- </frameset>
- <frame src="004.htm" name="fr4" scrolling="no" noresize>
- </frameset>
|
Меню |
||
|
Основная часть |
||
|
Место для рекламы |
1.2 Создание меню
Меню разделено на две части это: ссылка главной страницы, то, что использовалось при создании пособия и непосредственно JavaScript. Так же расположена ссылка гостевой комнаты.
<HEAD>
<TITLE>ABC</TITLE> <META HTTP-EQUIV="fr2" CONTENT="001.html; charset=windows-1251">
<link rel="stylesheet" href="style000.css" type="text/css">
</HEAD>
<body background="f6.gif">
<center>
<table width=100% border=0 align=center>
<tr>
<td width=200><center><H1>.:Содержание:.<H1><hr></td>
</tr><tr>
<td width=200><center><a href="./gl/index.htm" target="fr3"><h3>Главная</h3></font></a><center><hr></td>
</tr><tr>
<td width=200><center><a href="./gl/1.htm" target="fr3"><h3>Создание фрейм</h3></a></center><hr></td>
</tr> <tr>
<td width=200><center><a href="./gl/2.htm" target="fr3"><h3>Работа с CSS</h3></a></center><hr></td>
</tr><tr>
<td width=200><center><a href="./gl/7.htm" target="fr3"><h3>Слои</h3></a></center><hr></td>
</tr><tr>
<td width=200><center><h2>JavaScript:<h2></center><hr></td>
</tr><tr>
<td width=200><center><a href="./gl/3.htm" target="fr3"><h3>Дата и время</h3></a></center><hr></td>
</tr><tr>
<td width=200><center><a href="./gl/4.htm" target="fr3"><h3>Слайд-шоу</h3></a></center><hr></td>
</tr><tr>
<td width=200><center><a href="./gl/5.htm" target="fr3"><h3>If и Elset</h3></a></center><hr></td>
</tr><tr>
<td width=200><center><a href="./gl/6.htm" target="fr3"><h3>массивы:
функция внутри функции</h3></center></a>
</td><tr>
После списка меню расположена дата, сделанная на JavaScript.
<font size="4" color="Maroon"><h3><SCRIPT LANGUAGE="JavaScript">
Now = new Date();
var mpo = Now.getMonth();
var mpo1 = mpo + 1
document.write("Сегодня " + Now.getDate()+ "-"+ mpo1+ "-" + Now.getFullYear())
</SCRIPT></h3>
Для придания большего визуального эффекта был применен CSS стиль.
a:link {font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: bold;
color: #000000;
text-decoration: none;}
a:visited {font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: bold;
color: #000000;
text-decoration: none;}
a:active {font-family: "Times New Roman", Times, serif;
font-style:italic;
font-weight: bold;
color: #990000;
text-decoration:none;}
a:hover {font-family: "Times New Roman", Times, serif;
font-style:italic;
font-weight: bold;
color: #006600;
text-decoration:none;}
h1 {font-family: "Comic Sans MS";
font-size:30px;
text-align: center;
font-style: normal;
font-weight:bold;
color:#0C05F8;}
h2 {font-family: "Comic Sans MS";
font-size:25px;
text-align: center;
font-style: normal;
font-weight:bold;
color:#0C05F8;}
Глава 2. Возможности пособия
При создании данного интерфейса учитывалось простота в работе с пособием и применение примеров на практике языка программирования JavaScript, создания фреймов и слоев.
2.1 Создание фреймов
Один из способов выдать сразу несколько файлов HTML на экран пользователя - это открыть несколько окон браузера. Другой путь состоит в том, чтобы разбить окно на несколько разделов. Эти разделы называются фреймами.
Контейнер <FRAMESET>
Web-страница, которая разделена на фреймы, называется документом группы фреймов. Документы группы фреймов содержат стандартный заголовок, задаваемый тегом HEAD, но в отличии от стандартных HTML-документов, они не содержат тега BODY. Вместо него используется контейнер (т. е. парный тег) <FRAMESET>, который применяется для определения строк и столбцов отдельных фреймов, каждый из которых обозначается тегом <FRAME>.
Внутри контейнера <FRAMESET> ... </FRAMESET> могут располагаться только теги <FRAME> или другие контейнеры FRAMESET.
Определение параметров кадров
Тег <FRAMESET> имеет два главных атрибута: ROWS и COLS, задающих разбиение на строки и столбцы соответственно. Ниже приведен вид контейнера FRAMESET:
<FRAMESET ROWS="список_значений" COLS="список_значений"> ... </FRAMESET>
Можно определить любое число рядов и столбцов; необходимым условием является указание хотя бы одного из атрибутов ROWS или COLS.
Кадр не может быть единственным: если вы определили единственный ряд и единственный столбец, то программа просмотра проигнорирует контейнер FRAMESET, и экран останется пустым. Если определены по крайней мере два ряда или два столбца, другой атрибут может быть опущен (ему по умолчанию будет присвоено значение, равное 100%).
Значение атрибута ROWS или COLS представляет собой строку, содержащую список значений в пикселях, процентах или относительных единицах, разделенных запятыми. Количество рядов или столбцов кадров определяется числом этих значений.
Пример
Для задания сетки кадров из трех рядов, высота которых 100, 240 и 140 пикселов соответственно, используйте тег
<FRAMESET ROWS="100,240,140">
Задание высоты ряда в пикселях, однако, является плохим стилем, так как при этом не учитывается тот факт, что окна браузеров могут иметь самую разную величину. В абсолютных единицах стоит указывать размеры кадра лишь для размещения небольших изображений, в остальных же случаях лучше пользоваться относительными величинами.
Пример
Тег <FRAMESET ROWS="25%, 50%, 25%"> задаст три кадра, размером по 25%, 50% и 25% от высоты окна браузера.
Относительно точности указания размеров фреймов в процентах можно не беспокоиться: если сумма значений не равна 100%, то масштаб кадров будет пропорционально изменен.
Задание параметров кадров в относительных единицах выглядит примерно так:
<FRAMESET COLS="*,2*,3*">
Символ * обозначает пропорциональное деление окна программы просмотра. В данном примере окно будет разделено на три вертикальных кадра, первый из которых будет иметь ширину в 1/6, второй -- в 2/6 (или 1/3) и третий -- в 3/6 (или 1/2) от ширины окна браузера. Единица при указании относительных значений может быть опущена.
Указание значений атрибутов ROWS и COLS может быть и смешанным, включающим любое сочетание абсолютных размеров, процентных отношений и относительных значений, например, <FRAMESET COLS="100,25%,*,2*">
Здесь первому кадру присвоено абсолютное значение в 100 пикселов по ширине, второму - 25% от ширины окна. Оставшееся пространство делится между третьим и четвертым кадрами в пропорции 1 к 2.
Приоритеты в указаниях значений атрибутов таковы: в первую очередь (слева направо) отводится место для кадра с абсолютным значением, затем - для кадра со значением в процентах, и в последнюю очередь - для кадров с относительными величинами.
Если вы пользуетесь абсолютными величинами в атрибутах ROWS и COLS, не делайте такие кадры большими - ведь они должны поместиться в окно браузера любого размера. Совместно с такими кадрами для лучшей балансировки рекомендуется использовать хотя бы один кадр, определенный в процентах или в относительных величинах.
2.2 Работа с CSS
CSS (Cascading Style Sheets)
CSS применяется для оформления (форматирования) web- страниц.
Синтаксис: body {backround-color:#ff0000;}
Внедрение в HTML
Первый способ: In Line
<body style “backround-color:#ff0000;”></body>
Второй способ:
<style type="text/css"> body {backround-color:#ff0000;}
Третий способ: внешний
Самый распространенный.
Создание отдельного документа с расширением css
Ссылка web- страницы на css стиль: <link rel="stylesheet" type="text/css" href="style.css"/>
Работа со шрифтами:
Font-family
Пример:
H1{ font-family: “Times New Roman”, sans-serifi}
Получаем, что у всего текста с тегом h1 будет шрифт Times New Roman.
Размер шрифта:
Задается с помощью font-size.
H1{ font-size: 30px;}
H2{ font-size:12pt;}
H3{ font-size:120%;}
P{ font-size: lem;}
2.3 Создание слоев
Вот такой эффект можно получить, используя слои. Собственно, точно такого же эффекта можно достичь и одним из множества фильтров Ехплорера, но второе решение будет отображаться правильно только в самом Ехплорере.
Итак, что же из себя представляет слой?
Код слоя:
<div id="имя слоя" style="position: absolute; left:204px; top:143px; width:171px; height:62px; z-index:2">содержимое слоя</div>
id - это индивидуальное имя слоя, совпадать и повторяться оно не должно!style - это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста - без главных особенностей, присущих слоям - таких, как расположение поверх чего угодно.
left - расстояние от левого края: может быть как в пихелях, так и в процентах от общей ширины экрана.
top - расстояние от верха.
Ну, ширина и высота вам уже известны, их не упоминаю. z-index - значение может быть только цифрой. Причем, чем меньше эта цифра, тем выше находится слой по отношению к другим слоям.
Казалось бы, дизайн, построенный на слоях, намного удобнее и проще, чем дизайн на банальных таблицах, но есть нюансы, как положительные, так и отрицательные.
Дополнительные возможные теги: background-color: цвет фона layer-background-color: цвет слояborder: 1px none - если убрать "ноне", то вокруг слоя появится бордюрчик 1 пихель толщиной.
У слоев есть много других тегов, но, как правило, они все предназначены для использования наряду со скриптами, поэтому в них мы пока зарываться не будем, а изучим следующую тему: каскадные таблицы стилей, оно же - CSS.
2.4 Дата и время
Мы поговорим о семи методах объекта: getDay(), getDate(), getMonth(), getYear(), getHour(), getMinute(), и getSecond() (получить День, Число, Месяц, Год, Час, Минуту, Секунду). Все они уже существуют, их можно взять и поместить на страницу. Проблема в том, что это всего лишь методы. Для воздействия им нужен объект, а документ для этих целей не годится... так что придется самим придумывать новый объект.
<SCRIPT LANGUAGE="JavaScript">
//Скрипт отмечает точную дату и время вашего прибытия на страницу
Now = new Date();document.write("Сегодня " + Now.getDate()+ "-" + Now.getMonth() + "-" + Now.getFullYear() + ". Вы зашли на мою страницу ровно в: " + Now.getHours() + ":" + Now.getMinutes() + " и " + Now.getSeconds() + " секунд.")
</SCRIPT>
Используя этот код мы получим: Сегодня 19-1-2009. Вы зашли на мою страницу ровно в: 14:32 и 18 секунд.
Разбор скрипта
Не пугайтесь сразу, скоро все станет понятно. Позвольте, уж я снова напомню вам о четкой форме скрипта. Строка document.write уходит далеко за границы экрана. Эту форму необходимо сохранить, иначе ваш браузер выдаст сообщение об ошибке.
Посмотрите на скрипт. Видите, скрипту дается команда поместить в документ число, месяц, год, часы, минуты и секунды. Несколько дополнительных слов объясняют, на что вы смотрите.
Все это было создано с помощью метода get Что-либо(). Обратите внимание на заглавную букву. Сначала «g» в нижнем регистре, потом Заглавная буква.
Во-первых, помните, что все это цифры. Даже метод getDay(), который отвечает за день недели, выражается цифрой от единицы до семи.
Начнем с месяца. Как уже говорилось раньше, getMonth() -- это метод, отвечающий за месяц. Теперь задумаемся о том, на какой объект воздействует метод getMonth().
Может показаться, что get Что-либо() -- это метод объекта document. Вовсе нет. Метод документа -- write. getMonth() на самом деле является методом объекта Date. Взгляните на скрипт еще раз. Date занимает отдельное место в команде: Now = new Date();
Оставим только строку c датой. Вот как это выглядит:
document.write("Сегодня " + Now.getDate() + "-" + Now.getMonth() + "-" + Now.getFullYear() + ". Вы зашли на страницу ровно в: " + Now.getHours() + ":" + Now.getMinutes() + " и " + Now.getSeconds() + " секунд.")
2.5 Слайд шоу
Посмотрите на скрипт и попробуйте сами разобраться, как и что он делает. А лучше всего постарайтесь изменить его. В сегодняшнем примере пользователь щелкает по ссылке и переходит к следующей картинке. Мы воспользуемся командой If и переменной num. Ничего нового? Не совсем!
<SCRIPT LANGUAGE="JavaScript"> var num=1 img1 = new Image () img1.src = "leo.gif" img2 = new Image () img2.src = "dino.gif" img3 = new Image () img3.src = "rhino.gif" function slideshow() {num=num+1 if (num==4) {num=1}document.animal.src=eval("img"+num+".src") }</SCRIPT></HEAD><BODY><CENTER><IMG SRC="leo.gif" NAME="animal" BORDER=0><p><A HREF="JavaScript:slideshow()"> Щелкните, чтобы увидеть следующую картинку</A></CENTER></BODY>Разбор скрипта
Разобьем его на две части:
<SCRIPT LANGUAGE="javascript"> var num=1 img1 = new Image () img1.src = "leo.gif" img2 = new Image () img2.src = "dino.gif" img3 = new Image () img3.src = "rhino.gif"
· Вот кое-что новое! num=1 не находится внутри функции. Да и вообще ни одна команда не находится внутри функции. num -- это переменная. Указывая ее в начале скрипта вне функции, мы делаем ее глобальной переменной, то есть доступной для любой функции.
· img1 = new Image() объявляет новый объект image (рисунок). img1.src= источник объекта, файл, в котором хранится картинка. Это стандартная схема. img1 хранится в leo.gif ; img2 хранится в dino.gif.
· (В скобках) содержится информация о ширине и высоте рисунка. Это не обязательно, но желательно.
· Рисунки тоже доступны для любой функции. Таким образом, программа загружает рисунки в память компьютера. Для следующего примера это будет еще важнее. Пользователь не хочет ждать, пока каждая картинка будет загружаться с сервера.
Теперь часть №2
function slideshow(){num=num+1if (num==4) {num=1}document.animal.src=eval("img"+num+".src")}</script></head><body>
· Первоначальное значение num равно 1. Это было еще в первом фрагменте. Когда пользователь щелкает по строчке текста, запускается функция slideshow.
· slideshow() прибавляет к num единицу. Когда num доходит до 4, то возвращается к 1. document.animal.src меняется на img плюс значение num и плюс .src. Например, если num = 1, то document.animal.src становится img1.src.
· Обратите внимание, что команда eval() преобразует img1.src в указание на источник изображения. Без нее это был бы простой набор букв.
И наконец:
<a href="JavaScript:slideshow()">Щелкните, чтобы увидеть следующую картинку</a>
2.6 If и Else
If/Else (если/иначе) дают вам дополнительный контроль над программой, позволяя принимать решения на оба случая: и когда условие выполнено, и когда не выполнено.
<SCRIPT LANGUAGE="JavaScript">function rand() {now=new Date() num=(now.getSeconds())%10 num=num+1}function guessnum() {guess=prompt("Угадай, какое?") if (eval(guess) == num) {alert("ПРАВИЛЬНО!!!") rand()} else alert("Нет. Попробуй еще раз.") } </SCRIPT><BODY onLoad="rand()"> <h3>Я загадал число от 1 до 10</h3> <FORM NAME="myform"> <INPUT TYPE="button" VALUE="Угадай" NAME="b1" onClick="guessnum()"> </FORM>
Разбор скрипта
· Начнем со строки BODY:
<body bgcolor="хххххх" onLoad="rand()">
На этот раз функция запускается не кнопкой через onClick, а командой onLoad, чтобы к тому времени, когда пользователь нажмет на кнопку, число уже было выбрано. Если сделать это, как в прошлом уроке, то каждый раз, нажимая на кнопку, вы будете получать новое число. А оно должно оставаться одним и тем же, пока вы гадаете.
· Первая функция:
function rand() {now=new Date()num=(now.getSeconds())%10num=num+1}
Функция выбирает наугад число от 0 до 9 и привязывает его к num.
· Вторая функция:
function guessnum() {guess=prompt("Угадай, какое?") if (eval(guess) == num) {alert("ПРАВИЛЬНО!!!") rand()} else alert("Нет. Попробуй еще раз.")}
В памяти компьютера уже есть число, полученное через первую функцию. Вторая дает вам возможность угадать его.
2.7 Массивы: функция внутри функции
Вы уже узнали о переменных. Каждая переменная имеет одно значение, но иногда вам необходим массив (array), или переменная, которая имеет множество значений.
В этом примере программа просит пользователя угадать телевизионный канал из перечня телеканалов. Запрос повторяется до тех пор, пока пользователь не угадает. Каждый раз при нажатии кнопки выбирается новый телеканал.
Скрипт
<HTML><HEAD><SCRIPT LANGUAGE="JavaScript"> tv=new Array() tv[0]="ОРТ" tv[1]="РТР" tv[2]="ТВЦ" tv[3]="НТВ" tv[4]="ТВ6" num=0function picktv() {ow=new Date() num=(now.getSeconds())%5}function whichtv(){picktv()guess=" "while (tv[num] != guess.toUpperCase()){guess=prompt("Угадайте мой любимый телеканал: ОРТ, РТР, ТВЦ, НТВ или ТВ6?") if (guess.toUpperCase() == tv[num]) {alert("Это мой любимый телеканал!")} else {alert("Нет, попробуйте еще раз.")}} }</SCRIPT> </HEAD><BODY><FORM><INPUT TYPE="button" VALUE="Угадайте" onClick="whichtv()"></FORM></BODY></HTML>
Разбор скрипта
<SCRIPT LANGUAGE="JavaScript"> tv=new Array() tv[0]="ОРТ" tv[1]="РТР" tv[2]="ТВЦ" tv[3]="НТВ" tv[4]="ТВ6" num=0
· tv=new Array() объявляет, что tv представляет собой массив. С пустыми (скобками) массив может быть какой угодно длины. Можно также указать длину массива, например, tv=new Array(5).
· Помните, что массив array может иметь множество значений. Можно представить себе массив в виде таблицы:
|
tv[0] |
tv[1] |
tv[2] |
tv[3] |
tv[4] |
|
|
ОРТ |
РТР |
ТВЦ |
НТВ |
ТВ6 |
· Обратите внимание, мы заранее указываем переменную num, у которой одно значение, равное 0, и массив tv, который имеет 5 значений.
· Теперь функция picktv():
function picktv() {now=new Date() num=(now.getSeconds())%5}
· Функция picktv() наугад выбирает число от 0 до 4, которое становится индексом tv. Помните, от нуля до четырех ПЯТЬ чисел. То есть если num равно 2, то любимый телеканал -- tv[2], или ТВЦ.
· Теперь функции whichtv() и picktv():
function whichtv(){picktv()guess=" "while (tv[num] != guess.toUpperCase()){guess=prompt("Угадайте мой любимый телеканал: ОРТ, РТР, ТВЦ, НТВ или ТВ6?") if (guess.toUpperCase() == tv[num]) {alert("Это мой любимый телеканал!")} else {alert("Нет, попробуйте еще раз.")}}}
· Вот кое-что новенькое! Видите, первым делом функция вызывает другую функцию, picktv(). Таким образом, когда бы вы ни нажали на кнопку, будет выбираться новый телеканал.
· Строка while (tv[num] != guess.toUpperCase()). Метод или действие toUpperCase() (в верхний регистр) используется для перевода всего, что бы вы ни напечатали, в верхний регистр.
· Программа повторяет цикл While, пока пользователь не угадает правильный телеканал. Фрагмент с циклом While уже должен казаться вам вполне знакомым.
· Обратите внимание на If и Else. В игре возможны только два результата: либо вы правы, либо ошибаетесь.
· Теперь кнопка, которая все это запускает:
<FORM><INPUT TYPE="button" VALUE="Угадай" onClick="whichtv()"></FORM>
Тут ничего нового.
Заключение
В процессе написания работы получены следующие результаты:
? разработан дизайн пособия;
? рассмотрено разнообразие JavaScript на практике.
В итоге обработанная информация вылилась в Web - сайт. Его особенностью является то, что в нем используется профессиональный и молодежный сленг юмор, который предназначен для вовлечения молодых в среду программирования.
Данное электронное пособие поможет сэкономить время и финансы, так как дает возможность получить интересную информацию, не прибегая к большому количеству различных и дорогих источников.
Список использованных источников и литературы
Литература
Дунаев, В.В. Основы Web-дизайна. Самоучитель / В.В. Дунаев - СПб.: БХВ-Петербург, 2007 - 512 с.
Залогова, Л.А. Компьютерная графика. Учебное пособие. 2-е издание / Л.А. Залогова - М.: БИНОМ, лаборатория знаний, 2006 - 212 с.
Иванов Е. Структурный маневр // Вопросы экономики. - 2002. №10. С. 4-30.
Официальные сайты Интернет
4. Государственный комитет РФ по статистике - www.gks.ru
Размещено на Allbest.ru
Подобные документы
Развитие и классификация языков программирования. Методические рекомендации по изучению языков программирования. Основные понятия объектно-ориентированного программирования. Создание электронного учебного пособия с помощью языка гипертекстовой разметки.
курсовая работа [331,1 K], добавлен 06.09.2011Исследование особенностей объектно-ориентированной среды программирования Borland Delphi. Описание процесса создания электронного пособия для изучения студентами и применения на уроках преподавателями. Характеристика технических и программных средств.
дипломная работа [2,3 M], добавлен 10.06.2012Особенности электронных учебных пособий и основные принципы их создания. Сбор и подготовка исходного материала для электронного учебного пособия. Разработка структуры электронного пособия. Выбор программ и разработка интерфейса электронного учебника.
дипломная работа [738,5 K], добавлен 27.06.2012Изучение литературы по использованию гипертекста и мультимедиа в образовании. Анализ структуры и содержания образовательных программных средств. Обзор создания пособия на основе языка программирования Delphi с использованием гипертекстовых технологий.
дипломная работа [703,2 K], добавлен 10.03.2012Рассмотрение понятия, принципов построения (гиперактивность, мультимедийность), структуры, особенностей подготовки и реализации электронного учебного пособия. Подбор наглядного и справочного материала и их связь с текстом при помощи гиперссылок.
курсовая работа [49,1 K], добавлен 18.06.2010Интернет-технологии в образовании, основные аспекты и принципы их применения на современном этапе. Этапы создания электронного пособия, его внутренняя структура, предъявляемые требования и технологическое обеспечение. Листинг разработанного кода.
дипломная работа [1,4 M], добавлен 03.01.2014Функциональное назначение и структура электронного учебника. Особенности его верстки. Элементы интерфейса. Психолого-педагогические аспекты представления образовательного контента в ЭУ. Выбор дизайн-эргономических решений. Программная реализация пособия.
дипломная работа [2,5 M], добавлен 16.02.2015Построение, исследование описательных и формальных информационных моделей. Применение электронных обучающих средств в современной системе образования. Обусловленность выбора средств разработки и языков программирования. Обзор пользовательского интерфейса.
дипломная работа [7,3 M], добавлен 09.02.2017Основные положения и классификация электронных учебных материалов. Использование информационных технологий в создании и применении обучающих систем. Разработка компьютерного учебного пособия, его интерфейса. Обоснование выбора языка программирования.
курсовая работа [63,9 K], добавлен 13.02.2009Практическая значимость создания сайта. Язык программирования JavaScript. Основные области использования языка JavaScript при создании интерактивных HTML-страниц. Язык программирования PHP. Программная основа сайта. Создание оформления дизайна сайта.
дипломная работа [1,1 M], добавлен 05.03.2013
