Блочная верстка (div-верстка) видеоурок #14
Предлагаю вашему вниманию, уважаемый читатель, последний урок из видеокурса по блочной div-верстке для начинающих. Но вы не переживайте, будут еще и дополнительные уроки, а так же новые видеокурсы. Пока основной костяк завершен и в следующем посту я подытожу наш сериал из 14-ти частей.
Теперь переходите к просмотру видео. Я расскажу вам, как сверстать футер, дам несколько наглядных советов по работе с Photoshop. Давайте добьем эту верстку!
Видео на сервисе RuTube
Видео на сервисе YouTube (часть 1)
Видео на сервисе YouTube (часть 2)
Видео на сервисе YouTube (часть 3)
Из-за сжатия видео сервисами RuTube и YouTube мелкие детали становятся плохо различимы. Чтобы увидеть все до мелочей — скачайте видео в лучшем качестве с DepositFiles (*wmv 43.9 МБайт).
Чтобы не пропустить завершающей части видеокурса по блочной верстке сайта, а так же выхода новых видеокурсов для веб-мастера подписывайтесь на RSS или получайте обновления блога на эл. почту.
С уважением, Андрей Морковин.
Похожие материалы:
Отзывов: 47 на «Блочная верстка (div-верстка) видеоурок #14»
, 27.09.2009 в 19:03
Так будет урок как сделать эти полосы или нет???
, 27.09.2009 в 19:18
Урока по поводу бордеров не будет. Предлагаю размять наш коллективный разум.
, 27.09.2009 в 19:05
Идейка пришла, а что если 1px бакграунд для внутренней части сайта и использовать как фон??
, 27.09.2009 в 19:20
Попробуйте. Но для какого блока Вы собираетесь использовать этот фон?
, 27.09.2009 в 19:30
Попробовать создать div в который нужно будет поместить всё содержимое сайта (шапка, менюха, футер и т.д.) и у него задать заливку в виде 1px картинки с этим бордером. Только я думаю нужно будет зет индекс прописывать и других див блоков, что бы они были поверх него.
, 28.09.2009 в 07:55
Первая часть размышления очень даже правильная. Только зачем шапку засовывать в этот div?
Не нужно создавать картинку, есть такое свойство CSS — border: 2px solid #…
, 27.09.2009 в 19:33
Ну или подрисовать у картинок этот брдер
, 27.09.2009 в 20:02
На самом деле есть довольно простое решение. Нужно совсем чуть-чуть подумать.
, 27.09.2009 в 20:04
Ну и какое же оно?
, 27.09.2009 в 21:09
Давайте развивать коллективный разум, все таки. Тот кто будет первый — победит. Я не в счет (т.к. уже решил эту загадку).
, 27.09.2009 в 20:54
А если прописать wrapper тока правый бордер а левый зделать footeru и containeru
, 27.09.2009 в 21:04
А вы пробуйте. Думаю, что у Вас будет дыра между контейнером и футером. Контейнер разве тянется до футера? По моему он обрывается там, где заканчивается контент.
, 27.09.2009 в 21:15
Точна
а вы сделали их? если да напишите как буду очень признателен 
, 27.09.2009 в 21:17
А я сделал. Хочу, чтобы вы подумали иначе все это обучение бесполезно. Давайте-давайте. Кто будет первый, тому респект.
, 27.09.2009 в 21:22
Дайте подсказку она идёт Backgroundom или Borderam?:)
, 27.09.2009 в 21:41
Можно создать новый див и поместить его под header и закрыть под footerom и задать левую рамку а правую задать wrapperu я угадал ? хе хе
, 28.09.2009 в 08:07
Да, так и нужно делать. Респект и уважуха!
, 05.04.2010 в 21:51
Ничего не понял. Как можно открыть див внутри одного дива, а закрыть за его пределами. И второе если правый бордер поставить только врапперу, то футер без правого остаётся.
, 11.01.2011 в 02:04
а я работал с тенью:
дорисовал на 1пкс тенюхе с каждой стороны по бордеру, а потом подвинул лого влево и перекрыл бордер.
Визуально вышло красиво, но вариант выше однозначно лучше)
спасибо большое за уроки!
, 27.09.2009 в 23:05
…а где же обещанная ссылка на весь архив?
, 28.09.2009 в 07:51
Все будет, не переживайте.
, 28.09.2009 в 09:14
Уважаемый Андрей!
Спасибо вам за курс, действительно у вас отлично получилось, а главное курс помогает разобраться и вникнуть в саму суть блочной верстки! У меня к вам вопрос: Вы не будете против, если я ваш курс выложу на других ресурсах? Разумеется с сылками на ваш!
, 28.09.2009 в 12:44
Спасибо Вам за спасибо. Я рад, что сделал полезный курс.
Разумеется, я не против распространения моего курса если вы ссылаетесь на данный сайт, я только ЗА!
, 28.09.2009 в 12:22
До меня допёрло!
Создаём div в него закидываем всё кроме шапки и так делает бордер ораджевого цвета!
, 28.09.2009 в 12:42
Только у меня почему-то не прорисовались бордеры на футере. Но это можно поправить задав принудительно бордеры и для футера.
, 28.09.2009 в 13:59
А будут ли новые уроки???
, 28.09.2009 в 15:24
Обязательно будут!
, 29.09.2009 в 03:27
Спасибо за уроки по блочной верстке и было б не плохо если б сделали еще уроки по javascrip
, 14.12.2009 в 20:13
Можно хэдер абсолютно запозиционировать относительно враппера и все проблемы решатся.
, 26.02.2010 в 23:35
Спасибо, Андрей, за Ваш полезный сайт. Очень порадовал курс по дивной вёрстке, понятных уроков по этой теме в Интернете очень мало. С удовольствием буду изучать Ваши новые уроки:)
, 06.03.2010 в 16:38
Андрей, ОГРОМНЕЙШЕЕ ПРИ ОГРОМНЕЙШЕЕ Вам спасибо!!! Я у удовольствием пересмотрел все 14 уроков и в течении 2-3 практически закончил верстать свой сайт.
так и происходит!
Было смешно, когда про ошибку в старом уроке вы говорили только в следующем, а я его из принципа не смотрел и мучался с позиционирование несколько часов, пока не запустил следующее видео))) Я в этих видео уже здороваться начал с Вами)))))
Я несколько недель уже по статьям пытался что-то сделать, но ничего не получалось, пока не нашёл ваш блог — информации океан, как уже говорилось и я её с огромным удовольствием впитываю))) всё это должно быть в радость
можете взглянуть на работу вашего ученика))) мне уже мало осталось исправить) (картинок у меня МНОГО)
http://hallmark2010.narod.ru
ещё раз ОГРОМНОЕ спасибо!!!
, 16.03.2010 в 04:47
Есть куда рости Олег, советую прежде всего задуматься не над красочностью а над весом сайта; ну и в идеале вес и внешний вид должны быть в гармонии.
Вообщем пробуйте тестите на разных скоростях браузерах, но сильно стараться смысла нет так как «народ» это не место для внушительных сайтов а скорее просто для частных страничек…….. Так что если есть серьезная задумка, советую платный хостинг — он и выглядит солидней и страницу обязательной рекламой не портит, да и качество сайта будет лучше и функциональность….
Андрей, спасибо за урок и отдельное спасибо за то что предлагаете думать своей головой и искать решения, это правильно в обучении.
, 05.04.2010 в 20:23
Андрей, спасибо огромное за видеоматериалы. Есть идея. А что если не просто делать уроки. А, как в случае с этими бордерами, давать какое-нибудь задание для начинающих. Очень развивает. И вам обратная связь. И новичкам каждая решённая задача опыт.
, 06.09.2010 в 13:54
Это лучшие видео уроки из всех что мне попадались. Я взял на себя смелость разместить Ваши уроки на своём блоге, всё со всеми Вашими ссылками, прошу заценить и дать добро — можно так или нет.
http://webostrovok.ru/29-blochnaya-vyorstka-psd-shablona-ot-i-do-video-kurs.html
, 12.09.2010 в 14:11
Всем привет!
В первую очередь хочу сказать огромное спасибо автору за курс я в блочной верстке был полный 0 ну теперь чет начал понимать.
Есть маленькая проблема с рамками мучался 2 часа нече не получаеться. я во врапере задаю правую рамку все номр а потмо задаю левую в div который я открыл после хэдера и закрыл после футера. Я задал рамку и она нарисовалась не до конца. Тоесть на футере ее нету а когда я принудительно ставлю рамку на футере рамка правая футера убегает и сам футер вылазяет за рамки страницы.
Надеюсь понятно обьяснил.
Заранее спасибо за помощь.
, 03.03.2011 в 20:57
… и так далее !!!
, 17.03.2011 в 12:43
Анатолий. Я тоже для врапера и футера задала, так же футер вылез за пределы основного. Изменила размер футера (поменьше на 3 пикс.) и он встал на место. Вот.
, 17.03.2011 в 12:45
ой! Извините, Саша, это был ответ на комментарий выше
, 18.06.2011 в 11:56
Было бы интересно получить продолжение урока. Предположим мы сделали сайт и отдали его заказчику, а он в свою очередь говорит: А как я могу менять информацию на моем сайте?
Вот было бы интересно узнать об инструментах администрирования сайта Kas-Ved и способах внедрения админки в данный сайт.
, 01.08.2011 в 11:52
Андрей, спасибо за видео уроки. Доступно, понятно, ничего лишнего. Получаю огромное удовольствие от обучения.
Такой вопрос: какой генератор html+css шаблонов Вы используете?
Т.к. сайт csstool.ru на данный момент о строительстве.
, 01.08.2011 в 12:10
Генератор шаблонов переехал на http://csstemplater.com/
, 23.08.2011 в 12:11
А я боковые полоски сделал проще: враперу и футеру задал левый и правый бордеры — получились ровные полоски по бокам, а затем блоку div id=logo задал margin-left: -2px;, таким образом наш логотип просто немного наехал на левый бордер врапера, что и требовалось реализовать.=)
Андрей, огромное спасибо за ваши уроки, все грамотно, просто и доходчиво.
, 10.09.2011 в 10:13
Спасибо за уроки! Правда разрешение видео побольше бы сделать — думаю размер файла в наше время не такая уж проблема. И еще чуток критики — по-моему в уроках надо бы поменьше фраз типа «а вот про эту фигню я вообще ниче не знаю — удалим [улыбнуло, конечно
]… тээкс.. тут какие-то магические штуки,которые что-то как-то зачем-то делают, ну и ладно, оставим их в покое» — сразу вопрос возникает «а чувак вообще знает, о чем говорит, если у него сплошная магия вокруг и незнакомые буквы он просто удаляет не разбираясь?» 
По-моему лучше просто сказать, что это к делу не относится и желающие могут сами почитать что это и зачем, чем говорить «я про это ваще ниче не знаю», тем более, что вы наверняка про это отлично все знаете 
)
, 10.09.2011 в 11:34
Разрешение маленькое, потому что такие раньше у YouTube были требования. Теперь делаю записываю в HD-качестве.
По поводу фраз «не знаю что это за фигня такая» — спасибо за конструктивную критику. Но Вы не переживайте, не смотря на мои «оставление в покое сложных вещей» шаблон сверстался, все будет хорошо, смотрите курс смело
, 10.09.2011 в 14:14
Да я не переживаю, опыта у вас точно побольше моего, так что поучиться есть чему
К тому же, если в уроках разжевывать каждую строчку кода — терпения не хватит ни записать эти уроки, ни просмотреть их потом, так что нормально все 
, 10.09.2011 в 20:20
Кстати, с ошибками прям на удивление хорошо получилось — всякие дивы с position: absolute, сползающие куда не надо и прочие неправильности. По ходу исправления этих ошибок еще лучше понимаешь, почему так делать не надо было, хотя на первый взгляд вроде и можно… Если сразу все гладко и чисто рассказывать, то не всегда ясно, почему надо делать именно так, а не иначе. Еще интереснее в случае ошибки поставить на паузу и попробовать самому дойти, где и что не так — тогда совсем гуд будет.
, 10.09.2011 в 21:17
Это точно. Именно по этому я писал видеоурок on-line без подготовки, исправляя возникающие проблемы по ходу объяснения.