Создание электронного пособия по web-дизайну

Автор работы: Пользователь скрыл имя, 23 Сентября 2011 в 15:09, курсовая работа

Описание работы

Задачи курсовой работы:

разработать дизайн пособия;
придумать и реализовать структуру для легкого освоения пособия;
рассмотреть JavaScript и HTML на практике;
апробировать Фреймовую структуру на web страницах.

Содержание работы

Введение 3
Глава 1. Создание интерфейса учебного пособия 4
1.1. Создание главной страницы 4
1.2. Создание меню 4
Глава 2. Возможности пособия 8
2.1. Создание фреймов 8
2.2. Работа с CSS 11
2.3. Создание слоев 12
2.4. Дата и время 13
2.5. Слайд шоу 14
2.6. If и Else 17
2.7. Массивы: функция внутри функции 19
Заключение 22
Список использованных источников и литературы 23

Скачать архив (46.00 Кб) Сколько стоит заказать работу?

Файлы: 1 файл

Курсовая.doc

— 184.00 Кб (Скачать файл)

Приоритеты в указаниях значений атрибутов таковы: в первую очередь (слева направо) отводится место для кадра с абсолютным значением, затем – для кадра со значением в процентах, и в последнюю очередь – для кадров с относительными величинами.

Если вы пользуетесь абсолютными величинами в атрибутах ROWS и COLS, не делайте такие кадры большими – ведь они должны поместиться в окно браузера любого размера. Совместно с такими кадрами для лучшей балансировки рекомендуется использовать хотя бы один кадр, определенный в процентах или в относительных величинах.

2.2. Работа с CSS

CSS (Cascading Style Sheets)

CSS применяется для оформления (форматирования) web- страниц.

Синтаксис: body {backround-color:#ff0000;}

Внедрение в HTML

Первый способ: In Line

Второй способ:

Третий способ: внешний

Самый распространенный.

Создание отдельного документа с расширением 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() (получитьДень, Число, Месяц, Год, Час, Минуту, Секунду). Все они уже существуют, их можно взять и поместить на страницу. Проблема в том, что это всего лишь методы. Для воздействия им нужен объект, а документ для этих целей не годится... так что придется самим придумывать новый объект.

//Скрипт отмечает точную дату и время вашего прибытия на страницу

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+1
if (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:

На этот раз функция запускается не кнопкой через 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

Информация о работе Создание электронного пособия по web-дизайну