Верстка сайта


Урок 5.1 Сброс стилей: reset.css

Сегодня давайте разберемся с таким часто встречающимся термином сброс стилей для сайта. Думаю, Вы часто встречали такой файл как reset.css, либо в css что то подобное * {margin:0; padding:0; } (вспомните Урок 5. Блочная верстка сайта: css файл. ) Если Вы хотите заниматься версткой сайта, то думаю надо также разобраться что это и с чем его едят. А если не хотите заниматься версткой , то для понимая что к чему также будет полезно. ;)

Давайте для начала рассмотрим пример без использования сброса стилей и со сбросом каскадный таблиц стилей. Увидели разницу?

Да, браузер для каждого html тега имеет стиль по умолчанию и что еще радостнее так они еще могут отличаться. Это с одной стороны плохо, потому как мы все знаем, что браузеры, как маленькие дети – за ними не уследишь, каждый имеет свои характер стили. Поэтому сбрасывая стиль, мы начинаем с чистого листа. Единственным минусом, наверное, дополнительный файл/строки в css файле, а значит увеличение размера.

Для того, чтобы начать работу с чистого листа, необходимо «обнулить» все стили по умолчанию, так? Ок, если Вы вспомните урок 5 по верстке сайтов, то вспомните как мы это делали, с помощью универсального кода:

* {
margin:0;
padding:0;
}

Есть? Отлично, теперь Вы понимаете для чего эта строчка там.

Давайте взглянем на нашу демо страницу с универсальным сбросом стилей сайта.

Заметили отличия? Совершенно верно мы сбросили только отступы, у таблиц осталась рамка, у заголовков стили font, а если углубляться то много еще чего. Но на первой демке был полный сброс, давайте теперь посмотрим как его сделать.

Reset.css

Плавно мы пришли к файлу reset.css. Самым популярным сбросом стилей для сайта (тот самый, что мы видели в примере) и одновременно наиболее полным является т. н. reset файл от Эрика Мейера. В статье CSS Tools: Reset CSS можете почитать о его достижении при создании данного кода:

/*
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

Обычно данные стили выделяют в отдельный файл — reset.css. Зачем спросите Вы, для того чтобы по 100 раз не прописывать его на всех сайта, можно просто добавлять на разных проектах ссылку на данный файл:

<link href="http://site.kz/css/reset.css" rel="stylesheet" type="text/css" />

Согласитесь удобно. Но если у вас один блог/сайт, добавляйте в общий файл (style.css, template.css и т. д.), ничего страшного.

Еще одно общее условие для всех сбросов стилей — размещение в самом начале в стилях. Тут очевидная ситуация: для начала необходимо обнулить все стиле, а затем уже задавать тегам свои стили.

Css файл сканируется сверху вниз! Поэтому из 2-х одинаковых классов при равных условиях приоритетным будет тот, что находится ниже.

Мой файл reset.css

Смотря на файл от Эрика Мейера, Вам может в голову прийти такая мысль. У меня на сайт не используется и половина таких тегов, можно ли их не использовать? Сам Э. Майер говорит о том, что каждый может и должен его изменять под себя. Так что обязательно меняйте, модернизируйте экспериментируйте и пользуйтесь. ;)

Если Вы не используете html 5, удалите данный блок /* HTML5 display-role reset for older browsers */ …. { display:block; }

Yahoo reset.css

Из вышеизложенного понятно, что каждый может изменять и использовать свой reset файл, например, имени самого себя :)

Вот поэтому и у Yahoo есть свое видение на данную тему.

Можно взглянуть на наш пример в стиле Yahoo и увидеть отличия, сравнить и возможно Вам понравится данный сброс стилей.

Подключиться к стилям Яхуу можно добавив данную строку:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

Можно сохранить себе на хостинг.

Конечно, существуют и другие reset файлы, но напомню. Что самым часто используемым среди html верстальщиков является сброс стилей от Э. Майера, обычно, конечно, измененный. ;) Для первых шагов, думаю, будет достаточно простого его использования, либо есть всегда универсальный метод.

Теперь в комментариях прошу поделиться своим опытом по использованию сброса стилей, каким Вы пользуетесь?

Надеюсь данная статья была вам полезна. Подписывайтесь на обновления Уроков по блочной верстке сайтов.

с/у УтБ

Постовой: coding4.net – разработка игр на XNA и Silverlight

На десерт сегодня трейлер к фильму “Социальная сеть 2″, что то мне кажется, что это очередное псевдопродолжение, а как Вы думаете?

Урок 6. Кодировка файлов: настройка Notepad++, PhpDesigner, PSpad, Rapid PHP

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

Что же такое юникод, utf-8, преимущества и минусы можно почитать на Wikipedia, так и на других сайтах, например, мне понравилась статья Дмитрия, в ней интересно описано откуда и почему появились кодировки ASCII, юникод и UTF 8, расширенная ASCII (Windows 1251, CP866, KOI8-R).

Давайте, перейдем к нашей теме и начнем разбираться с проблемами во время нашей верстки сайта.

Основной проблемой неправильной кодировки это отображение текста как кроказябли, непонятные символы и т.д.  Так же в кодировке window-1251 отсутствуют специальные символы (что-то типа копирайтов §, ©, ‰) и другие пинтограммы (♥, ☺).

Все это от того, что в cp1251, например, всего 256 символов (что в принципе достаточно для кирилицы), а в Unicode более 100 000 символов. Поэтому я советую создавать html каркас (как html верстальщик) и вообще сайты с кодировкой utf-8. Вы скажите мне достаточно window-1251, так как я использую кириллицу. Полностью согласен с Вами, но если Вы захотите использовать специальные символы, или сделать мультиязычный сайт? Ну, а в связи с тем, что я верстаю для Казахстана, то кодировки cp1251 изначально не подходит, так как обычно используется казахский, русский и английский языки. Лучше запостись символами ;) .

Как сохранить файл в кодировке utf-8 без BOM? (utf-8 without BOM)
Именно так и надо сохранять без BOM (Byte Order Mark или— сигнатура – три символа, которые все портят).
Не все программы способны сохранять файлы в кодировке utf-8 без BOM. Яркий пример – Блокнот от Windows.

Программа Notepad++

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

Откройте файл и выберите преобразовать в utf-8 без BOM.
кодировка utf-8 в программе notepad++

Если нажмете кодировать в utf-8 без BOM, то произойдет следующее.

кодировка utf-8 в программе notepad++

Если сомневаетесь и, чтобы не рисковать всегда делайте backup – резервное копирование!

Программа PhpDesigner

PhpDesigner – удобный редактор. Программа платная.

Немного сложней будет. Для начала проведем настройки для браузеров:

1.    Откройте выпадающее меню: Создать новый файл -> Изменить шаблон (Edit template) либо Файл -> Новый… -> Edit templates

phpDesigner 7 кодировка utf-8 изменить шаблон html
2.    Выберите Html и вставьте туда следующий код и поставьте галочку на «Использовать данный шаблон для HTML/XHTML»  (Use this template for HTML/XHTML):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Документ Без Имени</title>
</head>
<body>
</body>
</html>

phpDesigner 7 кодировка utf-8

Установка кодировки:
– Пройдите: Инструменты -> Установки (или вызовите через CTRL + E) и выставите соответствующую кодировку.

phpDesigner 7 решение проблемы с кодировкой utf-8
Для преобразования отдельного файла используйте:
Файл -> Кодировка файла -> utf-8

phpDesigner 7 как установить кодировка utf-8
Текущую кодировку можно увидеть в нижней части программы слева.

phpDesigner 7 изменить кодировку в шаблоне файла
Можно, конечно, пойти другим путем. Создать файл, после открыть файл в Notepad++ и сделать соответствующие настройки.

Программа PSpad

Pspad - еще один неплохой текстовый редактор. Кстати, полностью бесплатный. Функций больше чем у Notepad++.
Поменять кодировку текущего файла в Pspad очень просто: Вкладка Формат -> Выбрать необходимую кодировку (например, utf-8)
Pspad проблема с кодировкой

Кодировка для браузеров по умолчанию:
Создать новый файл (Ctrl + N) -> Из шаблона -> Html ->  Html 4.01 Transitional -> Правка…

Pspad как поменять кодировку на utf-8

В charset впишите необходимую кодировку, например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="cs">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="generator" content="PSPad editor, www.pspad.com">
 <title>Untitled</title>
 </head>
 <body>

</body>
 </html>

Сохраните и закройте шаблон.
Теперь, создавая новый файл из шаблона все будет готово.

Программа Rapid PHP (2010)

Rapid PHP – платный текстовый редактор.
Для настройки кодировки сделайте следующее:

Опции -> Настройки… -> Файл -> utf-8 без BOM (либо другая кодировка)

Rapi PHP настройки кодировки html файла utf-8

По умолчанию файл html создается без meta данных. Вставить кодировку (charset) для браузеров можно так:
Вставка -> Кодировка -> Unicode (utf-8) (либо другая необходимая)

Rapi PHP настройки кодировки html файла

Кодировка с помощью  .htaccess

С помощью файла .htaccess можно заставить браузер отобразить нужную кодировку. Не советую пользоваться данным методом на работающих сайтах (я обычно использую только для html на локалке, ), но все же метод работающий. Добавьте в файл:

AddDefaultCharset utf-8

Внимание! Ваш хостинг может не поддерживать данные настройки.

Сообщение кодировки для браузеров

Как браузеры понимают, в какой кодировке Вы писали свой файл? Для этого и существует строка (мета данные):

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Т.е. браузер по умолчанию «читает» страницу в кодировке utf-8. Это Вы в принципе, должны знать еще из школьной программы.

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

Надеюсь информация была полезной. Спасибо за Ваши like и ретвиты.

с/у УтБ

Постовой: Если Ваш интернет магазин не приносит доходы, то пора сделать полный  анализ интернет магазина. Хватит терять потенциальных клиентов!

На десерт сегодня вирусное видео про Светлакова. Но все же мне понравилось, обязательно надо сходить на его фильм :)

Css верстка: вопрос – ответ

Приветствую пользователей своего блога, любителей создавать, оптимизировать и продвигать свои сайты, порталы, форумы и т. д. :)
Сегодня я отвечу на несколько постоянно задаваемых вопросов по верстке связанные в основном с каскадными таблицами, т. е. с css. А также небольшой опрос в конце поста.

Вопрос №1. Как центрировать сайт?

Если бы внимательно читали мои уроки по верстке, (продолжение обязательно будет) то вопрос сам бы собой отпал.

И так, создавай сайт мы создаем некий каркас. Обычно его называют #wrapper , #wrap и т. д. Блок идет обычно после тега body (тут все зависит от сложности сайта). В css файл прописываем ширину и внешние отступы:

#wrapper {
 width:1024px;
 margin:0px auto;
 }

Все ок. Ваш сайт будет центрирован.

Вопрос №2. Как зафиксировать фоновую картинку ?

Тут все проще чем кажется. Надо вначале определить блок, в который мы поместим наше изображение. Например, #main, а можно и в сам тег body. Css код выглядеть будет так:

 body {
 background: url(images/vasha_kartinkaa.jpg) fixed 0 0 no-repeat;
 }

Теперь фон будет стоять на месте, а контент прокручиваться.

Вопрос №3. Как уменьшить css файл?

Вопрос очень интересен. Что может сделать html верстальщик в таком случае? Писать проще и короче. Ведь чем меньше кода тем легче файл.
Можете посмотреть презентацию моих советов по html и css. Заменяйте и объединяйте селекторы, вместо:

.users {
 margin-top:5px;
 margin-bottom:10px;
 margin-right:0px;
 margin-left:0px;
 }

Лучше сделать так:

.users { margin:5px 0px 10px; }

Намного приятней удобней и короче, не так ли? Запомнить очень легко: сверху справа снизу слева, т. е. по часовой стрелке. Для свойства padding аналогично.

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

Все остальные вопросы можете также задавать в комментариях, либо отписаться мне. Не забываем кому я предоставляю бесплатные консультации. ;)

Как я ранее говорил Вам необходимо получше изучать css и html и никаких сложностей не возникнет ;)
Теперь маленький опрос:

Нужно ли Вам изучение практическое изучение css на моем блоге?

View Results

Загрузка ... Загрузка ...

с/у  УтБ

Постовой: Всем кто изучает Seo, облегчите себе жизнь, установите SEO плагин для FireFox

На десерт сегодня танцы первоклассника, не знаю как Вам, но я смеялся до слез :)

Шпаргалка верстальщика часть 1 или 11 полезных ресурсов для верстки сайта

Приветствую пользователей блога gtalk.kz. Открываю новую серию статей-шпаргалок для эффективной верстки сайтов. Данные статьи можно смело добавлять в закладки, т. к. полезной информации будет оочень много (по крайней мере я надеюсь :) ). А также не забывайте поделиться с друзьями.

Сегодня я расскажу об 11 полезных сервисах, цель которых облегчить жизнь верстальщика. Думаю, Вам они понравятся, а в конце поста найдете ссылку на 38 (!) способов, как сделать закругление углов и еще пару ссылок на интересные статьи по теме.

Как всегда, сразу возьмем быка за рога и начнем :)

генератор-html-+-css-шаблона

  1. Csstemplater.com – сервис «Генератор html + css шаблонов» от Dimox’a и molodoy по праву должен быть упомянут первым в списке, так как полезность его огромна. Данный ресурс позволяет сделать заготовку будущего шаблона, выбрав определенные опции — вуаля html + css готово и при чем в дивах. Внимание! Особо полезен ленивым :) Не советую пользоваться часто новичкам, привыкнуть очень легко. Настроек немного (doctype, сайдбары, высота header’a и footer’a, resert на выбор и т. д.), но их вполне хватает на заготовку шаблона/каркаса.песочница-html-+-css
  2. Cssdesk.com – песочница для html + css. Пишите html разметку и css и смотрите как это будет выглядеть. Очень удобно, можно потренироваться с написанием кода для начинающих.
    генератор-кросс-браузерных-правил-CSS3
  3. Генератор кросс-браузерных правил/стилей CSS 3  — используйте новые возможности Css 3, а данный ресурс Вам в этом поможет.
    Прокрутите вниз до класса matrix и можете настроить повороты под себя.генератор-кросс-браузерных-правил-CSS3-для-верстки-сайтов 
  4. Еще один генератор кросс-браузерных стилей Css 3, просто выбирайте необходимые настройки и смотрите пример. Можно делать в стиле 3D.генератор-css-3
  5. Ну, чтоб уже окончательно было понятно со стиля css 3 попробуйте поюзать сайт css3generator.com. Выберите стиль из выпадающего списка и пропишите параметры, скопируйте получившийся css код и радуйтесь ;)

  6. Ищете красивые кнопки для сайта? Зачем? Для этого существуют много сервисов. Например, cssbuttongenerator.com – самоназвание говорит за себя — Генератор css кнопок. Выбирайте настройки кнопки, ее будущий внешний вид и скачайте весь необходимый стиль.
  7. А Вы знаете, как посчитать, сколько пикселей в em? А в пунктах? Не знаете?)) А верстальщику надо бы знать. Спасибо, pxtoem.gamecoll.com, который с легкостью посчитает, сколько пикселей в Ems, пунктах и т. д. Хороший конвертор.
  8. Градиент, до эпохи ccs 3 верстальщикам снилось их простое использование :). Теперь это в прошлом, ведь благодаря такому ресурсу как www.colorzilla.com/gradient-editor можно с помощью css залить градиентом определенную область, а с хорошим знанием css можно и кнопку красивую написать ;). Интересно, что генерируется код не только в формате css, но и в SCSS.css-3-градиент-для-сайта
  9. Валидность сайта важная составляющая верстки. В курсе блочная верстка с нуля, я упоминал о важности соответствия стандартам кода. Поэтому сейчас просто даю ссылки на проверку html разметки validator.w3.org/  и проверка валидности css jigsaw.w3.org/css-validatorшрифтотренажер-ресур-для-верстальщика

  10. http://ft.vremenno.net/ – шрифтотренажер. Смотрим, как будет выглядеть тот или иной шрифт на вашем сайте, подбирайте шрифт удобный для глаз. ;) Используются стандартные шрифты.
  11. Мнемоника в html — также необходима при блочной верстки сайта, например, использование знака охраны авторского права и т. д. Подробнее можно почитать и взглянуть на википедии.

Не буду Вас томить по одному сервису. Если Вам интересно, Вы можете прочитать еще о дополнительных ресурсах (полезных не только для верстки) на хабрхабр
Корректное отображение стилей css 3 для IE – css3pie.com

Бонус: А также обещанный бонус 38 способов закругления углов, очень неплохая подборка. Не изобретайте велосипед, учитесь виртуозно кататься на нем ;)

с/у УтБ

Урок 5. Блочная верстка сайта: css файл.

Вот и подходим к финалу наших уроков по блочной верстке сайтов. Сегодня 11.11.11 г., время публикации статьи 11:11, думаю это счастливый знак для закрытия основных, базовых уроков по верстке :) . Мы прошли небольшой курс, и осталось совсем немного. Сегодня мы напишем css файл для сайта, подключим его и будем радоваться полученному результату ;). Читать дальше

Урок 4. Блочная верстка: html разметка.

Отлично, мы уже с Вами знаем что такое блочная верстка, как пользоваться фотошопом во время верстки, создали базовые элементы для дальнейшей верстки. Теперь же давайте перейдем непосредственно к html разметки нашей веб-страницы. Откройте файл, созданный нами во 2 уроке, а также Psd шаблон сайта в фотошопе и нажмите TAB. Отлично, поехали ;) Читать дальше

Урок 3. Верстка сайта: быстро вырезаем картинки в фотошопе.

Продолжаем наши уроки по верстки сайта с нуля. Рекомендую прочитать первые два урока: знакомство с версткой и тем, кто такой верстальщик и что такое блочная верстка, знакомство с сайтом.

В сегодняшнем уроке мы вырежим из psd шаблона необходимые материалы для работы. Т.е. сегодня достаточно большой объем работы, так что не забудьте взять чашку чая ;)

Читать дальше

Урок 2. Блочная верстка сайта

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

Ну-с, не будем тянуть резину. Начнем, не забудьте взять чашку кофе и печенек ;-) Читать дальше

Верстка сайта. Урок 1

Вот я снова с Вами. Немного затянул с последними выходами статей. Ну, да ладно, хватит отступлений, давайте ближе к теме.

По текущей работе мне приходится сталкиваться с версткой сайтов, в принципе сейчас я этим и занимаюсь. Поэтому Вас ожидает небольшая «Санта-Барбара» :) на тему верстка сайта, CSS и html, кроссбраузерности и многое другое не менее интересное.

Если Вас заинтересовали эти слова, милости просим. Данная статья первая из серии, поэтому начнем с общего. Все это время мы с Вами будем начинающими верстальщиками ;)

При создании сайтов в идеале участвуют 3 человека. Веб-дизайнер — рисует сайт, человек с фантазией и со знанием фотошопа и т. д. Мне не дано стать дизайнером это точно.

Верстальщик следующий человек с меньшим багажом знаний фотошопа и фантазии. Отлично знает html, css, javascript и т. д.

Веб-разработчик/Веб-программист — человек с отсутствием фантазии и фотошопа))

Вот моя таблица — участника создания полноценного сайта

Веб-дизайнер

Верстальщик

Веб-программист

Знает фотошоп

+

+

-

Есть фантазия

+

±

-

Знает языки разметки

-

+

+

Знает языки программирования

-

±

+

Как мы видим из моей придуманной таблицы верстальщик универсальный человек.

Теперь давайте о необходимых знаниях, софте и т. д.

Минимум знаний для начинающего верстальщика:

  • основы html и css – так как мы только начинаем, то базового уровня должно Вам хватить. (Мы будем рассматривать язык разметки HTML!)

  • Базовое знакомство с фотошопом/photoshop’oм — так как придется смотреть на задумки веб-дизайнера и воплощать в коде.

  • Желание и упорство — главное все делать с душой. Под плеткой никто не чему не научится.

Мой софт верстальщика

Еще один важный момент верстальщика — его софт/программы.

  • Фотошоп/photoshop — отличный графический редактор, используемый веб-дизайнером, поэтому и верстальщик должен иметь данную программу для просмотра и использования частей сайта. Программа платная.

    Для отличного процесса формирования веб-страниц нам необходим редактор, где мы будем писать разметку и css файлы. Здесь выбор велик, и обычно каждый выбирает, то что ему по душе, подойдет и самый простой Блокнот (но не вздумайте его использовать!)

  • Notepad++  по-моему лучшая альтернатива Notepad – Блокноту. Для начинающих особо рекомендую: помогает набить руки для набора и для быстрого набора. Программа бесплатна. Я проводил сравнения Notepad и  Sublime text, сейчас пользуюсь последним.

    Notepad++

  • phpDesigner (любая другая IDE, например, webStorm) – платная программа для программирования, отлично подойдет для верстки сайтов. Основные плюсы- это удобность использования, много настроек и функций, а также подсветка кода: ошибок, выделение текущего фрагмента и т. д. Программа платная.phpdesigner программа верстки сайта

  • Еще сотни других программ о которых в принципе говорит не стоит, так как каждый выбирает для себя. Посмотрите в гугл по фразе «Текстовый редактор», «html/css/php редакторы» и т. д.

  • А также оочень важный момент — актуальные браузеры. По этой теме будет отдельная статья плюс расскажу о софте для браузеров.

Ну и на последок, хорошие ресурсы по данной теме.

Htmlbook.ru – наверное самый/один из самых полезных ресурсов по html и css. Если Вы начинаете, то однозначно необходимо начинать с этого ресурса.

validator.w3.org сервис проверки Валидности html кода.

jigsaw.w3.org/css-validator css валидатор.

Что и где читать будет в отдельном посте.

И в принципе, никто google и yandex не отменял ;)

с/у  УтБ

На десерт видео – примерно так я устаю от верстки:)