10.09.2009
Блочная верстка (div-верстка) видеоурок #9
Готов новый видеоурок по блочной div-верстке сайта. Сегодня мы правильным образом разместим блок с горизонтальным меню и наполним его ссылками. Интересным способом, при помощи CSS, поставим треугольные метки рядом с каждым и пунктов меню.
И тем самым, наконец-то, завершим верстать хедер (ну практически завершим).
Видео на RuTube
Первая часть видео на YouTube
Вторая часть видео на YouTube
Третья часть видео на YouTube
Как и раньше видео в более хорошем качестве вы можете скачать с DepositFiles (*.wmv 46.8 МБайт).
Новые видеоуроки курса появляются на блоге регулярно. Чтобы не пропустить остальные части видеокурса — подписывайтесь на RSS или получайте обновления блога на эл. почту.
С уважением, Андрей Морковин.
Если статья вам понравилась и вы не хотите пропустить свежие публикации,
то подписывайтесь на RSS-ленту или получайте обновления сайта на эл. почту.
Похожие материалы:
Отзывов: 26 на «Блочная верстка (div-верстка) видеоурок #9»
, 10.09.2009 в 17:38
а для простого серфинга ты используешь оперу или ФФ?
, 10.09.2009 в 21:58
ФФ, люблю его за Яндекс.Бар, за Яндекс.Закладке (все в том же Яндекс.Баре), за он-лайн проверку орфографии Яндекс.Словорями и за кучу отличных дополнений (один ФайерБаг чего стоит).
Кстати, в одном из предыдущих постов я писал о тех плагинах к ФФ, которые я использую.
У Оперы нет ничего подобного.
, 17.03.2011 в 09:11
Тоже использую FF из-за яндекс.бара того же, файер-бага и сеобара. В основном именно эти плагины всегда активны.
, 10.09.2009 в 20:26
Делаю сейчас сайт попробуем этим заниматься скачал меню на цсс вроде прекрутил даже его но оно работает некоректно.
Можно узнать почему так может быть а главное как поправить сайт pvsart.uz.
Там всплывающее 4 меню когда наводишь 1 раз оно некоректно отображает границы навоишь 2й всё нормальон отображает границы.
Былбы очень признателен нашемму гуру еслиб нашли минутку посматреть.
, 15.09.2009 в 16:02
Сайт ваш у меня не грузится.
, 11.09.2009 в 09:10
Ну вич и хайт — это просто не допустимо!
А ещё каэс и т.п.
Не поленитесь, посмотрите транскрипции аглицких слов. Ладно уж без подготовки уроки делаете и запинаетесь, но так издеваться над «слушателем» — это полнейшее неуважение.
По понятности излагаемого материала не смогу объективно оценить, т.к. таблицами уже много верстал, а блоками пробовал.
, 11.09.2009 в 10:56
Да, вот так уж я издеваюсь над слушателями. Говорю недопустимые слова, запинаюсь и буду продолжать в том же духе.
>>По понятности излагаемого материала не смогу объективно оценить, т.к. таблицами уже много верстал, а блоками пробовал.
По стилю изложения мысли не понял, что вы хотели этим сказать.
Кстати, уроки делаю с подготовкой, но неправильный подход оставляю намерено, т.к. ошибаясь и исправляя ошибки даю возможность более углублено овладеть материалом.
, 16.08.2010 в 21:34
Великий педагог Амонашвили нарочно делал ошибки а объяснении материала, чтобы ученики учились находить и исправлять ошибки. Спасибо за уроки.
, 22.11.2011 в 13:09
Действительно, ошибки — это самое ценное при таком методе повествования, ну во первых: начинающий сразу понимает — «ни боги горшки лепят»; во вторых учится надо не «стандартному решению», а принципу понимания.
Так что ошибки и их исправление это очень полезно!
, 12.09.2009 в 16:02
Жду с нетерпением 10 урок! Не могу понять как сделать резиновый блок меню, чтоб от количества контента оно становилось больше.
И вообще не могу понять как делать резиновый шаблон, хотя если увижу в ваших уроках как вы делаете растяжку меню тогда и шаблон смогу резиновый сделать.
БОЛЬШОЕ вам спасибо что решили сделать виде уроки по этой теме!
, 12.09.2009 в 18:12
Скоро все станет ясно.
, 26.09.2009 в 08:56
Спасибо за уроки, хорошо помогают разобраться в блочной верстке. Еще и бесплатно. На просторах интернета именно по этой тематике видеоуроков не густо, к сожалению.
Насчет менюшки и треугольничка для списка есть вопрос. А почему Вы не использовали такие свойста списка CSS как list-style-type и list-style-image ?
, 26.09.2009 в 17:28
Спасибо Вам за спасибо.
По поводу list-style-type и list-style-image, да, им тут самое место. Но я хотел показать принципы работы с элементом li, как с неким блоком, ширину которого можно изменять не хуже, чем у div-а.
, 22.11.2011 в 13:13
Кстати для отладки удобно применять свойство «border:1px dotted black».
, 20.11.2009 в 15:05
Спасибо большое за видео-уроки, для человека, который только начинает этим заниматься невероятно полезно. Один вопрос: почему когда пишешь в dreamweaver на русском Например название title или контент, потом в браузерах (во всех) отображается непонятный код (учебный центр). Где можно поправить, чтобы кирилица нормально отображалась?
С английским все ОК!
, 20.11.2009 в 17:39
Рад, что видеоуроки Вам понравились.
Скорее всего кракозябры появились из-за глюков с кодировками. Прочитайте статью о кодировках HTML-файлов: http://www.sdelaysite.com/kniga/verstka-kniga/html-kodirovka
, 20.11.2009 в 19:47
К сожалению кодировки тут по всей видимости не причем везде стоит utf-8. Пробовал менять и возвращаться ничего не помогает.
, 20.11.2009 в 23:23
Тогда остается только одно — глючит Dreamweaver. Попробуйте другую версию.
, 21.11.2009 в 11:52
Спасибо за помощь, оказывается надо было везде прописать windows-1251 (кирилица windows) и переписать весь контент. А с utf-8 так и не захотел общаться.
, 14.12.2009 в 13:54
Имхо проще прописать просто свойством background, вместо двух свойств.
Согласен, часто лучше маркер списка (в данном случае треугольник) бэкграундом делать (причём для ссылки, а не для элемента списка), а ссылку блочным элементом. Тогда и кликать можно будет не только по ссылке.
Так и не понял почему вам позишн абсолют вам не понравился. Макет то жёсткий. Ничего никуда тянуться не должно. Но флоатами развести как вариант. Если же элементов шапки будет много, то без абсолютных позиций не обойтись.
, 05.01.2011 в 16:09
а с позишн абсолют у меня вопрос возник. если при абсолюте отсчет идет от угла браузера, то вот мы для меню к примеру пропишем отступ 300 пикселей и при разрешении 1024 попадем куда надо. а если у кого-то разрешение будет больше, то для него эти 300 пикселей же не будут там где у нас нет? и для него менюшка будет болтаться где-то слева, а не там где мы хотим.
, 08.01.2010 в 23:59
Здравствуйте, спасибо огромное за видео уроки. С PHP+MySQL и немного JS программирование знаком, решил верстать научится. Кстати «поковырялся» со свойством position — если указать position:relative и эдиницы указать в процентах — то блок фона для меню станет норм. и не будет ездить при маштабировании. Но с float тоже варинт. А пока жду новых уроков по JS
Удачи!
, 22.02.2010 в 18:51
Спасибо за уроки, они очень грамотно сделаны!
По поводу gor-menu и position:absolute — лучше прописывать не left и top, а margin-left и margin-top, тогда блок не будет перемещаться))
, 15.03.2010 в 23:59
О! в коментарии к прошлому уроку заметил про позицию, оказалось зря т.к. здесь как раз по этому поводу))) но комент уже не поправить никак….
, 16.08.2010 в 21:47
я поняла так, что файл index.psd это для верстальщика исходный файл, который дается дизайнером. Верстальщик разделяет его на слои и вставляет их в хедер и в футер. подтвердите пожалуйста если это так или скажите а чем я ошибаюсь. а откуда берется fixpng
из папки include (rezultat-psd)
, 02.12.2010 в 11:44
Спасибо Андрей, я хоть и мастер да
чувствую что вылажу из депресняка
есть у Вас нужный огонёк,
искорка так сказать.
И ещё благодарен многим господам
за комментарии, меня до сих пор
мучит невежество по поводу точности
произношения английских слов.
Например:» пи эйч пи» или » пе ха пе»
«эйч ти ем ель» или «ха те эм эл»,
а особенно достало «Джава скрипт»
где-то слышал «Джайва скрипт» а
вспомнил в институте на лекциях.
«Ява» вроде по русски и есть «Ява»
остров такой есть если слышали.
А вот «Пхп» и «Хтмл» енто в Европе
звучит созвучно у народов так уж
принято:)
«Си ем эс» или «Ц м с» или
«Ка м с», судите сами если речь идёт
о «Контент менеджере».
Я на пример спецом говорю неправильно,
нравится когда специалистов это
раздражает:)