«Создание сайта на тему: «Языки программирования интерактивных Html-документов» - Курсовая работа
- 11.11.2016
- 41
- 8425
Содержание
Введение
Выдержка из текста работы
Заключение
Список литературы
Примечания
Автор: navip
Содержание
Введение 3
Глава 1. Теоретические основы интернет-технологий и программы для создания web-cтраниц 5
1.1 Web-страница документ или информационный ресурс 5
1.2 Редакторы HTML 5
1.3 Разработка Web-страницы с помощью программ 10
Глава 2. Язык программирования интерактивных Html-документов JavaScript 18
1.1 Язык создания сценариев JavaScript 18
1.2 Общий обзор языка 19
1.3 Язык ядра JavaScript 21
1.4 Стандартные объекты и функции 23
1.5 Процедуры JavaScript 25
Глава 3. Техническое задание 30
3.1 Общие положения 30
3.2 Цели и задачи 30
3.3 Структура и состав 30
3.4 Требования к системе 31
3.5 Терминология 34
Глава 4. Разработка web-сайта 36
4.1. Реализация бета-версии сайта 36
4.2. Тестирование 36
4.3. Публикация сайта 37
Заключение 39
Литература 40
Введение
В последнее время скорость роста в нашей стране количества WEB ресурсов увеличивается в геометрических пропорциях. Вместе с ростом количества WEB ресурсов растет количество пользователей «паутиной». Пользователи становятся все более и более придирчивы.
В связи с ростом пользователей, для которых Интернет это не столько работа, сколько способ отдыха и развлечений появилось большое количество развлекательных серверов, которые не столько морально, сколько материально заинтересованы в создании более технически-совершенного и привлекательного, чем у конкурентов WEB-ресурса сервера.
Все эти, и не только, факты делаю вопрос о создании интересно оформленного, технически грамотно спланированного WEB - сайта, крайне актуальным.
Цели создания Web-сайта очень разные в каждом конкретном случае и поэтому при выборе типа сайта необходимо определиться с целью создания web-сайта, его содержание. Также при создании сайта нужно учесть оформление, от того, насколько качественно и красиво создана та или иная Web-страница, зависит во многом ее успех в сети. Когда мы открываем Web-страницу, то невольно обращаем внимание на ее дизайн. Он может быть выполнен в различных стилях: деловой, строгий, авторский, игровой и так далее.
Объектом исследования данной курсовой работы является Web-программирование.
Предмет исследования – язык программирования JavaScript как инструмент для создания интерактивных Html-документов.
Цель исследования - создание Internet-сайта на тему «Языки программирования интерактивных Html-документов».
Для достижения поставленной цели в данной работе нам необходимо решить следующие задачи:
изучение Интернет технологий;
планирование сайта и разработка технического задания;
разработка сайта с использованием Интернет технологий;
тестирование и публикация сайта.
Данная работа состоит из четырех глав:
В первой главе данной работы исследуются интернет-технологий и программы для создания web-cтраниц.
Во второй главе данной работы дается описание Языка программирования интерактивных Html-документов JavaScript.
Во третьей главе разрабатываются:
планирование сайта;
техническое задание, которое включает общие сведения, назначение и цели создания сайта, характеристика сайта, требования к системе и сайту;
публикация сайта.
Рассматривается формулировка цели создания сайта, обсуждение аудитории, требование к содержимому и внешнему виду, технические требования, технологии реализации, схема и макет сайта. Разрабатывается Интернет сайт.
В четвертой главе рассматривается результаты внедрения Интернет сайта.
Выдержка из текста работы
Глава 1. Теоретические основы интернет-технологий и программы для создания web-cтраниц
1.1 Web-страница документ или информационный ресурс
Wеb-страница (англ. web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера.
Wеb-страницы обычно создаются на языках разметки HTML или XHTML и могут содержать гиперссылки для быстрого перехода на другие страницы.
Информация на wеb-странице может быть представлена в различных формах:
текст;
статические и анимированные графические изображения;
аудио;
видео;
апплеты.
Информационно значимое содержимое wеb-страницы обычно называется «content».
Несколько wеb-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками, и обычно находящихся на одном web-сервере, образуют web-сайт.
1.2 Редакторы HTML
Реда́ктор HTML или HTML-реда́ктор - компьютерная программа, позволяющая создавать и изменять HTML-страницы. Несмотря на то, что HTML-код может быть написан в простом текстовом редакторе (например, Notepad), специальные редакторы для написания кода HTML предлагают больше удобств и функциональности.
По своей функциональности они делятся (часто весьма условно) на две категории:
Редактор показывает только исходный код.
Редактор показывает готовую страницу в режиме WYSIWYG (что
видишь, то и получишь).
Многие WYSIWYG-редакторы позволяют одновременно работать и с кодом страницы.
Текстовые редакторы (Notepad) возможно использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует "подсветка" текста., в общем, работать крайне неудобно.
Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое (особенно это касается Netscape Navigator). Странички получаются какими-то кривыми, поэтому для создания качественных web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.
Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производсту программ для создания веб-сайтов, а также законодателем моды в этой области. Последния версия HTML-редактора этой компании - DreamWeaver 3, который относится к категории WYSIWYG-редакторов, и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и заключается преимущество технологии WYSIWYG - что вижу, то и получаю).
Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.
Следующий редактор - HomeSite 4 - для создания страниц вручную, т. е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, NN, Opera).
HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом браузере будет смотреться одинаково).
Еще одна отличительная особенность HomeSite - это его «склейка» с Dreamweaver. HomeSite обладает кнопкой «Dreamweaver», а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для коректировки HTML-кода.
Одним из последних HTML-редакторов является EVR Soft 1st Page 2000 v2.
Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.
Графические редакторы
Создание и оптимизация графики - сложная и капризная задача. Безусловно, возможно создание web-страницы и без использования графики - при помощи шрифтов, скриптов и таблиц стилей (CSS) - и это будет красиво и стильно. Но ведь окончательный вид документа зависит от большого числа различных факторов, таких как: ширина окна браузера, предварительные настройки браузера, принятые по умолчанию размер шрифта, его имя и цвет. К тому же не все скрипты и стили поддерживаются всеми браузерами. Если же будет использована графика, то посетитель вашей страницы увидит ее точно такой, какой сделали и видите ее вы.
Основная сложность работы с web-графикой состоит в том, что пропускная способность каналов Интернета, в большинстве случаев, очень низкая и перед вами сразу встанут проблемы - как сделать графический файл небольшой по объему, но хорошего качества, какие программы и приемы использовать при его оптимизации.
Именно этому посвящен раздел о векторные и растровые графических редакторах, которые являются мощным инструментом обработки изображения в умелых руках.
Прежде чем рассмотреть векторные и растровые графические редакторы, следует уяснить себе, в чем состоит различие между векторным и растровым представлением изображения.
Растровая графика представляет собой сетку (растр), ячейки которой называются пикселами. Каждый пиксел в растровом изображении имеет строго определнное местоположение и цвет, следовательно любой объект представляется программой как набор окрашенных пикселов. Это значит, что пользователь, работая с растровыми изображениями, работает не над конкретнными объектами, а над составляющими их группами пикселов.
Растровые изображения обеспечивают высокую точность передачи градаций цветов и полутонов, а также высокую детализацию изображения, поэтому они являются оптимальным средством представления тоновых изображений, таких как сканированные фотографии.
Для изображения растровой графики всегда используется фиксированное количество пикселов, т.е. качество растрового изображения напрямую зависит от разрешающей способности оборудования. Это значит, что любое изменение изображения (поворот, увеличение и т.д.) приводит к неизменному искажению картинки и границы объектов получаются неровными.
Векторные изображения формируются на основе математически описанных фигур, называемых векторами, а вид изображения определяется параметрами векторов. Другими словами, векторная графика состоит из кривых, имеющих координаты, цвет и прочие параметры, а также замкнутых областей, заполненных определенным цветом. Границы этих областей также описываются кривыми. Файл с векторной картинкой содержит координаты и параметры кривых.
Результаты обработки векторных изображений не зависят от разрешающей способности оборудования, поэтому вы можете произвольно изменять их параметры (размер, цвет, форму и т.д.) - качество не ухудшится. Векторная графика применяется при создании цифровых объектов с использованием мелких кеглей (размеров шрифта) или таких объектов, как логотипы, для которых важно сохранять четкие контуры, при неограниченном масштабировании.
А) Редакторы растровой графики
Microsoft Paint - простой (или лучше сказать - простейший) редактор, входящий в стандартную поставку операционных систем Microsoft. Он обладает набором простейших функций (кисточка, карандаш, резинка и т.д.), которые позволяют создавать незамысловатые картинки. К сожалению, для обработки графики он практически не пригоден
Adobe Photoshop - на сегодняшний день это самый мощный пакет для профессиональной обработки растровой графики. Это целый комплекс, обладающий многочисленными возможностями модификации растрового рисунка, имеющий огромный набор различных фильтров и эффектов, причем есть возможность подключать инструменты независимых производителей.
PhotoPaint - еще один не менее известный графический редактор (из пакета Corel Draw) для обработки растровой графики, конкурирующий с Adobe Photoshop.
Painter - редактор предоставляет великолепные возможности для эмуляции реальных инструментов рисования: графит, мел, масло и т.д. Также позволяет имитировать фактуру поверхности материалов, живопись, создавать анимацию. Очень удобен для разработки фоновых рисунков или Web-страниц в стиле живописи.
B) Редакторы векторной графики
Adobe Illustrator - пакет позволяет создавать, обрабатывать и редактировать векторную графику.
CorelDraw - безусловно, такой известный графический пакет не мог обойтись без средств для обработки векторной графики.
Adobe Streamline - еще один продукт фирмы Adobe, предназначенный для трассировки (перевода) растровой графики в векторную. Это небольшой, но очень полезный и мощный продукт. Особенно полезен, если вы создаете Web-страницы с использованием векторной графики, например, технологии Flash.
1.3 Разработка Web-страницы с помощью программ
Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же web-проекта.
Можно работать на web без знания языка HTML, поскольку тексты HTML могут создаваться разными специальными редакторами и конвертерами. Но писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах.
Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать web-страницы, которые могут быть просмотрены многими браузерами web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.
Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.
HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными броузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к web.
Структура HTML документа
Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор.
Обычно HTML-документ - это файл с расширением *.html или *.htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое web-документа. Текст самих тегов web-браузером не отображается.
Все теги начинаются символом '<' и заканчиваются символом '>'. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:
Информация
Здесь стартовым тегом является тег
, а завершающим -
. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ '/' (слэш).Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом HTML-документе должны присутствовать три главных части:
A) Объявление HTML.
B) Заголовачная часть.
C) Тело документа.
A) Объявление HTML
и . Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег (в самом начале документа), а последним - (в самом конце документа).
…
B) Заголовочная часть.
и . Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами
C) Тело документа.
Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами
и . Первый из них должен стоять сразу после тега , а второй - перед тегом