div верстка. Видеоуроки по блочной верстке сайта. Итог.
Подытожим 14-серийную эпопею видеоуроков по div верстке сайта.
Верстка сайта — это непростая наука, освоив которую вы с легкостью сможете преобразовывать *psd-макет дизайна сайта в HTML + CSS код, который одинаково хорошо выглядит во всех популярных браузерах.
div-верстка — это разновидность верстки сайта, в которой для позиционирования элементов на странице применяются теги <div>. Данный вид верстки гораздо предпочтительнее табличного подхода.
На протяжении 14-ти видеоуроков мы с вами, уважаемый читатель, шаг-за-шагом верстали из .psd-макета дизайна сайта, разработанного в Photoshop, кроссбраузерный HTML + CSS каркас блочной div верстки веб-документа.
Полученная верстка полностью соответствует стандартам (т.е. валидная) и с точки зрения HTML, и с точки зрения CSS.
Серия из 14-ти обучающих бесплатных видеоуроков по div верстке сайта будет полезна не только для желающих перейти с морально устаревшей табличной верстки на блочную, но и для желающих понять принципы создания сайта.
В видеуроках я рассказываю об основных понятиях языка разметки гипертекста HTML и каскадных таблиц стилей CSS, а так же на примерах показываю основные моменты работы в программах Photoshop и Dreamweaver.
div верстка сайта и ее приемущества
До недавнего времени (пока браузеры были молодыми и неопытными) сайты верстали при помощи таблиц. Элементы страницы размещались в ячейках и таким образом позиционировались в браузере. Больше никаких инструментов, сравнимых по мощи и гибкости с таблицами, для верстки сайта не было.
Но с наступлением XXI-века, слава Богу, браузеры поумнели и теперь для позиционирования элементов на странице можно применять блочную верстку (или div верстку).
Основным инструментом для позиционирования блоков является тег div и свойства CSS, которые на этот div накладываются.
Приведу яркий пример преимущества div верстки перед табличной.
1) Размещение блока на странице при помощи таблиц:
<table>
<tr>
<td>Содержимое блока</td>
</tr>
</table>
2) Вот что нам на это скажет div верстка:
<div>Содержимое блока</div>
И что же мы имеем? В первом случае, для расположения одного блока на странице, нам потребовалось указать кучу лишних тегов, из-за которых структура документа становится не прозрачной и путанной. Во втором случае мы позиционируем элемент на странице используя всего один тег <div> и добиваемся того же самого эффекта.
Теперь на минутку представьте структуру табличной верстки сложного сайта, когда приходится вкладывать таблицы в таблицы n-ное количество раз. Страшно?
А теперь представьте что в этом винегрете n-размерности необходимо что-то поправить. Вот теперь точно страшно.
Используя div верстку сайта вы избавитесь от этого геморроя. Структура HTML-документа становится более понятной и для верстальщика и для SEO-оптимизатора (без SEO сейчас никуда). Если вы вынесли описание внешнего вида div-структуры в CSS-файл, как это и полагается делать, то его исправление вызовет одни лишь положительные эмоции (или, по крайней мере, не столь отрицательные как в случае табличной верстки сайта).
Для высоконагрузочного проекта div верстка обязательна! Как говорит dimox: «Прирост скорости обработки страницы весьма ощутим (еще бы, 2-3 раза — это не шутки)».
В случае блочного подхода таблицы применяются по их прямому назначению: для верстки таблиц, представьте себе; ну или когда уж совсем припекло и div верстка не помогает (в таком случае, обычно, помогает 10 минут размышлений и таблицы снова идут лесом).
При прочих равных, применяя div верстку вы становитесь героем в глазах мировой общественности, т.к. этими действиями снижаете мировой нагрузочный трафик.
Я очень надеюсь на то, что для наращивания вашего геройского профессионализма нелишними окажутся те 14 бесплатных видеоуроков по блочной div верстке сайта, которые я записал.
Валидная div верстка сайта
Пару слов по поводу соответствия стандартам организации W3C.
Очень приятно, когда сверстанная страница соответствует стандартам. В принципе, как говорит некий А. Лебедев: «Лучший валидатор — это браузер», но все же. Можно изучить всю спецификацию на сайте W3C и писать валидный код. Вам этого хочется?
Если нет — пойдем другим путем:
- Используем в нашем нелегком труде HTML-верстальщика браузер Mozilla Firefox (здесь можно скачать Firefox с предустановленным Яндекс.Баром, что очень приятно).
- В браузер устанавливаем следующие дополнения: Web Developer и HTML Validator.
Web Developer — это куча инструментов, среди которых есть валидатор HTML и CSS (еще и JavaScript, но это уже из другой песни), который встраивается в панель инструментов браузера и показывает нам зеленые огоньки если все ОК или тычет пальцем на наши просчеты.
Валидатор Web Developer-а в действии
Другой инструмент валидации, к сожалению только HTML — это HTML Validator. Его плюсом является подробное описание ошибок HTML-структуры документа.
HTML Validator в действии
На сладкое
В качестве десерта я поделюсь с вами ссылками на полезные ресурсы по верстке.
- Хочу порекомендовать вам интересный блог, посвященный верстке сайта.
- HTMLbook.ru — отличный ресурс с подробной информацией по HTML-тегам и CSS-свойствам.
- Csstemplater.com — как вы помните, именно посредством этого ресурса мы создавали с вами отличный блочный HTML-каркас верстаемой страницы. Ресурс, все в том же виде, переехал на другое доменное имя (раньше это был CSStool.ru). Видимо связано это с новыми правилами регистрации доменов в RU-сегменте.
Ссылки на уроки по div верстке сайта
Все уроки по div верстке сайта, объеденные одной меткой.
Т.к. сервисы RuTube и YouTube, из-за своих алгоритмов сжатия, серьезно ухудшают качество картинки и мелкие детали могут быть плохо различимы, предлагаю вам скачать весь видеокурс в лучшем качестве, разбитый на четыре архива с Deposit Files.
- Видеоуроки по div-верстке сайта с 1 по 5 (*.zip 111.3 МБайта)
- Видеоуроки по div-верстке сайта с 6 по 9 (*.zip 129.2 МБайта)
- Видеоуроки по div-верстке сайта с 10 по 12 (*.zip 115.6 МБайта)
- Видеоуроки по div-верстке сайта с 13 по 14 (*.zip 105.9 МБайта)
Скачать psd-макет дизайна сайта и готовую верстку.
Скачивая курс с Deposit-а без Gold-аккаунта наберитесь терпения и помните, что это не самый долгий процесс из возможных.
Вы можете познакомиться с дополнительными видеоуроками по верстке сайта, не вошедшими в базовый видоекурс.
Чтобы не пропустить выхода новых видеокурсов для веб-мастера, а так же дополнительных видеоуроков к данному курсу подписывайтесь на RSS или получайте обновления блога на эл. почту.
С уважением, Андрей Морковин.
Метки: Верстка, Верстка видеокурс
Похожие материалы:
Отзывов: 86 на «div верстка. Видеоуроки по блочной верстке сайта. Итог.»
-
Блог-шоу - выпуск 28 - Продвижение сайтов, веб-дизайн и креатив — 06.10.2009 в 14:52
-
Интервью - Андрей Морковин, создатель видеоуроков по верстке и автор блога sdelaysite.com - Продвижение сайтов, веб-дизайн и креатив — 31.10.2009 в 07:48
-
Определение CMS средствами Perl | Записки программиста — 18.11.2009 в 13:15
Автор: motor2hg, 28.09.2009 в 18:10
Огромное спасибо за потраченное время и отличные уроки.
PS
Пользователям надо помнить, что валидная div верстка сайта не должна быть самоцелью, и вызывать у верстальщика паранойю. Даже если всё свёрстано и валидно, где гарантия того, что при введения контента, не возникнут ошибки, особенно если такой текст вводится случайным пользователем. Такое часто случается в CMS да и валидатор этот чересчур придирчив!
Автор: Андрей Морковин, 28.09.2009 в 18:34
Спасибо Вам за спасибо!
Паранойя – это, конечно, ничего хорошего.
По поводу возможных проблем при вводе контента: нужно смотреть урок 13. Я их там постарался описать и рассказал как предотвратить.
http://www.sdelaysite.com/kniga/verstka-kniga/blochnaya-verstka-div-13
Автор: motor2hg, 28.09.2009 в 18:20
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.sdelaysite.com%2F&profile=css21&usermedium=all&warning=1&lang=ru
Автор: Андрей Морковин, 28.09.2009 в 18:28
Автор: Владимир, 28.09.2009 в 19:20
Это что??
Автор: Андрей Морковин, 28.09.2009 в 19:34
Это валидатор (проверка на наличие ошибок в шаблоне дизайна данного блога).
Автор: Иван, 27.02.2010 в 08:42
Ну по поводу валидности сегодня – это уже просто проверить
покрайне мере в опере
нажимаешь на страничке правой кнопкой и там есть – проверить стандарты
и оно проверяет через сайт стандартов
кстати результат этой страницы
: 101 Errors, 1 warning(s)
)))
Автор: jhekasoft, 05.10.2009 в 22:42
Насчёт валидности… Может не в тему, но сайт Артемия Лебедева (надеюсь Вам знаком) не проходит валидности, и уж очень валидатор его ругает: http://www.artlebedev.ru/ Хотя и сайт известный и выглядит хорошо. Правильно говорят, что самый лучший валидатор – это браузер.
Автор: Андрей Морковин, 05.10.2009 в 23:59
Сайт Артемия Лебедева – это не мерило правильности. Кстати, Google и Яндекс тоже невалины.
Вообще, конечно, Бог с ней, с валидностью. Но, следующие версии браузеров, более жестко относясь к стандартам, могут некорректно отобразить невалидный код. А валидный код – это всегда приятно.
Автор: Maxim54rus, 06.10.2009 в 12:29
И я думаю что это приятно, но вот будущая разработка Divine уже может поставить крест на верстальщиках, особенно тех кто только и делает что верстает!) Разработчики обещают что их код будет валидным и возможность верстки как статичных(HTML) так и динамичных(для популярных CMS сразу готовый шаблон) страниц в Photoshop-е !)
http://www.divine-project.com
Автор: Элен, 11.10.2009 в 21:02
Пардон, а загвоздка с бордерами разрешилась??? Али так и остался сайт без них?
Автор: Андрей Морковин, 11.10.2009 в 22:06
Предлагаю Вам самостоятельно подумать над реализацией бордеров в данной верстке. Если что-то придумать не получится, то можете посмотреть комментарии к уроку №14
http://www.sdelaysite.com/kniga/verstka-kniga/blochnaya-verstka-div-14#comments
Но только сначала постарайтесь сами придумать решение. Это как ребус решить. В этом-то и есть изюминка работы верстальщика и программиста. Постоянно решаешь какие-то ребусы. Желаю удачи.
Автор: Teddy, 16.10.2009 в 08:08
Как же я долго искал, новые статьи по div вёрстке. Автор большое тебе спасибо, пиши ещё. Добавил в закладки сайт!
Автор: Андрей Морковин, 16.10.2009 в 08:33
Спасибо Вам за спасибо. Обязательно буду продолжать развивать сайт. Рад, что добавили в закладки.
Вы RSS пользуетесь? Я долго не принимал эту технологию. Но когда все-таки настроил ридер и стал добавлять туда каналы блогов, ощутил огромное удобство данного сервиса. Теперь и не представляют, как я мог обходится без RSS раньше.
Предлагаю Вам добавить сайт не только в закладки, но и в RSS ленту. Подробнее об RSS можно прочитать здесь: http://orss.ru/
Кстати, если Вы принципиально против технологии RSS, то можете подписаться на обновления блога по эл. почте. Тогда каждая новая статья на блоге будет попадать в Ваш почтовый ящик, тоже очень удобно, рекоменду.
Ссылка для подписки на обновление блога по эл. почте: http://feedburner.google.com/fb/a/mailverify?uri=sdelaysite&loc=ru_RU
RSS-канал блога: http://feeds.feedburner.com/sdelaysite
Автор: Аноним :), 02.11.2009 в 07:00
Приветствую, Андрей.
Вылью немного ледяной воды, чтобы остудить мед прошых комментариев
Посмотрел все уроки. Мое мнение, рано вам учить других.
Почему?
Слишком много элементарных ошибок. Возможно вам было наплевать на качество и вы не особо старались, но мне все же кажется, что вы хотели выпустить качественное видео.
Перечислю ошибки.
1. Помните ту маленькую белую точку между левым меню и горизонтальным? Это не какая то особенность верстки, вы просто криво обрезали картинку верхнего меню. Там осталась полоска белого. Не надо столько героически решать собственные косяки.
2. Зачем вы заливаете все белым? Это совершенно бессмысленно для гифа.
3. Зачем надо было фон горизонтального меню позиционировать отдельно? Не проще ли было вырезать его вместе с той кривой оранжевой полосой?
4. Выравнивать картинку маленького треугольника рядом с пунктом меню надо не через position-relative, а через vertical-align. Иначе если шрифты увеличить или уменьшить она будет криво расположена.
5. Это не совсем ошибка, возможно вы просто хотели упростить понимание css, но тем не менее. Делать отдельные свойства для каждого аттрибута background не желательно. Это только раздувает и усложняет код, особенно если путь указать в начале списка свойств, позицию в середине, а повторяемость в конце. Гораздо проще написать “background:url(/path/image.gif) top left no-repeat;” ну или любые другие значения но в одну строку. То же самое для большинства свойств css, если вам надо несколько аттрибутов свойства указать, то в большинстве случаев лучше их записать в одну строку.
6. То что вы не смогли сделать бордер рядом с тенью для всего сайта… Просто нет слов. Если уж вырезали фиксированую картинку для тени, то что помешало объединить ее с картинкой бордера? Не надо никакого геморроя с кодом.
В общем учитесь. Если уж делать что либо, то делать это надо качественно. Надеюсь у вас будут еще видео и качественнее этих уроков.
Спасибо за внимание.
Добрый аноним
Автор: Андрей Морковин, 02.11.2009 в 10:42
Приветствую Вас, добрый Аноним!
Спасибо за комментарий и за ледяную воду, это очень полезно. Отлично, что это не просто пустая критика, а аргументированная (жаль, но такое редко встречается в ру-нете).
Приятно, что Вы посмотрели все мои видеоуроки
По поводу того, что мне рано учить людей. У меня другая точка зрения (как не странно). Просто Вы, явно-таки, обладаете в этой области вовсе не начальными знаниями, а просмотренный Вами материал сделан для начинающих. На разных уровнях нужен разный подход. Т.е. ситуация аналогична критике преподавателем ВУЗа школьной программы. Ведь и действительно, никакие электроны вокруг ядра не вращаются, но разве поймут ученики 8-го класса, что за зверь такой “область вероятности распределения отрицательного заряда”. Смогут ли они впитать на начальном этапе все эти сложные моменты? Хватит ли у них терпения, для того, чтобы разобраться с ходу в дебрях? Я в этом сильно сомневаюсь.
Цель же моих видеоуроков – дать принципиальное понимание одного из этапов создания сайта: превращение psd-макета в HTML-код. Существует множество книг и сайтов, подробно рассматривающие принципы работы в Photoshop-е и HTML+CSS. Но все это не связывается во едино и нет понимания того, как же все-таки делают сайты..
По поводу списка ошибок. В начале хотел сказать, что я, в качестве подготовки к каждому из видеоуроков, лишь мысленно прогнал ход событий и потом наживо записал процесс верстки. Благодаря этому у меня возникали определенные ошибки и недочеты. Связанно это с тем, что я не занимаюсь с утра до вечера лишь версткой и у меня нет четкой последовательности действий для решения той или иной задачи. Каждый раз, решая определенную задачу, я как бы разгадываю ребус, что меня очень забавляет и работа становится интересной. Из-за того, что четких подходов к решению той или иной задачи я в своей памяти не храню, мне приходится придумывать пути решения на лету и иногда они оказываются неверными.
Но, даже неверный подход, дает слушателю понимание принципов решения поставленной задачи (то, что может быть множество решений и, порой, каждое из них применимо в той или иной ситуации). Слушатель видит процесс написания кода и процесс его отладки. И сухой, безошибочный видеоурок, в данном контексте, оказывается мертвым.
Давайте пройдемся по Вашим замечаниям подробно (еще раз спасибо за их перечисление, это очень правильно и полезно):
1) Благодаря тому, что я криво обрезал фон, зритель все равно получил понимание процессов его вырезания из макета и получил его в полной мере. А то, что я не заметил досадной ошибки (возможно, сказалось волнение, возникающее в процессе записи, я не профессиональный подкастер) позволило мне продемонстрировать, как вы выразились, героические подходы по решению данной проблемы. Я уже не помню, как именно я боролся со своей ошибкой, но слушатель, поняв как и вы причину появления белой полоски, сможет откинуть применения моих действий в данной ситуации, но намотает на ус еще несколько трюков. Разве это плохо?
2) Не понял, что именно вы имеете ввиду. Вполне возможно, что Вы полностью правы. Только прошу пояснить, где именно я допустил эту ошибку и в чем она заключается.
3) А каким бы образом я рассказал о позиционировании фона?
4) Да, vertical-aligen отлично сработал бы в этом месте. Но, данный урок имел целью рассказать о возможности увеличения размера контейнера и размещения в нем прикрепленной картинки. Разве не фоновым изображением я ставил этот маленький треугольничек? Фон можно позиционировать свойством vertical-align?
5) И здесь Вы абсолютно правы. Я действительно хотел упростить понимание CSS. Но сейчас я вижу, что делал это напрасно и сокращенная форма записи для понимания ни чуть не сложнее. Но зато новичок будет точно знать, что это за дополнительные свойства (background-position, margin-top… иногда именно такое обращение к свойству делает возможным решение некоторых задач, яркий тому пример – это резиновый блок с закругленными углами, где я обнуляю верхний border именно обращением к свойству border-top http://www.sdelaysite.com/kniga/verstka-kniga/kruglie-ugly ) Кстати, когда я только знакомился с CSS, я, почему-то, не использовал сокращенных свойств. Мне казалось, что так как-то понятнее.
6) Я не мог решить эту задачу, чтобы координально не менять то, что я сделал где-то в середине видеокурса. Я считал, что смогу воспользоваться свойством border, но, когда подошел к этому этапу, то понял, что решить задачу при помощи border-а невозможно. Если Вы почитаете комментарии к уроку, где я отказался устанавливать границы, вы поймете что это простимулировало слушателей поработать самостоятельно и, довольно-таки быстро, найти решение поставленной задачи. Я же нашел решение проблемы как только закончил запись урока
И Вы совершенно правы, что нужно учится, это просто необходимо. Видеокурс по верстке сайта был лишь пробой пера. Следующие видеокурсы обязательно будут более интересными.
И еще, задача видеокурса – это не сверстать идеально правильно сайт Kas-Ved (кому он вообще нужен, у каждого слушателя свой собственный сайт), а познакомить новичков с принципами блочной верстки. Я считаю, с поставленной задачей (именно новички и именно принципы верстки) курс справился и имеет право на существование. Это обучение, а не мастер-класс.
Автор: Ольга, 09.01.2010 в 20:12
Анонимно легче, видно, воду холодную лить…
Автор: Тот самый аноним), 21.01.2010 в 06:58
Честно сказать не понимаю этой неприязни анонимов)
Ольга, почему же вы сами не залогинились?
Может быть мне еще нужно присылать скан паспорта для каждого комментария? Просто все другие доказательства кроме паспорта ничего не изменят.
Что вы иммете ввиду говоря про анонимность на ЭТОМ блоге? Я оставил свой электронный адрес, этого я считаю достаточно если автор захочет со мной связаться. Ошибки я привел вполне конкретные, то есть говорил не голословно.
И вообще людей, а особенно в интернете мне кажется нужно оценивать не по анонимности, а по тому, как они говорят/пишут.
Если написал три слова, два из которых мат, то ну его нахер. Пишет что то более менее внятное и пытается обосновать, то можно и почитать, хотя никто никого не заставляет.
Автор: Аноним :), 02.11.2009 в 11:41
Х его з на самом деле как оно правильно. Я не претендую на абсолютную истину. Уроки безусловно ваши и вам лучше знать что в них и как должно быть.
С vertical-align мой косяк, я почему то думал там картинки, скачал верстку посмотреть, а там через background эти треугольники сделаны. Четко запомниось что там в пикселях отступ был, а не процентами или “center”.
В общем c vertical-align ошибся, но идея была правильная, если позицию задавать попиксельно, то при изменении размера шрифта треугольник будет сверху, а не по центру. Поэтому желательно ставить “background-position:5px center;”
Учиться надо, да
Вот я например ваши видео смотрю, вы мои советы прочитаете, так вот и движется прогресс однако 
Везде можно найти что то новое.
Главное чтобы вот так не было:
Космические корабли “бззззз” бороздят “бззззззз”.
То бишь feedback так сказать нужен
Автор: Андрей Морковин, 04.11.2009 в 00:42
Действительно, когда корабли начинают бороздить бззззз – это уже совсем нехорошо и не стоит на это время тратить (ни чтобы писать, ни чтобы читать).
Уроки действительно мои, но как и что должно быть, чтобы они стали лучше, виднее не мне, а слушателю, как это не парадоксально. Поэтому совершенно с Вами согласен, feedback очень важен.
Автор: Elia, 05.11.2009 в 18:13
Андрей, большое спасибо за видеоуроки. Очень помогли в верстке моего сайта. Все просто и понятно, для таких новичков, как я.
Хотела бы спросить – какой программой вы записываете видеоуроки?
Автор: Андрей Морковин, 13.12.2009 в 19:08
Видео записываю в Camtasia Studio.
Автор: Дмитрий, 10.11.2009 в 21:22
Андрей, большое спасибо за видео уроки. У меня вопрос, а сколько стоит верстка в Вашем исполнении, по заморочкам среднего сайта!?
PSD>код (валидный)
Автор: Андрей Морковин, 10.11.2009 в 21:36
Рад, что видеоуроки оказались полезными!
По поводу стоимости верстки – бессмысленно говорить среднепотолочные цифры. Если есть конкретная задача, то пишите в аську или на почту.
Автор: Serg, 24.11.2009 в 12:51
Очень бы хотелось найти исходники (особенно файл fixpng.js) на сайте (как и было обещано в видеоуроке , часть 7.
Автор: Serg, 24.11.2009 в 12:55
Пардон, поторопился – нашел.
Автор: Gomer, 24.11.2009 в 21:03
Если бы еще знать как скачивать Ваши уроки с Deposit Files. Я вот не умею, а хотелось бы скачать.
Автор: Андрей Морковин, 24.11.2009 в 21:13
Это очень просто. Переходите по ссылке на Deposit, нажимаете кнопочку “бесплатно” под левым спидоментром, попадаете на страницу с секундомером (в правой части страницы), ждете пока истечет время и получаете ссылку для скачивания.
Автор: Gomer, 25.11.2009 в 00:46
Пробовал, мне предложили научиться играть в покер.
Автор: Gomer, 25.11.2009 в 21:41
Знаете, Ваши бы статьи да им бы почитать… Не понимаю я как там скачиваются файлы. У Вас нет альтернативных источников?
Автор: fos, 15.12.2009 в 20:15
Закрывайте покер и закачка начнется автоматически.
Автор: Гость, 26.11.2009 в 23:37
А есть какой-нибудь альтернативный источник скачивания? С Deposit проблемы.
Может torrent?
Автор: Гость, 26.11.2009 в 23:44
Кстати ifolder гораздо лучшеб чем Deposit!
Автор: fos, 15.12.2009 в 20:20
Ну это кому как
Автор: Андрей Морковин, 27.11.2009 в 13:36
Альтернатив нет
Я на torrent ничего не выкладывал.
Автор: сергей, 12.12.2009 в 15:04
Добрый день, Андрей
Нужна ваша помощь.
Я просмотрел Ваши уроки по див верстке. По вашему примеру начал верстать сайт. Опыта вэб-программирования у меня не было.
Я сгенерировал html страничку и сss с помощью сайта csstool.
Проблемма в следущем. Когда я добавил в код своего сайта javascript для динамической кнопки, у меня левый sidebar в ie6 стал сдвигаться в правую сторону.
Я не знаю как решить эту проблемму. Пробовал менять марджины и падинги для sidebar.
Автор: Андрей Морковин, 12.12.2009 в 16:13
Ничем не могу помочь, пока не увижу кода. Присылайте мне на почту вопрос (детально опишите проблему, что где когда и почему происходит) и исходники (HTML + CSS + JavaScript), но только тот кусок, который является проблемным. Постараюсь помочь.
Автор: Дмитрий, 13.12.2009 в 18:57
Андрей, огромное спасибо за уроки, очень помогли в первых шагах осваивания html и css. Скажите, Вы не планируете выпустить книгу или видео курс, в котором будут централизованы все знания по css и html Вашего блога?
ЗЫ. Если можно, выложите на народ одним архивом. Скачивать не очень удобно.
Автор: Андрей Морковин, 13.12.2009 в 19:09
Пока серьезно над впуском книги или видеокурса не задумываюсь.
Все обещают выложить на Торрент, но никто, видимо, так и не выложил.
Автор: Never Lex, 14.12.2009 в 20:37
Вообще отличный курс. Я хоть и 99% процентов знал всего что было показано, смотреть было интересно. Хоть косяков было достаточно, но Андрей всегда выходил из положения. Зато новички представят процесс вёрстки. Ведь так часто и бывает. Где-нибудь ошибёшься, а потом танцы приходится устраивать. С бубенцами
Вот жаваскрипту я действительно буду учиться (знаю его совсем немного). Пошёл качать.
П.С. А нет. Сначала по фотошопу надо пройти
Изучать так уже весь сайт с начала до конца 
Автор: Intcorp, 21.12.2009 в 11:28
Отличные уроки. Только начал разбираться с версткой сайта и через 3-4 дня сверстал шаблон для сайта на джустине. Обучение начал по одной известной книге по дримвиверу 8, но потратив почти двое суток так и не достиг цели даже полностью дублируя код приведенный в книге( Посмтрел все 14 уроков и сразу получился довольно-таки неплохой шаблон.
Кстати, csstool немного криво генерирует резиновый шаблон – почему-то их футер улетает вправо, но если сделать для него clear:both все встает на место.
Автор: Realfriend, 21.12.2009 в 14:05
Если честно было нудно смотреть, голос однатонный, чуть неуснул
Автор: Zysy, 31.12.2009 в 01:38
Огромное-преогромное СПАСИБИЩЕ!
Правда я как бэ много верстал раньше на таблицах, и как минимум 30% видио приходилось пропускать.
Но в целом помогло не реально, сам бы прокопался и убил в 20раз больше времени. Респект.
Но как то тихо, по громче озвучить надо бы
Автор: Dima, 01.01.2010 в 21:44
А ваш сайт не валиден: пишет что ошибки ява и цсс))
Автор: Zysy, 04.01.2010 в 01:09
+1 к мнению Realfriend, чей пост двумя постами ранее.
К концу становилось все нуднее и нуднее, т.к. очень многое по многу раз повторялось… Но не смотря на это, урок очень сильно помог. Еще раз спасибо и респект.
Автор: Vodoptic, 06.01.2010 в 21:43
Оч рад что нашел ваш видео курс, все наглядно, ясно, разжеванно, даже местами слишком ) но это хорошо для новичков. Обязательно продолжайте выпускать видеокурсы, буду следить чтобы ничего не пропустить)
у меня такой вопрос, даж не знаю первое что в голову пришло при просмотре:
Почему когда вы не могли показать полностью структуру сайта в браузере, вы растягивали, таскали слайдер и еще много гемора )) Ведь в опере есть очень простое свойство ctrl + ролик мыши. И масштаб меняется, понятно что картина могла бы немного исказиться, но зато общую структуру мы бы увидели без проблем )
Автор: Андрей Морковин, 07.01.2010 в 12:29
Я перемещал окно Оперы, потому что это первый пришедший мне в голову способ.
Автор: Vodoptic, 07.01.2010 в 10:13
и кстати в 8м уроке , как раз сейчас на нем остановился. Применяя position:absolute, и подгоняя отступы слева и сверху, не проще ли померить эти отступы линейкой в шопе? чем сидеть подбирать?.
Я не верстальщик, с дивами первый раз сталкиваюсь через ваши уроки ) но многи вещи и так понятны )
Автор: Андрей Морковин, 07.01.2010 в 12:27
Линейкой в Photoshop померить не проще, потому что, обычно, в HTML получаются другие размеры, нежели в дизайн-макете. Самый лучший вариант, на мой взгляд, это воспользоваться подбором значений в FireBug-е.
О том как это делать можно посмотреть в соответствующем видеоуроке (описанная тема затрагивается на 6-ой минуте видео): http://www.sdelaysite.com/kniga/verstka-kniga/firebug
Автор: Марат, 28.01.2010 в 15:54
А разве нельзя было вместо top: px; left: px прописать right: 0; bottom: 0 что бы горизонтальное меню примкнуло к правому нижнему углу?
Автор: Игорёк, 07.01.2010 в 18:55
Да вы просто молодец и всё тут!
Во всём Интернете нихера не найдёшь такого материала, а вы взяли и сделали. Мой вам поклон.
Автор: Vodoptic, 08.01.2010 в 09:29
Ааа, ну спасибо ) теперь все понятно ) про линейку вы правы, на практике убедился. Записывайте еще )
Автор: Валерий, 09.01.2010 в 09:36
Спасибо большое за уроки Андрей. Меня они ввели в представление и более чем верстки дизайна. Побольше бы таких ресурсов!
С уважением, Валерий. г. Краснодар
Автор: Ольга, 09.01.2010 в 20:05
Андрей, как у Вас тут хорошо! Душевно, я бы сказала.
Если других проблем, конечно, не нагребут 
Замучилась ковырять шаблон Joomla1.5 – не выделяется активный пункт меню хоть ты тресни! Поставлю, наверное, “хлебные крошки” – они все проблемы навигации решат, надеюсь
С Новым годом Вас!
Автор: Евгений, 09.01.2010 в 21:37
Доброго времени суток. Спасибо за уроки. Сам занимаюсь плотно версткой где-то полгода. Очень не хватает специализированного обощенного материала по фреймворкам, по верстке в целом и прочее и прочее. Есть предложение заняться созданием полноценного видео-литературного-курса, который бы позволил многим и многим людям разбираться в верстке более профессионально. Хочется какой-то универсальной методики создания сайта, и как-то людям донести это…
Правда для этого думаю надо перелопатить кучу литературы, стандартов и прочее…
Автор: 40a, 10.01.2010 в 08:21
Исправьте картинку, «немЕного» не по-русски и используйте Ё.
Выкладывайте на ifolder, если не трудно.
Автор: Андрей Морковин, 10.01.2010 в 10:43
Спасибо, в упор не видел опечатки.
Автор: Рамиль, 11.01.2010 в 20:14
Спасибо, Андрей, за курс, полезен очень мне, решил наконец-то переходить с табличной верстки на блочную, только вот но есть одно…вторая часть. Архив там битый, увы( А она самая полезная для меня, исправить можно? Буду признателен
Автор: Андрей Морковин, 11.01.2010 в 21:31
Перепроверил архив (скачал и открыл, запустил видео). У меня все открывается без проблем. Думаю, что у Вас просто криво закачалось.
Автор: Рамиль, 11.01.2010 в 21:49
Сорри, архив восстановил) Спасибо ещё раз
Автор: Рамиль, 11.01.2010 в 21:48
У меня предложение, почему не сделать статью или не сделать урок о том, как устанавливать сторонние скрипты и подгонять их под свой сайт, к примеру фото галереи, опросы) Было бы интересно))
Автор: gusenica, 13.01.2010 в 21:14
Отличный парень, Андрюша!
:):) Вот только когда верстать переходишь свой сайт, сразу мозг в движах и вспоминает, как и что. Предполагаю, что это дело наживное.
Автор: Спасибо_Автору, 16.01.2010 в 23:55
Качает с торрент быстро и качественно! Ура!!! Респект автору – за его подход – because knowledge must be free. А то разным Поповым бабулесы подавай!!!!
Автор: Спасибо_Автору, 16.01.2010 в 23:56
Забыл ссылку на торрент кинуть
http://torrents.ru/forum/viewtopic.php?t=2599960
Автор: Карен, 23.01.2010 в 14:19
Я тот самый новичек
. Спасибо Вам большое за эти уроки. Всё было полезно, а больше всего мне нравились моменты, когда у вас не получалось что то и вы выходили из положения. ИМХО, это самое ценное. Правда ещё ценнее когда самолично выходишь из положения, тогда это сильнее в память врезаеца 
Автор: Ruslan, 31.01.2010 в 21:44
Превосходные уроки. Просмотрев уроки, я узнал много нового для себя в плане верстки.
Автор: Номад, 01.02.2010 в 06:19
Спасибо за урок. Я думаю для лучшего эффекта лучше совмещать дивы с таблицами)))
Автор: Андрей Морковин, 06.02.2010 в 09:33
Совершенно верно, не сама цель верстать только дивами.
Автор: K@tika, 01.02.2010 в 14:49
Вот удобный сss-валидатор. http://validator.w3.org/ Мне он нравится.
Автор: werthk, 05.02.2010 в 16:31
Что то с депозита 4 часть не качается(
ошибка 503
Автор: Андрей Морковин, 06.02.2010 в 09:09
Все части качаются. Пробуйте еще раз.
Автор: Андрей, 07.02.2010 в 21:58
Спасибо БОЛЬШОЕ за уроки! Очень подробно и доходчиво объясняете, а главное не увиливаете при возникновении трудностей и показываете как их можно решить.
Автор: Андрей, 07.02.2010 в 22:05
Вот еще у меня один вопросик он не совсем в тему ну может кто знает о проблеме в Dreamweaver CS3 а именно когда пользуешься снипитами(кусочками) после этого при переключении раскладки клавиатуры окно теряет фокус и приходиться клацать на нем мышкой для продолжения ввода кода. Может кто встречался с подобным багом и знает как его решить? Сейчас пользуюсь Dreamweaver 8.02 это еще продукт макромедиа такого глюка в нем нету.
Автор: ualex, 11.02.2010 в 04:36
Я вообще не html дизайнер, я больше по флешу прохожу. Но так уж случилось, что мне надо было шаблон для джумулы переделать .
.
Тыкался, мыкался в этот html +css проклиная его…
Пока не нашёл Ваши видеоуроки! Очень многое стало понятно
Однозначно блог в закладки! Спасибо!
Автор: sokoltiger, 18.02.2010 в 05:24
Спасибо автору! Замечательное видео! Как по мне, так вёрстка с ошибками и их последующим исправлением гораздо полезнее. Единственное, что Вы не справились сразу с границами. Это, конечно, немного удивило, так как здесь и проблемы то никакой нет.
Замечательным дополнением к видеокурсу был бы ролик об IE 6. О том как этот глюченный браузер понимает свойства CSS и о том какие – не понимает. Естественно желательно было бы туда добавить как с этим бороться.
Автор: Roman, 22.02.2010 в 14:03
Андрей, доброе время суток. Не могу найти скрипт согласно которому Вы исправляли прозрачность png24 в IE6. Укажите пожалуйста ссылку
Автор: Александр, 24.02.2010 в 18:29
Грамотно, доходчиво, понятно! Что еще можно сказать. Присоединяюсь к пред-идущему оратору, по поводу скрипта для IE6-PNG24. Подскажите где лежит.
Автор: Андрей Морковин, 28.02.2010 в 10:00
Ссылка на скачивание скрипта прозрачности ищите в описании к 7-му уроку по верстке (там как раз и идет речь о подключении этого скрипта).
Вот ссылка на урок: http://www.sdelaysite.com/kniga/verstka-kniga/blochnaya-verstka-div-7
Ссылка на скрипт: http://depositfiles.com/ru/files/xvfvmsrr1
Автор: Александр, 25.02.2010 в 08:10
Господа, не выкладывайте на ТОРРЕНТЫ, дайте автору хоть с депозита заработать, имейте совесть и так бесплатно человек столько трудов вложил!!!! Уважаю.
Автор: Nevill, 03.03.2010 в 21:19
Андрей, вопрос на засыпку, можно ли изменить цвет шрифта первого слова в заголовках с помощью CSS. Пытался что нибудь сделать с помощью first-child.. не получилось. Заранее спасибо за ответ.
Автор: Елена, 05.03.2010 в 23:02
Молодец Вы, Андрей – огромный труд сделали, офрмив ваш опыт и знания в этот курс видео уроков. Я много ценного для себя нашла , слушая Ваш замечательный курс по дивам.
И в знак благодарности поделюсь тоже секретиком, ведь обмен опытом очень ценен для всех нас. а может и не секретиком, но думаю, что часто не все об этом знают. Я дизайнер – имею большой опыт в работе именно с графикой. Поэтому совет чисто – фотошопский )).
Иногда!! можно избежать лишних трудностей в вёрстке и упростить максимально работу одним шагом,использовать всё-таки гиф прозрачный ВМЕСТО png и вместо jpg c фоном ( это избавить может от прибамбасов с IE6 – во-первых, во-вторых – решить проблемму с отступами – для наглядности ,например, в случае вёрстки горизонтального меню( по-моему о нём речь в уроке 8). Что для этого нужно , чтобы не было “бахромы” по контуру ГИФ изображения? Сделать всего один простой шаг в фотошопе- при сохранении изображения в формате gif обратить внимание на вкладку matte – по умолчанию стоит NOne. Но ! МЫ ВЫБИРАЕМ – Other и тыкаем на примерный ( или точный) цвет фона, на котором запланировано выводить наше изображение. В этом случае НЕ будет бахромистости.
Ещё раз спасибо за уроки. Это самое хорошее изложение материала, которое я встретила по данной тематике в инете.
И я давно искала именно то, что нашла у вас. Огромная и чудесная работа! И полезная. Ок, замолкаю… а то буду петь оды благоларности долго))))).
С благодарностью. Елена.
Автор: Елена, 06.03.2010 в 00:19
И за скрипт – отдельное спасибо тоже. Искала такой. Было в практике, когда именно png надо встатвить из-за сложного неоднородного по цвету фона . IE6- конечно ….. антивкусный. ))
Удачи!