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

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Заключение

 

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>

<link rel = "stylesheet"  type = "text/css" href = "styles/styles.css"/>

</head>

<div id = "menu">

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

 

<div id = "slide">

     <marquee  behavior="scroll" direction="left"  scrolldelay = "100">

    <img src = "slides/хаски1.jpg" alt = "Хаски"/>

<img src = "slides/собака.jpg" alt = "собака"/>

<img src = "slides/далматинец.jpg" alt = "Далматинец"/>

<img src = "slides/немецкая овчарка.jpg" alt = "Немецкая овчарка"/>

<img src = "slides/собака1.jpg" alt = "собака"/>

<img src = "slides/хаски.jpg" alt = "хаски"/>

    <img src = "slides/лабрадор.jpg" alt = "лабрадор"/>

<img src = "slides/стаффорд.jpg" alt = "стаффорд"/>

  </marquee>

  </div>

  <div class = "citata">

  <table>

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

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

</table>                   

</div>

 

<div id = "footer">

<p>Королёв Дмитрий &copy; 2013</p>

</div>

 

</body>

</html>

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>

<link rel = "stylesheet"  type = "text/css" href = "styles/styles.css" />

 

</head>

 

 

 

<body>

<div id = "fon2">

 

<img src = "images/porodi.jpg"/>

 

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

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

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

 

</p>

 

 

</div>

 

 

<ul id = "vertical_menu">

       <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 id = "footer">

<p>Королёв Дмитрий &copy; 2013</p>

</div>

 

</body>

</html>

 

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>

<link rel = "stylesheet"  type = "text/css" href = "styles/styles.css" />

</head>

 

<body>

<div id = "fon2">

 

<img src = "images/psychology.jpg"/>

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

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

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

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

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

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

</p>

 

 

</div>

 

<ul id = "vertical_menu">

       <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 id = "footer">

<p>Королёв Дмитрий &copy; 2013</p>

</div>

 

</body>

</html>