Во время верстки мастер превращает созданный в специальном редакторе графический дизайн в страницу для интернета, написанную на языке HTML.
Что это значит на практике? Например, есть журнал, который издается как печатном, так и в онлайн формате. В этом журнале необходимо разместить статью, которая в «сыром» виде занимает три страницы (на ней нет ни картинок, ни логического деления на блоки, ни ссылок – ничего, что будет в готовых версиях, кроме самого текста). От журналиста статья отправляется графическому дизайнеру – он работает с картинками, делением текста на блоки, шрифтами, размещением картинок. Получается готовый макет, который, в свою очередь, отправляется в работу html-верстальщику. Именно он превращает дизайн в html-страницу, которая потом как выводится в онлайн версии журнала, так и отправляется на печать.
Для верстальщика необходимы навыки работы с Photoshop (могут потребоваться и другие графические редакторы), а также знание языков программирования: HTML, Java Script, CSS.
Как выглядит часть привычных для нас сайтов на языке программирования? Мы можем узнать, если в открытом окне браузера щелкнем «Просмотреть html-код». На экране появится вот такое окошко:
Именно так выглядит качественно написанная страница после верстки и проверки html-кода.
Какой бывает верстка
Верстка делится на два базовых вида: табличную (используются таблицы, обозначаемые тегом <table>) и блочную (используются блоки, обозначаемые тегом <div>).
С чего начинают верстку
Для того, чтобы начать верстку, нужно иметь готовый макет от дизайнера. Именно с ним и предстоит работать: картинки превращать в набор кодов, который в дальнейшем будет использован на сайте (или для других нужд – как в случае с журналом, который мы описывали выше).
Начать следует с внимательного изучения предоставленного дизайнером макета. Рассмотрите его и подумайте, как вы хотите видеть его уже после оформления, как он будет приятен и понятен пользователю. Не забудьте о том, что каждый элемент стиля (размер и вид картинок, шрифта для надписей, заголовка и пр.) выносится в отдельный файл – по-другому это не будет работать.
Пошаговая инструкция для верстки:
- Начните с графики. Вырежьте все графические элементы и отправьте их в отдельную папку.
- Продумайте шрифты и выпишите название тех, которые будут использованы (их нужно будет прописать на языке программирования CSS).
- Создайте первые файлы: index.html и styles.css (это базовые названия, вы можете дать и другие). В первом файле будет храниться страница после верстки, во втором – элементы стиля.
- Создайте первые файлы: index.html и styles.css (это базовые названия, вы можете дать и другие). В первом файле будет храниться страница после верстки, во втором – элементы стиля.
- Создайте первые файлы: index.html и styles.css (это базовые названия, вы можете дать и другие). В первом файле будет храниться страница после верстки, во втором – элементы стиля.
- Создайте первые файлы: index.html и styles.css (это базовые названия, вы можете дать и другие). В первом файле будет храниться страница после верстки, во втором – элементы стиля.
- Проверьте, чтобы все теги были закрыты и расположены в правильной последовательности. После этого работу над HTML можно будет завершить.
- Переходите к стилизации в CSS. Каждый блок обрабатывайте от общих параметрах к специфическим.
- Переходите к стилизации в CSS. Каждый блок обрабатывайте от общих параметрах к специфическим.
- В самом конце страницу необходимо протестировать и посмотреть, есть ли где-то ошибки в кодах. Тесты можно проводить вручную и отслеживать неполадки самостоятельно, либо воспользоваться специальными онлайн сервисами.
Как определить качественную верстку
Для того, чтобы оценить верстку, необходимо проверить готовую страницу на:
- наличие блоков с закрытыми тегами <div>;
- возможность отображения страницы в разных браузерах;
- отсутствие ошибок в коде;
- возможность индексации поисковыми текстовой части;
- максимально возможную краткость кода;
- наличие всех элементов стиля в отдельном css-файле;
- отсутствие заглавных бук в кодах;
- обязательное указание параметров высоты и ширины картинок (прописываются вместе со специальным тегом для картинок <img>);
- преимущественное использование языка CSS (Java Script – только в том случае, если без него действительно нельзя обойтись);
- использование тегов <ul>, <li> для создания списков (они – самые удачные с точки зрения индексации поисковиками);
- правильное расположение заголовков и подзаголовков различного уровня (H1, H2, H3…);
- четкую структуру кода, в которой легко будет разобраться;
- продуманный стиль всех информационных элементов;
- отсутствие файлов Java Script в шапке (теге <head>).
Самому верстальщику тоже желательно составить для себя чек-лист, по которому и выстраивать работу. Последовательная обработка страницы – дело монотонное, и в нем легко что-нибудь упустить, поэтому отмечать готовое по списку будет очень удобным.
Пример удачной верстки в виде структурированного html-кода:
Какие инструменты требуются для верстки
Как и у любого мастера, у верстальщика должен быть свой базовый набор для работы со страницами. В данном случае – это набор компьютерных программ, которые мы можем классифицировать по их назначению:
- Для работы с картинками: Adobe Photoshop (базовая), Gimp или Krita или другие редакторы по выбору.
- Для написания HTML и CSS кодов: Notepad++, Adobe DreamViewer, HTML Editor, UltraEdit, CSS3 Generator.
- Для написания кодов с Java Script: Page, NetBeans.
- Для того, чтобы проверить коды на наличие ошибок и возможность отображения в разных браузерах: Crossbrowsertesting, Markup validator, Validator.w
Не следует относиться к верстке с девизом «и тааак сойдет!». Плохая работа верстальщика может загубить страницу, даже если текст на ней написан действительно полезный, а дизайн – максимально удобный. А даже одна загубленная страница, в свою очередь, может снизить лояльность пользователей к сайту и затормозить его продвижение. Поэтому верстка требует большой ответственности, внимательности и добросовестности.
