Ирина Эланс

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

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

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

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

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

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

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

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

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

Виконавець

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

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

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

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

Донецьк 2013 р.

Задание

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

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

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

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

Содержание

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

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

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

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

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

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

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

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

Введение

Целью курсовой работы по дисциплине «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 {

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 Описание процедуры выкладывания на хостинг, результат валидации сайта и анализ проверки его работоспособности в нескольких броузерах.

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

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

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

Сайт является полностью валидным за исключение тега <marquee> …</marquee>, т.к он отсутствует в спецификации HTML.

Заключение

В результате выполнения курсовой работы были изучены некоторые аспекты разработки web-страниц .При оформлении курсовой работы был получены навыки оформления программной документации в соответствии с Единой Системой Программной Документации, а также большой практический опыт разработки структуры и дизайна web – страницы.

Теоретические сведения были закреплены практическими занятиями.

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

Квинт И., HTML и CSS на 100%, - СПб.: Питерб 2010, - 384с.
Орлов Л. В., Web_сайт без секретов.— М.: Бук_пресс, 2006. — 512 с.
Полонская Е.Л., Язык HTML. Самоучитель. : — М. : Издательский дом "Вильяме", 2003. — 320 с.
Robert G. Fuller, HTML in 10 Simple Steps or Less, 2004 by Wiley Publishing, Indianapolis, Indiana.
Гончаров А., Самоучитель HTML. — СПб.: Питер, 2002. — 240с.
Мержсвич В. В. HTML и CSS на примерах. — СПб.: БХВ-Петербург, 2005. —448 с.
Laura Lemay, Rafe Colburn, Web publishing with HTML and CSS, Sams Teach Yourself, - 2011, -760c.
Ши Д., Хольцшлаг М. Е., Философия CSS-дизайна / Дэйв Ши, Молли Е. Хольцшлаг ; пер. с англ. А. А. Слинкина. - М. : НТ Пресс, 2005. - 312 с.
Jason Cranford Teague, Visual Quickstart Guide CSS, DHTML, and Ajax, Fourth Edition, - Peachpit Press, - 2006, -576с.
Элизабет Кастро, HTML и CSS для создания Web-страниц, Пер. с англ. И.В. Диева, -М. : НТПресс, 2006, -144с.

Приложение А

Файл стилей основного дизайна

body {

background:#1D1B1D;

background-image: url(../images/fon.jpg);

background-size: 90%;

background-repeat:no-repeat;

font-family:Mistral,Arial,Segoe Script;

background-attachment: fixed;

}

a:visited,a:link {

color:#363636;

text-decoration:none;

}

#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;

}

#slide {

opacity:0.3;

width:50%;

margin-left:45%;

}

.citata {

width:60%;

margin-left:40%;

margin-top:2%;

}

.citata table tr td{

color:white;

font-size:200%;

}

#right {

text-align:right;

padding-right:5%;

}

#left {

text-align:left;

}

.icon {width:32px; margin-bottom:-5px;}

#fon2 {

float:right;

text-align:center;

margin-right:2%;

width:35%;

height:700px;

background: url(../images/1.jpg);

}

#fon2 img {

margin-top:11%;

margin-left:12%;

width:75%;

}

#txt {

font-family:Segoe Print;

font-size:95%;

width:75%;

margin-left:20%;

margin-top:-1%;

}

#txt1{

font-family:Segoe Print;

font-size:95%;

width:75%;

padding-top:0%;

padding-left:18%;

margin-top:0;

}

#vertical_menu {

float:left;

margin-left:35%;

margin-top:-4%;

width:23%;

font-size:250%;

list-style-type: none;

}

#vertical_menu li a:hover {

padding-left:25px;

background:url(../icons/lapa.png) no-repeat;

background-position:left center;

}

#vertical_menu li a:hover{

color:#D2691E;

}

#vertical_menu li h5{

margin-bottom:5%;

font-family:Segoe Print;

}

#main {

font-family:Segoe Print;

font-size:90%;

font-weight:bold;

}

#vertical_menu #main a:hover {

background:none;

padding:0;

}

#main a {

color:black;

}

#name_porodi{

width:100%;

margin-top:0;

margin-bottom:0;

font-family:Segoe Print;

}

#name_porodi1{

width:100%%;

padding-top:6%;

margin-bottom:0;

font-family:Segoe Print;

}

#footer {

float:left;

color:#F5DEB3;

width:100%;

text-align:center;}

Файл стилей адаптивного дизайна (мобильное устройство)

body {

background:#DEB887;

background-image: url(../images/fon.jpg);

background-size: 100%;

background-repeat:no-repeat;

font-family: Mistral,Arial,Segoe Script;

}

a:visited,a:link {

color:#363636;

text-decoration:none;

}

#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;

}

#slide {

display:none;

}

.citata {

width:70%;

margin-left:32%;

color:#CDCDB4;

font-size:80%;

margin-top:2%;

}

#right {

text-align:right;

padding-right:5%;

}

#left {

text-align:left;

}

.icon {width:12px; margin-bottom:-2px;}

#fon2 img {

margin-top:65%;

margin-left:12%;

width:75%;

}

#txt {

font-family:Segoe Print;

font-size:95%;

width:75%;

margin-left:20%;

margin-top:-1%;

}

#txt1{

font-family:Segoe Print;

font-size:95%;

width:75%;

padding-top:0%;

padding-left:18%;

margin-top:0%;

}

#vertical_menu {

font-size:170%;

list-style-type: none;

}

#vertical_menu li a:hover {

padding-left:25px;

background:url(../icons/lapa.png) no-repeat;

background-position:left center;

}

#vertical_menu li a:hover{

color:#D2691E;

}

#vertical_menu li h5{

margin-bottom:5%;

font-family:Segoe Print;

}

#main {

font-family:Segoe Print;

font-size:90%;

font-weight:bold;

}

#vertical_menu #main a:hover {

background:none;

padding:0;

}

#main a {

color:black;

}

#name_porodi{

text-align:center;

width:100%;

margin-top:0;

margin-bottom:0;

font-family:Segoe Print;

}

#name_porodi1{

text-align:center;

width:100%%;

padding-top:65%;

margin-bottom:0;

font-family:Segoe Print;

}

#footer {

color:black;

width:100%;

text-align:center;

}

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//E-N" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>Собаки</title>

</head>

<ul>

<li>

<a href="index.html"><img class="icon" src = "icons/home.png"/>Главная</a>

</li>

<li>

<a href="porodi1.html"><img class="icon" src = "icons/bone.png"/>Популярные породы</a>

</li>

<li>

<a href="psyhology.html"><img class="icon" src = "icons/paper.png"/>Психология собаки</a>

</li>

</ul>

</div>

</marquee>

</div>

<table>

<tr><td colspan = "3" id = "left">Если вы не любите собак, вы не любите верность; вы не любите тех, кто верен вам, следовательно вы не можете быть верным...</td></tr>

<tr><td ></td> <td id = "right">Наполеон Бонапарт</td> <td> </td> </tr>

</table>

</div>

</div>

</body>

</html>

Структура страницы(Популярные породы)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//E-N" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>Породы</title>

</head>

<body>

<p id = "txt"><b>Породами собак</b> являются отдельные группы близкородственных и внешне подобных друг другу домашних собак, которые относятся к подвиду <b>Canis lupus familiaris</b>,

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

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

</p>

</div>

<li><h5>Популярные породы:</h5></li>

<li><a href="labrador.html">Лабрадор-ретривер</a></li>

<li><a href="ovcharka.html">Немецкая овчарка</a></li>

<li><a href="buldog.html">Английский бульдог</a></li>

<li><a href="bokser.html">Боксер</a></li>

<li><a href="pydel.html">Пудель</a></li>

<li><a href="rotveiler.html">Ротвейлер</a></li>

<li id = "main"> <a href="index.html"><img class="icon" src = "icons/home.png"/>Главная</a></li>

</ul>

</div>

</body>

</html>

Структура страницы(Психология собаки)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//E-N" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>Психология собаки</title>

</head>

<body>

<h3 id = "name_porodi">Психология</h3>

<p id = "txt"> <b>Психика</b> собаки является результатом совместной эволюции с человеком и, в отдельных случаях, искусственного отбора.

Собаки способны великолепно понимать выражение голоса и лица человека и определять его намерения.

Некоторые собаки обладают индивидуальностью. Характер собаки зависит как от природных

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

Одним из основных наследственных факторов, влияющих на характер собаки, является темперамент.

</p>

</div>

<li><h5>Психология собаки:</h5></li>

<li><a href="vospitanie.html">Воспитание и обучение</a></li>

<li><a href="socialnoe.html">Социальное поведение</a></li>

<li><a href="intelect.html">Интеллект</a></li>

<li><a href="character.html">Характер</a></li>

<li><a href="vokalizacia.html">Вокализация</a></li>

<li id = "main"> <a href="index.html"><img class="icon" src = "icons/home.png"/>Главная</a></li>

</ul>

</div>

</body>

</html>

Web-програмування та web-дизайн 📙 Курсовая → 🆔 1423