FastVPS-хостинг, который может больше
28.08.2009

Блочная верстка (div-верстка). Видеоурок для начинающего HTML-верстальщика. #1

Так много в последнее время сказано о преимуществах блочной верстки над обычной-табличной. И скорость загрузки страниц увеличивается в 2-3 раза, и код становится более понятным и логичным. Да вообще, что там говорить, уважающий себя HTML-верстальщик обязан верстать div-ами, чтобы на него не показывали пальцем и не смеялись.

Специально для начинающих HTML-верстальщиков я решил подготовить уроки div-верстки в видео-формате.

Шаг за шагом мы будем повышать свой профессионализм:

  • Разберемся каким образом должен выглядеть хороший psd-макет сайта, полученный от дизайнера, и как его анализировать.
  • Научимся применять, в качестве инструментов для верстки сайта, программы Photoshop и Dreamweaver.
  • Изучим основы HTML и CSS.
  • Познакомимся с различными плагинами для браузеров, которые облегчат наш нелегкий труд верстальщика сайтов.

Сегодня я предлагаю вам посмотреть первую часть видеокурса:  Что нам прислал дизайнер?

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

div верстка – обучающее видео #1

Видео закачано на YouTube и поэтому несколько потеряло качество. Если есть желание, можете скачать видео в лучшем качестве (18.8 МБайт *.wmv) с Deposit Files.

Чтобы не пропустить остальные части видеокурса – подписывайтесь на RSS или получайте обновления блога на эл. почту.

С уважением, Андрей Морковин.

Post to Twitter



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

Метки:

categories Верстка


Похожие материалы:


Отзывов: 19 на «Блочная верстка (div-верстка). Видеоурок для начинающего HTML-верстальщика. #1»

  1. Автор: Georgy, 06.09.2009 в 21:33

    Очень полечное видео только нашол и начел закачевать популярная тема большое спасибо автору

    Ответить

  2. Автор: Georgy, 08.09.2009 в 07:19

    Я согласен нужно использовать и желательно всё писать в дрим вивере а не юзать левые программы, я думаю просто может автору выгодно раскручивоть тот ресурс а так уроки хорошие подробные но где исходник этого псд сайта хотелось 1 в 1 повторить все шаги.
    Кстати Гамвер некоректно на этом ресурсе перетаскивать народ на свой ресурс.
    А уроков по пхп и хтмл хватает от папова а вот по дивной вёрстке их негде нет хотелосьбы чтоб автор дал псд сложного сайта и его наглядно через дрим вивер сверстал былоб очень круто на мой взгляд.

    Ответить

    • Автор: Андрей Морковин, 08.09.2009 в 10:15

      В следующем видеоуроке (#8) выложу ПСД сайта, который я верстаю вместе с вами. Еще раз повторюсь, на видеокурс по верстке сложного сайта уйдет много времени. В данном курсе вы получите все необходимые навыки, чтобы самостоятельно сверстать сайт любой сложности.

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

      Ответить

      • Автор: Georgy, 08.09.2009 в 10:19

        Большое спасибо за оперативность ответов и старание при подготовке уроков, вашь сяйт клад для всех кто начинает переходить с табличной вёрстки на блочную.

        Ответить

  3. Автор: ArtShok, 05.10.2009 в 11:06

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

    Ответить

    • Автор: Андрей Морковин, 05.10.2009 в 11:59

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

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

      Гораздо важнее правильно посливать нужные слои в макете, чтобы верстальщик потом себе мозг не парил. И ширину макета подобрать так, чтобы в 1024*768 влезло.

      Но, затратив пол часа на раскладку слоев по группа, потом гораздо приятнее пользоваться. Так что временные затраты на аккуратность – это правильно.

      Ответить

  4. Автор: алексей, 20.10.2009 в 20:42

    Андрей,спасибо за урок. Выложите, пожалуйста псд шаблон.

    Ответить

  5. Автор: ыч, 20.11.2009 в 22:40

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

    Ответить

    • Автор: Андрей Морковин, 20.11.2009 в 23:38

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

      Ответить

  6. Автор: Never Lex, 13.12.2009 в 15:31

    Полезно. Только ведь можно было сразу вырезать нужный кусок и изменить Canvas size. Хотя, у каждого свой стиль :)

    В резине кстати ничего плохого не вижу. Просто нужно использовать там, где это уместно.

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

    Ответить

  7. Автор: Александр, 10.01.2010 в 02:49

    Спасибо, полезный материал, будем изучать дальше

    Ответить

  8. Автор: Виктор, 30.03.2010 в 20:43

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

    Ответить

  9. Автор: Алексей, 27.06.2010 в 16:20

    СПС, хорошие уроки!

    Ответить

  10. Автор: Таня, 07.07.2010 в 17:10

    Андрей, а что если размеры диз.макета 43х23. его надо ведь увеличить??? Ответьте пожалуйста!

    Ответить

Ваш отзыв