Проектирование тематического Web-сайта

Размещено на http://www.allbest.ru

Размещено на http://www.allbest.ru

Аннотация

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

Результатом моей курсовой работы является готовый веб-сайт, который я создавал совместно с Кузиным Антоном. На первых этапах нам надо было решить ряд основных вопросов.

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

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

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

Еще один важный вопрос - выбор средства для разработки сайта. А именно веб-редактор. Веб-редактор должен быть удобным в использовании, доступным и многофункциональным. Выбор инструмента для разработки сайта подробно рассмотрен в курсовой работе Кузина Антона. Мы выбрали WYSIWYG (является аббревиатурой от англ. What You See Is What You Get, «что видишь, то и получишь») редактор Adobe Dreamweaver. Это графический редактор, который позволяет строить макет страницы и задавать стили визуально. Он является удобным инструментом для построения дизайна страницы, хотя, как известно каждому опытному веб дизайнеру, код все равно придётся "причесывать" для достижения наилучшего результата. В своей курсовой работе я рассмотрю некоторые проблемы при создании веб-сайта:

Проблема высокого уровня нагрузки на хостинг и создания уникального контента

Проблема создания уникального контента

Некроссбраузерная верстка

Грамотное создание внешнего дизайна ресурса



Оглавление

Введение

1.Актуальность выбранной тематики

1.1Информационная функция

1.2 Реклама

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

3.Математическая постановка задачи

4. Проблемы при построении грамотного сайта

4.1 Проблема высокого уровня нагрузки на хостинг и создания уникального контента

4.2 Проблема создания уникального контента

4.3 Некачественный код

5.Выбор CMS

5.1 Joomla

5.2 Drupal

5.3 WordPress

Заключение

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

Приложение

Приложение 1

Приложение 2

Приложение 3

Приложение 4



Введение

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

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

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

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

Кроме того, в сети Internet можно хранить и выводить на экран графику и фотоснимки, воспроизводить звук, а также просматривать анимацию и видеозаписи.

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

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

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

Такой способ рекламы имеет ряд преимуществ:

Информацию о предприятии может увидеть любой человек на Земле

Создав сайт можно забыть о нем. Он будет работать без какого-либо вмешательства

Создав сайт можно опередить своих конкурентов с своем регионе

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

На сайте можно быстро поменять информацию о предприятии



1.Актуальность выбранной тематики

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

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

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

Почему веб-сайты так популярны? Как они влияют на успех компании?

1.1Информационная функция

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

1.2Реклама

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



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

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

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

web сайт гипертекстовый контент

3.Математическая постановка задачи

Сайт будет иметь следующую структуру:

Главная страница - последние новости о компании.

Туры - этот раздел содержит список категорий туров, каждая категория имеет свою Web-страницу. Этот раздел имеет следующие категории:

Горячие путевки

Туры по странам

Круизы по миру

Лучшие пляжи мира

Крым

Лечебные туры

Детские каникулы

Продажа - раздел содержит Web-страницы со следующими основными темами:

Расценки

Скидки

Вопросы

Подарочные сертификаты

Услуги - содержит основную информацию об услугах предприятия:

Способы оплаты

Реквизиты

Документы

Условия продаж

Гарантии

Вакансии - вакансии в туристической кампании "Аврора".

О компании - информация о компании:

О нас

Новости

Наши акции

Вакансии

Контакты

Блог

Facebook

В контакте



4.Проблемы при построении грамотного сайта

Во время построения сайта нужно брать во внимание ряд проблем:

Проблема высокого уровня нагрузки на хостинг и создания уникального контента

Проблема создания уникального контента

Некроссбраузерная верстка

Грамотное создание внешнего дизайна ресурса

Разумеется, это не все проблемы, есть еще ряд других проблем:

Количество страниц и количество вариантов выбора на этих страничках

Работоспособность скриптов

Удачное размещение

Раскрутка

Постоянное пополнение информацией сайта

Но в этой курсовой работе мы не будем их рассматривать.

4.1 Проблема высокого уровня нагрузки на хостинг и создания уникального контента

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

Существует несколько способов повышения быстродействия сайта:

Увеличение полосы пропускания

Установка высокопроизводительного сетевого оборудования

Оптимизировать и модернизировать программные и аппаратные компоненты Web-сервера

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

При этом не требуется выведение из эксплуатации старых серверов. Распределение нагрузок приходящихся на несколько серверов позволяет избежать ситуаций, когда передаваемые Web-пакеты обрушиваются на один сервер, в то время как другие простаивают без дела. Для распределения нагрузки между Web-серверами обычно используется функция DNS, именуемая циклической выборкой, которая предусматривает возможность круговой передачи IP-адреса любого Web-сервера, составляющего сайт, любому клиенту; в итоге все Web-серверы становятся в равной степени загружены трафиком. Но если вычислительные способности серверов неодинаковы, то этот способ распределения нагрузки не самый оптимальный.

Понятно, что оснащенная двумя 450-мегагерцевыми процессорами Pentium III и памятью емкостью 1 Гбайт система под управлением Windows 2000 Server может взять на себя более тяжелую ношу, нежели система Windows NT Server с одним 300-мегагерцевым процессором Pentium II и 256 Мбайт памяти. Однако с точки зрения процедуры циклической выборки службы DNS между этими системами нет никакой разницы; более того, данная функция "не имеет представления" о доступности того или иного Web-сервера, поскольку не может определить, работоспособность сервера.

На этот случай созданы системы балансировки нагрузки. Они повышают отказоустойчивость Web-серверов: в случае отказа одной машины направляют пакеты данных на другой сервер или сайт.

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

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

Таким образом клиент обращается к целой группе серверов, но все они представляются ему в виде некоего единого виртуального сервера. Например когда на узел www.google.com заглядывает посетитель, его запрос поступает не на один из Web-серверов, а в систему балансировки нагрузки. Система принимает решение о том, на какой сервер направить запрос. При этом она руководствуется такими критериями, как загрузка каждого сервера, а также соблюдает условия и правила, сформулированные администратором. Затем направляет запрос клиента соответствующему серверу.

4.2 Проблема создания уникального контента

Уникальный контент - все, что сделано, собрано, описано самим автором (обычно блоггером) а не скопировано с других источников. Например если вы не копируете один в один, заменив лишь пару строчек - это ваш контент- авторский. если вы не публикуете чужие видео-ролики, а исключительно своего производства - это уникальный контент.

При наполнении сайта уникальным контентом следует учитывать следующие его качества:

Практическая польза контента

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

Конкретность

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

Доступность и грамотность изложения

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

Различают следующие основные виды контента:

Копирайт - качественный и уникальный контент, написанный автором. Такой контент считается наиболее ценным и качественным. Главный недостаток копирайта - большие затраты времени и денег.

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

Копипаст - текст, скопированный с другого уже проиндексированного сайта. Такие сайты приносят мало трафика или не приносят совсем.

UGC (User Generated Content) - контент, генерируемый пользователями. Посетители сайта сами наполняют сайт уникальным контентом - задают вопросы и отвечают на них, пишут статьи, размещают объявления и т.д. Основная сложность - привлечь внимание посетителей к такому проекту.

Последние два вида контента имеют самые низкие затраты для размещения на сайте. Однако их комбинация дает хороший результат.

Выше говорилось об индексации сайтов, рассмотрим этот вопрос подробнее.

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

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

4.3 Некачественный код

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

Есть несколько довольно общих правил, которые делают код симпатичнее.

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

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

Отступы. Почти все современные IDE проставляют их автоматически.

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

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

Отсутствие закомментированного кода .Логично подумать, что если код не нужен, то его следует удалить.

Пример плохого кода :

for(j=0; j{

total += array[j+0 ];

total += array[j+1 ];

total += array[j+2 ]; /* Main body of

total += array[j+3]; * loop is unrolled

total += array[j+4]; * for greater speed.

total += array[j+5]; */

total += array[j+6 ];

total += array[j+7 ];

}

Без подсветки синтаксиса в данном примере сложно заметить, что несколько строк закомментированно.



5.Выбор CMS

Content Management System (сокр. CMS, рус. Система управления контентом) - как правило, представляет сложный скрипт управления сайтом, специально созданный для того, чтобы облегчить жизнь вебмастерам. Структура движков позволяет легко управлять содержимым, и, соответственно, гораздо удобнее, чем использование языков программирования.

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

Большинство современных CMS имеют модульную архитектуру. Это позволяет разработчику, самому выбирать и настраивать компоненты, которые ему нужны.

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

Бесплатные СMS - особая категория систем управления. На них построено 90% сайтов всемирной паутины.

Самые известные беспланые CMS:

MODX

WordPress

Drupal

Joomla

TYPO3 (Тупо3 Тайпо3)

Php-Nuke

MediaWiki

Остановимся на некоторых, наиболее подходящих для нашего сайта CMS.



5.1 Joomla

Ранее известная как Mambo. Однако позднее появилась Joomla, первая версия которой вышла в 2005 году как Joomla 1.0. Эту версию долго дорабатывали, через 2,5 года выпустив новую версию под номером 1.5 Ныне и эта версия является устаревшей. На момент написания этой курсовой (3 мая 2014 года) самой актуальной версией является версия 3.3.*.

Положительные отличия CMS Joomla

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

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

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

Гибкость. При помощи одного и того же шаблона всегда можно сменить вид целого модуля или его компонента без исправления кода CMS. Все такие изменения затем сохраняются в готовом шаблоне, однако их создание и применение требует знания PHP, CSS и JS.

Большое количество разнообразных модулей, дополнений и шаблонов.

Отрицательные стороны CMS Joomla

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

Довольно долгая загрузка страниц сайта, созданного на данной CMS именно вследствие наличия лишнего кода.

Недостаточно понятная панель администрирования, создающая сложности начинающим веб-мастерам.

Тем не менее, эта CMS остаётся самым популярным среди Web-программистов инструментом.

5.2 Drupal

Считалась первейшим конкурентом Joomla'е, а также более продвинутой, но более сложной в освоении. Начал свою историю в 2000 году. Название drupal является искажённым произношением голландского слова druppel (капля) и появилось в результате забавной ошибки.

Положительные отличия CMS Drupal

Создаёт короткие ссылки URL. Каждая новая создаваемая страница на сайте получает свой уникальный ID, данная ссылка не будет измена на протяжении всего времени существования сайта.

Имеет встроенный поиск по сайту.

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

Поддержика XML форматов

Пользователь может выбирать и менять темы для лучшего отображения сайта.

Кэш страниц. Данная функция полезна тем, что значительно сокращается количество запросов к БД и тем самым увеличивается скорость сайта.

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

Отрицательные стороны CMS Drupal

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

Сложный в освоении для новичка



5.3 WordPress

Подходит для разработки блогов, достаточно сложных новостных ресурсов а так же интернет-магазинов. Разработка началась с 2001 года.

Положительные отличия CMS WordPress

Удобный неперегруженный излишествами интерфейс административной части.

Большое количество тем оформления.

Множество плагинов доступных в официальном репозитории.

Относительная неприхотливость к серверу. Требует гораздо меньше ресурсов по сравнению с Drupal и Joomla

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

Понятная документация для пользователей и разработчиков.

Быстрое обновление: всего пара кликов мышкой.

Отрицательные стороны CMS WordPress

Официальная документация является неполной.

Большое количество нерабочих решений, которые часто содержат грубейшие ошибки в исходном коде.

Большое количество незакрытых узвимостей, недоработок. Можете почитать ветки на Античате.

Является отличной мишенью для спама.

Большое количество некачественных тем оформления

Излишнее дублирование содержимого

6.Тестирование

Ниже прилагаются скриншоты некоторых Web-страниц.



Заключение

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



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

HTML. Просто как дважды два. - М.: Изд-во Эксмо. 2006.- 256с., ил.-(Просто как дважды два).

Соглашаемся на некачественный код// Сайт blogspot.ru 3 февраля 2008 г.(http://denismiller.blogspot.ru/2008/02/blog-post.html)

Системы балансировки нагрузки Web-серверов// Сайт citforum.ru (http://citforum.ru/internet/webservers/websbal.shtml)



Приложение 1

Файл index.html

<!doctype html>

<html><head>

<meta charset="utf-8">

<title>Турфирма</title>

<script src="js/jquery-1.4.4.min.js"></script>

<script src="js/slides.min.jquery.js"></script>

<script>

$(function(){

$('#slides').slides({

preload: true,

preloadImage: 'img/loading.gif',

play: 5000,

pause: 2500,

hoverPause: true,

animationStart: function(){

$('.caption').animate({

bottom:-35

},100);

},

animationComplete: function(current){

$('.caption').animate({

bottom:0

},200);

if (window.console && console.log) {

// example return of current slide number

console.log(current);

};

}

});

});

</script>

<link rel="stylesheet" type="text/css" href="css/slaid.css">

<link rel="stylesheet" type="text/css" href="css/menu.css">

<link rel="stylesheet" type="text/css" href="css/moe.css">

</head>

<body>

<div style="width:1250px; margin:0 auto; padding:0px; position:relative; border:none;">

<div style="background-color:#00BFFF;height:107px;">

<div style="padding:45px 0px 0px 168px;text-transform: uppercase;letter-spacing: 2px;font-size: 10px;font-family: Arial, sans-serif;">

<table width= "100%" border-collapse: "collapse">

<tr>

<th border= "#ccc 1px solid" padding=" 0px 10px" align="left">

<p>Туристическая компания «Аврора»</p>&nbsp;

</th>

<th class="tdTitlePhone" border= "#ccc 1px solid" padding=" 0px 10px">

<p>Бесплатный</p>

</th>

<th class="tdNumPhone"> звонок 8-(800)-250-00-66 - Мария</th>

</tr>

<tr>

<td></td>

<td class="tdTitlePhone" border= "#ccc 1px solid"padding=" 0px 10px">Адрес</td>

<td class="tdNumPhone">Владивосток ул Светланская 56</td>

</tr>

</table>

</div>

</div>

<div class="roskosh_gray_centerblock" style="background-color:#E3E3E3;height:82px;"></div>

<div>

<table align = "right" >

<tbody>

<td valign="top" >

<ul class="main_menu">

<li ><a href="index.html" style="padding: 0px 0px 0px 5px">домой</a></li>

</ul>

</td>

<td valign="top">

<ul class="main_menu">

<li><a href="#">туры</a>

<div>

<ul>

<li><a href="hot_voyages.html">Горячие путевки</a></li>

<li><a href="tury">Туры по странам</a></li>

<li><a href="cruise.html">Круизы по миру</a></li>

<li><a href="beach">Лучшие пляжи мира</a></li>

<li><a href="krym">Крым</a></li>

<li><a href="health">Лечебные туры</a></li>

<li><a href="child">Детские каникулы</a></li>

</ul>

</div>

</li>

</ul>

</td>

<td valign="top">

<div>

<ul class="main_menu">

<li><a href="#">продажа</a>

<div>

<ul>

<li><a href="razmer">Расценки</a></li>

<li><a href="upakovka">Бесплатная упаковка</a></li>

<li><a href="uxod">Скидки</a></li>

<li><a href="chavo">Вопросы</a></li>

<li><a href="sertificat">Подарочный сертификат</a></li>

</ul>

</div>

</li>

</ul>

</div>

</td>

<td valign="top">

<div>

<ul class="main_menu">

<li><a href="#">услуги</a>

<div>

<ul>

<li><a href="magazine">Где купить</a></li>

<li><a href="kak_kupit">Как купить</a></li>

<li><a href="dostavka">Способы доставки</a></li>

<li><a href="oplata">Способы оплаты</a></li>

<li><a href="identification">Реквизиты</a></li>

<li><a href="registration">Документы</a></li>

<li><a href="usloviya_prodaj">Условия продаж</a></li>

<li><a href="garantii">Гарантии</a></li>

</ul>

</div>

</li>

</ul>

</div>

</td>

</td>

<td valign="top">

<div>

<ul class="main_menu">

<li><a href="#">о компании</a>

<div>

<ul>

<li><a href="about_us">О нас</a></li>

<li><a href="news">Новости</a></li>

<li><a href="actions_new">Наши акции</a></li>

<li><a href="article_metal_gold">Статьи</a></li>

<li><a href="vakansii">Вакансии</a></li>

<li><a href="contacts">Контакты</a></li>

<li><a href="bookcompliant">Отзывы</a></li>

<li><a href="http://roskoshjewel.livejournal.com">Блог</a></li>

<li><a href="http://www.facebook.com/pages/%D0%A0%D0%BE%D1%81%D0%BA%D0%BE%D1%88%D1%8C-Jewel/467398326659517">Facebook</a></li>

<li><a href="http://vk.com/public50107564">В контакте</a></li>

</ul>

</div>

</li>

</ul>

</div>

</td>

<td valign="top" width="34">&nbsp;</td>

</tr>

</tbody>

</table>

</div>

<a id="avrora" href="./"><img height="350em"border="0" src="img/people.jpg"></a>

<div id="example">

<div id="slides">

<div class="slides_container">

<div>

<a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-1.jpg" width="550" height="250" alt="Slide 1"></a>

<div class="caption" style="bottom:0">

<p class="textsl">Happy Bokeh Thursday!</p>

</div>

</div>

<div>

<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-2.jpg" width="550" height="250" alt="Slide 2"></a>

<div class="caption">

<p class="textsl">Taxi</p>

</div>

</div>

<div>

<a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-3.jpg" width="550" height="250" alt="Slide 3"></a>

<div class="caption">

<p class="textsl">Happy Bokeh raining Day</p>

</div>

</div>

<div>

<a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-4.jpg" width="550" height="250" alt="Slide 4"></a>

<div class="caption">

<p class="textsl">We Eat Light</p>

</div>

</div>

<div>

<a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="&ldquo;I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.&rdquo; | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-5.jpg" width="550" height="250" alt="Slide 5"></a>

<div class="caption">

<p class="textsl">&ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;</p>

</div>

</div>

<div>

<a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-6.jpg" width="550" height="250" alt="Slide 6"></a>

<div class="caption">

<p class="textsl">twelve.inch</p>

</div>

</div>

<div>

<a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-7.jpg" width="570" height="250" alt="Slide 7"></a>

<div class="caption">

<p class="textsl">Save my love for loneliness</p>

</div>

</div>

</div>

</div>

<img src="img/example-frame.png" width="719" height="321" alt="Example Frame" id="frame">

</div>

</div>

<div id="content">

<h3>Новости</h3>

<p>

<b>13.05</b> ХУНЬЧУНЬ.Лучшие гостиницы в центре города. Акция! Скидки! 2500/3500рублей.

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<b>30.04</b> Поздравляем всех россиян с нашим самым главным праздником - С Днем Победы! Время работы офисов в праздничные дни.

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<b>23.04</b> ХУНЬЧУНЬ.ЯНЬЦЗИ.Майские праздники.График заездов.

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<b>23.04</b> Изменился адрес и телефоны филиала в Уссурийске.Новый офис: ул. НЕКРАСОВА 38, (4234) 270-700.

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<b>28.02</b> Далянь,Харбин,Муданцзян, Пекин.Авиарейсы из Владивостока.

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<b>12.02</b> Далянь по пятницам,8дней.Стоимость тура 11700рублей. Авиабилеты 3500 рублей.

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<b>12.02</b> Прага-Вена-Дрезден.Группа на весенние каникулы 22.03.2014.

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<b>12.02</b> Аньшань.Санаторий "Танганцзы", группы еженедельно по воскресеньям.Авто и Авиа. Стоимость путевки 15дней -24 555 рублей.</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<b>30.01</b> В Суйфэньхе по упрощенным правилам въезда с 15.02.2014.

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<b>20.01</b> В Китай на весенние каникулы:Чанчунь,Далянь,Харбин,Пекин,Сиань.

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<b>16.12</b> Хуньчунь. График туров на декабрь.Бронирование и оплата банковскими картами в офисах и на сайте.

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<b>03.12</b> Идет набор в группу на тур в Чанбайшань! Стоимость тура - 24 450 рублей, входит прокат снаряжения на все дни пребывания!

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format">

<a href="archive.php?id=5">Архив</a>

</p>

<p xmlns:fo="http://www.w3.org/1999/XSL/Format"></p>

</div>

<div id="tour" >

<table>

<tr>

<td><a href="./"><img border="0" src="img/44532_73403912.jpg"></a>

</td>

<td><a href="./"><img border="0" src="img/44534_73404192.jpg">

</td>

<td><a href="./"><img border="0" src="img/44535_73404412.jpg">

</td>

<td><a href="./"><img border="0" src="img/131689_73404228.jpg">

</td>

</tr>

<tr>

<td><a href="./"><img border="0" src="img/44536_73404334.jpg">

</td>

<td><a href="./"><img border="0" src="img/108619_73404366.jpg">

</td>

<td><a href="./"><img border="0" src="img/108819_73403889.jpg">

</td>

<td><a href="./"><img border="0" src="img/131691_73403972.jpg">

</td>

<tr>

<td><a href="./"><img border="0" src="img/117561_74194000.jpg">

</td>

<td><a href="./"><img border="0" src="img/131311_73403928.jpg">

</td>

<td><a href="./"><img border="0" src="img/44528_73404015.jpg">

</td>

<td><a href="./"><img border="0" src="img/110894_73404157.jpg">

</td>

</tr>

</table>

</div>

</div>

</body>

</html>

Приложение 2

Файл moe.css

body{

font-family: 'MyriadPro-regular', Helvetica, Arial, sans-serif;

background-color:#E3E3E3;

font-size:14px;

color:#333;

margin: 0;

outline: 0;

padding: 0;

}

#avrora {

margin: 0px 0px 0px 0px;

width: 500px;

position:relative;

top:-82px;

left: 5.9em;

}

#otherpic {

margin: 0px 0px 0px 0px;

width: 600px;

position:relative;

top: -28.5em;

left: 45em;

}

#content b{

color: rgb(165, 42, 38)

}

#content {

width:500px;

margin: -30em 0px 0px 6em ;

}

#content li {

margin-left: "-15px";

margin-bottom: "3pt";

}

#content ul {

margin-top: "-13px";

}

#content ol {

margin-top: "3pt";

}

#content form textarea {

width: 187px;

height: 90px;

border: 0px;

}

.tdTitlePhone{

text-align:right;

width:200px;

}

.tdNumPhone{

text-align:left;

width:260px;

}

.textsl {

font-size: 11px;

font-family: Arial, sans-serif;

}

#tour {

width: 580px;

position:relative;

top:-350px;

left: 600px;

}

#content1 {

width: 0 auto;

margin: -25em 0px 0px 6em ;

text-align:center;

}



Приложение 3

Файл slaid.css

/*

Resets defualt browser settings

reset.css

*/

span,applet,object,iframe,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead{

margin:0;

padding:0;

border:0;

outline:0;

font-weight:inherit;

font-style:inherit;

font-size:100%;

font-family:inherit;

vertical-align:baseline;

}

:focus { outline:0; }

a:active { outline:none; }

ul { list-style:none; }

caption,th,td { text-align:left; font-weight:normal; }

blockquote:before,blockquote:after,q:before,q:after { content:""; }

blockquote,q { quotes:"" ""; }

#container {

width:580px;

position:relative;

margin:0 auto;

position:relative;

z-index:0;

}

#example {

z-index: 10;

width:600px;

height:350px;

position:relative;

left:42em;

top:-28em;

}

#ribbon {

position:absolute;

top:-3px;

left:-15px;

z-index:500;

}

#frame {

position:absolute;

z-index:0;

width:699px;

height:301px;

top: -2px;

left:-20px;

}

#slides {

position:absolute;

top:15px;

left:4px;

z-index:100;

}

.slides_container {

width:550px;

height:270px;

overflow:hidden;

position:relative;

left: 50px;

top:-5px;

}

#slides .next {

left:585px;

}

.pagination {

margin: 0 auto;

width:100px;

}

.pagination li {

float:left;

margin:0 1px;

}

.pagination li a {

display:block;

width:12px;

height:0;

padding-top:12px;

background-image:url(../img/pagination.png);

background-position:0 0;

float:left;

overflow:hidden;

}

.pagination li.current a {

background-position:0 -12px;

}

.caption {

position:absolute;

bottom:-35px;

height:30px;

padding:5px 20px 0 20px;

background:#000;

background:rgba(0,0,0,.5);

width:540px;

font-size:1.3em;

line-height:1.33;

color:#fff;

border-top:1px solid #000;

text-shadow:none;

}

#footer {

text-align:center;

width:580px;

margin-top:9px;

padding:4.5px 0 18px;

border-top:1px solid #dfdfdf;

}

#footer p {

margin:4.5px 0;

font-size:1.0em;

}

a:link,a:visited {

color:#599100;

text-decoration:none;

}

a:hover,a:active {

color:#599100;

text-decoration:underline;

}



Приложение 4

Файл menu.css

.main_menu li ul{margin:0px;padding:0px 0px 0px 0px;}

.main_menu

{

border-top:none/*1px solid #ccc*/;

/*border-bottom:5px solid #aaa;*/

position:relative;

right: 1em;

top:-6em;

margin:0px;

padding: 0px 0px 0px 0em;

list-style:inside none;

z-index: 100;

color:#999999;

}

.main_menu > li{

float:left;

/*width:150px;*/

padding-right:50px;

}

.main_menu ul{

display:none;

position:absolute;

z-index:100;

width:190px;

border-left:1px solid #ddd;

border-right:1px solid #ddd;

border-bottom:1px solid #ddd;

}

.main_menu li:hover ul{display:block}

/* 163 px*/

/*---------MAIN MENU------------*/

.main_menu > li{

/*background-color:#F5F5F5;*/

text-align:center;

padding:10px 50px 10px 0px;

font-family: 'MyriadPro-regular', Helvetica, Arial, sans-serif;

/*border-top:1px solid #E8E8E8;*/

/*border-right:1px solid #E8E8E8;*/

}

.main_menu > li:hover{/*background-color:#c4c4c4;*/}

.main_menu > li:hover a{/*font-weight: bold;*/}

.main_menu > li > a{

/*font:25px; 'Myriad Pro"; /*"Geargia";*/

font-family: 'MyriadPro-bold', Helvetica, Arial, sans-serif;

color:#5a5758;

font-weight: normal;

text-decoration:none;

text-transform:uppercase;

display: block;

}

/*---------SUB MENU------------*/

.main_menu li ul{

margin-top:10px;

padding-bottom:7px;

list-style:inside none;

background-color:#ffffff;

/*border-right:1px solid #E8E8E8;*/

/*

-webkit-box-shadow: 1px 1px 3px #999;

-moz-box-shadow: 1px 1px 3px #999;

box-shadow: 1px 1px 3px #999;

*/

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);

-moz-opacity: 0.9;

-khtml-opacity: 0.9;

opacity: 0.9;

z-index: 100;

}

.main_menu li li{

text-align:left;

padding:4px 5px 4px 15px;

display: block;

}

.main_menu li li:hover{

/*background-color:#C5C5C5;*/

}

.main_menu li li a{

/*font:15px "Opium"; */

color:#888888;

text-decoration:none;

display: block;

-moz-opacity: 1.0;

-khtml-opacity: 1.0;

opacity: 1.0;

}

.main_menu li li a:hover{

/*font-weight: bold;*/

color:#000000;

display: block;

}

Размещено на Allbest.ru