Разработка web-сайта (стр. 1 из 3)
Министерство высшего и профессионального образования РФ
Волжский университет им. В.Н.Татищева
Факультет «Информатика и телекоммуникации»
Кафедра «Информатика и системы управления»
КОНТРОЛЬНАЯ РАБОТА
на тему: «Разработка web-сайта»
по дисциплине «Web технологии»
Тольятти
Введение
1. Постановка задачи
2. Изучение предметной области
3. Реализация поставленной задачи
3.1. Разработка навигации по сайту
3.2. Разработка интерфейса
3.3. Описание используемых тегов
Список литературы
Приложение
Новая информационная технология достигла такого развития, что, пожалуй, не осталось сфер человеческой жизни, не затронутыx глобальной сетью Internet. В настоящее время интерес к сети Internet продолжает расти. Разработанный в годы информационного взрыва Internet становится неотъемлемой, частью жизни большинства людей всего мира.
Развитие современных технологий способствует появлению новых специальностей в этой сфере деятельности. Еще несколько лет назад о специальности Web-дизайнера никто не знал, а сегодня она является одной из самых популярных в области информационных технологий.
Неотъемлемая часть Internet, WWW (World Wide Web, в переводе с английского "всемирная паутина"), позволила по-новому пользоваться давно известными во всем мире текстовыми сносками. Когда автор журнальной статьи или книги помещает в тексте знак сноски, в нижней части страницы, помимо объяснения, могут быть указаны источники дополнительной информации, например, другая страница или книга. В Internet составители компьютерных "страниц" делают практически то же самое, подчеркивая либо выделяя в документах ключевые слова или пиктограммы.
Выделенные слова и пиктограммы указывают пользователю, что в Internet есть дополнительная информация на эту тему, зачастую на другой странице. Эту страницу можно сразу же вызвать на экран и просмотреть, хотя она, возможно, находится совсем на другом компьютере и даже в другой стране. При помощи этого технического приема пользователь подсоединяется к самим документам, а не просто наводит о них справки.
Кроме того, в Web можно хранить и выводить на экран графику и фотоснимки, воспроизводить звук, а также просматривать анимацию и видеозаписи.
World Wide Web является одной из самых молодых услуг Internet: WWW родилась в 1990 году в европейском исследовательском центре CERN, а в 1992 году началось практическое применение этой технологии за пределами CERN. С конца 1993 года начался поистине взрывной рост WWW, который привел к тому, что сегодня этот вид информационного сервиса Internet является самым популярным, наиболее динамично развивающимся и во многом определяет современный облик всемирной сети.
Количество WWW-серверов удваивается в среднем каждые три месяца, причем количество WWW-серверов коммерческих организаций растет еще быстрее. Темпы роста WWW, проявляющиеся в увеличении как числа WWW-серверов, так и количества доступных через WWW документов и баз данных, превышают даже очень высокие темпы роста общего количества пользователей Internet.
Сначала WWW-серверы создавались в организациях, имевших достаточно большой опыт работы в глобальных сетях: в университетах, академических и отраслевых научно-исследовательских институтах и центрах, коммерческих фирмах, являющихся сервис-провайдерами Internet. Сегодня WWW-серверы имеют сотни государственных, коммерческих и общественных организаций различного профиля деятельности. Если проанализировать этот перечень, то окажется, что пока наиболее многочисленными являются три категории организаций, создавших свое представительство в Internet: фирмы, работающие в области компьютерных технологий, высшие учебные заведения и научно-исследовательские организации естественнонаучного и технического профиля. Однако спектр WWW-серверов, рассматриваемый с точки зрения тематики информационных ресурсов и поддерживающих их организаций, непрерывно расширяется. Создаются серверы правительственных органов, общественных объединений, средств массовой информации, производственных предприятий, фирм, работающих в сфере обслуживания. Появляются электронные версии общественно-политических и специализированных периодических изданий.
Интересной тенденцией, наметившейся еще весной 1996 года, является появление значительного числа серверов коммерческих банков, финансовых корпораций, инвестиционных компаний, бирж, брокерских фирм и сетевых информационных систем для сферы экономики и финансов. В данной контрольной работе будет разработан web-сайт для предприятия МП г. Тольятти «Управляющая компания №2», которая занимается предоставлением коммунальных услуг. Разработка сайта предназначена для представления информации о данной организации в сети Internet.
Задача состоит в создании тематического WEB-сайта с использованием гипертекстового языка разметки HTML, каскадных листов стилей CSS и языка программирования JavaScript. Объем контрольной работы должен составлять минимум пять WEB-страницы (первая страница – новости, остальные страницы – дополнительные, раскрывающие сущность выбранной тематики).
Основная цель сайта - удовлетворять информационным запросам посетителя. Все разделы и информация на них должны быть легко доступны. Необходимо предоставить зашедшему гостю самостоятельно регулировать глубину просмотра и не предоставлять всю информацию сразу.
Сайт должен разрабатываться в блокноте и отдельно описывается, для наибольшего закрепления материала по пройденному курсу. Просмотр страниц происходит в Internet Explorer или в любом другом навигаторе, стоящим на компьютере пользователя. Для этого сайт не должен содержать коды, которые не прочитываются в одном из навигаторов.
2. Изучение предметной области
Для разработки контрольной работы рассматривалась предметная область - информация о предприятии МП г. Тольятти «Управляющая компания №2».
Сайт будет иметь следующую структуру:
Главная страница (Новости) – последние новости о компании;
О компании – информация о компании;
обучение – эта страница содержит об обучении в клубе;
Услуги – эта страница содержит перечень выполняемых услуг;
Вакансии – вакансии в МП г. Тольятти «Управляющая компания №2».
Контакты – эта страница содержит информацию о телефонах и адресах в МП г. Тольятти «Управляющая компания №2»
3. Реализация поставленной задачи
3.1 Разработка навигации по сайту
Сайт разработан так, что находясь на любой страничке, вы можете выбрать необходимый вам раздел. Возможность попасть в любое место сайта несмотря на свое место нахождения в нем – упрощает навигацию, делая ее очень простой и удобной.
Рис. 1 Навигация по сайту
Палитра цветов интерфейса состоит из жёлтого и синего цвета. На жёлто-оранжевый фон накладывается еще рисунок из файла – заголовок.
Рис. 2 Главная страница сайта – «Новости»
Рис. 3 «О компании» – информация о компании.
На данной странице используется Java – скрипт. При загрузке странице текст появляется не сразу, а по одной букве, эффект «печатающей машинки».
Рис. 4 «Услуги» – перечень выполняемых услуг, цели и виды деятельности предприятия.
Рис. 5 «Вакансии» – текущие вакансии на предприятии на данный момент.
Рис. 6 «Контакты» – информацию о контактных телефонах и адресах предприятия.
3.3 Описание используемых тегов
Документ в целом отмечен как документ в формате HTML, т.е. начинается командой <HTML> и заканчивается командой </HTML>.
Для выделения заголовка: <HEAD> Заголовок документа <HEAD>
Для ввода титульной строки в заголовок документа: <HEAD> <TITLE> </TITLE> </HEAD>
Для записи основного текста: <BODY> Основной текст </BODY>
Для перехода на следующую строку: <BR>
Для создания пустой строки: <P></P>
Таблица создается с помощью команд <TABLE> и </TABLE>. Команда <TABLE> может иметь следующие параметры: BORDER - определяет линии, разграничивающие клетки в таблице. CELLPADDING - определяет минимальный промежуток вокруг содержимого таблицы. BGCOLOR - определяет цвет фонового изображения в таблице. Для формирования таблицы, состоящей из нескольких строк, используется команда <TR> , разделяющей строки и <TD>, разделяющей столбца.
Для записи гипертекстовой ссылки: <A href = “URL”> Переход по гипертекстовой ссылке. </A>
Для записи гипертекстовой ссылки с помощью рисунка вместо текста для ссылки вставляют рисунок: <IMG SRC= “ИМЯ ФАЙЛА” ALIGN = DIRECTION WIDTH = WIDTH HEIGHT = HEIGHT >.
Процедура на JavaScript – их две один для вывода текста на экран в виде бегущей строки (эффект печатающей машинки), второй для подсветки пунктов меню.
Style.css - простенькая табличка стилей там указан стиль для popup окна и заданы некоторые атрибуты для body и ссылок.
<link href="style.css" rel="stylesheet" type="text/css">
Стиль пишется между тегами <HEAD> </HEAD>