/ Вёрстка веб-страниц
Вёрстка веб-страниц

Вёрстка веб-страниц

Верстка сайта

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

 Основные правила грамотной и качественной верстки

1. Вёрстка должна быть кроссбраузерной для Opera, Firefox, Google ChromeSafari, и Internet Explorer. Сайт тестируется на разных разрешениях монитора, от 1024 на 768;
2. Вёрстка всех страниц сайта без исключения, должна пройти валидацию. Достижение валидности затрудняют использование различных CMS, готовых скриптов и модулей
3. Свёрстанная страница по внешнему виду должна соответствовать по максимуму дизайну: расстояния между строками, размеры шрифтов, отступы должны соответствовать всеи параметрам psd макета.
4. CSS стили выносятся в отдельный документ.
5. В HTML коде могут присутствовать только идентификаторы и классы;
6. Логотип веб-сайта является ссылкой на главную страницу;
7. На HTML страницах располагаются комментарии к основным элементам: меню, заголовок, контент, шапка, футер и т.п.
8. Имена классов и идентификаторов должны быть понятными интуитивно (header, menu,content, footer, и т.д.) и соответствовать своему назначению
9. Надписи на кнопках пишутся на одном языке, начинаются с заглавной, и пишутся прописными буквами;
10. В таблицах стилей следует использовать одинаковые единицы измерения абсолютно для любой величины;
11. Кнопки выполняются в стандартном исполнении.
12. HTML и CSS код минимизированы.
13. Заголовки пишутся с помощью специальных тегов <h1>, <h2> и т.д;
14. Атрибуты всех тегов заключают в кавычки.

Этапы вёрстки
Верстка начинается после получения верстальщиком утвержденного дизайн-макета страницы.
Верстальщик анализирует его и разбивает на «этажи» - горизонтальные полосы, которые далее разбиваются на блоки или колонки или делит ее на прямоугольники.
Прямоугольник легко делится на разные прямоугольники любых пропорций.
Далее он делает рекурсивный процесс вёрстки этих отдельных строк, а уже в них столбцов
Страница после вёрстки проверяется на кросс-платформенность следующим образом:
• Отображение страницы в браузерах и на различных ОС,
• Если менять размер шрифта в настройках браузера в разные стороны, будет ли происходить критичное смещение блоков?
• Будет ли критичный сдвиг блоков, при отключении показа изображений в браузере?
• Какое влияние на целостность страницы оказывает разрешение монитора?
Если обнаружены критические исправления, то они вносятся в документ и проверку начинают с самого начала.

Верстка выполняется для шаблонов

Это повторяющиеся кусочки верстки, которые применяются по всему сайту, например – полоса с логотипом. Ограничения в верстке применимы для шрифтов.
У каждой ОС свои гарнитуры и выбор гарнитуры не ограничен, и если не будет заданного набора, браузер использует настройки по умолчанию.

Многообразие форматов

Главный вопрос в верстке – при разной ширине рабочего пространства любого монитора должно быть отображение материала.
Верстка для решения этого вопроса использует такие подходы:
• Фиксированная ширина - независимо от ширины окна браузера, сайт отображается с одинаковой шириной
• «Резиновая» ширина - пропорционально настройкам, полосы растягиваются на ширину всего экрана

Модульность и виды подходов к вёрстке

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

Типовые веб-макеты

Одноколоночный
 Двухколоночный
 Трёхколоночный
Основные инструменты для вёрстки таблицы, фреймы и div.
Табличный подход в настоящее время используется мало и считается устаревшим.

Вёрстка слоями

Слой (от названия тега <laver>) — разработка Netscape, используемая в браузере Netscape Navigator.
Тег показывает или скрывает его содержимое, устанавливает относительно окна браузера положение, накладывает слои друг на друга и включает содержимое блока из файла
Блочная вёрстка
Блочная вёрстка — верстка с применением тега<div>
Блочная верстка реализует полностью концепцию семантической вёрстки.
Вёрстка фреймами
Вёрстка фреймами — верстка с помощью тега<freme>  
Валидная верстка веб-сайта осуществляется при написании HTML и CSS кода, соответствующего стандартам W3C.
 Грамотно и верно построенный код хорошо влияет на поведение поисковых роботов и валидный код показывает, что при программировании нет синтаксических и логических ошибок.
Самый чуткий валидатор – браузер. Как браузер воспримет сайт, так его будет воспринимать и посетитель.

 Разметка страницы
Разметка бывает логическая и презентационная в зависимости от применения средств разметки HTML
 
Типы макетов
 Их 5 основных групп:
• фиксированные (статические, имеющие фиксированную ширину),
• эластичные (em),
• резиновые (проценты),
• адаптивные,
• комбинированные.
Адаптивная вёрстка/тип макета — дизайн, способный адаптироваться под размер экрана
Ее преимущества: Сайт отображается при разных размерах экрана Недостатки: Требуется тщательная проработка нескольких макетов
Табличная вёрстка Преимущества и недостатки Табличная верстка приводит к задержке вывода информации в браузере, и она не соответствует концепции семантичной вёрстки.
Блочная вёрстка Слои - это структурные элементы, размещаемые на веб-странице путём наложения их с точностью до пикселя друг на друга.
В HTML 4 и XHTML под слоем подразумевают элемент веб-страницы, который создается с помощью тега <div>
К тегу применяют стилевое оформление.
При этом соблюдают принципы:
• Содержимое и оформление разделяют
• Активно применяют тег <div>
• Таблицы применяют только, чтобы представить табличные данные.
Изменять параметры слоя динамически позволяют Скрипты.
Это позволяет создавать на странице эффекты, например - выпадающие меню, разворачивающиеся баннеры, игры, плавающие окна и прочее.
Свойства слоя задают и настраивают через стили.
Возможности CSS существенно расширяют оформительские изыски.
А если использовать стилевые таблицы, то можно получить эффективный и компактный код.

 Инструменты верстальщика
 • текстовый редактор или редактор HTML
 • графическая программа
 иногда WYSIWYG редакторы

 В процессе создания веб-страниц используется языки HTML, CSS, JavaScript.
 HTML или HyperText Markup Language – это язык разметки гипертекста.
С его помощью формируется каркас сайта, его структура, и понятно, что без HTML верстка невозможна!
CSS или cascade style sheets – для красивого шаблона и оформления страницы,
JavaScript используют для написания сценариев или для указаний браузеру что и когда делать с веб-старницами.

Структура HTML- кода: • HTML и HTML5 • Динамический HTML • XHTML Mobile Profile и CHTML • XHTML • Кодировки символов • Document Object Model • Редактор HTML • Семейство шрифтов • Семантическая вёрстка • Мнемоники в HTML • Элементы HTML • Цвета HTML • Карта изображений • Формы HTML • HTML5 audio и HTML5 video • Фреймы HTML • Скрипты в HTML • Canvas • Quirks mode • Unicode и HTML • Браузерный движок • W3C и WHATWG • WebGL • Каскадные таблицы стилей • Web Storage • Сравнение • браузеров • языков разметки документов • браузерных движков для • HTML • HTML5 • HTML5 Canvas • HTML5 Media • XHTML (1.1).




Поделиться