Создание электронного пособия по web-дизайну
Министерство образования и науки РФ
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
ФГОУ
СПО «Кунгурский
сельскохозяйственный
колледж»
КУРСОВАЯ РАБОТА
по дисциплине WEB - дизайн
Создание
электронного пособия
по web-дизайну
230103
«Автоматизированные
системы обработки информации
и управления»
ИСПОЛНИТЕЛЬ:
студент гр. А-492 Р.Ю.Сычёв
РУКОВОДИТЕЛЬ:
преподаватель
информационных дисциплин
А. Ю. Скорнякова
Кунгур 2009
Содержание
Введение
Не задавались ли вы вопросом: как и с помощью чего созданы 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>.:
</tr><tr>
<td width=200><center><a href="./gl/index.htm"
target="fr3"><h3>Главная</h3><
</tr><tr>
<td width=200><center><a href="./gl/1.htm"
target="fr3"><h3>Создание фрейм</h3></a></center><hr></
</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>
</tr><tr>
<td width=200><center><h2>
</tr><tr>
<td width=200><center><a href="./gl/3.htm"
target="fr3"><h3>Дата и время</h3></a></center><hr></
</tr><tr>
<td width=200><center><a href="./gl/4.htm"
target="fr3"><h3>Слайд-шоу</
</tr><tr>
<td width=200><center><a href="./gl/5.htm"
target="fr3"><h3>If и Elset</h3></a></center><hr></
</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-страница,
которая разделена на фреймы,
называется документом группы
фреймов. Документы группы
Внутри контейнера <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;”></
Второй способ:
<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. Слайд шоу
Посмотрите
на скрипт и попробуйте сами разобраться,
как и что он делает. А лучше
всего постарайтесь изменить его. В
сегодняшнем примере
<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"
</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+1
if (num==4)
{num=1}
document.animal.src=eval("img"
</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()">
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())%10
num=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=0
function 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