Основы верстки html-писем для веб-разработчиков

5. Таск-менеджер | Сборщик проектов | Менеджер задач | Ваш личный раб

Вот она рыба мечты. Вот кто настоящий волшебник. Этот комплекс программ для верстки сайтов, реально закроет множество задач верстки сайта и разработки проекта в целом. Gulp, Webpack, — это сборщик проекта для продакшена, здесь минифицируются и объединяются файлы, — HTML, CSS, Javascript. Оптимизируются и ужимаются изображения, так же можно jpeg, jpg, png, переделать в современный формат изображений, — WebP, что даст хороший прирост по скорости заргрузки страниц.Здесь тоже есть большие боссы:

• Grunt
• Gulp
• WebPack

Сам использую Gulp. Grunt немного по медленнее, и на тот момент когда я начинал изучать Таск-менеджеры, был на пике Gulp.Ну и WebPack тоже сильный инструмент, но моё мнение что он больше подходит для SPA проектов, или можно сказать сборщик javascript файлов с поддержкой современных версий ECMAScript.

Gulp который я настроил, закрывает задачи на моих проектах

• Расставляет префиксы CSS для всех браузеров
• Минимизирует CSS удаляя пробелы, и переносы
• Создает файлы .map указывая номер строк браузеру для того что бы дебажить изначальный код
• Группирует медиа запросы(что бы не повторялись для разных элементов DOM в одной ширине)
• Преобразует препроцессорный код в обычный CSS
• Минимизирует изображения
• Уродует и минимизирует код JavaScript
• Объединяет все файлы CSS в один(уменьшая количество обращений к серверу)
• Минимизирует файлы HTML
• Отслеживает изменения в редактируемых файлах и самостоятельно обновляет браузер во время верстки
• Конфигурирует файл Smart-Grid

Так же дома на всех устройствах в одной сети я могу посмотреть в реальном времени как выглядит то что я верстаю.Моя сборка Gulp и WebPack

6. БЭМ

Методология БЭМ от Яндекс, поможет Вам не задерживаться на том как назвать класс к данному элементу DOM. Общий принцип данной технологии, — это компонентный подход ко всему проекту, с возможностью пере использовать компоненты не только в одном  проекте, но и использовать их в однотипных задачах других проектов. Основная идея состоит в том что, любой проект разбивается на блоки которые содержат элементы, и в случае если состояние элемента меняется, то у данного элемента добавляется модификатор. Ознакомится и взять на вооружение можно на данном ресурсе, — ru.bem.info

7. Онлайн программы, для верстки и работы с .psd макетами сайтов.

И еще когда нет под рукой Photoshop или просто хочется что-то новенького, можно использовать для препарирования .PSD макета, — онлайн программы типа:

• avocode.com
• assets2.adobe.com

8. Ещё некоторые условия для скорости вёрстки

Так же для того что бы разработчик работал быстрее, а от скорости зависит чуть ли не весь бизнес, могу выделить ещё несколько пунктов, которые могут изначально показаться не значительными, но на самом деле это не так(поверьте мне, я уже работаю 13 месяцев).

1. Документация проекта, если строк кода больше чем 1000, то документация это обязательное условие для увеличение скорости разработки. Потому как, после того как сегодня Разработчик реализовал какую-то часть проекта. Вернувшись к нему через 2 месяца, ему придётся разбираться заново, как тут всё работает. С документацией, понимание приходит за 10 минут, без неё может прийти через 8 часов.
2. «Многофайловость», название файлов и директорий. Не бойтесь создать лишний файл стилей при условии что в нём будет хотя-бы больше 30 строк кода. Гораздо быстрее верстальщик ориентируется по названию файла нежели поиск по одному файлу. Ну а про названия файлов и директорий главное стараться называть максимально точно и кратко.
3. ООП и наработки. Старайтесь писать код в ООП, гораздо легче и быстрее подключить готовый класс, чем каждый раз писать заново. Для наработок можно создать к примеру репозиторий на github.
4. Однотипность задач. Одна и та же типичность задач, помогает разработчику углубляться в языки программирования, в технологии связанные с разработкой. Вот тут Вам и становление мидлов и сеньоров. Здесь и будет рост как профессионала в своём ремесле. Здесь и есть увеличение скорости вёрстки сайтов.

9. Как ускорить загрузку страниц

Одним очень важных факторов, хорошей вёрстки, — это скорость загрузки страницы.Для того что бы понять что нужно сделать что бы страницы загружалась мгновенно, есть очень хороший инструмент от Google, PageSpeed Insights.   Или же можно открыть локальный инструмент Lighthouse, в консоли браузера Google Chrome. Здесь Вам будет доступен большой список того что можно оптимизировать на Вашей странице, просто берём каждый из пунктов замечаний по Вашей вёрстке, и исправляем.

Итого:

Не забываем валидировать свой код на validator.w3.org . Советую прислушаться к сторожиле Российского HTML & CSS, Вадиму Макееву, этот человек по настоящему силён в вёрстке. (его канал на ютуб)

Верстальщик

Вёрсткой веб-страниц занимаются верстальщики. В общем случае в задачу верстальщика входят:

• создание кода веб-страницы с помощью соответствующего языка разметки. Таковыми могут быть, например, HTML, XHTML, XML.
• оформление ранее созданного кода страницы с помощью встроенных средств языка разметки, либо же с помощью каскадных таблиц стилей CSS

Инструменты верстальщика

Верстальщик использует следующее ПО:

• текстовый редактор или редактор HTML для написания и редактирования кода
• графическая программа для так называемой «нарезки» графического макета, полученного верстальщиком от веб-дизайнера

А также иногда прибегает к помощи:

• WYSIWYG редакторов, в которых пользователь располагает все элементы, которые должны были быть получены с помощью HTML, используя графический интерфейс пользователя. После чего программа преобразует визуальное представление в HTML код. В данном случае автору не обязательно обладать исчерпывающим знанием HTML.
• программы автоматической верстки сайтов, которые извлекают слои с изображениями и текстом из дизайн-макета, созданного в графическом редакторе Adobe Photoshop или ему подобном и формируют из этих слоёв HTML код. Таким образом создается базовый каркас веб страницы, готовый к последующей доработке.

Использование WYSIWYG редакторов и программ автоматической верстки часто осуждается из-за низкого качества получаемого кода. Тем не менее, зачастую для пользователей их использование удобнее ручного кодирования, а также не требуют глубокого знания HTML, и поэтому широко используются.

Модульность и виды подходов к вёрстке

Типовые веб-макеты
Одноколоночный	Двухколоночный	Трёхколоночный

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

Модульная сетка структурно разбивает материал на отдельные блоки, для упрощения добавления новых элементов на страницу. Некоторые верстальщики могут уйти от правил верстки, ради определённого проекта, но необходимость простого добавления вновь появляющихся элементов на странице обострит необходимость возврата к этим правилам.

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

Семантическая вёрстка страницы

Основными инструментами для вёрстки являются фреймы, таблицы и div. В стандарте HTML5 фреймы больше не поддерживаются, а для работы стали доступны «семантические» блоки: header, main, nav, section, article, aside, footer. Однако блоки не дают определённых преимуществ, а являются лишь «синтаксическим сахаром».

Табличный подход

Таблицы являются удобным инструментом для выравнивания блоков. В html таблица делится на строки, которые в свою очередь делятся на ячейки, таким образом можно создавать неограниченное количество строк с неограниченным числом ячеек в каждой. Ячейки таблицы имеют особые настройки выравнивания, которые не встречаются более в других элементах. Это значит, что некоторые элементы дизайна крайне сложно сверстать без использования таблиц.

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

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

На момент 2011 года табличная верстка считается устаревшей.

Вёрстка слоями

Слой (от имени тега <layer>) — разработка компании Netscape, использованная в браузере Netscape Navigator. Тег позволял показывать или скрывать его содержимое, устанавливать положение относительно окна браузера, накладывать слои друг на друга и включать содержимое блока из файла. В спецификацию HTML не был включён.

Блочная вёрстка

Блочная вёрстка — верстка с помощью тега <div> и описывающего их множество таблицы стилей (CSS). Тег появился вследствие сознательного отказа консорциума «CSS Positioning (CSS-P)» от тега <layer>, чтобы создать аналогичный тег, но с поддержкой CSS в духе остальных тегов. С помощью блочной верстки реализуют концепцию семантической вёрстки.

Вёрстка фреймами

Основная статья: Фрейм (HTML)

Вёрстка фреймами — верстка с помощью одноимённого тега <frame>, который имеет иной способ позиционирования, а внутри себя включает отдельные html-страницы.

Фреймы просты в применении, поскольку необходимо заботиться только об отображении и перерисовке части окна браузера — одного фрейма, — остальные части находятся в другом фрейме и не перерисовываются без взаимодействия с ними. Также возможно открытие ссылки в другом фрейме, что удобно при использовании главного меню в отдельном фрейме. Страницы поделённые на фреймы имеют меньше кода, вследствие отсутствия повторяемых частей, которые не перезагружаются. Они размещаются точно в нужном месте окна браузера.

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

Сразу отвечу на самые ожидаемые и каверзные вопросы по верстке:

1. Adobe Muse и подобные инструменты? — да, можно использовать и это будет быстро. Если только ваш проект не крупнее односложного одностраничника, который не нуждается в развитии, продвижении и системе управления.

2. Как быть с Perfect Pixel? — я искренне уверен, что Responsive Design и Perfect Pixel понятия разные и даже не совместимые. Я, как веб-дизайнер, конечно, обладаю некоторыми чертами перфекциониста, но если идея хороша, она будет блистать и в Responsive верстке, если идея, простите за выражение, говно, то хоть сколько ее не полируй и подгоняй по пикселам, она так и останется неработающим высером. Поэтому включите ваш дар убеждения, запаситесь аргументами и проведите беседу с вашим клиентом относительно бесполезности такого излишнего перфекционизма.

3. Почему бы все картинки не сделать спрайтами, ведь тогда будет всего один запрос к серверу? — есть изображения, которые должны загружаться контент-менеджером. Вряд ли контент-менеджер сможет быстро и безболезненно вычислить координаты новой добавленной в спрайт картинки. Не забывате о тех, кто будет обслуживать и наполнять сайт.

4. Где кончается грань верстки и начинается Front-End, это разве не одно и то же? — все просто, если стоит задача разработать сложный интерактивный интерфейс какого-либо сервиса или веб-приложения, где нужна тесная работа с базой данных — это Front-End. Такие уникальные проекты выходят за рамки области компетенции и бюджета одного фрилансера, чаще всего подобные задачи ставятся команде разработчиков и подходы к таким проектам совершенно другие.

Другие уроки по теме «HTML и CSS»

• Создание крутого Swiper-слайдера от А до Я. Джедай вёрстки #8. Материалы курса
• Адаптивная вёрстка галереи без JS. HTML + CSS target. Работа с изображениями (Retina img)
• Адаптивная HTML вёрстка вертикального таймлайна
• Bootstrap 4. Сетка. Подробное руководство
• CSS Grid: адаптивная верстка реального макета
• CSS Grid: Новый взгляд на адаптивную верстку сайтов. Руководство

Необходимые навыки и качества

Код HTML

Чтобы стать верстальщиком, вам потребуются следующие знания и навыки

• язык разметки. HTML, HTML5, дополнительно желательно знать HTML-фреймворки: Twitter <a href=»/bootstrap/»>Bootstrap или Semantic UI;

• CSS (каскадную таблицу стилей). При помощи нее задается стилистика страниц;

• основы JavaScript, jQuery. При помощи них задается динамика;

• основы PHP;

• принципы работы визуальных редакторов;

• инструменты проверки правильности, валидности кода.

Часто в вакансиях на должность верстальщика «светятся» требования, которые нельзя относить к этой должности. Пример: доскональное знание JavaScript. Верстальщик должен знать, как это работает, но максимум его компетенции распространяется на знание типовых решений, которые позволят решить простые задачи, заложенные в макете. Тогда как Frontend-разработчик должен глубоко знать JavaScript, включая фреймворки, а также ему присущи навыки, которые позволяют расширять их возможности.

Завышенные требования к верстальщикам обусловлены тем, что работодатель хочет получить максимум за минимальные деньги. Поэтому он ищет именно верстальщика, который будет выполнять работу Frontend-а разработчика.

Этапы вёрстки

Почему прямоугольники?

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

Как правило верстальщик получает от дизайнера утверждённый дизайн-макет страницы. Далее, верстальщик анализирует полученный макет. Разбивает его на горизонтальные линии (полосы) — «этажи». Далее, каждый «этаж» анализируется отдельно и разбивается на прямоугольные блоки — колонки.

Далее происходит рекурсивный процесс вёрстки этих отдельных строк, а в них столбцов.

После вёрстки страница проверяется на кросс-платформенность. В общем случае можно отвечать на следующие вопросы:

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

Критические исправления вносятся в документ, и проверка повторяется с самого начала.

Верстка создаётся для шаблонов

Для сайта, как правило, не используются сверстанные документы. Документ после верстки разрезается на повторяющиеся кусочки и используется по всему сайту

Например, верхняя полоса с логотипом и нижняя с важной информацией. Такие кусочки верстки называются шаблонами (от англ. template).

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

<!DOCTYPE html>
<html>
<head>
    <title>Блочная вёрстка</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
	<div id="header">
	<h2>header (шапка сайта)</h2>
	</div>
		 
	<div id="navigation">
	<h2>Блок навигации</h2>
	</div>
		 
	<div id="sidebar">
	<h2>Левая панель</h2>
	</div>
		 
	<div id="content">
	<h2>Основной контент страницы</h2>
	</div>
		 
	<div id="clear">
		 
	</div>
							   
	<div id="footer">
	<h2>footer (низ сайта)</h2>
	</div>
</div>
</body>
</html>

Разберём некоторые моменты.

<div id=»container»> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div id=»clear»>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Теперь добавим файл CSS, код которого приведён ниже.

body {
     background: #FFF;
     color: #000;
     font-family: Arial, sans-serif;
     font-size: 14px;
}

#header {
     background: #F5DEB3;
     width: 100%;
     height: 55px;
}
 
#container {
     background: #FFD700;
     margin: auto auto;
     text-align: center;
     width: 80%;
     height: 400px;
}
 
#navigation {
     background: #FE9798;
     width: 100%;
     height: 25px;
}
 
#sidebar {
     background: #40E0D0;
     float: left;
     width: 20%;
     height: 280px;
}

#content {
     background: #DCDCDC;
     float: right;
     width: 80%;
     height: 280px;
}
 
#clear {
     clear: both;
}
 
#footer {
    background: #00BFFF;
	width: 100%;
	height: 40px;
}

С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.

#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.

Дата размещения/обновления информации: 11.08.2018 г.
Сообщить об ошибке

Notepad++

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

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

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

Программа абсолютно бесплатная и не имеет никаких ограничений. Заходите на сайт notepad-plus-plus.org и качаете. Установка по большому счету, в этом же редакторе можно и программировать, и верстать без использования всяких IDE, но все же для этих целей я рекомендую другую программу о ней ниже.

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

Принципы создания вёрстки

Существует табличный и блочный принцип вёрстки. 

Табличная верстка считается устаревшей, хотя элемент «таблица» входит в спецификацию HTML5 и не помечен как устаревший. Но вот верстать таблицу, внутри ячейки которой содержится другая таблица — является устаревшим методом. В отображении же табличных данных в таблице нет ничего плохого. Весомым недостатком в случае использования таблиц будет задержка вывода страницы: пока браузер полностью не загрузит таблицу на локальную машину – содержимое не будет отображено; браузер видит таблицу как отдельный объект.

При блочной вёрстке особое внимание уделено тегу . Он является каркасом, на который с помощью CSS накладывается тот или иной вид

С помощью

код выглядит отдельными блоками, который к тому же намного лучше индексируется. Помимо в HTML5 добавлены теги блоков: (заголовок), (подвал), (навигация) и  (боковая панель).

Автоматизация рабочего процесса

Делать «противоударные» письма сложно из-за множества этапов, на каждом из которых что-нибудь может пойти не так.

Как и с любыми однотипными задачами, я советую автоматизировать процесс как можно больше. Единожды выработав систему, вам станет намного проще работать.

Брайян Грейвс считает, что надо делать свои письма модульными. Также как у вас есть определенная система в дизайне и библиотека шаблонов для веб-разработки или разработки приложений, так же надо и для верстки писем иметь многоразовые компоненты.

Кевин Мандевилль советует использовать сниппеты с шаблонным кодом для оптимизации рабочего процесса — так вам не придется постоянно писать один и тот же код. В общих чертах Кевин описывает, как использовать сниппеты в современных редакторах вроде Atom или Sublime и дает наводку на общедоступную библиотеку сниппетов Litmus.

Создание левой панели

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

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

В файл CSS впишите следующий код.

#left
{
	padding: 10px;
	width: 237px;
	padding-right: 1em;
}

#left h3
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}

#left ul {
	margin: 0;
	padding: 10px;
	list-style: none;
	width: 100px;
	font-size: 18px;
}

#left li ul {
	position: absolute;
	left: 90px;
	top: 0;
	display: none;
}

#left ul li {
	position: relative;
	margin-bottom:20px;
} 

#left ul li a {
	display: block;
	text-decoration: none;
	color: #ffffcc;
	background: #ff9900;
	padding: 5px;
	border: 1px solid gold;
	border-bottom: 0;
} 

#left li:hover ul {
	display: block;
}

#left li li {
	margin-bottom:0px;
	width: 150px;
}

#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
}

Обратите внимание на правила классов ul и li — секрет исчезновения меню находится там, раскройте его самостоятельно. В контейнер left HTML-документа добавим сначала информационный блок без меню

В контейнер left HTML-документа добавим сначала информационный блок без меню.

<h3>Информация</h3>
	<p>Мы предлагаем Вам праздничные скидки. <a href="http://test1.ru/news.php">Далее...</a></p><br />
	<h3>Меню</h3>

Белый фон распространился ещё ниже по странице.

Теперь самое время вставить в HTML-файл код меню левой панели. Оно, в отличие от верхней навигации, реализовано списками, что можно было заметить ещё из CSS-правил.

• Галерея
  • Кухни
  • Кровати
  • Стенки
  • Прихожие
  • Шкафы-купе
  • Компьютерные столы
• Договор
• Прайс
  • Кухни
  • Кровати
  • Стенки
  • Прихожие
  • Шкафы-купе
  • Компьютерные столы
• Образцы
  • Стекло
  • ДСП
  • Фурнитура
  • И т.д.
• Контакты
• Важно

Взгляните, как смотрится список. Многие могут подумать, что это таблица.

Подменю работает, надо только подвести мышку к пункту, его содержащему (у нас это Галерея, Прайс и Образцы).

История развития верстки веб-страниц

Тим Бернерс-Ли, работая в Европейском институте физики частиц придумал язык, который концентрировался не на средствах оформления, а на логике разметки текста. Некоторое время страницы оформлялись в так называемом «академическом дизайне», например, lib.ru.

С появлением браузера Netscape ситуация изменилась. Разработчики да браузера внедряли нестандартные для html теги, призванные улучшить внешний вид документа. Браузер был настолько распространённым, что нестандартные теги не вызывали беспокойств: нет смысла беспокоиться о том, что другие браузеры не поддерживают эти теги, когда только 10 % посетителей пользуется другими браузерами. Сайты перестали разрабатываться в «академическом» стиле. Над дизайном стали задумываться, а значит, потребовалась более сложная верстка.

С середины 1990-х MS Internet Explorer захватывал всё большую часть потребителей. Подходы разработчиков браузеров различались, отличался и набор поддерживаемых технологий. Всё это лишь добавляло неудобств для разработчиков сайтов — увеличивая время разработки сайта.

Во время борьбы за рынок на смену устаревающим и плохо поддерживающим стандарты Netscape 4 и Internet Explorer 4 (IE 4) пришли пятые версии браузеров. IE 5 должна была не просто исправить ошибки предшественника, а улучшить поддержку стандартов CSS. На этот шаг Майкрософт была обречена хотя бы потому, что вошла в группу W3C. В процессе разработки разница в отображении сайтов стала настолько значительной (а часть сайтов вовсе не работали), что разработчикам пришлось создать специальный «режим совместимости». В таком режиме браузер работал «по старинке». Для того, чтобы использовать режим поддержки стандартов необходимо было в html-код добавить элемент <!DOCTYPE>. Идея с режимом совместимости позднее перешла в остальные браузеры (например, Mozilla, Safari, Opera и т. д.). С развитием технологий разновидностей doctype оказалось слишком много, только к пятой версии html W3C предложили использовать короткую запись унифицировав стандарт.

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

В 1998 году появляется спецификация Cascading Style Sheets Level 2 (CSS2), а потом и CSS2.1, что позволило выносить код оформления блоков в отдельные файлы и использовать на всех страницах сайта и даже кэшировать этот файл, а значит ускорять загрузку страниц. Развитие этой технологии и поддержка со стороны браузеров привела к использованию блочной вёрстки, вместо таблиц.

Типы макетов

Все сайты по макету вёрстки можно разделить на 5 групп:

• фиксированные (статические, имеющие фиксированную ширину),
• резиновые (проценты),
• эластичные (em),
• адаптивные,
• комбинированные.

Адаптивный

Адаптивная вёрстка/тип макета — дизайн, который подстраивается (адаптируется) под размер экрана, в том числе может происходить перестройка блоков с одного места на другое, или их замена блоками отображаемыми только при определённом разрешении. Адаптивная вёрстка пришла на смену идеи создания специальных мобильных версий сайта, «живущих» на отдельных поддоменах (например, m.wikipedia.org).

Адаптивная вёрстка

Преимущества:

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

Недостатки:

Требует тщательной проработки нескольких макетов, для различных размеров экранов.

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

Самостоятельная вёрстка и программы

Итак, вёрстка в «ворде» — не вёрстка, потому что это текстовый редактор, а не специализированная программа.

Например, при внесении исправлений в документ может слететь значительная часть макета: появятся огромные пробелы, переносы возникнут посреди строки, собьётся нумерация страниц, нарушится последовательность колонтитулов, переедут иллюстрации. Ухудшается качество последних — оно будет терпимое, но не лучшее, не используются цвета, которые необходимы для качественной печати. Часто типографиям приходится доделывать макет, так как красные щёки Снегурочки становятся ядрёно-малиновыми или фиолетовыми.

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

1. Adobe InDesign — безусловный фаворит. Эта программа создана специально для профессиональной издательской вёрстки и обладает огромным функционалом, поэтому в ней работает большинство верстальщиков.
2. Adobe PageMaker.
3. Adobe FrameMaker.
4. QuarkXPress.
5. CorelDraw.
6. Corel Ventura Publisher.

Этапы верстки сайта

Как писалось выше, разработка — это трудоёмкий процесс. Даже прочитав несколько книг и прослушав видео курсы. Перед любым начинающим верстальщиком встанет вопрос, а с чего же начать? Разработка своей темы займёт некоторое время. Придерживайтесь следующих этапов.

• Оценка – получив psd документ (формат фотошоп) первое, что сделайте, произведите оценку, а именно визуально приставить какие изображения вырезать и разместить. Где получить необходимый файл, перед тем как вы начали творить сайты для верстки psd? Можно сделать самому или скачать в интернете.
• Нарезка изображения.  Делаем то, что задумали на первом этапе, подбираем тип изображения jpg, gif и png и сохраняем нарезки в папку (инструкция ниже), если надо некоторые картинки объединяем в спрайты.

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

Напишите конструкцию кода @media screen and (max-width: 800px) {} в стилях, чтобы указать разрешения для каких экранов должна быть адаптивная верстка.

Правильный вариант подключения добавить отдельный файл, например, style.css и прописать в тегах head путь:

<link rel=”stylesheet” href=”css/style.css” type=”text/css”>.

Кроссбраузерность. Один из важнейших этапов, который нужно выполнить по завершению предыдущей работы. Устанавливаем несколько браузеров и тестируем свой шаблон. Если в браузерах отображается одно и тоже значит вы закончили работу, при другом раскладе переходим к следующему этапу.

Отладка и исправление ошибок

Во время проверки, обратите внимание на закрытость тегов, из-за которых скрипт может отображаться неправильно. Проверьте css довольно, часто ошибка скрывается там

Сервис по проверки валидации https://validator.w3.org/, поможет найти любые ошибки, связанные с разметкой html.

Ряд правил, чтобы добиться валидного кода.

• Всегда прописывайте DOCTYPE
• JavaScript и style храните отдельно от html документа, так будет легче исправить ошибки если вдруг что-то сбилось.
• Следите за тем, чтобы все теги были закрыты.
• Значение у атрибута id должно быть уникальным, без повторов, иначе код будет невалидным. К классам это не относится.

MIME Multipart

Обычное текстовое письмо — это просто текст. HTML-письмо — это просто HTML. Большинство писем, которые вы посылаете и получаете — это MIME (Multipurpose Internet Mail Extensions — многоцелевые расширения интернет-почты). Этот стандарт комбинирует текст и HTML, так что получатель сам решает, какой тип отображать.

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

Также замечу, что некоторые клиенты отображают простой текст как HTML; например, Gmail добавляет некоторые стили по умолчанию и превращает URL в гиперссылки. Большинство сервисов рассылок конструируют MIME самостоятельно, поэтому об этом не приходится думать. Некоторые из них также создают простую текстовую версию из вашего HTML.

Совет: Выберите пункт «Показать оригинал» из выпадающего меню в Gmail, чтобы увидеть полный MIME.