блочная вёрстка сайтов, div вёрстка Как создать свой сайт > Вебмастеру > Создание своего сайта > Блог Андрея Морковина > Блочная вёрстка сайтов

Div-вёрстка: видеоуроки по блочной вёрстке сайта

Дружба между мужчиной и женщиной
очень слабеет при наступлении ночи.
Отто фон Бисмарк.
28 сентября 2009 года

    Подытожим 14-серийную эпопею видеоуроков по div-вёрстке сайта.

 

 

Вёрстка сайта — непростая наука, освоив которую, вы с лёгкостью сможете преобразовывать *psd-макет дизайна сайта в HTML + CSS-код, который одинаково хорошо выглядит во всех популярных браузерах.

Div-вёрстка — разновидность вёрстки сайта, в которой для позиционирования элементов на странице применяются теги <div>. Данный вид вёрстки гораздо предпочтительнее табличного подхода.

    На протяжении 14-ти видеоуроков мы с вами, уважаемый читатель, шаг за шагом, верстали из .psd-макета дизайна сайта, разработанного в Photoshop, кроссбраузерный HTML + CSS-каркас блочной div-вёрстки вебсайта.

    Полученная вёрстка сайта полностью соответствует стандартам (т. е. валидная) и с точки зрения HTML, и с точки зрения CSS.

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

    В видеоуроках я рассказываю об основных понятиях языка разметки гипертекста HTML и каскадных таблиц стилей CSS, а также на примерах показываю основные моменты работы в программах Photoshop и Dreamweaver.

Div-вёрстка сайта и её приемущества

    До недавнего времени (пока браузеры были молодыми и неопытными), сайты верстали при помощи таблиц. Элементы страницы размещались в ячейках и, таким образом, позиционировались в браузере. Больше никаких инструментов, сравнимых по мощи и гибкости с таблицами, для вёрстки сайта не было.

    Но с наступлением 21 века, слава Богу, браузеры «поумнели» и теперь для позиционирования элементов на странице можно применять блочную вёрстку (или вёрстку 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;
  • В браузер устанавливаем следующие дополнения: Web Developer и HTML Validator.

    Web Developer — это куча инструментов, среди которых есть валидатор HTML и CSS (ещё и JavaScript, но это уже из другой песни), который встраивается в панель инструментов браузера и показывает нам зелёные огоньки, если всё ОК или тычет пальцем на наши просчёты.

    Другой инструмент валидации (к сожалению, только HTML) — HTML Validator. Его плюсом является подробное описание ошибок html-структуры документа.

На сладкое

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

  • Хочу порекомендовать вам интересный блог, посвящённый вёрстке сайтов — Dimox.name;
  • HTMLbook.ru — отличный ресурс с подробной информацией по HTML-тегам и CSS-свойствам;
  • Csstemplater. Как вы помните, именно посредством этого ресурса мы создавали с вами отличный блочный HTML-каркас верстаемой страницы. Ресурс, всё в том же виде, переехал на другое доменное имя (раньше это был CSStool). Видимо, связано это с новыми правилами регистрации доменов в RU-сегменте.

Видеоуроки по div-вёрстке сайта

    Все уроки по div-вёрстке сайта одним списком:

    Автор: Андрей Морковин.

 

Ещё материалы по этой теме:

 

 

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

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

Андрей Морковин
Спасибо Вам за спасибо!
Паранойя — это, конечно, ничего хорошего.
По поводу возможных проблем при вводе контента: нужно смотреть урок 13. Я их там постарался описать и рассказал как предотвратить.

motor2hg
***

Андрей Морковин
Да-да

Владимир
Это что??

Андрей Морковин
Это валидатор (проверка на наличие ошибок в шаблоне верстки данного блога).

Иван
Ну по поводу валидности сегодня — это уже просто проверить
покрайне мере в опере
нажимаешь на страничке правой кнопкой и там есть — проверить стандарты
и оно проверяет через сайт стандартов
кстати результат этой страницы
: 101 Errors, 1 warning(s)
)))

jhekasoft
Насчёт валидности… Может не в тему, но верстка сайта Артемия Лебедева (надеюсь Вам знаком) не проходит валидности, и уж очень валидатор его ругает. Хотя и сайт известный и выглядит хорошо. Правильно говорят, что самый лучший валидатор — это браузер.

Андрей Морковин
Сайт Артемия Лебедева — это не мерило правильности. Кстати, Google и Яндекс тоже невалины.
Вообще, конечно, Бог с ней, с валидностью. Но, следующие версии браузеров, более жестко относясь к стандартам, могут некорректно отобразить невалидный код. А валидный код — это всегда приятно.

Maxim54rus
И я думаю что это приятно, но вот будущая разработка Divine уже может поставить крест на верстальщиках, особенно тех кто только и делает что верстает!) Разработчики обещают что их код будет валидным и возможность верстки как статичных(HTML) так и динамичных(для популярных CMS сразу готовый шаблон) страниц в Photoshop-е !)

kwon
Сайт Артема Л. валидатор ругает, да согласен, сам проверял, но! Я еще и посмотрел ту единственную ошибку на которую поругался валидатор — умышленная ошибка , не существующий тег в котором написано — Лучший валидатор Браузер

Элен
Пардон, а загвоздка с бордерами в верстке разрешилась??? Али так и остался сайт без них?

Андрей Морковин
Предлагаю Вам самостоятельно подумать над реализацией бордеров в данной верстке. Если что-то придумать не получится, то можете посмотреть комментарии к уроку №14
Но только сначала постарайтесь сами придумать решение. Это как ребус решить. В этом-то и есть изюминка работы верстальщика и программиста. Постоянно решаешь какие-то ребусы. Желаю удачи.

Teddy
Как же я долго искал, новые статьи по div вёрстке. Автор большое тебе спасибо, пиши ещё. Добавил в закладки сайт!

Андрей Морковин
Спасибо Вам за спасибо. Обязательно буду продолжать развивать сайт. Рад, что добавили в закладки.
Вы RSS пользуетесь? Я долго не принимал эту технологию. Но когда все-таки настроил ридер и стал добавлять туда каналы блогов, ощутил огромное удобство данного сервиса. Теперь и не представляют, как я мог обходится без RSS раньше.
Предлагаю Вам добавить сайт не только в закладки, но и в RSS ленту. Подробнее об RSS можно прочитать здесь: https://www.seoded.ru/webmaster/slovar-terminov/ra.html#rss
Кстати, если Вы принципиально против технологии RSS, то можете подписаться на обновления блога по эл. почте. Тогда каждая новая статья на блоге будет попадать в Ваш почтовый ящик, тоже очень удобно, рекоменду.
Ссылка для подписки на обновление блога по эл. почте: ***
RSS-канал блога: ***

Аноним :)
Приветствую, Андрей.
Вылью немного ледяной воды, чтобы остудить мед прошых комментариев
Посмотрел все уроки. Мое мнение, рано вам учить других.
Почему?
Слишком много элементарных ошибок. Возможно вам было наплевать на качество и вы не особо старались, но мне все же кажется, что вы хотели выпустить качественное видео.
Перечислю ошибки.
1. Помните ту маленькую белую точку между левым меню и горизонтальным? Это не какая то особенность верстки, вы просто криво обрезали картинку верхнего меню. Там осталась полоска белого. Не надо столько героически решать собственные косяки.
2. Зачем вы заливаете все белым? Это совершенно бессмысленно для гифа.
3. Зачем надо было фон горизонтального меню позиционировать отдельно? Не проще ли было вырезать его вместе с той кривой оранжевой полосой?
4. Выравнивать картинку маленького треугольника рядом с пунктом меню надо не через position-relative, а через vertical-align. Иначе если шрифты увеличить или уменьшить она будет криво расположена.
5. Это не совсем ошибка, возможно вы просто хотели упростить понимание css, но тем не менее. Делать отдельные свойства для каждого аттрибута background не желательно. Это только раздувает и усложняет код, особенно если путь указать в начале списка свойств, позицию в середине, а повторяемость в конце. Гораздо проще написать «background:url(/path/image.gif) top left no-repeat;» ну или любые другие значения но в одну строку. То же самое для большинства свойств css, если вам надо несколько аттрибутов свойства указать, то в большинстве случаев лучше их записать в одну строку.
6. То что вы не смогли сделать бордер рядом с тенью для всего сайта… Просто нет слов. Если уж вырезали фиксированую картинку для тени, то что помешало объединить ее с картинкой бордера? Не надо никакого геморроя с кодом.
В общем учитесь. Если уж делать что либо, то делать это надо качественно. Надеюсь у вас будут еще видео и качественнее этих уроков.
Спасибо за внимание.
Добрый аноним

Андрей Морковин
Приветствую Вас, добрый Аноним!
Спасибо за комментарий и за ледяную воду, это очень полезно. Отлично, что это не просто пустая критика, а аргументированная (жаль, но такое редко встречается в ру-нете).
Приятно, что Вы посмотрели все мои видеоуроки. По поводу того, что мне рано учить людей. У меня другая точка зрения (как не странно). Просто Вы, явно-таки, обладаете в области верстки вовсе не начальными знаниями, а просмотренный Вами материал сделан для начинающих. На разных уровнях нужен разный подход. Т.е. ситуация аналогична критике преподавателем ВУЗа школьной программы. Ведь и действительно, никакие электроны вокруг ядра не вращаются, но разве поймут ученики 8-го класса, что за зверь такой «область вероятности распределения отрицательного заряда». Смогут ли они впитать на начальном этапе все эти сложные моменты? Хватит ли у них терпения, для того, чтобы разобраться с ходу в дебрях? Я в этом сильно сомневаюсь.
Цель же моих видеоуроков – дать принципиальное понимание одного из этапов создания сайта: превращение psd-макета в HTML-код посредством div верстки. Существует множество книг и сайтов, подробно рассматривающие принципы работы в Photoshop-е и HTML+CSS. Но все это не связывается во едино и нет понимания того, как же все-таки делают сайты.
По поводу списка ошибок. В начале хотел сказать, что я, в качестве подготовки к каждому из видеоуроков, лишь мысленно прогнал ход событий и потом наживо записал процесс верстки. Благодаря этому у меня возникали определенные ошибки и недочеты. Связанно это с тем, что я не занимаюсь с утра до вечера лишь версткой и у меня нет четкой последовательности действий для решения той или иной задачи и записывая видеоурок я очень волнуюсь. Каждый раз, решая определенную задачу, я как бы разгадываю ребус, что меня очень забавляет и работа становится интересной. Из-за того, что четких подходов к решению той или иной задачи верстки я в своей памяти не храню, мне приходится придумывать пути решения на лету и иногда они оказываются неверными.
Но, даже неверный подход, дает слушателю понимание принципов решения поставленной задачи (то, что может быть множество решений и, порой, каждое из них применимо в той или иной ситуации). Слушатель видит процесс написания кода и процесс его отладки. И сухой, безошибочный видеоурок, в данном контексте, оказывается мертвым.
Давайте пройдемся по Вашим замечаниям подробно (еще раз спасибо за их перечисление, это очень правильно и полезно):
1) Благодаря тому, что я криво обрезал фон, зритель все равно получил понимание процессов его вырезания из макета и получил его в полной мере. А то, что я не заметил досадной ошибки (возможно, сказалось волнение, возникающее в процессе записи, я не профессиональный подкастер) позволило мне продемонстрировать, как вы выразились, героические подходы по решению данной проблемы. Я уже не помню, как именно я боролся со своей ошибкой, но слушатель, поняв как и вы причину появления белой полоски, сможет откинуть применения моих действий в данной ситуации, но намотает на ус еще несколько трюков. Разве это плохо?
2) Не понял, что именно вы имеете ввиду. Вполне возможно, что Вы полностью правы. Только прошу пояснить, где именно я допустил эту ошибку и в чем она заключается.
3) А каким бы образом я рассказал о позиционировании фона?
4) Да, vertical-aligen отлично сработал бы в этом месте. Но, данный урок имел целью рассказать о возможности увеличения размера контейнера и размещения в нем прикрепленной картинки. Разве не фоновым изображением я ставил этот маленький треугольничек? Фон можно позиционировать свойством vertical-align?
5) И здесь Вы абсолютно правы. Я действительно хотел упростить понимание CSS. Но сейчас я вижу, что делал это напрасно и сокращенная форма записи для понимания ни чуть не сложнее. Но зато новичок будет точно знать, что это за дополнительные свойства (background-position, margin-top… иногда именно такое обращение к свойству делает возможным решение некоторых задач, яркий тому пример – это резиновый блок с закругленными углами, где я обнуляю верхний border именно обращением к свойству border-top https://www.seoded.ru/webmaster/morkovin/kruglie-ugly.html) Кстати, когда я только знакомился с CSS, я, почему-то, не использовал сокращенных свойств. Мне казалось, что так как-то понятнее.
6) Я не мог решить эту задачу, чтобы координально не менять то, что я сделал где-то в середине видеокурса. Я считал, что смогу воспользоваться свойством border, но, когда подошел к этому этапу, то понял, что решить задачу при помощи border-а невозможно. Если Вы почитаете комментарии к уроку, где я отказался устанавливать границы, вы поймете что это простимулировало слушателей поработать самостоятельно и, довольно-таки быстро, найти решение поставленной задачи. Я же нашел решение проблемы как только закончил запись урока
И Вы совершенно правы, что нужно учится, это просто необходимо. Видеокурс по верстке сайта был лишь пробой пера. Следующие видеокурсы обязательно будут более интересными.
И еще, задача видеокурса – это не сверстать идеально правильно сайт Kas-Ved (кому он вообще нужен, у каждого слушателя свой собственный сайт), а познакомить новичков с принципами блочной верстки. Я считаю, с поставленной задачей (именно новички и именно принципы верстки) курс справился и имеет право на существование. Это обучение, а не мастер-класс.

Ольга
Анонимно легче, видно, воду холодную лить…

Тот самый аноним)
Честно сказать не понимаю этой неприязни анонимов)
Ольга, почему же вы сами не залогинились? Может быть мне еще нужно присылать скан паспорта для каждого комментария? Просто все другие доказательства кроме паспорта ничего не изменят.
Что вы иммете ввиду говоря про анонимность на ЭТОМ блоге? Я оставил свой электронный адрес, этого я считаю достаточно если автор захочет со мной связаться. Ошибки я привел вполне конкретные, то есть говорил не голословно.
И вообще людей, а особенно в интернете мне кажется нужно оценивать не по анонимности, а по тому, как они говорят/пишут.
Если написал три слова, два из которых мат, то ну его нахер. Пишет что то более менее внятное и пытается обосновать, то можно и почитать, хотя никто никого не заставляет.

Аноним :)
Х его з на самом деле как оно правильно. Я не претендую на абсолютную истину. Уроки безусловно ваши и вам лучше знать что в них и как должно быть.
С vertical-align мой косяк, я почему то думал там картинки, скачал верстку посмотреть, а там через background эти треугольники сделаны. Четко запомниось что там в пикселях отступ был, а не процентами или «center».
В общем c vertical-align ошибся, но идея была правильная, если позицию задавать попиксельно, то при изменении размера шрифта треугольник будет сверху, а не по центру. Поэтому желательно ставить «background-position:5px center;»
Учиться надо, да Вот я например ваши видео смотрю, вы мои советы прочитаете, так вот и движется прогресс однако Везде можно найти что то новое.
Главное чтобы вот так не было:
Космические корабли «бззззз» бороздят «бззззззз».
То бишь feedback так сказать нужен

Андрей Морковин
Действительно, когда корабли начинают бороздить бззззз — это уже совсем нехорошо и не стоит на это время тратить (ни чтобы писать, ни чтобы читать).
Уроки действительно мои, но как и что должно быть, чтобы они стали лучше, виднее не мне, а слушателю, как это не парадоксально. Поэтому совершенно с Вами согласен, feedback очень важен.

Роман
Тут есть — ***

Elia
Андрей, большое спасибо за видеоуроки. Очень помогли в верстке моего сайта. Все просто и понятно, для таких новичков, как я.
Хотела бы спросить — какой программой вы записываете видеоуроки?

Андрей Морковин
Видео записываю в Camtasia Studio.

Дмитрий
Андрей, большое спасибо за видео уроки. У меня вопрос, а сколько стоит верстка в Вашем исполнении, по заморочкам среднего сайта!?
PSD>код (валидный)

Андрей Морковин
Рад, что видеоуроки оказались полезными!
По поводу стоимости верстки — бессмысленно говорить среднепотолочные цифры. Если есть конкретная задача, то пишите в аську или на почту.

Гость
А есть какой-нибудь альтернативный источник скачивания? С Deposit проблемы.
Может torrent?

Гость
Кстати ifolder гораздо лучшеб чем Deposit!

Андрей Морковин
Альтернатив нет Я на torrent ничего не выкладывал.

Edgard
Я не вижу смысла автору раздавать в torrent, так как уроки и так бесплатные, то дайте хотя бы заработать на файлообменных сайтах немного средств на поддержание дальнейшего нашего обучения ))
Автору огромное спасибо за проделанный труд.
P.S. Сколько верстальщиков, столько и приемов, ошибок можно найти и в дизайнерских конторах, так что не судим строго!

сергей
Добрый день, Андрей
Нужна ваша помощь.
Я просмотрел Ваши уроки по див верстке. По вашему примеру начал верстать сайт. Опыта вэб-программирования у меня не было.
Я сгенерировал html страничку и сss с помощью сайта csstool.
Проблемма в следущем. Когда я добавил в код своего сайта javascript для динамической кнопки, у меня левый sidebar в ie6 стал сдвигаться в правую сторону.
Я не знаю как решить эту проблемму. Пробовал менять марджины и падинги для sidebar.

Андрей Морковин
Ничем не могу помочь, пока не увижу кода. Присылайте мне на почту вопрос (детально опишите проблему, что где когда и почему происходит) и исходники (HTML + CSS + JavaScript), но только тот кусок, который является проблемным. Постараюсь помочь.

Дмитрий
Андрей, огромное спасибо за уроки, очень помогли в первых шагах осваивания html и css. Скажите, Вы не планируете выпустить книгу или видео курс, в котором будут централизованы все знания по css и html Вашего блога?
ЗЫ. Если можно, выложите на народ одним архивом. Скачивать не очень удобно.

Андрей Морковин
Пока серьезно над впуском книги или видеокурса не задумываюсь.
Все обещают выложить на Торрент, но никто, видимо, так и не выложил.

Never Lex
Вообще отличный курс. Я хоть и 99% процентов знал всего что было показано, смотреть было интересно. Хоть косяков было достаточно, но Андрей всегда выходил из положения. Зато новички представят процесс вёрстки. Ведь так часто и бывает. Где-нибудь ошибёшься, а потом танцы приходится устраивать. С бубенцами
Вот жаваскрипту я действительно буду учиться (знаю его совсем немного). Пошёл качать.
П.С. А нет. Сначала по фотошопу надо пройти Изучать так уже весь сайт с начала до конца

Intcorp
Отличные уроки. Только начал разбираться с версткой сайта и через 3-4 дня сверстал шаблон для сайта на джустине. Обучение начал по одной известной книге по дримвиверу 8, но потратив почти двое суток так и не достиг цели даже полностью дублируя код приведенный в книге( Посмтрел все 14 уроков и сразу получился довольно-таки неплохой шаблон.
Кстати, csstool немного криво генерирует резиновый шаблон — почему-то их футер улетает вправо, но если сделать для него clear:both все встает на место.

Realfriend
Если честно было нудно смотреть, голос однатонный, чуть неуснул

Zysy
Огромное-преогромное СПАСИБИЩЕ!
Правда я как бэ много верстал раньше на таблицах, и как минимум 30% видио приходилось пропускать.
Но в целом помогло не реально, сам бы прокопался и убил в 20раз больше времени. Респект.
Но как то тихо, по громче озвучить надо бы

Dima
А ваш сайт не валиден: пишет что ошибки ява и цсс))

Zysy
+1 к мнению Realfriend, чей пост двумя постами ранее.
К концу становилось все нуднее и нуднее, т.к. очень многое по многу раз повторялось… Но не смотря на это, урок очень сильно помог. Еще раз спасибо и респект.

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

Андрей Морковин
Я перемещал окно Оперы, потому что это первый пришедший мне в голову способ.

Vodoptic
и кстати в 8м уроке , как раз сейчас на нем остановился. Применяя position:absolute, и подгоняя отступы слева и сверху, не проще ли померить эти отступы линейкой в шопе? чем сидеть подбирать?.
Я не верстальщик, с дивами первый раз сталкиваюсь через ваши уроки ) но многи вещи и так понятны )

Андрей Морковин
Линейкой в Photoshop померить не проще, потому что, обычно, в HTML получаются другие размеры, нежели в дизайн-макете. Самый лучший вариант, на мой взгляд, это воспользоваться подбором значений в FireBug-е.
О том как это делать можно посмотреть в соответствующем видеоуроке (описанная тема затрагивается на 6-ой минуте видео)

Марат
А разве нельзя было вместо top: px; left: px прописать right: 0; bottom: 0 что бы горизонтальное меню примкнуло к правому нижнему углу?

Игорёк
Да вы просто молодец и всё тут!
Во всём Интернете нихера не найдёшь такого материала, а вы взяли и сделали. Мой вам поклон.

Vodoptic
Ааа, ну спасибо ) теперь все понятно ) про линейку вы правы, на практике убедился. Записывайте еще )

Валерий
Спасибо большое за уроки Андрей. Меня они ввели в представление и более чем верстки дизайна. Побольше бы таких ресурсов!
С уважением, Валерий. г. Краснодар

Ольга
Андрей, как у Вас тут хорошо! Душевно, я бы сказала.
Замучилась ковырять шаблон Joomla1.5 — не выделяется активный пункт меню хоть ты тресни! Поставлю, наверное, «хлебные крошки» — они все проблемы навигации решат, надеюсь Если других проблем, конечно, не нагребут
С Новым годом Вас!

Юлия
ДЛя Joomla 1.5 есть программа Artisteer, которая генерит автоматом кроссбраузерные шаблоны. Шаблончики отлично садятся и работают. Кстати, шаблоны НЕ только на джумлу генерит.

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

40a
Исправьте картинку, «немЕного» не по-русски и используйте Ё.
Выкладывайте на ifolder, если не трудно.

Андрей Морковин
Спасибо, в упор не видел опечатки.

Рамиль
Спасибо, Андрей, за курс, полезен очень мне, решил наконец-то переходить с табличной верстки на блочную, только вот но есть одно…вторая часть. Архив там битый, увы( А она самая полезная для меня, исправить можно? Буду признателен

Андрей Морковин
Перепроверил архив (скачал и открыл, запустил видео). У меня все открывается без проблем. Думаю, что у Вас просто криво закачалось.

Рамиль
Сорри, архив восстановил) Спасибо ещё раз

Рамиль
У меня предложение, почему не сделать статью или не сделать урок о том, как устанавливать сторонние скрипты и подгонять их под свой сайт, к примеру фото галереи, опросы) Было бы интересно))

Vjkxey
Думаю о сниппетах и врезке сторонних скриптов будет рассмотрено позднее.
Сейчас рано говорить об этом. ИМХО. Разобрав все основы можно переходить к более сложным задачам.

gusenica
Отличный парень, Андрюша! :):):) Вот только когда верстать переходишь свой сайт, сразу мозг в движах и вспоминает, как и что. Предполагаю, что это дело наживное.

Спасибо_Автору
Качает с торрент быстро и качественно! Ура!!! Респект автору — за его подход — because knowledge must be free. А то разным Поповым бабулесы подавай!!!!

Спасибо_Автору
Забыл ссылку на торрент кинуть *** Скачивайте видеокурс по div верстке сайта.

Карен
Я тот самый новичек :). Спасибо Вам большое за эти уроки. Всё было полезно, а больше всего мне нравились моменты, когда у вас не получалось что то и вы выходили из положения. ИМХО, это самое ценное. Правда ещё ценнее когда самолично выходишь из положения, тогда это сильнее в память врезаеца

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

Номад
Спасибо за урок. Я думаю для лучшего эффекта лучше совмещать дивы с таблицами)))

Андрей Морковин
Совершенно верно, не сама цель верстать только дивами.

K@tika
Вот удобный сss-валидатор. *** Мне он нравится.

werthk
Что то с депозита 4 часть не качается(
ошибка 503

Андрей Морковин
Все части качаются. Пробуйте еще раз.

Андрей
Спасибо БОЛЬШОЕ за уроки! Очень подробно и доходчиво объясняете, а главное не увиливаете при возникновении трудностей и показываете как их можно решить.

Андрей
Вот еще у меня один вопросик он не совсем в тему ну может кто знает о проблеме в Dreamweaver CS3 а именно когда пользуешься снипитами(кусочками) после этого при переключении раскладки клавиатуры окно теряет фокус и приходиться клацать на нем мышкой для продолжения ввода кода. Может кто встречался с подобным багом и знает как его решить? Сейчас пользуюсь Dreamweaver 8.02 это еще продукт макромедиа такого глюка в нем нету.

ualex
Я вообще не html дизайнер, я больше по флешу прохожу. Но так уж случилось, что мне надо было шаблон для джумулы переделать .
Тыкался, мыкался в этот html +css проклиная его…
Пока не нашёл Ваши видеоуроки! Очень многое стало понятно :).
Однозначно блог в закладки! Спасибо!

sokoltiger
Спасибо автору! Замечательное видео! Как по мне, так вёрстка с ошибками и их последующим исправлением гораздо полезнее. Единственное, что Вы не справились сразу с границами. Это, конечно, немного удивило, так как здесь и проблемы то никакой нет.
Замечательным дополнением к видеокурсу был бы ролик об IE 6. О том как этот глюченный браузер понимает свойства CSS и о том какие — не понимает. Естественно желательно было бы туда добавить как с этим бороться.

Roman
Андрей, доброе время суток. Не могу найти скрипт согласно которому Вы исправляли прозрачность png24 в IE6. Укажите пожалуйста ссылку

Александр
Грамотно, доходчиво, понятно! Что еще можно сказать. Присоединяюсь к пред-идущему оратору, по поводу скрипта для IE6-PNG24. Подскажите где лежит.

Андрей Морковин
Ссылка на скачивание скрипта прозрачности ищите в описании к 7-му уроку по верстке (там как раз и идет речь о подключении этого скрипта).

гаечка
Делаю все как дается в видеоуроках, скриптик этот тоже поставила — все вроде бы как надо, и на сам сайт источника зашла посмотрела, но эксплорер показывать не хочет!
Может что-то неправильно указываю с этим blank.gif (зачем он нужен)? Может туда свою картинку .png поставить?
Совсем уже запуталась-замучалась. sos, помогите, уже который день пытаюсь разобраться с этим.

Александр
Господа, не выкладывайте на ТОРРЕНТЫ, дайте автору хоть с депозита заработать, имейте совесть и так бесплатно человек столько трудов вложил!!!! Уважаю.

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

Елена
Молодец Вы, Андрей – огромный труд сделали, офрмив ваш опыт и знания в этот курс видео уроков. Я много ценного для себя нашла , слушая Ваш замечательный курс по div верстке.
И в знак благодарности поделюсь тоже секретиком, ведь обмен опытом очень ценен для всех нас. а может и не секретиком, но думаю, что часто не все об этом знают. Я дизайнер – имею большой опыт в работе именно с графикой. Поэтому совет чисто – фотошопский )).
Иногда!! можно избежать лишних трудностей в верстке и упростить максимально работу одним шагом,использовать всё-таки гиф прозрачный ВМЕСТО png и вместо jpg c фоном ( это избавить может от прибамбасов с IE6 – во-первых, во-вторых – решить проблемму с отступами – для наглядности ,например, в случае вёрстки горизонтального меню( по-моему о нём речь в уроке 8). Что для этого нужно , чтобы не было “бахромы” по контуру ГИФ изображения? Сделать всего один простой шаг в фотошопе- при сохранении изображения в формате gif обратить внимание на вкладку matte – по умолчанию стоит NOne. Но ! МЫ ВЫБИРАЕМ – Other и тыкаем на примерный ( или точный) цвет фона, на котором запланировано выводить наше изображение. В этом случае НЕ будет бахромистости.
Ещё раз спасибо за уроки. Это самое хорошее изложение материала, которое я встретила по данной тематике в инете.
И я давно искала именно то, что нашла у вас. Огромная и чудесная работа! И полезная. Ок, замолкаю… а то буду петь оды благоларности долго))))).
С благодарностью. Елена.

Елена
И за скрипт — отдельное спасибо тоже. Искала такой. Было в практике, когда именно png надо встатвить из-за сложного неоднородного по цвету фона . IE6- конечно ….. антивкусный. ))
Удачи!

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

Андрей Морковин
Спасибо на добром слове.

user_lol
Огромное спасибо

Митек
Жаль ссылки нет на сайт который делался у нас на глазах, он теперь как родной ( я даж в какойто момент жутко молока захотел) посмотреть бы не локально как вы здесь предлагаете (исходник psd и каркас html, css) а как бы в действие… гуглил ничего не нашел а любопытно однако
Курс уроков отличный, спасибо!

Андрей Морковин
Да, подопытного сайта в сети нет. Заказчикам не понравился дизайн.

IT_Gleb
Дизайн-то действительно совсем не современный… А уж оранжевый цвет с молоком вообще не ассоциируется.

aGgY
Вот блин, смотрел уроки ради этих вертикальных бордеров а про них ничего не сказали :)) Может всетаки посвятить этому «Бонус-урок»?

Андрей Морковин
Почитайте комментарии к последнему уроку. Там эта проблема решена.

Аноним
Большое вам спасибо, Андрей, за замечательный DIVный видеокурс. Немного поупражнялся — получается неплохо. Желаю вам скорейшей публикации следующих видеокурсов и творческих успехов.
P.S. Морковка в favicon’ке отличная.

Камиль
Поддерживаю. Классный курс.

cymnQuemy
Интересно, а много времени отнимает ведение блога?

Олег
Огромное человеческое спасибо за уроки! Очень полезны! Не могли бы вы или кто-то, выложите где-то на другом файлообменнике все уроки, а то у меня с депозита не качает((((…да, и на рапиду тоже не надо, такая же проблема(((..Заранее благодарен! С уважением))

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

spisenaitsBib
А телефон свой не оставите? Хотелось бы кое-что обсудить по теме.

Rustick
Андрей, отличные уроки. Закачиваю смотреть последние уроки. Подскажите каким образом практиковаться в плане html и css? Я не дизайнер, поэтому и макетов для практики нету. Как лучше поступить?

Oleg
Очень благодарен за уроки — наверное лучшее в сети по блочной верстке!!!
Я после них искал ПСД-шки шаблонов и делал уже все самостоятельно =)) Кста, не примите за рекламу — но найти в сети бесплатные ПСД шабов сайта, да еще и не плохих — оч. трудно.. Нашел сайт *** — весьма неплохая подборка, как на меня.
Вам, Андрей, еще бы за CMS взяться, DLE, Joomla — а то то, что в сети находишь — ну никак на нормальное обучение не тянет..)

Masterix
Агромное Вам спасибо! С Ваших урокво я научился верстать макеты любой сложности. Теперь и сам могу записать пару кроков =)

Виктория
Спасибо огромное преогромное!!! Просмотрела все видео-уроки на одном дыхании. Теперь непонятного стало намного меньше. Присоединяюсь ко всему вышесказанному, самый понятный материал — на вашем ресурсе. К моему сожалению, я, не смогла разобраться до конца со многими вещами…Но уже прогресс, благодаря вашим урокам я сверстала свой сайт на 2/3. За это огромное спасибо еще раз!
То что осталось непонятным касаемо «скелета» который делается на csstemplate, так это
1. что за стили применены к middle
2. почему сайдбар ложится сверху container?
3. почему content такого же размера как и container?

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

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

Павел
Подскажите пожалуйста где можно скачать psd шаблон сайта? Чтобы научится верстать.

Екатерина
Андрей, уроки у вас просто бесценны для новичков. В голос я просто влюбилась). Спасибо за такую работу.

Евгений
Огромное спасибо за уроки! У меня вопросик! csstool не грузится, как я полагаю из-за того что его вообще нет! Он куда-то переехал? Подскажите, есть ли альтернатива?

Андрей Морковин
Ресурс переехал сюда: csstemplater

Сергей
Доброго времени суток, Андрей!
Правильно ли я понял, что в index.html, чтобы убрать чёрные полоски, нужно заменить наименование id c wrapper1 на wrapper?
Заранее благодарен
P. S. Спасибо за доходчивые уроки!

Андрей Морковин
Честно сказать, я уже не помню, давно это было.

Mike
А paypal-ом заплатить никак? Нет у меня вебманей

Андрей Морковин
Пока только WebMoney, но в ближайшее время я расширю список способов оплаты.

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

Zender
По поводу того как сделать правильные оранжевые линии по краям сайта, вот мой способ, написал тут только то, что добавил…
#logo {
position:relative;
left: -4px;
z-index: 2;
}

#wrapper {
border-left: 4px solid #ff9933;
border-right: 4px solid #ff9933;
position:relative;
z-index: 1;
}

#footer {
position:relative;
z-index: 2;
}

Diablo
Здравствуйте, Андрей! Огромное спасибо вам за ваши видео-уроки div верстки! Благодаря им открыл для себя div верстку страниц и научился более-менее нормально пользоваться Фотошопом.
Сразу просьба — перезалейте, пожалуйста, второй (это где с 6 по 9 урок) видеокурс, Депозита пишет такое уже который раз: «Уважаемые клиенты, приносим свои извинения, но в данное время файл не может быть доступен в связи с проведением обновлений ПО.
Мы гарантируем вам, что файл будет доступен спустя некоторое время!
Попробуйте пожалуйста позже!», а «спустя некоторое время» ничего не меняет уже неделю(((( Пришлось по книжкам дорабатывать…. Воть…

Андрей Морковин
Перезалил, проверил — качается. Милости прошу

Ирина
Андрей, Видеоуроки по div-верстке сайта с 6 по 9 (*.zip 129.2 МБайта) уже второй день не могу скачать с депозита…
С этим что-то можно поделать? Остальные скачались без пробл…
Только я не могу скачать или кто еще?
Спасибо вам за блог и уроки,
и заранее спасибо мне за спасибо…)

Андрей Морковин
Перезалил, скачивайте.

Валера
Не могу скачать Видеоуроки по div-верстке сайта с 6 по 9, уже дней 5 одно и тоже вылетает на депозите:
Уважаемые клиенты, приносим свои извинения, но в данное время файл не может быть доступен в связи с проведением обновлений ПО.
Мы гарантируем вам, что файл будет доступен спустя некоторое время!
Попробуйте пожалуйста позже.
Не подскажите как решить эту проблему?

гаечка
Ну и где же fixpng.js? Я найти не могу. А то, что нашла в нете неподходит — на ie не дейтсвует((

Андрей
2 часть уже качается
еще раз спасиб

likrion
Андрюха! спасибо-Вывел меня на новый уровень)

Ольга
Посмотрела всю див верстку и все дополнительные уроки-спасибо Андрей Вы меня многому научили!С нетерпением буду ждать новых видео уроков.

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

Андрей Морковин
Вы попробуйте использовать визуальный редактор и посмотрите какой ужасный код будет рождаться. Именно из-за ужасов и тяжести получаемого кода и из-за невозможности реализовать ту или иную задумку визуальные редакторы использовать не получается.

Fiv
У меня тут вопрос возник, я немного не понял, а для других страниц сайта нужен отдельный css файл? Тоесть для каждой страницы свой *.css файл нужно делать? Если нет, то как прикрепить все html страницы к одному css файлу?

betina
Огромное спасибо, Андрей!!! Все достаточно просто и понятно. Я например начинала обучение с табличной верстки и мне было очень трудно разобраться с CCS. А теперь становится все ясно как день.
Да и у меня вопрос. Если я где-нибудь увижу интересный элемент в верстке какого-нибудь сайта, и не пойму как его делать, можно будет обратиться к вам за разъяснением и сколько это будет стоить?

Сергей
Спасибо огромное!) до этого рисовал только дизайн, теперь и верстать сам буду. урааа))

Андрей (тоже)
Андрей, спасибо за курс! Все что говорят критики по поводу вашего обучения — это фигня, вы все правильно делали и не грузили новичков всякими сверх умными понятиями, это им не надо. Для новичка и эти простые уроки достаточно сложны. Я сам отношусь именно к этому классу Еще раз большое спасибо — вы на правильном пути.

Алексей
Здравствуйте Андрей! Может Вы можете подсказать? Из под Денвера Опера не выбирает правильную кодировку и кириллицу отображает как абракадабру. Это при div-вёрстке (Ваш курс).

Филин
Курс просто замечательный! Давно уже искал подобное, а туту еще и бесплатно. Но я тем не менее приобрел одним архивом за 50 р. В качестве награды автору за труды. Очень все доступно изложено!

Владимир
У сайта генератора сменился адрес csstemplater

Владимир
вот теперь все кульно вышло и понятно вроде все…

chibiz
Да сайт сверстали ну а что делать дальше как его можно поставить на какой либо движок?(например друпал)

Иван
Div верстка сайта. Базовый видеокурс Урок 6
Андрей, добрый день!
Почему у меня нет стрелочки со словами Kas-Ved, хотя когда я закрывал глазок эта часть исчезала вместе с частью Logo? В принципе она должна была быть.
Причем изображение почему-то не на своём месте.
Что можно сделать?
Спасибо за подсказку
Иван

Иван
Div верстка сайта. Базовый видеокурс Урок 14
Андрей, добрый день!
Создал bg-footer, вложив туда все изображения (кувшин, макароны…), сохранил в web, ну в общем всё как положено. В браузере этих изображений нет. Перепроверил все записи до последней точки в своих и в Ваших папках готовой вёрстки index.html и style.css, затем скопировал bg-footer с Вашего исходника и вставил в свою папку images, но всё по-прежнему, ни один браузер не отвечает. Удалял этот футер и снова верстал… Ведь сайд-бар у меня установился без проблем. Если в Вашей практике были такие прецеденты, то спасибо за подсказку.
С уважением,
Иван
PS. В уроках, где Вы показываете записи кода в style.css есть одна неприятная для пользователя штука: водяной знак закрывает то, что Вы пишите внизу.

Megaman
Спасибо за присоветованные утилиты. Ранее пользовался только Firebug.

Роман
Андрей, огромное Вам человеческое спасибо! Эти уроки оказали очень большой эффект! И особенно приятно, что Вы рассказываете очень простым и доступным языком, без менторства, а как будто на равных со своим слушателем)) Теперь не все так страшно, как казалось!
Хотелось бы задать вопрос. По моему мнению здесь не хватает одного урока.. Мы сверстали одну Главную страницу.. Но было бы совсем прекрасно, если бы Вы рассказали, как сделать переход хотя бы на одну(другую) страницу — Контакты, например. Или переход по ссылке это обширная отдельная тема? Просто пока для меня загадка, на что нужно ссылаться? На копию нашего index.html с измененным контентом? Извините за, возможно, глупый вопрос.))
С уважением, Роман

Кристина
Здравствуйте Андрей!Благодарю вас за уроки, хоть я считаю себя новичком в этом деле, многое что вы рассказывали мне знакомо!Вы очень хорошо и доступно объясняете, как правило расчитанно на разную аудиторию, поэтому продолжайте в том же духе!По поводу скриптов к IE6, я ,к сожалению, не нашла где вы их выложили?Tак же на счет платных уроков, не могли бы вы придумать более простой способ оплаты?Буду рада новым видео урокам!Вы молодец!

Extremum
Посмотрел.
Впечатление категорически негативное:
1.Пляски с бубном — я понимаю что вам нравится эта фраза. но не надо ее повторять раз 40 за все уроки. Некоторые моменты можно было с легкостью объяснить а не камуфлировать «плясками с бубном» свое неведенье.
2.Вместо длинного геморроя с логотипом и выдумыванием ненужных заливок, можно было бы просто сохранять в GIF с поставленной отметкой на параметре «Чересстрочно» — тогда не вылазят артефакты.
3.А когда коснулся вопрос кликабельности треугольников для меню и фразы «будем считать что нам это не надо»,»надеюсь вы поняли что я сказал, на до Бог с ним» и прочее — вообще бред.
Вы тогда не видеоуроком позиционируйте свои творения, а хроникой начинающего верстальщика.

presedent
Вот еще подробная статья по валидной верстке XHTML Strict 1.0 и пример есть, скачать можно.
***

Андрей (тоже)
Андрей, большое вам спасибо за этот курс. Именно благодаря ему я понял КАК надо работать с CSS. А всех умных профессионалов не слушайте! Порой нужно пожалеть уши ученика и не загружать его лишней информацией, а донести ему именно принципы работы! Что вам, я думаю, удалось на 100%. Все остальное ученики сами найдут когда поймут что им нужно. Еще раз спасибо — вы очень помогли.

Максима
Спасибо огромное, давно мечтала научиться делать сайты. Ваши уроки замечательно помогают увязать элементы в единый процесс. Вы сделали очень нужную вещь! Еще сделайте ссылочку на sms или web-money на видном месте. Очень хочется поблагодарить ))

V1CTOR
Можно ли как-нибудь через div+css прижать бэкграунд сайдбара (без контента) к футеру? А то у меня их два (справа и слева) и получается некрасиво, когда на сайдбарах разное кол-во контента, то и задний фон на странице неравномерно отображается.

Станислав
Спасибо вам огромное за видео!!! очень полезное! все понятно и интересно рассказано!!! Давно искал что то подобное чтоб так понятно было все изъяснено!)

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

Роман
Спасибо за уроки, Андрей! Благодаря Вам сделал себе сайт. По-моему, первый блин вышел не комом

Игорь
Здравствуйте Андрей!
уроки хорошие! СПАСИБО!
— есть пару КРАЙНЕ НЕУДОБНЫХ МОМЕНТОВ:
1 — прошу вас сделайте разрешение экрана нормальным — НЕ НАДО ЕГО УВЕЛИЧИВАТЬ КОГДА ВЫ ПИШЕТЕ КОД — это очень не удобно
2 — уроки по верстке — ТАК И НАДО ДЕЛАТЬ ПО ВЕРСТКЕ — а то из 30 мин урока 20мин вы расказуваете как надо рисовать и вырезать в фотошопе — эта вода совсем не интересна и толь раздражает
3 — моменты по позиционированию о них по подробнее, есть проблемы — верхние блоки налазеют на футер
с уважением И.

cybd
Здравствуйте, Андерй. Во время просмотра первой части видеоурока из четырех появилось мнение что дизайнеры постоянно издеваются над теми, кто дальше работает с ихним дизайном =)
В целом объясняется простым языком, местами даже смешно, это правильно, чтобы нудно не было.
И немного критики в Ваш адрес. Немного режет слух слова «хайт» (height), «видч» (width). По возможности, в будующих уроках, учтите этот момент пожалуйста.

cybd
По поводу своего последнего сообщения. Прошу прощения за слово height. Если честно, то всегда его читал как «хейт». Ради интереса погуглил, действительно «хайт». Довольно неприятная неожиданность. Ну да ладно. А по поводу «кеэсэс» вместо «сиэсэс», «хэ тэ эм эл» вместо «эйч ти эм эл» — остается в силе Продолжаю смотреть видео урок по верстке.

cybd
Андрей, спасибо за курс, базовые знания я получил. Объясняете простым языком, бывает с юмором. Хотелось бы написать несколько замечаний по Вашему сайту.
Приходиться очень много прокручивать страницу вниз. Неудобно. Комментарии можно было бы расширить на всю ширину шаблона.
Спасибо.

Konstantin
Автору респект и уважуха! Для новичка само то!
Благодарствую!

Aidarxan
Извините, но почему-то не получилось скачать psd макет сайта с депозита….. вы не могли бы его перезалить?

Владимир
Да, курс неплохой. если учесть, что идеального не бывает. А дизайнеры — это страшные люди. У каждого свое мнение и свои критерии оценки дизайна, особенно чужого…

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

Денис
Во втором видеоуроке поменяйте сайт на csstemplater.

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

Capricorn
Здравствуйте, Андрей!
Будьте добры, перезалейте psd-макет дизайна сайта и готовую верстку — не скачивается (

Pedro
Было б неплохо сделать пару видеоуроков по обучению DLE движка (DataLife Engine)

Снежана
Спасибо вам огромное за уроки!

Александр
Андрей, а где скачать(кроме платного варианта), сам psd исходник кодируемого сайта?

Александр
Андрей, а где скачать (кроме платного варианта), сам psd исходник кодируемого сайта? По землячески (я со Снежного) дай ссылочку.

Александр
Забыл поблагодарить за сами уроки. Спосибо огромное, всё понятно и доступно, но отсутствие самого шаблона здорово портит мне нервы. Нарисовать такой-же не смогу…

Саймон
А какова оющая длительность видеокурса в часах??

Nikolay
Здравствуйте.
видео по чему то не скачивается.. а так тема очень интересна.

Михаил Дмитриевич
Доброе время встречи.. У меня просьба объяснить мне как вмонтировать в бушующий сайт однополчан «9rotafba» экран видео плеера в который я смогу вставлять небольшие клипы наших встреч что бы кто не смог приехать были в курсе и фото в галерею, так как я далеко не специалист объяснить в общих чертах.
Знаком с html и div и в чем ещё необходимо разбираться.
Заранее благодарен за выделенное время.

Timur
Большое спасибо за данный видеокурс. наконец то открыл для себя занавесу под названием CSS.
Но у меня возник один вопрос, возможно он элементарный, но в данном видеокурсе я так и не нашел на него ответ.
Вопрос следующий:
Как мне прописать стили для текста ВНЕ тега . То есть если администратор добавляет новости через FCKEditor, то теги p не добавляются. И текст получается неформатированный. Подскажите как отформатировать, который добавляется через FCKeditor без использования тега ? Или как то можно настроить сам FCKeditor, чтобы он добавлял тег p для которого у меня прописаны стили #content p {?

Артём
Андрей, спасибо Вам большое за эти замечательные уроки. Я раньше ни как не мог найти нормальный мануал по верстке сайтов, а теперь я не только почти профессионально этим занимаюсь лично для себя, но и зарабатываю в месяц около 13000 рублей.
И ещё раз — огромное Вам спасибо!

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

Veronika
Андрей! Мне оченЬ понравились Ваши курсы, особенно по верстке сайта — Оранжевого! Первый раз я сверстала по шагам за Вами, еще учась верстке. Второй раз — самостоятельно, решив все задачи — с точкой, и с бордером и пр. Кроме того, украсила тенями, сделала симпатичное меню и футер. С удовольствием бы показала, но не знаю как.
Ваш юмор помог мне преодолеть психологический барьер перед казавшейся мне тогда сложнейшей темой CSS-верстки.
Успехов вам — Вы хороший учитель!

Shanntal
Андрей, спасибо вам огромное, просто нет слов насколько вы мне помогли!
Я страшно запуталась во всём, не знала куда бросаться в первую очередь, и благодаря вашим видео-урокам, а теперь и сайту с уймой ссылок — всё стало на свои места!
Буду с удовольствием продолжать смотреть ваши уроки и читать ваш блог!

Дима
Действительно отличный курс ,респект автору.Единственное : коверкание английских слов режет слух, пользуюсь английским по работе и после прослушивания курса автоматом начал говорить некоторые слова по способу Андрея (width, measure).Теперь нужно отучиватся.

 

⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

 

Полезные ссылки:

Как создать свою страницу в Интернете? Как собрать кубик Рубика 3х3, схема

 


основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!