Создание адаптивного сайта из PSD (1). Верстка. Курс. HTML5+CSS3+jQuery.

Автор Liza Merichenko
Создание адаптивного сайта из PSD (1). Верстка. Курс. HTML5+CSS3+jQuery.

Здравствуйте друзья.

Меня зовут. Михаил наводчик в этом уроке водном я просто покажу, что мы делать следующих уроках какой мы сайт научимся создавать используя знания HTML CSS и JavaScript перед вами страничка которой мы создадим страничка в магазин, а здесь у нас будет стоять ряд товаров меню корзину товаров слайдер будет стоять на несколько картинок также будет стоять Google карта форма обратной связи и ряд других блоков изначально мы будем исходить из вот этого документа он у меня открыт в программе Photoshop я нарисовал этот макет здесь у нас как вы понимаете. Просто картинка 2Д картинка разложенное по слоям.

Наша задача разрезать этот макет посмотреть.

Какие есть цвета какой шрифт используется ли перевести используя знания HTML CSS. А вот такой макет в котором у нас в очередь будет адаптивным то есть например при уменьшении экрана видим, что у нас картинки мешаются введите три товара которые стоят по горизонтали перестраиваются блок по вертикали то есть — это признак адаптивности изменяемости сайта в зависимости от размеров экрана сейчас — это одно из самых важных требований к сайту на чего состоит плохо индексируется поисковыми системами и Google с другими и он не сверху не в топе мы тестировать будем на разных мобильных устройствах можно посмотреть пример ряд список телефонов которых можно. Проследить как — это будет выглядеть то есть нам надо создать с помощью SS ряд определенных команд — это называется медиа-запросы которые позволяют чувствовать браузеру какой размер экрана сейчас выбран и какие стили какой момент нужно подключить чтобы наши блоки перестраивались и картинки увеличивались либо уменьшались ширины экрана на котором вы просматриваете данную страничку изначально вас будет. Вот ряд. Вот таких вот файлов под видео будет ссылка на. Этот документ надо будет разархивировать сейчас я открыл вот этот вот Asus psd он у меня открыт в. Фотошопе вы на него будем равняться и смотреть создавать уже html-код, а также есть небольшие творительный требования чтоб — это вы реализовали конечно. Вам нужно ряд программы которые у меня установлены также конечно. Вам надо быть в курсе, что такое HTML у меня кузов которое предполагается чтобы уже его прошли в начале — это создание сайта почта mail дальше идёт курс создание сайтов для новичков. А вот дальше то, что мы сейчас и смотрим — это создание адаптивного сайта здесь мы как я показал создадим вот такой вот сайт дальше продолжение здесь идёт жёстко создание адаптивного сайта 2 здесь уже создай более продвинутые. Более сложный сайт вот я его открыл здесь у нас он будет полностью на ширину вашего браузера то есть будет полностью одеваться здесь я изменил ряд параметров здесь введены анимационные дополнительные вещи которые делают сайт более интересным и мини у нас будет всё равно сверху. Здесь также будет представлена видео здесь будет два варианта видео с. Ютюба и видео которое будет находиться на сайте также в отличие от предыдущего сайта картой здесь будет разворачиваться на весь экран нашего браузера, а материал излагается по порядку постепенно то есть сложности у вас никакой не составит из какие-то вопросы вы можете мне задать вопросы. ВКонтакте либо непосредственно под каждым видео в комментариях в следующем уроке. Я более подробно обсужу какие нам программы и какие документы нужны чтобы мы — это вместе с вами реализовали чтобы у вас не было каких-то трудностей. А вот такая у нас в целом программа на ближайшее время так, что вы переходите к следующему уроку где мы уже обсудим более подробно, что нам нужно чтобы реализовать эти планы чтобы сверстать этот документ с помощью HTML CSS. И джаваскрипта спасибо за внимание. Жду вас в следующем уроке.

0 комментариев
0

Читайте также