Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Нарезка psd, сохранение изображений из psd, создание HTML-шаблона, верстка макета по psd. Одна из интересных тем, это введение в создание темы WordPress или другой CMS. Использование CSS фреймворков для верстки HTML-страницы.
Задания по верстке psd макета и CSS-фреймворкам
- При помощи Emmet создайте каркас разметки для любой страницы в сети. Примечание: например http://hmllab.ru 🙂
- Найдите макет HTML-страницы в формате .psd, убедитесь что макет нарезан, сохраните нужные изображения и сверстайте эту страницу. Примечание: оцените время затраченное на верстку и валидность страницы.
- Разместите сайт в сети, зарегистрировав доменное имя. Примечание: файлы разместить при помощи FTP-клиента.
- Сверстайте html страницы из макета в Photoshop. Примечание: как вариант, можно найти готовый шаблон с файлом .psd и реализовать свою верстку.
- Проверьте html и css на ввалидность
- Загрузите сверстанные страницы на сервер, проверьте скорость загрузки страниц.
- При необходимости внесите микроразметку.
- Проверьте (при необходимости) работу страниц в старых браузерах
- Укажите страницу в разделе портфолио своего резюме
- Сверстайте ещё один сайт, повторив все предыдущие пункты. Примечание: оцените время вёрстки — оно понадобиться для отслеживания динамики роста.
- Выполните работу на заказ.
- Используя классы Bootstrap-сетки, создайте трёхколоночную страницу с шапкой и подвалом.
- Создайте разметку сайт с использованием CSS-препроцесора (LESS или SSASS)
- * Изучите шаблон CMS WordPress. Поменяйтн разметку одной из тем. Примечание: будьте аккуратны, при работе может понадобиться знание PHP. Не трогайте неизвестные фрагменты шаблона или изучите основы PHP.
- Используя класс Foundation, создайте трёхколоночный макет сайта.
- * Найдите ещё четыре CSS-фреймворка и выполните на них предыдущее задание по верстке HTML-страниц
Все задания по HTML