1.6.Создание макета сайта на Photoshop. Главная страница сайта

Автор Andrei Golubev
1.6.Создание макета сайта на Photoshop. Главная страница сайта

мы продолжаем создавать макет сайта на фотошопе сейчас мы с вами займемся созданием главной странице сайта вообще главная страница сайта любого заключает в себе обычные такой перечень статьи которые есть вообще на сайте.

Да и в принципе всё выглядит как обычно справа или какой-то сайт бар и перечисление статей на сайте сейчас мы можем с вами просто заняться разметкой и я бы предложил вам сделать. То есть ставить вот здесь вот линию на 10% и также вот здесь вот установить 10% — от 100 10% до 90% ещё одном направляющую и таким образом мы с вами уже контент контент сайтов и. Давайте вот здесь вот создадим новую папку назовём её контент носят тобой так и сейчас сделаем такую очень интересную вещь так сказать хитрый маневр при создании макета сайта помните в начале уроков.

Я говорю вам о адаптивных сайтах сейчас он может провернуть такую очень интересную вещь такое приемчик который позволит нам в принципе упростить себе задачу адаптации сайта к определенным расширением экрана сделаем так значит выберем инструмент прямоугольник созданием его.

Ну пусть — это будет примерно. Вот такая вот ширина ширина максимальная до 100% также изменим с вами цвет цвет. Я думаю сделаем такой вот такой серого теньки. Да в принципе. Очень часто ее встречал такой прием на сайтах. Да и сейчас также создадим новый слой в инструмент прямоугольник и уже вот здесь вот внутри намеченный области до обозначаем с вами ещё один прямоугольник и. Задай ему. Цвет белый вот можно также взять и увеличить. Длина первого прямоугольника высоту точняк и в принципе ABS и в принципе вот у нас таким образом отмечается. Вот такая вот область до, что что мы сейчас сделали, что в первую очередь назначили определенный контент то есть всё, что будет писаться до написано будет у него будет ширина этого основного контента 80% он будет белого цвета всё, что будет выходить за рамки то есть ненужная область будет серого цвета при этом ничего по сути не должно быть — это связано с тем, что не забываем. Да мы создавали с вами документ на 1200 пикселей. Представьте себе, что например у меня монитор 1356 пикселей просто получится. Так, что вот — это вот серая область она будет чуть больше чем сейчас на макете. Вот вот и вся соль соль этого мероприятия так скажу не так продолжаем создавать макет работаем над главной странице сайта и. Давайте здесь просто подумай вот. О чём нам необходимо опять же создать некую разметку потому, что у нас будет садиться на сайте сделаем так сделаем ещё сюда добавим. Ну пусть — это будет. Давайте Пусть — это будет 70% метка на 70% общей 20% получается да ширина сайдбара ширину сайдбара дальше сделаем небольшой отступ буквально на несколько процентов. Пусть — это будет. Ну 2% да вот сайдбара и сверху также от шапки сделаем также небольшой на сколько там получается в 12:00 12 12 на 1% до 1%. Странно, что на один на один на один и здесь получается один сейчас ещё отступим с левого края основного этого белого контакта также 2% и принципе вот мы с вами наметили сейчас схематично просто покажу наметили область статьи вот обувь статьи которые у нас отображает и область кстати. Давайте вот здесь вот сразу пока не начали также открою отступим 2% здесь соответственно ещё два и ещё два да то есть немножко уменьшил вот этот прямоугольник на два процент. А вот, а ещё одну создадим свою вот так вот у нас будет sidebar. Да так вот у нас будет sidebar так здесь у нас 100% непрозрачности здесь 100% вот то есть вот так вот мы в принципе с вами изобразили то, что будет происходить в основной части контента сайта сейчас пока я можно не удалять вот — это вот намеченную область. Да пусть она нам пока пригодится потом. Мы удалим и так пост статья у нас будет содержать в семье так скажем заголовок заголовок. И сейчас я вам хочу немножко рассказать о SEO оптимизация сайта. Да немножко вперёд с чем — это связано почему — это делаем сейчас на создание на стадии создания макета сайта. Дело в том, что поисковая система определяет. Тедди Зайди в котором она находится ключевые слова то есть я имею в виду теги H1 H2 H3 и соответственно если мы создаем шрифт до размер шрифта должен соответствовать тегом то есть H1 — это будет. Например у нас 48 пикселей до 2 это. Например у нас будет там 36 пикселей да то есть должен быть меньше при соответственно H3. Это должно быть 24 пикселя и так далее здесь. Здесь мы создавать заголовки в теги H2 + тегов H1 здесь быть не должно сейчас просто пропишем теги H2. Пусть — это будет 24 пикселя на небольшой размер шрифта и не знаю. Давайте напишем здесь какой-нибудь заголовок в какой-нибудь заголовок. Ну давайте для примера просто-напросто возьмём какой-нибудь сайт мой ха-ха-ха и просто посмотрим да, что мы тут можем сделать просто скопируй в заголовок. Чтобы не терять время до на придумывание, что же нам тут блин написать такого чтобы — это всё нам нравилось и всё нам подходила до добавим заголовок сделаем шрифт. Давай посмотрим в колчим, что там нам. Давайте возьмём. Такой цвет шрифта посмотрим как он будет сочетаться такой такой интересный цвет. Давайте попробуем всё-таки вот этот цвет. Да в принципе неплохо смотрится. Давайте его немножко отпустим тут вообще в принципе сейчас по сути неважно. Да как вы будете располагать. Где вы будете располагать название название статьи за как вы будете будете располагать картину всё неважно картинку я имею в виду изображением обязательный элемент также важен для SEO оптимизации сайта обязательные элементы — это присутствие картинки и соответственно присут хэштега tyga.

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

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