Верстка сайта с нуля

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

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

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

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

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

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

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

Разумеется, что наш сайт будет адаптивным под любые устройства и разрешения экрана, поэтому все размеры указываем в % и em.

Верстка шапки сайта

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

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

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

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

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

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

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

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

  • Создано 12.10.2017 12:50:40

  • Михаил Русаков

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

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

  1. Кнопка:

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

  2. Текстовая ссылка:

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

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Привет, читатель!

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

Учим HTML/CSS

HTML и CSS — это то, что верстальщик пишет каждый день, это языки, которые понимает браузер и рисует ваш сайт. Вы можете выбрать любой источник для изучения(книги, видео, статьи), главное понять основы. Вот несколько полезных ссылок, которые помогут начать:

После прохождения уроков вы должны понимать:

  • что такое html-теги и как они работают
  • блочную модель(border, margin, padding)
  • как работают float, inline-block
  • позиционирование(абсолютное, относительное, фиксированное, z-index)

Вы должны уметь:

  • вставить на страницу текст, картинки, ссылки, элементы форм
  • стилизовать элементы страницы(изменение размеров, цветов, теней и т.д)
  • создавать таблицы

Работаем с фотошопом

Дизайнер предоставляет верстальщику макет в формате psd(формат файлов Photoshop). Поэтому верстальщику необходимо уметь с ним работать. Все функции программы не нужны, главное уметь следующее:

  • работа со слоями(скрытие, отображение, просмотр эффектов)
  • замер размеров элементов
  • вырезание картинок(обычных и паттернов)
  • копирование текста из макета в html

Полезные ссылки:

Начальные инструменты

Для быстрого старта вам понадобится редактор и браузер. Вы можете выбрать любые, но я посоветую Sublime Text в качестве редактора и Chrome в качестве браузера. Из операционных систем сделайте выбор между Windows и Mac. Остальные системы будут тормозить ваше обучение.

Верстка первого сайта

На этом этапе скорее всего вы ощутите ступор. Вы вроде знаете html/css(на самом деле нет) и фотошоп. Но вы совершенно не понимаете как из макета сделать сайт.

В данном случае вы можете пройти небольшой курс по верстке сайта, коих много на ютубе. На данном этапе вам нужно сверстать первый сайт. Не обращайте внимание на такие понятия как резина, адаптивность. И еще, не используйте css-фреймворки(bootstrap, foundation).

Полезные ссылки:

Понимание семантики, валидность

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

Полезные ссылки:

Javascript и jQuery

На этом этапе вы должны понять, что такое Javascript и зачем он нужен. Далее познакомиться с библиотекой jQuery и попробовать сверстать сайт с интерактивными элементами(слайдеры, всплывающие окна, табы).

Полезные ссылки:

БЭМ

Изучите методологию БЭМ. Вам нужно понимать, как верстать независимыми блоками, как привнести модульность в вашу верстку. В интернете очень много информации по этому поводу. Не нужно изучать фул-стек БЕМ, просто важно понять методологию для CSS. Верстаете новый макет с применением методологий.

Полезные ссылки:

SASS

Для ускорения и удобства написания стилей придумали препроцессоры. Наш выбор — Sass(.scss). Вам необходимо изучить препроцессор и сверстать с ним новый макет. Понять нужно:

  • переменные
  • разница между миксинами и тихими классами(placeholder)
  • как работает ‘&’
  • как разделить стили на несколько .scss файлов

На данном этапе scss в css компилируйте с помощью prepros

Полезные ссылки:

Jade

Также для ускорения верстки и поддержки верстальщики используют шаблонизаторы html. Наш выбор — jade. После изучения вы должны понимать:

  • как делать миксины
  • как работает extends
  • циклы и переменные
  • работа с массивами

Верстаете сайт с применением шаблонизатора.

Полезные ссылки:

Адаптивность

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

Полезные ссылки:

IDE PHPStorm

Чем раньше вы пересядете с редактора на PHPStorm — тем лучше. Эта IDE позволяет значительно ускорить разработку. Скачать бесплатную(early access) PHPStrom можно на официальном сайте, если не хотите платить — скачиваете её раз в месяц. В остальном бесплатная версия такая же, как и платная.

Полезные ссылки:

Git

Любой разработчик должен уметь работать с системами контроля версий, и верстальщик — не исключение. Мы, как и большинство выбрали Git. Вы должны уметь следующее:

  • работать с интерфейсом github
  • уметь клонировать репозитории на компьютер
  • делать commit, push, merge
  • делать pull request

Полезные ссылки:

Практика

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

На этом все.

Верстаю шлях — В. Стус

Анатолий Слободянюк

(перевод с укр.)

Иду свой путь – по вымершей пустыне,
Где жизни нет и заметется след.
За горизонтом памяти остынет
Далеких окон, согревавший свет.
Бреду я никуда из ниоткуда.
А все ж надеюсь, верю я тому:
Там, где гнездятся стадные иуды –
Найдется место брату моему.
Увидеть бы, всего одним лишь оком –
Найти хоть каплю света впереди.

Змеится путь, весь тусклый и глубокий –
Хоть сокрушайся, хоть с ума сходи.
Уже не я, а искры половина
Горит во мне. Лишь ею и живу.
Мне прожигает душу Украина –
Та, за которой взгляд напрасно рву.
Там, где-то далеко за миражами –
Сквозь синий лед – засветится она.
Моей тоской, молитвой и слезами –
Печально-радостна и весело-грустна.
Так дай же мне – дойти и не дотлеть,
Дойти – и не дотлеть на той страде.
Позволь мне, путь вечерний, одолеть,
Упасть зерном в родимой борозде.
___________________________________

Василь Стус

Верстаю  шлях  —  по  вимерлій  пустелі, 
де  мертвому  мені  нема  життя, 
за  обріями  спогаду  —  оселі 
ті,  до  котрих  немає  вороття. 
А  все  ж  —  бреду,  з  нізвідки  до  нікуди, 
а  все  ще  сподіваюся,  що  там, 
де  кубляться  згвалтовані  іуди, 
мале  є  місце  і  моїм  братам. 
Побачити  б  хоч  назирці,  впівока 
і  закропити  спраглий  погляд  свій. 
Зміїться  путь  —  вся  тьмяна,  вся  глибока, 
і  хоч  сказися,  хоч  збожеволій. 
Бо  вже  не  я  —  лише  жива  жарина 
горить  в  мені.  Лиш  нею  я  живу. 
То  пропікає  душу  Україна  — 
та,  за  котрою  погляд  марно  рву. 
Та  є  вона  —  за  міражів  товщею, 
там,  крізь  синь-кригу  світиться  вона  — 
моєю  тугою,  моєю  маячнею 
сумно-весела,  весело-сумна. 
Тож  дай  мені  —  дійти  і  не  зотліти, 
дійти  —  і  не  зотліти  —  дай  мені! 
Дозволь  мені,  мій  вечоровий  світе, 
упасти  зерням  в  рідній  борозні.

© Copyright: Анатолий Слободянюк, 2014
Свидетельство о публикации №114041307188

Список читателей / Версия для печати / Разместить анонс / Заявить о нарушении

Другие произведения автора Анатолий Слободянюк

Рецензии

Написать рецензию

Другие произведения автора Анатолий Слободянюк

.

Последнее обновление 28.02.2017

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

Тема сегодняшнего поста: С чего начать изучение верстки? Вопрос этот далеко не праздный, и каждый для себя выбирает собственный путь. Я расскажу о том, как сам начинал это увлекательнейшее путешествие в мир HTML и CSS. Надеюсь, кому-то из вас это станет если не путеводной звездой, то хотя бы ориентирами к цели.

Читайте также: Адаптивная верстка сайтов | Введение

Итак, что такое верстка сайтов? Кто еще не в танке, слушайте: верстка в данном случае означает не набор свинцовыми буквами свежей статьи в газете «Искра», а превращение рисованного в Photoshop макета сайта непосредственно в рабочий сайт.

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

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

Так с чего же начать изучение HTML? Первое, что приходит на ум — это купить книгу. И чем толще, тем лучше. Возможно, кому-то это и пойдет на пользу.

Но лично у меня после некоторого опыта общения с такими «кирпичами» выработался четкий отталкивающий рефлекс.

По той простой причине, что информация там подается в избыточном объеме.

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

Так и здесь: в толстенной книге много лишнего, а когда его много, то оно затуманивает взор, навевает зевоту и превращает обучение в 2 – 3 дня мучений с последующим забрасыванием данной науки далеко в топку. И все.

Поэтому лично я пошел иным путем. Я таки купил книжицу. Совсем не толстую. И до сих пор не устаю ее рекомендовать своим ученикам, ибо актуальность книги все еще свежа и востребована. Автор книги Артемий Ломов, а называется она «HTML, CSS, скрипты: практика создания сайтов». Издательство «БХВ-Петербург».

В этой книге всего в меру: есть чуток истории веба, немного про стандарты. Но самое главное — весьма доходчиво и просто подан основной материал по HTML, CSS и JavaScript. Для начинающий изучать верстку сайтов — это просто мастхэв!

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

У меня второй такой книгой была электронная версия самоучителя по программе Dreamweaver от Macromedia под авторством Владимира Дронова.

Вообще для начала очень полезно обзавестись данной прогой. Dreamwiever — это визуальный редактор, позволяющий видеть одновременно внешнюю и внутреннюю сторону сайта. То есть, его внешнее представление как для посетителей, и внутреннее — непосредственно код.

Большой плюс данной проги — это возможность просмотреть (опять же в двойном режиме) любой существующий в сети сайт.

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

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

Кстати, структура — это наиболее важный фактор при изучении любого языка. А HTML — это тоже язык. И вот об этой структуре я расскажу в следующий раз.

А пока обзаведитесь парой полезных книжек. И читайте мой блог Вебсовет. Здесь вы также найдете немало полезных советов по верстке сайтов. Начните изучать верстку сайтов хотя бы с этого урока.

Удачи!

04.01.2010

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

(10 votes, average: 5,00 out of 5)
Загрузка…

Похожие записи:

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

Закрыть меню