Как верстать – Как сверстать веб-страницу. Часть 1 / Habr

Как стать начинающим верстальщиком

Привет, читатель!

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

Учим HTML/CSS

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

После прохождения уроков вы должны понимать:

• что такое html-теги и как они работают
• блочную модель(border, margin, padding)
• как работает float, inline-block и flexbox
• позиционирование(абсолютное, относительное, фиксированное, z-index)

Вы должны уметь:

• вставить на страницу текст, картинки, ссылки, элементы форм
• стилизовать элементы страницы(изменение размеров, цветов, теней и т.д)
• создавать таблицы

Работаем с фотошопом

Дизайнер предоставляет верстальщику макет в формате psd(формат файлов Photoshop). Поэтому верстальщику необходимо уметь с ним работать. Все функции программы не нужны, главное уметь следующее:

• работа со слоями(скрытие, отображение, просмотр эффектов)
• замер размеров элементов
• вырезание картинок(обычных и паттернов)
• копирование текста из макета в html

Полезные ссылки:

Начальные инструменты

Для быстрого старта вам понадобится редактор и браузер. Вы можете выбрать любые, но я посоветую Sublime Text в качестве редактора и Chrome в качестве браузера. Из операционных систем сделайте выбор между Windows и Mac. Остальные системы будут тормозить ваше обучение.

Верстка первого сайта

На этом этапе скорее всего вы ощутите ступор. Вы вроде знаете html/css(на самом деле нет) и фотошоп. Но вы совершенно не понимаете как из макета сделать сайт. В данном случае вы можете пройти небольшой курс по верстке сайта, коих много на ютубе. На данном этапе вам нужно сверстать первый сайт. Не обращайте внимание на такие понятия как резина, адаптивность. И еще, не используйте css-фреймворки(bootstrap, foundation).

Полезные ссылки:

Понимание семантики, валидность

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

Полезные ссылки:

Javascript и jQuery

На этом этапе вы должны понять, что такое Javascript и зачем он нужен. Далее познакомиться с библиотекой jQuery и попробовать сверстать сайт с интерактивными элементами(слайдеры, всплывающие окна, табы).

Полезные ссылки:

БЭМ

Изучите методологию БЭМ. Вам нужно понимать, как верстать независимыми блоками, как привнести модульность в вашу верстку. В интернете очень много информации по этому поводу. Не нужно изучать фул-стек БЕМ, просто важно понять методологию для CSS. Верстаете новый макет с применением методологий.

Полезные ссылки:

SASS

Для ускорения и удобства написания стилей придумали препроцессоры. Наш выбор — Sass(.scss). Вам необходимо изучить препроцессор и сверстать с ним новый макет. Понять нужно:

• переменные
• разница между миксинами и тихими классами(placeholder)
• как работает ‘&’
• как разделить стили на несколько .scss файлов

На данном этапе scss в css компилируйте с помощью prepros

Полезные ссылки:

Pug

Также для ускорения верстки и поддержки верстальщики используют шаблонизаторы html. Наш выбор — pug. После изучения вы должны понимать:

• как делать миксины
• как работает extends
• циклы и переменные
• работа с массивами

Верстаете сайт с применением шаблонизатора.

Полезные ссылки:

Адаптивность

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

Полезные ссылки:

IDE PHPStorm

Чем раньше вы пересядете с редактора на PHPStorm — тем лучше. Эта IDE позволяет значительно ускорить разработку. Скачать бесплатную(early access) PHPStrom можно на официальном сайте, если не хотите платить — скачиваете её раз в месяц. В остальном бесплатная версия такая же, как и платная.

Полезные ссылки:

Git

Любой разработчик должен уметь работать с системами контроля версий, и верстальщик — не исключение. Мы, как и большинство выбрали Git. Вы должны уметь следующее:

• работать с интерфейсом github
• уметь клонировать репозитории на компьютер
• делать commit, push, merge
• делать pull request

Полезные ссылки:

Практика

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

На этом все.

glivera-team.github.io

Как верстать красиво или чем плохи css-фреймворки / Habr

Преимущества дивной вёрстки, семантичной разметки и разделения содержимого и дизайна описаны десятки, сотни раз, но все-равно находятся люди, которые не понимают самой идеи html и css, пишут в коде такие ужасные вещи, как

<span>

, когда хотят расскасить текст в синий цвет и искренне считают, что эта запись чем-то лучше, чем

 <font color="blue">

, наивно веря в этом деле валидатору. А ведь правильный подход в написании html и css лежит на поверхности. Достаточно просто посмотреть историю развития этого языка, почитать статьи десятилетней давности и проанализировать. Я, при поддержке theshock, постаралась в этот статье упорядоченно и коротко изложить наше видение этого вопроса.

Краткая историческая справка

html создавался академиками, как средство описания данных для обмена по сети на базе языка SGML. Изначально никто не думал, что он будет использоваться для чего-то большего, чем обычный текст. Если посмотреть на большинство современных книг, то можно увидеть каким эти люди представляли себе будущий интернет. Из сорока тегов первого стандарта предназначением только трёх было изменения внешнего вида текста, остальные описывали что этот текст значит и не было возможности отобразить текст так, как вы хотели. Согласно стандарту некоторые теги могли делать текст курсивным или жирным, но такое поведение было только в рамках рекомендаций. Но по-другому развитие интернета видели разработчики Netscape. Они понимали, что

сАйтИКи доЛжнЫ быТь пРивлЕКаТЕльНЫМи для того, чтобы в интернете сидели не только суровые профессора, но и блондинки.
Netscape ввёл достаточно много тегов, которые изменяли внешний вид текста, но не несли за собой никакой логической нагрузки. В статьях тех лет можно прочитать, что идеологам html категорически не нравился такой вектор развития. На самом деле W3C вели себя очень по-старпёрски и не далекоглядно, а Netscape тем временем слишком увлёкся раскрашиванием. Обе компании впали в крайности и не могли прийти к консенсусу.
Помощь пришла неожиданно в лице компании Microsoft. Она практически выкупила W3C, инвестировав в него кучу денег и человеческих ресурсов, удалила устаревшую ещё до выхода спецификацию html 3.0 и по-быстренькому выпустила более приближённую к жизни спецификацию html 3.2, которая принесла с собой css. IE 3 и NN 4 уже более-менее поддерживали возможности стилевого оформления.
Ну, потом осёл быстро вытеснил Netscape и, как только занял монопольное положение, заснул на 6-й версии лет, эдак, десять назад. Потом возродился Netscape в лице Firefox, отвоевал значительную часть рынка у IE за счёт кучи преимуществ и, в итоге, всё пришло к тому, что мы сейчас имеем.
Разработчикам браузеров на заметку: в лидеры выбивался тот браузер, который поддерживал стандарты лучше всего.

А имеем мы сейчас вполне неплохую ситуацию. Хотя, перспективы css 3 очень радостные и приятные и мы с нетерпением ждём его прихода, даже то, что даёт шестой ослик вполне достаточно для красивого и расширяемого кода.

Почему оформлять лучше в css, чем в html

В истории очень показателен период сложного оформления сайтов при помощи одного html. Верстальщики тех годов использовали огромное количество тегов <font>, <b>, <i> , вложенных друг в друга таблиц для задания таких границ и разметки, как они хотели и много чего такого, что в итоге приводило к коду, который очень тяжело поддерживать. Очень интересный цикл статтей перевода «A List Apart» на html+css. Посмотрите пример оттуда:

<!-- Dress left -->
<table border="0" cellpadding="0" cellspacing="0">
<!-- Your variable left margin -->
<tr valign="top"><td 
bgcolor="#ffffcc"> </td>
<td bgcolor="#ffffcc" 
valign="top">
<!-- Your actual content -->

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

<div>

Такое изящество принёс нам язык css. Так в чём же основной принцип подхода html+css? В html-файле мы описываем только логическую часть документа и ничего из оформления (да-да, это именно то, о чём мечтали те старые пердуны из W3C). Оформление ложится полностью на плечи css. Какие преимущества нам это принесёт:
1. Как видно на примере выше, html-код теперь не загромождён, а логичен и понятен.
2. Мы не повторяем описание внешнего вида каждый раз, когда встречается html-елемент. Например, если мы хотим заголовок сделать подчёркнутым и зелёным — достаточно описать это в css-файле, а не указывать соответствующие параметры каждый раз, когда встречается заголовок. Принцип «don’t repeat yourself» показал себя очень эффективным не только в разметке, но и в программировании. На самом деле, очень тяжело найти противников этого принципа среди профессионалов.
3. За счёт этого мы можем давать нашим пользователям возможность к оформлению своих сообщений, не выходя за рамки дизайна сайта (посмотрите на хабр и его оформление заголовкамив статьях). Автор просто указывает тег, например, &lth3> там, где хочет выделить заголовок раздела статьи и он выделяется так, как лучше всего подходит для даного сайта.
4. Вес html-файлов уменьшается очень значительно, а сss-файлы кешируются браузерами и загружаются только один раз, отчего у пользователей значительно ускоряется загрузка страниц, а на сервере уменьшается нагрузка.
5. То, что мы вынесли всё оформление в css-файл позволяет с лёгкостью его изменять при необходимости. Достаточно в одном месте css-файла подправить значение и новый стиль применится ко всем html-страницам, которые его используют
6. Можно полностью поменять оформление сайта просто подключив другой css-файл на сервере администратором или на клиенте пользователем (с помощью user-css). Например, как сделано на ibash.org.ru.
7. Для устройств с маленьким экраном достаточно просто подключить другой файл стилей.

Так почему же плоха запись <font color="red">? Не потому что так сказал валидатор, или написали умные мужчинки на Хабре. Причина отказа от этой записи содержится очень близко к идеологии html. А именно в том, что тут смешивается контент и дизайн! И предпочитаемая многими(валидная, но ужасная) запись <span> — это возврат к тому, от чего с ужасом бежали «A List Apart» 10 лет назад. Каждый раз, когда вы в html-файле задаёте оформление css или в названии класса содержится эпитет, который хоть как-то намекает на внешний вид элемента — вы что-то делаете не так. Просто подумайте, почему вы решили делать его таким. Если вы хотите сделать красный цвет, то, наверное, это обозначает ошибку и ему больше подойдёт <span>. А если вы решили выделить жирным, то этот текст важнее, чем тот, что по-соседству и тут больше подойдёт <span> или даже <strong>. А html5 принесет еще серию актуальных логических тегов, которые помогут отказатся даже от классов.

Верстаем по-порядку

Так как же добится изящного кода? Надо полностью отделить содержимое от представления. Подумайте, какие логические блоки будут на странице и опишите их в html. Не описывайте то, как они будут выглядеть. Представте, что у вас будет два совершенно разных дизайна на базе одного и того же html, но разных css. Возьмем, к примеру, Хабр. Представим, что один дизайн будет очень похож на тот, что есть, а другой будет с навигацией слева, а правая боковая панель уйдёт вниз. И он будет в тёмных цветах, а не светлых, как сейчас. Начнём с html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Habrahabr</title>
	</head>
	<body>
		<header>
			<img src="logo.png" alt="Habrahabr logo" />
			<ul>
				<li>Nutochka</li>
				<li>выйти</li>
				<li>настройки</li>
				<li>личная почта</li>
				<li>хабралента</li>
				<li>избранное</li>
			</ul>
		</header>
		<nav>
			<ul>
				<li><span>посты</span></li>
				<li><a href="#">q&a</a></li>
				<li><a href="#">блоги</a></li>
				<li><a href="#">люди</a></li>
				<li><a href="#">компании</a></li>
			</ul>
		</nav>
		<section>
			<article>
				<h2><a href="#">{Article.title}</a></h2>
				<div>{Article.content}</div>
				<div>{Article.tags}</div>
				<div>{Article.footer}</div>
			</article>
		</section>
		<aside>
			<div>
				<ul>
					<li>
						<a href="#">{Best.blogname}</a>
						» <a href="#">{Best.article}</a>
					</li>
					<li>
						<a href="#">{Best.blogname}</a>
						» <a href="#">{Best.article}</a>
					</li>
					<li>
						<a href="#">{Best.blogname}</a>
						» <a href="#">{Best.article}</a>
					</li>
				</ul>
			</div>
			<!-- Other blocks -->
		</aside>
		<footer>
			© 2006–2010 «Тематические Медиа»
		</footer>
	</body>
</html>

Такой html красив и понятен, легко поддерживается и обладает огромным количеством преимуществ. Следующим шагом будет описание css, но так, чтобы, при этом ни разу не поменять html.
К сожалению, кое-какие причуды верстки не получится сделать без вмешательства в контент, но просто постарайтесь этого избежать, зная, что это категорически неправильно.

css-фреймворки

Последнее время некоторой(к счастью, небольшой) популярностью пользуются css-фреймворки. Например, 960 grid system

<div> 
	<h3> 
		24 Column Grid
	</h3> 
	<div> 
		<p> 
			950
		</p> 
	</div> 
	<!-- end .grid_24 --> 
	<div></div> 
	<div> 
		<p> 
			30
		</p> 
	</div> 
	<!-- end .grid_1 --> 
	<div> 
		<p> 
			910
		</p> 
	</div> 
	<!-- end .grid_23 -->

и blueprint:

    <div> 
      <h2>Blueprint Tests: grid.css</h2> 
      <div> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 

Основной проблемой есть то, что эти фреймоворки нарушают основной принцип разделения содержимого и представления и пропагандируют принципы, которые использовались до изобретения html3.2. Вместо внятного и очевидного описания, что каждый из блоков значит мы видим в html-коде то, как эти блоки выглядят и сколько места занимают. Все преимущества css, описанные выше, разрушаются при таком подходе. Css-фреймворки в том виде, котором они сейчас есть — зло и уход в прошлое.
Какие есть альтернативы? Оставить html языком разметки, а дизайн оставить полностью на совести css, как оно и должно быть. Но как сделать фреймворк на CSS? Для этого можно воспользоватся одним из препроцессоров, которые сейчас набираюсь популярность и вводят в css много вещей, которых там очень не хватает — переменных, математических выражений, изящной вложенности. Например, LessCss и SASS. С их помощью можно организовывать красивые и удобные фреймворки и полностью на стороне css. Подход к созданию такого фреймворка можно почитать в зарубежной статье «Introducing the LESS CSS Grid».

Верстайте красиво и не выливайте компот в борщ, пусть даже кажется, что это будет быстрее и ничего страшного не случится!

habr.com

Как научиться верстать сайты с нуля?

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

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

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

С этим разобрались, теперь можно переходить непосредственно к теме статьи.

Что нужно знать, чтобы верстать сайты?

Для того, чтобы верстать сайты самостоятельно, нужно знать:

• специфику работы в графическом редакторе
• HTML (язык гипертекстовой разметки)
• CSS (каскадные таблицы стилей)
• JavaScript (клиентский язык программирования).

Теперь рассмотрим каждый пункт в отдельности.

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

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

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

Мы рассмотрели что нужно знать, чтобы верстать качественные сайты. Это конечно все очень узко, так как существует еще масса дополнений, библиотек и фреймворков, облегчающих работу. Все рассмотренное выше входит в front-end разработку, теперь вы знаете каким багажом знаний нужно обладать, чтобы стать front-end разработчиком.

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

zyubin.ru

Как получить хорошую верстку от верстальщика / Habr

Вводная часть

Прошлый мой материал “Краткая инструкция по работе с web-дизайнером (для менеджера проекта)” вызвал неоднозначные отзывы и отличную ответную статью (взгляд с другой стороны) “Краткая инструкция о том, как надо работать с web-дизайнером (взгляд дизайнера)”.

Прочитав обе статьи, вы сможете составить адекватное собственное мнение на заданную тему.

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

Backend

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

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

Работа до верстки

Да, я знаю, что идеальный дизайнер разбирается во всех тонкостях верстки, что и как нужно делать в макете, чтобы верстальщик остался доволен. Но такие люди попадались мне очень редко. Здесь описывается работа с “обычным” дизайнером.

Работа с макетом

1. Стоит попросить дизайнера прочитать краткую инструкцию на сайте ilovepsd.ru. Особенно разделы касательно группировки слоев, нэйминга слоев, способа указания размеров и применения эффектов к объектам.
2. Хорошо зарекомендовал себя прием, когда все размеры объектов ( без фанатизма) кратны двум.
3. Стоит заранее определить размеры рабочей области сайта вместе с дизайнером и четко их обозначить. Иначе вы рассчитывали на одно, получили третье.
4. Заранее предусмотрите в макете, какие элементы будут у вас на сайте, например, какие списки, таблицы или цитаты. Иначе после верстки вы будете просить верстальщика “Ну сделай таблицу посимпатичнее на свой вкус”.
5. Для активных элементов в макете должно быть предусмотрено состояние активное и не активное.

Тут встречаются два подхода — сделать все в одном макете, но активные состояния скрыть, или два разных PSD файла. Мы предпочитаем первый вариант. Меньше шанс, что-то забыть или пропустить. Меньше надо открывать и смотреть.

Работа со шрифтами

1. Всегда забирайте шрифты вместе с макетом.
2. Не каждый шрифт можно легко использовать в WEB. Никто лучше самого верстальщика вам в этом не поможет разобраться. Заранее уточните у него этот момент.

Последнее время мы все чаще просим дизайнеров использовать бесплатные шрифты из набора Google Fonts.

3. Если какой-то элемент на странице должен быть представлен, как текст, а не картинка, старайтесь избегать отображать этот текст сферически, волнами и так далее. Только в случае самой крайней необходимости.

Консультация

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

Работа во время верстки

Версии браузеров

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

Если вы без понятия для чего это нужно, то попросите поддерживать Chrome, Firefox, Opera, Explorer от 8 версии.

Чем проверять верстку

1. Лучшая проверка — это ваш браузеры. Открывайте макет во всех этих браузерах и смотрите.
2. Стоит открыть макет на мониторах разного размера. Удобное приложение для Chrome если у вас нет 10 разных мониторов Resolution Test

W3C Validator

Единицы сайтов могут пройти 100% валидацию. И почти никогда добиваться 100% валидации нет оправданного смысла. Но, если верстальщик не может вам внятно объяснить и назвать причину почему именно в этом месте валидация не проходит — это первый звонок. На это стоит обратить внимание.

Валидатор здесь — http://validator.w3.org

JavaScript

Любое применение JavaScript должно быть обоснованно и там, где это использование можно заменить на HTML+CSS — стоит заменять. Особенно важно это для отображения контента. На данный, момент наши эксперименты показывают, что поисковики не всегда и не везде могут внятно и адекватно проиндексировать контент, генерируемый с помощью JavaScript. Каждое такое применение должно быть обоснованно и у него должна быть причина.

Пиксель в пиксель

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

Мобильные платформы

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

habr.com

Методы верстки сайтов – как верстаются сайты

От автора: с момента выхода первой версии языка HTML прошло уже 20 лет. За это время появилось несколько методов верстки, которые мы и рассмотрим в этой статье

Почему не один?

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

Таблица

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

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

Недостатки. Очень громоздкий код – главный минус табличной верстки. Нужно отметить, что в одну таблицу можно вставить другую, то есть вложенную. Это приводит к большой вложенности и куче тегов. И никуда от этого не деться, потому что все эти теги нужны для работоспособности нашей таблицы. Разобраться в таком коде не очень просто.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Альтернатива. Не так давно в CSS появились специальные значения свойства display, которые позволяют имитировать таблицу, используя на самом деле блоки. Например, display: table, display: table-row, display: table-cell. Элементы, к которым применяться эти свойства, начнут вести себя как таблица, ряд таблицы и ячейка соответственно. Нужно скачать, что и этот метод несовершенен, потому что не совсем одинаково поддерживается во всех браузерах. Если вы используете эти свойства, нужно тщательно тестировать на кроссбраузерность.

Фреймы

Когда-то существовал еще один метод верстки, но сегодня о нем практически забыли. Суть верстки с помощью фреймов заключается в том, что окно браузера делится на определенное количество независимых блоков (фреймов), которые формируются тегом frameset. Там указывается путь к html-страничке, которая будет загружена в фрейм.

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

Рис. 1. Такой вот пример сайта на фреймах я нашел в сети. Как вы понимаете, никакой эстетики.

Блоки

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Недостатки. Их практически нет. Блоки легко адаптировать, они легко скрываются и изменяются. Контейнеры div и span правильно отображаются даже в старых браузерах. Если же говорить о новых семантических блоках, то у них нет полной поддержки. Впрочем, наверняка уже скоро эта проблема будет решена. Уже сегодня существуют файлы, подключение которых решает проблему поддержки новых элементов в старых браузерах. Метод блочной верстки будет существовать еще долго из-за его исключительного удобства и простоты.

Флексбоксы (flex)

Самый новый метод верстки. Нормальную поддержку в браузерах впервые получил с 2014 года. Теперь многие разработчики придерживаются именно этого метода. Суть его в том, что структурным элементам прописывается display: flex. Это тоже своего рода блоки, только более гибкие и функциональные.

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

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

Рис. 2. Свойства flex-элементов делают их более гибкими, чем блоки.

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

Заключение

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

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

Наконец, сегодня мы имеем абсолютно новый способ верстки – элемент flex и его свойства, которые делают его более гибким и современным, чем привычный block. На этом на сегодня все. Не забывайте читать новые статьи на блоге, чтобы знать все о сайтостроении.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

Как вы начинаете вёрстку сайта? — Toster.ru

Верстаю не так давно, верстаю не так часто, но все же верстаю.

Раз все начали с нуля, а именно с PSD макета, тоже начну с этого момента.

1. Оцениваю макет, составляю для себя базовую разметку, определяюсь какие главные блоки присутствую, и что должно происходить если их нет.
2. Оценив какие блоки необходимы, и прикинув структуру сайта иду csstemplater.com/ генерирую по своей структуре HTML/CSS шаблон, если это конечно не LP
3. Создаю директорию c названием сайта в openserver, в ней создаю директорию HTML , а внутри по шаблону

• psd- что бы не потерялись, мало ли когда нужно дорисовать что то.
  
• css
  
• js
  
• less
  
• fonts
  
• img — для компонентов шаблона
  
• image — для временного наполнения (слайдеры, изображения в статьях и т.п.)
  
• shop/личный кабинет — иногда делю макет на интерфейсы, и раскидываю по папочкам для дельнейшей навигации
  

4. Закидываю скачанный шаблон по папкам, вырезаю оттуда reset-ы, так как уже имеется отредактированный и перенесенный в less
5. Создаю main_site.less — подключаю сюда все все нужные мне less файлы, template.less- прописываю сюда все структурные элементы (header, footer и т.д.), ui.less — обычно если проект не сложный сую сюда все оформление, иногда разделяю все на отдельные блоки, menu/portfolio/modal/btn/ и т.д.
6. Настраиваю компилятор Less в PHP шторме для текущего проекта, что бы компилировался только файл main_site.less в папку css
7. В основном использую getuikit.com, ну больше он мне по душе чем бутстрап, скачиваю и раскидываю файлы по папкам, правлю пути в index.html, попутно добавляю комментарии
8. Открываю и смотрю PSD шаблон сайта на наличии не стандартных шрифтов, если шрифты есть в www.google.com/fonts, то подключаю их, иначе www.fontsquirrel.com, и раскидываю файлики по папкам
9. Дальше используя Emmet создаю базовую разметку если это LP(header/footer/slider и т.д.), если нет, то начинаю с самого верха делать разметку элементов (logo/slogan/phone/login-widjets и т.д.) попутно добавляю less код в нужные из файлов.
10. Верстаю до конца все, что есть в макетах. Затем по необходимости создаю шаблон для CMS.

ЗЫ: Файлики что сделал не минимизирую, только по желанию заказчика, ибо все нормальные фремворки и CMS умеют объединять css и js файлы в 1, попутно минимизируя на лету. Заказчику отдаю все что сделал включая исходники.

toster.ru

Как сверстать шаблон для сайта. Виды шаблонов

От автора: в сети вы можете найти тысячи готовых шаблонов для сайтов, которые можно практически мгновенно установить себе. А как такой шаблон сделать самому?

В этой статье я хотел бы сразу конкретно ответить на поставленный вопрос. Чтобы сверстать шаблон, нужно обладать определенными знаниями, а именно:

HTML/CSS – два языка, с помощью которых собственно строится структура и внешний вид будущего шаблона. Азы веб-разработки. То, без чего невозможно двигаться дальше.

JavaScript/Jquery – популярный язык, на котором разрабатывают веб-сценарии и самая популярная его библиотека, которая используется на четверти всех сайтов в сети и вообще работает по принципу “все в одном”. С помощью этих технологий реализуются разные вещи: подставляются сценарии на клики мышкой и другие события, разрабатываются интерактивные тесты и даже игры. Например, HTML и CSS не могут сделать так, чтобы при клике мышкой по какому-то элементу сбоку вылез дополнительный блок. А JavaScript может.

PHP и написанные на нем движки сайта (CMS). PHP – язык, который позволяет сделать HTML динамическим. Сегодня мало кого интересует, как сверстать шаблон html, нужно еще и посадить его на движок, то есть сделать так, чтобы на сайт можно было интуитивно понятно добавлять статьи, страницы и прочий контент, да и вообще – с удобством управлять им без необходимости каждую минуту открывать код.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Итак, можно выделить три этапа разработки современного шаблона:

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

Затем все это ставится на какой-то движок, потому что мало кто готов управлять статическим сайтом, для добавления статьи на который нужно создавать новый html-файл с нужным текстом, на который потом ссылаться. В зависимости от потребностей, выбирается либо один из популярных движков (Joomla, WordPress, Bitrix), либо пишется свой собственный.

Последний вариант обычно выбирают достаточно искусные в веб-разработке компании. К слову, самым популярным движком является WordPress. Он еще и бесплатный. Как вы понимаете, на этом второй этапе активно используются возможности PHP. Необязательно использовать этот язык, сайты делают и на Python, Ruby, но их доля в разы меньше.

Третий этап – к шаблону добавляется нужный функционал. Тут уже может использоваться в полную и jquery, и php. Например, в темах для WordPress часто есть возможность визуальной настройки шаблона. Чтобы реализовать это, не обойтись без этих двух технологий.

Как сверстать шаблон для WordPress?

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

Кроме знаний HTML и CSS, которые необходимы для верстки любого шаблона, для верстки под wordpress нужно знать (внимание!), как работает сам движок. Ну и, конечно же, PHP, потому что WordPress написан на этом языке.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Рис. 1. Русская документация wordpress на сайте wp-docs.ru. Здесь вы можете прочитать описание сотен функций для движка, но едва ли разберетесь во всем самостоятельно.

Верстка из psd

Но мы как-то пропустили первый этап, сделав вид, что вы уже знаете HTML и CSS и можете без проблем сверстать шаблон из psd (то есть из фотошоповского макета сайта). Хотя эти языки освоить значительно проще, чем PHP, их все же тоже нужно изучать. И для этого не нужно никуда обращаться – на нашем сайте все уже есть. Во-первых, уроки по основам HTML и CSS. Во-вторых, наработка практических навыков благодаря тому, что вы самостоятельно сверстаете шаблон.

Суть сказанного такова. Как-то так я хотел бы сегодня ответить на вопрос о том, как сверстать шаблон. Для этого вам всего лишь нужны уроки от webformyself и собственное время. На первом этапе вы сделаете готовый шаблон на HTML, который уже будет неплохо выглядеть.

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

Ну а множество уроков по javascript&jquery&ajax позволяет вам добавить на сайт что угодно: умное меню, слайдер, таймер обратного отсчета и просто все, на что может хватить человеческой фантазии.

Ну а если вам надо сверстать шаблон для joomla? Это еще одна популярная CMS (то есть движок сайта). На webformyself есть пошаговая инструкция и на эту тему. Абсолютно такая же подробная, как и в случае с wordpress.

Рис. 2. Создать тему для CMS – далеко не самое простое дело. Быстрее всего вы сможете освоить любой движок если посмотрите пошаговый видеокурс.

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com