Javascript сайт курсовая работа

admin

Министерство просвещения ПМР
Тираспольский Техникум Информатики и Права
Отделение информационных технологий

Курсовая работа
по дисциплине: Программное обеспечение компьютерных сетей.
на тему: Разработка Web сайта на основе HTML с использованием JavaScript.

Выполнил студент 313 группы:

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

Защита «__»________2014 г.
Оценка «__»__________

Тирасполь
2014 г.

Содержание:

ВВЕДЕНИЕ 3
РАЗДЕЛ I. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ. 4
1.1.ИСТОРИЯ HTML 4
1.1.1.ВЕРСИИ HTML 4
1.2.ГИПЕРТЕКСТ 6
1.2.1. СТРУКТУРА WEB-СТРАНИЦЫ 6
1.2.2. <HTML></html> 7
1.2.3. <HEAD></head> 7
1.2.4. <TITLE></title> 7
1.2.5. <BODY></body> 8
1.2.6. <!— Комментарий —!> 8
1.2.7. <H1><h1> 8
1.2.8. <HR> 9
1.2.9. <A></a> 9
1.2.10. <BASE> 10
1.2.11.ПРАВИЛА СИНТАКСИСА 10
1.2.12. ИСПОЛЬЗОВАНИЕ СИМВОЛОВ 11
1.2.13. УПРАВЛЕНИЕ ЦВЕТОМ 13
1.3. КОНСТРУКТОР ДОКУМЕНТОВ 15
1.3.1. ПРИЛОЖЕНИЕ. СТРУКТУРА ПРИЛОЖЕНИЯ 15
1.3.2. ЦЕПОЧКА 15
1.3.3. УЛОЖИМ КАРТИНКУ В ФОНОВЫЙ ПАРКЕТ 16
1.4. ГРАФИКА 17
1.4.1. ФОРМАТ GIF 17
1.4.2. ФОРМАТ JPG 17
1.4.3. КАК ПРОГРАММИРОВАТЬ КАРТИНКИ 18
1.4.3.1. Картинка в тексте 18
1.5. ПОСТРОЕНИЕ ТАБЛИЦ. 19
1.5.1. КАК ЗАДАТЬ ТАБЛИЦУ 19
1.5.2.Атрибуты команды TABLE 19
Таблица 1.3. Атрибуты 19
Атрибуты команды TR 20
1.5.4. Атрибуты команды TD (TH) 20
1.6. ТАБЛИЦЫ СТИЛЕЙ 22
1.6.1. УРОВНИ CSS 22
1.6.2. СПОСОБЫ ОПРЕДЕЛЕНИЯ ТАБЛИЦ СТИЛЕЙ 22
1.7. JAVASCRIPT 24
1.7.1. ИСПОЛЬЗОВАНИЕ JAVASCRIPT 24
1.7.2. ВАЖНОСТЬ ИЗУЧЕНИЯ JAVASCRIPT 24
1.7.3 Переменные в языке JavaScript 24
1.7.5. МАССИВЫ JAVASCRIPT И ESCAPE-ПОСЛЕДОВАТЕЛЬНОСТИ 25
1.7.6. ВЫРАЖЕНИЯ, УСЛОВИЯ, ОПЕРАЦИИ, СТРОКИ И ЧИСЛА 25
РАЗДЕЛ II. ПРАКТИЧЕСКАЯ ЧАСТЬ 27
ЗАКЛЮЧЕНИЕ 28
СПИСОК ЛИТЕРАТУРЫ 29

Введение

Термин HTML (Hyper Text Markup Language) означает «язык маркировки гипертекстов». Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.
HTML давно перестал быть просто языком программирования. Человек, изучавший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро, что в компьютерном мире не так уж и мало. Гипертекст подходит для включения элементов мультимедиа в традиционные документы. Практически именно благодаря развитию гипертекста, большинство пользователей получило возможность создавать собственные мультимедийные продукты и распространять их на компакт-дисках. Такие информационные системы, выполненные в виде набора HTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров. От пользователя требуется выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связь между ними.
HTML, как основа создания WEB-страниц, имеет прямое отношение и к новому направлению изобразительного искусства – WEB-дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить все это в Сети, продумать связь между WEB-страницами, чтобы все двигалось, откликалась на действие пользователя, поражало воображение, вызывало желание создать что-нибудь свое, оригинальное в этой области.
Цель работы: изучить языки программирования HTML и JavaScript.
Исходя и выше поставленной цели при создании данного проекта я поставил следующие задачи:
1. Изучить и проанализировать литературу по данной теме.
2. Изучить принцип работы браузеров.
3. Создать оригинальный сайт.

Раздел I. Теоретическая часть.
1.1.История HTML

1.1.1.Версии HTML
Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для языка, ни для браузера не нашлось достойного применения. В 1993 году появился HTML+ , и эта версия также осталась практически незамеченной. Начало широкого использования гипертекста дала версия 2.0, которая, появилась в июне 1994 года. Это был год роста популярности WWW по всему миру. Элементы, включенные в версию 2 , в большинстве своем используются по сей день.
В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интервала, бесконечности, дроби, скобок и т.д.) при помощи элементов языка. Под эту версию был разработан браузер Arena. Но этот проект оказался тупиковым и не получил дальнейшего распространения.
В 1996 году появился HTML 3.2. Это было новаторское решение, в спецификацию языка были введены фреймы, которые стали теперь весьма популярны у разработчиков WEB-страниц. Даже сейчас на основе этой спецификации можно реализовать интересные дизайнерские решения. Практически все современные браузеры поддерживают версию 3.2, поэтому авторы WEB-страниц уверенны в работоспособности всех элементов.
Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум ),компании-производители браузеров создавали собственные элементы (расширения). Впоследствии, некоторые из этих элементов, после получения всеобщего признания включились в спецификацию следующих версий языка. Но новаторское решение – фреймы, не были включены в спецификацию 3.2. Но браузеры поддерживали фреймы и многие книги, посвященные HTML, содержали описание фреймов без упоминания о том, что это нестандартные элементы. В последствии, фреймы стали стандартом де-факто. В версии 4 они уже были включены на полном основании.
И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другими программными кодами версии 3.2, не сыграли той роли, которую были призваны сыграть. Это объясняется тем, что браузеры различных версий по-разному интерпретировали программы на разных языках JAVA, JAVASCKRIPT, Visual Basic (VBScript). В результате не удалось получить достаточно надежный работающий код, и данные языки использовались любителями HTML в основном для экспериментов.
Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт — программирования. Это оказалось немногим более эффективным, чем вводить в язык все новые элементы. Появившиеся в то время браузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был установлен определенный уровень стандартизации). Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определения версии браузера, чтобы потом использовать тот или иной фрагмент кода. Очевидно, что на программиста ложится обязанность тестирования страниц на всех популярных в настоящие время браузерах.
В результате, использование всех возможностей Dynamic HTML стало уделом программистов достаточно крупных организаций, где есть условия для разработки сложных программ и всестороннего их тестирования. Создателям личных WEB-страниц подчас приходится искать компромисс между надежностью и новаторством, чтобы получить достаточно грамотный HTML-код.

1.2.Гипертекст

Главных причин популярности HTML три. Вот они в порядке возрастания важности.
HTML-программирование очень простое. В нем нет традиционных алгоритмических структур, таких, как развилка, цикл, процедура. Оно линейно в своей основе.
HTML-документ является переносимым продуктом. Это означает, что авторский труд будет легко доступен огромному числу пользователей, независимо от марки компьютера и типа операционной системы. Именно это свойство HTML-документов, а также их относительно малый размер, позволили с успехом использовать HTML-технологию для подготовки WWW-страниц в Интернете.
Переносимость HTML-документа достигается за счет того, что пересылается не экранное изображение, а программа. А изображение строит браузер, выполняя команды этой программы.
HTML-документ — это гипертекст.
Синтаксис HTML.

1.2.1. Структура WEB-страницы
Заготовка типичной WEB-страницы:

<HTML>
<HEAD>
<TITLE> Структура WEB-страницы </title>
<STYLE> H2 {font-family: Arbat;}CODE { font-family: Arial;} </style>
<META http-equiv. = ”Content-Type” content = “text/html; chariest = windows-1251″>
<META name = “Author” content = “Pavel Trizno”>
<META name = “Keywords” content = “ HTML, document, element”>
</head>
<BODY bgcolor = #FFFFFF>
<!— Комментарий к страницы —!>
<A name = “top></a>
Переход к <A href = “#bottom”> конец </a> документа <P>
Переход к <A href = “#S001”> <B> ссылке 1 </b></a><P>
<P>
<HR>
<H1> Заголовок 1 </h1>
<H2> Заголовок 2 </h2>
<H3> Заголовок 3 </h3>
<H3> Заголовок 4 </h4>
<H3> Заголовок 5 </h5>
<H3> Заголовок 6 </h6>
<HR>
Здесь расположена <B> ссылка 1 </b><A name = “S001”></a>
<HR>
<P> Здесь должен располагаться оригинальный текст WEB-страницы
<HR>
<A name = “bottom”></a><P>
Переход в <A href = “#top”>начало</a> документа
</body>
</html>

Если рассмотреть исходные тексты различных WEB-страниц, то можно легко увидеть схожесть их структуры. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальном и стандартом фактическим. HTML постоянно развивается, дополняется новыми элементами.
Рассмотрим основные элементы HTML.

1.2.2. <HTML></html>

Означает документ на языке HTML. Данный элемент является самым внешним, так как между его начальным и коечным тегами должна находится вся WEB – страница. Этот элемент имеет атрибуты version, long и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY и других, определяющую общую структуру WEB-страницы. Конечным тегом </html> оканчиваются все документы в формате HTML.

1.2.3. <HEAD></head>

Область заголовка Web – страницы, её первая часть. HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты IANG, DIR, должен включать элемент TITLE и допускает вложение элементов BASE, META, LINK, OBJECT, SCARIPT, STULE.

1.2.4. <TITLE></title>

Элемент для размещения заголовка Web – страницы. Строка текста, расположенного внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Эта строка часто используется при организации поиска в WWW. Эта строка должна достаточно точно отражать назначение документа.

1.2.5. <BODY></body>

Этот элемент заключает в себе гипертекст, который определяет собственно Web – страницу. Конечный тег этого элемента надо искать в конце HTML-файла. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.
Атрибут, определяющий фон страницы, является одним из самых важных для дизайна.
background = “Путь к файлу”
Более простое оформление фона сводится к заданию его цвета:
bgcolor = “#RRGGBB”
Цвета фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего. Оба приведенных выше атрибута не являются альтернативными и часто используются совместно: если по каким-либо причинам не может быть найден рисунок фона, используется цвет.
Поскольку фон станицы может изменятся, необходимо иметь возможность подбирать соответственный цвет текста. Для этого имеются следующей атрибут:
text = “#RRGGBB”
Для задания цвета текста гиперссылок используются следующие атрибуты:
link = “#RRGGBB”
Точно так же можно задать цвет для просмотренных гиперссылок:
vlink = “#RRGGBB”
Можно также указать изменение цвета для последней выбранный пользователем гиперссылки:
Alink = “#RRGGBB”

1.2.6. <!— Комментарий —!>

В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле – не исключение. Текст, введений внутри этого элемента, игнорируется браузером. Эти элементы могут располагаться в любом месте WEB-страницы. Признаком комментария служит восклицательный знак, а текст комментария должен обрамляться двойным дефисом. Например:
<!— Комментарий —!>

1.2.7. <H1><h1>

Элемент заголовка. Существует шесть уровней заголовка, которые обозначаются H1…H6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков могут использовать атрибуты, задающие выравнивание влево, по центру или вправо:
align = “left”
align = “center”
align = “right”

1.2.8. <HR>

Горизонтальная линия – очень часто используемый элемент. Во-первых, потому что с его помощью очень удобно делить страницу на части.
Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Этот элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:
align = “left”
align = “center”
align = “right”
align = “justify”
Можно задать толщину линии:
Size = толщина в пикселях
Можно управлять длиной линии:
width = длина в пикселях
width = длина в процентах
Можно выбрать цвет:
color = “цвет”

1.2.9. <A></a>

HTML-документ может быть очень большим, и в этом случае нужно иметь возможность быстрого перемещения к нужному разделу документа. Для этого можно использовать механизм гиперссылок. Необходимо также в нужных местах текста расставить соответствующие метки. Шаблон для создания меток таков:
<A name = “>Произвольный текст</a>
В данном случае данной строке документа присваивается имя, и, следовательно, в другой части документа или даже на другом документе может быть создана гиперссылка, приводящая в эту точку. Для перехода внутри документа можно использовать следующую конструкцию:
<P>Переход к <A href = “#метка”>метке</a></p>
Несколько подобных строк могут образовать своеобразное оглавление Web-страницы, которое можно разместить в начале и в конце документа.
Ссылки могут уводить не только в разные документы, но загружать на экран разные фрагменты одного и того же текста. В последнем случае навигационные средства браузера работают также.

1.2.10. <BASE>

Элемент для задания базового адреса (URL) для ссылок. Это позволяет опускать начальную часть адреса в ссылках документа. Для использования этого элемента необходимо использовать следующую конструкцию:
<BASE href =”http:// компьютер/путь 1”>
Фрагмент адреса путь1 не является обязательным. При формировании полного адреса он будет отброшен. Если в тексте документа встретится относительная ссылка
<A href =”путь 2/имя документа. Htm “ >Видимый текст ссылки</a>,
то она будет соответствовать URL
http: // компьютер/путь 2/имя документа. Htm
В том случае, когда надо задать базовый адрес для локального диска (например, D), должна быть использована такая конструкция:
<BASE href =file://D:путь>
Тогда при указании относительной ссылки можно будет задавать не только имя файла, но и имена папок, в которых он находится.
В выражении абсолютной ссылки можно также опустить указание на схему доступа (file://) В этом случае будет учитываться только левая часть абсолютной ссылки до первого левого символа “”, то есть имя локального диска.

1.2.11.Правила синтаксиса

При использовании каждого элемента важно знать, какие элементы могут располагаться внутри него, и внутри каких элементов может находиться он сам. Так, взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным на любой странице, в тех случаях, когда не используются фреймы. Если страница представляет собой документ планировки фреймов, то вместо элемента BODY используется элемент FRAMESET.
Существуют группы элементов, которые используются совместно. К ним относятся элементы для создания таблиц, списков, фреймов. В этом случае порядок вложения элементов определяется логикой создания того или иного объекта на странице. Таблицы и фреймы часто используются для того, чтобы разместить детали страницы (рисунки, текст и др.) в определённом порядке. Например, располагая рисунок внутри ячейки таблицы, можно добиться определённого его положения.
Большое количество элементов, которые используются для форматирования текста, допускают самые разнообразные варианты вложения. И сами они обязательно должны располагаться внутри определённых элементов.
Например, есть два абзаца (первый в зелёной рамке) и таблица:
<P style = “border: 3px solid green”> Текст абзаца 1</p>
<TABLE>…</ table>
<P> Текст абзаца 2 </p>
Таблица в данном случае – независимый элемент. Её можно, например, выравнивать независимо от остального текста.
Можно использовать другой код:
<P style = “border: 3px solid green “>Текст абзаца 1
<TABLE>…</table>
<P> текст абзаца 2</p>
Исчез конечный тег первого абзаца. Теперь таблица является частью первого абзаца, и зелёная рамка будет охватывать таблицу и текст.
И наоборот, элемент P может находиться внутри таблицы: например, один элемент ячейки TD может содержать несколько абзацев P.
Правила синтаксиса распространяются и на использование стартового и конечного тегов, атрибутов и содержимого элемента. Нельзя путать понятия «элемент» и «тег». Элемент – это контейнер, содержащий атрибуты внутри стартового тега и полезную информацию между стартовым и конечным тегами. Тег – это конструкция, заключённая в угловые скобки и используемая для обозначения области действия элемента.
Некоторые элементы не имеют конечного тега. Элементу BR, обозначающему конец строки, не нужен конечный тег. Некоторые элементы могут использоваться с конечным тегом и без него. Элемент абзаца P может иметь конечный тег, но если тег не задан, то признаком окончания действия элемента служит следующий элемент, который может логически определить конец текущего абзаца: другой элемент P, элемент рисунка IMG, элемент списка UL, элемент таблицы TABLE и др.
Важным правилом, которое не имеет исключений, является размещение атрибутов элемента внутри начального тега.

1.2.12. Использование символов

В HTML и в браузерах реализована возможность прорисовки символов по их кодам. Символы могут быть общепринятыми, нестандартными и используемыми в HTML в качестве служебных символов. Их называют спецсимволами. Первый способ ввода спецсимвола заключается в указании его кода. Например, латинскую букву А можно задать так: &#65. Для некоторых символов предусмотрена мнемоническая кодировка.
Часто используемые спецсимволы (по стандарту ISO 8859 – 1):
Таблица 1.1. Символы.
Код символа Числовой код Мнемонический код Название Символ
34 &#34 &quot Прямая кавычка “
38 &#38 &amp Амперсанд &
60 &#60 &lt знак «меньше» <
62 &#62 &gt Знак «больше» >
153 &#153 &trade Троговая марка ™
160 &#160 &nbsp Неразрывный пробел
162 &#162 &cent Цент ¢
163 &#163 &pound Фунт £
164 &#164 &curren Знак валюты ¤
165 &#165 &yen Йена ¥
166 &#166 &brvbar Вертикальная строка ¦
167 &#167 &sect Знак параграфа §
169 &#169 &copy Знак копирайта
©
171 &#171 &laquo Левая типографская кавычка
«
172 &#172 &not Знак отрицания ¬
174 &#174 &reg Знак “зарегестрировано”
®
176 &#176 &deg Знак градуса °
177 &#177 &plusmn Знак “плюс минус» ±
178 &#178 &sup2 Степень 2 ²
179 &#179 &sup3 Степень 3 ³
181 &#181 &mikro Знак «микро» µ
182 &#182 &para Знак абзаца ¶
183 &#183 &middot Точка-маркер •
185 &#185 &sup1 Степень 1 ¹
187 &#187 &raquo Правая типографская кавычка
»
188 &#188 &frac14 Одна четвёртая ¼
189 &#189 &frac12 Одна вторая ½
215 &#215 &times Знак умножения /

247 &#247 &divide Знак деления /

1.2.13. Управление цветом

Кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий и фона, других элементов страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами. Существует несколько атрибутов, значениями которых являются параметры цвета. Самый простой способ определить цвет – написать название цвета на английском языке. Так, например, задаётся красный цвет шрифта в элементе FONT:
Color = “red”
Допустимые названия цветов:
Таблица 1.2. Цвета.
Русское название Английское название RGB – код
Аквамарин Aqua #00FFFF
Белый White #FFFFFF
Жёлтый Yellow #FFFF00
Зелёный Green #008000
Золотой Gold #FF0700
Индиго Indigo #4B0080
Каштановый Maroon #800000
Красный Red #FF0000
Оливковый Olive #808000
Оранжевый Orange #FF0000
Пурпурный Purple #800080
Светло-зелёный Lime #00FF00
Серебристый Silver #C0C0C0
Серый Gray #808080
Сизый Teal #008080
Синий Blue #0000FF
Ультрамарин Navy #000080
Фиолетовый Violet #EE80EE
Фуксиновый Fuchsia #FF00FF
Чёрный Black #000000

HTML – код, рисующий радугу на Web-странице:
<FONT color = “ red “> Радуга </ front>
<TABLE border = 0 width = 100% >
<TR><TD bgcolor = #FF3030 >K
<TR><TD bgcolor = FFD000 >0
<TR><TD bgcolor = #F3FF5F >Ж
<TR><TD bgcolor = #00FF00 >З
<TR><TD bgcolor = #6FD3F7 >Г
<TR><TD bgcolor = # 5F72FDF >С
<TR><TD bgcolor = # B568F4 >Ф
</ table>
Цветовая проработка Web-страницы является альтернативой многочисленных рисунков и позволяет обеспечить более быструю загрузку документа.

1.3. Конструктор документов
Пора от технических деталей программирования перейти к более важным вопросам:
• Как составить сценарий гипертекстового документа?
• Как спроектировать внешний вид документа на экране?
1.3.1. Приложение. Структура приложения
Когда гипертекст состоит из нескольких файлов, термин «документ» к нему уже не очень подходит. В дальнейшем будем называть документом однофайловый гипертекст. А для случая, когда файлов много, введем термин «приложение».
Лучше сначала решить, какой способ организации гипертекста больше всего подходит для поставленной задачи, то есть, подумать над общей структурой приложения.
1.3.2. Цепочка
Это самая простая структура. Документы, составляющие приложение, просматриваются пользователем по порядку, как страницы в книге. Каждый документ оканчивается ссылкой на следующий. Пользователь двигается по цепочке «до упора», то есть до последнего документа. В последнем документе ссылки «вперед» уже нет. Теперь можно окончить работу или, пользуясь кнопкой браузера «Назад» («Back»), пройтись по документам «вспять».
Цепочку можно изобразить такой схемой:

Рис.1.1. Схема цепочки.
Для удобства работы с приложением, можно помещать на странице документа ссылки не только вперед, но и назад. В этом случае отпадает необходимость использовать навигационные кнопки браузера.
В чистом виде цепочка используется проектировщиками очень редко. Обычная практика — это цепочка документов с дополнительным набором HTML-файлов, образующих справочный раздел. В этот раздел выносятся большие иллюстрации, длинные примеры, комментарии, толкование терминов, литературные источники, лирические отступления.
Таким образом, дополнительно к ссылкам движения по цепочке, в приложении появляются ссылки, уводящие пользователя на документы справочного раздела. Изучив дополнительный материал, пользователь возвращается в цепочку и продолжает последовательное движение.
Схема цепочки со справочным разделом выглядит так:

Рис.1.2. Схема цепочки со справочным материалом
1.3.3. Уложим картинку в фоновый паркет
Пользуясь атрибутом bgcolor команды BODY, можно выкрасить фон документа в какой-нибудь один цвет.
Вместо одноцветной заливки можно использовать картинку. Эта картинка будет, повторяясь, укладываться в экранное поле наподобие паркетных плиточек.
Чтобы «паркет» смотрелся красиво, необходима визуальная стыковка плиточек между собой. Это надо учитывать при создании фоновой иллюстрации. И еще: очень важно, чтобы фон оставался именно фоном, а не отвлекал внимание пользователя от главных элементов документа, не мешал читать текст.
Фоновая картинка задается в команде BODY атрибутом background:
<BODY background=имя файла с картинкой>

1.4. Графика

Иллюстрации в тексте радуют глаз и делают документ более привлекательным. Пора и нам записать в свой актив вывод картинок средствами HTML.
Браузеры «понимают» два графических формата GIF и JPG.

1.4.1. Формат GIF

Картинки в этом формате поддерживают 256 цветов. В большинстве случаев этого вполне достаточно для получения качественных иллюстраций, но до фотографического качества, конечно, далеко.
GIF-формат имеет три приятные дополнительные возможности:
• Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик: нарисовать отдельные кадры, настроить время задержки в последовательности показа, «зациклить кино» или показывать кадры только один раз. Когда анимация готова, она записывается на диск как обычный GIF-файл. Хотя в этом файле не одна, а целая серия GIF-картинок и разная настроечная информация.
• Прозрачная графика. В GIF-формате один цвет можно объявить прозрачным. Это позволяет избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательным образом. Прозрачный цвет задается в редакторе при записи GIF-файла на диск. Обычный GIF легко сделать прозрачным. Нужно просто загрузить его в GIF-редактор или PhotoShop и снова записать на диск, указав прозрачный цвет.
• Чересстрочная развертка. Применяется для больших GIF. Иллюстрация разделяется на четыре части, размером с оригинальную картинку. Первая часть содержит 1, 5, 9,… строки исходного изображения. Вторая — 2, 6, 10,… Третья — 3, 7, 11,… Четвертая — 4, 8, 12,…

1.4.2. Формат JPG

Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества.
JPG-формат поддерживает режим, похожий на чересстрочную развертку GIF. Но в отличие от GIF, деление на части происходит не по строкам, а по алгоритму выделения из картинки полноформатных частей. При этом каждая следующая часть по качеству выше предыдущей. JPG в таком режиме называется прогрессивным.
1.4.3. Как программировать картинки

1.4.3.1. Картинка в тексте

Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться командой <IMG>. Команда не имеет парного закрывающего тега, но имеет много атрибутов.
Атрибут src = имя файла
Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда <IMG src=img.gif> заставит браузер отобразить на экране графический файл img.gif из текущего каталога.
Атрибут alt = «текст надписи»
Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt:
<IMG src=monstr.jpg alt=»Страшный зверь»>
Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию. Проверьте это на следующей картинке:
<IMG src=./pic07/cat7.gif alt=»А нас и тут неплохо кормят!»>
Атрибуты width = n и height = m
Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.
Если атрибуты не заданы, картинка рисуется в естественных размерах.
Атрибут border = n
Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов.
При отсутствии атрибута, или при значении n=0 рамка не рисуется.

1.5. Построение таблиц.

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

1.5.1. Как задать таблицу

Таблица задается командой <TABLE> … </TABLE>.
Внутри этих тэгов задаются строки командами <TR> … </TR>.
Наконец, внутри строк задаются клетки (ячейки) командами <TD> … </TD>.
Таким образом, по строкам, описывается вся структура таблицы.

Рис.1.3. Таблица

1.5.2.Атрибуты команды TABLE
Таблица 1.3. Атрибуты
Атрибут Значение Описание
Align left, right Выравнивание по горизонтали
Width Число или процент Ширина таблицы
Cellpadding число Расстояние между содержимым ячейки и рамкой
Cellspacing число Расстояние между ячейками таблицы
bgcolor цвет Цвет фона таблицы
Background файл Фоновая картинка
border число Ширина линий рамки
Bordercolor цвет Цвет линий рамки
Bordercolordark цвет Цвет рамки (снизу и справа)
Bordercolorlight цвет Светлый цвет рамки (сверху и слева)

1.5.3. Атрибуты команды TR
Таблица 1.4. Атрибуты команды TR
Атрибут Значения Описание
Align left, center, right Выравнивание по горизонтали
Valign top, center,bottom, baseline Выравнивание по вертикали
bgcolor цвет Цвет фона
Bordercolor цвет Цвет линий рамки
Bordercolordark цвет Цвет рамки (снизу и справа)
Bordercolorlight цвет Светлый цвет рамки (сверху и слева)

1.5.4. Атрибуты команды TD (TH)
Таблица 1.5. Атрибуты команды TD
Атрибут Значения Описание
Align left, center, right Выравнивание по горизонтали
Valign top, center, bottom, baseline Выравнивание по вертикали
Width число или процент Ширина ячейки
bgcolor цвет Цвет фона
background файл Фоновая картинка
Bordercolor цвет Цвет линий рамки
Bordercolordark цвет Цвет рамки (снизу и справа)
Bordercolorlight цвет Светлый цвет рамки (сверху и слева)
nowrap Выключение автоматического разрыва строк
colspan число Ширина большой ячейки (в столбцах)
rowspan число Высота большой ячейки (в строках)

1.6. Таблицы стилей
1.6.1. Уровни CSS
Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0.
Существуют три уровня CSS, определяемых наличием завершенной редакции структуры. Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательно утвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций, начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровень стилевого оформления электронных документов, принятый к обсуждению 23 мая 2001 года, на момент написания книги находился в стадии проработки).
Именно третий уровень (CSS 3) позиционируется разработчиками в качестве некой единой системы представления стилей в электронном документе, основанной на использовании специальных модулей.
1.6.2. Способы определения таблиц стилей
Определение таблицы стилей (стилевого шаблона) возможно четырьмя способами:
ссылка на внешний файл. Если все стилевые шаблоны для конкретного HTML-документа разместить в одном текстовом файле (с расширением ess), то с помощью специального тега <LINK> из текущего документа можно сделать ссылку на внешний CSS-файл стилевых шаблонов, например:
<LINK REL=»stylesheet» TYPE=»text/css» HREF=»style.css»>
Браузер, анализируя HTML-код, обратится по указанному пути и, обнаружив указанный файл стилевого оформления, отобразит элементы страницы в соответствии с определенными правилами CSS.
внедрение в документ. Под внедрением в документ подразумевается задание стилевой конструкции внутри самой HTML-страницы, например:

<STYLE TYPE=»text/CS3″>
<! —
BODY { font-family: Arial, Helvetica; }
INPUT { background-color: ICECECE; }
— >
</STYLE>

Данная конструкция также должна присутствовать в разделе HEAD.
включение в теговые конструкции. Любой отдельный HTML-элемент может быть подвергнут форматированию средствами CSS. Для этого необходимо задать определенное правило реализации того или иного тега, например:
<Р ALIGN=»justify» STYLE=»color: 1000000; font-family: Verdana;»> Текст параграфа…
импортирование. Импортирование стилевого шаблона CSS, по сути, аналогично указанию ссылки на внешний файл:

<STYLE TYPE-«text/css»>
<! —
@import: url(style.ess);
—>
</STYLE>
Все четыре способа определения стилевого шаблона CSS можно использовать одновременно в пределах одного HTML-документа (листинг 9.1). Такая возможность позволяет задавать основное правило CSS, к примеру, в виде внешнего файла шаблонов, а для исключительных или редких HTML-элементов — отдельные конструкции либо в теге <STYLE>, либо в кодовых конструкциях самих тегов.

 

1.7. JavaScript

JavaScript — язык подготовки сценариев, позволяющий сделать Web-страницы более интерактивными и функциональными. Для написания сценариев JavaScript обязательно требуется знание языка HTML
1.7.1. Использование JavaScript
Присмотритесь к сайтам, которые вы посещаете. На каждой странице содержится текст и некоторое количество картинок. Быть может, есть часы, показывающие время, или бегущий текст в строке состояния браузера. Возможно, на сайте имеется форма, которую нужно заполнить. Если пропустить какую-либо графу анкеты, то появится сообщение об ошибке. На некоторых страницах встречаются движущиеся по экрану изображения или текст, изменяющийся при щелчке мыши.
Таким образом, вы можете наблюдать JavaScript в действии, а создать подобные эффекты может любой человек, знающий этот язык.

1.7.2. Важность изучения JavaScript

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

1.7.3 Переменные в языке JavaScript

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

1.7.4. Создание переменных

В языке JavaScript переменные создаются довольно легко. Прежде всего нужно создать переменную. Это можно сделать двумя путями: объявив ее заранее или создав «на лету». Сначала будут рассматриваться переменные, объявляемые заранее.

1.7.5. Массивы JavaScript и Escape-последовательности

Массив (array) — мощное средство программирования для любого языка, в том числе в JavaScript. Массив позволяет сохранять несколько независимых значений в одной переменной. Обычно эти значения как-то связаны (например, названия дней недели). Преимущество массивов заключается в том, что правильное их использование значительно упрощает код и помогает избежать создания множества переменных с похожими именами.
1.7.6. Выражения, условия, операции, строки и числа

При изучении любого языка программирования (и JavaScript в том числе) время от времени приходится отвлекаться на попутные замечания.
Выражения и условия
С помощью переменных и массивов вы сохраняете в памяти компьютера любую нужную вам информацию в различных видах. Однако впоследствии вы можете сделать с этой информацией нечто большее, чем просто вывести ее на экран или поместить в окно предупредительных сообщений. Вы можете изменить ее, управлять ею или подвергнуть ее проверке. Для этих целей и предназначены выражения и условия.
Выражения (expressions) используются для комбинации двух или более значений, в результате чего получается третье, новое значение. Примером может служить сумма в следующем выражении:
1 + 2 = 3
Вы скомбинировали два значения (1 и 2), чтобы получить третье (3). Вот еще один пример:
3 + 3-1 = 5
Здесь комбинация трех значений (3,3 и 1) приводит к появлению нового значения (5).
Условия (conditions) позволяют сравнивать величины и определять логическое значение — true или false. Ниже приводится пример условия:
Лимоны желтые? Да.
Или другой пример:
3 + 3 = 6? Да.
Заметьте, что на оба этих вопроса можно дать только два ответа — да или нет (хотя на вопрос о лимонах можно ответить «наверное»). В языке JavaScript (и в других компьютерных языках) использование условий подразумевает только два результата — да или нет.

В выражениях и условиях данные комбинируются с помощью операций (operator). Если манипуляции осуществляются с какой-либо одной величиной, то такая операция именуется операцией с одним операндом (unary operator). Если таких величин две, то операция называется операцией с двумя операндами (binary operator), а если три — операцией с тремя операндами (ternary operator).

Раздел II. Практическая часть

2.1. Листинг сайта:

Заключение

В этом проекте был рассмотрен язык разметки гипертекстовых документов HTML, его основные функции свойства и параметры. Сегодня применение HTML практикуется во всех без исключения электронных документах, независимо от тематики, величины и коммерческой направленности Интернет проекта.
В данной работе такие технологии, как CSS JavaScript, были затронуты лишь поверхностно дабы показать эффективность совокупности использования HTML с интерактивными скриптовыми технологиями. Использование последних является отдельной темой, подходящей для отдельного проекта.

 
Список литературы

1. Айзекс А. Dynamic HTML BHV-Санкт-Петербург 1998
2. Ганчаров А. Самоучитель HTML. Питер 2000
3. Дарнелл Р. HTML 4 Энциклопедия пользователя ДиаСофт 1999
4. Денисов Internet Explorer 5 Справочник Питер 1999
5. Хоумер А. Dynamic HTML Справочник Питер 1999
6. Петюшкин А.В., HTML. Экспресс-курс. – СПб.: БХВ — Петербург, 2003
7. Кингсли-Хью Э., JavaScript: учебный курс. – СПб.: Питер, 2002
8. http://www.robotland.ru/

Источник

Разработка информационного web-приложения на основе JS-фреймворков

Содержание

Введение

Глава 1. Значение, виды и выбор фреймворка

1.1 Что такое библиотеки JavaScript

1.2 Виды JS фреймворков

1.3 Выбор JS фреймворка

Глава 2. Создание клиентского приложения

2.1 Выбор приложения и его тематики

2.2 Написание кода

2.3 Итог работы

Заключение

Литература


Введение

Сегодня, как никогда прежде, JS-фреймворки играют
большую роль в сайтостроении. Абсолютно все современные сайты построены
посредством взаимодействия HTML и JS-фреймворков, а так же Flash, PHP, Java и так далее, но это уже
не относится к теме данной курсовой работы. Анимация, красивые меню,
фотогалереи, плавные переходы от страницы к странице, диалоговые окна,
меняющиеся в зависимости от содержимого и многое другое, это все достигается
при помощи JavaScript библиотек, которые активно используются при создании различных
веб страниц. Поэтому тема данной курсовой работы является очень актуальной.

Целью данной курсовой работы является создание клиентского
приложения с использованием одного из существующий JS-фреймворков. Поэтому в
процессе выполнения курсовой работы необходимо решить следующие задачи:

·        Дать общее определение JavaScript библиотеки и рассмотреть
виды этих библиотек.

·        Выбрать одну из библиотек для создания
приложения.

·        Создать приложение с использованием одного
из фреймворков.

В первой главе приведено определение JavaScript библиотек, немного
истории создания. Рассматриваются различные библиотеки, после чего выбирается
один из этих фреймворков для создания клиентского приложения.

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


Глава 1.
Значение, виды и выбор фреймворка

1.1 Что такое
библиотеки JavaScript

Библиотека JavaScript — сборник классов и/или функций на языке JavaScript.

Язык JavaScript, изначально разработанный Netscape (а затем развиваемый Mozilla), долгое время
использовался в сети на многих сайтах, но широкую популярность получил с
приходом Веб 2.0 — периода развития компьютерных систем, в котором JavaScript совместно с различными
диалектами XML стал активно использоваться в разработке пользовательских
интерфейсов как веб-приложений, так и настольных приложений. JavaScript в связке с CSS используется для
создания динамических сайтов, более доступных, чем основанные на Flash альтернативы.

С увеличением популярности JavaScript, простота создания
динамических элементов пользовательского интерфейса стала играть ключевую роль
в веб-разработке. Этим обусловлен лавинообразный характер появления различных
библиотек JavaScript, таких как Ext и Dojo. С другой стороны, одним из последствий войны
браузеров стала разница в реализации объектной модели документа и это
обусловило необходимость затрачивать дополнительные усилия для реализации
корректной работы различных браузеров. Данное обстоятельство обусловило
появление библиотек JavaScript, предоставляющих кроссбраузерный интерфейс к методам DOM, таких как Prototype, script. aculo. us или jQuery.

Удобство использования библиотек JavaScript привело к тому, что Microsoft, Yahoo! и другие крупные
ИТ-компании разрабатывают свои собственные основанные на JavaScript библиотеки элементов
пользовательского интерфейса, встраиваемые в веб-приложения, разрабатываемые
этими компаниями.

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

Более того, некоторые библиотеки JavaScript позволяют упростить
взаимодействие JavaScript с другими языками, такими как CSS, PHP, Ruby и Java. Это позволяет упростить
запуск приложений JavaScript с приложениями, написанными на других языках
программирования.

1.2 Виды JS
фреймворков

Существует большое количество JavaScript библиотек, каждая из
которых предназначена для упрощения программирования на JavaScript. Все библиотеки имеют
свои особенности.

Рассмотрим несколько популярных библиотек:

Dojo — свободная модульная библиотека JavaScript.
Разработана с целью упростить ускоренную разработку основанных на JavaScript
или AJAX приложений и сайтов. Разработка библиотеки была начата Алексом
Русселом в 2004 году. Dojo Foundation — некоммерческая организация,
созданная для продвижения Dojo. Dojo используется в Zend Framework, начиная с
версии 1.6.0. Библиотека достаточно глючная. Многие примеры с официального
сайта не работают.

Элементы интерфейса dojo — это пакеты,
сформированные из компонентов: JavaScript-кода, разметки HTML и CSS. Они могут
быть использованы для добавления различных интерактивных возможностей к сайту:

·        меню, закладок,
всплывающих подсказок;

·        селекторов даты, времени;
часов;

·        сортируемых таблиц,
динамических диаграмм, векторной 2D графики;

·        элементов интерфейса
«дерево»;

·        различных HTML-форм с
возможностью проверки ввода пользователя;

·        анимированных эффектов, и
возможностей построения своих собственных эффектов.

Ext JS — библиотека JavaScript для разработки
веб-приложений и пользовательских интерфейсов, изначально задуманная как
расширенная версия Yahoo! UI Library, однако преобразовавшаяся затем в отдельный
фреймворк. До версии 4.0 использовала адаптеры для доступа к библиотекам Yahoo!
UI Library, jQuery или Prototype/script. aculo. us, начиная с 4-ой версии
адаптеры отсутствуют. Поддерживает технологию AJAX, анимацию, работу с DOM,
реализацию таблиц, вкладок, обработку событий и все остальные новшества Web
2.0.

jQuery — библиотека JavaScript, фокусирующаяся на
взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать
доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов
DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для
работы с AJAX.

Основные возможности jQuery:

·        Движок кроссбраузерных CSS-селекторов;

·        Переход по дереву DOM;

·        События;

·        Визуальные эффекты;

·        AJAX-дополнения;

·        JavaScript-плагины.

MooTools — это свободный
JavaScript-фреймворк для разработки кроссбраузерных веб-приложений и
веб-сервисов. MooTools является модульным, объектно-ориентированным
фреймворком, созданным для помощи разработчикам JavaScript. MooTools совместим
и протестирован с браузерами: Safari 2+, Internet Explorer 6+, Firefox 2+ (и
другими, основанными на движке Gecko), Opera 9+. Фреймворк MooTools
используется в CMS Contao, Joomla 1.5+, ZoneMinder, MODx. MooTools содержит
мощную коллекцию классов и продвинутую систему наследования, которая позволяет
вторичное использование кода, а также его расширение.

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

Prototype — JavaScript фреймворк,
упрощающий работу с Ajax и некоторыми другими функциями. Несмотря на его
доступность в виде отдельной библиотеки, он обычно используется программистами
вместе с Ruby on Rails, Tapestry, script. aculo. us и Rico.

Заявлено, что данный фреймворк совместим
со следующими браузерами: Internet Explorer 6.0+, Mozilla Firefox 1.5+, Apple
Safari 2.0.4+ и Opera 9.25+,Google Chrome 1.0+. В Prototype присутствуют самые
разные способы упрощения создания JavaScript приложений, например, сокращённый
вызов некоторых функций языка.

Rico — библиотека JavaScript для разработки
насыщенных интернет приложений. Предоставляется открытым кодом. Rico
предоставляет полную поддержку Ajax, управление посредством
«drag&drop» и библиотеку кинематографических эффектов. Rico
поддерживает JSON и Prototype.

Особенности Rico:

·        LiveGrid — элемент управления, позволяющий
автоматически обновлять HTML-таблицу через Ajax.

·        Animation Effects — В Rico 2.0
присутствует инструмент для анимирования, утверждается, что он более гибок, чем
другие веб-приложения для анимирования. Анимация в Rico может быть
приостановлена или остановлена, к ней могут быть применены другие эффекты, что
позволяет создавать анимацию, чутко реагирующую на действия пользователя.

фреймворк приложение программный код

·        Styling — Rico предлагает несколько
кинематографических и простых эффектов на своём очень простом интерфейсе.

·        Ajax Support — В Rico имеется
интерфейс для регистрирования Ajax-овых обработчиков запросов, а также
регистрирования объектов HTML и JavaScript как Ajax-овых обработчиков.

Yahoo! UI Library (YUI) —
библиотека JavaScript для создания богатых интерактивными возможностями
приложений или/и пользовательского интерфейса. Использует AJAX, анимацию,
надстройки над XMLHttpRequest и DOM, «drag-and-drop», слайдеры,
слайды, календари, деревья, табы и другое.

Разработанна Yahoo.com библиотека JavaScript
и CSS с открытым кодом. YUI включает утилиты JavaScript, фрэймворк CSS,
инструменты и устройства JavaScript для включения и управления модулями.

В настоящее время доступны две версии YUI. YUI 2 был запущен
в 2006, в него была включена львиная доля всех возможностей YUI. YUI 3 был
выпущен в 2009 с абсолютно новым синтаксисом, доказывающим легкость
использования библиотеки.

Underscore — библиотека JavaScript,
реализующая дополнительную функциональность для работы с массивами, объектами и
функциями, изначально отсутствующую в javascript, но имеющую аналоги в других
языках. Библиотека умеет делегировать вызовы, если какая-то функциональность
реализована разработчиками браузеров.

1.3 Выбор JS
фреймворка

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

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


Глава 2.
Создание клиентского приложения

2.1 Выбор
приложения и его тематики

Итак, выбрав необходимый нам фреймворк, встала задача, какое
же приложение создать, какова будет его тематика и содержание. У меня было
несколько вариантов приложений:

)        Каталог;

2)      Форум;

)        Фотогалерея;

)        Блог;

)        Онлайн библиотека;

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

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

По моим представлениям, данное приложение должно иметь такой
функционал:

)        Выпадающее меню с подкатегориями каждого из разделов
меню;

2)      Приятный, не режущий глаз, внешний вид;

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


2.2 Написание
кода

Для начала создадим стартовую страницу index. htm в которой будет содержаться
информация о внешнем виде нашего каталога. Создадим 2 вертикальных фрейма, в
одном из которых будет находиться выпадающее меню, а во втором будет
загружаться страница нужного нам товара, назовем его «content».

Код страницы index. htm:

<html>

<head>

<style
type=»text/css»>{background: #1C1C1C; }

</style>

</head>

<iframe src=»menu. htm»
width=»20%» height=»96%»
allowTransparency></iframe>

<iframe src=»pages/content. htm»
name=»content» width=»79%» height=»96%»
allowTransparency></iframe>

</html>

Для того чтобы создать меню, нам нужна библиотека jQuery. Для этого зайдем на
официальный сайт #»723965.files/image001.gif»>

(Рис.1)

Выглядит оно так, благодаря css файлу с описанием
оформления самого меню. В нем описаны Цвета шрифта, цвета фона меню, цвета фона
подменю, тип шрифта и т.д.

Файл menu. css находится в папке css, откуда и подключается в
меню.

Код файла menu. css:

. menu_slider

{width: 250px; }

. menuh

{padding: 5px 10px;: pointer;: relative;:
1px;weight: bold;: #E8E8E8;: #363636; }

. menu_conteiner

{display: none; }

. menu_conteiner a

{display: block;: #EEEED1;color: #4F4F4F;left:
10px;weight: bold;decoration: none; }

. menu_conteiner a: hover

{color: #EEEE00;decoration: underline; }

Создадим стартовую страницу, которая будет загружаться во
второй фрейм при запуске. Назовем ее content. htm и поместим в папку pages, откуда и будем брать
все страницы загружаемые во второй фрейм. В ней будет находиться информация о
нашем каталоге, о том что в нем находится.

Код файла content. htm:

<html>

<head>

<meta http-equiv=»content-type»
content=»text/html; charset=utf8″ />

</head>

<body text=»white»>

<center><h2>Каталог компьютерных комплектующих<h2></center>

<center><img src=»images/1.
jpg» width=»50%» height=»50%»></center>

<center>

В данном каталоге вы сможете подобрать себе любые
комплектующие для вашего персонального компьютера. </center>

<ins>

<center>

<li>Видеокарты</li>

<li>Оперативную память</li>

<li>Материнские платы</li>

<li>Жесткие диски</li>

<li>Процессоры</li>

<li>Блоки питания</li>

</center>

</ins>

</body>

</html>

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

Код файла 11. htm:

<html>

<head>

<meta http-equiv=»content-type»
content=»text/html; charset=utf8″ />

</head>

<body text=»white»>

<center><img src=»images/Seagate
Constellation ES.3 [ST4000NM0033]. jpg» width=»400″
height=»300″></center>

<h2>Общие характеристики</h2>

<li>ТипHDD

<h2>Назначениедля настольного компьютера</h2>

<li>Форм-фактор3.5″

<h2>Характеристики накопителя</h2>

<li>Объем4000 Гб

<li>Объем буфера128 Мб

<li>Скорость вращения7200 rpm

<li>Скорость записи175 мб

<li>ИнтерфейсSATA III

<li>Внешняя скорость передачи данных6 Гбит/с

<h2>Временные характеристики</h2>

<li>Среднее время задержки (Latency) 4.16 мс

<h2>Механика/Надежность</h2>

<li>Ударостойкость при работе70 G

<li>Ударостойкость при хранении300 G

<li>Уровень шума работы30 дБ

<li>Уровень шума простоя28 дБ

<h2>Габариты, Вес</h2>

<li>Ширина101 мм

<li>Высота/Толщина26 мм

<li>Длина/Глубина147 мм

<li>Вес0.7 кг

<center><a href=»content.
htm»>На главную</a></center>

</body>

</html>


2.3 Итог
работы

Итогом данной работы получилось приложение «Каталог
компьютерных комплектующих» скриншоты которой я представляю ниже.

На данном скриншоте изображена стартовая страница каталога:

(Рис.2)

На этом скриншоте продемонстрировано меню с подкатегориями
видеокарт и страница одной из них.

(Рис.3)

На этом скриншоте продемонстрировано меню с подкатегориями
процессоров и страница одного из них.

(Рис.4)


Заключение

В ходе написания курсовой работы был прочитан и
систематизирован теоритический материал по данной теме, а так же выполнены
следующие поставленные во введении задачи:

·        Описано что такое JS-фреймворки

·        Представлены виды фреймворков с кратким
описанием каждого из них

·        Был выбран целевой фреймворк, который в
дальнейшем использовался для разработки приложения

·        Было разработано приложение с
использованием фреймворка Jquery

Исходя из изученного нами материала, мы видим, что JS-фреймворки являются
неотъемлемой частью жизни большинства жителей нашей планеты. Используя интернет
и посещая тем самым различные веб страницы, пользователь сам не подозревая
того, использует JavaScript библиотеки. Без них любой современный сайт будет простым,
невзрачным HTML документом, содержащим информацию и не имеющим ничего такого, за
что бы мог «зацепиться глаз» посетителя этого сайта. Ведь заходить на
красиво оформленную страницу, с плавной анимацией меню или диалоговых окон,
видеть слайд-шоу из каких нибудь тематических картинок всегда приятнее, нежели
на страницу с обычным набором текста, с банальными ссылками и т.п.

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


Литература

1)      http://ru. wikipedia.org/wiki/Библиотека_JavaScript

2)      http://habrahabr.ru/

)        http://jqbook.net.ru/

)        http://ru.html.net/

)        http://www.stm.
dp.ua/web-design/color-html. php

)        Антон
Шевчук. Jquery. Учебник для начинающих.: 2013. — 123с.

)        Бенедетти
Р., Крэнли Р. Изучаем работу с jQuery. — СПб.: Питер, 2012. — 528 с.

)        Бер
Бибо, Иегуда Кац. jQuery. Подробное руководство по продвинутому JavaScript, 2-е издание. — Пер. с
англ. — СПб.: Символ-Плюс, 2011. — 624 с.

)        Каслдайн
Э., Шарки К. Изучаем jQuery.2-е изд. — СПб.: Питер, 2012. — 400 с.

10)
Самков Г.А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.:

БХВ-Петербург,
2011. — 416 с.

Источник

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

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

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

При генерации
страниц в Web возникает дилемма, связанная
с архитектурой «клиент-сервер».
Страницы можно генерировать как на
стороне клиента, так и на стороне сервера.
В 1995 году специалисты компании Netscape
создали механизм управления страницами
на клиентской стороне, разработав язык
программирования JavaScript.

Таким образом,
JavaScript — это язык управления сценариями
просмотра гипертекстовых страниц Web на
стороне клиента. Если быть более точным,
то JavaScript — это не только язык программирования
на стороне клиента. Liveware, прародитель
JavaScript, является средством подстановок
на стороне сервера Netscape. Однако наибольшую
популярность JavaScript
обеспечило программирование на стороне
клиента.

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

На практике это
выражается в том, что можно, например,
изменить цвет фона страницы или
интегрированную в документ картинку,
открыть новое окно или выдать
предупреждение.

Название «JavaScript»
является собственностью Netscape. Реализация
языка, осуществленная разработчиками
Microsoft, официально называется Jscript. Версии
JScript совместимы (если быть совсем точным,
то не до конца) с соответствующими
версиями JavaScript, т.е. JavaScript является
подмножеством языка JScript.

JavaScript
стандартизован ECMA
(European
Computer
Manufacturers
Association
— Ассоциация европейских производителей
компьютеров). Соответствующие стандарты
носят названия ECMA-262 и ISO-16262. Этими
стандартами определяется язык ECMAScript,
который примерно эквивалентен JavaScript
1.1. Отметим, что не все реализации
JavaScript на сегодня полностью соответствуют
стандарту ECMA. В рамках данного курса мы
во всех случаях будем использовать
название JavaScript.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

  • #
  • #
  • #
  • #
  • #
  • #
  • #
  • #
  • #
  • #
  • #
Источник


< Программирование, компьютеры и кибернетика

Поиск на сайте math-solution.ru рефератов, курсовых, дипломных и контрольных работ, презентаций и т.д.

курсовая работа на тему:

Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.

Категория: Программирование, компьютеры и кибернетика
Предмет: Техническая разработка программного продукта
Вид: курсовая работа

< Программирование, компьютеры и кибернетика

Источник

Введение…3

Глава1 Разработка web-сайта на основе HTML с использованием JavaScript…5

1.1История HTML…. ….….5

1.2.Гипертекст….…7

1.3. Основные элементы HTML….….9

1.4. Таблицы стилей, уровни CSS….…12

1.5.JavaScript….…13

1.6.JavaScript в действии….…15

1.7.Управление данными с помощью переменных…17

1.8. Переменные в языке JavaScript….…19

Глава 2 Техническое задание….….21

2.1 Общие положения….21

2.2 Цели и задачи….….21

2.3 Структура и состав….….21

2.4 Общие требования к системе….….22

2.5 Требования к Сайту….….22

2.6 Требования к дизайну….….23

2.7 Требования к внешнему виду….….23

2.8 Модульная сетка….….25

2.9 Требования к навигации….….26

2.10 Требования к каналам связи….….27

2.11 Структурная схема сайта….….27

2.12 Кадровое обеспечение….…27

2.13 Требования к системе тестирования….…27

2.14 Требования к аппаратной части функционирования ….….28

2.14.1 Клиентская часть….….28

2.14.2 Серверная часть….28

Глава 3 Разработка сайта….…30

3.1 Тестирование….30

3.2 Публикация сайта….30

3.3 Скриншот главной страницы….….32

Заключение….33

Литература….34

Термин HTML (Hyper Text Markup Language) означает «язык маркировки гипертекстов». Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные программные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.

HTML давно перестал быть просто языком программирования. Человек, изучавший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро, что в компьютерном мире не так уж и мало. Гипертекст подходит для включения элементов мультимедиа в традиционные документы. Практически именно благодаря развитию гипертекста, большинство пользователей получило возможность создавать собственные мультимедийные продукты и распространять их на компакт-дисках. Такие информационные системы, выполненные в виде набора HTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров. От пользователя требуется выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связь между ними.

HTML, как основа создания WEB-страниц, имеет прямое отношение и к новому направлению изобразительного искусства – WEB-дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить все это в Сети, продумать связь между WEB-страницами, чтобы все двигалось, откликалась на действие пользователя, поражало воображение, вызывало желание создать что-нибудь свое, оригинальное в этой области.

Актуальность исследования заключается в том, HTML-документ является переносимым продуктом. Это означает, что авторский труд будет легко доступен огромному числу пользователей, независимо от марки компьютера и типа операционной системы. Именно это свойство HTML-документов, а также их относительно малый размер, позволили с успехом использовать HTML-технологию для подготовки WWW-страниц в Интернете.

Объект данной работы — web-дизайн как область мультидисциплинарной деятельности по планированию, разработке и продвижению сайтов

Предмет исследования — разработка web-сайта на основе HTML.

Цель – создание сайта на тему «Разработка web-сайта на основе HTML с использованием JavaScript».

Для достижения цели нам необходимо решить следующие задачи:

Анализ предметной области

Изучение интернет-технологий

Планирование сайта и разработка технического задания

Создание сайта с использованием выбранных интернет технологий

Данная работа состоит из трех глав:

В первой главе данной работы планируется web-сайт. Рассматривается формулировка цели создания сайта, обсуждение аудитории, требование к содержимому и внешнему виду, технические требования, технологии реализации, схема и макет сайта.

Во второй главе разрабатывается техническое задание.

В третьей главе изучается реализация сайта, описывается тестирование, выпуск и публикация сайта. В заключении будет разработан сайт.

Глава 1 Разработка web-сайта на основе HTML c использованием JavaScript

1.1 История HTML

Версии HTML

Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для языка, ни для браузера не нашлось достойного применения. В 1993 году появился HTML+ , и эта версия также осталась практически незамеченной. Начало широкого использования гипертекста дала версия 2.0, которая, появилась в июне 1994 года. Это был год роста популярности WWW по всему миру. Элементы, включенные в версию 2 , в большинстве своем используются по сей день.

В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интервала, бесконечности, дроби, скобок и т.д.) при помощи элементов языка. Под эту версию был разработан браузер Arena. Но этот проект оказался тупиковым и не получил дальнейшего распространения.

В 1996 году появился HTML 3.2. Это было новаторское решение, в спецификацию языка были введены фреймы, которые стали теперь весьма популярны у разработчиков WEB-страниц. Даже сейчас на основе этой спецификации можно реализовать интересные дизайнерские решения. Практически все современные браузеры поддерживают версию 3.2, поэтому авторы WEB-страниц уверенны в работоспособности всех элементов.

Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум ), компании-производители браузеров создавали собственные элементы (расширения). Впоследствии, некоторые из этих элементов, после получения всеобщего признания включились в спецификацию следующих версий языка. Но новаторское решение – фреймы, не были включены в спецификацию 3.2. Но браузеры поддерживали фреймы и многие книги, посвященные HTML, содержали описание фреймов без упоминания о том, что это нестандартные элементы. В последствии, фреймы стали стандартом де-факто. В версии 4 они уже были включены на полном основании.

И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другими программными кодами версии 3.2, не сыграли той роли, которую были призваны сыграть. Это объясняется тем, что браузеры различных версий по-разному интерпретировали программы на разных языках JAVA, JAVASCKRIPT, Visual Basic (VBScript). В результате не удалось получить достаточно надежный работающий код, и данные языки использовались любителями HTML в основном для экспериментов.

Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт — программирования. Это оказалось немногим более эффективным, чем вводить в язык все новые элементы. Появившиеся в то время браузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был установлен определенный уровень стандартизации). Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определения версии браузера, чтобы потом использовать тот или иной фрагмент кода. Очевидно, что на программиста ложится обязанность тестирования страниц на всех популярных в настоящее время браузерах.

В результате, использование всех возможностей Dynamic HTML стало уделом программистов достаточно крупных организаций, где есть условия для разработки сложных программ и всестороннего их тестирования. Создателям личных WEB-страниц подчас приходится искать компромисс между надежностью и новаторством, чтобы получить достаточно грамотный HTML-код.

1.2 Гипертекст

Уже достаточно много времени затрачено на то, чтобы научиться при помощи HTML и браузера выводить на экран тексты.

Но это просто тексты. Используя мощный текстовый процессор, такой, как Microsoft Word, сверстать объявление, письмо брошюру и небольшую книгу можно гораздо быстрее, и результат будет лучшего качества.

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

Главных причин популярности HTML три. Вот они в порядке возрастания важности:

-HTML-программирование очень простое;

— В нем нет традиционных алгоритмических структур, таких, как развилка, цикл, процедура;

-Оно линейно в своей основе.

Многие авторы учебников даже стесняются называть HTML-тексты программами. Работу HTML-проектировщика они называют разметкой текста. На самом деле, в этом названии заключена методическая ошибка. Ведь оно (название) предполагает такой порядок работы:

берется обычный текст

и размечается, то есть, на него накладывается сетка из тегов так, чтобы браузер смог показать строчки текста на экране.

Однако, хорошие гипертекстовые документы при таком подходе получить гораздо сложнее, чем в случае когда, структура HTML-документа планируется еще до написания текстов. Ведь гипертекст устроен принципиально.

Переносимость.

Если, работая в Word’e, вы создаете документ для собственного потребления, у вас нет проблем. Нет проблем и тогда, когда вы посылаете свою работу в мир как печатную копию. Если же ваш партнер, издатель или коллега просит прислать электронную версию — начинаются проблемы.

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

Для того чтобы документ загрузился в Word, крайне желательно совпадение версий этого продукта у вас и вашего коллеги.

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

Но даже, если все эти условия выполнены, все равно мало шансов на то, что ваш товарищ увидит текст неискаженным (картинки вылезают из рамок, границы страниц плывут по тексту,.). Это происходит потому, что ваш Word и Word вашего партнера настроены по-разному.

После того, как по телефону (или электронной почте) редакторы будут настроены одинаково, текст все равно может выглядеть по-разному уже по причинам, известным только фирме Microsoft.

В этом проекте был рассмотрен язык разметки гипертекстовых документов HTML, его основные функции свойства и параметры. Сегодня применение HTML практикуется во всех без исключения электронных документах, независимо от тематики, величины и коммерческой направленности Интернет проекта.

В данной работе такие технологии, как CSS JavaScript, были затронуты лишь поверхностно дабы показать эффективность совокупности использования HTML с интерактивными скриптовыми технологиями. Использование последних является отдельной темой, подходящей для отдельного проекта.

1. Айзекс А. Dynamic HTML BHV-Санкт-Петербург 1998

2. Ганчаров А. Самоучитель HTML. Питер 2000

3. Дарнелл Р.html 4 Энциклопедия пользователя ДиаСофт 1999

4. Денисов Internet Explorer 5 Справочник Питер 1999

5. Хоумер А. Dynamic HTML Справочник Питер 1999

6. Петюшкин А.В., HTML. Экспресс-курс. — СПб.: БХВ — Петербург, 2003

7. Кингсли-Хью Э., JavaScript: учебный курс. — СПб.: Питер, 2002

Электронный ресурс

1. h**t://w*w.rabotaland.r* свободный

2. h**t://w*w.compkursy.r*/grafica свободный

3. h**t://informatikaiikt.narod.r*/obrabotkagraf1.html свободный

4. h**t://dic.academic.r* свободный

5. h**t://w*w.megabook.r* свободный

6. h**t://firstfield.r*/services/kg свободный

7. h**t://referat-kursovaya.repetitor.info/ свободный

8.

К работе прилагается Web-разработка.

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

К работе прилагается все исходники

Нужна похожая работа?
Закажите авторскую работу по вашему заданию.

  • Цены ниже рыночных
  • Удобный личный кабинет
  • Необходимый уровень антиплагиата
  • Прямое общение с исполнителем вашей работы
  • Бесплатные доработки и консультации
  • Минимальные сроки выполнения

Мы уже помогли 24535 студентам

Узнайте стоимость
написания вашей работы

Средний балл наших работ

  • 4.89 из 5

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *