Технологии разработки web приложений

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

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

Ни кому не секрет, что интернет стал для нас второй реальностью, в которой мы проводим большее количество своего свободного времени. Каждый делает это по-разному, кто-то зависает в социальных сетях (Facebook, ВКонтакте, Одноклассники), кто-то заядлый блоггер и постоянно пишет целые статьи или же просто описывает события, которые с ним произошли в таких блогах как Live Journal, Twitter и другие.

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

Введение 3

История развития html 4

Описание html. Примеры. 8

Теги 8

Структура HTML страниц 9

Каскадные таблицы стилей 11

История развития java script. 12

Практическая часть 15

Создание сайта на простом html. 15

Описываем каскадные таблицы стилей (CSS) 18

Добавление javascript 20

Заключение 23

Приложение

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

Файлы: 1 файл

Технологии разработки web приложений.docx

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

А в файле style.css убрать строчку с атрибутом opacity и получаем следующее:

Как видите выбор языка переместился в правый верхний угол и сменил цвет на менее заметный.

Так же пункты меню «работы» и «контакты» выровнялись по центру и по бокам от логотипа. При наведении указателя на пункт меню, пункт меня цвет фона на черный, а цвет шрифта на белый.

Добавление javascript

Для анимации на сайте будем использовать библиотеку скриптов JQuery. Для ее подключения потребуется открыть в блокноте файл index.html и добавить внутрь тега <head> строчку:

И тут же после этого подключить файл, где мы будем описывать непосредственно скрипты сайта:

После это можем приступить к написанию анимации пунктов меню.

Возьмем уже написанный код и взглянем на него:

$(document).ready(function(){

// проверяем готовность документа. Все ли загружено.

$("body").animate({opacity: 1},3000);

// анимируем появление содержимого тега body. Так как в css мы написали что прозрачность равна 0, то теперь ставим значение 1 и проявляться содержимое будет 3000 миллисекунд(3 секунды).

$("#works").click(function(){

// ловим событие клика по пункту «работы» и начинаем выполнять следующие действия.

$("#content").hide(0);

//тег div с id content скрываем за 0 секунд.

$("#content").animate({top: "-1000px"},0);

//далее подымаем его плавно в позицию -1000px от верхней границы.

$("#content").show(0);

// описываем появление контента за 0 секунд

$("#content").load('../works.html');

// загружаем в него содержимоей файла works.html где содержатся непосредственно разработанные сайты

$("#logo2").animate({

// анимируем логотип

top: "-120px"

// подымаем его немного вверх

}, 600 );

// в течении 600 миллисекунд

$("#logo2").animate({

top: "-40px"

// теперь опускаем

}, 500 );

// слегка быстрее

$("#logo2").animate({

top: "-30px"

}, 500 );

$("#works").animate({

left: "-20px", opacity: 0.5

}, 1000 );

// пункт работы перемещаем вправо, ближе к центру

$("#works").animate({

left: "-80px"

}, 500 );

$("#works").animate({

left: "-60px"

}, 800 );

// выше описали эффект резинки.

$("#contacts").animate({

left: "10px", opacity: 1

}, 1000 );

$("#contacts").animate({

left: "70px"

}, 500 );

$("#contacts").animate({

left: "50px"

}, 1000 );

// аналогично передвигаем пункт контакты влево

$("#content").css('display', 'block');

$("#content").animate({

top: "50px"

}, 1000 );

$("#content").animate({

top: "-20px"

}, 500 );

$("#content").animate({

top: "0px"

}, 500 );

// играемся с контентом, делаем его появление интересным.

});

// далее аналогично описываем действия при клике на пункт «контакты»

Смотри приложение 2.

Так вот с помощью несложных команд и библиотеки jquery мы создали простую анимацию элементов страницы.

На этом закончим.

Заключение

В этой курсовой работе я показал вам возможность создания web приложений с помощью HTML, CSS и java script. Основные знания этих технологий позволят вам создавать сайты как для себя, так и для других людей… чето не пишецо…

Приложение

Приложение 1.

#lang{

position: absolute;

margin-right: 5px;

height: 20px;

right: 5px;

top: 10px;

color: #cccccc;

text-decoration: underline;

font-size: 16px;

}

#lang a{color: #aaaaaa;}

#logo{

position: relative;

top: 150px;

width: 600px;

height: 300px;

}

#logo EMBED{z-index: -1;}

#content {

padding: 10px;

text-align: center;

border: 1px solid #999999;

width: 650px;

margin-top: 60px;

font-family:Georgia;

font-size: 14px;

color: #111111;

background: url(../images/bg_body.png) repeat-x bottom fixed;

box-shadow: 0px 0px 10px #aaaaaa;

-moz-box-shadow: 0px 0px 10px #aaaaaa;

-webkit-box-shadow: 0px 0px 10px #aaaaaa;

}

#content #contacts{

color: #000000;

border-bottom: 2px dashed #000000;

font-weight: bold;

text-align: center;

}

#content a{color: #000000;}

#content a:hover{color: #333333;}

#works{

position: relative;

left: -350px;

top: 350px;

width: 100px;

z-index: 1;

cursor: pointer;

font-size: 24px;

}

#works:hover{

color: white;

background: black;

text-decoration: underline;

}

#contacts{

position: relative;

left: 350px;

top: -33px;

width: 130px;

cursor: pointer;

font-size: 24px;

}

#contacts:hover{

color: white;

background: black;

text-decoration: underline;

}

#content{

position: relative;

left: -10px;

top: -1000px;

display: none;

}

Приложение 2.

$("#contacts").click(function(){

$("#content").hide(0);

$("#content").animate({top: "-1000px"},0);

$("#content").show(0); $("#content").load('../contacts.html');

$("#logo2").animate({

top: "-120px"

}, 600 );

$("#logo2").animate({

top: "-40px"

}, 500 );

$("#logo2").animate({

top: "-30px"

}, 500 );

$("#works").animate({

left: "-20px", opacity: 1

}, 1000 );

$("#works").animate({

left: "-80px"

}, 500 );

$("#works").animate({

left: "-50px"

}, 800 );

Информация о работе Технологии разработки web приложений