Спроектувати і розробити web-сайт на тему «Університет»

Форма № Н-6.01

 

МІНІСТЕРСТВО ОСВІТИ  І НАУКИ УКРАЇНИ

Державний вищий навчальний заклад "Донецький національний технічний університет"

 

Автоматизовані системи управління

_____________________________________________________________________________________________

(повна назва кафедри)

 

 

 

 

 

 

КУРСОВИЙ ПРОЕКТ

 

з ____________WEB - технологии и WEB – дизайн _________

(назва дисципліни)

на тему:____ Спроектувати і розробити web-сайт на тему «Університет»

 

 

 

Студента (ки) _1_ курсу _КН-12в   групи

напряму підготовки______КН____________

спеціальності_______ІУС___________

 

 Васильченко  Юлії

(прізвище  та ініціали)

 

Керівник _асс Теплова О.В.     _

              асс. Андрієвська Н.К.                 _   

(посада, вчене звання, науковий  ступінь, прізвище та ініціали)  

 

Національна шкала ________________   

Кількість балів: __________Оцінка: ECTS _____

 

                                                                     Члени комісії          ________________  ___________________________

                                                                                                                                             (підпис)                        (прізвище та ініціали)

                                                                                                      ________________  ___________________________

                                                                                                                                              (підпис)                        (прізвище та ініціали)

                                                                                                                                ________________  ___________________________

                                                                                                                                              (підпис)                         (прізвище та ініціали

 

 

                                                                      

 

 

 

 

                                                       

м. Донецьк – 2013рік

Форма № У 6.01

 

Державний вищий навчальний заклад "Донецький національний

                                    технічний університет"                                     _

(назва вищого навчального закладу)

 

Кафедра: Автоматизовані системи управління

Дисципліна: WEB - технологии и WEB – дизайн

Спеціальність: 05010101 Інформаційні управляючі системи і технології

Курс ____1_____ Група ______КН-12в_______ Семестр            2 

 

З А В Д А Н Н Я

на курсовий проект (роботу) студента

 

 

Васильченко Юлії

(прізвище, ім’я, по батькові)

 

1. Тема проекту (роботи)  

 

 

 

 

 

 

2. Строк здачі  студентом закінченого проекту (роботи)  

3. Вихідні  дані до проекту (роботи)  

 

 

 

 

4. Зміст розрахунково-пояснювальної  записки (перелік питань, які підлягають  розробці)  

 

 

 

 

 

 

 

5. Перелік  графічного матеріалу (з точним  зазначенням обов’язкових креслень)  

 

 

 

 

 

6. Дата видачі завдання  

 

Введение

 

HTML — это стандартный язык разметки  документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

HTML давно  перестал быть просто языком  программирования. Человек, изучавший  этот язык, обретает возможность  делать сложные вещи простыми  способами и, главное, быстро, что  в компьютерном мире не так  уж и мало. Гипертекст подходит  для включения элементов мультимедиа  в традиционные документы. Практически  именно благодаря развитию гипертекста, большинство пользователей получило  возможность создавать собственные  мультимедийные продукты и распространять их на компакт-дисках. Такие информационные системы, выполненные в виде набора HTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-броузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров. От пользователя требуется выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связь между ними.

HTML является  основой моды в Интернете.

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

 

1.Проектирование логической структуры сайта

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

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

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

Таким образом мы имеем логическую структуру  сайта по заданной теме «Университет», которая показана в схеме 1.1. Так же эта логическая структура предоставлена в печатном виде на листе А3. По схеме мы видим, что пользователь имеет возможность переходить с Главной страницы на множество страниц, которые ей подчиняются, а именно: Приветствие ректора,  Краткая информация,  Администрация,  Автомобильный факультет, Дорожно-строительный факультет, Механический факультет, Факультет управления и бизнеса, Факультет транспортных средств, Факультет подготовки иностранных граждан, Административные подразделения, Учебные подразделения.  В свою очередь Краткая информация педоставляет возможность перейти на такие информационные страницы как Направления подготовки и Структура университета. Административные подразделения включают  себя такие страницы как Информационно вычислительный центр, Лаборатория инновационных технологий в мире, Отдел управления качеством образования и стандартизации, Отдел организации содействию работоустройства студентов. Если пользователь находится на страничке Учебные подразделения, он может перейти на страничку  Научно-техническая библиотека  и Лаборатория скоростных  автомобилей. Так же пользователь с любой странички может перейти на вкладку Фотогалерея, а с той просмотреть фотоальбомы, такие как Мистер ХНАДУ, Мисс ХНАДУ и Мафия в ХНАДУ.

 

 

 

 

Схема 1.1

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.Проектирование физической структуры сайта

Физическая структура сайта описывает размещение файлов и папок на диске компьютера.

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

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

 

Расположения файлов выглядит так:

 

 

 

 

 

Рисунок 2.1 Начальная

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Рисунок 2.1 Содержание папки pages

 

 

 

 

 

 

 

 

 

 

 

Рисунок 2.1 Содержание папки                  Рисунок 2.1 Содержание папки

             image                                                                administ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Рисунок 2.1 Содержание папки                        Рисунок 2.1 Содержание папки

               facultet                                                                       foto

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Рисунок 2.1 Содержание папки                        Рисунок 2.1 Содержание папки

                   maf                                                                        miss

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Рисунок 2.1 Содержание папки                    Рисунок 2.1 Содержание папки                                       

                     mister                                                          oformlenie

 

 

 

 

 

 

 

 

 

                                                                     

 

3. Разработка контента HTML-страниц

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Рисунок 3.1 Состав главной страницы

 

 

 

 

4. Разработка  адаптивной структуры

 

Схема блочной верстки сайта приведена на Рисунке 4.1

Блок #content-container является основной областью страницы. Для данного блока установлена минимальная высота 100% и ширина на весь экран в виде фиксированного значения в пикселях, выравнивание по левому краю, отступов нет, отступ текста к рамке равен нулю.

Блок #header является верхней частью страницы. Для данного блока установлена высота в пикселях, фоном является картинка, отступ  от каждого элемента равен нулю.

Блок #header-menu задает стиль главногo горизонтального меню. Для данного блока установлена высота и ширина в виде фиксированного значения в пикселях и  фон задан картинкой.

Блок #leftbar задает стиль левого вертикального меню . Для данного блока установлена фиксированная ширина в пикселях, цвет фона задан картинкой, выравнивание по верхнему краю относительно других блоков, отступ от левого края элемента равен нулю.

 Блок #post-containes задает стиль центральной части основной области. Для данного блока выравнивание по левому краю относительно других блоков, отступы внутри блока.

Блок # sideads контейнер справа для дополнительной информации. Для данного блока установлена ширина, выравнивание по левому краю относительно других блоков, величину отступа от верхнего края элемента.

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

 

 

 

 

 

#content-container {

…    

float: left;

width: 1004px;

padding: 0px;

    }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Рисунок 4.1

 

  
6  Разработка стилей для реализации интерфейса web-сайта

Таблица стилей для реализации интерфейса

Название css-селектора	Правила для устройства «All»	Правила для устройства «Адаптивное устройство»
body	font: 12px arial,verdana,sans-serif; padding: 0px; margin: 0px; background: black;
#header	height: 257px; width: 1004px; padding: 0px; margin: 0px auto; background: url(pages/images/oformlenie/header.jpg) no-repeat top center; float: none;	display:none;
#wrap	width: 1004px; padding: 0; margin: auto;	display:none;
#content-container	float: left; width: 1004px; padding: 0px; margin-top: 0px; margin: auto;	display:none;
#search	font-family: Verdana, Arial, Helvetica, sans-serif;     padding: 2;      text-align: right; top: 13px; right: 185px; color: #C0CBDE; position: absolute;	display:none;
#header_menu	padding: 0px 0px 0 15px; margin-top: -45px; height: 43px; float: left; background: url(pages/images/oformlenie/navlist.gif) repeat-x right top; width: 985px;	display:none;
#leftbar	width: 208px; margin-left: 0px; margin-top: 20px; float: left; background: url(pages/images/oformlenie/menu-bg.gif) repeat-y left;	display:none;
#leftbar ul	margin: 0; padding: 0; width: 208px;	width: 300px;height: 40px;font-variant: small-caps;background:url(pages/images/images/images//menu.png) repeat right;
#leftbar ul li	list-style-type: none; list-style-image: none; margin: 0; padding: 0;	margin: 0; padding-left: 2px; padding-top: 8px; list-style-type: none;
#leftbar ul h2	font: 14px arial; color: #E19712; text-align: center; font-weight: bold; padding: 10px 0px; margin: 0; height: 25px; background: url(pages/images/oformlenie/menu-top.gif) no-repeat left top;	display: inline;   font-size:20px;
#leftbar ul li ul	margin-left: 10px;	color:  #778899;       padding-left: 10px;       padding-right: 5px;       text-decoration: none;       font-weight: bolder;
#leftbar ul li a	color: #B7B7B7; text-decoration: none; width: 180px; padding-left: 5px;	color: #1874CD;
#leftbar ul ul li	olor: #B90717; margin-left: 15px; height: 15px; font: 12px arial; width: 188px; background: url(pages/images/oformlenie/arrow.gif) no-repeat left;	width: 300px; background: #F5F5F5;
#content-container	float: left; width: 1004px; padding: 0px; margin-top: 0px; margin: auto;	padding: 5px;
#container	font-size: 1.2em;	float: left; width: 290px; line-height: 30px;
.post-container	float: left; width: 534px; margin-top: 20px; padding-left: 25px; color: #7F7F7F;	float: right;
.post	width: 534px; padding-top: 0; color: #7F7F7F; float: none; display: block; margin-bottom: 30px; clear: both; background: url(pages/images/oformlenie/post-bg.gif) repeat-y left;	padding: 0;   list-style-type: none; margin-bottom:20px;
.posttop	width: 534px; height: 100px; color: #BE7A25; padding-top: 10px; padding-left: 10px; background: url(pages/images/oformlenie/post-top.gif) no-repeat;	text-decoration: none; padding-left: 0px; color: 3333FF;
.posttop h2	font: 16px arial; text-align: left; overflow: visible; margin-bottom: 0; padding: 5px 0 0 10px; float: left; color: #C81C0E; font-weight: bold;	color: #00CCFF;
.posttop h2 a	color: #F4F4F4; font-weight: bold;	padding: 10px 20px; font-size: 18px;  font-weight: bolder; background: RoyalBlue; color:white; text-align: center;
.date	float: left; margin-top: 0px; text-align: right; height: 20px; padding-top: 8px; padding-left: 17px; margin-left: 5px; background: url(pages/images/oformlenie/date.gif) no-repeat left;	padding: 0px 0px 0px; background: white;
.postinfo	height: 45px; float: left; color: #AAA; clear: both; width: 500px; margin-top: 0px; font: 11px verdana;	margin-bottom:20px; margin-top:-14px; font-size: 16px; line-height: 25px; text-align: center; border-bottom:1px dotted #C0C0C0 ;
#containercenter	float: left;width:655px;margin: -25px 0 0 25px;background:#DCEDF6;	display:none;
#ramka	padding: 10px 10px 10px 10px;	display:none;
#ramka img	padding: 5px 5px 5px 5px;border: 2px double #CCCCCC;	display:none;
.privet	color:6666FF;text-align: center;font-size:30px;font-style:oblique;padding:15px;	display:none;
#leftfleche1 img	margin-top:50px;	display:none;
#bottom	margin: 0px auto 0px auto; width: 1260px; text-align: center; color: #FFFFFF; font-size: 18px; padding: 20px; background: url(pages/images/images/images/footer.png) repeat right;	width: 300px; text-align: center;color: #FFFFFF;font-size: 16px;padding: 10px 0; background: url(pages/images/images/images/footer.png) repeat right;