33

Реферат

Данная работа посвящена созданию интерактивного веб-сайта с использованием CSS и JavaScript.

Веб-сайт создан в соответствии со стандартами HTML 4.01

В работе было выполнено:

1. Создание шаблона веб-страницы, используя HTML 4.01

2. Создание таблиц стилей под различные браузеры (CSS)

3. Написание JavaScript функций для придания интерактивности

4. Связывание веб-страниц между собой и объединение их в сайт

5. Подключение форума

Разработанный сайт является информативным и предоставляет информацию о звукозаписывающей студии «Mos Records». Для удобства и навигации по сайту, в верхней части его находится меню, которое при прокрутке страницы становиться полупрозрачным и возвращает свои свойства, при наведении на него указателя мыши. Меню позволяет прокручивать страницу до самого низа или верха, вернуться на главную страницу, осуществлять переход на страницу с контактами, где можно получить всю контактную информацию, просмотреть FAQ и узнать ответы на наиболее часто задаваемые вопросы, перейти на страницу студии в «Вконтакте», а также зайти на форум и т.д. Для удобства перехода к самым свежим новостям по краям сайта находятся окошки с наиболее интересными новостями. Окошки по умолчанию полупрозрачны при наведении указателя мыши, становятся непрозрачными. Также на сайте находятся часы, дата, информер погоды и метрика.

Содержание

Введение………………………………………………………………………...9

1. Специальная часть..………….…………………………………………....10
1.1 Постановка задачи………………………...……………………………….10
1.2 Интерактивные веб-страницы……………………………..………………11
1.3 Разработка шаблона веб-страницы…. ……………………………………12
1.4 Выбор языка разметки и языка программирования……………………...13
1.5 Создание веб-страниц...……………............................................................17
1.6 Создание таблицы стилей ..….………...………………………………......24
1.7 Подключение форума…. .………………………...…………………….....30
1.8 Написание функций для веб-страницы...………………………………....31 2. Технологическая часть……………………………………………………34 2.1 Описание процедуры создания интерактивной веб-страницы………….34 2.2 Руководство оператора…………………………………………………….37 2.3 Экранные формы…………………………………………………………...39 2.4 Блок схемы ряда функций…………………………………………………41 3. Экономическая часть……………………………………………………...43 3.1 Цель дипломного проекта…………………………………………………43 3.2 Вид и порядок расчета…………………………………………………….43 3.3 Объем и места внедрения…………………………………………………43 3.4 Достоинства разрабатываемой программы………………………………43 3.5 Источники экономии и дохода, источники финансирования…………..44 3.6 Порядок проектирования веб-страницы…………………………………44 3.7 Расчет себестоимости разработки методики……………………………45 3.8 Расчет цены программы………………………………………………….47 3.9 Расчет минимальной цены, выручки и прибыли……………………….48 3.10 Расчет единовременных затрат проектных организаций на приобретение методики………………………………………………………49 3.11 Расчет годовых единовременных затрат в сфере использования…….50 3.12 SWOT – анализ…………………………………………………………..50 3.12.1 Анализ рисков……………………………………………………….51 3.12.2 Финансовый план…………………………………………………...51 3.13 Выводы…………………………………………………………………...54 4. Безопасность жизнедеятельности и охраны труда…………………...55 4.1 Анализ условий труда…………………………………………………….55 4.2 Расчет искусственного освещения……………………………………….60 4.3 Электробезопасность……………………………………………………...66 4.4 Пожаробезопасность………………………………………………………68 5. Заключение…………………………………………………………………73 6. Список сокращений………………………………………………………74 7. Список используемой литературы………………………………………75

Введение

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

1. Осуществлять поиск новых клиентов;

2. Осуществлять поиск новых партнеров;

3. Информировать посетителей о текущих новостях студии;

4. Принимать заявки на звукозапись;

5. Предоставлять контактную информацию посетителям;

1. Специальная часть

1. Постановка задачи.

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

Исходя из сказанного выше, а также пожеланий заказчика предлагается выделить следующие страницы сайта:

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

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

3. Фото – фотоальбом;

4. Контакты – информация с контактной информацией;

5. Вконтакте – ссылка на страницу группы «Вконтакте»;

6. FAQ – предоставляет посетителю получить информацию на наиболее часто задаваемые вопросы;

2. Интерактивные веб-страницы

Самой популярной услугой Internet является World Wide Web WWW (Всемирная паутина). WWW - самая большая в мире информационная система. Технология WWW, созданная в 1992 году, представляет принципиально новую концепцию организации, модификации и размещения информации и навигации. Информация в WWW хранится на Web-узлах в виде Web-страниц, которые представляют собой текстовые файлы в формате HTML (HyperText Markup Language - Язык разметки гипертекста).

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

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

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

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

3. Разработка шаблона веб-страницы

Шаблон — это своеобразный образец, "скелет" Web-страницы, содержащий общие для всех страниц элементы. Когда мы создадим новую страницу на основе шаблона, нам остается только вписать в нужные места уникальное содержимое этой самой страницы и сохранить ее.

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

Рисунок 1 – типовое окно

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

4. Выбор языка разметки и языка программирования

На данным момент существуют три основных языка разметки веб-страниц, это:

1. HTML

2. XML

3. XHTML

HTML (HyperText Markup Language, язык разметки гипертекста) — это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ ее представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.

HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге

XML ( eXtensible Markup Language — расширяемый язык разметки ) - рекомендованный Консорциумом Всемирной паутины язык разметки, фактически представляющий собой свод общих синтаксических правил. XML — текстовый формат, предназначенный для хранения структурированных данных (взамен существующих файлов баз данных), для обмена информацией между программами, а также для создания на его основе более специализированных языков разметки (например, XHTML).

Стандартом определены два уровня правильности документа XML:

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

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

XHTML (EXtensible HyperText Markup Language, расширяемый язык разметки гипертекста) предназначен для замены HTML и считается его более строгой версией. Если рассуждать о некотором идеальном коде веб-страницы, то его можно сравнить с программой, которая не будет скомпилирована до тех пор, пока все ошибки не исправлены. Браузер выступает в роли компилятора и не отображает документ, если он не соответствует спецификации. XHTML, сохраняя все особенности HTML, вносит более строгие правила создания страниц, чтобы приблизиться к «идеальному» коду. Это позволяет делать сайты независимыми от устройства отображения и браузера.

Автором данной работы было принято решение использовать язык разметки HTML из-за его надежности, эффективности и соответствии стандартам.

Языки веб-программирования делятся на две группы:

1. клиентские

2. серверные

Клиентские языки - Как следует из названия, программы на клиентских языках обрабатываются на стороне пользователя, как правило, их выполняет браузер. Это и создает главную проблему клиентских языков — результат выполнения программы (скрипта) зависит от браузера пользователя. С другой стороны, если программист возлагает надежды на серверные программы, то он может упростить их работу и снизить нагрузку на сервер за счет программ, исполняемых на стороне клиента, поскольку они не всегда требуют перезагрузку (генерацию) страницы. Самыми распространенными клиентскими языками программирования являются: JavaScript, VBScript, ActionScript, Java.

Серверные языки - Когда пользователь дает запрос на какую-либо страницу, то вызванная страница сначала обрабатывается на сервере, то есть выполняются все программы, связанные со страницей, и только потом возвращается к посетителю по сети в виде файла. Этот файл может иметь расширения: HTML, PHP, ASP, Perl, SSI, XML, DHTML, XHTML.

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

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

Популярными среди систем управления базами данных являются: Firebird, IBM DB2, IBM DB2 Express-C, Microsoft SQL Server, Microsoft SQL , Server Express, mSQL, MySQL, Oracle, PostgreSQL, SQLite, Sybase Adaptive, Server Enterprise, ЛИНТЕР, MongoDB.

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