В этой статье я расскажу, как я верстаю сайты. В конечном итоге, кроме знаний, у вас появятся еще готовые макеты-шаблоны для верстки сайтов. Считаю, что выгодным преимуществом этих шаблонов является их простота и легкость использования. Итак, по какому принципу я верстаю сайт или блог?
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>
Результат:
Вот и все! Свой принцип верстки сайтов рассказал. Подходит ли вам такой способ, выбирайте сами.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Готовые макеты блоков для веб-страниц на HTML и CSS
Влияние цвета и его значение
Размеры форматов листов А0 – А7Похожие статьи
Как сделать адаптивный рекламный блок AdSense
Эффект плавного подчеркивания ссылки с помощью CSS3
CSS стили для горизонтальных линий «HR»
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330348 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222536 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187748 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
10 Ответов на комментарий - Мои личные шаблоны-заготовки для создания верстки блога/сайта
Добавить комментарий
Метки: css
а можно ли сделать верстку так, чтобы для пользователей ПК открывался один шаблон, а для пользователей на смартфоне или планшете – другой шаблон
Привет Степан! Мне это пригодится, я знаю. Пока у меня есть свой шаблон сайта, но есть желание изучать и применять что-то новое. Всегда хотела знать как создавать свой шаблон. Буду и дальше у тебя учиться! Спасибо!
Здравствуйте, Тамара! Рад Вас видеть на своем блоге! Если будут вопросы пишите, помогу!
Юра, я думаю, здесь без php или javascript не обойтись.
Юрий, Вам просто необходимо сделать ваш шаблон адаптивным под все размеры мониторов(дисплеев). Для этого необходимо пользоваться медиа запросами и не придется использовать сторонние технологии кроме HTML CSS.
Удачи!
Или, фреймворком Bootstrap
Добрый день. А как шаблон сделать адаптивным?
Здравствуйте, Олег!
Для адаптивности сайта, используйте bootstrap.
Если у Вас сайт на WordPress и шаблон не адаптивный, тогда воспользуйтесь плагином MobilePress.
Да все доступно и хорошо, но как из простенького сайта сделать простенькую тему для WP?
Читайте документацию там все написано.