Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Etapy-sozdaniya-sajta » Sozdanie-maketa-sajta

Макет сайта: создание, виды, вёрстка.

Создание макетов для сайта очень трудоёмкий процесс. Конечно можно сделать всё просто (и так делают многие) взять готовый макет и немного поменяв стили, картинки выложить в сеть. Но что делать, если у вас нет готового макета. Правильно нужно сделать его с нуля.

Создание макета для сайтаТак как же происходит создание этого самого макета? Вы часто в сети можете видеть универсалов, которые одновременно являются как веб-дизайнерами, так и разработчиками, но по моему мнению это не совсем правильно. Да, веб-дизайнер может иметь представление о вёрстке сайта (и входе своей работы он всегда будет сталкиваться с какими-то вопросами по вёрстке), но он прежде всего должен быть дизайнером, а не разработчиком сайтов. Обычно каждый выбирают отдельную профессию (надеюсь вы понимаете о чём я говорю).

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

Виды макетов

Так какие же основные виды макетов сайта бывают? Многие из вас наверное слышали такие понятия, как фиксированный и резиновый макеты. Фиксированный макет обычно состоит из колонок фиксированной ширины, заданной в пикселях:

// код html

<header>
 <h1>Шапка сайта</h1> 
</header>
<nav>
 <ul>
 <li><a href="#">Пункт меню №1</a></li>
 <li><a href="#">Пункт меню №2</a></li>
 <li><a href="#">Пункт меню №3</a></li>
 <li><a href="#">Пункт меню №4</a></li>
 </ul>
</nav>
<article>
<h2>Заголовок статьи</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
 <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</article>
<footer>© Александр Побединский</footer>

// код CSS

body{
  width:550px;
}
header{
  background: #ccccc6;
  color:white;
  text-align:center; 
}
nav{
  float:left;
  width:200px;  
}
ul{
  list-style:none;
}
li a{
  text-decoration:none;
 -webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-ms-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease;
}
a:hover{
  opacity:0.7;
}
article{
  margin-left:210px;
}
footer{
  clear:both;
  background:#e7d6b2;
  padding:15px;
}

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

body{
  width:550px;
} 

А также для навигации — ширину и обтекание блока справа:

nav{
  float:left;
  width:200px;  
} 

Для колонки статьи я указал отступ, равный ширине колонки с навигацией + 10px от самой колонки. Результат можно посмотреть здесь: https://jsfiddle.net/nightgremlin/feydp1hz/


В резиновом макете колонки задаются не с фиксированной шириной (чаще всего ширина задаётся в процентах):

body{
  width:100%;
  margin:0;
}
nav{
  float:left;
  width:30%;  
}
article{
  margin-left:32%;
  padding-right:5px;
  }

Код html я оставил без изменений. В результате у нас получилось вот что: https://jsfiddle.net/nightgremlin/feydp1hz/1/.

Подводя итог нужно отметить, что при использовании адаптивной верстки макет сайта может меняться.



наверх