30 рецептов правильной верстки сайта


Содержание материала:

Блочная верстка сайта — html и css, и почему начинающим повезло больше, чем тем кто верстает уже давно

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

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

Почему вам повезло больше, чем верстальщикам, начавшим работу уже давно

Существует два типа верстки: блочная и табличная. На заре времен верстка строилась в виде таблиц. Сперва создавалась всего одна, большая.

В нее встраивался head – голова, основная часть. Та, в которую входит логотип, какая-то основная информация типа телефонов и так далее.

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

Далее врисовывалось основное меню для перехода по категориям.

Основная контентная часть. Текст статьи, вводное приветствие или что-то иное.

Внизу размещается футер. Его используют и сейчас. Сюда, как правило, вставляют небольшие ссылочки на контакты, вакансии, информацию «О нас». Могут прилепить даты существования ресурса или просто магическое слово «copyright», которым разработчики надеются указать или защитить свое авторское право. Пользы от него как от подковы, висящей над дверью, может отпугнуть только вурдалаков, хотя они, как правило, в футер и не заглядывают.

Чуть позже появились новые стандарты. Табличную верстку заменила блочная. Тег «div» — это и есть блочная верстка. Можете посмотреть код любого сайта. Кликните правой кнопкой мыши и выберите «Просмотр кода элемента». Взгляните на мой скриншот. Тут есть блок главной страницы, футера, левой и правой колонки. Все они подписаны.

Современные сайты строятся из блоков, покажу схематично пример, чтобы вы понимали. Разница тут скорее в коде страницы. Видите, никакой основной таблички нет. Блоки, размещенные в той или иной части. Иногда они могут заходить друг на друга или сочетать в себе несколько элементов, но один лишний элемент (большая таблица) исчез.

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

Пошаговая инструкция: как делаются сайты

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

Более 80% людей просто смотрят на непонятный набор символов, вспоминают школьную программу по математике: логарифмы, дифференциалы – сходят с ума, пугаются и забывают об этой теме: «Пойду лучше китайский выучу, оно-то проще будет».

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

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

Она изготавливается в особом фотошоповском формате, типа блокнотного txt или вордовского doc. Из psd, так называется этот формат, раскраиваются блоки. Для этого есть специальная кнопка в меню слева.

После того как документ раскроен. Его можно «Экспортировать для web» и в результате на компьютере появляется папка images, которую верстальщик использует для распределения картинок по сайту.

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

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

Ваш первый сайт. Верстка займет всего пять минут

Над самой версткой можно работать в программе Notepad++. Сегодня я не буду затрагивать программу Adobe Dreamweaver, т.к. это тема отдельной статьи, но отмечу, что она как раз создана для верстальщиков.

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

Background – это цвет фона.

Кликнув два раза в Photoshop по цветовой палитре вы можете узнать и другие цвета.

Вот так будет выглядеть html документ с текстовой составляющей. Уже знакомые меню, тела и контейнеры… тег h2 тоже должен быть вам знаком. Это заголовки. Впишите в них свои слова.

Скачайте эти два документа в одну папку и откройте с помощью Notepad ++, затем отредактируйте цвет и текст, а затем запустите index.html с любого браузера (скачать).

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

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

И напоследок… качаем видео уроки

Как я вам уже говорил, самое сложное в верстке – это найти хорошие обучающие материалы. Сам я начинал с книг и только через две недели смог сделать свой первый индекс-файл. Чтобы вы понимали, без таблицы стилей (css) она будет выглядеть вот так.

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

  1. Html — уроки для начинающих.
  2. Css — уроки для начинающих.
  3. Бесплатный мини-курс по вёрстке сайта.

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

Если вам понравилась эта статья – подписывайтесь на рассылку и получайте больше полезных материалов для совершенствования собственных навыков!

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

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

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

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

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

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

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

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

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

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

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

Программы для верстки сайтов.

06.02.2020

Программы для верстки сайтов.

Для Вас я подобрал не только программы но и хитрости с помощью которых Вы будите верстать быстро, качественно и валидно.

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

1. Редактор кода — думаю можно скачать бесплатно

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

Сейчас по факту у меня на пк установлены две программы для верстки, — IDE PHPStorm и Sublime Text. Саблайм хорошо выезжает на дополнительно установленных пакетах и темах. А вот PHPStorm, — умеет уже из коробки, то что обычно до устанавливаю на SublimeText3. Поэтому PHPStorm это мой основной редактор кода. Чаще всего на нем юзаю горячими клавишами:

  • Выравнивание кода(как правило по ) ( выделяю всё crtl + A, выравниваю ctrl+alt+L)
  • Поиск по всему проекту + найти и заменить (ctrl + shift +F)
  • Найти метод или его использование ( ctrl + клик левой кнопкой мыши)
  • Закомитить + запушить (ctrl + K ctrl + shift + K)
  • Работаю с базой данных проекта (на правой стороне панели редактора)
  • Обнять часть кода новым тегом html (ctrl +alt + J)
  • Показать идентичные куски кода (ctrl + alt + shift + J)
  • создание и использование сниппетов и пр.

2. Emmet.

Программа для верстки сайтов в программе редактора кода. Эдакий набор плагинов для текстовых редакторов. Этот товарищ поможет быстрее набирать код в HTML & CSS.
Например такой строкой:
nav>ul>li*3
По жамканью на tab Вы получите такой код:

Или вот так например в CSS :
bg
Даст:
background: #000;

3. CSS препроцессоры.

Это конечно не программа для верстки сайтов, а наверное больше быстрый и умный способ написания кода CSS. Сам использую LESS, SASS, SCSS. Разобравшись с одним из них, остальные Вы тоже поймете. Они отличаются только синтексом. Я использую препроцессоры потому что в них есть:

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

4. Grid (сетка).

Как правило .psd макет веб-дизайнер разбивает на колонки(12, 24 и прочие извращения). Самостоятельно подгонять под сетку с помощью отступов, это издевательство над собой. Поэтому лучше воспользоваться сетками от фреймворков. Самая известная от Bootstrap. Bootstrap — это свободный набор инструментов. Который закрывает сразу множество задач по верстке. Поэтому советую изучить его и использовать как повседневный инструмент в верстке.

Есть еще менее известные сетки, но не значит, что они хуже остальных, например:
Skeleton или
Smart-Grid(Дмитрий Лаврик), — это вообще самое лучшее что может быть в сетках для быстрой и качественной верстки сайтов.

5. Таск-менеджер | Сборщик проектов | Менеджер задач | Ваш личный раб

Вот она рыба мечты. Вот кто настоящий волшебник. Этот комплекс программ для верстки сайтов, реально закроет множество задач верстки сайта и разработки проекта в целом.
Здесь тоже есть большие боссы:

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

  • Расставляет префиксы CSS для всех браузеров
  • Минимизирует CSS удаляя пробелы, и переносы
  • Создает файлы .map указывая номер строк браузеру для того что бы дебажить изначальный код
  • Группирует медиа запросы(что бы не повторялись для разных элементов DOM в одной ширине)
  • Преобразует препроцессорный код в обычный CSS
  • Минимизирует изображения
  • Уродует и минимизирует код JavaScript
  • Объединяет все файлы CSS в один(уменьшая количество обращений к серверу)
  • Минимизирует файлы HTML
  • Отслеживает изменения в редактируемых файлах и самостоятельно обновляет браузер во время верстки
  • Конфигурирует файл Smart-Grid

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

Топ-пост этого месяца:  Вывод картинки ссылкой с помощью Toolset Dashboard

6. Онлайн программы, для верстки и работы с .psd макетами сайтов.

И еще когда нет под рукой Photoshop или просто хочется что-то новенького, можно использовать для препарирования .PSD макета, — онлайн программы типа:

Особенности верстки сайта: что нужно знать веб-дизайнеру

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

Как происходит верстка сайта

Для начала разберемся, что такое верстка и зачем она нужна.

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

Верстка осуществляется в несколько этапов:

Из макета вырезаются основные изображения, элементы, фоны и прочее:

  1. Прописывается структура сайта с помощью языка разметки HTML. Размечается расположение основных блоков и элементов, проставляются ссылки.
  2. Далее элементам придается внешнее оформление с помощью стилей CSS. Задается фон для страницы и необходимых элементов, подгружается типографика, задается цветовая гамма страницы, размещаются изображения из макета.
  3. Если на сайте подразумевается динамика, используется JavaScript, с помощью которого создается анимация и другие динамические эффекты.
  4. Созданная страница тестируется, проверяется наличие ошибок и отображение сайта в различных браузерах и на других устройствах.

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

Что следует знать дизайнеру

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

  1. Подготовка макета к верстке.
  2. Использование модульной сетки.
  3. Разработка адаптивного дизайна.
  4. Создание стайлгайдов.
  5. Использование векторной графики.
  6. Работа с текстом.
  7. Создание анимации.

Остановимся на каждом подробнее.

Подготовка макета: правила и рекомендации для дизайнера

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

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

1. Порядок в слоях

Пожалуй, самое простое правило для дизайнера. Чтобы разработчик не тратил время на понимание, какой слой соответствует тому или иному элементу, лучше навести порядок в слоях. Придумать для каждого слоя осмысленные названия (вместо «Слой 1» — «Кнопка_Шапка» и прочее), распределить слои по группам (например, группа «Хедер», «Футер» и так далее). Также нужно удалить скрытые ненужные слои, так как верстальщик может не заметить и допустить ошибку, разместив элемент на сайте. Соблюдение данных рекомендаций позволяет верстальщику понять логику дизайна и облегчает его ориентирование по макету.

2. Целые числа

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

3. Наличие всех состояний элементов

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

4. Используемые технические характеристики

При работе с графическим редактором, необходимо обозначить нужные характеристики макета: цветовое пространство (RGB, а не CMYK), расстояния в пикселях, разрешение (72 dpi) и прочее.

5. Цветовая гамма

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

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

Использование модульной сетки

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

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

Разработка адаптивного дизайна

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

Наш сайт в декстопной версии:

В мобильной версии:

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

Создание стайлгайдов и других документов

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

Решение данной проблемы простое. Дизайнер может создать документ, в котором будут описаны все используемые типовые элементы на сайте. Кнопки, заголовки, небольшие блоки, веб-формы и прочее будут создаваться в соответствии с документом, что упростит разработку и упорядочит дизайн. Выдержка из стайлгайда Яндекса:

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

Использование векторной графики

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

Работа с текстом

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

Вставляя написанный копирайтером текст, верстальщик может изменить макет до неузнаваемости. Все тщательно просчитанные дизайнером отступы, подобранный кегль может исчезнуть из-за полотна текста. Идеальный вариант — макет, разработанный под конкретный контент. Однако, если написанного текста нет, можно поступить в обратном порядке — дать ТЗ копирайтеру под дизайн. Так обе стороны окажутся в выигрыше.

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

Требуется определенная работа с типографикой. Лучше, если характеристики шрифта будут выражены в целом значении (кегль 12,342 лучше заменить на 12). Также если дизайнер не применяет стандартные веб-шрифты из Google Fonts, лучше приложить используемую типографику к макету (в ttf или других форматах, удобных для разработчика).

Создание анимации

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

Анимацию можно создать в Photoshop или предназначенных для этого программах: Adobe Animate, Adobe After Effects, Principle и прочее.

Другие способы найти взаимопонимание с верстальщиком

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

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

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

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

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

Верстка веб-сайтов

10 ноября 2020 года. Опубликовано в разделах: Азбука терминов. 20667

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

Что нужно знать для верстки сайтов? Как минимум, основы работы с графическими редакторами (Photoshop, Gimp, Krita), язык HTML, CSS, библиотеки Java Script (JS).

Если мы нажмем в браузере правую кнопку мыши и выберем «Просмотреть HTML-код», то увидим следующее:

Это и есть сверстанная веб-страница.

Виды верстки

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

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

    Верстка сайта: с чего начать

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

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

    • Вырежите иконки, кнопки, картинки. Сложите графику в отдельную папку.
    • Выпишите шрифты, которые необходимо будет отразить в CSS.
    • Создайте файлы index.html и styles.css (можно назвать их по-другому). HTML – это будущая сверстанная страница сайта, CSS – файл стилей.
    • Начинайте с шапки. Пропишите базовые элементы в теге head файла HTML. Здесь следует указать кодировку, путь к таблице стилей, title и т.д.
    • Стратегия верстки. С левого угла дизайн-макета по диагонали вниз начинайте описывать страницу. Сначала «одевайте» в HTML шапку сайта (слева направо), потом спускайтесь ниже и заканчиваете переносом в код правой нижней части макета. Вы можете нарушить данное правило и производить верстку так, как вам удобно.
    • Сначала верстайте структуру веб-страницы в HTML. Затем в CSS выносите идентификаторы и классы. Это можно делать параллельно с версткой. Каждый класс должен иметь адекватное название, которое дает понимание, что он означает. Смешно и непрофессинально выглядят названия типа «verh_shapki», «cherny_shrift_konec» и т.п.
    • Закрывайте все теги, проверяйте правильность их вложения.
    • Работа над HTML заканчивается, и верстальщик полностью переходит на работу с файлом стилей: дополняет его, дорабатывает и т.п.
    • Стилизация выполняется в определенном порядке. Сначала элементу задаются общие правила (фон блока, отступы), затем специфические свойства типа цвета рамок, размещение картинок внутри блока и т.п..
    • Возвращайтесь обратно к HTML-файлу, если странице необходима динамика. Для этого предусмотрены JavaScript-библиотеки. Например, можно сделать меняющийся слайдер или адаптивное меню. Код библиотек должен быть минимизирован.
    • Тестирование и проверка на ошибки. Проверьте, как ведет себя страница в разных браузерах при разных разрешениях монитора. Можно пользоваться онлайн-сервисами или специальными инструментами типа
    • Изучите страницу на валидность – отсутствие ошибок в коде.

    Какая верстка считается качественной

    • Блочная – с применением

    Инструменты верстальщика

    • Обработка изображений: Adobe Photoshop, Gimp, Krita.
    • Работа с кодом: Notepad++, Adobe DreamViewer, SublimeText, CoffeeCup HTML Editor, UltraEdit,Firebug, Winless, CSS3 Generator
    • Работа с JS: Front Page, NetBeans.
    • Проверка на кроссбраузерность и валидность: Crossbrowsertesting, IE Tester, Dr Watson, Validator.w3, Css validator, Markup validtor.

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

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

    – Технический аудит.
    – Оптимизация.
    – Коммерческие факторы.
    – Внешние факторы.

    Мы не просто говорим, в чем проблемы. Мы помогаем их решить

    Правильная верстка шаблона — советы новичкам и не только…

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

    Итак, теперь перейдем к нашей теме. Говорить сегодня будем про верстку. Почему я решил написать данный пост? Есть тому причины. А именно? Моя основная работа — это разработка сайтов, т.е. я создаю сайты клиентам на заказ. Естественно в этом деле не без конкурентов. Часто приходится сталкиваться с работой других верстальщиков. За 5 лет работы я накопил огромный опыт в верстке, но я тем не менее не считаю себя прям гуру верстальщиком и профи, мне есть еще чему учиться. Но извините меня, мне попадаются такие работы верстальщиков, что хочется кричать и вопить на весь интернет — корявая верстка, ужасно написанный код, скорость оставляет желать лучшего. И что самое главное, клиент ведь доволен. В общем, решил открыть глаза хоть немногим на это безобразие.

    Основные моменты я разделил по группам.

    Код Html и Css

    Использование разметки html5

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

    Использование разметки html5 открывает намного больше возможностей верстальщику. Так зачем же тогда использовать устаревшие методы. Признаться честно есть такие люди, которые не любят что то менять, как привыкли работать по старинке, так и работают… Работая в данной сфере, которая развивается катастрофически бурными темпами таким быть нельзя. Если вы такой человек, то я советую вам задуматься — а тем ли вы делом занимаетесь…

    Комментарии в коде

    Комментарии в коде очень важны. Да, они увеличивают немного вес файла, но лично для меня это не принципиально. Для меня важнее удобство. Следует иметь ввиду, что данным кодом, что вы настрочили могут пользоваться не только вы, но и другие верстальщики. Также здесь же отмечу, что когда вы пишете код, то разделяйте стили отдельными блоками. В роли разделителей как раз будут выступать комментарии. Что значит отдельными блоками? Это значит, что если вы пишете стили для определенного блока на сайте, например, стили сайдбара, то пишите их подряд сверху вниз в одном месте, отделив его от других стилей комментариями — начала кода, конец кода. Вот примерно так:

    И удобно, и визуально красиво.

    Скрипты и стили только на нужных страницах

    Если открыть исходный код любого шаблона, то заметим, что в голове документа (head) бывает подключено много стилей и скриптов. Следует отметить, что страница загружается сверху вниз и соответственно мы не увидим нижний блок, пока не загрузятся все верхние элементы, включая стили и скрипты. Если у вас есть скрипы и стили, которые работают только на определенных страницах, то потрудитесь сделать так, чтобы они загружались именно на данных страницах, а не на всех страницах сайта. Ведь каждый подключенный скрипт или файл стилей уменьшает скорость загрузки страницы. Я уверен в любой cms это можно реализовать на раз, два.

    Лишние пробелы в html и css

    Иногда открываешь шаблон, в котором уже потрудился так называемый опытный верстальщик и видишь огромные пустые пространства между строчками кода. Зачем создавать такие большие пробелы? Если кто не знает — пробел это тоже символ, а лишние символы увеличивают вес файла. Таким образом, мы тратим бесценные ресурсы на загрузку вот этих самых бесполезных символов.

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

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

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

    Как сверстать сайт?

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

    В этой статье я покажу, как сверстать его из PSD-макета в готовую веб-страницу, используя инструменты HTML-разметки и каскадные таблицы стилей (CSS).

    Вообще подходов к подготовке шаблонов существует множество: кто-то сначала досконально прорисовывает шаблон и только потом занимается вёрсткой, кто-то отрисовывает дизайн приблизительно, добавляя штрихи во время вёрстки; одни сначала рисуют, затем занимаются нарезкой, другие (как мы в прошлой статье) сохраняют графические объекты непосредственно в процессе создания дизайна. Даже инструменты вёрстки и рисования у каждого свои: одни ставят плагины и работают в визуальных редакторах, другие используют стандартный набор возможностей и верстают в простом редакторе… в общем, ниже будет приведён всего лишь один способ из многих.

    Подготовительный этап

    Итак, создайте где угодно (хоть на Рабочем столе, хоть в отдельной папке) файл index.html. В этот же каталог добавьте директорию images. Она будет содержать все картинки, используемые в шаблоне и на странице. Так как графические элементы мы вырезали заблаговременно, сразу скопируем их в папку images и дадим такие названия:

    • back_all — подложка сайта.
    • header_top — фон шапки.
    • big_pic — логотип.
    • title — фон заголовков левой панели.
    • footer — заливка низа сайта.
    • 1mini — первое фото для основной части страницы.
    • 2mini — второе фото.

    В папке со страницей index.html создайте файл styles.css — в нём будут размещены таблицы стилей шаблона.

    Блокнот для редактирования кода использовать не рекомендуется. Гораздо лучше для этой цели подходит редактор Notepad++. Это подсвечивающая синтаксис разных языков (HTML и CSS — в том числе) программа, заниматься разработкой в которой гораздо удобней, чем в простых редакторах текстовых документов.

    Делим документ на блоки

    Откройте документ index.html и впишите в него следующий код:

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

    Блоков у нас 7, перечислим их по идентификатору (значению атрибута >

    1. content — блок, внутри которого будут храниться остальные блоки.

    2. header — блок шапки, внутри которого будут:

    2.1. menu — верхняя навигация.

    2.2. logo — картинка с текстом.

    3. right — основная часть страницы.

    4. left — панель слева.

    5. footer — низ сайта.

    Так и запишем (в контейнер вставьте следующий код):

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

    Устанавливаем базовое форматирование

    Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.

    Откройте style.css и добавьте туда строки кода, которые встретите ниже.

    Убираем отступы и поля на странице по умолчанию:

    Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши:

    Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:

    Определение блока content:

    Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background класса body.

    Оформляем горизонтальное меню

    Начало есть, и теперь можно приступать к вёрстке уже непосредственно основных блоков.

    Начнём, конечно, с шапки. Которая, в свою очередь, состоит из блоков горизонтального меню и логотипа.

    Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px:

    Так мы получили своего рода пространство шапки: белый прямоугольник, на котором будут располагаться её элементы.

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

    Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок:

    Страница в обозревателе тут же преобразится и будет выглядеть так.

    Теперь можно добавить и само меню в файл index.html:

    Обновив страницу можно увидеть, что оно действительно появилось.

    Только вот вид ссылок оставляет желать лучшего. Установим для них свои правила (выравнивание, ширину, цвет, жирность и т. д.), а ссылкам при наведении зададим смену цвета и вернём убранное по всему шаблону подчёркивание:

    Теперь форматирование меню можно сопоставить с PSD-шаблоном.

    Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover).

    Настраиваем логотип

    Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться.

    Логотип вставлен ровно по размеру.

    Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo файла index.html, чтобы получилось:

    Текст появился, но его тоже нужно оформлять.

    Исходя из того, что логотип почти всегда бывает ссылкой, зададим оформление соответствующим классам.

    Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков CSS. Однако внешний вид текста изменился, и в целом шапка теперь выглядит даже лучше, чем на PSD-макете.

    Верстаем основную часть страницы

    Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).

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

    Заполним контейнер right. Изображения поместим в простую таблицу.

    Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро.

    Создание левой панели

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

    Ситуации, когда приходится дорабатывать оформление «на ходу», встречаются довольно часто. Расстояние между меню и основным содержимым позволяет нам вставить подпункты, однако интересен фокус с исчезновением и появлением подменю.

    В файл CSS впишите следующий код.

    Обратите внимание на правила классов ul и li — секрет исчезновения меню находится там, раскройте его самостоятельно.

    В контейнер left HTML-документа добавим сначала информационный блок без меню.

    Белый фон распространился ещё ниже по странице.

    Теперь самое время вставить в HTML-файл код меню левой панели. Оно, в отличие от верхней навигации, реализовано списками, что можно было заметить ещё из CSS-правил.

    Взгляните, как смотрится список. Многие могут подумать, что это таблица.

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

    Делаем ноги

    Завершающая часть шаблона — футер. Простое оформление, из элементов только абзацы и ссылки.

    Обычно в футере размещается вспомогательная информация, добавим её в HTML-код (контейнер footer).

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

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

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

    • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
    • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
    • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

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

    Ссылка на эту страницу:

    Встроить HTML код видео:

    Видео на тему: Верстка сайта с нуля на HTML5 и CSS3

    Верстка сайта с нуля — Как правильно и быстро сверстать органичный шаблон

    Уроки от профессионалов.

    Что говорит автор видео:

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

    Ссылки из видео:

    1. VDSina сервер: http://bit.ly/2N3Pucm
    2. Макхост: https://mchost.ru/
    3. VestaCP: http://vestacp.com/install/
    4. Код и все материалы: https://itproger.com/course/one-lesson/16

    Сообщество программистов: https://itproger.com/

    • Вступай в группу Вк — https://vk.com/prog_life
    • Группа FaceBook — https://goo.gl/XW0aaP
    • Instagram: https://www.instagram.com/gosha_dudar/
    • Telegram: http://t.me/itProger_official
    • Twitter — https://twitter.com/GoshaDudar

    Уроки от #GoshaDudar
    Все уроки по хештегу #goshaLessons

    Коллаж на тему Верстка сайта с нуля

    Для удобства просмотра и изучения можно использовать формат видео-галереи.

    Как сверстать сайт профессионально — 75 видео

    Все основы верстки HTML и CSS в одном уроке для начинающих с нуля. Верстаем реальный макет сайта (лендинга) из Photoshop. СКАЧАТЬ МАКЕТ И ФАЙЛЫ верстки для ДЗ: https://wayup.in/lm/load/lm30 И еще кое что.

    Посмотрите другие видео о верстке:

    День Верстальщика: Верстка С Нуля ☉ HTML/CSS/Адаптив — https://www.youtube.com/watch?v=xlwPU0BRQKQ

    Создаем Сайт-Блог С Нуля За 4 Часа ☸ Photoshop/HTML/CSS/CMS — https://www.youtube.com/edit?o=U&v >
    Как Сверстать Сайт Адаптивно? HTML/CSS — https://www.youtube.com/watch?v=ROn-glSIKO8

    Подписывайтесь на мой канал: https://www.youtube.com/c/wayupin?sub_confirmation=1

    Спасибо за просмотр!

    Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись.

    Все основы верстки HTML и CSS в одном уроке для начинающих с нуля. Верстаем реальный макет сайта (лендинга) из Photoshop. СКАЧАТЬ МАКЕТ И ФАЙЛЫ верстки для ДЗ: https://wayup.in/lm/load/lm30 И еще кое что.

    Посмотрите другие видео о верстке:

    День Верстальщика: Верстка С Нуля ☉ HTML/CSS/Адаптив — https://www.youtube.com/watch?v=xlwPU0BRQKQ

    Создаем Сайт-Блог С Нуля За 4 Часа ☸ Photoshop/HTML/CSS/CMS — https://www.youtube.com/edit?o=U&v >
    Как Сверстать Сайт Адаптивно? HTML/CSS — https://www.youtube.com/watch?v=ROn-glSIKO8

    Подписывайтесь на мой канал: https://www.youtube.com/c/wayupin?sub_confirmation=1

    Спасибо за просмотр!

    Верстка сайта с нуля. Начало, шапка сайта.

    Наконец то на канале верстка адаптивного сайта с нуля. В этом видео я покажу процесс создания сайта для новичков. Мы начнем проект с самого начала, с создания index.html и последующей адаптивной версткой. В этом курсе верстки мы сделаем полноценный сайт с несколькими страницами за 10 уроков. В нем будут различные компоненты от применения flexbox с css grid до встраивания видео и слайдеров на сайт. Вообще html верстка это занятие не сложное но творческое и весьма время затратное. Курсы верстки я разделил на уровни. В данном курсе первого уровня будут самые простые моменты верстки.

    Промокод на 3 месяца бесплатного хостинга по тарифу Мак-10 — WebDeveloper (вводить при регистрации на сайте https://billing.mchost.ru/order.php?hosting=1&plan_ >
    Группа вк: https://vk.com/developblog
    Пост с логотипом в группе: https://vk.com/developblog?w=wall-110872645_500

    Современная верстка сайта — Начинаем с нуля

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

    Группа вк: https://vk.com/developblog
    Ссылка на шаблон: https://vk.com/developblog?w=wall-110872645_630

    Верстка сайта HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная версия

    Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись. Таймкоды и PSD макет ниже в описании.
    Бесплатный виджет обратной связи на сайт: https://www.spikmi.com/

    Разбираем основы верстки HTML и CSS в одном уроке для начинающих с нуля. Верстаем реальный макет сайта (лендинга) из Photoshop.

    СКАЧАТЬ МАКЕТ: https://mega.nz/#!bt0zTYYI!CwkKtOFtMC-Zb6G—0AyW7IiImwg3ODQzDS2mQSwR5A

    ТАЙМ КОДЫ К ВИДЕО:

    00:00 Введение
    00:30 Реклама
    02:07 Экспорт графики для верстки из Photoshop
    03:40 Экспорт графики для верстки из Avocode
    05:55 Разбираемся со шрифтами.
    07:10 Оцениваем макет — сетка и контейнеры
    09:25 Начало верстки
    11:10 Google Fonts
    14:23 Верстка навигации
    28:46 Верстка шапки
    01:10:23 Блок Инструкторы
    01:21:10 Блок Посты в блоге
    01:36:26 Блок CTA (Заголовок с кнопкой)
    01:42:08 Блок Подвал (Footer)

    Данное видео входит в серию из 2-х уроков:
    1. Верстка HTML + CSS За 2 Часа: https://www.youtube.com/watch?v=ZY6DaPHYO34&t=5568s
    2. Адаптивная верстка HTML + CSS: https://www.youtube.com/watch?v=uIYa_9jtSRM

    Плейлист серии уроков:
    https://www.youtube.com/playlist?list=PLRoXQfrhqdOo-dmbtHNj4hktKE5w3qCTk&disable_polymer=true

    �� Бесплатный курс по верстке сайтов: http://webcademy.ru/htmlsite/
    �� Курс для начинающих «Профессия: Верстальщик»: http://webcademy.ru/htmlstart/
    �� Продвинутый курс «Веб-разработчик. Frontend и Backend»: http://webcademy.ru/webdev/

    �� Сайт школы: http://webcademy.ru
    �� Наша группа Вконтакте: https://vk.com/webcademy
    �� Телеграм-чат для верстальщиков: https://t-do.ru/webcademychat

    Процесс верстки сайта с нуля до выгрузки 5,5 часов // Марафон Верстки 1.0

    Если хочешь скачать PSD макет и шрифты, переходи по ссылке:
    http://glo-academy.ru/psd2money/first/

    Получить нужные материалы для любого веб-разработчика — https://taplink.cc/glo_web_academy

    Получить консультацию куратора — http://bit.ly/2Ym5SqS

    Связаться с автором: https://vk.com/aislam23
    Мой блог: https://vk.com/islamov_blog

    Архив с исходником bootstrap: https://yadi.sk/d/4dviXOWqwTTjC

    Плавный скролл до якоря: http://vk.cc/4mTp13
    Плавный эффект hover: http://vk.cc/Xay8p
    Конвертер шрифтов: http://vk.cc/3DZJzH
    Анимация css: http://daneden.github.io/animate.css/
    wow.min.js: http://vk.cc/5eFfPL
    Слайдер fotorama: http://fotorama.io/
    Расширение для chrome для адаптива: http://vk.cc/5eFk8K

    Больше контента в нашей группе Вконтакте
    https://vk.com/glo_academy
    Присоединяйтесь к нашему сообществу Discord
    https://discord.gg/k5XzZ68

    Мой канал в telegram «Лысый из браузера»
    https://tele.click/baldfrombrowser
    ————
    Я использую хостинг Link Host с 2014 года
    https://link-host.net/billing/pl.php?1786

    Адаптивная верстка сайта. HTML5 + CSS3 За 90 минут. Из PSD. С Нуля.

    Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись. Бесплатный виджет обратной связи на сайт: https://www.spikmi.com/

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

    Данное видео входит в серию из 2-х уроков:
    1. Верстка HTML + CSS За 2 Часа: https://www.youtube.com/watch?v=ZY6Da.
    2. Адаптивная верстка HTML + CSS: https://www.youtube.com/watch?v=uIYa_.

    Плейлист серии уроков: https://www.youtube.com/playlist?list=PLRoXQfrhqdOo-dmbtHNj4hktKE5w3qCTk

    СКАЧАТЬ МАКЕТ: https://mega.nz/#!bt0zTYYI!CwkKtOFtMC-Zb6G—0AyW7IiImwg3ODQzDS2mQSwR5A

    ТАЙМ КОДЫ К ВИДЕО:

    02:13 Медиазапросы
    05:00 Адаптация блока навигации
    16:41 Адаптация шапки
    54:54 Адаптация блока Интсрукторы
    01:05:45 Адаптация блока Посты в блоге
    01:19:02 Адаптация блока CTA (Заголовок с кнопкой)
    01:20:17 Адаптация Подвала (Footer)

    �� Бесплатный курс по верстке сайтов: http://webcademy.ru/htmlsite/
    �� Курс для начинающих «Профессия: Верстальщик»: http://webcademy.ru/htmlstart/
    �� Продвинутый курс «Веб-разработчик. Frontend и Backend»: http://webcademy.ru/webdev/

    �� Сайт школы: http://webcademy.ru
    �� Наша группа Вконтакте: https://vk.com/webcademy
    �� Телеграм-чат для верстальщиков: https://t-do.ru/webcademychat

    Учим HTML за 1 Час! #От Профессионала

    Хотите выучить HTML всего за 1 Час и при этом сделать это качественно? — Тогда смотрите от профессионала как!

    Подпишись и поделись видео с друзьями!

    Хочешь зарабатывать на своих видео в YouTube?
    Подключайся! — https://youpartnerwsp.com/join?23195

    #Ссылки из видео:
    1) https://ru.wikipedia.org/wiki/HTML
    2) http://ruseller.com/htmlshpora.php? > 3) http://www.w3schools.com/tags/default.asp
    4) Исходный код получившейся HTML странички http://pastebin.com/qHk9rHyS
    5) Скачать Notepad++ можно тут https://notepad-plus-plus.org/downloa.

    Жми красную кнопку «Подписаться» под видео ��
    Есть вопрос? — Задай его лично мне в наших группах!
    ===
    Наша группа ВКОНТАКТЕ — www.vk.com/howdyho_net
    Наш Twitter — www.twitter.com/howdyho_net

    Почти бесплатные игры из Стима тут — http://bit.ly/SteamAlmostFreeGames

    HTML верстка сайта. Урок 1. Настройка рабочего места

    ��‍�� Обучение веб-разработке: http://webcademy.ru/htmlstart/
    За 2 месяца научим создавать веб-сайты и зарабатывать на этом, используя передовые технологии HTML/CSS/JS/PHP/MySQL.
    �� возможна рассрочка
    �� если курс не понравится, вернём деньги в первую неделю.
    Нужна консультация? → https://vk.com/webcademy

    �� Бесплатный курс «Создай свой первый сайт на HTML5 и CSS3» 7 уроков по 30 мин: http://webcademy.ru/htmlsite/

    Видео урок из бесплатного курса по HTML верстке.
    Чтобы получить файлы макета и готовой верстки, необходимо подписаться на курс. Страница курса: http://webcademy.ru/htmlsite/

    Представляю мини курс по HTML верстке сайта. В данном курсе вы увидите как сверстать сайт HTML из PSD шаблона. Добавить адаптивность к сайту. И сделать внутренние страницы. Этот курс подойдет для тех кто уже освоил азы и основы верстки и хочет сделать сверстать свой первый сайт.

    �� Курс для начинающих «Профессия: Верстальщик. HTML5+ CSS3, основы PHP, JS и jQuery»: http://webcademy.ru/htmlstart/
    �� Продвинутый курс «Веб-разработчик. Frontend и Backend»: http://webcademy.ru/webdev/
    �� Сайт школы: http://webcademy.ru
    �� Наша Группа Вконтакте: https://vk.com/webcademy
    �� Телеграм-чат для верстальщиков: https://t-do.ru/webcademychat

    HTML верстка реального макета от А до Я. Джедай верстки #7 (Все выпуски)

    Полезно? Подпишись на канал: https://goo.gl/o1TVqF
    Приветствую вас, друзья в комплексном видео уроке по адаптивной HTML верстке макета на реальном примере. Данный выпуск является сборником всех выпусков «Джедай вёрстки #7» в одном видеоролике длительностью более 12 часов с подробными объяснениями всех нюансов современной адаптивной HTML верстки. Мы рассмотрим важнейшие моменты использования лучших инструментов и плагинов в профессиональной работе, использование адаптивной Bootstrap сетки для адаптации сайта на мобильных устройствах, использование CSS Flex для быстрой реализации нестандартных приёмов вёрстки, оптимизацию скорости загрузки сайта инструментом Google PageSpeed, а также подробно рассмотрим автоматизацию HTML верстки и правильный деплой проекта на рабочий хостинг с помощью Gulp.

    Референсы для прохождения курса: https://goo.gl/RQ3sYS

    Создание контентного сайта от А до Я: https://goo.gl/ankxq9
    Создание интернет-магазина от А до Я: https://goo.gl/7mDqYD
    Фриланс для начинающих: https://goo.gl/xOPRQ0

    Группа Вконтакте: https://vk.com/agragregra
    Twitter: https://twitter.com/agragregra

    День Верстальщика: Верстка С Нуля ☉ HTML/CSS/Адаптив

    Бесплатный урок (обучение) верстке сайта с нуля на html5, css3, js из psd-макета. Расскажу, как сделать эффекты и анимацию. Работа над настоящим лендингом. Скачать файлы из занятия для прохождения: https://wayup.in/lm/frontend-day?from=xlwPU0BRQKQ

    Еще больше бесплатных мастер-классов для веб-дизайнеров, верстальщиков и фрилансеров: https://www.youtube.com/watch?v=ztYs5mLL2J0&list=PLQ2eyErB1Ejz9GWDzFbp15k7RjzmWf8qm

    300 Сайдбаров ► Как сверстать структуру сайта?

    Знаете HTML, CSS, но Вам всё еще сложно верстать сайдбар, футер, шапку и так далее?
    Научитесь как это делать правильно в этом видео!

    ►►► Второй канал Хауди, подпишись ��
    http://vk.cc/5lPADD

    Человеческие цены на игры Steam и рандомы только тут — http://bit.ly/SteamAlmostFreeGames

    Хочешь зарабатывать на своих видео в YouTube?
    Подключайся! — https://youpartnerwsp.com/join?23195

    #Ссылки из видео:
    1) https://css-tricks.com/snippets/css/clear-fix/

    ► Жми красную кнопку «Подписаться» под видео ��
    ► Есть вопрос? — Задай его лично мне в наших группах!
    ===
    ► Наша группа ВКОНТАКТЕ — www.vk.com/howdyho_net
    ► Наш Twitter — www.twitter.com/howdyho_net

    #Реквизиты для донатства | Поддержи канал!
    Z252920208434
    R250434217196

    Музыкальный трек предоставлен YouTube Audio Library.

    Сколько времени нужно, чтобы научиться верстать сайты?

    Сколько времени нужно, чтобы научиться верстать сайты?

    Photoshop:
    1) https://photoshop-master.ru/
    2) https://photoshop-master.ru/lessons/sait/sozday-dizayn-veb-sayta-v-fotoshop.html
    3) https://photoshop-master.ru/lessons/sait/stilnyiy-maket-dlya-portfolio-v-fotoshop.html
    4) https://photoshop-master.ru/lessons/sait/maket-dlya-delovogo-sayta.html
    5) https://photoshop-master.ru/lessons/sait/sozdam-fotoshop-novogodniy-dizayn-dlya-sayta.html
    6) https://photoshop-master.ru/lessons/sait/sozdam-maket-portfolio-v-fotoshop.html

    Макеты PSD для верстки:
    1) http://tpverstak.ru/free-psd-website-templates/
    2) http://tpverstak.ru/20-free-psd-website-templates/

    HTML:
    1) https://webref.ru/layout/learn-html-css/getting-to-know-html
    2) http://htmlbook.ru/html/

    CSS:
    1) Книга «Изучаем HTML, XHTML и CSS» — Элизабет Фримен, Эрик Фримен
    2) http://flexboxfroggy.com/
    3) http://yoksel.github.io/flex-cheatsheet/
    4) http://cssgridgarden.com/
    5) http://htmlbook.ru/css/

    jQuery:
    1) https://www.w3schools.com/jquery
    2) http://kenwheeler.github.io/slick

    Задай вопрос и получи онлайн-ответ от фронтенд разработчика бесплатно — https://frontendhelp.me/ru

    Курс «Супер Старт» — http://tpverstak.ru/super-start/
    Отзывы — https://vk.com/topic-149247708_36129364

    Базовый курс — http://tpverstak.ru/training/
    Продвинутый курс — http://tpverstak.ru/training-profi/
    Отзывы — https://vk.com/topic-149247708_35960122

    Программа базового: https://goo.gl/fvB8zC
    Программа продвинутого: https://goo.gl/58v3yg

    Сайт — http://tpverstak.ru
    ВК — https://vk.com/tpverstak
    Instagram — https://www.instagram.com/tpverstak/
    Telegram — https://t.me/tpverstak и https://t.me/annbloknote
    Чат Telegram — https://t.me/tpverstakchat

    Верстаем Landing Page С Нуля За 3 Часа [HTML/CSS/JS]

    Урок по верстке Landing Page (одностраничного сайта) на HTMl/CSS/JS с нуля под присмотром профессионала. Скачайте макет .psd и файлы верстки БЕСПЛАТНО: https://wayup.in/lm/load/lm52

    Подпишитесь на мой канал: https://www.youtube.com/c/wayupin?sub_confirmation=1

    Посмотрите полезные мастер-классы:

    Создаем Адаптивный Сайт На Bootstrap 4 За 2 Часа —
    https://www.youtube.com/watch?v=SQIh8SBXc5c

    Как Работать На Фрилансе Веб-Дизайнером + Экскурсия В Яндекс — https://www.youtube.com/watch?v=CUi_qUoeHRs&t=1414s

    HTML/CSS/JS: 10 Ошибок Начинающих Верстальщиков — https://www.youtube.com/watch?v=paWoMWy3n7A
    —————

    Верстка сайта с нуля по макету — Начинаем верстку. Введение

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

    WBLOGHOST – скидка 40% на любой пакет виртуального хостинга по ссылке https://goo.gl/REHcV7
    Если надоел ваш текущий хостинг, то HOSTiQ перевезет бесплатно на оставшийся оплаченный срок у старого хостера. Подробнее: https://goo.gl/VtePab

    Ссылка на макет: https://vk.com/developblog?w=wall-110872645_600

    Верстка сайта с нуля до публикации за 7 часов // Марафон Верстки 3.0

    Если хочешь скачать PSD макет, переходи по ссылке:
    http://glo-academy.ru/psd2money/third/

    Получить нужные материалы для любого веб-разработчика — https://taplink.cc/glo_web_academy

    Получить консультацию куратора — http://bit.ly/2Ym5SqS

    Связаться с автором: https://vk.com/aislam23 telegram: https://t.me/aislam23
    Мой блог: https://vk.com/islamov_blog

    Больше контента в нашей группе Вконтакте
    https://vk.com/glo_academy
    Присоединяйтесь к нашему сообществу Discord
    https://discord.gg/k5XzZ68

    Мой канал в telegram «Лысый из браузера»
    https://tele.click/baldfrombrowser

    Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
    http://vk.me/glo_academy
    —————————————————————————————————————-
    В этом видео я покажу процесс создания landing page с нуля до выгрузки на хостинг.
    Пожалуйста, если вы нашли ошибку — напишите в комментариях. Свои вопросы тоже пишите в комментарии.
    При верстке используется фреймворк Boostrap 3. Что это такое и урок по фремворку можно посмотреть тут: https://youtu.be/pIRF9SaL6ic
    Также используется препроцессор Less для облегчения написания css кода. Урок по препроцессору здесь: https://youtu.be/GHYPsEDd_bs
    ————
    Я использую хостинг Link Host с 2014 года
    https://link-host.net/billing/pl.php?1786

    Онлайн верстка интернет магазина.

    Видео где мы онлайн верстали интернет магазин по PSD макету.

    .
    Ссылка на макет: https://yadi.sk/d/Ay_kFVnW3a5Qsz
    .

    .
    ��‍�� Обучение веб-разработке: http://webcademy.ru/htmlstart/
    За 2 месяца научим создавать веб-сайты и зарабатывать на этом, используя передовые технологии HTML/CSS/JS/PHP/MySQL.
    �� возможна рассрочка
    �� если курс не понравится, вернём деньги в первую неделю.
    Нужна консультация? → https://vk.com/webcademy

    �� Бесплатный курс «Создай свой первый сайт на HTML5 и CSS3» 7 уроков по 30 мин: http://webcademy.ru/htmlsite/

    �� Курс «Профессия HTML Верстальщик»: http://webcademy.ru/htmlstart/
    �� Продвинутый курс «Веб-разработчик. Frontend и Backend»: http://webcademy.ru/webdev/
    �� Сайт школы: http://webcademy.ru
    �� Наша Группа Вконтакте: https://vk.com/webcademy
    �� Телеграм-чат для верстальщиков: https://t-do.ru/webcademychat
    .

    .
    ТАЙМ КОДЫ К ВИДЕО:

    00:27 — Приветствие.
    05:30 — Рассматриваем стоимость вёрстки.
    07:10 — Рассматриваем процесс разработки сайта.
    07:45 — История создания одного сайта.
    26:25 — Приступаем к практике.
    27:00 — Знакомство с макетом.
    1:02:20 — Вёрстка — «Логотипа и Навигации».
    1:06:30 — Скачиваем бутстрап сетку.
    1:40:15 — Ответы на вопросы в чате.
    1:41:20 — Вёрстка Хедера.
    2:02:05 — Ответы на вопросы в чате.
    2:13:30 — Вёрстка блока с товарами.
    2:21:03 — Ответы на вопросы в чате.
    2:22:20 — Вёрстка карточек.
    2:33:52 — Ответы на вопросы в чате
    2:41:42 — Вёрстка блока – “Get something you love”.
    2:51:20 — Верстаем блок с брендами.
    2:54:30 — Ответы на вопросы в чате.
    2:57:10 — Вёрстка блока – “Fetured Products”.
    3:08:25 — Ответы на вопросы в чате.
    3:09:55 — Вёрстка блоков – “Blog Posts и футер”.
    3:12:15 — Ответы на вопросы в чате.
    4:06:20 — Презентация Марафона 11 услуг по веб-разработке.
    4:09:05 — План марафона 11 услуг по веб-разработке.
    4:19:15 — Ответы на вопросы в чате.
    .

    Основы Верстки HTML5 / CSS3 С Нуля За 3 Часа

    Верстка сайта с нуля на Bootstrap 4 — Адаптивный сайт

    Мы продолжаем курс по bootstrap верстке адаптивного сайта с нуля. В верстке сайтов главное усидчивость и внимание, дело это совсем не трудное, просто применяете приобретенные ранее на практике знания. Bootstrap верстка сайта это совсем просто, главное понять сам принцип и следовать ему в каждой секции адаптивного сайта применяя нужные классы. В данном уроке по верстке сайта мы применим все необходимые классы и я вкратце расскажу про hover эффекты css фреймоврка material design bootstrap.

    Bootstrap верстка современного сайта за 45 минут!

    Урок на сайте itProger: https://itproger.com/course/one-lesson/3

    Как создать сайт на Bootstrap 4? В этом видео мы с вами создадим полноценный адаптивный сайт на Bootstrap всего за 45 минут. Верстка сайта дело несложное, поэтому вы научитесь делать отличные сайты всего за 45 минут!

    ✔ Основной сайт: https://itproger.com/

    ✔ ————-
    Группа Вк — https://vk.com/prog_life
    Группа FaceBook — https://goo.gl/XW0aaP

    Instagram: https://www.instagram.com/gosha_dudar/
    Я в Google+ — https://goo.gl/Tqt9W0
    Страничка Twitter — https://twitter.com/GoshaDudar
    Страничка Вк — https://vk.com/codi999

    ✔ Начните зарабатывать на YouTube — http://join.air.io/money_air
    ✔ Видео по заработку на YouTube — https://goo.gl/RLPXV8

    Помощь в развитии канала.
    * Яндекс Деньги: 410014343706921

    * Кошельки WebMoney:
    — Доллар: Z331064341236
    — Гривна: U386388718252
    — Рубль: R214610220703

    Верстка сайта HTML + CSS

    1) Как организовать проект
    2) Первоначальный шаблон
    3) Сброс стилей
    4) Подключение js, css
    5) Проверка работы js
    6) Первоначальная верстка, как сделать шапку, тело, футер

    Используемые технологии: HTML, CSS, JavaScript

    Компьютерная Школа Hillel

    site: http://itschool-hillel.org
    тел.: +38 (097) 156-58-27

    fb: https://www.facebook.com/hillel.it.school
    vk: https://vk.com/hillel_itschool_kiev
    in: https://www.instagram.com/hillel_itschool
    tw: https://twitter.com/hillel_itschool
    ln: https://www.linkedin.com/company/hillel_itschool
    yt: https://www.youtube.com/user/hillelitschool
    g+: https://plus.google.com/107393502085367390120

    Как сверстать сайт с нуля на HTML5 и CSS3 — полноценное руководство

    Как стать начинающим верстальщиком

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

    Учим HTML/CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Javascript и jQuery

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

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

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

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

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

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

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

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

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

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

    IDE PHPStorm

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

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

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

    Практика

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

    Блочная верстка сайта с нуля. Урок 1

    Существует 2 вида верстки:

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

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

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

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

    Итак, начнем. Для примера я взял простой прототип, макетом его нельзя назвать, нормальный макет рисуется в psd формате, а у нас он в jpg. Нам главное понять принцип как же верстать сайты с помощью блочной верстки. Чтобы работать с блочной версткой нужно знать не только html, но и css (каскадные таблицы стилей). В ходе цикла статей по верстке сайта, мы как раз с вами и изучим тот набор css стилей, который в дальнейшем вам всегда поможет верстать практически любые каркасы макетов/мокапов, ведь принцип один и тот же.

    Итак, вот макет (кликабельно).

    Мы видим у него 4 логические части:

    • Шапка сайта (далее будем называть header, хедер);
    • Левая колонка (далее будем называть left sidebar);
    • Правая колонка (далее будем называть content);
    • Подвал (далее будем называть footer, футер);

    Итак, начнем конечно же с блока хедер. У нас мокап шириной 1000 пикселей (px).

    Для начала скажу, что верстка делается с помощью html тегов. Например,

    Топ-пост этого месяца:  HotLog — регистрация в рейтинге сайтов и получение кода счетчика посещений
    Добавить комментарий