Вы открыли макет в Фигме и редактор кода. Сейчас расскажем, что нужно делать дальше, чтобы не впасть в прокрастинацию и всё сверстать.
Осмотрите макет
Зачем. Чтобы потом не отвлекаться от вёрстки.
Смотрите макет по принципу «Снаружи — внутрь» — двигаясь от крупных смысловых элементов к деталям дизайна. Чтобы было удобнее, сделайте дубликат макета в Фигме и пишите там заметки о том, что нашли.
Отметьте крупные смысловые блоки и разделы. Посмотрите на страницу и выделите крупные смысловые блоки. Базовая структура любого макета состоит из трех основных тегов:
- — шапка сайта, одинаковая на всех страницах.
- — уникальный контент;
- — подвал, одинаковый на всех страницах.
Теперь ищем смысловые разделы внутри этих блоков. Поможет схема:
Верстка сайта с нуля по макету — Начинаем верстку. Введение
Проанализируйте контент. Присмотритесь к тексту на макете, какую функцию он выполняет? Может быть то, что вы видите, это не текст, а кнопка или раскрывающиеся меню?
На этом этапе отметьте:
Когда вы закончите работу, у вас в заметках будет готовая схема вёрстки и уже ничего не будет отвлекать вас от кода.
Настройте редактор кода и проект
Установите редактор Visual Studio Code (или любой другой), если ещё этого не сделали, и плагин editorconfig. Он помогает разным разработчикам писать код в проекте в одном стиле.
Структура проекта. Создайте папку и положите туда файл index. html, папку css с файлами style. css и normalize. css, а также папки для картинок и шрифтов. Получится так:
Разметка
Рабочую среду подготовили, приступаем к разметке.
Выделяем крупные смысловые блоки на каждой странице сайта. Это — шапка, — подвал и — основное содержимое.
Размечаем в блоках крупные смысловые разделы. Выделяем главную навигацию , секции через , смысловые разделы через и дополнительное содержимое через .
Например, текст про дизайн-студию из Краснодара прикидывается заголовком, но на самом деле это не он:
Определить, какие теги использовать, можно методом исключения:
- Получилось найти самый подходящий смысловой тег — использовать его.
- Для потоковых контейнеров — .
- Для мелких фразовых элементов (слово или фраза) — .
Разметка в редакторе кода выглядит так:
#1 Верстка сайта по шаблону для начинающих | Верстаем вместе | Сайт ресторана — делаем меню
А так проект выглядит в браузере:
Базовая стилизация
Начинается самое интересное — работа с внешним видом. Прописываем в style.css базовые стили. Для крупных блоков пока ничего не делаем.
Этапы базовой стилизации
- Добавление классов в разметку;
- Подключение нестандартных шрифтов (локально или из сервиса);
- Подключение normalize. css (по желанию);
- Указываем параметры шрифта — название, размер, цвет, жирность;
- Указываем высоту строки;
- Описание фоновых параметров (фоновый цвет);
- Описание состояний интерактивных элементов, которые описаны в стайлгайде. На этом этапе задавайте только текстовые параметры и параметры фона;
- Все цвета вынесены в кастомные свойства в селектор :root.
Пример проекта с базовой стилизацией:
Работа с графикой
Экспортируйте всю графику из макета в Figma и подключите её в разметке.
SVG-изображения рекомендуется собрать в спрайт и подключить первым элементом в body. Спрайт — это файл, который мы сшили из нескольких графических элементов, например, из иконок. Спрайты экономят запросы к серверу — с ними сайт работает и загружается быстрее. В спрайт сшивается и растровая, и векторная графика.
В папке вашего проекта подготовьте графику: подготовленные изображения разместите в подпапке img в папке проекта, чтобы у вас получилась примерно такая структура проекта:
project | – css | – fonts | – img | [ваши картинки] | favicon.ico | index.html | catalog.html
Подключите контентные изображения в разметке. Фоновые и декоративные изображения пока подключать не нужно.
При подключении изображений используйте относительные адреса, обязательно укажите размер картинки без пикселей, а также alt. Например, так:
Подключите к проекту фавиконки. favicon. ico размером 32×32 положите в корень проекта и подключите в , остальные версии фавиконок делать не обязательно.
Пример проекта в котором подключена графика:
Построение сетки
Построение сеток производится в общем стилевом файле style. css.
При работе с созданием крупных структурных сеток, в вёрстке используется подход desktop-first, то есть сайт прежде всего должен корректно отображаться на больших разрешениях экрана.
Расположите элементы страницы по сетке в соответствии с макетом. Для удобства используйте один из следующих способов визуального выделения элементов:
Пример проекта, где уже добавлены сетки:
Добавление декоративных элементов
На этом этапе добавляем мелкие сетки — например, для карточек товара. Подключаем кастомные шрифты и фоновые изображения. В конце оформляем остальные декоративные элементы, которые ещё не стилизовали раньше.
Пример готового проекта, где добавлены декоративные элементы:
Всё почти готово, осталась пара шагов.
Адаптивные сетки и декоративные элементы
Чтобы сделать хороший адаптивный сайт, нужно понимать много нюансов: как работают вьюпорт, медиавыражения, адаптивные картинки. Эту тему стоит разобрать отдельно, но если хотите, познакомьтесь с ней в блоге Академии.
Адаптивная графика
Ура! Мы и дошли до последнего пункта работы над проектом. Что нам осталось сделать?
Пример готового проекта, где настроена адаптивная графика:
Вот мы и подошли к концу. Перед глазами готовый проект, ощущения радостные. Можно смело приступать к верстке нового макета. Ведь, чтобы научиться писать код — нужно писать код. Меньше сомнений — больше практики и всё получится.
Следующие шаги:
- Шаблон простого сайта на HTML
- Шаблон HTML-формы
- Основы дизайна для верстальщиков
Источник: verstach.ru
Уроки вёрстки: Подробный разбор верстки опрятного шаблона портфолио из PSD в HTML
В нашей сегодняшней статье мы расскажем вам о том, каким образом поэтапно можно преобразовать опрятный дизайн портфолио, о котором мы вам когда-то рассказывали, в шаблон на HTML. Вы научитесь применять платформу CSS, CSS-спрайты, а также сам код CSS3 так, чтобы получить абсолютно валидный кросс-браузерный шаблон HTML/CSS. Надеемся, что вам хватит терпения дойти до конца статьи, и полученные знания пригодятся вам в дальнейших проектах.
Теперь давайте перейдём к самому процессу.
Ссылки на ресурсы, которые вам понадобятся в ходе разработки:
Вот то, что мы будем разрабатывать (вы можете кликнуть здесь для просмотра полноценного демо) или здесь , чтобы скачать готовый шаблон.
Этап 1 – Подготовка
Если вы когда-нибудь читали статьи о верстке готовых дизайнов, то наверняка замечали, как в процессе разработки применяется 960gs для создания направляющих. Что же, здесь нам также понадобится 960gs в качестве платформы CSS. Применение CSS-платформ экономит уйму времени, а также значительно облегчает процесс разработки стилей. Теперь вам нужно скачать 960gs для использования на протяжении статьи.
Также вам потребуется хороший редактор кода, но тут уже по вашему выбору: вы можете использовать блокнот, если захотите. Мы всегда рекомендуем использовать бесплатные редакторы кода, а также советуем привыкать к ним, это позволяет вам «набить руку».
Теперь в процессе разработки вам следует протестировать вашу разметку в различных браузерах, ведь вам не хотелось бы потом возвращаться в самое начало из-за возникших проблем с совместимостью. В нашей сегодняшней статье мы используем CSS3 стили, но, как вам наверняка известно, пока еще не все браузеры в совершенстве поддерживают эту технологию. Результаты, отображенные в этой статье, были зафиксированы в Firefox 3.6, который поддерживает все функции CSS3, использованные на протяжении статьи.
Этап 2 – Подготовка файлов
Первое, что нужно сделать, это создать директорию, в которой будет размещаться наш шаблон. Зачастую внутри корневой директории также создаются папки /images/ для изображений и /styles/ для файлов стилей (CSS). HTML-файлы обычно складывают в корневой директории.
Теперь вам нужно взять CSS-файлы из скачанной папки 960gs – распакуйте zip-файл, и скопируйте полученные файлы из папки /code/css/ в папку /styles/, которую мы только что создали в корневой папке с шаблоном. Вам нужно скопировать файлы 960.css, reset.css и text.css. Вы также наверняка заметили, что там ещё имеется папка /uncompressed/, которая содержит те же файлы, но они не оптимизированы, хотя так и легче их понять. Мы рекомендуем использовать сжатые файлы CSS. Вам также нужно создать новый файл в корневой папке и дать ему название index.html, а затем создать еще один файл в папке /styles/, и назвать его style.css.
В этой обучающей статье нам придется экспортировать изображения из PSD для того, чтобы далее использовать их в нашем HTML-шаблоне. Вы можете экспортировать эти изображения самостоятельно, если у вас есть PSD-файл разделенный на слои из первой статьи о разработке шаблона, либо вы можете скачать исходные файлы шаблона данной статьи, там все изображения уже экспортированы.
Этап 3 – Наброски шаблона
Нам следует начать с разработки простого шаблона HTML для того, чтобы связать все элементы вместе. Вглядываясь в дизайн в окне разработки Photoshop, вы должны заметить несколько вещей:
1. шаблон разделен на 4 секции: шапка (логотип и меню), предложенные проекты, тело страницы (контент) и подвал.
2. у нас есть фоновое изображение для шапки и предложенных проектов, которое повторяется в горизонтальном направлении.
3. теперь нужно увидеть то, что у секций шапки, предложенных проектов и подвала фиксированная высота, т.е. у всех, кроме секции с контентом.
4. наконец, у секции с предложенными проектами отличное от остальных фоновое наложение.
Исходя из этих пунктов, нам нужно сделать следующую HTML-разметку.
Portfolio Layout
Main Contect Goes Here.
Footer Content Goes Here.
Как видно, в этой разметке мы добавили ссылки на файлы CSS в голове документа, создали 4 основных DIV’а, где каждому присвоено уникальное имя класса для дальнейшего оформления, а также вы заметите, что кроме классов header_container и content_container здесь также включен container_12, так как этим классам нужен тот же стиль, как у container_12, встроенного в платформу 960gs. Тот же атрибут применен и к классу DIV’а featured_container, и мы отделили его от основного DIV’а, поэтому и появилась возможность добавить отдельное фоновое наложение. Далее нужно задать стиль повторяющемуся по горизонтали фону в шапке и секции предложенных проектов. Теперь давайте добавим CSS (весь CSS-код должен быть добавлен в файл style.css):
body color: #1d1d1d;
background: #fff url(../images/bg.png) repeat-x top center;
font-size: 12px;
font-family: Arial;
>
a color: #0cb0ca;
text-decoration: none;
>
a:hover text-decoration: underline;
>
.header_container height: 100px;
overflow: hidden;
>
.featured_container height: 454px;
overflow: hidden;
color: #fff;
font-size: 14px;
>
.featured_container .container_12 background: url(../images/featured_bg.png) no-repeat top center;
height: 454px;
>
.content_container line-height: 24px;
padding: 38px 0 60px 0;
>
.footer_container background: #000 url(../images/footer_bg.png) repeat-x top center;
height: 234px;
width: 100%;
display: block;
overflow: hidden;
color: #fff;
>
Давайте посмотрим, что тут у нас есть. Ко всей странице мы применили серый цвет шрифта (#1d1d1d), а фон документа установили на белый (#fff), а также повторяющийся по горизонтали фон (bg.png). Далее мы указали стандартное семейство шрифтов и их размеры, а затем задали цвет ссылок (#0cb0ca) без декораций в обычном режиме и с подчеркиванием при наведении.
Далее мы задали стиль header_container с фиксированной высотой в 100 пикселей и задали параметр overflow на hidden. Теперь давайте посмотрим на стиль featured_container: фиксированная высота 454 пикселя, скрытие излишков, белый цвет шрифта и размер 14 пикселей. Далее мы задали наложение фонового изображения (featured_bg.png) к container_12 без повторений и с позиционированием по верхней центральной точке. Далее мы добавили стиль к content_container, который включает в себя 24 пикселя для высоты линий (что контролирует промежуток между линиями текста), 38 пикселей отступа от верхнего края и 60 пикселей отступа от нижнего края для поддержания промежутка между предложенными проектами, подвалом и секции с контентом.
И, наконец, мы задаём стиль footer_container, который включает в себя горизонтально повторяющееся фоновое изображение footer_bg.png, фиксированное значение высоты, 100% значение ширины для заполнения всего окна браузера по горизонтали, установку отображения на block, скрытие излишков, а цвет текста на белый. В результате должно получиться нечто вроде этого.
Этап 4 – Логотип и меню в шапке
Теперь давайте добавим логотип и меню в верхнюю часть нашего шаблона. Вот HTML-код для header_container:
What I Do?
Aenean ullamcorper euismod
Pellentesque rhoncus enim at arcu bibendum ac aliquam lectus semper. Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo. Nulla facilisi. Etiam pretium, libero sit amet gravida hendrerit, tortor risus lacinia odio, mattis venenatis felis massa nec eros.
- Pellentesque
- Mauris ac tincidunt
- Cras elementum
- Pellentesque
- Mauris ac tincidunt
- Pellentesque
- Mauris ac tincidunt
- Cras elementum
- Pellentesque
- Mauris ac tincidunt
My Portfolio
Aenean ullamcorper euismod
Pellentesque rhoncus enim at arcu bibendum ac aliquam lectus semper. Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo.
I Socialize
Aenean ullamcorper euismod
Pellentesque rhoncus enim at arcu bibendum ac aliquam lectus semper. Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo.
Twitter
Flickr Group
Digg
RSS Subscribe
Skype
Заметьте, что отдел с заголовком содержит изображение, нормальный текст и текст внутри элемента span. Вам также придется экспортировать иконки из PSD-файла или же воспользоваться теми, которые есть в исходном файле. Всё, что нам остается сделать – внести стилизацию посредством CSS. Вот CSS-код для основного раздела шаблона.
.content_container line-height: 24px;
padding: 38px 0 60px 0;
>
.content_container .grid_4 h2 font-family: Georgia;
font-size: 24px;
line-height: 18px;
font-weight: normal;
>
.content_container .grid_4 h2 img float: left;
margin: -8px 15px 0 0;
>
.content_container .grid_4 h2 span font-family: Verdana;
font-size: 14px;
>
.content_container .grid_4 p text-align: justify;
margin: 0 0 42px 0;
>
.content_container .grid_4 ul float: left;
>
.content_container .grid_4 ul li list-style-type: none;
margin: 0 40px 0 0;
>
.content_container .grid_4 ul li:before content: «- «;
>
.content_container .grid_4 .social_icons a display: block;
text-decoration: none;
line-height: 26px;
height: 26px;
width: 150px;
float: left;
margin: 0 0 35px 0;
>
.content_container .grid_4 .social_icons a:hover text-decoration: underline;
>
.content_container .grid_4 .social_icons a img float: left;
margin: 0 25px 0 0;
>
Для начала мы задаем стилю h2 параметр Georgia в качестве основного шрифта, фиксированный размер шрифта и ширину строки. Затем мы оформляем изображение в заголовке (иконка) – оно должно ровняться по левому краю, затем добавляем положительное значение правого поля и отрицательное значение верхнего поля для того, чтобы изображение ровнялось так же, как мы видим в оригинальном изображении дизайна.
Теперь мы оформляем span так, чтобы в нем использовался другой шрифт и меньший текст. Затем мы оформляем параграф так, чтобы текст ровнялся или заполнял все свободное пространство, а также добавляем нижнее поле. Далее нам нужно оформить пункты неупорядоченного списка в левой части основной секции. Для начала мы оформляем элемент ul так, чтобы он ровнялся по левому краю, а затем оформляем li и отменяем у него тип списка, а затем добавляем туда правое поле на 40 пикселей. Теперь вы должны увидеть то, что когда мы используем «list-style-type: none», то у пунктов перечисления нет пиктограмм, но в оригинальном дизайне у нас в качестве отметки перечисления используется черточка, поэтому нам нужно внести его перед каждым пунктом списка используя «.content_container .grid_4 ul li:before» и «content: «- «».
Наконец, мы оформляем социальные иконки в правом отделе основной секции. Здесь нам нужно оформить положения ссылки, а также стиль иконки. Теперь наш шаблон должен выглядеть примерно так.
Этап 7 – Разработка подвала
Подвал также разделен на три секции равной ширины, и здесь мы также применяем grid_4. Текст авторского права должен быть в самом низу подвала и выровнен по центру, поэтому нам нужно использовать «div» с классом container_12 copyright с div’ом внутри него, к которому приставлен класс grid_12, чтобы он заполнял весь блок. Вот HTML-код для подвала:
Теперь давайте оформим содержимое подвала. Вот CSS-код для подвала:
.footer_container background: #000 url(../images/footer_bg.png) repeat-x top center;
height: 234px;
width: 100%;
display: block;
overflow: hidden;
color: #fff;
>
.footer_container .container_12 padding: 20px 0 0 0;
>
.footer_container .container_12 .grid_4 h3 font-family: Georgia;
font-size: 18px;
line-height: 12px;
font-weight: normal;
>
.footer_container .container_12 .grid_4 ul li list-style-type: none;
margin: 0 0 0 35px;
padding: 0 30px 0 0;
height: 29px;
line-height: 29px;
border-bottom: 1px solid #47535d;
>
.footer_container .container_12 .contact_details p margin: 0 0 15px 0;
>
.footer_container .container_12 .contact_details a display: block;
clear: both;
height: 28px;
line-height: 28px;
font-style: italic;
>
.footer_container .container_12 .contact_details a img float: left;
margin: 0 10px 12px 0;
>
.footer_container .container_12.copyright padding: 0;
>
.footer_container .container_12 .grid_12 text-align: center;
font-size: 11px;
line-height: 40px;
height: 40px;
>
Учтите, что мы задали верхнее поле в 20 пикселей для класса container_12, что создаст пространство между подвалом и основной секцией шаблона. Далее мы задали стилю header 3 шрифт Georgia размером в 18 пикселей, высоту строки в 12 пикселей и стандартную декорацию текста.
Далее мы отключили пиктограммы у пунктов списка, задали ту же высоту строки, а также высоту пунктов меню так, чтобы текст встал по центру по вертикали. Затем мы задали толщину нижней границы в 1 пиксель, левое поле и отступ справа. Далее мы оформили абзацы, ссылки и иконки контактов. Наконец, мы секции копирайта мы задали стилизацию без отступов, с выравниванием по классу grid_12, чтобы маленький текст был выровнен по центру, далее были заданы те же значения высоты строки.
Теперь, если вы следовали всем пунктам и указаниям нашей сегодняшней статьи, то у вас должно получиться нечто вроде этого:
В нашей сегодняшней статье мы научились преобразовывать дизайн в полноценный шаблон HTML/CSS, используя CSS-спрайты и методики CSS3. Не забудьте провести тест на валидацию для проверки совместимости с браузерами. Конечно же, все CSS3 параметры не могут быть валидными для всех браузеров, поэтому перед проверкой исключите все CSS3-параметры. На этом всё.
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:
Источник: www.coolwebmasters.com
Блочная верстка сайта с нуля. Урок 1
Табличная верстка применялась раньше, до сих пор можно видеть старые сайты, которые используют теги , , . Сейчас ее можно применять только для создания самих таблиц, но не для всей страницы, это давно устаревшая технология, ее полностью заменила блочная верстка. Не скрою, что блочная верстка тяжелее для освоения, но она имеет рад преимуществ над табличной.
Блочная верстка
Как вы уже догадались выше, в этой статье речь пойдет именно от блочной верстке, если предыдущая статья была, как вводная, то сейчас мы будем уже разбираться более конкретно на примере — как сверстать сайт с нуля. Во время своего изучения верстки я был в поисках подробного мануала — как по шагам сверстать даже самую простую html страницу. В этой статье я хочу максимально подробно рассмотреть каждую строчку кода и объяснить принципы работы с html, чтобы любому новичку в этом деле было понятно. Надеюсь, у меня это получится.
Итак, начнем. Для примера я взял простой прототип, макетом его нельзя назвать, нормальный макет рисуется в psd формате, а у нас он в jpg. Нам главное понять принцип как же верстать сайты с помощью блочной верстки. Чтобы работать с блочной версткой нужно знать не только html, но и css (каскадные таблицы стилей). В ходе цикла статей по верстке сайта, мы как раз с вами и изучим тот набор css стилей, который в дальнейшем вам всегда поможет верстать практически любые каркасы макетов/мокапов, ведь принцип один и тот же.
Итак, вот макет (кликабельно).
