Давайте подготовим окружение для нового проекта:

 

Для начала, скачаем стартовый шаблон

 

 

Стартовый шаблон 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     - пропишем:

 

 

и наконец то у нас появится картинка фоном: