Читать


Главная » 2017 » Апрель » 21 » Почему дизайнеру важно знать основы вёрстки
15:16
Почему дизайнеру важно знать основы вёрстки

Вряд ли сегодня найдётся графический дизайнер, который не знает, как нарисованный им макет обретает жизнь в сети. В этой статье коротко рассказывается об HTML и CSS, а также подчёркивается важность знания основ вёрстки.

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


Почему дизайнеру важно знать основы вёрстки


Конечно, сегодня для вёрстки существует множество инструментов, способных помочь воплотить чуть ли не любую идею дизайнера. Однако, порой, чтобы реализовать какую-то креативную идею, верстальщику приходится подключать кучу скриптов, увеличивать объём кода, что в итоге приводит к замедленной загрузке сайта и его излишней захламлённости кода. Иногда это попросту не оправдано. И что же, придётся оставить собственную идею и заняться переделкой макета? Не каждый граф.дизайнер способен отнестись к такой ситуации спокойно и переделать свою работу без лишних возмущений. Так как же исключить повторение подобных проблем? Вот тут-то и пригодятся знания вёрстки!

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

Не стоит бояться кода - такого страшного и непонятного! К слову, не так уж он и непонятен. В основе html лежит человеческий язык - английский. А основой его являются теги.


HTML


Из Википедии: HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

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

<center>Здесь помещается жирный текст.</center>

где <center> - открывающий тег, </center> - закрывающий тег. А вспомните заголовки в тексте! В макете обычно показываются 3-4 уровня заголовков. <H1> - самый крупный заголовок - используется в основном для заголовков публикаций; <H2> - заголовок поменьше - для подзаголовков в тексте; с <H3> по <H6> - теги всё с меньшим размером шрифта для менее значимых заголовков.

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

<a href="http://mikhailmark.ru">Текст-ссылка</a>

<a href="http://mikhailmark.ru"><img src="http://mikhailmark.ru/image.jpg"></a>

Существуют также пустые теги, например <br> - он обозначает перевод строки и указывается без закрывающего тега. Внутри тегов могут использоваться различные атрибуты, такие как ширина и высота элемента (width и height соответственно), или отступы одного блока относительно других блоков (margin).

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

И естественно, одного html будет недостаточно для полноценной вёрстки. Важным другом html является CSS.


CSS


Из Википедии: CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

С помощью CSS описываются общие стили для множества элементов сайта. К примеру, если вы пропишите для тега <H1>> определённый тип и размер шрифта, отступы сверху и снизу, какие-то дополнительные параметры (курсивное начертание, написание заглавными буквами, тень под буквами...), то не придётся указывать всё это на каждой странице сайта. Вы указываете тег <H1>, а остальные стили этого заголовка автоматически подгружаются из файла CSS, где указаны стили для всех элементов.

Хотите, чтобы на фоне красовалось изображение - прописывается это в CSS. Например:

body {
background-image: url(http://mikhailmark.ru/image.jpg);
background-repeat: no-repeat, repeat-x;
background-position: center top;
background-color: #ffffff;
}

где body - тело страницы, заключённое в теги <body></body>;
background-image - указание ссылки на картинку;
background-repeat - повторение или не повторение картинки по горизонтали (х) или вертикали (y);
background-position - расположение картинки относительно границ экрана;
background-color - цвет фоновой заливки в отсутствие изображения.

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

Вот пример кнопки, использующейся на данном сайте:

Читать блог


Код кнопки в теле страницы:
<a class="knopkag" href="http://mikhailmark.ru/blog/">Читать блог</a>

Стиль в CSS:
a.knopkag {
color: #fff; /* цвет текста */
text-decoration: none; /* убирать подчёркивание у ссылок */
user-select: none; /* убирать выделение текста */
background: rgb(142,115,200); /* фон кнопки */
border-radius: 3px;
padding: .7em 1.5em; /* отступ от текста */
outline: none; /* убирать контур в Mozilla */
}
a.knopkag:hover { background: rgb(168,146,217); color: #fff; text-decoration: underline; } /* при наведении курсора мышки */
a.knopkag:active { background: rgb(79,61,116); color: #fff;} /* при нажатии */

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




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







Категория: Веб-дизайн | Просмотров: 126 | Добавил: M-Wizard | Теги: CSS, Вёрстка, HTML, основа, Веб-дизайн | Рейтинг: 0.0/0

Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА


ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ