Верстка крупных порталов
DESCRIPTION
Презентация о том, что собой представляет вёрстка крупных порталов и как эти самые порталы мы верстаем в SoftlineTRANSCRIPT
![Page 1: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/1.jpg)
Конференция для PHP-разработчиков в Оренбурге
Конференция для PHP-разработчиков в Оренбурге
Верстка крупных порталов
Садовников НиколайСтарший HTML-верстальщик
Компания Softline
![Page 2: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/2.jpg)
Конференция для PHP-разработчиков в Оренбурге
Что такое верстка web-страницВерстка — это совокупность всех клиентских технологий, необходимых для создания web-страницы.
![Page 3: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/3.jpg)
Конференция для PHP-разработчиков в Оренбурге
Особенности верстки крупных порталов
• Масштабы• Сложность• Сроки• CMS
![Page 4: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/4.jpg)
Конференция для PHP-разработчиков в Оренбурге
Требования к верстке крупных порталов
• Простота и лаконичность кода• Кроссбраузерность, валидность• Гибкость, масштабируемость• Оптимизация кода и сокращение
количества подключаемых файлов с целью ускорения работы сайта
![Page 5: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/5.jpg)
Конференция для PHP-разработчиков в Оренбурге
Как мы верстаем
Проектирование
Нарезка изображений
Написание HTML кода
Организация и структура файлов CSS
![Page 6: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/6.jpg)
Конференция для PHP-разработчиков в Оренбурге
Этап проектирования
• Чтение ФТ к проекту• Изучение дизайна • Продумывание структуры шаблонов
страниц, выделение отдельных компонентов и элементов дизайна
• Составление прототипа (если отсутствует дизайн)
![Page 7: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/7.jpg)
Конференция для PHP-разработчиков в Оренбурге
Нарезка изображений
• Согласование форматов изображений, используемых в верстке
• Создание спрайтов• Оптимизация графики
![Page 8: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/8.jpg)
Конференция для PHP-разработчиков в Оренбурге
• Семантическая разметка, иногда с элементами презентационной
• Использование классов вместо id• Верстка неискажающими блоками
Написание HTML кода
![Page 9: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/9.jpg)
Конференция для PHP-разработчиков в Оренбурге
• Разбиение стилей по модулям и отдельным компонентам– reset.css– styles.css– corners.css– icons.css– components.css– template_styles.css– template_styles_ie.css
• Автоматизация процесса сборки и сжатия файлов CSS при помощи Ant
Организация и структура файлов CSS
![Page 10: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/10.jpg)
Конференция для PHP-разработчиков в Оренбурге
Пример верстки скругленных уголков
![Page 11: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/11.jpg)
Конференция для PHP-разработчиков в Оренбурге
Пример верстки скругленных уголков
![Page 12: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/12.jpg)
Конференция для PHP-разработчиков в Оренбурге
Пример верстки скругленных уголков
![Page 13: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/13.jpg)
Конференция для PHP-разработчиков в Оренбурге
Пример верстки скругленных уголков
![Page 14: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/14.jpg)
Конференция для PHP-разработчиков в Оренбурге
Пример верстки скругленных уголков
![Page 15: Верстка крупных порталов](https://reader036.vdocuments.mx/reader036/viewer/2022062419/557eca93d8b42ae27f8b49c3/html5/thumbnails/15.jpg)
Конференция для PHP-разработчиков в Оренбурге
Вопросы и контакты
Садовников Николай[email protected]@gmail.comtwitter.com/gruzzilkin