Верстка крупных порталов

Конференция для PHP-разработчиков в Оренбурге


Верстка крупных порталов

Садовников НиколайСтарший HTML-верстальщик

Компания Softline


Что такое верстка web-страницВерстка — это совокупность всех клиентских технологий, необходимых для создания web-страницы.


Особенности верстки крупных порталов

• Масштабы• Сложность• Сроки• CMS


Требования к верстке крупных порталов

• Простота и лаконичность кода• Кроссбраузерность, валидность• Гибкость, масштабируемость• Оптимизация кода и сокращение

количества подключаемых файлов с целью ускорения работы сайта


Как мы верстаем

Проектирование

Нарезка изображений

Написание HTML кода

Организация и структура файлов CSS


Этап проектирования

• Чтение ФТ к проекту• Изучение дизайна • Продумывание структуры шаблонов

страниц, выделение отдельных компонентов и элементов дизайна

• Составление прототипа (если отсутствует дизайн)


Нарезка изображений

• Согласование форматов изображений, используемых в верстке

• Создание спрайтов• Оптимизация графики


• Семантическая разметка, иногда с элементами презентационной

• Использование классов вместо id• Верстка неискажающими блоками

Написание HTML кода


• Разбиение стилей по модулям и отдельным компонентам– reset.css– styles.css– corners.css– icons.css– components.css– template_styles.css– template_styles_ie.css

• Автоматизация процесса сборки и сжатия файлов CSS при помощи Ant

Организация и структура файлов CSS


Пример верстки скругленных уголков


Вопросы и контакты

Садовников Николай[email protected]@gmail.comtwitter.com/gruzzilkin

mailto:[email protected]

mailto:[email protected]

Верстка крупных порталов

Design