Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта кинотеатра «Мороз»

Содержание:

ВВЕДЕНИЕ

Тема данной курсовой работы разработка сайта кинотеатра «Мороз». В данной курсовой работе, я попытаюсь разобраться в том, что нужно знать для написания WEB сайта.

Цели курсовой работы:

1) сайт должен иметь не менее шести страниц, вложенность не менее трех;

2) быстрый просмотр в современных браузерах;

3) создать карту сайта;

4) все страницы сайта должны быть наполнены осмысленной информацией.

Для выполнения поставленных требований необходимо:

- подготовить рисунки для размещения их на сайте;

- спроектировать таблицы стилей CSS для применения их на страницах сайта;

- разработать страницы сайта на основе HTML.

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

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

Определённый класс сайтов иначе называют интернет-представительством человека или организации. Сайты-визитки всё реже находят применение. Как комментарий к ссылке может быть страничка-визитка на полнофункциональном сайте (портале). Когда говорят «своя страничка в Интернет», то подразумевают целый сайт или личную страницу в составе чужого сайта (портал). Кроме сайтов (порталов), в сети Интернет также доступны WAP-сайты для мобильных телефонов. Сайт-портал - многокомпонентная разветвлённая структура, скомпонованная из функционально самодостаточных сайтов самостоятельных организаций или подразделений корпоративной структуры. Например, наличие филиалов, институтов академии, журналы и книжный отдел издательства, факультеты и институты университета, отделения в странах крупной транснациональной корпорации, и т. п. В простом представлении портал может представлять кафедру или факультет, где размещены сайты специалистов, сайт изданий, конференций, семинаров, новостной, научного подразделения, библиотеки и др.

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

В большинстве случаев в Интернете одному сайту соответствует однодоменное имя. Именно по доменным именам сайты идентифицируются в глобальной сети. Возможны иные варианты: один сайт на нескольких доменах или несколько сайтов под одним доменом. Обычно несколько доменов используют крупные сайты (веб-порталы) чтобы логически отделить разные виды предоставляемых услуг (mail.google.com, news.google.com, maps.google.com). Нередки и случаи выделения отдельных доменов для разных стран или языков. Например, google.ru и google.fr логически являются сайтом Google на разных языках, но технически это разные сайты. Объединение нескольких сайтов под одним доменом характерно для бесплатных хостингов. Иногда для идентификации сайтов в адресе после указания хоста стоит тильда и имя сайта: example.com/~my-site-name/ (ср. с/home), а чаще всего используется домен третьего уровня: my-site-name.example.com.

1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

1.1 Понятие сети Internet. Классификация сервисов Internet

Прародителем Интернет можно назвать организацию ARPA (Advanced Research Projects Agency) - Агентство передовых исследовательских проектов в области обороны при Министерстве обороны США (DOD), это агентство затем было переименовано в DARPA (Defense Advanced Research Projects Agency). Под эгидой (и финансированием) этого агентства была создана сеть ARPANET (Advanced Research Projects Agency NETwork).

В декабре 1969 г. были объединены четыре узла этой сети: UCLA - Центр испытаний сети, Станфордский исследовательский институт, университет Санта-Барбары и университет Юта. Через год их стало уже пятнадцать, и они использовали для обмена пакетами протокол NCP - Network Control Protocol.

В 1975 году экспериментальную сеть объявили рабочей, причем ответственность за нее была возложена на DCA (Агентство Оборонной связи США). Одновременно, специалисты занялись разработкой основ TCP/IP (Transmission Control Protocol/Internet Protocol — Протоколы управления процессом передачи/Internet-протокол). В 1983 году протоколы TCP/IP были приняты в качестве Военных Стандартов США (MIL STD), после чего от всех хостов (компьютеров), подключенных к APRANET стали требовать работать только с данными протоколами.

Одновременно стал распространяться термин «Internet», в то время APRANET была разделена на две отдельных сети: MILNET (Военная Сеть) — несекретная часть Оборонной Сети Передачи данных (DDN) и новую (уменьшенных размеров) APRANET. Термин Internet употребляли тогда, когда имели в виду сразу обе сети.

Основной целью создания этой сети было предоставление доступа к вычислительным ресурсам фонда (суперкомпьютерам) исследователям различных университетов США. Фонд поставил задачу, чтобы каждый ученый, каждый инженер в США оказались «подключены» к единой сети, а потому приступили к созданию сети с более быстрыми каналами, которая бы объединила многочисленные региональные и локальные сети.

В мае 1993 года NSF радикальным образом изменил архитектуру Интернета, поскольку правительство не хотело больше иметь дела с системами опорной сети. Вместо нее NSF выделило ряд «точек доступа в сеть» (NAP), в которых могли бы взаимодействовать друг с другом частные коммерческие опорные сети. В 1994 году NSF объявил о строительстве четырех NAP в Сан-Франциско, Нью-Йорке, Чикаго и Вашингтоне, округ Колумбия. Заказ NSF на четыре точки доступа в сеть был выполнен Ameritech, PacBell, Sprint и MFS Datanet. Дополнительная точка доступа, известная под названием MAE-West, была создана MFS Dananet на Западном побережье.

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

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

Можно разделить сервисы на сервисы интерактивные (on-line),прямые и отложенного чтения (off-line). Хотя эта классификация не является точной, так как одним и тем же сервисом (например,FTP) можно пользоваться как в режиме (on-line), так и в режиме (off-line).

Большинство сервисов Интернет работают с использованием принципа "клиент--сервер". Это означает, что, когда пользователь (клиент) запускает программу, запрашивающую какую-либо сетевую услугу (такую программу также называют "клиентом"), эта программа соединяется по сети с дpугой программой, такую программу называют "сервером", запущенной на другой машине сети. Компьютер, предоставляющая сетевую услугу, также называется сервером. Компьютер, подключенный к сети и отвечающий на запросы, называется хостом (host).

Сервером может быть любой хост (даже РС). Для этого на нем должны быть запущены соответствующие программы, предоставляющие сервисные сетевые услуги, или эти программы запускаются автоматически операционной системой, непосредственно после первого же обращения за услугой. Хост, на котором работает пользователь, называется локальным (localhost -- IP-имя компьютера любого пользователя). Компьютер-хост должен иметь 32-х разрядный IP-адрес и составное имя в доменной форме.

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

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

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

1.2 Понятие, цели и задачи WEB-сайтов. Классификация WEB-сайтов

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

Обычно при создании сайта преследуются следующие цели, одна или несколько:

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

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

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

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

5. Рекламировать имя фирмы (бренд) или товары, услуги, или и то и другое. Реклама в регионе, в соседних регионах, в России, по СНГ, вне России, другое. Требует большого объема работ по раскрутке и рекламе сайта, по сравнению с его созданием.

6. Корпоративно-управленческая, Решение некоторых задач управления: информационный центр для региональных (удаленных) партнеров, оформление заявок на сайте, двусторонний обмен информацией между центром и партнерами (филиалами), привлечение новых партнеров, другие. Обычно преследуется большими и разветвленными фирмами или организациями, в которых существует постоянный информационный обмен между территориально удаленными подразделениями. Через сайт в Интернете возможно организовать закрытый для посторонних обмен служебной информацией.

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

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

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

Что представляет собой создание персонального сайта? Это интерактивные сайты, которые в своей структуре имеют различные форумы, разделы обратной связи… Посвящены они, как правило, какой-то выдающейся личности, отсюда и получили свое название – персональные сайты.

1.3 Этапы проектирования WEB-сайтов

Веб-дизайн — вид графического дизайна, направленный на разработку и оформление объектов информационной среды интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества.

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

Дизайн основной и типовых страниц сайта. Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создает один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.

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

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

HTML-верстка. Утверждённый дизайн передаётся html-верстальщику, который «нарезает» графическую картинку на отдельные рисунки, из которых впоследствии складывает html-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны. В небольших студиях, html-кодированием занимается дизайнер, создавший макет сайта.

Программирование. Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS — системы управления сайтом. Веб-разработчики часто называют CMS «движком».

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

Завершающим этапом разработки сайта под ключ является конечно же тестирование. Веб-дизайн сайта должен адекватно выглядеть в различных браузерах, особенно в браузерах Internet Explorer, Firefox, Safari, Chrome и Opera.

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

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

Размещение сайта в Интернет. Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.

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

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

Внешняя SEO-оптимизация. Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка. К разработке сайта внешняя SEO-оптимизация не имеет отношения. Настоящая белая SEO оптимизация это трудоемкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.

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

2.ПРАКТИЧЕСКАЯ ЧАСТЬ

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

Необходимо разработать сайт «кинотеатр». Сайт должен быть выполнен, соблюдая следующие правила:

1) Общее количество разделов сайта должно быть не менее шести. Уровень вложенности - не менее трех.

2) язык разметки (написания) сайта –XHTML,HTML;

3) безошибочная работа, отображение в браузерах: InternetExplorer, MozillaFirefox, Opera (Chrome,Safari);

4) наличие страницы "Карта сайта";

5) все страницы сайта должны быть наполнены осмысленной информацией;

Задачи сайта кинотеатр:

- предоставление информации о фильмах. Дата выхода, предварительный обзор;

- информация о сеансах, цена билета;

- рекламная.

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

2.2 Разработка контента и оформление WEB-сайта

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

Структура любого сайта имеет вид:

<html>

<head>

<title>Оглавление страницы (в верхнем левом углу)</title>

</head>

<body>

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

</body>

</html>

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

рис1. Меню сайта кинотеатр

рис. 2 Структура сайта

Данная иерархия сайта может развиваться в любом направлении, посредством добавления новых разделов, иерархия выполнена в соответствии с заданием.

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

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

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

Пример меню «главной страницы» сайта «кинотеатр Дружба»:

Главная. Приветствие и логотип сайта .

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

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

Цены. Здесь вы можете определится с ценой и соответственно с форматом выбранного фильма.

Прокат dvd. Коротко об одной из услуг нашего кинотеатра.

Карта сайта. Не прилагая никаких усилия, вы сможете сразу выйти на нужную страницу.

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

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

2.3 Теги для структурирования и форматирования текста

HTML (HyperTextMarkupLanguage) — «язык гипертекстовой разметки»— стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.

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

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

Структурирование текста

<p>

Тег <p> создает новый параграф. Два или более тега <p>, идущих подряд, заменяются одним. Закрывающий парный тег необязателен.

Пример:

<palign="center"> далее текст

Атрибуты

align

Выравнивает заголовок в соответствии со следующими значениями:

• center – по центру

• left – по левому краю

• right – по правому краю

title

Всплывающая подсказка

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

Атрибуты

align

Выравнивает заголовок в соответствии со следующими значениями:

• center – по центру

• left – по левому краю

• right – по правому краю

title

Всплывающая подсказка

<pre>

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

<hr>

Тег <hr> добавляет в HTML документ горизонтальную линию. Перед и после линии помещается пустая строка. Закрывающий тег не требуется.

Атрибуты

size

Устанавливает высоту (толщину) линии в пикселах.

width

Устанавливает ширину линии в пикселах или процентах.

noshade

Создает линию без тени. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.

color

<br>

Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изобра- жения текстом (cм. атрибут ALIGN элемента IMG), понадобился дополнительный атрибут CLEAR. Элемент не имеет конечного тега.

Атрибуты

Clear. Указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения:

• all – завершить обтекание изображения текстом.

• left – завершить обтекание текстом изображения, выровненного по левому краю.

• right – завершить обтекание текстом изображения, выровненного по правому краю.

Тег <blockquote> предназначен для включения в документ длинных цитат, создавая отступы с обеих сторон текста (обычно задает отступ в 40 px) и отделяясь от остального текста пустыми строками. Требует обязательный парный закрывающий тег </blockquote>.

Списки

Нумерованные списки (упорядоченные).

<ol> – ordered list – задает нумерованные списки <li> – list item – элемент списка (</li> можно не использовать).

Маркированные списки

<ul> – unordered list type = "circle" "disk" "square"

Списки определений

Форматирование текста

Для форматирования текста, то есть задания шрифта, его цвета и размера используется тег <font>. При этом требуется также указывать и закрывающий тег </font>.

Физические стили

<b>полужирный текст</b> – полужирный текст

<i>курсив (италик)</i> –курсив (италик)

<tt>пишущая машинка</tt> (teletype) – пишущая машинка

<u>подчеркивание</u> –подчеркивание

<strike>зачеркнутый текст</strike> –зачеркнутый текст

<sup>верхний индекс</sup> –верхний индекс

<sub>нижний индекс</sub> –нижний индекс

Логические стили

<strong>полужирный текст</strong> – полужирный текст

<em>курсив (италик)</em> –курсив (италик)

<code>программный код</code> – программный код

<samp>sample – пример (моноширинный шрифт)</samp> – sample – пример (моноширин-ный шрифт)

<var>variable – переменная (часто курсив)</var> –variable – переменная (часто курсив)<kbd>keyboard (моноширинный или bold)</kbd> – keyboard (моноширинный или bold) <cite>cite – цитата (курсив)</cite> –cite – цитата (курсив)

<dfn>definition – определение (курсив)</dfn> –definition – определение (курсив)

Стилевое форматирование

Стилевое форматирование текста задается с помощью каскадных таблиц стилей (CSS).

2.4 Теги для работы с графикой в HTML - документе

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

Картинка, может быть и фоном, т.е. фон сайта не обязательно должен быть просто белым или черным, но фон нужно правильно подобрать, чтобы избежать «слияние» текста с изображением – его будет невозможно прочитать.

Вставка изображения в документ html. Для вставки графических элементов служит тэг <IMG>.

Пример в сайте:

Видим соответствующий тег и параметры изображения (высота, ширина)

Графика должна быть подготовлена предварительно в каком-либо графическом редакторе, либо получена с помощью цифрового аппарата или сканера, а можно просто взять уже готовое изображение. По возможности следует использовать графические файлы небольших размеров, дабы уменьшить время загрузки страницы браузером. Вряд ли стоит использовать на одной странице графические изображения размером, превышающим в сумме 100 kB. Такая страница будет грузиться очень долго у большинства пользователей и далеко не каждый дождется конца загрузки. Графика должна быть представлена в виде файлов с расширениями .jpg .gif. Многие пользователи отключают в своих браузерах поддержку графики, дабы увеличить скорость работы в Интернете. Атрибут Alt позволяет создать текст, который при необходимости должен быть отображен вместо графики. Чтобы вставить графику в текст html-страницы надо указать имя и место хранения соответствующего файла. Если файл находится в той же папке, что и страница, то достаточно указать имя файла с расширением. Если графический файл находится в другой папке, то, помимо имени файла с расширением необходимо указывать путь к этому файлу. Для выравнивания изображения по центу используется тэг <CENTER>, для размещения на новой строке - тэг <BR>

Добавление фона в документ html. Если белый фон страницы вас не устраивает, то с помощью атрибута BACKGROUND тэга <BODY>, можно снабдить страницу любым графическим фоном. Т.к. браузер автоматически размещает копии изображения таким образом, чтобы заполнить всю страницу, то изображение, применяемое для формирования фона можно делать небольшим по размеру.

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

Рамка придает изображению четкость и определенность. Для создания рамки служит атрибут BORDER тэга <IMG>. Используя этот атрибут можно указать толщину линии рамки в пикселях. Если указать нулевое значение, то рамка отображаться не будет.

Обтекание графики текстом в документе html. Если хотите, чтобы графический рисунок органически вписывался в дизайн вашей Вэб-страницы, то в этом вам поможет атрибут ALIGN тэга <IMG>. Этот атрибут допускает задание двух значений - left right. Значение left заставляет браузер помещать изображение слева от текста, а right - справа от него. Если надо, чтобы форматированию подвергался только определенный фрагмент текста, следует применить тэг BR с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики. Следует заметить, что если атрибут ALIGN уже был применен вами для выравнивания текста относительно графики в пределах конкретной Вэб-страницы, установить параметр обтекания графики текстом вам не удастся. Атрибут ALIGN дает возможность разместить текст между двумя графическими изображениями. В этом случае тэги, описывающие изображения, должны быть расположены над текстом, который будет заключен между ними.

Выравнивание текста html-страницы.Атрибут ALIGN тэга <IMG>, принимающий значения top, middle, bottom позволяет задавать вертикальное положение текста относительно границ графического изображения. По умолчанию браузер выравнивает текст по нижней кромке изображения. Если в строке текста включено несколько изображений, то выравнивание может привести к неожиданным эффектам. Следует учесть и тот факт, что если атрибут ALIGN уже был применен для задания параметра обтекания графики текстом, установить признак выравнивания текста относительно графики в пределах конкретной страницы не удастся.

Пустая область вокруг изображения html-страницы. Графические изображения в Вэб-браузере имеют, по умолчанию, пустую рамку в несколько пикселей, которая отделяет их от текста. Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>. Текст, отделенный от графики лучше усваивается, а пустая область между соседними изображениями предотвращает толкование их в виде единого целого. Атрибут HSPACE задает ширину чистой области СЛЕВА И СПРАВА от изображения. Атрибут VSPACE задает ширину чистой области СВЕРХУ И СНИЗУ от изображения.

Горизонтальная линейка html-страницы. Для построения горизонтальной линейки служит дескриптор <HR>. По умолчанию браузер строит линейку толщиной в 2 пикселя. Для изменения ширины и длины линейки служат атрибуты SIZE, WIDTH. По умолчанию браузер выравнивает линейку посреди страницы. Для изменения выравнивания надо воспользоваться атрибутом ALIGN.

Атрибут NOSHADE устраняет эффект объемности линейки. Списки с графическими маркерами html-страницы. С помощью маленьких изображений можно строить списки. Такие списки с графическими маркерами заметно оживляют внешний вид страницы. Размеры изображений должны соответствовать параметрам форматирования текста. Чтобы воспользоваться графическими маркерами, надо применить атрибут ALIGN, присвоив ему одно из значений - top, middle, bottom, позволяющих соответствующим образом выровнять строку текста элемента списка по вертикали относительно границ маркера. Улучшить внешний вид данных посредством задания ширины чистой полосы, отделяющей маркер от текста элемента списка, поможет атрибут HSPACE.

Преобразование формата изображения html-документа. Если картинка хранится в файле с расширением отличным от .gif или .jpg, то вам необходимо будет выполнить преобразование формата изображения в нужный. Для этого можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. Более подробно работа непосредственно с графикой рассматривается на ветке сайта"Графика". Изображения GIF (Graphics Interchange Format) могут содержать 256 цветов и используются, в основном, для отображения рисунков. Кроме того, этот формат обладает средствами поддержки анимации и прозрачности. Изображения JPEG (JPG) (Joint Photographic Experts Group) содержат более 16 млн. цветов. Данный формат используется для хранения фотографий и крупных изображений. Как правило, в процессе конвертации файла в формат .gif или .jpg его размер уменьшается, что способствует увеличению скорости загрузки картинки.

Задание размеров изображения html-документа. Задание размеров графического изображения явно (с помощью атрибутов WIDTH, HEIGHT) позволяет браузеру загружать картинку с большей скоростью, т.к. он не тратит время на дополнительные вычисления. Чтобы задать размер изображения, его, понятное дело, надо знать. Узнать размер можно, практически, в любом графическом редакторе. Если вы пользуетесь хорошим html-редактором, то он автоматически вставляет размер изображения в текст страницы при выборе соответствующего графического файла. Еще одним существенным плюсом задания размеров "вручную" есть тот факт, что пользователи, отключившие в своих браузерах средства обработки графики, увидят ваше творение именно в том виде, в каком оно замышлялось, поскольку область Веб-страницы, предусматривающие размещение в них графических изображений определенных размеров, останутся в неприкосновенности.

Увеличение размеров изображения html-документа. Задавая явно размеры изображения можно увеличить его размеры. Таким образом можно получить большое изображение не увеличивая объем графического файла и времени, требуемого для его загрузки. Задавая размеры изображения, указывайте нужные значения в пикселях или процентах относительно текущих габаритов окна браузера. Следует заметить, что не следует злоупотреблять увеличением размеров, т.к. в этом случае картинка становится "зернистой" и теряет свое качество. Если значение новых размеров задавать в пикселях, надо использовать оба атрибута WIDTH, HEIGHT. Чтобы избежать искажений, необходимо соблюдать пропорцию. Если же значения вводятся в процентах относительно размеров окна браузера, достаточно задать любое значение (ширину или высоту), - остальное браузер пересчитает автоматически.

Уменьшение изображения html-документа. Аналогичным способом можно уменьшать изображения. Однако здесь существует немаловажный недостаток. Время, необходимое для загрузки картинки остается то же. Т.е. картинка грузится своего "настоящего" размера, просто она "вжимается" в те рамки, которые вы явно указываете атрибутами WIDTH, HEIGHT. Таким образом, чтобы уменьшить размеры изображения, надо воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. После завершения редактирования рекомендую сохранить внесенные изменения в новом файле. Таким образом, вы всегда сможете воспользоваться исходным изображением.

Уменьшение разрешения html изображения. Уменьшение разрешения изображения позволяет сократить объем графического файла, а значит и время его загрузки браузером. Однако, следует учитывать тот факт, что уменьшение разрешения ведет к потере качества изображения. Большинство мониторов отображают графику с разрешением 72 пикселя на дюйм. Такое разрешение вполне приемлемо, если пользователи не собираются получать с изображения печатные копии.

Чтобы уменьшить разрешение изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. Атрибут LOWSRC позволяет воспроизвести в окне браузера изображение низкого разрешения в течение времени пересылки на компьютер пользователя исходного высококачественного изображения. Прежде чем воспользоваться данным атрибутом, вы должны создать картинку с низким разрешением. В html-коде надо использовать атрибуты WIDTH, HEIGHT для задания высоты и ширины изображения высокого разрешения, т.к. в противном случае в окне браузера оба изображения будут воспроизведены в формате, отвечающем упрощенной версии.

Уменьшение глубины цвета html изображения. Как же еще можно уменьшить размер графического файла? Если воспроизводится рисунок, содержащий не очень много различных оттенков цветов, то можно уменьшить глубину цвета. Что это значит. Формат GIF поддерживает палитру 256 цветов. Если будете преобразовывать в этот формат картинку, содержащую более 256 цветов, то похожие цвета будут подменяться "средним" цветом. А вот если преобразовывать в этот формат рисунок, с небольшой палитрой цветов, то может оказаться, что в изображении используется менее 256 цветов т.е. вместо 256 можно использовать 2 цвета, что существенно сократит объем файла). Таким образом, можно просто "выбросить" ненужные цвета. Следует заметить, что не стоит уменьшать глубину цвета изображения в формате JPEG, т.к. в этом случае мы добьемся обратного эффекта - сокращение палитры приведет к росту файла изображения. Чтобы уменьшить глубину цвета изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.

Прозрачность фона html изображения. Формат GIF позволяет установить прозрачный фон изображения. Иногда это бывает очень полезно, т.к. стираются границы между изображением и текстом страницы. Чтобы установить прозрачный фон изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. Надо отметить, тот факт, что для создания прозрачного фона, картинка должна обладать однородным фоном. Если это не так, то, с помощью графического редактора надо добиться однородности фона.

Чередующиеся html изображения GIF. Формат GIF обладает еще одним полезным свойством - он поддерживает режим чередования изображения при его загрузке. Что это такое? Изображения, не поддерживающие режим чередования, передаются строка за строкой, от верха к низу, и пользователь, прежде чем увидеть полное изображение на экране, должны ждать окончания процесса пересылки. При передаче чередующегося изображения его строки поступают через одну. Таким образом, пользователь видит сначала размытое изображение, которое постепенно обретает резкость. Свойство чередования очень полезно для загрузки больших изображений и страниц с перенасыщенной графикой. Чтобы снабдить изображение свойством чередования надо воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.

2.5 Разработка и настройка системы гиперссылок

Гиперссылка на другую html страницу. Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы. Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы. Для создания гиперссылки служит дескриптор <A>.

Гиперссылка в пределах html страницы. Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, на этой странице это гиперссылки в начале занятия, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы. Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры. Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.

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

Открытие html страниц в новом окне. При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.

Цвет текста гиперссылок. Атрибуты LINK, ALINK, VLINK задают цвет шрифта гиперссылок. Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем. Атрибут VLINK - уже посещенные ссылки. Атрибут ALINK - выделяет активную гиперссылку.

Порядок перехода по гиперссылкам. Некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга <A>. Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту TABINDEX некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение индекса, первой выбранной окажется та, которая в тексте страницы стоит выше. Следует сказать, что атрибутом TABINDEX можно пользоваться для выбора других объектов, например, графических изображений.

2.6 Тестирование и продвижение WEB-сайта.

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

Однако, это не совсем так. Чтобы не натолкнуться на мошенников и обманщиков, предъявляемую вам работу лучше оценить весьма взыскательно. Куда смотреть и на что обращать внимание? Об этом мы и попробуем вкратце рассказать. Итак, что входит в тестирование и продвижение web-сайта?

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

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

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

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

Также стоит иногда проводить разного рода «голосование» на сайте. «Устраивает ли Вас наш дизайн сайта», «что бы Вы хотели увидеть», «как Вы нас нашли»… задавая такие вопросы на собственном сайте, можно понять, что хочет видеть конечный пользователь сайта, от чего стоит отказаться или же наоборот добавить. Это очень полезная функция, от которой не стоит отказываться, возможно именно наш сайт, а не конкурента окажется в top100.

Так же есть множество «счетчиков», так называемый счетчик, простоя скрипт-программа, которая есть в бесплатном варианте на современных поисковиках Yandex, Google. Эти счетчики показывают количество посещений сайта, время, проведенное на Вашем сайте.

ЗАКЛЮЧЕНИЕ

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

В данной работе я использовал язык программирования Web-страниц HTML, каскадные таблицы стилей CSS, Java script.

Мой сайт содержит:

1) 10 страниц, 7 разделов, имеется вложенность равная трём;

2) быстро просматривается в современных браузерах;

3) создана карта сайта;

4) все страницы сайта наполнены осмысленной информацией.

Эти условия удовлетворяют требованиям к данной курсовой работе.

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

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

ПРИЛОЖЕНИЕ 1

В данном приложении, приведен код HTML страниц WEB сайта кинотеатр, здесь представлены основные страницы сайта, страниц более шести, остальные выполнены в схожем стиле.

Index.html (Главная страница)

<html>

<head>

</head>

<body>

</ul>

<h1><center><br>Кинотеатр "Дружба"</left></a></h1>

</div>

<li ><a href="index.html" >Главная</a></li>

<li><ahref="2.html"title="Сейчас в кинотеатре">Репертуар</a></li>

<li><ahref="3.html"title="Расписание сеансов">Расписание сеансов</a></li>

<li><ahref="5.html"title="ПрокатDVD">ПрокатDVD</a></li>

<li><ahref="6.html"title="Карта сайта">Карта сайта</a></li>

</ul>

</div>

<hr />

<h3>ГЛАВНАЯ</h3>

<br>

<center> <h3> Добро Пожаловать!</h3>

</div>

<hr />

<h3>Действующие скидки</h3>

<dl>

<dd>

Цена билета:<br>

обычный формат: до 17.00 — 50 руб., после 17.00 — 80 руб.<br>

формат 3D: до 17.00 — 110 руб., после 17.00 — 140 руб.<br><br>

действует в: <br>

1. День пенсионера — понедельник — (по пенсионному удостоверению)<br>

2. День студента — вторник (по студенческому билету) <br>

3. День «Дружбы» — среда (владельцам дисконтных карт, 1 карта = 1 билет) <br>

4. В свой день рождения — 2 билета по цене одного (по ксерокопии паспорта) <br>

5. Детям (фильмы для любой аудитории) цена билета до 17.00: <br>

обычный формат: пн-пт — 50 руб., сб-вс — 80 руб. <br>

формат 3D: пн-пт — 110 руб., сб-вс — 140 руб. <br>

Стоимость дисконтной карты — 100 рублей.<br>

</dd>

</div>

</div>

</div>

<hr />

!-- Footer -->

</div>

</div>

</body>

</html>

Page1.html (Показываем сегодня)

<html

<head>

</head>

<body>

</ul>

<h1><center><br>Кинотеатр "Дружба"</left></a></h1>

</div>

<li ><a href="index.html" >Главная</a></li>

<li><a href="2.html"title="Сейчас в кинотеатре">Репертуар</a></li>

<li><a href="3.html" title="Расписание сеансов">Расписание сеансов</a></li>

<li><a href="5.html"title="Прокат DVD">Прокат DVD</a></li>

<li><a href="6.html"title="Карта сайта">Карта сайта</a></li>

</ul>

</div>

<hr />

<h3>РЕПЕРТУАР</h3>

<li><a href="2-1.html">«ШерлокХолмс:Игратеней» (Sherlock Holmes: A Game of Shadows)</a></li>

<li><a href="2-2.html">«Хранительвремени» (Hugo)</a></li>

<li><a href="2-3.html">«Нокаут» (Haywire)</a></li>

<li><a href="2-4.html">«Иван Царевич и Серый Волк 3D»</a></li>

<li><a href="2-5.html">«Другоймир 4:Пробуждение 3D» (Underworld Awakening)</a></li>

<li><a href="2-6.html">«Девушкастатуировкойдракона» (The Girl with the Dragon Tattoo)</a></li>

<li><a href="2-7.html">«Высоцкий.Спасибо, что живой»</a></li>

</div>

<hr />

<h3>Действующие скидки</h3>

<dl>

<dd>

Цена билета:<br>

обычный формат: до 17.00 — 50 руб., после 17.00 — 80 руб.<br>

формат 3D: до 17.00 — 110 руб., после 17.00 — 140 руб.<br><br>

действует в: <br>

1. День пенсионера — понедельник — (по пенсионному удостоверению) <br>

2. День студента — вторник (по студенческому билету) <br>

3. День «Дружбы» — среда (владельцам дисконтных карт, 1 карта = 1 билет) <br>

4. В свой день рождения — 2 билета по цене одного (по ксерокопии паспорта) <br>

5. Детям (фильмы для любой аудитории) цена билета до 17.00: <br>

обычный формат: пн-пт — 50 руб., сб-вс — 80 руб. <br>

формат 3D: пн-пт — 110 руб., сб-вс — 140 руб. <br>

Стоимость дисконтной карты — 100 рублей.<br>

</dd>

</div>

</div>

</div>

<hr />

!-- Footer -->

</div>

</div>

</body>

</html>

Page2.html (Новинки кино)

<html>

<head>

</head>

<body>

</ul>

<h1><center><br>Кинотеатр "Дружба"</left></a></h1>

</div>

<li ><a href="index.html" >Главная</a></li>

<li><ahref="2.html"title="Сейчас в кинотеатре">Репертуар</a></li>

<li><ahref="3.html"title="Расписание сеансов">Расписание сеансов</a></li>

<li><ahref="5.html"title="ПрокатDVD">ПрокатDVD</a></li>

<li><ahref="6.html"title="Карта сайта">Карта сайта</a></li>

</ul>

</div>

<hr />

<h3>РАСПИСАНИЕ СЕАНСОВ</h3>

<li><ahref="3-1.html">Красный зал</a></li>

<li><a href="3-2.html">Синий зал</a></li>

<li><a href="3-3.html">Зелёный зал</a></li>

</div>

<hr />

<h3>Действующие скидки</h3>

<dl>

<dd>

Цена билета:<br>

обычный формат: до 17.00 — 50 руб., после 17.00 — 80 руб.<br>

формат 3D: до 17.00 — 110 руб., после 17.00 — 140 руб.<br><br>

действует в: <br>

1. День пенсионера — понедельник — (по пенсионному удостоверению)<br>

2. День студента — вторник (по студенческому билету) <br>

3. День «Дружбы» — среда (владельцам дисконтных карт, 1 карта = 1 билет) <br>

4. В свой день рождения — 2 билета по цене одного (по ксерокопии паспорта) <br>

5. Детям (фильмы для любой аудитории) цена билета до 17.00: <br>

обычный формат: пн-пт — 50 руб., сб-вс — 80 руб. <br>

формат 3D: пн-пт — 110 руб., сб-вс — 140 руб. <br>

Стоимость дисконтной карты — 100 рублей.<br>

</dd>

</div>

</div>

</div>

<hr />

!-- Footer -->

</div>

</div>

</body>

</html>

Page3.html (Это интересно)

<html>

<head>

</head>

<body>

</ul>

<h1><center><br>Кинотеатр "Дружба"</left></a></h1>

</div>

<li ><a href="index.html" >Главная</a></li>

<li><a href="2.html"title="Сейчас в кинотеатре">Репертуар</a></li>

<li><a href="3.html" title="Расписание сеансов">Расписание сеансов</a></li>

<li><a href="5.html"title="Прокат DVD">Прокат DVD</a></li>

<li><a href="6.html"title="Карта сайта">Карта сайта</a></li>

</ul>

</div>

<hr />

<h3>ЦЕНЫ НА БИЛЕТЫ</h3>

<li><a href="4-1.html">Cтандартный формат 35 мм</a></li>

<li><a href="4-2.html">Цифровойформат 2D</a></li>

<li><a href="4-3.html">Формат 3D</a></li>

</div>

<hr />

<h3>Действующие скидки</h3>

<dl>

<dd>

Цена билета:<br>

обычный формат: до 17.00 — 50 руб., после 17.00 — 80 руб.<br>

формат 3D: до 17.00 — 110 руб., после 17.00 — 140 руб.<br><br>

действует в: <br>

1. День пенсионера — понедельник — (по пенсионному удостоверению) <br>

2. День студента — вторник (по студенческому билету) <br>

3. День «Дружбы» — среда (владельцам дисконтных карт, 1 карта = 1 билет) <br>

4. В свой день рождения — 2 билета по цене одного (по ксерокопии паспорта) <br>

5. Детям (фильмы для любой аудитории) цена билета до 17.00: <br>

обычный формат: пн-пт — 50 руб., сб-вс — 80 руб. <br>

формат 3D: пн-пт — 110 руб., сб-вс — 140 руб. <br>

Стоимость дисконтной карты — 100 рублей.<br>

</dd>

</div>

</div>

</div>

<hr />

!-- Footer -->

</div>

</div>

</body>

</html>

Page4.html (О сайте)

<html>

<head>

</head>

<body>

</ul>

<h1><center><br>Кинотеатр "Дружба"</left></a></h1>

</div>

<li ><a href="index.html" >Главная</a></li>

<li><a href="2.html"title="Сейчас в кинотеатре">Репертуар</a></li>

<li><a href="3.html" title="Расписание сеансов">Расписание сеансов</a></li>

<li><a href="5.html"title="Прокат DVD">Прокат DVD</a></li>

<li><a href="6.html"title="Карта сайта">Карта сайта</a></li>

</ul>

</div>

<hr />

<h3>КАРТАСАЙТА </h3>

<a href="index.html" >Главная</a> <br>

<a href="2.html"">Репертуар</a>

<li><a href="2-1.html">«ШерлокХолмс:Игратеней» (Sherlock Holmes: A Game of Shadows)</a></li>

<li><a href="2-2.html">«Хранитель времени» (Hugo)</a></li>

<li><a href="2-3.html">«Нокаут» (Haywire)</a></li>

<li><a href="2-4.html">«Иван Царевич и Серый Волк 3D»</a></li>

<li><a href="2-5.html">«Другоймир 4:Пробуждение 3D» (Underworld Awakening)</a></li>

<li><a href="2-6.html">«Девушкастатуировкойдракона» (The Girl with the Dragon Tattoo)</a></li>

<li><a href="2-7.html">«Высоцкий.Спасибо, что живой»</a></li>

<a href="3.html" ">Расписание сеансов</a><br>

<li><a href="3-1.html">Красныйзал</a></li>

<li><a href="3-2.html">Синийзал</a></li>

<li><a href="3-3.html">Зелёныйзал</a></li>

<li><a href="4-1.html">Cтандартный формат 35 мм</a></li>

<li><a href="4-2.html">Цифровойформат 2D</a></li>

<li><a href="4-3.html">Формат 3D</a></li>

<a href="5.html"title="Прокат DVD">Прокат DVD</a><br>

</div>

<hr />

<h3>Действующие скидки</h3>

<dl>

<dd>

Цена билета:<br>

обычный формат: до 17.00 — 50 руб., после 17.00 — 80 руб.<br>

формат 3D: до 17.00 — 110 руб., после 17.00 — 140 руб.<br><br>

действует в: <br>

1. День пенсионера — понедельник — (по пенсионному удостоверению) <br>

2. День студента — вторник (по студенческому билету) <br>

3. День «Дружбы» — среда (владельцам дисконтных карт, 1 карта = 1 билет) <br>

4. В свой день рождения — 2 билета по цене одного (по ксерокопии паспорта) <br>

5. Детям (фильмы для любой аудитории) цена билета до 17.00: <br>

обычный формат: пн-пт — 50 руб., сб-вс — 80 руб. <br>

формат 3D: пн-пт — 110 руб., сб-вс — 140 руб. <br>

Стоимость дисконтной карты — 100 рублей.<br>

</dd>

</div>

</div>

</div>

<hr />

!-- Footer -->

</div>

</div>

</body>

</html>

Page5.html (Контакты)

/* CSS Document */

/* General */

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

font-size: 62.5%;

}

body {

height: 100%;

text-align: center;

font: 1.2em Verdana, Arial, Helvetica, sans-serif;

min-width: 950px;

}

#main {

width: 100%;

background: url('../img/main-bg.gif') repeat-y center 0;

min-height: 100%;

height: 100%;

position: relative;

}

body>#main {

height: auto;

}

a:link, a:visited {

color: #005AA1;

text-decoration: underline;

font-weight: bold;

}

a:hover {

text-decoration: none;

}

.cleaner {

clear: both;

height: 0;

font-size: 0;

visibility: hidden;

content: ' ';

}

.cleaning-box {

min-height: 1px;

}

.cleaning-box:after {

display: block;

clear: both;

visibility: hidden;

height: 0;

font-size: 0;

content: ' ';

}

.noscreen {

display: none;

}

.hidden { /* Skip menu */

position: absolute;

top: -10000px;

left: 0;

width: 1px;

height: 1px;

overflow: hidden;

}

/* Paragraphs, headings, ... */

p {

line-height: 170%;

margin-bottom: 10px;

color: #003B69;

}

h1 {

font-size: 2.8em;

font-weight: normal;

color: #FFFFFF;

text-align: left;

padding: 49px 0 0 42px;

background: url('../img/h1-bg-flame.png') no-repeat 0 43px;

}

h1 a:link, h1 a:visited {

font-weight: normal;

text-decoration: none;

color: #FFFFFF;

}

h2 {

font-size: 1.6em;

font-family: Georgia, "Times New Roman", Times, serif;

font-weight: normal;

color: #FFFFFF;

text-align: left;

margin: 3px 0 0 2px;

}

h3 {

font-size: 1.4em;

font-family: Georgia, "Times New Roman", Times, serif;

font-weight: normal;

color: #004C87;

letter-spacing: 1px;

padding-bottom: 3px;

border-bottom: 1px solid #004C87;

margin-bottom: 7px;

}

address {

font-style: normal;

line-height: 180%;

margin-left: 7px;

}

/* Images */

img.float {

float: left;

border: 1px solid #004C87;

margin: 0.5em 0.8em 0.5em 0;

}

/* Header */

#header {

height: 198px;

position: relative;

background: #004A75 url('../img/hd-bg.gif') repeat-x 0 0;

}

#header-in {

width: 900px;

height: 198px;

position: relative;

margin: 0 auto;

}

ul#navigation {

float: right;

margin: 8px 1px 0 0;

display: inline;

color: #FFFFFF;

}

ul#navigation li {

float: left;

display: inline;

list-style-type: none;

text-align: center;

font-size: 0.9em;

}

ul#navigation li a, ul#navigation li a:visited {

text-decoration: none;

color: #FFFFFF;

font-weight: normal;

}

ul#navigation li a:hover {

text-decoration: underline;

}

li#house {

background: url('../img/house.gif') no-repeat 0 1px;

padding-left: 24px;

}

li#house a {

margin-right: 16px;

}

li#sitemap {

background: url('../img/sitemap.gif') no-repeat 0 2px;

padding-left: 24px;

margin-left: 16px;

}

li#sitemap a {

margin-right: 16px;

}

li#envelope {

background: url('../img/envelope.gif') no-repeat 0 2px;

padding-left: 23px;

margin-left: 16px;

}

/* Search form */

form.searching {

width: 210px;

position: absolute;

top: 47px;

right: 0;

}

form.searching fieldset {

border: 0;

}

form.searching input.search {

letter-spacing: 1px;

float: left;

padding: 2px 0 2px 6px;

width: 139px;

border: 1px solid gray;

}

form.searching input.hledat {

letter-spacing: 1px;

padding-left: 0;

margin-left: 4px;

font-weight: bold;

color: #FFFFFF;

float: left;

}

form.searching label {

display: none;

}

/* Menu */

#menu-box {background: #4A4A4A url('../img/menu-bg.gif') repeat-x 0 0;

border-bottom: 3px solid black;

}

#menu {

width: 950px;

margin: 0 auto;

}

#menu li {

display: inline;

list-style-type: none;

text-align: center;

}

#menu li.first a {

margin-left: 1.6em;

display: inline

}

#menu li a {

float: left;

color: #FFFFFF;

font-weight: bold;

font-size: 1.1em;

display: block;

padding: 0.9em 1.4em 0.7em 1.4em;

}

#menu li a:hover, #menu li a.active {

color: #000000;

background-color: #D0F500;

font-weight: bold;

font-size: 1.1em;

}

/* Content box */

#content {

background: #FFFFFF url('../img/content-bg.gif') repeat-x 0 0;

min-height: 624px;

}

#content-box {

width: 950px;

margin: 0 auto;

background-color: #FFFFFF;

text-align: left;

border-right: 1px solid #B0B0B0;

border-left: 1px solid #B0B0B0;

padding-bottom: 80px;

min-height: 544px;

}

#content-box-in-left {

width: 70%;

float: left;

background-color: #FFFFFF;

}

#content-box-in-left-in {

margin: 1.8em 1em 7em 1.8em;

}

#content-box-in-right {

width: 29%;

float: right;

background-color: #FFFFFF;

}

#content-box-in-right h3 {

border: 0;

background-color: #252525;

color: #FFFFFF;

padding: 3px 0 4px 10px;

font-size: 1.3em;

}

#content-box-in-right-in {

margin: 1.8em 0 7em 1.5em;

}

#content-box-in-right-in dl {

margin: 0 0 40px 2px;

}

#content-box-in-right-in dt {

margin-bottom: 3px;

font-weight: bold;

background-color: #E2F5FF;

color: #002C4E;

line-height: 140%;

padding: 1px 0 1px 5px;

}

#content-box-in-right-in dd {

margin: 0 5px 18px 2px;

line-height: 140%;

}

/* Table */

table {

font-size: 1.1em;

border-collapse: collapse;

border: 2px solid #004C87;

margin: 15px 0 20px 0;

table-layout: fixed;

width: 90%;

}

th, td {

padding: 3px 13px;

border: 1px solid #004C87;

}

th {

text-align: right;

font-weight: bold;

}

td {

text-align: right;

}

.first-row {

background: #F4FF7C;

}

.first-row th {

text-align: center;

font-weight: bold;

border-bottom: 2px solid #004C87;

}

.first-column {

background: #FFD162;

border-right: 1px solid #004C87;

}

.last-column {

background-color: #FFD162;

border-left: 1px solid #004C87;

}

#footer {

width: 100%;

height: 60px;

background: #004A75 url('../img/footer-bg.gif') repeat-x 0 0;

position: absolute;

bottom: 0;

left: 0;

}

#footer-in {

width: 950px;

margin: 0 auto;

}

p.footer-left {

float: left;

width: 450px;

color: #FFFFFF;

text-align: left;

margin: 9px 0 0 15px;

display: inline;

}

p.footer-left a, p.footer-left a:visited {

color: #FFFFFF;

padding: 1px 2px;

}

p.footer-left a:hover {

background-color: #FFFFFF;

color: #006497;

}

p.footer-right {

float: right;

width: 450px;

color: #FFFFFF;

text-align: right;

margin: 9px 15px 0 0;

display: inline;

}

p.footer-right a, p.footer-right a:visited {

color: #FFFFFF;

padding: 1px 2px;

}

p.footer-right a:hover {

background-color: #FFFFFF;

color: #006497;

}

p.footer-right a, p.footer-right a:visited {

font-weight: normal;

}