Верстка сайта из готового дизайн макета

           Введение

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

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

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

     Графическая часть заданием не предусмотрена. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

              
 

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.

 

     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.

 

      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.