Web-програмування та web-дизайн

Автор работы: Пользователь скрыл имя, 10 Октября 2013 в 00:40, курсовая работа

Краткое описание

Целью курсовой работы по дисциплине «Web-програмування та web-дизайн» является практическое закрепление теоретической части курса и приобретение навыков создания сайтов с использованием современных программных и технических средств.
Курсовой проект выполнена с использованием HTML и CSS.

Содержание

Введение……………………………………………....4
Основная часть………………………………………..5
Заключение…………………………………………..13
Список рекомендуемой литературы……………….14
Приложения………………………....……………….15

Скачать полностью (106.54 Кб) Сколько стоит заказать работу?
Прикрепленные файлы: 1 файл

kursovaya(1).docx

— 112.00 Кб (Скачать документ)

 

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

ДОНЕЦЬКИЙ НАЦІОНАЛЬНИЙ ТЕХНІЧНИЙ УНІВЕРСИТЕТ

 

Кафедра автоматизованих 

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

 

 

 

ПОЯСНЮВАЛЬНА  ЗАПИСКА

до курсового  проекту з дисципліни

«Web-програмування та web-дизайн»

 

 

 

Виконавець

ст.гр.КН-12б           __________________   Корольов  Дмитро Ігорович                    (підпис)             (П.І.Б.)

Керівник     __________________   Фонотов Анастас Михайлович

   (підпис)             (П.І.Б.)

Дата  захисту  ______________ Оцінка _______________________

 

 

 

 

 

 

 

 

 

                                          Донецьк 2013 р.

 

  1. Задание

Разработать проект web-сайта и реализовать его. Предоставить структуру

 web-сайта, описание таблиц стилей и реализацию заданного интерфейса.

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

Тема курсового проекта Собаки - лучшие друзья человека.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  1. Содержание

Титульный лист………………………………………1

Лист – задания………………………………………..2

Содержание…………………………………………...3

Введение……………………………………………....4

Основная часть………………………………………..5

Заключение…………………………………………..13

         Список рекомендуемой литературы……………….14

         Приложения………………………....……………….15

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  1. Введение

Целью курсовой работы по дисциплине «Web-програмування та web-дизайн» является практическое закрепление теоретической части курса и приобретение навыков создания сайтов с использованием современных программных и технических средств.

Курсовой проект выполнена с использованием HTML и CSS.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как  средство описания, оформления внешнего вида веб-страниц, написанных с помощью  языков разметки HTML и XHTML, но может также  применяться к любым XML-документам, например, к SVG или XUL.

 

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

HTML является приложением («частным  случаем») SGML (стандартного обобщённого  языка разметки) и соответствует  международному стандарту ISO 8879. XHTML же является приложением XML.

 

 

 

 

 

 

 

4. Основная часть

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

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

  • создания четкой и логичной схемы навигации;
  • информативного и привлекательного представления web-страниц на разных устройствах и с разным разрешением экрана;
  • разработка цветовой концепции сайта; 
  • организации простой технологии внесения изменений при редактировании сайта.

 

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

 

При проектировании структуры были учтены такие аспекты:

 

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

 

Логическая  структура разработанного веб-сайта показан на рис. 4.1.

 

Главное меню




 



Популярные  породы


  • Лабрадор
  • Немецкая овчарка
  • Бульдог
  • Боксер
  • Пудель
  • Ротвейлер

 

Психология  собаки


  • Воспитание и обучение
  • Социальное поведение
  • Интеллект
  • Характер
  • Вокализация
  • Ротвейлер

 


 

Главная страница



 

 

 

 

 

 

Рисунок 4.1 Структура  сайта

4.2 Проектирование структуры каталогов

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

Рисунок 4.2 Размещения файлов

 

 

 

 

 

 

 

 

 

 

 

 

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

В соответствии с разработанным шаблона сайта были выделены логические блоки. Была разработана структура главной страницы и ее наполнение. Состав элементов  главной страницы веб-сайта представлен в виде вложенных друг друга блоков на рисунке 4.3.Структура сайта приложена в приложении Б.

 

 

 

HTML


BODY



Главное меню



 

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


Слайдер



 

 

 

 

 

 

 

 

 

 

 

 

 

 

Цитата



 

 

Подвал (футер)



 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

Для главной  страницы сайта был создан шаблон структуры, как показано на рисунке 4.4.

 

HTML



 

BODY


 


                  #menu {margin: 2% auto 0%; text-align: center; width: 100% ;}



 

 

 

#slide {


opacity:0.3;

width:50%;

margin-left:45%;

}


 

 

 

 

 

 

 

 

 

 

 

 

.citata{ width:60%;margin-left:40%;margin-top:2%;}



 

 

 

 

 

#footer {float:left;color:#F5DEB3;width:100%;text-align:center;}



 

 

 

 

 

Рисунок  4.4 Блочный макет сайта.

 

 

 

 

 

В соответствии с  вариантом был спроектирован адаптивный дизайн для мобильного устройства. Некоторые элементы основной структуры не были отображены (слайдер).

Шапка



 

 

 

 

 

 

 

 

 

 

Главное меню



 

 

 

Цитата



 

 

 

 

Подвал(футер)



 

 

 

 

 

 

 

Рисунок 4.5. Состав главной страницы (мобильное устройство)



 

 

Блочный макет мобильной верстки  идентичен соответствующим элементам  основной верстки.

 

 

 

 

 

 

 

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

На основе структуры первой страницы был определён перечень используемых стилей для позиционирования элементов web-сайта в соответствии с выданным заданием.

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

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

 

Таблица 4.1 Стили описания элементов разметки

Название  css-селектора

Правила для устройства «Screen»

Правила для устройства

«Мобильного устройства»

Menu

#menu {

margin: 2% auto 0%;

text-align:center;

width:100%;

}

 

#menu ul li {

display:inline;

margin: 0 3%;

font-size:250%;

}

 

#menu ul li:hover{

border-bottom:5px solid #D2691E;

}

 

#menu ul li a:hover{

color:#D2691E;

border-top: 5px #D2691E;

}

#menu {

padding-left:0;

margin-top:70%;

text-align:center;

width:100%;

}

 

#menu ul{

padding-left:0;

}

 

#menu ul li {

display:inline;

margin: 0 2%;

font-size:100%;

}

 

#menu ul li:hover{

border-bottom:1px solid #D2691E;

}

 

#menu ul li a:hover{

color:#D2691E;

border-top: 5px #D2691E;

}


 

 

 

 

 

 

Название  css-селектора

Правила для устройства «Screen»

Правила для устройства

«Мобильного устройства»

Slide

#slide {

opacity:0.3;

width:50%;

margin-left:45%;

}

#slide {

display:none;

}

Citata

.citata {

width:60%;

margin-left:40%;

margin-top:2%;

}

.citata table tr td{

color:white;

font-size:200%;

}

.citata {

width:70%;

margin-left:32%;

color:#CDCDB4;

font-size:80%;

margin-top:2%;

}

#footer

#footer {

float:left;

color:#F5DEB3;

width:100%;

text-align:center;

}

#footer {

color:black;

width:100%;

text-align:center;

}


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

Последовательность действий при  выкладывании сайта на хостинг:

 

  1. Войти на сайт компании предоставляющей услуги хостинга, прочитать соглашения (правила), согласно которым в дальнейшем будут предоставляться услуги хостинга.
  2. Зарегистрироваться(зарегистрировать домен).
  3. Получить и внимательно изучить подтверждение регистрации пришедшее на электронную почту.
  4. Найти в письме подтверждения логин и пароль от личного кабинета.
  5. Войти в личный кабинет в раздел диспетчер файлов.
  6. Начинать загружать данные своего сайта с локального компьютера на сервер.
  7. Прописать указанный в момент регистрации домен в адресной строке браузера и посмотреть результат.

 

 

 

Сайт хорошо отображается во всех современных и популярных браузерах (Opera, Mozilla Firefox, Google Chrome).

Информация о работе Web-програмування та web-дизайн