Введение

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

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

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

Графическая часть заданием не предусмотрена.
       
1 Назначение и область применения
        Главной  функцией данного сайта является реклама и продвижение своих услуг по средствам глобальной компьютерной сети, построенной на использовании протокола IP (Интернет).

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

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

         Область применения данного макета это сайты компаний по продаже косметики, парфюмерии и салоны красоты.
             

 2 Технические характеристики
 2.1 Постановка задачи

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

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

После верстки сайта его необходимо протестировать на наличие ошибок.

Если синтаксические ошибки отсутствуют сайт необходимо протестировать в различных браузерах на наличие совместимости с ними. 
2.2 Анализ верстки дизайн – макета
     При создании сайта мною будет применяться блочная верстка. Для начала необходимо обработать исходный макет в графическом редакторе с целью получить необходимые  изображения, которые потребуются мне для верстки сайта. Какие именно фрагменты были взяты, показано на рисунке   (рис.1)

рис.1 Макет сайта
После обработки дизайн – макета в графическом редакторе  мы получили 16 изображений, которые будут использоваться в дальнейшем для  создания сайта.

           У сайта имеется один главный и основной блок  «main»:

<div class="main">

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

          Далее идет блок  "container" и "header" , в них расположены верхнее меню (рис. 2) и шапка сайта (рис. 3)


рис. 2 Верхнее меню
<div class="container"> Главная | Карта сайта | Контакты</div>
В блоке "header" расположена шапка сайта, в нем используются изображения номер: 2, 3 и 4 (см рис. 1). Он отвечает за корректное отображение шапки

рис. 3 Шапка
<div class="header"><img src="image/1.jpg" width="299" height="152" alt="1" longdesc="image/1.jpg" /><img src="image/2.jpg" width="294" height="152" alt="2" longdesc="image/2.jpg" /><img src="image/3.jpg" width="144" height="152" alt="3" longdesc="image/3.jpg" /></div>
Следующий блок это "content" пожалуй, самый важный блок, так как в нем содержится основная информация, которая предназначена  для посетителя (рис. 4).
<div class="content">

<div class="welcome"> Добро пожаловать</div>

<div class="leftc"> Специальное предложение</div>

<div class="rightc">Супер предложение</div>

<div class="niz">Нижний блок</div>

</div>
рис. 4 Левый блок
Рассмотрим подробнее, что находится в каждом из блоков. Первый блок это "welcome" в нем размещается приветствие и изображение 5 (рис.1), а также еще два дополнительных блока  "zag" "text".  Блок "zag" отвечает за правильное отображение заголовка, а блок  "text" за правильное отображение текста. Текст которой написан у меня не несет не какой смысловой нагрузки и используется при создания шаблона, для того чтобы  посмотреть как текст будет выглядеть.

 

<div class="welcome">

<p class="zag">Добро пожаловать на наш сайт !</p>

<p class="text">Текст приветствия </p>

</div>

        

         Далее идут два центральных блока "leftc" и "rightc" . В них так же используются блоки "yellowtext"(для отображения желтого заголовка) и "text".

Так же в блоке "leftc" используется изображение 6 (рис.1), а в блоке "rightc" изображение 7 (рис.1).

<div class="leftc">

<div class="yellowtext">::  Специальное предложение</div>

<p class="text">Текст</div>

</div>

<div class="rightc">

<div class="yellowtext"> :: Супер предложение</div>

<p class="text">Текст</div>

</div>
         И последним в блоке  "content" идет блок "niz". В нем присутствует изображение 9 (рис.1) и блок  "niz2" который дублируется 3 раза для отображения текста в виде столбцов, так же в нем использовались "yellowtext" и "text" . В качестве фона использовалось изображение 8 (рис.1).
<div class="niz">

<div class="yellowtext">::  Специальное предложение</div>

<div class="niz2"> <img src="image/9.jpg" width="63" height="81" longdesc="image/9.jpg" ALIGN="right" />

<span class="text">Текст</span></div>

<div class="niz2">

<span class="text">Текст </span> </div>

<div class="niz2">

<p class="text">Текст</p></div>
         На этом главный блок "content" закончился, и мы начинаем разбирать блок "right"(см рис.5 ). В этом блоке расположено меню навигации по сайту. В качестве фона использовалось изображение 11 ( рис.1).
                                                  

                         рис.5                                                                             рис.6


Блок "rightn" (см рис.6 )расположен ниже блока "right", в нем использовались изображения 12, 13, 14, 15 ,16 и блоки  "yellowtext" и "center" продублированный 3 раза.
<div class="rightn">

<div class="yellowtext">:: Company News</div>

<div align="center"> изображение и текст</div>

<div align="center"> изображение и текст</div>

<div align="center"> изображение и текст</div>

</div>

         И остался последний блок "polosa" он представляет собой  желтую полосу,  в качестве фона использует изображение 10 (рис. 1). За ним следует текст о конфиденциальности и условиях использования

<div class="polosa"></div>

        
2.3 Выбор состава технических и программных средств

        

При верстке данного макета были выполнены следующие работы:
1)  Работа с графической частью и оптимизацией под  веб. Это возможно было осуществить в следующих программах: Adobe Photoshop, Adobe Fireworks, GIMP, CorelDRAW Graphics Suite. Из этих программ в наличии была только Adobe Photoshop CS5, поэтому графическую часть я выполнил в ней. Минимальные системные требования для Adobe Photoshop CS5(см. табл.1).
Таблица 1. Минимальные системные требования Adobe Photoshop CS5.

Наименование	Характеристика
Процессор	Intel® Pentium® 4 или AMD Athlon® 64
Операционная Система	Windows XP(SP3), Windows Vista(SPl), Windows 7
Оперативной памяти	1 Гб
Свободного пространства на жестком риске	1 Гб
Разрешение монитора	1024х768

2) Работа с html и CSS кодом. Такие работы могут проводиться в следующих программах Adobe Dreamweaver, Microsoft Expression Web, Microsoft Office SharePoint Designer, Namo WebEditor, html-kit tools, Macromedia HomeSite, IBM WebSphere Studio. Из вышеперечисленных программ я выбрал Adobe  Dreameaver  CS5, для работы с блоками она подходит лучше всего. Поэтому верстка сайта происходила в ней. Минимальные системные требования для Adobe Dreameaver CS5(см. табл.2).

Таблица 2. Минимальные системные требования Adobe Dreamweaver CS5.

Наименование	Характеристика
Процессор	Intel® Pentium® 4 или AMD Athlon® 64
Операционная Система	Windows XP(SP3), Windows Vista(SPl), Windows 7
Оперативной памяти	512 мб
Свободного пространства на жестком риске	1 Гб
Разрешение монитора	1280х800

         3) Тестирование сайта в разных браузерах. На основании статистики сайта liveinternet.ru за ноябрь 2010 года было выяснено, что самыми

популярными браузерами являются: Firefox 3.x, Opera 10.x , Internet Explorer 8

и Google Chrome . Следовательно мы должны протестировать работу сайта в этих браузерах. Минимальные системные требования для Firefox 3.x, Opera 10.x , Internet Explorer 8и Google Chrome (см. табл.3-6).
Таблица 3. Минимальные системные требования для Firefox 3.x.

Наименование	Характеристика
Процессор	Pentium 233МГц
Операционная Система	Windows XP(SP3), Windows Vista(SPl), Windows 7
Оперативной памяти	64 мб
Свободного пространства на жестком риске	52 мб
Разрешение монитора	-

Таблица 4. Минимальные системные требования для  Opera 10.x.

Наименование	Характеристика
Процессор	-
Операционная Система	Windows XP(SP3), Windows Vista(SPl), Windows 7
Оперативной памяти	256 мб
Свободного пространства на жестком риске	24 мб
Разрешение монитора	-

Таблица 5. Минимальные системные требования для   Internet Explorer 8.

Наименование	Характеристика
Процессор	частота не менее 233МГц
Операционная Система	Windows XP
Оперативной памяти	64 мб
Свободного пространства на жестком риске	6 мб
Разрешение монитора	800х600

Таблица 6. Минимальные системные требования для   Google Chrome.

Наименование	Характеристика
Процессор	-
Операционная Система	Windows XP(SP3), Windows Vista(SPl), Windows 7
Оперативной памяти	256 мб
Свободного пространства на жестком риске	52 мб
Разрешение монитора	-

Сводная таблица ниже содержит минимальные системные требования к компьютеру, на котором будут использоваться выше перечисленные программные средства (см. табл. 7).
Таблица 7. минимальные системные требования к компьютеру.

Наименование	Характеристика
Процессор	Intel® Pentium® 4 или AMD Athlon® 64
Операционная Система	Windows Vista(SPl)
Оперативной памяти	1 Гб
Свободного пространства на жестком риске	2,2 Гб
Разрешение монитора	1280х800

Реализация проекта осуществлялась на компьютере со следующими характеристиками (см.табл. 8).
Таблица 8. Характеристики рабочего компьютера.

Наименование	Характеристика
Процессор	Intel Core 2 Duo 2,4 MHz
Операционная Система	Windows 7
Оперативной памяти	4 Гб
размер жесткого диска 500 Гб	2,2 Гб
Разрешение монитора	1680х1050

3 Разработка рабочего проекта
3.1 Физическая структура сайта

         В таблице 9 расписана физическая структура сайта.

Таблица 9.

Название файла	Назначение	Взаимосвязь с другими файлами
index.html	главная страница сайта	папка image, twoColLiqRt.css, index2.html
index2.html	страница второго уровня	папка image, twoColLiqRt.css, index.html
twoColLiqRt.css	файл отвечает за хранение стилей	папка image, index.html, index2.html
папка image	хранит изображения которые используются в дизайне сайта

3.2 Логическая структура сайта
Ниже схематично изображена  логическая структура сайта.

ul, ol, dl {padding: 0;

               margin: 0;

               line-height: 18pt; }

h1, h2, h3, h4, h5, h6, p {margin-top: 0; }

a img { border: none; }

a:link {color:#414958;

           text-decoration: none; }

a:visited {color: #4E5869;

               text-decoration: none;}

a:hover, a:active, a:focus {text-decoration: none; }
.container { margin: 0 auto

                   background-image: url(image/4.jpg);

                   font-family: "Lucida Console", Monaco, monospace;

                  font-size: 12px;

                  height: 15px;

                  padding-top: 3px;

                   padding-left: 6px; }

.sidebar1 {float: right;

                width: 30%;

                 background: #93A5C4;

                 padding-bottom: 10px; }

.content {width: 385pt;

                float: left;

                height: 537px;}

.welcome{background:url(image/5.jpg);

                height: 167px;

                width: auto;

                 text-align: center;

                font-size: 12px;

                 padding-right: 15px;

                padding-left: 140px;

                padding-top: 15px; }

.leftc {background-image:url(image/6.jpg);

          height: 165px;

          width: 232px;

           padding-left: 25px;

           padding-top: 9px;

           float: left; }

.rightc {background-image: url(image/7.jpg);

            width: 230px;

            height: 160px;

            float: right;

            padding-left: 25px;

            padding-top: 10px; }

.text {font-size:12px;

          text-align:left;

          color: #000;

           font-family: "Comic Sans MS", cursive; }

.zag {font-size:16px;

         text-align:center;

          color:#06C;

          font-family: "Comic Sans MS", cursive; }

.yellowtext{color:#FC0;

                     font-family: Tahoma, Geneva, sans-serif;

                    font-size: 15px;

                   font-weight: bold; }

.ctext{float: right;

           width: 150px;

           height: 140px; }

.niz{height: 135pt;

       width: 377pt;

        background-image: url(image/8.jpg);

        float: left;

        padding-left: 5px; }

.niz2 {height:152px;

          width: 154px;

          float: left;

          padding-left: 8px;

          padding-right: 5px;

          padding-top: 10px; }

.polosa {height: 9px;

              width: 100%;

               background-image: url(image/10.jpg);

              float: left;}

.right{background:url(image/11.jpg);

          height: 199px;

          width: 159px;

          float: right;

          padding-left: 60px;

          color: #FFF;

          padding-top: 10px;

          background-repeat: repeat-y; }

.rightn{height: 330px;

            float: right;

            width: 179px;

           padding-left: 30px;

            background-image: url(image/12.jpg);

            background-repeat: repeat-y;

           padding-right: 10px; }

.centr2{float: left;

             width: 497px;

            height: 170px;

             background-image: url(image/16.jpg);

             background-repeat: repeat-y;

            padding-left: 10px;

            padding-right: 10px;

             padding-top: 10px; }

.content ul, .content ol { padding: 0 15px 15px 40px; }

ul.nav {list-style: none;

              border-top: 1px solid #666;

              margin-bottom: 15px; }

ul.nav li {border-bottom: 1px solid #666; }

ul.nav a, ul.nav a:visited {padding: 5px 5px 5px 15px;

                                          display: block;

                                        text-decoration: none;

                                        background: #8090AB;

                                       color: #000;}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus {background: #6F7D94;

                                                                       color: #FFF;}

.clearfloat {clear:both;

                  font-size: 1px;}

.main .content .welcome p {font-family: Comic Sans MS, cursive;}

.main .content .welcome pre {font-family: Comic Sans MS, cursive;}

.welcome {font-family: Comic Sans MS, cursive;font-size: 16px;}