КАК ПРОИСХОДИТ ВЕРСТКА САЙТА
Для начала разберемся, что такое верстка и зачем она нужна.
Процесс создания сайта происходит в несколько этапов и одним из последних является верстка сайта. Этим занимается соответствующий специалист - верстальщик. Создание веб-страниц происходит с помощью специальных языков программирования: HTML, CSS и JavaScript. Используя возможности этих языков, разработчик превращает созданный в графическом редакторе макет в полноценную интернет-страницу .
Если вы новичок в сайтостроении и мечтаете когда-то сверстать свой первый шаблон сайта, то начинать нужно строго с макетов на чистом HTML и CSS. Это наиболее простые веб-технологии, которые можно изучить. Основы верстки сайтов – это именно знание этих двух языков, без которых нет смысла дальше что-то делать.
Изучив их, находите в сети бесплатные PSD-макеты и пытайтесь из них верстать сайт. Наверное у вас появился вопрос, что же такое PSD-макет?Это шаблон сайта, нарисованный дизайнером в фотошопе. Соответственно, вам понадобиться приложение на подобии фотошопа либо же сам фотошоп. Конечно же, вам нужны базовые знание работы с таким приложением. В этом нам поможет наш хороший друг YouTube.
ЧТО НУЖНО ЗНАТЬ О ВЁРСТКЕ САЙТОВ
Важно, чтобы вы не думали, будто верстка заключается в раскидывании нужных тегов и их дальнейшем оформлении в CSS. Это так, но есть много дополнительных нюансов. Далее мы посмотрим на некоторые моменты верстки сайтов.
Красивый код. Казалось бы, какая разница, как он там написан? Пусть хоть в одну строчку. Для редактирования гораздо лучше держать версии файлов, в которых код написан красиво и грамотно.
Просмотрите руководства по правильному форматированию кода. Это займет у вас буквально минут 15-30, зато вы поймете, как правильно писать и где ставить отступы. Код в одну строчку можно получить с помощью специальных сервисов, которые его сжимают.
Использование актуальных тегов. Если вы учили HTML много лет тому назад, то наверняка помните теги, которые сегодня уже не используются либо вовсе не поддерживаются. Их использовать нельзя, потому что в новых браузерах будут возникать ошибки. Например, frame или object — старые неудачные эксперименты, которым давно есть более лучшая альтернатива.
Также есть устаревшие CSS-правила. Если вы учите эти языки на новом сайте, то там наверняка не будет всего этого старья. Обращайте на это внимание, чтобы не использовать то, что стало неактуальным.
Придерживаться стандартов Web 2.0. Это такая концепция, которая стремиться сделать веб-стандарты наиболее простыми, удобными и понятными. Так, она требует разделять содержимое, представление и поведение (HTML, CSS и JS) друг от друга.
Кроссбраузерность, насколько это возможно. Как я уже сказала, нужно использовать новые свойства и теги. Минус в том, что не все из них везде поддерживаются. Еще хуже, если они поддерживаются по-разному. Некоторые свойства поддерживает только Google Chrome, другие – Яндекс, третьи – Mozilla. Постарайтесь не использовать те из них, которые поддерживаются только в одном браузере.
Меньше графики, если нацелены на большой трафик. Никто не против красивых графических фонов на всю страницу, но если вам нужен максимальный охват пользователей, как печально это не было, но придется отказаться и использовать альтернативы. Максимально сжимать все изображения. Везде, где это возможно, использовать сплошной цвет либо градиент. Иконки соединять в спрайты. С такой версткой страницы будут грузиться быстрее.
Если попытаться как-то обобщить стандарты верстки сайтов, то это можно сделать следующими словами: просто, понятно, удобно, красиво, современно, быстро, кроссбраузерно.
Верстка осуществляется в несколько этапов:
- Из макета вырезаются основные изображения, элементы, фоны и прочее:
· Прописывается структура сайта с помощью языка разметки HTML. Размечается расположение основных блоков и элементов, проставляются ссылки.
· Далее элементам придается внешнее оформление с помощью стилей CSS. Задается фон для страницы и необходимых элементов, подгружается типографика, задается цветовая гамма страницы, размещаются изображения из макета.
· Если на сайте подразумевается динамика, используется JavaScript, с помощью которого создается анимация и другие динамические эффекты.
· Созданная страница тестируется, проверяется наличие ошибок и отображение сайта в различных браузерах и на других устройствах.
Основные ошибки новичков :
1) Выравнивание правого края - Выравнивайте текст по левому краю!
Совет: Выравнивайте текс по левому краю. Рваный край выглядит лучше, чем разная длина между словами.
2) Цвет текста не контрастен к фону - Подбирайте цвет шрифта, который наиболее контрастен к фону!
Совет: Пишите черным по белому.
3) Незаметный подзаголовок - Выделяйте подзаголовки четче!
Совет: Подзаголовки выделяйте.
4) Неправильное соотношение верхнего и нижнего отступа в подзаголовке - Расстояние сверху подзаголовка должно быть больше, чем снизу!
Совет: У читателя не должно возникать сомнений, к какому абзацу относиться подзаголовок.
5) Сложная структура - Не используйте сложную структуру в статье!
Совет: Делайте структуру статьи проще.
6) Неподходящий размер интерлиньяжа - Межстрочный интервал должен быть заметно больше расстояния между словами!
Совет: Подбирайте размер интерлиньяжа, ориентируйтесь на размер кегля, ширину текстового поля и расстояния между словами.
7) Слишком широкое текстовое поле - Текстовое поле не должно быть слишком широким!
Совет: Чтобы определить подходящую длину строк, можно использовать формулу Роберта Брингхарста: размер кегля умножить на 30.
8) Мелкий размер кегля - Набирать статью кеглем меньше 14 px — неуважение к читателю!
Совет: Основной текст на веб-странице лучше не набирать кеглем меньше 14 px.
9) Отсутствие абзацев - Делите текст на абзацы!
Совет: Делите текст на абзацы не более 8 строк.
