97079

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

Курсовая

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

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

Русский

2015-10-13

8.06 MB

2 чел.

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

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

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

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

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

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

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

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

Специальность 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/  -форум где можно задать вопросы


 

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

81888. Иерархические структуры управления 38.72 KB
  Соблюдение этого принципа должно обеспечивать единство управления. Такая организационная структура образуется в результате построения аппарата управления из взаимоподчинённых органов в виде иерархической лестницы т. Функциональная организационная структура основана на создании подразделений для выполнения определённых функций на всех уровнях управления.
81889. Принципы «рациональной бюрократии» Макса Вебера как основа иерархических структур управления 38.18 KB
  Бюрократия рассматривалась им как некий идеальный образ наиболее эффективный инструмент управления социальными структурами и отдельными структурными единицами. Бюрократию как рациональную машину управления характеризуют: жесткая ответственность за каждый участок работы: координация во имя достижения организационных целей; оптимальное действие безличных правил; четкая иерархическая зависимость. Однако позже Вебер стал различать бюрократию в позитивном смысле западная рациональная система управления и в негативном смысле восточная...
81890. Достоинства и недостатки линейной структуры управления 36.39 KB
  Другими словами все функции управления и подчинения сосредотачиваются у руководителя создается вертикальная линия управления и прямой путь воздействия на подчиненных Преимущества линейной структуры управления: Создает реальные условия для единоначалия обеспечивает единство распоряжения в системе управления ориентирует руководителей в основном на решение оперативных задач. Простота управления один канал связи. Недостатки линейной структуры управления: Высокие требования к руководителю который должен быть подготовлен всесторонне.
81891. Достоинства и недостатки линейно-функциональной системы управления 35.61 KB
  Преимущества линейнофункциональной структуры управления: Обеспечивает соблюдение принципа единоначалия и в то же время предполагает рациональную специализацию управленческих звеньев. Недостатки линейнофункциональной структуры управления: Отсутствие тесных взаимосвязей и взаимодействия на горизонтальном уровне между производственными отделениями.
81892. Органические структуры управления 39.41 KB
  При такой организации руководитель проекта взаимодействует с двумя группами подчиненных: с постоянными членами проектной группы и с другими работниками функциональных отделов которые подчиняются ему временно и по ограниченному кругу вопросов. Проектные структуры это структуры управления комплексными видами деятельности которые изза их решающего значения для организации требуют обеспечения непрерывного координирующего и интегрирующего воздействия при жестких ограничениях по затратам срокам и качеству работ. Сетевые организации ...
81893. Достоинства и недостатки матричной структуры управления 38.04 KB
  Достоинства: Одновременное использование нескольких видов деятельности в рамках осуществляемых программ. В рамках системы нет четкого распределения прав каждого участника потому наблюдается тенденция к анархии. Очень часто начинается борьба за власть в рамках внедрения этой системы потому что руководствующие полномочия четко не распределены.
81894. Уровни менеджмента в организационной иерархии 40.53 KB
  Менеджеры высшего звена президент вицепрезидент генерал ректор университет. Менеджеры среднего звена главный бухгалтер главный инженер директор предприятия капитан. Менеджеры низшего звена начальник цеха мастер начальник отдела по маркетингу сержант Три основных уровня менеджеров. Менеджеры низшего звена Функции: осуществление контроля за выполнением производственных заданий; непосредственное руководство рабочими и сотрудниками; обеспечение информацией руководителей высших уровней о выполнении производственных заданий.
81895. Перспективные формы организаций 41.13 KB
  Идея формирования эдхократической организации зародилась еще в середине века в американской компании ХьюлеттПаккард . Отсюда следует что организационная структура управления эдхократической организации порой жестко не определена иерархическое строение ее может довольно часто изменяться у менеджеров не всегда есть жесткая привязка к определенной сфере деятельности. Организационную структуру управления эдхократической организации обычно ассоциируют со схемой концентрической формы.
81896. Общие функции менеджмента 38.02 KB
  Суть управленческой деятельности на всех уровнях управления обеспечивают функции менеджмента. На сегодняшний день к функциям менеджмента относится : планирование организация мотивация контроль регулирование. Планирование главная функция менеджмента которая предусматривает прогнозирование определение целей стратегии политики и задач того или иного формирования; означает сознательный выбор решения что работы как кому и когда Организация как функция менеджмента направлена на формирование управляющих и управляемых систем а...