97079

Создание WEB сайта «Аниме»

Курсовая

Информатика, кибернетика и программирование

Web-браузер – программное обеспечение, которое позволяет пользователю взаимодействовать с текстом, изображениями, видео, музыкой, играми и другой информацией, расположенной на веб-странице в вебсайте в Интернете или локальной сети. Текст и изображения на веб-странице могут содержать гиперссылки на другие странице в том же самом или другом веб-сайте.

Русский

2015-10-13

8.06 MB

1 чел.

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ

ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ

ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

«НИЖЕГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ИМ. Н.И. ЛОБАЧЕВСКОГО»

НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ

Институт экономики и предпринимательства

Кафедра Информационных технологий в предпринимательской деятельности

Специальность 230401 «Информационные системы (по отраслям)»

Курсовая работа
по дисциплине «Разработка  WEB приложений»

на тему: «Создание WEB сайта “ Аниме”»

Выполнил студент

Группы 7302-1

Н.В.Шпак

Проверил: преподаватель

А.А.Беспалько

Н.Новгород, 2015г.





Оглавление

[1] Оглавление

[2] Введение

[3] Описание технологий разработки сайта

[4]
Логическая структура

[5] Физическая структура

[6]
Шаблоны

[7] Оформление по средством СSS

[8] Код активного содержимого

[9] Заключение

[10] Источники





Введение

Большая часть актуальной информации предлагается посредствам сайтов. При этом задача специалиста обеспечить достоверную и качественную информацию.

Web-браузер – программное обеспечение, которое позволяет пользователю взаимодействовать с текстом, изображениями, видео, музыкой, играми и другой информацией, расположенной на веб-странице в вебсайте в Интернете или локальной сети. Текст и изображения на веб-странице могут содержать гиперссылки на другие странице в том же самом или другом вебсайте. Web-браузеры позволяют пользователю быстро и легко получить доступ к информации, используя эти ссылки.    «В настоящее время наиболее популярными являются 5 браузеров:
Internet Explorer, Mozilla Firefox, Opera, Google Chrome, Safari. Каждый из них обладает множеством функций». 

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

Аниме - Японская анимация. В отличие от  мультфильмов других стран, предназначенных в основном для просмотра детьми, бо́льшая часть выпускаемого аниме рассчитана на  подростковую и взрослую аудиторию, и во многом за счёт этого имеет высокую популярность в мире. Аниме отличается характерной манерой отрисовки персонажей и фонов. Издаётся в форме  телевизионных материалов, а также фильмов, распространяемых на видеоносителях или предназначенных для кинопоказа. Сюжеты могут описывать множество персонажей, отличаться разнообразием мест и эпох, жанров и стилей.

Цель: создать сайт для просмотра, существующего аниме его описание  дать достоверную информацию в полном размере о существующем на данный момент аниме. Обеспечить удобный переход  и создать приятный для просмотра сайт.

  1.  Описание технологий разработки сайта

HTML — это, прежде всего, язык разметки, и код, написанный на нем, используется на компьютере клиента в приложении Web-браузера. С этим связана его относительная простота и легкость освоения.

Язык HTML создан Тимом Бернерсом-Ли (1989 г.) и непрерывно совершенствуется. Разработано несколько его версий: HTML 2 (ноябрь 1995 г.), HTML 3.2 (январь 1997 г.), HTML 4.0 (февраль 1998 г.).

В языке HTML имеется множество тегов, среди которых — теги создания заголовка документа, задания параметров шрифта, вычерчивания линий, вставки гиперссылок, вставки графических элементов и т.д. В итоге Web-страница, кроме текста и ссылок, может содержать графику, звуки, видео, т.е. иметь такой вид, который вы и видите на экране компьютера.

Получить представление о том, как выглядит код HTML, вы сможете, если откроете в браузере любую Web-страницу и перейдете к представлению HTML. При этом вы можете видеть, как создана та или иная страница — это вам пригодится при разработке своих документов. Однако не стоит увлекаться только этой стороной обучения HTML, чтобы создаваемые вами документы не были ухудшенным вариантом чужих страниц.

JavaScript — прототипно – ориентированный сценарный язык программирования.  Является  диалектом языка ECMAscript.

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-сраницам.

Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование , функции как объекты первого класса.

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования  непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML.

  1.  
    Логическая структура

Логическая структура сайта - это система ссылочного взаимодействия  между страницами виртуального ресурса. Она должна продумываться на самых ранних этапах разработки сайта и являться основой функциональности дизайна.

Рисунок Логическая структура сайта

  1.  Физическая структура

Физическая структура сайта описывает размещение файлов и папок на диске компьютера.

Правильная организация файлов и папок файловой системы поможет вам в дальнейшем не запутаться в них.

Файл

Папка

Описание

Курсовая.html

html/

Стартовая страница сайта

Курсовая2.html

html/

Стартовая страница  раздела: “Небесные стрелки / Gunslinger Stratos: The Animation”

просмотр описания

Курсовая3.html

html/

Стартовая страница  раздела:

“Воспоминания андроидов / Plastic Memories”

просмотр описания

Таблица Физическая структура сайта

Конец формы

 

  1.  
    Шаблоны

Шаблон (шаблон веб-страницы) — страница сайта, содержащая в исходном коде определённый набор HTML-тегов и заполняемая движком системы сайта определённым содержанием (теги HTML, текст, изображения, мультимедиа и прочее содержимое), в зависимости от назначения шаблона.

Фиксированный тип макета.

Элемент основного содержания страницы жестко зафиксирован по ширине, так же все элементы страницы имеют ширину постоянного, фиксированного размера, а так же часто задаётся фиксированной и высота и иные размеры элементов сайта. Соответственно как правило все размеры как страницы вообще так и других элементов страницы является величиной постоянной. Что делает такой тип макета весьма простым по реализации, все элементы будут одинаково пропорционально сочетаться между собой по относительным пропорциям и гармонично отображаться на мониторах с разрешением от 1024 px и выше, независимо от размера и соотношения сторон экрана монитора и обозревателя применяемого пользователем.

Рисунок - Стартовая страничка

Стартовая страница сайта, на которой расположены ссылка в идее картинки для  просмотра описания  аниме.

Рисунок  – вторая часть стартовой странички

Стартовая страница сайта, на которой расположены ссылки для перехода на другие информационные ресурсы и ссылка в виде картинки для просмотра описания  аниме.

Код страницы

<!--Это стартовая страница сайта на ней расположено ссылки для перехода на другие сайты. Также есть картинки –ссылки для просмотра информации про аниме-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Изучаем каскадные таблицы стилей css</title>

<meta name="description" content="Каскадные таблицы стилей">

<meta name="keywords" content="стили, таблицы, css">

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<script language=JavaScript SRC="javascript.js">

 <body ><!--  Элемент <body> предназначен для хранения содержания веб-страницы , отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д-->.

<center><!--  делает всё что внутри него по центру-->

<div> <!--Элемент является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. -->

<H1 style="font-family: Monotype Corsiva; font-size: 20pt; Color:white;left:0; top:0"> Добро пожаловать на мой сайт!</H1>

<H2 style="font-family: Monotype Corsiva; font-size: 20pt; Color:white;left:; top:20">Здесь вы узнаете о недавно вышедшем аниме </H2><!--Здесь надписи выводимые на сайте в самом верху белым шрифтом-->

</div>  

<div>         

<a style="font-family: Monotype Corsiva; font-size: 20pt; Color:white;left:0; top:0" >Небесные стрелки / Gunslinger Stratos: The Animation</a> <!--Надпись над картинкой ссылкой поясняющие название аниме -->

</div>

<div onmouseover="document.getElementById('a').src='83545371.jpg';"

onmouseout="document.getElementById('a').src='em5AgBQ2wS5sMokyuwQVJBajIF3nn3Bh.jpg';"> 

<!--Событие onmouseout срабатывает, когда курсор мыши выходит за пределы элемента, к которому добавляется параметр onmouseout. Это событие обычно работает в связке с параметром onmouseover. -->

<!--Событие onmouseover происходит, когда указатель мыши двигается над указанным объектом. -->

<!--href- задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. --> 

<p><a href="D:\html\Курсовая2.html"> <img src="83545371.jpg" id='a' > </a> <!--В нашем случае он делает картинку ссылкой для перехода на другую страничку-->

<!--Тег <img >предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. -->

<!--Картинка ссылка при наведение мышкой меняется на другую картинку и дает переход на другую страничку-->

</div>

<div>         

<a style="font-family: Monotype Corsiva; font-size: 20pt; Color:white;left:0; top:0" >Воспоминания андроидов / Plastic Memories</a> <!--Надпись над картинкой ссылкой поясняющие название аниме-->

</div>

<div onmouseover="document.getElementById('b').src='396303822e.jpg';"

onmouseout="document.getElementById('b').src='Plastic-Memories-keu-visual.jpg';">

<a href="D:\html\Курсовая3.html"> <img src="396303822e.jpg" id='b' > </a>

<!--Картинка ссылка при наведение мышкой меняется на другую картинку и дает переход на другую страничку-->

</div>

<div>

<p><a style="Color:white">Вы можете посмотреть эти и много других аниме пройдя по ссылкам ниже</a>

</div>

<select id="r"><option value="http://online.anidub.com/">http://online.anidub.com/</option><option value="http://www.animespirit.ru/">http://www.animespirit.ru/</option><option value="http://multikonline.ru/anime-online/">http://multikonline.ru/anime-online/</option>

<p><input type=button value="переход по ссылке" onclick=a()><!--Дает переход на другие источники информации-->

</center>

</body>


Рисунок - Страница с описанием аниме “Небесные стрелки/Gunslinger Stratos

Картинка сверху меняется со временем и показывает отрывки из аниме


Рисунок - вторая часть страница с описанием аниме “Небесные стрелки/Gunslinger Stratos

На этой странички идет описание об аниме “Небесные стрелки / Gunslinger Stratos: The Animation” и переход для просмотра этого аниме на другой сайт или возращение на главную страницу.  


Рисунок -Страница с описанием аниме “Воспоминания  андройдов /Plastic Memories

Картинка сверху меняется со временем и показывает отрывки из аниме


Рисунок - вторая часть страница с описанием аниме “Воспоминания  андройдов /Plastic Memories

На этой странички идет описание об аниме “Воспоминания андроидов / Plastic Memories”  и переход для просмотра этого аниме на другой  сайт  или возращение на главную страницу


  1.  Оформление по средством СSS

Style.css

CSS (каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

body {

background-image:url(me-15041.jpg);

}<!-- Задал фон сайта  картинкой-->

<!—Отформатировал текст на страничках-->

.1{ text-align:center;

color:White;

font-size:50

}

.2{ text-align:center;

color:White;

font-size:30

}

.3{ text-align:center;

color:White;

font-size:18

}


  1.  Код активного содержимого

Javascript.js

<!--Дает возможность перехода по ссылкам и меняет с определенным периодом времени картинки -->

function a()

{

if (r.value=='')

{

alert('net')

}

else

{location.href=r.value

}

}

function b()

{ if (i==2) i=0

else i++

document.images[0].src=img[i]

}

i=0;

img_a=new Array()

img_a[0]=new Image()

img_a[1]=new Image()

img_a[2]=new Image()

img_a[0].src="PlasticMemories_scr1.png"

img_a[1].src="PlasticMemories_scr2.png"

img_a[2].src="PlasticMemories_scr3.png"

function img_b()

{

document.images[0].src=img_a[i].src

document.images[0].src=img_a[i].src

document.images[0].src=img_a[i].src

i++

if(i>2) i=0;

setTimeout("img_b()", 5000)

}

i=0;

img_r=new Array()

img_r[0]=new Image()

img_r[1]=new Image()

img_r[2]=new Image()

img_r[0].src="1428408781_gunslinger-stratos-01.jpg"

img_r[1].src="1428408845_gunslinger-stratos-01.jpg"

img_r[2].src="1428408819_gunslinger-stratos-01.jpg"

function img_h()

{

document.images[0].src=img_r[i].src

document.images[0].src=img_r[i].src

document.images[0].src=img_r[i].src

i++

if(i>2) i=0;

setTimeout("img_h()", 5000)

}

Заключение

В ходе курсовой я закрепил свои знания по html, JavaScript.

При создание сайта я лучше освоил html, JavaScript и стал лучше понимать, как создавать и использовать свой сайт.

Выяснил,  что Глобальная информатизация общества приводит к тому, что потребность в информации растет с каждым днем. При этом задача специалиста обеспечить достоверную и качественную информацию простым и удобным способом для пользователя.

Таким образом  предположил, что будущие интернета во многом определяется  усилий и слаженность действий специалистов и разработчиков, задействованных в данной отрасли.


  1.  Источники

  1.  Билл Кеннеди, Чак Муссиано - "HTML и XHTML. Подробное руководство (HTML & HXTML. The Definitive Guide)"
  2.  Эрик Мейер - "CSS-каскадные таблицы стилей. Подробное руководство (Cascading Style Sheets: The Definitive Guide)"
  3.  http://javascript.ru/  -Цель этого сайта - предоставить как можно более грамотную и структурированную информацию по языку javascript и смежным технологиям.
  4.  http://javascript.ru/forum/  -форум где можно задать вопросы


 

А также другие работы, которые могут Вас заинтересовать

51. История создания и специфика работы пистолета-пулемета Томпсона 533.92 KB
  Томми-ган, автомат Томпсона, пистолет-пулемет Томпсона, чикагское пианино, траншейная метла, дьявольская машина смерти и даже двигатель торговли – все это названия самого гангстерского в мире оружия, которое стало символом американских гангстерских воин и хорошо зарекомендовало себя на полях сражений.
52. Технический уровень производства алюминия с использованием электролиза 218 KB
  Плотность тока зависит от футеровки электролизера и площади поверхностей теплоотдачи корки электролита. Непрерывность процесса электролиза, определение производительности и удельного расхода сырья. Материальный баланс электролизера на силу тока 165 кА.
53. Оцінка навчальної гігієни Технічного коледжа ТНТУ ім. І. Пулюя 121.5 KB
  Опитування студентів групи ОКС-406 з використанням хронометражного листа, ознайомлення з планом виховної роботи куратора групи. Аналіз розміщення меблів в навчальних приміщеннях та дослідження освітленості класів.
54. Методичні вказівки до виконання лабораторних робіт в редакторі КОМПАС-ГРАФІК для Windows 996 KB
  Робота з панелями графічного креслярсько-конструкторського редактора КОМПАС-ГРАФІК для Windows, Ввід даних і виразів в поля Стічки параметрів об’єктів. Використання допоміжних побудов. Проставлення розмірів в КОМПАС-ГРАФІК для Windows.
55. Харьковский украинский драматический театр имени Т.Г. Шевченко 381.5 KB
  Блестящий исполнитель комических ролей в пьесах русских и зарубежных классиков - Н.В. Гоголя, А.С. Грибоедова, Ж.Б. Мольера, — М. Щепкин стоял у истоков украинского национального театра. В историю харьковского театра Л.Ю. Млотковский вошел как организатор строительства первого каменного здания театра.
56. Устройство подземной части здания. Проектирование фундамента 456 KB
  Выбор комплекта машин для производства земляных работ. Технико-экономическое сравнение вариантов. Сводная ведомость объема земляных работ, подсчет объемов по устройству монолитных фундаментов. Расчет технико-экономических показателей комплексного процесса.
57. Создание фирменного стиля модельной студии Модерн 654.5 KB
  Концепция нового фирменного стиля модельной студии Модерн, расценки на услуги рекламной фирмы (нанесение изображения на жилет и диск). Расчет суммы, необходимой на реализацию предложенного фирменного стиля модельной студии \"Модерн\"
58. Отруйні речовини та їх вплив на організм людини 181.78 KB
  Сильнодіючими отруйними речовинами називаються хімічні сполуки, які в певних кількостях, що перевищують ГДК, надають шкідливий вплив на людей, сільськогосподарських тварин, рослини, викликаючи у них ураження різного ступеня.
59. ЗАСВОЄННЯ ОСНОВ РОБОТИ В СЕРЕДОВИЩІ ПРОГРАМИ ELECTRONIC WORKBENCH 5.0 209.34 KB
  Освоєння принципів складання електронних схем в середовищі програми ELECTRONIC WORKBENCH 5.0 (EWB5) на прикладі RC ланцюгів та електронних елементів, дослідження розподілу напруг /струмів постійного і змінного струму в ланцюгах схеми, дослідження форми сигналів, амплітудно-частотної і фазочастотної характеристик (АЧХ і ФЧХ)