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


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

Вы здесь: Главная - HTML - HTML 5 - Верстка сайта с нуля. Меню навигации. Часть 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

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

Предыдущая статья Следующая статья

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

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

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

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

Порекомендуйте эту статью друзьям:

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

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

Получите идеальный макет веб-сайта за 27 шагов

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

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

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

Начало работы

01. Определите, что означает успех

Добраться до сути цели вашего дизайна

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

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

02. Понимание текущего сайта

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

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

03. Делитесь дизайном с клиентами на ранней стадии

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

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

Рабочий процесс проектирования

04. Сначала займитесь макетом

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

Подумайте о содержании, макете и функциональности. Убедитесь, что эти мысли соответствуют целям вашего клиента, и не стесняйтесь делиться ими.

05. Начните рисовать каркас верхнего уровня

Базовый каркас поможет вам структурировать макет (щелкните значок в правом верхнем углу, чтобы увеличить)

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

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

06. Добавьте сетку

Пример сетки 978 с базовой линией 10 пикселей

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

Чтобы узнать, как это сделать, ознакомьтесь с этим руководством по созданию сетки, которая адаптируется ко всем размерам экрана.

07. Выберите типографику

Практическое правило - использовать не более двух разных гарнитур в макете веб-сайта.

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

08. Выберите цветовую тему

Инструменты, такие как Color Hunt, разработаны, чтобы помочь вам выбрать палитру.

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

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

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

09. Упростите макет

Простые макеты, как правило, легче ориентироваться

Чем проще структура сайта, тем легче пользователям ориентироваться.Каждый раздел должен рассказывать историю; ему нужна причина и конечный результат для пользователя. Макет должен помочь контенту выделить наиболее важные части этой истории.

На самом деле на странице не должно быть слишком много призывов к действию - все должно приводить к финалу: «Что я могу здесь сделать?»

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

10. Усовершенствуйте каждый компонент

Клаудио Гульери работал над дизайном пользовательского интерфейса в Microsoft Music.

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

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

11. Ознакомьте клиентов с вашими решениями

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

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

12. Думайте в движении

Движение необходимо при разработке интерактивного взаимодействия

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

13. Прототип, прототип, прототип

Прототипирование - лучший способ тестирования взаимодействий

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

Следующая страница: Дизайн и упаковка

.

Как сделать верстку и дизайн сайта (без дизайнерских навыков!)

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

Как создать веб-сайт, если у вас нет навыков веб-дизайна?

Кроме того, если вы новичок в HTML, ознакомьтесь с этим руководством о том, как написать супер простой веб-сайт на HTML с нуля! (с пошаговым видео)

Вот несколько вариантов:

Еще один вариант для вас - получить некоторые базовые навыки верстки и дизайна веб-сайтов, а также создать свой собственный интерфейс.

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

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

Этот метод включает:

На самом деле это стратегия, которую я использовал при создании веб-сайта Coder Coder! Конечно, это довольно простой дизайн, в нем нет ничего особенного.Но иногда все, что вам нужно, - это просто.

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

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

Вот основные этапы этого процесса:

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

Одно важное замечание: я вовсе не призываю вас красть CSS или изображения, которые вам не принадлежат. (Во-первых, вы ничего не узнаете с помощью задания копирования и вставки.) Идея здесь состоит в том, чтобы получить творческие идеи и концепции и использовать их для создания чего-то похожего.

1. Определите основы своего веб-сайта

Прежде чем вы начнете выбирать цвета или шрифты, давайте ответим на несколько общих вопросов об этом веб-сайте:

1. Какой бизнес будет продвигать сайт?

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

Для наших целей мы выберем вымышленную кофейню под названием Central Coffee. Потому что все любят кофе, правда?

2. Какие страницы будут на сайте?

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

Лучший способ выяснить страницы и другие общие структурные аспекты веб-сайта - это провести небольшое онлайн-исследование.

2. Изучите существующие веб-сайты

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

Постарайтесь обратить внимание на дизайн веб-сайта и сделайте заметки:

Хорошее место для поиска примеров веб-сайтов - Theme Forest. Он имеет массу бесплатных и премиальных шаблонов веб-сайтов и тем WordPress. И если вы будете придерживаться самых популярных тем, вы знаете, что обычно они будут образцами хорошего дизайна.

Вот пример кофейни из найденной мной темы.

The7

Страниц:
Одностраничный веб-сайт с разделами: Главная, О нас, Местоположение, Предложения, Меню, Новости, Пресса, Сообщения в блогах

Стиль:
Современный и чистый, с хорошими фото

Навигация:
Простая навигация

А вот несколько веб-сайтов, которые я нашел в поиске «кафе в Чикаго»:

Кофе с червоточиной

Страниц:
Домашняя страница, Блог, Расположение / Контакт, Возможности работы

Стиль:
Модерн; фото магазина более ностальгические

Навигация:
Не сразу видно, что это кофейня.Навигация по сайту немного затруднена.

Caffe Streets

Страницы:
Одностраничный веб-сайт, разделы: Главная, Кафе (О нас), Меню, Обжарка, Машина времени (соки), Контактная форма

Стиль:
Простой и современный (Squarespace)

Навигация:
Довольно легко ориентироваться; Мне нравится липкая строка меню вверху, которая прокручивает вас вниз к каждому разделу.

Билд кофе

Страницы:
Одностраничный веб-сайт, разделы: Домашняя страница, О компании, Часы работы, Расположение, Магазин, Кейтеринг, События, Контакты

Стиль:
Простой дизайн - это комбинация полноразмерных фотографий между частями белого фона с текстом.

Навигация:
Довольно легко ориентироваться

Кофе Савада

.

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

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

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера