BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Дизайн и верстка » Мои личные шаблоны-заготовки для создания верстки блога/сайта

Мои личные шаблоны-заготовки для создания верстки блога/сайта

2014-07-10 / Вр:12:08 / просмотров: 8263

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

1). В самом начале я рисую макет в Photoshop:

Мои личные шаблоны-заготовки для создания верстки блога/сайта

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

Мои личные шаблоны-заготовки для создания верстки блога/сайта

1 – корпус сайта (site-blok);
2 – шапка сайта (header);
3 – меню верхнее (menu);
4 – блок контента (blok-content);
5 – левый блок (blok-left);
6 – правый блок (blok-right);
7 – подвал (footer)

Вот по такой схеме я разбиваю макет.

Если тяжело макет разбивать на блоки мысленно, рисуйте схему на бумаге, так, как это, например, делал я поначалу:

Мои личные шаблоны-заготовки для создания верстки блога/сайта

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

<html>
<head>
<title>Макет от BlogGood.ru</title>
</head>
<body>
<div class="site-blok">
  <div class="header">
  <h1>BlogGood.ru</h1>
     <div class="menu">
     <ul>
	 <li><a href="index.html">Главная</a></li>
	 <li><a href="index.html">О авторе</a></li>
	 <li><a href="index.html">Контакты</a></li>
     </ul>
	 </div>
  </div>

  <div class="blok-content">
     <div class="blok-left"><p>Текст</p></div>
	 <div class="blok-right"><p>Новости</p></div>
  </div>

  <div class="footer">
  <p><a href="index.html">BlogGood.ru</a></p>
  </div>  

</div>
</body>
</html>

Пока что результат будет вот таким:

Мои личные шаблоны-заготовки для создания верстки блога/сайта

Согласен, смотрится не очень. Переходим к CSS стилям.

Внимание: Рекомендую ко всем блокам прописывать рамки, чтобы видеть границы блоков (border:1px solid #000;).

.site-blok
{
border:1px solid #000; /* граница сайта */
}
.header
{
border:1px solid #000; /* граница сайта */
}
.menu
{
border:1px solid #000; /* граница сайта */
}
.blok-content
{
border:1px solid #000; /* граница сайта */
}
.blok-left
{
border:1px solid #000; /* граница сайта */
}
.blok-right
{
border:1px solid #000; /* граница сайта */
}
.footer
{
border:1px solid #000; /* граница сайта */
}

Результат будет вот таким:

Мои личные шаблоны-заготовки для создания верстки блога/сайта

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

<html>
<head>
<title>макет от BlogGood.ru</title>
<style>
*{
padding:0;
margin:0;
}
body
{
background:#010101 url(images/fon.png) no-repeat center top;
font:14px Verdana, Arial, Helvetica, sans-serif;
color:#ссс;
}
.site-blok
{
width:800px; /* ширина сайта*/
margin: 0 auto; /* выравниваем сайт по сентру*/
}
.header h1
{
margin:80px 0;
text-align:center;
font:40px  "Impact", Times, serif;
color:#fff;
}
.menu
{
height:50px;
background:#4c4c4c;
}
.menu ul
{
overflow: hidden;
}
.menu li
{
padding:10px;
float:left; /* граница сайта */
}
.menu li a
{
font:27px  "Times New Roman", Times, serif;
color:#bcbcbc;
text-decoration: none;
}
.blok-content
{
background:#cbcbcb;
overflow: hidden;
padding:10px 5px 15px 5px;
}
.blok-left
{
background:#fff;
width:550px; /* ширина блока левого*/
float:left; /* граница сайта */
padding:5px;
-webkit-box-shadow: 0 10px 6px -6px #444343;
-moz-box-shadow: 0 10px 6px -6px #444343;
box-shadow: 0 10px 6px -6px #44434
}
.blok-right
{
background:#fff;
width:200px; /* ширина блока правого*/
float:right; /* граница сайта */
padding:5px;
-webkit-box-shadow: 0 10px 6px -6px #444343;
-moz-box-shadow: 0 10px 6px -6px #444343;
box-shadow: 0 10px 6px -6px #444343;
}
.footer
{
padding:5px;
}
.footer a
{
font:20px  "Times New Roman", Times, serif;
color:#bcbcbc;
text-decoration: none;
}
</style>
</head>
<body>
<div class="site-blok">
  <div class="header">
  <h1>BlogGood.ru</h1>
     <div class="menu">
     <ul>
	 <li><a href="index.html">Главная</a></li>
	 <li><a href="index.html">О авторе</a></li>
	 <li><a href="index.html">Контакты</a></li>
     </ul>
	 </div>
  </div>

  <div class="blok-content">
     <div class="blok-left"><p>Текст</p>
	 <p>Всем привет!
В этой статье я расскажу, по какому принципу я верстаю сайты.
В конечном итоге вы получите готовые заготовки одноколоночных,
двухколоночных и трехколоночных макетов.
Если вы только учитесь верстать сайты, это статья для вас.
Если вы профи и знаете более подходящий способ, как правильно
создать макет-заготовку сайта, тогда тоже прочитайте эту статью
и оставьте ваши комментарии и рекомендации. </p>
	 </div>
	 <div class="blok-right">
	 <p>Новости</p>
	 	 <p>Придать оформление всплывающей подсказке можно с помощью CSS.
	 Мы разберем три варианта всплывающей подсказки на CSS.
     К сожалению, нет CSS-»рецепта» в отношении оформления title,
	 </p>
	 </div>
  </div>

  <div class="footer">
  <p><a href="index.html">BlogGood.ru ;) 2014</a></p>
  </div>  

</div>
</body>
</html>

Результат:

Мои личные шаблоны-заготовки для создания верстки блога/сайта

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

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

Двухколоночный макет:

Двухколоночный макет

<html>
<head>
<title>макет от BlogGood.ru</title>
<style>
*{
padding:0;
margin:0;
}
.site-blok
{
background:#6f0;
width:800px; /* ширина сайта*/
height:200px;
margin: 0 auto; /* выравниваем сайт по центру*/
padding-top:50px;
}
.menu
{
background:#ff0;
height:30px;
}
.blok-content
{
background:#cbcbcb;
height:540px;
overflow: hidden;
padding:10px 5px 15px 5px;
}
.blok-left
{
background:#050;
width:550px; /* ширина блока левого*/
height:540px;
float:left; /* прижатие блока */
}
.blok-right
{
background:#f50;
height:530px;
width:200px; /* ширина блока правого*/
float:right; /* прижатие блока */
}
.footer
{
background:#ff0;
padding:5px;
}
</style>
</head>
<body>
<div class="site-blok">
  <div class="header">
  <h1>BlogGood.ru</h1>
     <div class="menu">
    <-- меню -->
	 </div>
  </div>

  <div class="blok-content">
     <div class="blok-left"><p><-- Текст --></p></div>
	 <div class="blok-right">
	 <p><-- Новости --></p></div>
  </div>

  <div class="footer">
  <p><a href="index.html">BlogGood.ru ;) 2014</a></p>
  </div>  

</div>
</body>
</html>

Чтобы поменять местами блоки, достаточно поменять ширину (width) между блоками blok-right и blok-left

.blok-left
{
background:#050;
width:200px; /* ширина левого блока*/
height:540px;
float:left; /* прижатие блока */
}
.blok-right
{
background:#f50;
height:530px;
width:550px; /* ширина блока правого*/
float:right; /* прижатие блока */
}

Результат:

Двухколоночный макет

○ Трехколоночный макет:

Трехколоночный макет:

Вот готовый код:

<html>
<head>
<title>макет от BlogGood.ru</title>
<style>
*{
padding:0;
margin:0;
}
.site-blok
{
background:#6f0;
width:800px; /* ширина сайта*/
height:200px;
margin: 0 auto; /* выравниваем сайт по центру*/
padding-top:50px;
}
.menu
{
background:#ff0;
height:30px;
}
.blok-content
{
background:#cbcbcb;
height:540px;
overflow: hidden;
padding:10px 5px 15px 5px;
}
.blok-left
{
background:#050;
width:550px; /* ширина блока левого*/
height:540px;
float:left; /* прижатие блока */
}
.blok-right
{
background:#f50;
height:530px;
width:200px; /* ширина блока правого*/
float:right; /* прижатие блока */
}
.bl-left
{
background:#000;
width:300px; /* ширина левого блока */
height:530px;
float:left; /* прижатие блока */
}
.bl-right
{
background:#950;
height:530px;
width:200px; /* ширина блока правого*/
float:right; /* прижатие блока */
}
.footer
{
background:#ff0;
padding:5px;
}
</style>
</head>
<body>
<div class="site-blok">
  <div class="header">
  <h1>BlogGood.ru</h1>
     <div class="menu">
    <-- меню -->
	 </div>
  </div>

  <div class="blok-content">
     <div class="blok-left">
	 <div class="bl-left"><p><-- Текст --></p></div>
	 <div class="bl-right"><p><-- Текст --></p></div>
     </div>
	 <div class="blok-right">
	 <p><-- Новости --></p></div>
  </div>

  <div class="footer">
  <p><a href="index.html">BlogGood.ru ;) 2014</a></p>
  </div>  

</div>
</body>
</html>

Результат:

Мои личные шаблоны-заготовки для создания верстки блога/сайта

Чтобы поменять местами блоки, достаточно поменять параметры (float) между блоками blok-right и blok-left; а также параметры (float) между блоками bl-right и bl-left:

.blok-left
{
background:#050;
width:550px; /* ширина блока левого*/
height:540px;
float:right; /* прижатие блока */
}
.blok-right
{
background:#f50;
height:530px;
width:200px; /* ширина блока правого*/
float:left; /* прижатие блока */
}
.bl-left
{
background:#000;
width:300px; /* ширина блока левого */
height:530px;
float:right; /* прижатие блока */
}
.bl-right
{
background:#950;
height:530px;
width:200px; /* ширина блока правого*/
float:left; /* прижатие блока */
}

Результат:

 Трехколоночный макет

Чтобы блок посредине сделать больше, достаточно поменять параметры (float) между блоками bl-right и bl-left:

.bl-left
{
background:#000;
width:300px; /* ширина блока левого*/
height:530px;
float:left; /* прижатие блока */
}
.bl-right
{
background:#950;
height:530px;
width:200px; /* ширина блока правого*/
float:right; /* прижатие блока */
}

Вот так:

<html>
<head>
<title>макет от BlogGood.ru</title>
<style>
*{
padding:0;
margin:0;
}
.site-blok
{
background:#6f0;
width:800px; /* ширина сайта*/
height:200px;
margin: 0 auto; /* выравниваем сайт по центру*/
padding-top:50px;
}
.menu
{
background:#ff0;
height:30px;
}
.blok-content
{
background:#cbcbcb;
height:540px;
overflow: hidden;
padding:10px 5px 15px 5px;
}
.blok-left
{
background:#050;
width:550px; /* ширина блока левого*/
height:540px;
float:left; /* прижатие блока */
}
.blok-left
{
background:#050;
width:550px; /* ширина блока левого*/
height:540px;
float:right; /* прижатие блока */
}
.blok-right
{
background:#f50;
height:530px;
width:200px; /* ширина блока правого*/
float:left; /* прижатие блока */
}
.bl-left
{
background:#000;
width:300px; /* ширина блока левого*/
height:530px;
float:left; /* прижатие блока */
}
.bl-right
{
background:#950;
height:530px;
width:200px; /* ширина блока правого*/
float:right; /* прижатие блока */
}

.footer
{
background:#ff0;
padding:5px;
}
</style>
</head>
<body>
<div class="site-blok">
  <div class="header">
  <h1>BlogGood.ru</h1>
     <div class="menu">
    <-- меню -->
	 </div>
  </div>

  <div class="blok-content">
     <div class="blok-left">
	 <div class="bl-left"><p><-- Текст --></p></div>
	 <div class="bl-right"><p><-- Текст --></p></div>
     </div>
	 <div class="blok-right">
	 <p><-- Новости --></p></div>
  </div>

  <div class="footer">
  <p><a href="index.html">BlogGood.ru ;) 2014</a></p>
  </div>  

</div>
</body>
</html>

Результат:

Трехколоночный макет

или же заменить ширину (width)  у блоков  bl-left и bl-right:

.bl-left
{
background:#000;
width:150px; /* ширина блока левого*/
height:530px;
float:right; /* прижатие блока */
}
.bl-right
{
background:#950;
height:530px;
width:350px; /* ширина блока правого*/
float:left; /* прижатие блока */
}

Готовый код:

<html>
<head>
<title>макет от BlogGood.ru</title>
<style>
*{
padding:0;
margin:0;
}
.site-blok
{
background:#6f0;
width:800px; /* ширина сайта*/
height:200px;
margin: 0 auto; /* выравниваем сайт по центру*/
padding-top:50px;
}
.menu
{
background:#ff0;
height:30px;
}
.blok-content
{
background:#cbcbcb;
height:540px;
overflow: hidden;
padding:10px 5px 15px 5px;
}
.blok-left
{
background:#050;
width:550px; /* ширина блока левого*/
height:540px;
float:left; /* прижатие блока */
}
.blok-left
{
background:#050;
width:550px; /* ширина блока левого*/
height:540px;
float:right; /* прижатие блока */
}
.blok-right
{
background:#f50;
height:530px;
width:200px; /* ширина блока правого*/
float:left; /* прижатие блока */
}
.bl-left
{
background:#000;
width:150px; /* ширина блока левого*/
height:530px;
float:right; /* прижатие блока */
}
.bl-right
{
background:#950;
height:530px;
width:350px; /* ширина блока правого*/
float:left; /* прижатие блока */
}
.footer
{
background:#ff0;
padding:5px;
}
</style>
</head>
<body>
<div class="site-blok">
  <div class="header">
  <h1>BlogGood.ru</h1>
     <div class="menu">
    <-- меню -->
	 </div>
  </div>

  <div class="blok-content">
     <div class="blok-left">
	 <div class="bl-left"><p><-- Текст --></p></div>
	 <div class="bl-right"><p><-- Текст --></p></div>
     </div>
	 <div class="blok-right">
	 <p><-- Новости --></p></div>
  </div>

  <div class="footer">
  <p><a href="index.html">BlogGood.ru ;) 2014</a></p>
  </div>  

</div>
</body>
</html>

Результат:

Трехколоночный макет

Вот и все! Свой принцип верстки сайтов рассказал. Подходит ли вам такой способ, выбирайте сами.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

6 Ответов на комментарий - Мои личные шаблоны-заготовки для создания верстки блога/сайта

  1. Юра

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Юра, я думаю, здесь без php или javascript не обойтись.

    Ответить

    Иван Половников отвечает:

    Юрий, Вам просто необходимо сделать ваш шаблон адаптивным под все размеры мониторов(дисплеев). Для этого необходимо пользоваться медиа запросами и не придется использовать сторонние технологии кроме HTML CSS.
    Удачи! :arrow:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Или, фреймворком Bootstrap

    Ответить

  2. Тамара Полякова

    Привет Степан! Мне это пригодится, я знаю. Пока у меня есть свой шаблон сайта, но есть желание изучать и применять что-то новое. Всегда хотела знать как создавать свой шаблон. Буду и дальше у тебя учиться! Спасибо!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Тамара! Рад Вас видеть на своем блоге! Если будут вопросы пишите, помогу! :smile:

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки:

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 703
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3816