Правила верстки сайта

ошибки верстки сайта

Изучаем ошибки при верстке сайтов

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

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

Детали видеоурока «Правили верстки сайта»

Тема: HTML&CSS

Сложность: Средняя

Формат урока: Видео (.mp4)

Время: 01:02:28

Размер архива: 223 Mb

автор

Автор: Андрей Бернацкий

Один из авторов проекта «Основы Самостоятельного Сайтостроения». Адрес в сети — www.WebForMyself.com

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

Бернацкий Андрей свободно владеет такими техниками как: HTML, CSS, JavaScript, jQuery, AJAX, PHP&MySQL.

Сайт: http://webformyself.com – «Основы Самостоятельного Сайтотсроения»

скачать исходникискачать урок

На этом видеовыпуск об основных правилах верстки сайтов окончен, надеюсь вам понравилось!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (43)

  1. alex

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

    Урок необходимо сократить до 10-15 минут. Я слушаю 11 минут и очень мало реальной информации за это время.

    У вас очень приятный голос, надо всего лишь поработать над речью.

    • Andrey Bernacki

      исходную/исправленную — есть исходная верстка, а есть исправленная — что не понравилось? Если я говорю «вот этот блок», «данный блок», то выделяю его цветом (на мой взгляд так лучше воспринимается и быстрее пояснить можно про какой конкретно блок идет речь).
      Для таких как вы специально на первых минутах обозначил, что самые интересные, неочевидные и грубые ошибки будут при рассмотрении области основного контента страницы.
      А то что часовой урок можно минут в 10-15 свернуть — это даже рассмешило. Имхо можно было бы вступление минуты на 2-3 сократить.

      • alex

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

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

  2. alex

    Кстати, сравните с Шантариным — тот говорит, будто масло намазывает :)

    И слово «парень» замените, ну что же это такое? :) Кандидат/соискатель/интервьюируемый, но не «парень» же! :) Это выделяется, да, но вносит «деревенские» коннотации в текст.

    Удачи, надеюсь, воспримите все конструктивно и без обид.

  3. Виктор

    Не вёрстка, а тихий ужас… Текст прописными, повторяющиеся блоки с id, картинки положенные фоном (единственно, думаю что, логотип всё же можно положить фоном для ссылки), заданная высота блоков (вообще в дрожь бросила), div’ная лихорадка, «Пример страницы на HTML5» практически без него самого. Проще такую «вёрстку» не исправлять, а сверстать заново, быстрее получится.
    Спасибо за урок было интересно.

    P.S. Не могли бы вы дать ссылки на уроки о которых говорите в видео.

  4. fedor

    Андрей, а есть возможность брать у вас какие-то макеты верстать, чтобы вы оценивали качество?

  5. Igor

    Спасибо!!!

  6. Трофим

    Несколько необычный и, довольно удачный формат урока. По сложившейся практике специалист дает пошаговые объяснения, которые ученик затем повторяет. Здесь сделан акцент на самостоятельную работу. Дан исходный вариант, дан конечный. Указаны ошибки. Все остальное – отдано на откуп пользователю. Кто хочет научиться. Должен творчески переработать приложенные материалы и самостоятельно добиться нужного результата. Мне, например, очень понравилось.
    Отдельное спасибо тому, кто создал начальный вариант. Создать косяки – это тоже искусство. Без него не было бы этого замечательно урока.

    • Andrey Bernacki

      Говорю честно, эти косяки не специально были сделаны для урока. Все ошибки допустил реальный человек в реальной ситуации.

      А если еще и показывать и рассказывать до каждой мелочи, как ошибки исправить, то это урок был бы часа на 4-5. Поэтому я и выбрал такой формат. И я рад, что он оказался удачным))

  7. Леонид

    А как быть с блоком товаров при резиновой верстке? Чтобы блоки не разъезжались при разном расширении монитора?

    • Andrey Bernacki

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

  8. SDK77

    Будут ли какие-нибудь курсы по профессиональной верстке?

    • Виктор Рог

      Буквально через 14 дней, Вы получите на свой email ссылку на такой курс.

      Приоткрою тайну — называться он будет «Практика резиновой верстки».

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

  9. George

    Здравствуйте.
    Вот у вас все Вордпрес , а по Джумла чЁ нить будет?

  10. Алексей

    Уроки у вас слишком уж длинные, лучше уж этот часовой видеоурок на несколько штук разделить, а то после 25мин уже спать реально хочется.

    • Andrey Bernacki

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

  11. sergey

    начальная верстка похоже по курсу Попова делалась. А сколько стоит сверстать такой макет на бирже фриланса?

    • Виктор Рог

      Да скорее всего по его курсу. Тот, кто верстал, точно изучал его курсы.

      • семен

        А почему такое отношение к Попову? он же профи и покруче Вас всех! у него больше 500 тыс подписчиков

        • Виктор Рог

          Какое такое? Очень даже нормально отношение.

        • Sergey

          Против Попова ничего не имею. Просто личные наблюдения. Сейчас изучаю его курс по CSS — то я бы тоже верстал так как в изначальном (неправильном) варианте.

  12. Olga

    Андрей, спасибо за урок! В нем узнала себя, когда то тоже сверстала свою первую страницу без сайдбара, в мозилле все слетело, в последующих страницах исправилась). Пока не знакома с практикой создания магазинов, но смысл понятен, урок послужил очень хорошим вступлением. Вопрос, может не совсем по теме, как Вы относитесь к популярному сейчас Metro стилю (мне показалось, что по юзабилити сверстанный в уроке магазин чем-то напоминает Metro style) и в частности, к фреймворку BootMetro, хочу на нем сверстать сайт, решила посоветоваться.

    • Andrey Bernacki

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

  13. Александр

    Очень неплохой урок! Спасибо!

    Миллион извинений, Андрей…. Но если бы Вы говорили «вылезает», вместо «вылазит» — был бы просто замечательный!

    Извините… Я понимаю, что не это главное…

    Искренний поклонник Вашего мастерства.

  14. Сергей

    Подскажите, а как организовать font в spane там где цифры 15% , чтобы одна цифра была меньше другой. Не могу понять.

  15. Shalty

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

  16. Валерий

    Здравствуйте, Андрей.

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

    Теперь конкретно по данному уроку — мне было очень интересно его смотреть, что называется — самое то. Несколько раз ловил себя на мысли, что сам бы сделал также, как и ваш тестируемый. Полезно.
    Но есть такой вопрос:
    .sale {
    background: url(«images/sale.png») no-repeat scroll 0 0 transparent;
    color: #363636;
    font: 14px/1.1 Georgia;
    height: 45px;
    margin: 20px 20px 0 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 45px;
    }
    Подскажите, а зачем для одного и того же элемента дважды применять float и position? Причем последнее свойство ведь не работает в данном правиле — оно отключено!

  17. Валерий

    И еще вопрос.
    Вы картинки-баннеры (которые с девушками) — просто вырезали как есть.
    Но в блоках div class=»product все-же отделили саму картинку от текста — div class=»sale.
    Почему так? Ведь они фактически однотипные — следовало и все сделать также, отделив текст от картинки.
    Я прав?

  18. Валерий

    Исправление для первого мое поста.

    Ошибка — я имел ввиду margin-top и margin-right вместо float (его там нет, поторопился).

  19. Валерий

    И еще один вопрос.

    Вы упомянули, что давали тестовую работу «верстальщику». А можно поинтересоваться — с какой целью? ))

  20. Валерий

    А так, конечно — верстка изначально просто дикая! На что я новичок — и то в ужас пришел от такого «творчества». Я представляю, каких мук стоило «верстальщику» сделать так, чтобы шаблон хоть как-то «держался». ))

  21. Валерий

    И еще один вопрос.

    Вы логотип вырезали тоже как картинку, целиком.
    Но по правилам, насколько я знаю, в нем текст должен быть именно текстом? А вдруг его менять придется, например, в Joomla?
    Я прав?

  22. Валерий

    Засыплю вопросами. )))

    В панели навигации на psd-макете ясно показано, что при hover выделение должно быть цветом текста. В вашем исправленном шаблоне этого нет, там выделение через text-decoration: underline идет. ))

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree