Top.Mail.Ru

Что такое верстка ?

Вёрстка – это процесс преобразования дизайна сайта (то есть картинки, по сути) в Web-страницу. То есть если дизайн – это просто картинка в формате PSD (формат Photoshop), то Web-страница – это интерактивное отображение страницы с внешним видом, как на картинке. Интерактивность означает, что на Web-странице можно выделить текст, перейти по ссылке, заполнить форму, добавить товар в корзину и так далее.

Теперь о том, как обучиться вёрстке. Для этого надо понять, как вообще верстаются сайты. А верстаются они с помощью HTML и CSS. Поэтому перед началом обучения вёрстки, нужно сначала изучить HTML и CSS. В предыдущем письме я говорил, что новичкам нужно изучать только свежие материалы по HTML, а не по HTML5, и я объяснял, почему именно так. То же самое касается и CSS. Безусловно, есть CSS3, но он на 90% состоит из CSS2, поэтому нужно опять же искать свежий материал просто по CSS, и там, если материал качественный, обязательно рассмотрят и CSS3, который является, безусловно, очень важным, но всё-таки вспомогательным.

Когда будут изучены HTML и CSS, можно приступать к изучению вёрстке. На мой взгляд, для новичков вёрстка – это наиболее сложный этап сайтостроения. Но уверяю Вас, со временем верстать Вам будет всё проще и проще, и в какой-то момент Вы поймёте, что ничего нового для Вас уже нет. Все вопросы: как сверстать это, как сверстать то – отпадут по той причине, что Вы уже подобные элементы верстали и прекрасно знаете, как это сделать, так как любая Web-страница похожа по своим элементам на какую-нибудь другую Web-страницу с другого сайта.

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

Итак, подведём итог:
1. Изучайте HTML по свежим материалам
2. Изучайте CSS так же по свежим материалам
3. Если Вы раньше не изучали HTML или CSS, то Вам книга/курс/серия статей в духе «HTML5 и CSS3» не подойдут. Они только для тех, кто уже знает HTML4 и CSS2.
4. Пытайтесь верстать. Шаблонов для вёрстки в Интернете навалом. Скачивайте их и тренируйтесь. Конечно, совсем идеально, если Вы где-нибудь найдёте пример вёрстки. Но, в принципе, можно обучиться и так, хотя сделать это будет сложнее.
5. Со временем Вы доведёте свой навык верстальщика до автоматизма, и будете верстать любые страницы быстро и качественно, тем более что HTML5 и CSS3 в этом очень сильно помогают.

Поделиться ссылкой:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Top.Mail.Ru