Давайте подготовим окружение для нового проекта:
Для начала, скачаем стартовый шаблон
Стартовый шаблон GitHub — OptimizedHTML2.0
Далее распакуем скаченный архив optimizedhtml-start-template-master.zip
в папку нового проекта.
Затем запустим Консоль/Termimal из папки нашего проекта.
В нашем случае, это папка по адресу:
WEBDESIGN/DJday_verstka_2017/
optimizedhtml-start-template-master
Установим необходимое окружение и плагины командой:
Успешная установка!
И создалась папка : node_modules
Затем запустим проект, командой gulp
И наш стартовый проект (шаблон) - запустился!
Готово! Окружение Настроено!
Далее открываем PSD-макет сайта.
И нарежем всю необходимую графику для сайта.
Далее мелкую графику:
В шапке больше графики нет:
Текст, прозрачности и бордеры - будем делать с помощью CSS.
Далее:
Далее разберемся с шапкой:
Откроем браузер:
И для начала - изменим <Title>
- заголовок нашей страницы ( сайта )
Video 15:23 - Начались расхождения.
Шапка сайта:
Пропишим <header>
В SASS - пропишим:
Эту запись получим в main.min.css
Но пока ничего не увидим:
Потому что размеры header
- не указаны:
Поэтому посмотрим размеры нашей картинки top_bg.jpg
Пока Стоп! Здесь нихера не получается!
Далее
Этот пример будем использовать
Это CSS Grid
- ее можно использовать без установки дополнительных модулей.
Это встроенная возможность CSS
Это уже верстка при помощи СЕТКИ.
Что можно сделать такой версткой:
И не сложный подвал:
Давайте попробуем не много иначе прописать в sass
- header и кое чего остального:
В index.html пишем:
Готовая строка:
==================================================
Отступление:
Как быстро верстать сайты. Некоторые приемы.
Наиболее универсальными элементами являются элементы, например КНОПКИ - которые описаны как display: blok
Раньше было понятие - нарезка картинок для сайта.
Теперь принято пользоваться термином - Экспорт данных из макета
Экспорт - заключается не только в экспорте изображений - но и определений параметров для CSS/
Для пользователей Photoshop:
Можно использовать сторонние плагины для определения CSS-свойств:
Однако - НАШ ГЛАЗОМЕР - может позволить отказаться от таких плагинов.
Используя плагины ( копируя из них код ) - МОЖНО ВЕРСТАТЬ БЫСТРЕЙ - но будем терять в качестве и возможностях КАСТОМИЗАЦИИ.
Кроме того плагины - не идеальны - и часто путают padding с margin
и так же путает резиновые значения с фиксированными!
Поэтому советуют - развивать ГЛАЗОМЕР, и хранить параметры в переменных:
Для быстрого экспорта картинок - достаточно пользоваться новым Photoshop или Adobe XD
для Photoshop:
Или правой кнопкой мыши на слое.
Для Adobe XD, так же:
Плюс - есть возможность экспорта иконок в формат SVG - сразу!
ИКОНКИ:
1)
Если иконки сложные или они должны меняться через админку сайта, то лучше их экспортировать как PNG
и подключайте их как обычные картинки.
2)
Если это фиксированные ИКОНКИ - которые будут неизменными на сайте ( icon - телефона, почты, карты )
- можно объединить их в спрайт
и использовать через CSS, задавая одной картинке ( спрайту ) - разные координаты background: position (синтаксис не точный).
Причем, эту операцию - можно автоматизировать с помощью gulp-плагина css-sprite
Или можно вообще сделать самому разбить заданное поле на квадраты, заданной высоты и ширины.
Или можно применять icon-паки.
3)
Если иконки ОДНОЦВЕТНЫЕ - МОЖНО ТАКЖЕ ИСПОЛЬЗОВАТЬ ШРИФТОВОЙ icon-pack
То подключим тогда его
Или же можно создать свой шрифтовой icon-pack
Тут урок по созданию шрифтового icon-pack
Создание шрифтового Icon Pack с использованием сервиса Fontello
Когда у нас все УЖЕ подготовлено:
1 - Экспортировали картинки
2 - Сделали шрифтовой icon-pack
3 - Подготовили все ИКОНКИ
4 - Настроили проект
МОЖНО ПРИСТУПАТЬ К ВЕРСТКЕ!
Не забываем про скорость набора кода, и вспоминаем:
Наша цель - Верстать быстро и качественно!
Или можно использовать любой другой HTML-препроцессор.
Используйте GIT Hub Gist - для сохранения Ваших наработок - кусков кода и целых секций.
Всего того, что может оперативно пригодиться.
Можно давать осмысленные названия нашим Gist-ам что бы легко можно было их найти по названию.
Автоматизируем:
1 - Создание рабочего web-сервера
2 - Авто-обновление страницы при сохранении
3 - Использование пре-процессоров
4 - Автоматизация оптимизации картинок (рутину)
5 - Сжатие и конкатенация CSS и JS и HTML при необходимости
6 - и другие задачи.
Для gulp - разработано 1000 - чи полезных плагинов:
от работы с файловой системы до создания спрайтов, до генерации шрифтовых иконок и МНОГОЕ ДРУГОЕ.
GULP - это целый комбайн! Нейросеть - задач, работающих, так как вы их настроили. ПРИЧЕМ все будет работать АВТОМАТИЧЕСКИ - экономя ваше время.
Любимая всеми верстальщиками библиотека : JQuery
Поскольку мы имеем дело ни сколько с глубоким front-endom, а скорее с WEB-дизайном, то чаще в процессе верстки, нам нужно решать следующие задачи:
1 - Анимация разных блоков
2 - Насройка сортировок в таблицах
3 - Создание TAB-ов, Аккордионов
4 - Подключение библиотек
5 - определение например full-back, например для SVG-файлов
6 - Определение параметров документов для не сложных операций
7 - И прочие мелкие скриптовые работы
Для Библиотеки JQuery - существует огромное количество плагинов.
ЧТО БЫ НЕ ТУПИТЬ ПРИ РАЗРАБОТКЕ ПРОЕКТА - Лучше заранее изучить практическое использование плагинов библиотеки JQuery!
Такие типовые задачи, как:
-Карусели
-Галлереи
-Pop-UP-окна
-Валидация форм
Где проходит грань ВЕРСТКИ и начинается FRONT-END?
Если стоит задача - разработать сложный/интерактивный интерфейс - для какого-нибудь сервиса, или какого-нибудь приложения - где нужна тесная работа с базой данных. - ЭТО FRONT-END!
==================================================
а в main.sass - пропишем:
и наконец то у нас появится картинка фоном: