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

Блочная верстка (div-верстка) видеоурок #14

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

Теперь переходите к просмотру видео. Я расскажу вам, как сверстать футер, дам несколько наглядных советов по работе с Photoshop. Давайте добьем эту верстку!

Видео на сервисе RuTube

Видео на сервисе YouTube (часть 1)

Видео на сервисе YouTube (часть 2)

Видео на сервисе YouTube (часть 3)

Из-за сжатия видео сервисами RuTube и YouTube мелкие детали становятся плохо различимы. Чтобы увидеть все до мелочей – скачайте видео в лучшем качестве с DepositFiles (*wmv 43.9 МБайт).

Чтобы не пропустить завершающей части видеокурса по блочной верстке сайта, а так же выхода новых видеокурсов для веб-мастера подписывайтесь на RSS или получайте обновления блога на эл. почту.

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

Post to Twitter



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


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


Отзывов: 32 на «Блочная верстка (div-верстка) видеоурок #14»

  1. Автор: Владимир, 27.09.2009 в 19:03

    Так будет урок как сделать эти полосы или нет???

  2. Автор: Владимир, 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

        Ну или подрисовать у картинок этот брдер

  3. Автор: Андрей Морковин, 27.09.2009 в 20:02

    На самом деле есть довольно простое решение. Нужно совсем чуть-чуть подумать.

    • Автор: Владимир, 27.09.2009 в 20:04

      Ну и какое же оно?

      • Автор: Андрей Морковин, 27.09.2009 в 21:09

        Давайте развивать коллективный разум, все таки. Тот кто будет первый – победит. Я не в счет (т.к. уже решил эту загадку).

  4. Автор: Cympak, 27.09.2009 в 20:54

    А если прописать wrapper тока правый бордер а левый зделать footeru и containeru

    • Автор: Андрей Морковин, 27.09.2009 в 21:04

      А вы пробуйте. Думаю, что у Вас будет дыра между контейнером и футером. Контейнер разве тянется до футера? По моему он обрывается там, где заканчивается контент.

  5. Автор: Cympak, 27.09.2009 в 21:15

    Точна :) а вы сделали их? если да напишите как буду очень признателен :)

    • Автор: Андрей Морковин, 27.09.2009 в 21:17

      А я сделал. Хочу, чтобы вы подумали иначе все это обучение бесполезно. Давайте-давайте. Кто будет первый, тому респект.

      • Автор: Cympak, 27.09.2009 в 21:22

        Дайте подсказку она идёт Backgroundom или Borderam?:)

        • Автор: Cympak, 27.09.2009 в 21:41

          Можно создать новый див и поместить его под header и закрыть под footerom и задать левую рамку а правую задать wrapperu я угадал ? хе хе :)

          • Автор: Андрей Морковин, 28.09.2009 в 08:07

            Да, так и нужно делать. Респект и уважуха!

            • Автор: ZeDIV, 05.04.2010 в 21:51

              Ничего не понял. Как можно открыть див внутри одного дива, а закрыть за его пределами. И второе если правый бордер поставить только врапперу, то футер без правого остаётся.

  6. Автор: Lardok, 27.09.2009 в 23:05

    …а где же обещанная ссылка на весь архив? :(

  7. Автор: Spawn, 28.09.2009 в 09:14

    Уважаемый Андрей!
    Спасибо вам за курс, действительно у вас отлично получилось, а главное курс помогает разобраться и вникнуть в саму суть блочной верстки! У меня к вам вопрос: Вы не будете против, если я ваш курс выложу на других ресурсах? Разумеется с сылками на ваш!

    • Автор: Андрей Морковин, 28.09.2009 в 12:44

      Спасибо Вам за спасибо. Я рад, что сделал полезный курс.

      Разумеется, я не против распространения моего курса если вы ссылаетесь на данный сайт, я только ЗА!

  8. Автор: Владимир, 28.09.2009 в 12:22

    До меня допёрло!
    Создаём div в него закидываем всё кроме шапки и так делает бордер ораджевого цвета!

    • Автор: Андрей Морковин, 28.09.2009 в 12:42

      :) Молодец! Уроки не прошли даром. div нужно закинуть под хедер и закончить его под футером.

      Только у меня почему-то не прорисовались бордеры на футере. Но это можно поправить задав принудительно бордеры и для футера.

      • Автор: Владимир, 28.09.2009 в 13:59

        А будут ли новые уроки???

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

          Обязательно будут!

          • Автор: Cympak, 29.09.2009 в 03:27

            Спасибо за уроки по блочной верстке и было б не плохо если б сделали еще уроки по javascrip

  9. Автор: Never Lex, 14.12.2009 в 20:13

    Можно хэдер абсолютно запозиционировать относительно враппера и все проблемы решатся.

  10. Автор: Татьяна, 26.02.2010 в 23:35

    Спасибо, Андрей, за Ваш полезный сайт. Очень порадовал курс по дивной вёрстке, понятных уроков по этой теме в Интернете очень мало. С удовольствием буду изучать Ваши новые уроки:)

  11. Автор: Олег, 06.03.2010 в 16:38

    Андрей, ОГРОМНЕЙШЕЕ ПРИ ОГРОМНЕЙШЕЕ Вам спасибо!!! Я у удовольствием пересмотрел все 14 уроков и в течении 2-3 практически закончил верстать свой сайт.
    Было смешно, когда про ошибку в старом уроке вы говорили только в следующем, а я его из принципа не смотрел и мучался с позиционирование несколько часов, пока не запустил следующее видео))) Я в этих видео уже здороваться начал с Вами)))))
    Я несколько недель уже по статьям пытался что-то сделать, но ничего не получалось, пока не нашёл ваш блог – информации океан, как уже говорилось и я её с огромным удовольствием впитываю))) всё это должно быть в радость :) так и происходит!

    можете взглянуть на работу вашего ученика))) мне уже мало осталось исправить) (картинок у меня МНОГО)

    http://hallmark2010.narod.ru

    ещё раз ОГРОМНОЕ спасибо!!!

    • Автор: Митек, 16.03.2010 в 04:47

      Есть куда рости Олег, советую прежде всего задуматься не над красочностью а над весом сайта; ну и в идеале вес и внешний вид должны быть в гармонии. ;) Вообщем пробуйте тестите на разных скоростях браузерах, но сильно стараться смысла нет так как “народ” это не место для внушительных сайтов а скорее просто для частных страничек…….. Так что если есть серьезная задумка, советую платный хостинг – он и выглядит солидней и страницу обязательной рекламой не портит, да и качество сайта будет лучше и функциональность….

      Андрей, спасибо за урок и отдельное спасибо за то что предлагаете думать своей головой и искать решения, это правильно в обучении.

  12. Автор: ZeDIV, 05.04.2010 в 20:23

    Андрей, спасибо огромное за видеоматериалы. Есть идея. А что если не просто делать уроки. А, как в случае с этими бордерами, давать какое-нибудь задание для начинающих. Очень развивает. И вам обратная связь. И новичкам каждая решённая задача опыт.

Ваш отзыв