Upload
magecloud
View
583
Download
0
Embed Size (px)
Citation preview
Вячеслав Власов, Quart-Soft, 2010 г.
Что же такое верстка сайта?
Верстка сайта — это
последовательная сборка текста, картинок, элементов дизайна и прочих элементов веб-страницы по готовому макету, при использовании html и css, для корректного её отображения на устройствах вывода (экран, принтер и т.д.).
Цель
— работа сайта во всех браузерах без исключения
— загрузка страницы меньше чем за
4-5 секунд
Виды верстки
— фиксированная: для сайтов с фиксированной шириной;
— резиновая: для сайтов с неограниченной шириной;
— табличная: каркас из таблиц; — table-less: использование таблиц только
для вывода данных;
Кросс-браузерность
— свойство сайта отображаться и работать во всех популярных браузерах идентично.
Разные браузеры,разные движки
— Gecko (Mozilla Firefox, Camino, SeaMonkey);
— Webkit (Safari, Google Chrome);
— Presto (Opera);
— Trident (MSHTML) (Internet Explorer);
Верстка. Начинаем.
— создаем структуру документа, выделяем логические блоки;— применяем семантически верные тэги для вывода соответствующих
блоков;— оптимизируем изображения для быстроты загрузки;— «раскрашиваем» и позиционируем блоки, согласно дизайна;
Структура документа.
Оптимизация изображений
— правильно используйте основные форматы графических файлов
— используйте не длинные, но содержательные имена файлов и тексты описаний картинки
— xраните графические файлы одной директории
Современный подход— не использовать стилевые атрибуты html— отказаться от использования фреймов— делать как можно меньше http-запросов на сервер— в файле стиля первыми определяем стандартные
элементы (html, body …)
— все величины должны иметь одинаковые единицы измерения, желательно в em и %
— использовать «плавающие» шрифты (font-size: 8/12em)
— использовать position по назначению— использовать прозрачный 1 пиксельный gif— использовать минимум js-фреймворков— осторожно использовать новые CSS3-свойства
Тестируем— смотрим как выглядит в 4 самых популярных на
сегодняшний день браузерах, основанных на 4 разных движках
— при исправлении недочетов свести к минимуму использование css-hack
— отказаться от условных комментариев (лучше использовать * html, *+html)
— сжимаем css и js для
Итог— имеем быстрый «шевелящийся» сайт,
странички в котором разбиты на легко редактируемые блоки, которые можно перемещать, изменять, позиционировать, без ущерба для внешнего вида.