13
Вячеслав Власов, Quart-Soft, 2010 г.

Оживление сайтов

Embed Size (px)

Citation preview

Page 1: Оживление сайтов

Вячеслав Власов, Quart-Soft, 2010 г.

Page 2: Оживление сайтов

Что же такое верстка сайта?

Page 3: Оживление сайтов

Верстка сайта — это

последовательная сборка текста, картинок, элементов дизайна и прочих элементов веб-страницы по готовому макету, при использовании html и css, для корректного её отображения на устройствах вывода (экран, принтер и т.д.).

Page 4: Оживление сайтов

Цель

— работа сайта во всех браузерах без исключения

— загрузка страницы меньше чем за

4-5 секунд

Page 5: Оживление сайтов

Виды верстки

— фиксированная: для сайтов с фиксированной шириной;

— резиновая: для сайтов с неограниченной шириной;

— табличная: каркас из таблиц; — table-less: использование таблиц только

для вывода данных;

Page 6: Оживление сайтов

Кросс-браузерность

— свойство сайта отображаться и работать во всех популярных браузерах идентично.

Page 7: Оживление сайтов

Разные браузеры,разные движки

— Gecko (Mozilla Firefox, Camino, SeaMonkey);

— Webkit (Safari, Google Chrome);

— Presto (Opera);

— Trident (MSHTML) (Internet Explorer);

Page 8: Оживление сайтов

Верстка. Начинаем.

— создаем структуру документа, выделяем логические блоки;— применяем семантически верные тэги для вывода соответствующих

блоков;— оптимизируем изображения для быстроты загрузки;— «раскрашиваем» и позиционируем блоки, согласно дизайна;

Page 9: Оживление сайтов

Структура документа.

Page 10: Оживление сайтов

Оптимизация изображений

— правильно используйте основные форматы графических файлов

— используйте не длинные, но содержательные имена файлов и тексты описаний картинки

— xраните графические файлы одной директории

Page 11: Оживление сайтов

Современный подход— не использовать стилевые атрибуты html— отказаться от использования фреймов— делать как можно меньше http-запросов на сервер— в файле стиля первыми определяем стандартные

элементы (html, body …)

— все величины должны иметь одинаковые единицы измерения, желательно в em и %

— использовать «плавающие» шрифты (font-size: 8/12em)

— использовать position по назначению— использовать прозрачный 1 пиксельный gif— использовать минимум js-фреймворков— осторожно использовать новые CSS3-свойства

Page 12: Оживление сайтов

Тестируем— смотрим как выглядит в 4 самых популярных на

сегодняшний день браузерах, основанных на 4 разных движках

— при исправлении недочетов свести к минимуму использование css-hack

— отказаться от условных комментариев (лучше использовать * html, *+html)

— сжимаем css и js для

Page 13: Оживление сайтов

Итог— имеем быстрый «шевелящийся» сайт,

странички в котором разбиты на легко редактируемые блоки, которые можно перемещать, изменять, позиционировать, без ущерба для внешнего вида.