Разработка информационного WEB-сайта

Автор работы: Пользователь скрыл имя, 09 Мая 2013 в 10:10, курсовая работа

Описание работы

Цель дипломной работы создание WEB-сайта для МБОУ «Средняя общеобразовательная школа №130» Московского района г. Казани средствами языка HTML с использованием JavaScript.
Задачи дипломной работы:
Рассмотреть этапы разработки WEB-сайта.
Сбор и обработка материала для WEB-сайта
Изучить структуру HTML.
Создать сайт с использованием языка HTML и JavaScript.

Содержание работы

Введение. 3
Глава I. Современные Интернет-технологии. 5
1.1 Web-дизайн и браузеры. 5
1.2 Обеспечение доступности Web-страницы 9
1.3 Представление текста на Web-страницах 14
1.4 Представление графики на Web-страницах 17
Глава II. Разработка информационного WEB-сайта. 22
2.1 Описание языка HTML для создания сайта. 22
2.2 Объектная модель JavaScript. 32
Глава III. Практическая часть. 37
Заключение. 43
Список литературы. 44

Файлы: 1 файл

диплом.doc

— 2.31 Мб (Скачать файл)

Содержание

 

 

 

 

 

Введение.

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

Технология World Wide Web, в переводе Всемирная паутина получила столь широкое распространение из-за простоты своих пользовательских интерфейсов. Принцип жми на то, что интересно, лежащий в основе гипертекста, интуитивно понятен. В технологиях WWW все ключевые понятия просматриваемого документа: слова, картинки - имеют возможность раскрыться новым документом, развивающим это понятие. Такой способ представления информации называется гипертекстом, а документы, представленные в таком виде – гипертекстовыми документами. Для описания этих документов используется специальный язык - язык описания гипертекстовых документов или HTML (англ. вариант Hyper Text Markup Language).

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве(Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.

Цель дипломной работы создание WEB-сайта для МБОУ «Средняя общеобразовательная школа №130» Московского района г. Казани средствами языка HTML с использованием JavaScript.

Задачи дипломной работы:

  • Рассмотреть этапы разработки WEB-сайта.
  • Сбор и обработка материала для WEB-сайта
  • Изучить структуру HTML.
  • Создать сайт с использованием языка HTML и JavaScript.

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

 

Глава I. Современные Интернет-технологии.

1.1 Web-дизайн и браузеры.

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

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

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

Браузеры Netscape Navigator и Microsoft Internet Explorer. На рынке доминируют два основных браузера: Netscape Navigator и Microsoft Internet Explorer. Вместе они, включая все их версии, представляет примерно 90 % (или более) используемых сегодня браузеров.

Эти два браузера конкурируют между собой за господство на рынке. Результатом их борьбы стала коллекция фирменных HTML-тегов, а также несовместимые реализации различных технологий (печально известный Dynamic HTML, а также JavaScript и Cascading Style Sheets – каскадные таблицы стилей). С другой стороны, конкуренция между Netscape и Microsoft в целом способствовала более быстрому развитию среды Web.

Большинство Web-авторов  в своей работе ориентируются  на Navigator и Internet Explorer, поскольку они  занимают львиную долю рынка. Тем не менее, существует ряд других браузеров, которые вы можете принимать во внимание.

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

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

Несмотря на заявления Microsoft, что DHTML поддерживается всеми платформами, он особенно ненадежен на компьютерах платформы Масintosh.

Браузеры America Online. Пользователи America Online (AOL) используют один из семи возможных  браузеров (в зависимости от платформы и версии программного обеспечения AOL), некоторые из них обеспечивают только самую минимальную поддержку HTML.

Последняя версия America Online для PC –  это версия 3.0, использует адаптированную версию браузера Microsoft Internet Explorer 3.0. Тем  не менее, не всегда можно полностью положиться на эту версию так же, как на стандартный вариант MS Internet Explorer 3.0. (Функциональность особенно ограничена для пользователей компьютеров Macintosh). Многие разработчики Web не раз ужасались, увидев дизайн своего сайта (который великолепно работал в большинстве основных браузеров), после того как он был запущен в системе AOL и отображен одним из их браузеров.

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

Кроме того, некоторые  технологии, такие как Java и Cascading Style Sheets (каскадные таблицы стилей), не доступны для пользователей Windows 3.0 (примерно 40 % пользователей AOL). Владельцы компьютеров Macintosh не смогут использовать JavaScript и ряд других возможностей (примерно 8 % пользователей).

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

WebTV приводит в наши  квартиры Web через обыкновенный телевизор  с пультом дистанционного управления (также, по желанию, можно использовать клавиатуру). Для просмотра Web-страниц WebTV использует собственный специализированный браузер. Он осуществляет синтаксический анализ в соответствии – со стандартом HTML 3.2, но не предоставляет возможностей отображения фреймов, Java, JavaScript, ActiveX или любого другого формата, который требует встраиваемых приложений (за исключением встроенных Shockwave и RealAudio 3.0). Также создано много новых фирменных HTML-тегов, которые используются только в WebTV.

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

Opera – это маленький  и простенький браузер, созданный  норвежской компанией Opera Software в  Осло. Этот браузер обладает исключительно  малым временем загрузки и  минимальными требованиями к объему диска. Достоинством Opera является полное соответствие стандартам HTML. Неточности в написании тегов (например, пропущенные закрывающие теги, неправильное вложение и т. д.), которые пропускают более солидные браузеры, не будут правильно отображаться этим браузером. Opera 5.0 поддерживает Java, каскадные таблицы стилей и DHTML.

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

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

Люди действительно  используют Lynx, поэтому не стоит удивляться, если клиент закажет разработку сайта для Lynx. Этот браузер также важен для инвалидов по зрению: они используют Lynx вместе с речевыми устройствами.

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

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

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

1.2 Обеспечение доступности Web-страницы

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

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

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

Достойный уважения Web-дизайн включает разработку страниц, доступных для пользователей с ограниченными возможностями, в частности по зрению и слуху. Консорциум World Wide Web объявил об инициативе Web Accessibility Initiative (WAI), которая ставит целью сделать Web более доступным для всех пользователей. Однако успех данной инициативы зависит от участия в ней рядовых разработчиков, которые могут (или не могут) создать Web-сайты в соответствии с поставленными задачами.

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

Спецификация HTML 4.0 вводит ряд новых атрибутов и тегов, созданных специально для того, чтобы сделать Web-документы доступными для более широкого круга пользователей. Кратко перечислим некоторые новые возможности HTML 4.0. (Расширенный список возможностей размещен на сайте http://www.w3.org/WAI/References/HTML4-access, а полные спецификации данной версии – на сайте http://www.w3.org/TR/REC-html40).

HTML 4.0 предлагает следующие  новые возможности, обеспечивающие  доступность:

– дальнейшее разделение структуры документа и его  внешнего представления. Информацию о  стиле HTML 4.0 предлагает размещать в каскадных таблицах стилей;

– навигационная помощь, например, клавиши доступа и индексирование порядка табуляции для доступа  к элементам страницы с использованием только клавиатуры;

– рекомендации, касающиеся новой клиентской карты-изображения, объединяющей графические и текстовые ссылки;

– новые теги <abbr> и <acronym>, которые помогают речевым  и другим устройствам интерпретировать аббревиатуры и акронимы;

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

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

– улучшенный механизм создания альтернативного текста. Атрибут alt теперь обязателен для тега <img>. Чтобы обеспечить связь с более  длинными текстовыми пояснениями к  изображениям, введен атрибут longdesc.

Информация о работе Разработка информационного WEB-сайта