Блочная верстка сайта с нуля. Введение

Всем привет!

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

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

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

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

Дизайнер — это креативный человек, который работает с графическими программами: photoshop (фотошоп) — для создания макетов сайта, illustrator (иллюстратор) — для рисования логотипа сайта в векторе или же CorelDraw. Вобщем это человек, который отвечает за графическую составляющую сайта в целом.

Верстальщик — это человек, который воплощает в жизнь задумку дизайнера, используя средства html разметки: html4/html5, css3, javascript/jQuery.

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

Инструменты для верстки

• графический редактор, как правило этот фотошоп;
• редактор кода;
• браузеры, под которые мы верстаем (mozilla, chrome, ie, opera — хотя сейчас они перешли на тот же движок, что и chrome);
• планшет и мобильные девайсы (в них же браузеры, в которых мы будем тестить);
• система контроля версий (git/svn) + удаленный репозиторий (bitbucket/git), в который мы будем заливать наш проект;

Вот основные «инструменты», которые нам помогут в верстке. Давайте рассмотрим их все по-порядку. Хотя графический редактор, тут все понятно, особо нечего написать.

Редактор кода

Кода я только начинал верстку, я сразу же нагуглил notepad++ и стал пользоваться им, он тогда был очень популярный, потому что подобных мощных, удобных и в одно и то же время очень легких софтин для решения задач в верстке не было. Хотя может и было, но я не стал искать дальше, меня все устроило в нем. К нему можно было поставить множество плагинов, к примеру, completer — дописывает теги после первых 2-3х символов; плагин для работы с фтп и другие.

Но потом я узнал о sublime text 3 и перешел на него, до сих пор он в списке моих инструментов. Чем же он меня заинтересовал я распишу в отдельной статье о sublime text, в которой напишу сравнение его и того же notepad++, к примеру. Можно еще конечно перечислить несколько редакторов и множество тяжеленных IDE, но я этого делать не буду, у нас тема — верстка сайтов, а не программирование и вполне хватает функционала подобных редакторов.

Браузеры

В этом пункте тоже все понятно, пользоваться и ровняться нужно на последние 2 версии каждого браузера, хотя это еще зависит от заказчика, но все же правило хорошего тона — это именно 2 последние версии.

P.S. слава Богу прошли те времена IE6-7, ИЕ8 доживает свои последние дни, месяца, хотя периодически мне попадаются заказчики из ГОС структур, у которых стоит лицензионный софт Windows XP, а там последняя версия стоит ИЕ8 и их особо не интересует, что Microsoft прекратили поддержку этого прекрасного браузера уже как несколько лет. Поэтому в реальной практике бывает и такое, что нужно еще не забывать за ИЕ8, но он уже не такой страшные, как его предшественники, многое в нем работает, а если не работало из коробки, то об этом позаботились благодаря js. Об этом я также сделать отдельную статью, фиксы и поддержка IE8, но это будет в дальнейших уроках.

Планшеты, смартфоны

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

Системы контроля версий

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

И напоследок хочу посоветовать несколько ресурсов для начинающих, если кто не в курсе:

• htmlbook.ru — русскоязычный ресурс об html верстке, собраны все возможные теги с описанием
• www.w3schools.com/htmL — англоязычный html ресурс
• validator.w3.org — ресурс для проверки html валидности кода
• jigsaw.w3.org/css-validator — css валидатор
• и конечно же не зацикливайтесь на каких-то определенных сайтах, на все это есть — google, он знает все )

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

До новых встреч!