Блочная верстка (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 или получайте обновления блога на эл. почту.
С уважением, Андрей Морковин.
Похожие материалы:
Отзывов: 20 на «Блочная верстка (div-верстка). Видеоурок для начинающего HTML-верстальщика. #1»
, 06.09.2009 в 21:33
Очень полечное видео только нашол и начел закачевать популярная тема большое спасибо автору
, 08.09.2009 в 07:19
Я согласен нужно использовать и желательно всё писать в дрим вивере а не юзать левые программы, я думаю просто может автору выгодно раскручивоть тот ресурс а так уроки хорошие подробные но где исходник этого псд сайта хотелось 1 в 1 повторить все шаги.
Кстати Гамвер некоректно на этом ресурсе перетаскивать народ на свой ресурс.
А уроков по пхп и хтмл хватает от папова а вот по дивной вёрстке их негде нет хотелосьбы чтоб автор дал псд сложного сайта и его наглядно через дрим вивер сверстал былоб очень круто на мой взгляд.
, 08.09.2009 в 10:15
В следующем видеоуроке (#8) выложу ПСД сайта, который я верстаю вместе с вами. Еще раз повторюсь, на видеокурс по верстке сложного сайта уйдет много времени. В данном курсе вы получите все необходимые навыки, чтобы самостоятельно сверстать сайт любой сложности.
Данный видеокурс рассказывает не о том, как сверстать сайт фирмы Кас-Вед, а о принципах блочной верстки, которые вы сможете успешно применить в других проектах. Сложные моменты, которые выходят за рамки верстки сайта Кас-Вед, будут освещены в дополнительных видеоуроках.
, 08.09.2009 в 10:19
Большое спасибо за оперативность ответов и старание при подготовке уроков, вашь сяйт клад для всех кто начинает переходить с табличной вёрстки на блочную.
, 08.09.2009 в 11:05
Спасибо за спасибо
, 05.10.2009 в 11:06
Обычно когда рисую — сразу все слои раскладываю по группам, потом самому же проще разобраться что где: и когда подправить надо, и когда сверстать. А если отдавать верстку на аутсорс (или дизайн заказчику) — еще и спасибо скажут за качественную подачу материала.
, 05.10.2009 в 11:59
Очень правильно делаете, что подходите аккуратно к группировке слоев в Photshop. Приятно посмотреть на шаблон дизайна, когда все слои по папкам разложены.
Но, в принципе, я на это особого внимания не обращаю. Все равно проще использовать Alt+правая клавиша мыши, для поиска слоя, содержащего изображение, по которому кликаю.
Гораздо важнее правильно посливать нужные слои в макете, чтобы верстальщик потом себе мозг не парил. И ширину макета подобрать так, чтобы в 1024*768 влезло.
Но, затратив пол часа на раскладку слоев по группа, потом гораздо приятнее пользоваться. Так что временные затраты на аккуратность — это правильно.
, 20.10.2009 в 20:42
Андрей,спасибо за урок. Выложите, пожалуйста псд шаблон.
, 20.10.2009 в 21:58
Алексей, спасибо Вам за спасибо.
С ПСД-шаблоном нет проблем. Он уже выложен в итоговом уроке по верстке сайта.
Добро пожаловать:
http://www.sdelaysite.com/kniga/verstka-kniga/blochnaya-verstka-div-0
, 20.11.2009 в 22:40
пропорции сохраняются если зажать шифт и тянуть за угловой квадратик.. а так вы сжали макет непропорционально это даже заметно на видео.. шрифт уже стал
, 20.11.2009 в 23:38
Вы совершенно правы. Всегда трансформирую используя только угловые метки, и на указанный Вами факт не обратил внимания. Спасибо.
, 13.12.2009 в 15:31
Полезно. Только ведь можно было сразу вырезать нужный кусок и изменить Canvas size. Хотя, у каждого свой стиль
В резине кстати ничего плохого не вижу. Просто нужно использовать там, где это уместно.
А у вас Фотошоп русский. Не глючит? В интернете часто встречается мнение, что русского неглючащего Фотошопа не бывает в природе. Что подтверждали мне и газетные верстальщики и полиграфические дизайнеры.
, 10.01.2010 в 02:49
Спасибо, полезный материал, будем изучать дальше
, 30.03.2010 в 20:43
здорово…правда здорово…Скажите, а где можно взять этот тестовый шаблон, чтоб самому покликать?
, 30.03.2010 в 21:31
все нашел спасибо
, 05.04.2010 в 08:21
В итоговой статье есть ссылка на скачку шаблона. http://www.sdelaysite.com/kniga/verstka-kniga/blochnaya-verstka-div-0
, 27.06.2010 в 16:20
СПС, хорошие уроки!
, 07.07.2010 в 17:10
Андрей, а что если размеры диз.макета 43х23. его надо ведь увеличить??? Ответьте пожалуйста!
, 11.07.2010 в 12:14
Если Вам нужен сайт 43Х23, то увеличивать ничего не надо.
, 14.12.2010 в 10:15
Добрый день!
Спасибо за уроки. Хотелось бы сдвинуть логотип Вашего сайта на экране правее. Он «как раз» закрывает во время урока то, что Вы редактируете в файлах.