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

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

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

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

Компания Softline

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Садовников НиколайNikolay.Sadovnikov@softline.rugruzzilkin@gmail.comtwitter.com/gruzzilkin