0. Начало работы. Разметка HTML5 и назначение стилей CSS. Создание адаптивного сайта из PSD (2)

Автор Artur Merichev
0. Начало работы.  Разметка HTML5 и назначение стилей CSS. Создание адаптивного сайта из PSD (2)

Здравствуйте меня зовут наводчик.

Михаил сейчас мы приступаем к изучению новой части курса верстки html5 css3 и здесь мы будем использовать элементы также джаваскрипта знания джаваскрипта здесь. Совершенно не обязательно потому, что мы будем брать готовые какие-то блоки кода и просто правильно подключать нужные места нашего html-кода здесь мы будем делать одностраничный сайт лендинг. Пейдж Что такое Landing page.

Если вы — это с этим малознакомым.

Давайте сразу же при с ним — это понятие лендинг. Пейдж то есть от английского сходит значит переводится посадочная страница — это какая-то целевая страница обычно которая содержит информацию о конкретном товаре каком-то одном услуги такие одностраничные сайты обычно делаются чтобы собрать заказы на какой-то товар на услугу либо донести какую-то рекламную информацию о товаре либо услуги и собрать какие-то заказы либо организовать рассылку какой информацией на собранные почтовые ящики полученное в результате рекламной кампании которая будет проводиться на этой целевой страницы которая у нас называется лендинг. Пейдж страница будет посвящена продукции Asus в данном случае здесь мы будем рассматривать Asus zenbook 3 — — это ноутбук как бы нового поколения. На данном этапе и. Как увидеть у нас здесь стоит слайдер кнопка скачать будет и дальше если посмотреть будут отражены какие там характеристики плюсы этого товара которые подчеркивают его как бы превосходство любовника над его какими-то конкурентами здесь вот у нас идёт два блока их характеристиками дальше идёт у нас видео по этому товару видео мы будем ставить диск рассмотрим два варианта либо видео будет подгружаться непосредственно с сайта 4 либо — это будет с. Ютюба какое-то видео которое мы погрузим, а дальше у нас идёт блок заказать сейчас и соответственно в сама форма заказа с картой и внизу. Как увеличить сайт. Наш будет на 100% ширины экрана если в предыдущем сайте мы делали какие-то у нас были на 100% здесь у нас все элементы будут растягивается полную ширину экрана также у нас здесь будет подключаться три небольших джаваскрипт кодом которые нам нужны будут для полного функционирования на странице. Как видеть сверху например наше меню вот здесь она уменьшается в зависимости. Как далеко сверху прокрутка была сделана здесь работает джаваскрипт сворачивается верхний блок и эмблема сусаб является у нас немножко другая картинка без теней также джаваскрипта у нас здесь будет использоваться при проигрывании видео здесь. Я использовал видеть меняется картинка на голубую — это работает джаваскрипт также у нас. Саймон видео нажатии на эту будет проигрываться посредством вскрытия вот этого текста который будет прятаться с помощью джаваскрипт. А вот я нажал на видео вот началось у нас проигрывание соответственно видео будет адаптивная как и весь сам сайт она будет уменьшаться либо увеличиваться я сделаю громкость чуть-чуть потише то есть сайт у нас будет адаптивным видео тоже будет адаптивным как и в предыдущем сайте которой мы делали по сравнению с предыдущим с сайтом которые мы создавали здесь у нас будет 2 новых блока — это блога с видео и блока соответственно заказать. Кто такой формой здесь мы их будем создавать с нуля и соответственно весь этот сайт мы будем делать из предыдущего сайта фото этого которые у вас есть. И если у вас его нету то он будет прилагаться в архиве чтобы могли начать вот этого сайта создавать тот который я вам показал мы здесь создавали интернет-магазин главную страницу здесь у нас использовалась 2 Java скрипта для слайдера сверху и для выравнивания вот здесь по высоте мы выравниваем вот эти четыре блока используя джаваскрипт, что нам понадобится нам понадобится ряд программ. Ну во-первых какой-нибудь браузер современный браузер я буду использовать чаще Google Chrome, но также может подойти и вот ряд других браузер который у вас присутствуют. Но лучше всего использовать пока Chrome также нам нужна программа для редактирования кода HTML и CSS подойдёт тоже на ваш выбор ряд программ можно использовать текст notepad-plus-plus либо удаляй либо ещё другие какие-то сторонние программы я буду использовать dryer также нам понадобится программа фото для редактирования и просмотра макетов psd. Откуда мы будем брать какие-то цвета — это у вас тоже будет в дополнительных материалах архивариусом макет psd если его открыть вот я открыл он так выглядит здесь всё разложено по слоям можно брать отсюда картинки либо я их уже разрезал они у вас будут находиться в соответствующие папки имидж макет psd у нас. Как увидеть и он похож на предыдущий макет который мы использовали здесь я специально этот макет сделал похожим на предыдущие которые делали для Asus of чтобы было легче его адаптировать под нашей задачи которые мы ставим в этом курсе здесь у нас также будут свои цвета здесь я добавил несколько дополнительных цветов — это у нас вот здесь я добавился вот этот серый цвет также зелёный цвет дальше чтобы приступить к обучению нам понадобится сами файлы с которыми мы будем работать значит дополнительных материалов по ссылке material Source и у вас будет архив при распаковке вы получите соответствующее файлы здесь у нас в тексте. Вот идут джаваскрипт коды которые мы будем использовать сам текст который вы можете отсюда скопировать psd макета. Вот сам psd макет сделаем в. Фотошопе asus2 и. Колор цвета которые мы будем использовать также здесь лежит. Папочка сайт и Fight 1 — это сайт 1.

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

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