1. Верстка адаптивного сайта по PSD макету. Создание сайта из PSD файла. Адаптивный сайт.

Автор Andrei Golubev
1. Верстка адаптивного сайта по PSD макету. Создание сайта из PSD файла. Адаптивный сайт.

приступаем непосредственно к верстке нашего макета Market у нас находятся в формате psd.

То есть он сделан в. Фотошопе поэтому понадобится программа Photoshop. Ну если по каким-то причинам у вас нет этой программы то я уже вам даю вырезанное готовые картинки для этого и Photoshop.

Вам и не понадобится.

Ну если брать сам процесс по Photoshop нас желателен дальше редактировать я буду в программе дрювер здесь не столько важно. Какая версия любая подойдёт можно если вас не устраивает верстать в других программах например саблайм текст либо notepad-plus-plus установить они бесплатные скачать с интернета. Это же их можно использовать также нам понадобится конечно вряд браузеров, но у меня вот сверху установлено несколько разных браузеров для начала. Если у вас нету какой-нибудь любой один современный браузер который не старый. А ну современные вот у меня здесь на примере старая версия опера 12.14 и современная версия опера. То есть я буду проверять конечно современная версия вообще макет в конечном счете надо будет тестировать в разных браузерах чтобы смотреть исправлять какие-то ошибки вдруг мы что-то про смотрим и разные браузеры имеет по умолчанию разные настройки давайте договоримся куда мы — это положим вот я захожу в мой компьютер на диск D M. Ну я положу на системный диск ненаци она DF. Но если. Вы ходите на курс — это диск D и папка курсы надо найти здесь папку курс. И здесь меня я пока у меня вот. Папочка верстка и здесь я уже вот сделал для этих заданий тоже сделайте папочку HTML макет у нас будет принципе о продукции Asus компьютерной продукции то сделайте. Точно такую же папку и желательно в том же месте как я вот указал весь путь и вот сюда нам надо скопировать материалы предлагаются к этому макету. Там не только картинки там есть и другие файлы значит. Откройте страничку с дополнительными материалами и там будет ссылочка там у вас ссылочка вот так вот называется материал фосфор. Святой источник источник материалов и вот такая вот. Папочка должна появиться в этой папке и есть ли разархивировать то здесь. Папочка где непосредственно файлы нашего сайта которая мы будем делать здесь Index HTML в котором мы будем писать код HTML таблица стилей style.css. Папочка gfs2 файлом для Java здесь джейквери то есть файлы которые нам нужны будут для программирования бабочка имидж с картинками которые я уже разрезал из макета psd. Ну как разрезать я — это покажу из макета psd если открыть его. Фотошопе и здесь лежат вот вспомогательные файлы которые я вам процессе объясню, что — это такое здесь же лежит видите файл psd Asus и Color psd сейчас нам надо открыть два вот этих файлов psd Asus эколор. Я открываю программу Photoshop и здесь у меня русская Photoshop. Здесь тоже не принципиально. Какая версия Photoshop меняться она вполне работает можно выше и ниже версию использовать и вот файл открыть ищем соответствующие документы куда мы — это всё убирали в папку верстка и вот через контрл я выделяют два файла либо можете по очереди их живём соответственно открыть они у нас загружаются и из окон которые вот у меня справа нам понадобится одно окно всего лишь — это слои то есть вот — это окно все остальные окна вот эти нам мешают и если они у вас открыты. Это я бы их по закрывал то есть правой клавишей, но название вот здесь вот и закрыться ответственность дети тоже — это самое. Закройте лишние окна вот чтобы у нас осталось только вот окно со слоями вот здесь у нас открылись цвета которые мы будем использовать в макете также давайте устроим фоликур нас лежит ковер txt и открой в блокноте вот здесь у меня написано. Для чего. Какой цвет мы будем использовать то есть цвета 33 у нас идут для заглавия 8282 средний цвет основной цвет активной ссылки рамки ссылки для серого текста иконки у нас идут в этом цвете светлые цвета рамочки фотографии из вилок некоторых у нас будут вот такие синеватые вот эти цвета здесь наглядно. Не представлены если открыть сама кета соответственно вот он здесь у меня открыто направляющие эти вот давайте мы вскроем просмотр показать его снять галочку направляющую. То есть я снимаю и тоже можно сделать с горячими клавишами Control и же русской если нажать. Тони вот я нажимаю не прячутся и показывается дальше. Ну слои давай-ка вот эти вот справа мы свернем здесь я на кнопочку нажму и не сворачиваются и увеличим макет до 60 где-то процентов то есть вот здесь есть соответственно можно вот если. Фотошопом не дружите щёлкать она увеличивает вылезти вот здесь снизу где-то вот до 65 плюс-минус процентов и вот мы получили наш макет который мы будем делать то есть есть картинка. Наша задача сверстать в HTML коде с помощью HTML CSS вот внешне такой вот конструкцию отсюда набрать текст который написан фотографии непосредственно картинки размеры цвет шрифта. Ну и конечно композицию как, что находится здесь если посмотреть открыть вот слои наши вот они у нас вот эти треугольники здесь у нас видите 4 логических блоков хедер. Если вы будете жарить на глазок то вы увидите. Что подразумевается под кедром хедер — это наша шапочка с меню с логотипом с телефоном и с корзиной дальше у нас идёт непосредственно галерея то есть слайдер здесь будет у нас проигрываться то есть вот можно посмотреть здесь находится непосредственно файлы и картинки по галерее. Они лежат у нас в папке. То есть если, что здесь есть вот она пусть они будут проигрываться с помощью джаваскрипта последовательным дальше у нас идёт непосредственно Body то есть тело нашего документа здесь этот товар. И у нас и продукция компании.

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

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