3. Верстка сайта — это последовательная сборка текста, картинок, элементов дизайна и прочих элементов веб- страницы по готовому макету, при использовании html и css , для корректного её отображения на устройствах вывода (экран, принтер и т.д.).
4. Цель — работа сайта во всех браузерах без исключения — загрузка страницы меньше чем за 4-5 секунд
5. Виды верстки — фиксированная : для сайтов с фиксированной шириной; — резиновая : для сайтов с неограниченной шириной; — табличная : каркас из таблиц; — table-less : использование таблиц только для вывода данных;
6. Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично.
7. Разные браузеры, разные движки — Gecko (Mozilla Firefox, Camino, SeaMonkey); — Webkit (Safari, Google Chrome); — Presto (Opera); — Trident (MSHTML) (Internet Explorer);
8. Верстка. Начинаем. — создаем структуру документа, выделяем логические блоки; — применяем семантически верные тэги для вывода соответствующих блоков; — оптимизируем изображения для быстроты загрузки; — « раскрашиваем » и позиционируем блоки, согласно дизайна;
10. Оптимизация изображений — правильно используйте основные форматы графических файлов — используйте не длинные, но содержательные имена файлов и тексты описаний картинки — xраните графические файлы одной директории
11. Современный подход — не использовать стилевые атрибуты html — отказаться от использования фреймов — делать как можно меньше http- запросов на сервер — в файле стиля первыми определяем стандартные элементы ( html, body … ) — все величины должны иметь одинаковые единицы измерения , желательно в em и % — использовать «плавающие» шрифты ( font-size: 8/12em ) — использовать position по назначению — использовать прозрачный 1 пиксельный gif — использовать минимум js- фреймворков — осторожно использовать новые CSS 3 - свойства
12. Тестируем — смотрим как выглядит в 4 самых популярных на сегодняшний день браузерах, основанных на 4 разных движках — при исправлении недочетов свести к минимуму использование css-hack — отказаться от условных комментариев (лучше использовать * html, * +html ) — сжимаем css и js для
13. Итог — имеем быстрый «шевелящийся» сайт, странички в котором разбиты на легко редактируемые блоки, которые можно перемещать, изменять, позиционировать, без ущерба для внешнего вида.
