3 способа, как сделать верстку сайта для любых целей


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

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

Содержание

Когда возникает потребность в собственном портале, становится ребром вопрос о его верстке. Что такое верстка? Это процесс формирования страниц путем прописывания кода.

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

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

Начиная верстку, проверьте все ли из приведенного списка уже готово:

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

Тип ресурса

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

Существуют такие виды сайтов:

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

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

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

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

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

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

Интернет магазин пожалуй один из самых сложных типов интернет проектов. Уроки верстка сайта вряд ли помогут в этом не легком занятии.

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

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

Тут будет недостаточно поверхностно знать HTML и CSS.

Лендинг создается в первую очередь для продажи какого-то одного товара. Чаще всего это какая-то новинка или редкое изобретение.

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

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

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

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

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

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

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

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

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

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

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

Дизайн сайта

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

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

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

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

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

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

Уроки верстка сайта также помогут вам разобраться в правильности расположения контента на странице.

Тип верстки

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

  • фиксированная;
  • адаптивная;
  • растягивающаяся;
  • блочная.

Фиксированная верстка

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

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

Адаптивная верстка сайта

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

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

Растягивающийся дизайн

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

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

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

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

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

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

Так что именно этот способ создает наиболее красивый и гармоничный дизайн.

Сегодня регистрация в каталогах не является больше эффективным способом продвижения сайта.

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

Хотите продвинуть свой сайт через Яндекс.Директ? Здесь есть полезные советы по этой теме.

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

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

Существует два типа программ для верстки сайта:

  • визуальные редакторы;
  • текстовые редакторы.

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

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

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

Вот список наиболее популярных визуальных редакторов для верстки сайта:

    Macromedia Dreamweaver MX – это профессиональный инструмент для верстки сайтов, который хорошо проработан и любим многими разработчиками. На данный момент

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

Adobe GoLive и LiveMotion очень простые редакторы. Они в первую очередь подойдут любителям продуктов корпорации Adobe. Эти программы очень простые, они легко поддерживают HTML, CSS, XML для верстки сайта.

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

  • Microsoft FrontPage предоставляет своему пользователю очень широкий функционал возможностей. В этой программе можно создавать полномасштабные сетевые узлы. Программа умеет работать с практически любыми видами кода.
  • Hotdog маленькая программа, которая дает возможность очень просто заниматься версткой сайта, без особых сложностей. Она работает со всеми доступными видами кода, однако не понимает flash ролики.
  • Текстовые редакторы представляют собой обычные программы, чем то похожие на стандартный Блокнот в Виндоус. Однако текстовая программа для верстки сайта предоставляет пользователю удобный функционал, такой как подсветка кода.

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

    Список наиболее популярных текстовых редакторов для верстки сайта:

    • Homesite – это программа, которая предоставляет полную подсветку всех существующих типов кода. Это очень мощный редактор, который умеет проверять правильность кода на онлайн сервисе. Является наиболее популярной программой для верстки сайта.
    • HTML Pad заслужила так же большую популярность. В частности, она имеет возможность пользоваться макросами, такие как в Word и Exel.
    • Notepad он же Блокнот. Стандартная программа для редактирования текстовых файлов, когда то на ней писалось абсолютно все. До сих пор пользуется своей популярностью из-за доступности и понятности.

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

    • Видеокурсы по адаптивной верстке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Топ-пост этого месяца:  Twitter тестирует всплывающий профиль в ленте

    После того как документ раскроен. Его можно «Экспортировать для 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. Бесплатный мини-курс по вёрстке сайта.

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

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

    Адаптивная верстка: что это и как использовать

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

    В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.

    Регулировка разрешения экрана

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

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

    Частичное решение: делаем все гибким

    Конечно, это не идеальный способ, но он устраняет большую часть проблем.

    Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой верстки:

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

    Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Джилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».

    8–9 ноября, Москва, 12 600–151 200 ₽

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

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

    Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

    Гибкие изображения

    Работа с картинками — одна из самых главных проблем при работе с адаптивным дизайном. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:

    Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100% .

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

    Еще один способ: отзывчивые изображения

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

    Для использования данной техники требуется несколько файлов, доступных на Github. Сначала берем JavaScript-файл (rwd-images.js), файл .htaccess и rwd.gif (файл изображения). Потом используем немного HTML, чтобы связать большие и маленькие разрешения: сначала маленькое изображение с префиксом .r (чтобы показать, что картинка должна быть адаптивной), потом ссылка на большое изображение с помощью data-fullsrc :

    Для любого экрана шире 480 px загрузится изображение с большим разрешением (largeRes.jpg), а на маленьких экранах загрузится (smallRes.jpg).

    Интересная фича для iPhone

    В iPhone и iPod Touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной верстки. Однако изображений и текста не будет видно:

    Для решения данной проблемы используется тег meta :

    Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

    Настраиваемая структура макета страницы

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

    Например, у вас есть главный файл со стилями, который задает #wrapper , #content , #sidebar , #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

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

    Медиазапросы CSS3

    Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width , то стили будут проигнорированы. max-width делает противоположное.

    Медиазапрос заработает только когда min-width будет больше или равна 600 px.

    В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.

    В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width :

    Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

    Также значения медиазапросов можно комбинировать:

    Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

    Загрузить определенный лист со стилями для разных значений медиазапросов можно так:

    JavaScript

    Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

    Опциональное отображение контента


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

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

    display: none используется для объектов, которые нужно спрятать.

    Вот наша разметка:

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

    Теперь прячем колонки и показываем ссылки:

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

    Адаптивная верстка или как сделать мобильную версию сайта?

    Как я и обещал, пришла пора рассказать Вам, что такое «Адаптивная верстка» и как сделать мобильную версию сайта под смартфоны и планшеты, а так же понравиться поисковым системам!

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

    Да и трафик с гаджетов растет все больше и больше, день за днем! Веб-мастеру необходимо это учесть.

    Так же рекомендую к прочтению:

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

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

    Вроде бы понятно объяснил?! Кто что не понял? Пишите в комментариях, вместе обсудим.

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

    В один из прекрасных дней мне на электронную почту (впрочем все его получили) пришло такое сообщение:

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

    Мобильный сайт WordPress с помощью плагинов!

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

    Если Вы все же хотите использовать для этой цели плагины, то самые лучшие из них это:

    WPtouch Mobile Plugin — Этот плагин мне понравился больше всего, все довольно просто и понятно, мой блог корректно отображался без каких либо косяков!

    Не буду описывать каждый плагин, сами опробуете и определитесь:

    • MobilePress;
    • WordPress Mobile Pack;
    • Duda Mobile Website Builder;
    • WordPress Mobile Pack;
    • WordPress PDA & iPhone;
    • WPmob Lite;
    • WPtap News Press;
    • WP Mobile Detector;
    • WiziApp.

    Еще минус плагинов в том, что они иногда подглючивают, например захожу через смартфон — все хорошо, повторил еще раз или обновил — показывает обычный сайт! Какая то загадка прям

    Короче меня это не устроило и я продолжил искать лучшее решение!

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

    Если кому интересно, то переделка сайта в адаптивный, стоит примерно от 5.000 рублей и выше. Не советую нанимать горе-специалистов, которые берут дешевле — скупой платит дважды! Да и на отзывы обращайте внимание.

    Ладно, поехали дальше.

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

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

    Варианты создания мобильного сайта?

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

    Отдельная версия сайта — Это своего рода отдельный облегченный сайт, созданный специально для просмотра на мобильных устройствах или с низкой скоростью интернета. Обычно такую версию используют на поддоменах, например — основной сайт https://savme.ru, а мобильный http://wap.savme.ru или http://mobile.savme.ru. В данном случае используется перенаправление.

    • Два независимых сайта — возможность менять контент, не затрагивая при этом другой сайт;
    • Скорость загрузки — так как мобильная версия независима от основной, сделать ее легкой и быстрой не составит труда;
    • Удобство — навигацию и контент проще заточить, вплоть до мелочей, так как сайт полностью рассчитан под мобильную аудиторию.
    • Дублирование контента — так как один и тот же контент будет и в основной версии и в мобильной. Возможно спасет мета-тег rel=canonical, но есть масса и других проблемм.
    • Срез функционала — как не крути но такой сайт будет урезанной копией основного сайта, отсюда совсем другие показатели статистики. Да и основная масса посетителей не любит различного рода ограничений и всегда переходит на основной сайт.
    • Перенаправления — как известно, различного рода редиректы негативно сказываются в сфере SEO.

    Технология RESS — Тут используется вычисление на стороне сервера, смотря с какого устройства был заход — создается тот или иной макет (html и css). Называется это чудо — адаптивный веб-дизайн + специальное программное обеспечение на стороне сервера (RESS — Responsive Web Design и Server S > ).

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

    Адаптивная верстка (веб-дизайн) — Эта верстка сайта подстраивается под любое разрешение экрана путем его определения с помощью CSS3 Media Queries. Как правило используется один и тот же ресурс, который содержит в себе различные варианты для отображения на смартфонах, планшетах и компьютерах.

    • Сохранность — не зависимо от устройства используется один и тот же контент и набор html кодов;
    • Единый URL — для различных макетов используются одни и те же адреса и контент, нет дублей.
    • Скорость загрузки — так как загружаются все элементы и скрипты основного сайта, даже если они скрыты.
    • Навигация — сложность в создании продуманной мобильной навигации.

    Делаем адаптивную верстку самостоятельно

    Для своего блога я выбрал адаптивную верстку по нескольким причинам:

    1. не нужно нарушать целостность основного сайта, блога;
    2. используется один единый контент, одна база данных и так далее;
    3. Лично для меня простота внедрения (потребуются знания html и css).

    Теперь расскажу Вам о том, что нужно сделать, чтобы Ваш ресурс подстраивался под любые разрешения и понравился Google

    Во первых нужно прописать мета-тег в :

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

    Так же, если мы добавим еще и maximum-scale=1.0, user-scalable=no — то этим, мы запретим масштабирование, но я не рекомендую этого делать, пусть человек сам решает, может у него проблемы со зрением.

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

    Это дело нужно будет исправлять с помощью Media Queries в файле стилей CSS, выглядит параметр так:

    @media screen and (min-width:240px) and (max-width:720px) <
    тут теги и атрибуты
    >

    То есть, эти стили будут применяться браузером от минимальной ширины 240px до максимальной 720px устройства! Если больше или меньше этих значений, то будут применены основные стили сайта. Все просто!

    И вот таким макаром мы прописываем стили под разные разрешения устройств. Например:

    • смартфоны вертикально — от 240 до 340, от 341 до 420;
    • смартфоны горизонтально и некоторые планшеты вертикально — от 421 до 540, от 541 до 670;
    • планшеты вертикально — от 671 до 800;
    • планшеты горизонтально — от 801 до 1024

    Если нужно показать какой-либо элемент: display:block, если же спрятать: display:none;

    Чтобы узнать как выглядит сайт или блог на различных устройствах есть замечательные сервисы:

    • http://quirktools.com
    • http://www.emulateurmobile.com/
    • http://webmark.com.ua

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

    На этом у меня все! Надеюсь моя статья Вам реально помогла, в благодарность поделитесь ей =)

    На клиентском сайте записал пример работы адаптивной верстки, если так и не поняли принцип ее работы обязательно смотрим. До скорой встречи! Пишите комментарии.

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

    В предыдущей статье я наглядно показал, как создать макет сайта в программе 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 — блок шапки, внутри которого будут:

    Топ-пост этого месяца:  Проблема индексирования канонических ссылок в Google, вызванная JS

    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 — полноценный платный курс.

    Как вы начинаете вёрстку сайта?

    1. Создаю каталог для проекта
    2. Инициализирую Bower
    3. Устанавливаю нужные пакеты, например, Twitter Bootstrap, Angular, jQuery и т.д.
    4. Ставлю Grunt, плагины для него и т.д.
    5. Запускаю EMACS и создаю index.html
    6. С помощью Emmet создаю шаблон, который уже начинаю заполнять.
    7. В каталоге src создаю папки less, js и т.д.
    8. Попутно пишу задачи для Grunt
    9. Если в выбранном фреймворке не хватает какого-либо класса для стилизации элемента, сначала описываю стили прямо в шаблоне, в свойстве style. Затем при необходимости выношу их оттуда в LESS в виде одного или нескольких классов.
    10. .
    11. PROFIT.

    В первую очередь делаю сброс css-стилей.
    Затем делаю вёрстку общих блоков — просто структура из div’ов с нужными ширинами, высотами согласно макету, залитых разными цветами. Стараюсь все div’ы(когда что-то в строчку) делать inline-block’ами. Получается цветная такая структура будущего сайта. Каркас готов.

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

    1 секунду. Там идет моментальная компиляция на лету. + всегда есть кнопочка View Compiled, которая тут же показывает скомпилированные стили и их можно скопировать. Удобная вещь, когда надо отдать стили для проекта, где не стоит препроцессора на серваке, просто копируете Compiled стили, прогоняете их через онлайн автопрефиксер (автопрефиксер на кодпене добавляет лишь стили текущего браузера) и получаете готовый результат.
    Я помню как делал проект на гранте с SASS, где вотчер авторефрешил страницу после изменений, дак вот там процесс компиляции и апдейта в сумме занимал 3-5 секунд что жутко бесило. (не знаю правда насколько это быстрее в Gulpe, возможно намного быстрее).

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

    1. Открываю макет в PS, и нарезаю его, попутно думаю как и что я буду делать, как я назову элементы.
    — У меня есть макет и набор картинок —
    2. Копирую весь текст из макета в текстовый файл, и в нем делаю html. Написал строку для zen, развернул, перенес текст из файла ниже. На втором мониторе открыт макет, туда я просто смотрю.
    — У меня есть макет, набор картинок и html —
    3. Копирую весь html в css, и удаляя создаю болванку для стилей. Например у меня есть такой участок:

    и с этого html я делаю такую болванку:

    — У меня есть макет, набор картинок, html и файл стилей с не заполненными правилами —

    4. Этот шаг самый не оптимизированный, и занимает наибольшее время. На одном мониторе у меня открыт PS на втором браузер с консолью, мне приходится работать с двумя программами, с PS и браузером, я копирую стили из макета, и вставляю в css. Попутно поправляю отступы, размеры до PixelPerfect. + пишу js.

    Буду надеяться, что мой опыт будет вам полезен.

    2. Раньше ручками, потом написал для себя инструмент, пробегаемся по всем слоям, копируем текст и отступ по высоте, сортируем по отступу. Готово.

    3. Ручки, удалять, это вам не создавать 🙂 Получается быстро, думал написать скрипт, но пока даже не начинал.

    4. И плагином, и вручную

    Для пункта 3 пользуюсь этим инструментом tenorok.github.io/autoclassCSS

    А то ручками совсем как то печально.

    Верстаю не так давно, верстаю не так часто, но все же верстаю.

    Раз все начали с нуля, а именно с PSD макета, тоже начну с этого момента.

    1. Оцениваю макет, составляю для себя базовую разметку, определяюсь какие главные блоки присутствую, и что должно происходить если их нет.
    2. Оценив какие блоки необходимы, и прикинув структуру сайта иду csstemplater.com/ генерирую по своей структуре HTML/CSS шаблон, если это конечно не LP
    3. Создаю директорию c названием сайта в openserver, в ней создаю директорию HTML , а внутри по шаблону

    • psd- что бы не потерялись, мало ли когда нужно дорисовать что то.
    • css
    • js
    • less
    • fonts
    • img — для компонентов шаблона
    • image — для временного наполнения (слайдеры, изображения в статьях и т.п.)
    • shop/личный кабинет — иногда делю макет на интерфейсы, и раскидываю по папочкам для дельнейшей навигации



    4. Закидываю скачанный шаблон по папкам, вырезаю оттуда reset-ы, так как уже имеется отредактированный и перенесенный в less
    5. Создаю main_site.less — подключаю сюда все все нужные мне less файлы, template.less- прописываю сюда все структурные элементы (header, footer и т.д.), ui.less — обычно если проект не сложный сую сюда все оформление, иногда разделяю все на отдельные блоки, menu/portfolio/modal/btn/ и т.д.
    6. Настраиваю компилятор Less в PHP шторме для текущего проекта, что бы компилировался только файл main_site.less в папку css
    7. В основном использую getuikit.com, ну больше он мне по душе чем бутстрап, скачиваю и раскидываю файлы по папкам, правлю пути в index.html, попутно добавляю комментарии
    8. Открываю и смотрю PSD шаблон сайта на наличии не стандартных шрифтов, если шрифты есть в www.google.com/fonts, то подключаю их, иначе www.fontsquirrel.com, и раскидываю файлики по папкам
    9. Дальше используя Emmet создаю базовую разметку если это LP(header/footer/slider и т.д.), если нет, то начинаю с самого верха делать разметку элементов (logo/slogan/phone/login-widjets и т.д.) попутно добавляю less код в нужные из файлов.
    10. Верстаю до конца все, что есть в макетах. Затем по необходимости создаю шаблон для CMS.

    ЗЫ: Файлики что сделал не минимизирую, только по желанию заказчика, ибо все нормальные фремворки и CMS умеют объединять css и js файлы в 1, попутно минимизируя на лету. Заказчику отдаю все что сделал включая исходники.

    Для несложных классических сайтов:

    1. Создаю HTML — каркас сайта (шапка, сайдбары, подвал итд)
    2. Прорабатываю шапку и подвал. Режу картинки для шапки и подвала. На этом этапе HTML шапки и подвала готовы.
    3. Быстренько выдираю названия стилей из HTML (использую сервисы типа bearcss.com , html2css итп)
    4. Начинаю CSS: сброс стилей + из пункта 3
    5. Быстренько выдираю CSS для шапки и подвала из PSD (использую плагин CSSHAT), остальное ручками
    6. Шапка и подвал готовы! На этом этапе посути готов каркас как для главной, так и для внутренних страниц, причем очень быстро и уже можно что то показать!
    7. Прорабатываю контентную часть поблочно (выполняю пункты 1-5 для каждого блочка)
    8. Все иконки, декор запихиваю в спрайт, фотки и большие изображения можно прогнать через сервисы сжатия типа tinypng tinyjpg
    9. Проверяю готовый макет на pixelperfect, в разных браузерх, вношу правки
    10. PROFIT!

    1. Настраиваю gulp на основные таски (конкатенация, минимизация, удаление неиспользуемого, кросс-браузерность, sass и т.д.)
    2. Подключаю через bower необходимые «модули», например, normalize.css или фрэймворк
    3. Выстраиваю архитектуру кода (просто независимые блоки в отдельную директорию, например, «modules», или «pages» для стилей особенностей отдельных страниц), в корне css главный файл стилей, в котором осуществляется импорт всех модулей (например, файл с переменными цветовой палитры или файл с mixin-ами).
    4. Подключаю необходимые шрифты, в основном, через специальный миксин.
    5. В главном файле стилей описываю основные стили для типографики, в общем всё, что связано с селекторами типа.
    6. Если дизайнер предоставляет styleguide, то начинаю верстать страницу именно с него, а именно, по независимым блокам (где это возможно, от меньшего к большему) используя БЭМ методологию.
    7. По ходу дописываю задачи для менеджера задач, например, для скриптов или картинок, собираю необходимый package.json, bower.json.
    8. Собственно этап по-блочной верстки.
    9. Собираю конструктор из готовых блоков и элементов соответственно макету.
    10. Проверяю кроссбраузерность, pixel perfect.
    11. Этап исправления деталей

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

    У меня есть уже своя html+css заготовка.

    1) Копирую заготовку в новый проект
    2) Долго и нудно пишу html, ненавижу когда много мелких элементов на макете
    3) Режу картинки, спрайты
    4) пишу css, попутно иногда правлю html

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

    Для чего юзать bower и тп. Главное либу установить ленятся, а bower ставить не ленятся, jQuery и прочие либы лучше ставить с яши или гугла. Использовать среду типа NetBeans, WebStorm, Eclipse и тп. Каким то хламом типа «первого ответа» проекты засорять жесть. Twitter Bootstrap можно использовать как пример для реализации, а не лепить на нем основу)

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

    Верстаю часто, верстаю много (дизайнерю тоже, но чуть меньше). 7 лет занимаюсь этим. Работал и с table-вёрсткой, и все косяки float, inline-block и тп уже давно знал, хотя и не считал это всё косяками, а воспринимал как должное. Надеюсь, кому-то помогу своим опытом (не только техническая сторона)

    1. Необходимо чётко узнать требования по проекту (будет ли он адаптивным, подразумеваются ли на нём какие-либо динамические блоки и тд и тп)
    2. Если проект — ленд на 12 экранов и за него платят 2000 рублей — заказчика вежливо отправляю куда-нибудь по-дальше, чтоб хотя бы денег накопил и совести набрался.
    3. Смотрю на дизайн (в основном достаточно быстро, минут за 10) для того, чтоб понять, какие элементы реально сделать, а какие нет (смотря какие условия опять же, явно все тутошние читатели знают про адаптивку). Если что-то unreal — чётко расписываю заказчику что не реально и почему, если контактирую с дизайнером и есть относительная свобода — прошу перерисовать конкретные элементы.
    4. Открываю ФШ и начинаю приводить в порядок все слои (с режимами наложения, с составными фонами для 1 блока и тд и тп). Если есть режим наложения на какой-то элемент (обычно Умножение чтоб не было видно белого фона) — топаем к дизайнеру и начинаем ему выносить мозг если изображение сложное (если нет — сам вырежу, если есть подобное в интернете — нахожу png и далее. ) Все слои для блока конкретного сливаю воедино, тогда и макет меньше весит и вырезать проще будет (конечно зависит от ТЗ всё, мож там где-то параллакс и надо двигать туда-сюда всё)
    5. «Обрезанный» psd ложу на Creative Clound
    6. Пока всё это дело заливается — запускаю Brackets и пишу весь необходимый html вместе с текстом.
    7. Залился psd, а html уже написан. Топаем в css, открываем Extract и понеслась по стилям гонка
    8. Проверка на адаптивность и кроссбраузерность
    9. Продакшн

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

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

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

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

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

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

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

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

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

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

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

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

    Адаптивная верстка или как сделать мобильную версию сайта?

    Как я и обещал, пришла пора рассказать Вам, что такое «Адаптивная верстка» и как сделать мобильную версию сайта под смартфоны и планшеты, а так же понравиться поисковым системам!

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

    Да и трафик с гаджетов растет все больше и больше, день за днем! Веб-мастеру необходимо это учесть.

    Так же рекомендую к прочтению:

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

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

    Вроде бы понятно объяснил?! Кто что не понял? Пишите в комментариях, вместе обсудим.

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

    В один из прекрасных дней мне на электронную почту (впрочем все его получили) пришло такое сообщение:

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

    Мобильный сайт WordPress с помощью плагинов!

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

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

    Если Вы все же хотите использовать для этой цели плагины, то самые лучшие из них это:

    WPtouch Mobile Plugin — Этот плагин мне понравился больше всего, все довольно просто и понятно, мой блог корректно отображался без каких либо косяков!

    Не буду описывать каждый плагин, сами опробуете и определитесь:

    • MobilePress;
    • WordPress Mobile Pack;
    • Duda Mobile Website Builder;
    • WordPress Mobile Pack;
    • WordPress PDA & iPhone;
    • WPmob Lite;
    • WPtap News Press;
    • WP Mobile Detector;
    • WiziApp.

    Еще минус плагинов в том, что они иногда подглючивают, например захожу через смартфон — все хорошо, повторил еще раз или обновил — показывает обычный сайт! Какая то загадка прям

    Короче меня это не устроило и я продолжил искать лучшее решение!

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

    Если кому интересно, то переделка сайта в адаптивный, стоит примерно от 5.000 рублей и выше. Не советую нанимать горе-специалистов, которые берут дешевле — скупой платит дважды! Да и на отзывы обращайте внимание.

    Ладно, поехали дальше.

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

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

    Варианты создания мобильного сайта?

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

    Отдельная версия сайта — Это своего рода отдельный облегченный сайт, созданный специально для просмотра на мобильных устройствах или с низкой скоростью интернета. Обычно такую версию используют на поддоменах, например — основной сайт https://savme.ru, а мобильный http://wap.savme.ru или http://mobile.savme.ru. В данном случае используется перенаправление.

    • Два независимых сайта — возможность менять контент, не затрагивая при этом другой сайт;
    • Скорость загрузки — так как мобильная версия независима от основной, сделать ее легкой и быстрой не составит труда;
    • Удобство — навигацию и контент проще заточить, вплоть до мелочей, так как сайт полностью рассчитан под мобильную аудиторию.
    • Дублирование контента — так как один и тот же контент будет и в основной версии и в мобильной. Возможно спасет мета-тег rel=canonical, но есть масса и других проблемм.
    • Срез функционала — как не крути но такой сайт будет урезанной копией основного сайта, отсюда совсем другие показатели статистики. Да и основная масса посетителей не любит различного рода ограничений и всегда переходит на основной сайт.
    • Перенаправления — как известно, различного рода редиректы негативно сказываются в сфере SEO.

    Технология RESS — Тут используется вычисление на стороне сервера, смотря с какого устройства был заход — создается тот или иной макет (html и css). Называется это чудо — адаптивный веб-дизайн + специальное программное обеспечение на стороне сервера (RESS — Responsive Web Design и Server S > ).

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

    Адаптивная верстка (веб-дизайн) — Эта верстка сайта подстраивается под любое разрешение экрана путем его определения с помощью CSS3 Media Queries. Как правило используется один и тот же ресурс, который содержит в себе различные варианты для отображения на смартфонах, планшетах и компьютерах.

    • Сохранность — не зависимо от устройства используется один и тот же контент и набор html кодов;
    • Единый URL — для различных макетов используются одни и те же адреса и контент, нет дублей.
    • Скорость загрузки — так как загружаются все элементы и скрипты основного сайта, даже если они скрыты.
    • Навигация — сложность в создании продуманной мобильной навигации.

    Делаем адаптивную верстку самостоятельно

    Для своего блога я выбрал адаптивную верстку по нескольким причинам:

    1. не нужно нарушать целостность основного сайта, блога;
    2. используется один единый контент, одна база данных и так далее;
    3. Лично для меня простота внедрения (потребуются знания html и css).

    Теперь расскажу Вам о том, что нужно сделать, чтобы Ваш ресурс подстраивался под любые разрешения и понравился Google

    Во первых нужно прописать мета-тег в :

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

    Так же, если мы добавим еще и maximum-scale=1.0, user-scalable=no — то этим, мы запретим масштабирование, но я не рекомендую этого делать, пусть человек сам решает, может у него проблемы со зрением.

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

    Это дело нужно будет исправлять с помощью Media Queries в файле стилей CSS, выглядит параметр так:

    @media screen and (min-width:240px) and (max-width:720px) <
    тут теги и атрибуты
    >

    То есть, эти стили будут применяться браузером от минимальной ширины 240px до максимальной 720px устройства! Если больше или меньше этих значений, то будут применены основные стили сайта. Все просто!

    И вот таким макаром мы прописываем стили под разные разрешения устройств. Например:

    • смартфоны вертикально — от 240 до 340, от 341 до 420;
    • смартфоны горизонтально и некоторые планшеты вертикально — от 421 до 540, от 541 до 670;
    • планшеты вертикально — от 671 до 800;
    • планшеты горизонтально — от 801 до 1024

    Если нужно показать какой-либо элемент: display:block, если же спрятать: display:none;

    Чтобы узнать как выглядит сайт или блог на различных устройствах есть замечательные сервисы:

    • http://quirktools.com
    • http://www.emulateurmobile.com/
    • http://webmark.com.ua

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

    На этом у меня все! Надеюсь моя статья Вам реально помогла, в благодарность поделитесь ей =)

    На клиентском сайте записал пример работы адаптивной верстки, если так и не поняли принцип ее работы обязательно смотрим. До скорой встречи! Пишите комментарии.

    SEO-верстка сайта

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

    Почему так? Если мы говорим про поисковую оптимизацию сайта, а точнее про оптимизацию контента на страницах сайта, то наша задача сводится к организации контента на странице и в html-коде страницы таким образом, чтобы контент быстрее находился поисковым роботом, был структурированным и понятным. За то, каким будет контент на странице, и как он будет оформлен отвечает SEO копирайтер. А вот как будут размещены на странице блоки с контентом отвечает SEO верстальщик.

    SEO оптимизированная верстка

    Как вы думаете, при прочих равных, какой сайт лучше подает информацию: тот, где полезный контент начинается на 20 строке html-кода или 320? Навороченный сайт может быть интересен человеку. Первые 3 секунды. Но дальше посетитель начнет искать то, за чем он пришел на страницу. Это наглядно работает на примере лендингов. С поисковым роботом примерно то же самое, только прелюдия в виде 300 станиц кода его не впечатлит, а скорее разочарует.

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

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

    СЕО-верстка — примеры

    Как это выглядит на практике. Возьмем примитивную верстку.

    Пример простой верстки:

    Чтобы сделать верстку более SEO френдли, разместим блок content ближе к тегу body.

    Пример SEO-верстки:

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

    При большом желании можно сделать так, чтобы блок content находился в html-коде даже выше блока header. Пишите в комментариях, как по-вашему это можно сделать.

    Верстальщик и СЕО-верстка элементов сайта

    Если верстальщик не заложит в код необходимые для SEO элементы, оптимизация всего сайта может оказаться малоэффективной. Первый и основной элемент страница важный для сео — это title страницы сайта, о котором трудно забыть. Хуже дело обстоит с мета-тегами meta keywords и meta description. Важность этих элементов сложно переоценить, однако их часто недооценивают или вовсе про них забывают. Еще одной важнейшей частью html-страницы являются теги H1, H2, H3. Почему бы не оформить заголовок поста или название товара в интернет-магазине в тег H1, и тем самым указать поисковому роботу на важность элемента. Но нет, тегами h1,2,3 часто пренебрегают или используют их некорректно.

    Сайты, на которых у изображений прописан атрибут ALT встречаются нечасто, хотя alt используется для SEO оптимизации изображений по запросу, и может помочь картинкам сайта попасть на видимые позиции в сервисы вроде Яндекс.Картинки и Google Картинки. Но какое до этого дела верстальщику, если SEO для него — пустой звук. Это же касается атрибута title для ссылок. И еще по поводу ссылок. Трудно винить верстальщика за точную верстку по дизайну, но немаловажно учитывать то, что ссылки на сайте всегда должны иметь нижнее подчеркивание. Да, это не всегда вписывается в дизайн от веб-дизайнера, который не слышал про SEO-верстку. Вопрос неоднозначный.

    Пишите в комментариях, как вам кажется, надо ли подчеркивать ссылки на сайте, все или только в тексте?

    Валидная SEO-верстка

    Во-первых — SEO-верстка должна быть кроссбраузерной (возлюби Internet Explorer 6, как самого себя), чтобы у всех посетителей сайт отображался одинаково.
    Во-вторых — SEO-верстка должна быть валидной. То есть пройти валидацию (проверку на соответствие стандартам W3C). Проверить валидность верстки сайта можно через официальный валидатор W3C.
    Ходит много споров по вопросу важна ли валидность верстки для СЕО оптимизации сайта . Верстка с ошибками — как текст с ошибками. Неграмотный текст — неграмотная верстка. Делайте грамотную SEO-вестку.

    Полезные советы по СЕО верстке

    • Старайтесь оптимизировать верстку, убирая лишние блоки.
    • Оптимизируйте html код страницы.
    • Оптимизируйте таблицы стилей css и выделяйте их в отдельный файл и даже папку.
    • Размещайте на сайте навигацию «Хлебные крошки».
    • Не увлекайтесь тегами B и STRONG. Лучше всего использовать тег strong и только в тексте. Остальное можно выделить стилями.
    • Используйте H1 для заголовка контента. Не используйте в верстке дизайна сайта теги от H2, H3 и т.д. Оставьте их для текстовой части контента.
    • Делайте ссылки на сайте, и особенно в тексте, подчеркнутыми (underline) и отличающимися по цвету от основного текста.
    • Делайте все части контента открытыми по умолчанию, чтобы не приходилось активировать какой-либо элемент, чтобы увидеть контент полностью.
    • Долой портянки! Слишком длинные страницы — зло. Они долго грузятся, плохо индексируются, да и после 5-7 прокрутки вниз у посетителя может отпасть всякое желание листать дальше.

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

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

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

    В предыдущей статье я наглядно показал, как создать макет сайта в программе 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 — полноценный платный курс.
    Добавить комментарий