Содержание

Верстка сайта с нуля. Меню навигации. Часть 1.

Начиная с этого урока, мы будем учиться верстке сайта с нуля в популярном flat стиле. Эта тема очень объемная и мы посвятим ей не один урок. Что означает это на практике?

Представьте себе, что Вы на бирже фриланса получили заказ на верстку одностраничного сайта. Заказчик передал Вам макет в виде файла .psd и попросил сверстать HTML страницу. В работу верстальщика входит еще и нарезка макета на картинки, но мы опустим этот этап, поскольку это вопрос умения пользоваться фотошопом. На данную тему Вы можете самостоятельно поискать обучающие уроки по фотошопу.

Будем исходить из того, что заказчик оказался добрым человеком и предоставил нам вместе с макетом и заранее порезанные картинки. Для создания HTML страницы, нам потребуется: .psd макет, папка с картинками, Photoshop, Notepad++ и браузер.

Мы говорим с вами про макет, но пока это только картинка, из которой нам предстоит сделать полноценную HTML

страницу.

Обратите внимание, что наш макет представляет из себя классический пример flat дизайна. Flat дизайн – это значит «плоский», здесь вы не увидите объемных теней, градиентов и других «наворотов».

Открываем макет в фотошопе и берем оттуда всю нужную информацию – цвет, шрифт, размеры и начинаем писать код, первой у нас идет шапка сайта, состоящая из логотипа и меню навигации. Разумеется, что наш сайт будет адаптивным под любые устройства и разрешения экрана, поэтому все размеры указываем в % и em.

Создаем HTML страницу и делаем разметку нашей шапки. Содержимое шапки пишем внутри парного тега header.

<header>
<div>
 <div>
 <div>
   <a href="#"><img src="logo.png" alt=""/></a>
 </div>
 <div>
  <ul>
   <li><a href="#">Главная</a></li>
   <li><a href="#">Портфолио</a></li>
   <li><a href="#">Обо мне</a></li>
   <li><a href="#">Контакт</a></li>
  </ul>
 </div>
 </div>
 </div>
</header>

Без оформления CSS стилями выглядит шапка совсем не так, как надо.

В файле style.css, пропишим селекторам соответствующие свойства, чтобы шапка выглядела согласно макету.

Разберем основные моменты. Логотип и меню навигации должны быть в одной строке. Поэтому в блоке div с логотипом задаем обтекание — float: left; Навигационное меню встанет справа от логотипа. Пункты меню должны быть в одной строке — display:inline-block; Отменить обтекание можно вставкой в код пустого дива — <div></div>, в стилях соответственно записываем так — .clear{clear:both;}

Код шапки сайта в файле style.css:

body {
  font-family: 'Lato', Verdana;
  font-size: 100%;
  background: #fff;
}
.wrap
{
  margin: 0 auto;
  width: 70%; /* отступы относительно окна браузера */
}
.header{
  padding: 1.3em 0em; /* поля вокруг текста */
}
.logo{
  float: left; /* обтекание логотипа */
}
.logo a {
  display: block; /* переопределение в блочный */
}
. nav {
  float: right; /* обтекание логотипа */
  margin-top: 0.82em;
}
.nav > ul > li {
  display:inline-block; /* переопределение в строчно-блочный */
}
.nav > ul > li.active a{
  background: #d0a5a5;
  color: #ffffff;
}
.nav > ul > li > a {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 1.1em;
  text-transform: uppercase;
  padding: 0.5em 1em;
  color: #444;
  -webkit-transition: 0.9s; /* плавный переход */
  -moz-transition: 0.9s;
  -o-transition: 0.9s;
  transition: 0.9s;
}
.nav > ul > li > a:hover {
  color: #fff;
  background: #d0a5a5;
}

Код HTML разметки шапки сайта:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900'
rel='stylesheet' type='text/css'>
<link href="style.
css" rel="stylesheet" type="text/css" media="all" />
<title>Портфолио мопса "Валли"</title>
</head>
<body>
<header>
  <div>
 <div>
 <div>
  <a href=""><img src="logo.png" alt=""/></a>
 </div>
 <div>
  <ul>
   <li><a href="#">Главная</a></li>
   <li><a href="#">Портфолио</a></li>
   <li><a href="#">Обо мне</a></li>
   <li><a href="#">Контакт</a></li>
  </ul>
 </div>
 <div></div> /* отмена обтекания */
 </div>
 </div>
</header>
</body>
</html>

В процессе верстки сайта с нуля мы получаем готовую шапку сайта.

Результат работы можно посмотреть на jsfiddle

Продолжение следует..

  • Создано 12.10.2017 12:50:40
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.

ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Верстка сайта для новичков

Какие только сайты и проекты не встречаются в поисковой выдаче: информационные ресурсы, интернет-магазины, промо страницы, лендинги. Но если вы хоть раз задумывались о веб-разработке, то наверняка знаете: для создания сайта нужны навыки и знания нескольких специалистов.

  • Дизайнер тут первый. Он отрисовывает стилистику, картинку и определяет, как будет выглядеть будущий сайт.   
  • Второй HTML-кодер, он же верстальщик. Он верстает эту картинку с помощью кода, придавая ей вид настоящей веб-страницы.
  • Дальше идет программист, он оживляет страницу, подключает систему управления контентом и приводит сайт к тому виду, который пользователь видит на экране. 

В современном контексте веб-разработки принято использовать два термина: 

  • Back-end – это работа с функционалом веб-ресурса.
  • Front-end – его внешнее отображение. 

Верстка сайта с нуля относится ко второму виду разработки. 

Что такое верстка сайта HTML

Как мы рассказывали выше, верстальщик получает от дизайнера картинку макет будущего сайта. Как правило, это файл в формате PSD, где каждый элемент содержится в отдельном слое. Такой формат делается в Figma или Photoshop.

JPG и GIF форматы для верстальщика не подходят, так как с упрощенными непослойными изображениями очень трудно работать. Их можно поставить на сайт, но трудно адаптировать под различные размеры экрана. 

HTML-код

Как сделать верстку сайта

  • HTML специалист “разрезает” шаблон для верстки сайта, полученный от дизайнера, на отдельные элементы.
  • Окружает каждый элемент HTML-кодом.
  • Выносит стили, подобные типы отображения элементов, в отдельные файлы.
  • Получает из файла PSD веб-страницу HTML.

Что такое HTML

Это язык разметки гипертекста. Без него невозможно представить ни один сайт, ведь браузер “понимает” только HTML-коды. Каждый оператор языка называется тегом.

Самые популярные HTML-теги, которые должны присутствовать на любом сайте

<html> – указывает на тип страницы.

<head> – ее заголовки.

<body> – показывает начало и конец контентной части страницы.

<title> – заголовок страницы, очень важный тег для SEO.

<description> – описание страницы, для SEO.

<h2>, <h3>…<h6> – заголовки в теле текста.

<img> – изображение.

<a> – ссылка.

<div> – блок.

Виды верстки

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

В настоящее время кодеры используют блочную верстку сайта на DIV. Она позволяет получить более гибкую HTML-страницу, которая может подстраиваться под любое разрешение экрана.

Блочная и табличная верстки

Что такое адаптивная верстка

Для того чтобы с сайтом было удобно работать элементы страниц не должны пропадать, наезжать друг на друга или отображаться некорректно. Адаптивная верстка сайта “подстраивает” страницу под все разрешения экранов и виды устройств. 

Например, лендинг с адаптивной версткой будет одинаково корректно отображаться как на большом десктопном экране, так на планшете и на смартфоне пользователя, это называется мобильная верстка.

В этом же контексте можно сказать о кроссбраузерности. Посетитель сайта может предпочесть один из браузеров – Google, Яндекс Браузер, FireFox, Internet Explorer и т.д. И сайты могут отображаться некорректно, так как браузеры часто по-разному видят использованные при верстке теги. Для того, чтобы этого не происходило, верстальщик проверяет отображение страницы в разных браузерах.

Валидность – что это за слово?

Валидная верстка. В ней нет ни одной ошибки, она соответствует стандарту W3C, и сайт корректно отображается на любых устройствах.

Правила валидной верстки сайта для начинающих

  • Минимальный код, никаких лишних тегов.
  • Безошибочность. Нет незакрытых тегов, лишних символов и т.п.
  • Кроссбраузерность и адаптивность.
  • Все стили вынесены в отдельный файл CSS.
  • Готовая веб-страница не отличается от файла, представленного дизайнером.
  • Минимум изображений. Все, что можно необходимо прописывать текстом.

Какими программами для верстки пользуется HTML-кодер

  • Графический редактор Photoshop – для того, чтобы “разрезать” PSD-макет.
  • Простой редактор кода Notepad++.
  • Специальные редакторы DreamWeaver, Atom, Brackets, Sublime Text, PHPStorm.
  • Цветовая пипетка ColorZilla когда необходимо определить цветовой код элемента.
  • Валидаторы для проверки верстки: validator.w3.org, jigsaw.w3.org/css-validator.
  • Сервисы для анализа адаптивности – Window Raizer, расширения для браузеров Perfect Pixel.
  • Проверка страницы на соответствие исходному макету Welldone code.

Что такое CSS 

Это каскадные таблицы стилей, которые позволяют вынести повторяющиеся оформления элементов в отдельный файл или в начало страницы. При этом сокращается код HTML, он становится более читабельным, стили элементов на сайте можно изменять быстрее и проще.

Пример кода CSS. Для абзаца

предопределяются стили: зеленый цвет текста и размер шрифта 20px.

Вывод

Для того чтобы стать верстальщиком, необходимо изучить язык разметки гипертекста HTML, знать принципы CSS и уметь работать с графическим редактором, в котором нарисован макет будущего сайта.

Вы уже поняли, что хотите профессионально заниматься версткой? Желаем удачи в этом нелегком, но безумно интересном творческом процессе!

Создание базового макета веб-сайта с помощью HTML CSS

Создание базового макета веб-сайта с помощью HTML CSS

Это будет краткий базовый учебник, предназначенный специально для начинающих. Мы создадим базовый макет веб-сайта с помощью HTML CSS. Почти каждый веб-сайт состоит из этого базового макета, который включает в себя заголовок, боковую панель, область содержимого и нижний колонтитул.

Мы собираемся использовать HTML-тег DIV, потому что это будет дизайн на основе DIV, а мы используем только HTML и CSS. Проекты на основе DIV намного эффективнее и приводят к более чистому коду по сравнению с проектами на основе таблиц. В табличном дизайне мы используем Тег

и его столбцы / строки для построения макета, который вообще не считается правильным способом.

Приступим

Вначале у вас будет дизайн, созданный вами или предоставленный другим дизайнером или клиентом. Вы можете увидеть дизайн на картинке ниже.

Так как это только пустой демонстрационный дизайн, то есть только четыре раздела. Очевидно, что полный дизайн веб-сайта будет иметь больше разделов, и как только вы научитесь создавать этот базовый макет, вы сможете легко создавать больше разделов.

ГОЛОВНАЯ Секция 



<голова>
<мета-кодировка="utf-8">
Демонстрационный макет

В этом разделе мы дали этой странице заголовок «Демонстрационный макет» и связали файл таблицы стилей style. css в каталоге css. Если вы не знаете этих основ, вы можете узнать больше об этом здесь.

Кузовная часть 

<тело>
<дел>
<дел>
  
<дел>

    
    <дел>
    

    <дел>
 

    
<дел>

Как видите, мы используем теги DIV и каждому из них назначен класс. Мы будем использовать эти классы позже в файле таблицы стилей, вызывая имена каждого назначенного класса.
Мы также добавили комментарии с одинаковым именем каждого назначенного класса после каждого закрытия DIV. Добавление комментариев считается хорошей практикой, и это также делает код удобным для других пользователей, которые могут редактировать или читать ваш код.

CSS

Перед оформлением каждой секции вам необходимо знать размеры, такие как ширина и высота каждой секции. Эти измерения, очевидно, будут отличаться от проекта к проекту. Я использую инструмент «Линейка» в Adobe Photoshop, чтобы получить измерения, щелкая и перетаскивая из одной точки в другую.

Размеры этой базовой компоновки можно увидеть на рисунке выше. Вы также можете скачать прилагаемый пустой PSD-дизайн.

.сворачивать {
ширина: 980 пикселей;
поле:0 авто;
}

Как видно из названия «.wrap», это называется оберткой DIV, которая содержит все остальные DIV. Очевидно, вы можете присвоить любое другое имя, такое как обертка, контейнер или main_div и т. д., но я предпочитаю называть его .wrap выглядит чистым и коротким.

Мы задали ширину 980 пикселей и добавили верхнее/нижнее поле как 0 и правое/левое поле как

auto . Это поле auto с обеих сторон делает наш веб-сайт выровненным по центру по горизонтали.

тело { поле: 0; заполнение: 0; }

Просто сброс полей и отступов по умолчанию для тела.

.заголовок {
высота: 140 пикселей;
нижняя граница: 15px;
цвет фона: # 0d7963;
}

Я надеюсь, что это довольно просто и объясняется именами свойств CSS, которым мы присвоили высоту 140 пикселей, нижнее поле 15 пикселей и цвет фона «#0d7963», используя цветовой код. Я использовал инструмент выбора цвета, чтобы получить цветовой код в Adobe Photoshop.

.содержание {
ширина: 690 пикселей;
высота: 450 пикселей;
цвет фона: # 0d7963;
поплавок: справа;
}
.сайдбар {
ширина: 275 пикселей;
высота: 450 пикселей;
цвет фона: # 0d7963;
плыть налево;
}

Мы добавили свойство float , чтобы сделать этот DIV плавающим. Таким образом, мы можем поставить эти DIV рядом друг с другом. Без свойства float DIV занимал бы всю ширину страницы, а новый DIV «.sidebar» начинался бы под DIV «.content». Вы можете поменять местами значения float , чтобы изменить положение боковой панели на левую или правую сторону.

.прозрачный {
ясно: оба;
}

Как вы заметили, мы использовали чистый DIV, который, вероятно, будет таким же, как и во всех других проектах, без текста или содержимого. Цель этого DIV — очистить пространство для плавающих элементов выше, иначе DIV нижнего колонтитула проигнорирует плавающие DIV выше и привяжется к DIV заголовка. Нажмите здесь, чтобы узнать больше о свойстве clear.

.нижний колонтитул {
высота: 70 пикселей;
верхнее поле: 15 пикселей;
цвет фона: # 0d7963;
}

Довольно просто, как заголовок DIV.

Полный код HTML и CSS

Вот полный код для «Создание базового макета веб-сайта с помощью HTML CSS». Вы также можете загрузить дизайн PSD и файлы HTML / CSS с боковой панели выше.

HTML 



<голова>
<мета-кодировка="utf-8">
Демонстрационный макет


<тело>
<дел>
<дел>
  
<дел>

    
    <дел>
    

    <дел>
    
<дел>

КСС 

тело { поле: 0; заполнение: 0; }
.сворачивать {
ширина: 980 пикселей;
поле:0 авто;
}
.заголовок {
высота: 140 пикселей;
нижняя граница: 15px;
цвет фона: # 0d7963;
}
.содержание {
ширина: 690 пикселей;
высота: 450 пикселей;
цвет фона: # 0d7963;
поплавок: справа;
}
. сайдбар {
ширина: 275 пикселей;
высота: 450 пикселей;
цвет фона: # 0d7963;
плыть налево;
}
.нижний колонтитул {
высота: 70 пикселей;
верхнее поле: 15 пикселей;
цвет фона: # 0d7963;
}
.прозрачный {
ясно: оба;
}

Этот «Создание базового макета веб-сайта с помощью HTML CSS» — базовый туториал для начинающих. Вы можете посмотреть больше руководств по HTML здесь. Скоро появятся более продвинутые руководства.

8 примеров дизайна веб-сайтов для начинающих

Albert Shepherd обновлено 30.03.2023 10:08:56

Хотите профессионально заниматься дизайном веб-сайтов?

Wondershare Mockitt Prototype Designer позволяет легко и быстро создавать прототипы для iPhone, Android, веб-сайтов и многого другого. Перетаскивайте для создания каркасов и прототипов. Попробуйте!

Создайте сейчас!

Создание идеального веб-сайта может оказаться сложной задачей, если у вас нет дизайна. В какой-то момент мы чувствуем себя обескураженными. Особенно если это ваш первый проект. Сначала лучше придерживаться простого дизайна. Но как найти дизайн сайта для начинающих ? Что ж, мы справились с этим, поскольку собрали все лучшие дизайны для новичков, чтобы они могли вдохновиться и получить преимущество.

Уважаемые братья дизайнеры и разработчики, прежде чем мы погрузим вас в суть, у нас есть предложение инструмента для вас. Читай дальше.

  • Часть 1. Создайте свой первый веб-сайт самостоятельно — Easy Tool
  • Часть 2. 8 отличных примеров дизайна веб-страниц для начинающих
    • #1. Дропбокс
    • №2. Слабый
    • №3. АвтомобильМакс
    • №4. ТредАп
    • №5. Скайп
    • #6. Горячая линия по предотвращению самоубийств
    • №7. Объединенное здравоохранение
    • №8. Убер

Создайте свой первый веб-сайт самостоятельно

Как UI\UX-дизайнер, вы должны искать платформу, которая поможет вам создавать прототипы и макеты за несколько минут. Wondershare Mockitt очень удобен для ежедневной разработки и проектирования. Хотите реализовать свои идеи дизайна веб-сайта? Попробуй это!

Зарегистрируйтесь, чтобы создать бесплатно

Предоставленное рабочее пространство хорошо организовано и мгновенно создает дизайн веб-сайта, не беспокоясь о написании ни одной строки кода. Если вы работаете в команде, вы можете легко сотрудничать друг с другом и создавать кликабельные прототипы для мобильных приложений. Упорядоченное и организованное рабочее пространство предоставляется без каких-либо барьеров. Основное внимание уделяется созданию проектов для iOS и Android, также доступны варианты макета нестандартного размера.

Основные характеристики Mockitt:

  • Включает предопределенные виджеты, комбинации и шаблоны объектов с функцией перетаскивания для перемещения на холст.
  • Совместная работа в режиме реального времени поддерживает работу над проектом с членами команды.
  • Простота в использовании. Простой интерфейс и удобное управление поможет новичкам в дизайне сайта.
  • Возможность делиться прогрессом проекта с помощью сгенерированного URL-адреса или QR-кода, что позволяет просматривать проект в любом веб-браузере.

Дизайнеры UI/UX, которые хотят работать над своим первым проектом, могут бесплатно воспользоваться этим прототипом инструмента, поскольку Mockitt предлагает бесплатную версию. Вы можете добавить до 3 проектов и 20 экранов в проект. Если вы хотите воспользоваться другими преимуществами премиум-версии, этот удобный инструмент имеет более низкую цену, чем другие варианты, доступные на онлайн-рынке. Попробуйте это лучшее, но простое программное обеспечение для дизайна веб-сайтов !

Зарегистрируйтесь, чтобы попробовать бесплатно

8 отличных примеров дизайна веб-страниц для начинающих

#1: Dropbox

Dropbox взят в качестве отличного примера, чтобы получить представление о дизайне веб-страницы для начинающих. Они добавили несколько броских изображений, чтобы привлечь внимание своих посетителей, и темную фоновую тему, включенную в два CTA. Без сомнения, темный фон привлекает больше внимания.

Маркетинговая стратегия, используемая здесь, очень проста, поскольку они нацелены на ключевые точки аудитории в дизайне их веб-сайта, которые их интересуют. Он включает в себя производительность, политику безопасности и услуги, предоставляемые Dropbox.

#2: Slack

Каждому посетителю нравится дизайн веб-сайта Slack. Они проделали большую работу, когда дело доходит до добавления пользовательской графики и уникальных иллюстраций. Крылатая фраза на их веб-сайте «Где происходит работа» — очень продуктивный и хороший способ выразить основную особенность инструмента.

Slack изо всех сил старался сделать дизайн веб-сайта доступным для своих посетителей. Доступен вариант входа или создания учетной записи. В этом дизайне вы можете найти больше вариантов навигации, чем в Dropbox, цель каждого из них — помочь посетителям получить то, что им нужно. Вы должны посетить их веб-сайт, чтобы получить общее представление о дизайне.

#3: CarMax

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

Они добавили несколько призывов к действию, чтобы посетители либо продали свой подержанный автомобиль, либо купили новый. Точно и легко. Они добавили панель поиска для конкретных автомобилей и моделей, которые вы пытаетесь найти в CarMax рядом с вашим городом.

#4: ThredUp

Разработка домашней страницы веб-сайта электронной коммерции может быть сложной задачей, которая включает одновременное отображение вашего флагманского продукта и знакомство с вашим бизнесом. Как не перегрузить посетителей списком товаров или категорий? Надеюсь, если вы новичок, этот дизайн веб-сайта вдохновит вас.

В Thredup все доступные продукты разбиты по категориям. Они меняют дизайн своей домашней страницы в соответствии с сезонным подходом. Навигация крупная, но продумана аккуратно, что помогает посетителям легко получить доступ к интересующим их категориям.

Советы, которые вы можете знать

Wondershare Mockitt Website Designer

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

Зарегистрируйтесь в Design прямо сейчас!

Нажмите здесь, чтобы увидеть шаблон HD

#5: Skype

В наши дни Skype используется во всем мире, и все знакомы с его работой. Дизайн домашней страницы Skype идеально ориентирует целевых посетителей. На специальном графике тонко указано, что технология совместима со всеми типами устройств, и если вы углубитесь и узнаете больше об их функциях, вы поймете, почему их сервис популярен.

Они разработали все три важных фактора Skype: общение в чате, совместная работа и аккуратное общение. Графическая работа над кнопками CTA в дизайне сайта — это сама красота. Они демонстрируют преимущества загрузки сейчас, чтобы сэкономить время и быть готовыми к работе.

#6: Горячая линия по предотвращению самоубийств

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

Дизайн их веб-сайта очень интересен, так как они использовали номер телефона для основного призыва к действию. Это может показаться противоположным тому, что мы обычно наблюдаем, но оно предназначено для посетителей. Если вы просматриваете веб-сайт со смартфона, вы можете нажать на этот номер, чтобы быстро набрать его.

#7: United Healthcare

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

Если вы посетите домашнюю страницу UnitedHealthcare, вы поймете, почему ее дизайн настолько привлекателен. Они также использовали соответствующие изображения, чтобы всячески поддержать свою аудиторию. Несколько CTA используются для предоставления четких указаний о планах медицинского страхования и страхования для отдельных лиц и семей.

#8: Uber

Любой, кто не любит водить машину один, звонит в Uber, чтобы забрать их с места. У них лучший дизайн домашних страниц. Они сделали это замечательно хорошо, чтобы классифицировать каждую пропорцию. Это не просто спроектировать и реализовать. Если вы присмотритесь, то увидите, что каждое действие направляет посетителей в другой раздел. Он работает как воронка.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *