Разработка web-сайта

Министерство высшего и профессионального образования
РФ

Волжский университет им. В.Н.Татищева

Факультет «Информатика и телекоммуникации»

Кафедра «Информатика и системы управления»

КОНТРОЛЬНАЯ РАБОТА

на тему: «Разработка 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.

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

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

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

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

2. Изучение предметной области

Для разработки контрольной работы рассматривалась предметная область - информация
о предприятии МП г. Тольятти «Управляющая компания №2».

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

Главная страница (Новости) – последние новости о компании;

О компании – информация о компании;

обучение – эта страница содержит об обучении в клубе;

Услуги – эта страница содержит перечень выполняемых услуг;

Вакансии – вакансии в МП г. Тольятти «Управляющая компания №2».

Контакты – эта страница содержит информацию о телефонах и адресах в МП г.
Тольятти «Управляющая компания №2»

3.
Реализация поставленной задачи

3.1
Разработка навигации по сайту

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

Рис. 1 Навигация по сайту

3.2
Разработка интерфейса

Палитра цветов интерфейса состоит из жёлтого и синего цвета. На
жёлто-оранжевый фон накладывается еще рисунок из файла – заголовок.

Рис. 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 и ссылок.

Стиль пишется между тегами <HEAD> </HEAD>

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

1. Шегар А.М. CSS - Cascading Style Sheet в примерах. - Internet,
http/www.citforum.ru.

2. Шегар А.М. JavaScript в примерах. -
Internet, http/www.citforum.ru.

3. Модель событий
JavaScript - Internet, http/www.rambler.

4. Каллахан И. Ваша WEB-страница.
Проблемы и решения. с англ. - М.: “ЭКОМ”, 2002-.- 290с., ил.

5. Глушаков С.В., Жакин И.А., Хачиров
Т.С. – Программирование Web-страниц
. – Харьков: «Фолио», 2005.–390 с.– (Учебный курс)

Приложение

Index.html

<html>

<head>

<title>Управляющая компания №2</title>

</head>

<body>

<tr>

</tr>

<tr>

<ul>

<span ID="id001">Новости</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">О компании</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">Услуги</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">Вакансии</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">Контакты</span></a></li>

</ul></td>

</tr>

<tr>

</tr>

</table>

<tr>

<td width="140"
align="center"><a href="index.htm">Новости</a></td>

<td width="141"
align="center"><a href="about.htm">О компании</a></td>

<td width="140"
align="center"><a href="usl.htm">Услуги</a></td>

<td width="142"
align="center"><a href="vacans.htm">Вакансии</a></td>

<a href="kontakt.htm">Контакты</a></td>

</tr>

</table>

</div>

<p>

<div ID="id002">10 января</div>

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

<br>АТУ его!!! АТУ!

<div ID="id002">5
января</div>

 Все люди как люди, а бухгалтера из
расчетного отдела вышли сегодня на работу и рассчитывали зарплату всевозможным
грузчикам, дворникам и сантехникам. Бухи - молодцы!!!

<p>

<div ID="id002">1 января</div>

Вот и закончился 2005 год и наступил 2006год - год огненной собаки.

Счастья радости и благополучия вам в НОВОМ ГОДУ! С наступившим всех!!!

<p>

<div ID="id002">29 декабря</div>

Вечер в Управляющей компании! Ожидается очень много интересного , всем
пожелавшим (и сдавшим Михайловне деньги)

Быть в 18,00 в кафе Салют.

<p>

<div ID="id002">26 декабря</div>

Поздравляем всех с наступающим и рождеством! Получите официальное
поздравление в виде открыток!

</body>

</html>

ABOUT.html

<html>

<head>

<title>Управляющая компания №2</title>

var strText = "";

function showtext(i) {

var HTMLtag = 0;

for (count=4; i < strText.length && count > 0;
i++) {

if (strText.charAt(i) == "<" ||
strText.charAt(i) == ">") HTMLtag = !HTMLtag;

if (!HTMLtag) count--;}

document.all["myBlock"].innerHTML =
strText.substr(0, i);

if (i < strText.length) setTimeout("showtext(" +
i + ")", 20);}

function doit() {

strText = document.all["myBlock"].innerHTML;

document.all["myBlock"].innerHTML = "";

document.all["myBlock"].style.visibility =
"visible";

setTimeout("showtext(0)", 100);}

</SCRIPT>

</head>

<tr>

</tr>

<tr>

<ul>

<span ID="id001">Новости</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">О компании</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">Услуги</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">Вакансии</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">Контакты</span></a></li>

</ul></td> </tr>

</table>

<tr>

<td width="140"
align="center"><a href="index.htm">Новости</a></td>

<td width="141"
align="center"><a href="about.htm">О компании</a></td>

<td width="140"
align="center"><a href="usl.htm">Услуги</a></td>

<td width="142"
align="center"><a href="vacans.htm">Вакансии</a></td>

<td align="center" width="121"
height="23"><a href="kontakt.htm">Контакты</a></td> </tr>

</table>

</div> <p> <span id=myBlock
style="VISIBILITY: hidden">

<br>  Учредителем Предприятия является мэрия г.Тольятти
Находится в ведомственном подчинении МУ «Департамент энергетики, ЖКХ и связи»
г.Тольятти.

<br>   Предприятие осуществляет свою деятельность в
соответствии с Федеральным законом «О государственных и муниципальных унитарных
предприятиях» и иными нормативными актами Российской Федерации, нормативными
актами местного самоуправления г. Тольятти.

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

<br>   Целями создания МП г.Тольятти "Управляющая
компания № 2" являются удовлетворение общественных потребностей и
получение прибыли. Предметом деятельности является выполнение работ,
производство продукции, оказание услуг, а также осуществление функций
управляющей компании в сфере жилищно-коммунального хозяйства, дорожного
хозяйства и благоустройства на территории Автозаводского района
г.Тольятти.</span>

<P>

</body>

</html>

USL.html

<html>

<head>

var strText = "";

function showtext(i) {

var HTMLtag = 0;

for (count=4; i < strText.length && count > 0;
i++) {

if (strText.charAt(i) == "<" ||
strText.charAt(i) == ">") HTMLtag = !HTMLtag;

if (!HTMLtag) count--;}

document.all["myBlock"].innerHTML = strText.substr(0,
i);

if (i < strText.length) setTimeout("showtext(" +
i + ")", 20);}

function doit() {

strText = document.all["myBlock"].innerHTML;

document.all["myBlock"].innerHTML = "";

document.all["myBlock"].style.visibility =
"visible";

setTimeout("showtext(0)", 100);}

</SCRIPT>

<title>Управляющая компания №2</title>

</head>

<tr>

</tr>

<tr>

<ul>

<span
ID="id001">Новости</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">О
компании</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span
ID="id001">Услуги</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span
ID="id001">Вакансии</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span
ID="id001">Контакты</span></a></li>

</ul></td>

</tr>

</tr>

</table> <table border="1"
width="670" height="29">

<tr>

<td width="140"
align="center"><a
href="index.htm">Новости</a></td>

<td width="141"
align="center"><a href="about.htm">О
компании</a></td>

<td width="140"
align="center"><a
href="usl.htm">Услуги</a></td>

<td width="142"
align="center"><a
href="vacans.htm">Вакансии</a></td>

<td align="center" width="121"
height="23"><a
href="kontakt.htm">Контакты</a></td>

</tr>

</table>

</div>

<tr>

<p>ЦЕЛИ И ВИДЫ ДЕЯТЕЛЬНОСТИ
ПРЕДПРИЯТИЯ:</div>

<p align="justify"><br>  Предприятие создано для организации процесса
предоставления жилищных услуг населению и повышения их качества, улучшения
комфортности проживания, поддержания в надлежащем состоянии жилищного фонда и
инженерных коммуникаций в соответствии с требованиями государственных
стандартов качества предоставления услуг, снижения необоснованных жалоб
населения, и экономически обоснованного использования средств населения.<br>  Предприятие осуществляет следующие основные виды
деятельности:

<br>Функции заказчика по всему комплексу
работ, связанных с содержанием и ремонтом жилищного фонда, внутридомовых
инженерных систем и оборудования, придомовых территорий с расположенными на них
объектами внешнего благоустройства и озеленения, санитарной очистки
домовладений, муниципальной и иной формы собственности, переданных в управление
по договорам.<br> 

Проведение конкурсов на размещение заказов на поставку товаров,
выполнение работ и оказание услуг по всему комплексу работ, связанных с
содержанием и ремонтом жилищного фонда, внутридомовых инженерных систем и
оборудования, придомовых территорий.<br> 

Формирование финансовых средств для осуществления расчётов с
предприятиями-подрядчиками.<br> 

Оплату выполненных работ по муниципальному заказу в соответствии с их
объёмами и качеством, в том числе льгот и жилищных субсидий, а также контроль
за эффективным и целевым использованием выделенных средств.<br> 

Осуществление контроля за движением жилищного фонда с ведением
учетно-технической документации.<br> 

Создание необходимых условий для проживания населения в жилищном фонде,
переданном предприятию в управление.<br> 

Осуществление деятельности, связанной с обеспечением жилищными услугами
нанимателей, собственников и арендаторов жилых помещений.<br> 

Подготовку и реализацию инвестиционных программ. <br> 

Подготовку адресной программы по проведению текущих ремонтных работ на
подведомственных объектах. <br> 

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

Участие в приёмке сдаваемых в эксплуатацию жилых домов.<br> 

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

</td>

</tr>

</tbody></table>

</b>

</body>

</html>

VACANS.html

<html>

<head>

<title>Управляющая компания №2</title>

</head>

<tr>

</tr>

<tr>

<ul>

<span
ID="id001">Новости</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">О
компании</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span
ID="id001">Услуги</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span
ID="id001">Вакансии</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">Контакты</span></a></li>

</ul></td>

</tr>

</tr>

</table> <table border="1"
width="670" height="29">

<tr>

<td width="140"
align="center"><a
href="index.htm">Новости</a></td>

<td width="141"
align="center"><a href="about.htm">О
компании</a></td>

<td width="140"
align="center"><a
href="usl.htm">Услуги</a></td>

<td width="142"
align="center"><a
href="vacans.htm">Вакансии</a></td>

<td align="center" width="121"
height="23"><a href="kontakt.htm">Контакты</a></td>

</tr>

</table>

</div>

<br>

<tr>

<td><div ID="id002">на
работу в МП г.Тольятти "Управляющая компания №2" требуются на
постоянной основе:</div>
</td>

</tr>

<tr>

<td>

<ul>

<li>дворники

</li>

<li>сантехники

</li>

<li>грузчики

</li>

<li>уборщицы

</li>

<li>плотники

</li>

</ul>

<p><div id="id002">Обращаться
по телефону: 1111111 </div></td>

</tr>

</table>

<br>

</body>

</html>

KONTAKT.html

<html>

<head>

<title>Управляющая компания №2</title>

</head>

<tr>

</tr>

<tr>

<ul>

<span
ID="id001">Новости</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span ID="id001">О
компании</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span
ID="id001">Услуги</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span
ID="id001">Вакансии</span></a></li>

</ul></td>

</tr>

<tr>

<ul>

<span
ID="id001">Контакты</span></a></li>

</ul></td>

</tr>

</tr>

</table><table border="1"
width="670" height="29">

<tr>

<td width="140"
align="center"><b><a
href="index.htm">Новости</a></b></td>

<td width="141"
align="center"><b><a href="about.htm">О
компании</a></b></td>

<td width="140"
align="center"><b><a href="usl.htm">Услуги</a></b></td>

<td width="142"
align="center"><b><a
href="vacans.htm">Вакансии</a></b></td>

<td align="center" width="121"
height="23"><b><a
href="kontakt.htm">Контакты</a></b></td>

</tr>

</table>

<tr>

<td>

<p
align="center"><b>Филиал</b></td>

<p
align="center"><b>Телефон</b></td>

</tr>

<tr>

<td><p><b>приёмная "Управляющая
компания №2"

</b>

 <br><b>адрес:
Ст.Разина 16а

</b>

<a
href="mailto:uprav_comp_2@mail.ru">uprav_comp_2@mail.ru</a><p></td>

</tr>

<tr>

<td><b>РЭУ 1 (секретарь) </b>

<br><b>адрес: Московский 229 </b> <p> </td>

</tr>

<tr>

<td><b>РЭУ (секретарь)

<br>адрес: Ордженикидзе 19 </b>

</tr>

<tr>

<td><b>РЭУ 7 (секретарь)

<br>Приморский 777

</b>

</tr>

<tr>

<td><b>РЭУ 8 (секретарь)

<br>адрес: Приморский 999

</b>

</tr>

<tr>

<td><b>РЭУ11 (секретарь)

<br>адрес: Жукова 46</b>

</tr>

</table>

</body>

</html>

Styles.css

BODY {background-color : "#FDFEF3"; font-family:
Verdana, Arial, Helvetica, sans-serif}

A:link {color:red}

A:visited{color:blue}

A:active {color:green}

A:hover {color:purple}

#id001 {text-decoration: none; font-weight: 700}

#id002 {

font family="Times New Roman";

color="#000080";

font-size="16";

font-weight=bold;

text-align="center" }

#id003

{color="#800000";

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size="16" ;

text-align="center";

font-weight=bold;}

Не сдавайте скачаную работу преподавателю!

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

Доработать Узнать цену работы по вашей теме

Поделись с друзьями, за репост + 100 мильонов к студенческой карме :

Заказать работу:

!	Курсовая работа
!	Дипломная работа
!	Реферат
!	Решение задач
!	Отчет по практике
!	Контрольная работа

Другие популярные контрольные работы:

Контрольная работа	Концепция информатизации Российской Федерации
Контрольная работа	Причины агрессивного поведения. Методы работы с агрессивными детьми
Контрольная работа	Алгоритм выбора и реализации предпринимательской идеи
Контрольная работа	Современные методы арт-терапии
Контрольная работа	Системы управления взаимоотношения с клиентами
Контрольная работа	Учет материальных затрат в бухгалтерском учете
Контрольная работа	Геополитическое положение России
Контрольная работа	Особенности вознаграждения работников в организации
Контрольная работа	Виды запасов
Контрольная работа	Психоанализ

Сейчас смотрят :

Контрольная работа	Развитие агропромышленного комплекса страны
Контрольная работа	Анализ рентабельности предприятия
Контрольная работа	Хосписы
Контрольная работа	Финансовые риски
Контрольная работа	Таможенный контроль

Контрольная работа по предмету "Информатика, программирование"

Разработка web-сайта

Другие популярные контрольные работы:

Сейчас смотрят :