Разработка и оформление электронного издания – учебного сайта «HTML5&CSS3»

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

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

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

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

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

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

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

Предметом данной курсовой работы является именно электронное издание — учебный сайт «HTML5&CSS3», содержащий в себе информацию о последних нововведениях web-технологий в области вёрстки сайтов. Как описывалось выше, популярность сетей растёт лавинообразно, поэтому профессии, связанные с web-разработкой, год от года становятся всё более распространёнными. Даже отставшего от жизни обывателя не удивишь словами «веб-дизайнер» или «веб-программист». Спрос на веб-дизайнеров огромен, и число людей, желающих научиться этому новому ремеслу, растёт с каждым днём. Данное электронное издание рассчитано для людей, ознакомленными с такими технологиями, как HTML и CSS, и главной целью поставлена задача — дать осведомлённость об актуальных тенденциях и научить их применять.

1. Анализ задания на проектирование

учебный сайт пользователь Сайт «HTML5&CSS3» — электронное издание, разработанное с целью донесения пользователям информации о новейших технологиях в web-индустрии и обучения правильному применению их возможностей. Данное издание не имеет печатных аналогов.

Издание рассчитано для людей, имеющих базовый объём знаний в данной сфере. Возрастная категория — от 15 до 50 лет, так как данным материалом могут заинтересоваться как школьники, так и взрослые люди, уже работающие в IT-сфере. Также аудитория пользователей не ограничивается социальным статусом и положением.

По стандартам к электронным образовательным ресурсам предъявляются требования, которые можно разделить на группы:

· Дидактические (научность, доступность);

· Специфические (интерактивность, визуализация, целостность);

· Психологические (переключаемость внимания);

· Технические (надежные и универсальные ПК, тестируемые, различные носители);

· Сетевые (Интернет-навигаторы);

· Эстетические (упорядоченность, выразительность элементов, цвета, размера, расположения, сочетания возрасту).

Сайт «HTML5&CSS3» соответствует всем выше перечисленным требованиям. Сайт разработан в учебных целях и доступен, так как является электронным изданием может распространяться на дисках, либо через сеть Internet. Соблюдена целостность издания, страницы сайта связаны максимум двумя кликами мышки по навигационному меню.

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

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

2. Аналитический обзор достижений в производстве и применении электронных изданий

Общение с обычным печатным учебником для большинства представляется более естественным и привычным. Учебные пособия можно читать в транспорте, во время еды и даже лежа в постели, причем во всех этих случаях практически с одинаковым успехом. Однако подготовка и тиражирование учебных изданий требует значительных затрат времени и материальных средств. В нашей стране никто таких расчетов не делал, а в штате Техас (США) Комитет по школьному образованию подсчитал, что дешевле обеспечить каждого школьника компьютером и учебниками в электронной форме, чем ежегодно расходовать огромные средства на печать этих учебников.

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

Остановимся на преимуществах и недостатках электронного пособия по сравнению с печатным. Существенных недостатков у электронного учебника два:

· необходимость специального дополнительного оборудования для работы с ним, прежде всего — компьютера с соответствующим программным обеспечением и качественным монитором, а иногда дополнительно также дисковода для компакт-дисков;

· повышенная утомляемость при работе с монитором.

Достоинств электронных учебников гораздо больше. К ним можно отнести:

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

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

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

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

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

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

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

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

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

Разработка сайта — сложный и трудоёмкий процесс, который состоит из нескольких этапов. Первым этапом является разработка макета в любом удобном графическом пакете. Особенность оформления любой web-страницы — блоковая структура. В поле экрана располагаются различные типы объектов (текст, кнопки, иллюстрации, интерактивные приложения). На этом этапе было определено, какие элементы будут присутствовать на странице и каким образом расположены. Для того, чтобы все элементы были упорядочены, использовалась модульная сетка.

Для выполнения макета был выбран растровый графический редактор Photoshop от производителя Adobe. Растровый графический редактор — специализированная программа, предназначенная для создания и обработки растровых изображений. Растровые графические редакторы позволяют рисовать и редактировать изображения на экране компьютера, а также сохранять их в различных растровых форматах, таких как, например, JPEG и TIFF, позволяющих хранить растровую графику с незначительным снижением качества за счёт использования алгоритмов сжатия с потерями, PNG и GIF, поддерживающими хорошее сжатие без потерь, и BMP, также поддерживающем сжатие (RLE), но в общем случае представляющем собой несжатое «попиксельное» описание изображения.

В данной работе были использованы изображения трёх форматов: JPEG для фотографий, PNG и GIF для картинок, требующих поддерживания прозрачности.

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

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

· Текстовый редактор.

· Браузер для просмотра результатов.

· Валидатор — программа для проверки синтаксиса HTML и выявления ошибок в коде.

· Справочник по тегам HTML.

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

· подсветка синтаксиса — выделение тегов, текста, ключевых слов и параметров разными цветами. Это облегчает поиск нужного элемента, ускоряет работу разработчика и снижает возникновение ошибок;

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

· проверка текущего документа на ошибки.

Для вёрстки данного электронного издания было выбрано Программное обеспечение для веб-дизайна Adobe® Dreamweaver® CS6, который содержит интуитивно понятный визуальный интерфейс для создания и редактирования веб-сайтов и мобильных приложений. Данный редактор предоставляет возможность просматривания макетов в панели «Многоэкранный просмотр» перед публикацией. Ещё одним достоинством данной программы являются горячие клавиши и подсказки, которые появляются при вводе первой буквы тега. Это не только не позволяет забывать названия тегов и атрибутов, но отстраняет от опечаток, которые могут привести к ошибкам в коде. При открытии нового документа создаётся файл с уже готовым каркасом страницы и актуальным! Doctype. Благодаря всем выше перечисленным достоинствам выбранного редактора, значительно увеличивается скорость вёрстки, по сравнению с редакторами, в которых нужно весь код печатать руками.

Web-страница — это гипертекстовый документ, создаваемый на языке HTML. Существуют специальные программы для просмотра HTML-страниц — браузеры. Они используются для навигации в сети Internet, связи с web-сервером, интерпретации html-кода, вывода на экран документов в заданном формате. Браузеры кроме этого поддерживают звук, видео и трёхмерную графику.

На первых порах подходит любой браузер, но с повышением опыта и знаний требуется установка наиболее популярных браузеров, чтобы проверять правильность отображения сайта в разных браузерах. Дело в том, что каждый браузер имеет свои уникальные особенности, поэтому для проверки универсальности кода требуется просматривать и корректировать код с их учетом. В ходе разработки курсового проекта были установлены такие браузеры, как Chrome, Mozilla Firefox, Opera и Internet Explorer 9. Internet Explorer отличается особой «прихотливостью» и требует особого внимания,

Mozilla Firefox — перспективный и развивающийся браузер, получивший признание во всем мире. Его особенность — простота и расширяемость, которая получается за счет специальных расширений, как они называются. Изначально Firefox имеет набор только самых необходимых функций, но, устанавливая желаемые расширения, в итоге можно нарастить браузер до системы, выполняющей все необходимые для вашей работы действия. Особенно полезным расширением является — FireBug, который очень полезен в процессе отладки кода и нахождения ошибок. Браузер Firefox является открытой системой, разрабатываемый группой Mozilla.

Один из старейших браузеров, который бесплатно поставляется вместе с операционной системой Windows. Это и определило его популярность. Версия IE 7 по удобству приблизилась к своим давним конкурентам, в частности, появились вкладки. К сожалению, этот браузер хуже всех поддерживает спецификацию HTML, поэтому для корректного отображения в IE приходится порой отдельно отлаживать код специально под него, в частности, установки на сайт дополнительных плагинов.

Браузер, появившийся на рынке в конце 2008 года. Разработан компанией Google. Отличительной чертой является — возможность ввода поискового запроса прямо в URL-строке, так как в данном браузере поисковая система по умолчанию — Google.

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

Описание возможностей HTML при проектировании электронного издания Графический редактор Adobe PhotoShop позволяет разработать и подготовить к дальнейшему использованию графическое оформление web-сайта. Но сама по себе графика еще не является web-страницей. Для того чтобы страница могла быть представлена пользователям Интернета, она должна быть описана на специальном языке, позволяющем задать нужную структуру документа. Этот язык называется HTML — язык разметки гипертекста. Гипертекстом называют набор статей, связанных между собой. Читатель (пользователь) может легко перемещаться между статьями (страницами), получая необходимую информацию.

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

На рис. 3.1 показан фрагмент файла, описывающего страницу при помощи языка HTML — именно так выглядит код web-страницы.

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

Рис. 3.1 — Фрагмент кода HTML-страницы Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.

Условно теги делятся на следующие типы:

· теги верхнего уровня;

· теги заголовка документа;

· блочные элементы;

· встроенные элементы;

· универсальные элементы;

· списки;

· таблицы.

Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги

и
относятся к категории списков, но также являются и блочными элементами.

У элемента есть начальный тег, который имеет вид , и конечный тег, где содержимое между угловыми скобками — имя тега. У тегов допустимы различные атрибуты, которые разделяются между собой пробелом и имеют такой вид: . Некоторые элементы, включая последний, называются одиночными, так как не имеют конечного тега, и закрываются перед последней скобкой слешем через пробел. Также есть теги, не несущие в себе контента, например, тег

.

HTML имеет один тег, который не относится ни к одному из выше перечисленных и употребляется в документе всего один раз. Это лемент, который предназначен для указания типа текущего документа — DTD. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML, похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

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

Ниже приведен список основных особенностей языка HTML.

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

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

3. Язык имеет широкий выбор средств задания внешнего вида web-страницы.

4. На web-странице, разработанной с использованием HTML, могут использоваться изображения (самостоятельные иллюстрации, текстуры и т. д.). Изображения могут использоваться в качестве ссылок, в том числе указывающих на несколько разных объектов (карт-изображений).

5. Имеется возможность загрузки на web-страницу аудиои видео-файлов.

6. На web-страницу могут быть помещены программы, работающие с пользователем.

Язык HTML предоставляет широкие возможности для разработки web-страниц и придания им привлекательного внешнего вида, однако при этом накладывается ряд ограничений. Основное из них, непосредственно касающееся графики — все размещенные на странице объекты должны иметь прямоугольную форму. Даже изображение чего-либо округлого будет прямоугольной формы. Это вызвано тем, что в файлы могут быть записаны только прямоугольные изображения. Закруглённые углы можно осуществить с помощью технологии CSS.

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

Для правильного отображения символов нужно выбрать кодировку файла. На данный момент общеприемлемой кодировкой является UTF-8, которая поддерживает как символы латиницы, так и кариллицы.

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

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

Сведения о формальном языке внешнего вида документа CSS

CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Актуальная на сегодняшний день версия технологии CSS3 позволяет полностью отказаться от нежелательных тегов и атрибутов HTML, отвечающих за визуальное представление данных, и даже от некоторых услуг графического пакета Adobe Photoshop.

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

Таким образом, описание внешнего облика HTML-страниц всецело и полностью отделено от HTML-документов и хранится во внешнем по отношению к ним файле. Модифицировав один CSS-файл, можно изменить оформление всех страниц, связанных с ним. Благодаря CSS мы имеем возможность:

· форматировать текст (назначить шрифт, его размер, цвет, начертание, подчёркивание, надчёркивание и т. д.);

· назначать фон (картинка, заливка цветом, заливка градиентом), рамки, закруглённые углы, тень и прозрачность элементам;

· указывать порядок отображения элементов и их точное позиционирование по координатам;

· располагать текст в несколько колонок;

· регулировать размеры и расстояния между элементами;

· назначать отдельные стили для разных режимов ссылок (активных, посещённых, непосещённых, при наведении курсора);

· загружать собственные шрифты;

Версия CSS2.1 поддерживается всеми браузерами, CSS3 — всеми, кроме IE до девятой версии. Для решения этой проблемы существует подключаемый плагин, называемый PIE.

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

cелектор {

cвойство1: значение 1;

cвойство2: значение 2;

}

Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Селектор определяет, к каким HTML-элементам будет применено данное правило. Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Применение CSS к документам HTML основано на принципах наследования и каскадирования.

Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p, а вот если для параграфа p средствами CSS задан цвет шрифта (например, color: green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе.

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

Описание возможностей языка Javascript

JavaScript — прототипно-ориентированный скриптовый язык програм-мирования. Более простыми словами — это язык подготовки сценариев, позволяющий сделать web-страницы более интерактивными и функциональными. Любой человек после его изучения сможет заниматься разработкой web-приложений на качественно новом уровне. Для написания сценариев обязательно требуется знание языка HTML. Сценарий (script) — это последовательность команд, которая интерпретируется и обрабатывается другой программой. Для написания сценария также достаточно текстового редактора.

JavaScript в действии можно наблюдать на любой web-странице. Это может быть сообщение об ошибке, бегущая строка, часы, показывающие время, или текст, изменяющийся при щелчке мыши.

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

JavaScript даёт власть над тем, как выглядит страница, и как она функционирует. Используя JavaScript в сочетании с новыми технологиями, представленными в последних версиях браузеров, такими как DOM (объектная модель документа) и каскадные таблицы стилей CSS, можно полностью контролировать всё, что происходит на странице.

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

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

В JavaScript:

· все идентификаторы регистрозависимы,

· в названиях переменных можно использовать буквы, подчёркивание, символ доллара, арабские цифры,

· названия переменных не могут начинаться с цифры,

· для оформления однострочных комментариев используются //, многострочные и внутристрочные комментарии начинаются с /* и заканчиваются */.

Объектная модель документа — интерфейс программирования приложений для HTML и XML-документов. Согласно DOM, документу можно поставить в соответствие дерево объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:

· получение узлов,

· изменение узлов,

· изменение связей между узлами,

· удаление узлов.

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

· управление фреймами,

· поддержка задержки в исполнении кода,

· системные диалоги,

· управление адресом открытой страницы,

· управление информацией о браузере,

· управление информацией о параметрах монитора,

· ограниченное управление историей просмотра страниц,

· поддержка работы с HTTP cookie.

Для добавления JavaScript-кода на страницу, можно использовать теги которые рекомендуется, но не обязательно, помещать внутри контейнера

. Контейнеров

HTML5

CSS3

$(function () {

$('#circle').fadeTo (. 5,2000);

$('#circle').circlemouse ({

onMouseEnter: function (el) {

el.addClass ('ec-circle-hover');

},

onMouseLeave: function (el) {

el.removeClass ('ec-circle-hover');

}

});

$('#circle_sec').fadeTo (. 5,2000);

$('#circle_sec').circlemouse ({

onMouseEnter: function (el) {

el.addClass ('ec-circle-hover');

},

onMouseLeave: function (el) {

el.removeClass ('ec-circle-hover');

}

});

Продолжение приложения, А Код страницы html. html



Харьковский Национальный Университет Радиоэлектроники

Кафедра ИКГ

Справочник по HTML5