<div> – основной инструмент блочной верстки. Работа с тегом.
Предлагаю вам, уважаемый читатель, познакомится с тегом <div>. Да так познакомится, чтобы никаких вопросов больше не возникало, о том, каким образом можно позиционировать, выравнивать, смещать, растягивать и сжимать этот блок.
Ведь тег <div> – это основной инструмент для позиционирования элементов сайта на странице и все его свойства и особенности нужно знать максимально подробно.
Информацию о теге я записал в формате видеоурока.
Тематика видеоурока:
- Размеры блока div и контента, их соотношение.
- Рассматриваю особенности позиционирования (position:absolute, position:fixed, position:relative).
- Объясняю принципы построения плавающей модели.
- Иллюстрирую необходимость использования свойства CSS clear:both.
Переходите к просмотру видео.
Первая часть видео на сервисе RuTube:
Вторая часть видео на сервисе RuTube:
Третья часть видео на сервисе RuTube:
Часть #1-1 на сервисе YouTube:
Часть #1-2 на сервисе YouTube:
Часть #2-1 на сервисе YouTube:
Часть #2-2 на сервисе YouTube:
Часть #3 на сервисе YouTube:
Из-за алгоритмов сжатия сервисов RuTube и YouTube серьезно падает качество записи. Если какие-то мелкие детали сложно рассмотреть, то, для этого случая, я залил видео в лучшем качестве на Deposit Files:
- Скачать первую часть (16.34 МБайт *.mp4)
- Скачать вторую часть (Не поверите, но опять 16.3 МБайт *.mp4)
- Скачать третью часть (7.2 МБайт *.mp4)
Как вы видите, я перешел на новый формат видеофайлов. Теперь вместо *.wmv я использую *.mp4, который весит заметно меньше.
Для воспроизведения данного формата у вас должен быть установлен соответствующий кодек. Если воспроизведения не происходит, то скачайте, например, K-Lite_Codec_Pack_520_Full. Я его уже скачал и загрузил себе на Deposit Files. Так что желающие могут дернуть его с Депозита (11.8 МБайт).
С уважением, Андрей Морковин.
Метки: Верстка видео допы
Похожие материалы:
Отзывов: 19 на «<div> – основной инструмент блочной верстки. Работа с тегом.»
-
Вертикальное выравнивание в div - Условные комментарии — 03.11.2009 в 21:22
-
мета теги - TitleTag.ru - SEO/манимейкинг — 14.11.2009 в 13:29
Автор: , 24.10.2009 в 12:53
Спасибо Андрей за видео урок. Многое прояснил для себя.
Правда просмотрел пока только 1ю часть, возник вопрос и пока его не забыл, отпишусь.
В конце урока говорится об обтекаемости блоков див.
“первый блок див при свойстве Float:left прилипает своим левым блоком к левой границе родительского элемента. В данном случае родительский элемент это тег Body”
Так вот вопрос. Если при данном свойстве каждый блок див должен прилипать к левой границе родительского элемента, почему второй блок прилип к левому блоку а не к левой границе тега Body?
Автор: , 25.10.2009 в 13:24
Очень правильный вопрос. Конечно, не к родительскому блоку, а к предыдущему блоку в нормальном потоке.
Автор: , 25.10.2009 в 14:23
И не только с блогом.
Спасибо, все детально разъяснил.
Автор: , 25.10.2009 в 16:58
Здравствуйте Андрей! Спасибо за содержательный материал. У меня такой вопрос: а надо ли париться с версткой CSS, если есть движки типа Вордпресс. Одним словом, как на Ваш взгляд, что лучше сайт сверстанный самолично, или взять скрипт движка, да и только. Каковы достоинства и недостатки обеих методов?! С уважением Виталий.
Автор: , 25.10.2009 в 17:21
Здравствуйте, Виталий!
Во-первых, чувствую у Вас некоторую запутанность в понятиях “движок” и “верстка”.
Действительно, есть множество движков, например тот же WordPress, но они не имеют отношения к верстке.
Движки эти – это PHP-скрипты, MySQL базы данных, которые позволяют реализовать те или иные функции (в Wordpress – это добавление постов, сортировка по категориям, отправка комментариев и т.д.). Вся эта штуковина называется БИЗНЕС ЛОГИКА.
Другая штуковина – это ЛОГИКА ОТОБРАЖЕНИЯ. Вот тут уже, здравствуй, верстка. На все эти разнообразные движки сверху надевается шкура внешнего вида, которая выводит в те или иные места сформированные PHP-скриптами данные.
Теперь давайте разберемся с Вашим вопросом. Он, как вы видите, распался на два:
1) Нужно ли писать бизнес логику самому или нужно использовать готовые скрипты и движки.
2) Нужно ли самому верстать логику отображения, или использовать готовые шкурки.
Ответ такой: нужно использовать готовое.
А вот на вопрос “нужно ли самому разбираться в HTML, CSS, PHP, MySQL” – ответ ДА, обязательно. Иначе вы не сможете отличить плохой код от хорошего. Среди готовых шкурок и скриптов я встречал принципиальные ошибки, которые могли бы привести к неприятным последствиям.
Раз уж мы тут про HTML – иногда, заглянув в HTML и CSS код готовых тем для WordPress, я прихожу в ужас от безалаберности и наплевательства при их верстке.
Это одна сторона. Другая сторона – предположим готовый шаблон Вас не устраивает в той или иной мере (а это обычно таки бывает). Или у Вас возникло жгучее желание добавить какой-то блок. Как Вы это сделаете без знаний HTML и CSS?
Порой задача стоит столь специфическая, что выбор среди готового продукта Вас не удовлетворяет. Оно так и бывает для сложных интернет-проектов. Вы не можете подобрать ничего из готовых наработок, чтобы это нечто, на достаточном уровне без огромного количества переделок, отвечало Вашим требованиям. И тут становится гораздо проще сделать все самому с нуля.
Так что все зависит от конкретной ситуации, но знания обязательны при любом раскладе.
Автор: , 26.10.2009 в 17:40
Спасибо Андрей за хороший ответ. В отношении запутанности Вы правы, я еще только учусь. С уважением Виталий.
Автор: , 25.10.2009 в 23:47
Лучше внедрять другие шаблоны или свои и как влияет это всё на индексацию страниц. Что лучше, а что хуже…Есть же в верстке, что-то, что помогает при индексации страниц роботами, можете рассказать о некоторых секретах… Даже о тех, которые в Вордпрессе используются, потому что сайты довольно-таки быстро индексируются, когда построены на движке Вордпресса.
Автор: , 26.10.2009 в 00:05
Друзья, мы очень далеко начинаем уходить от темы поста
Тут нельзя однозначно сказать, что лучше, а что хуже. Бывают хорошие темы, отлично влияющие на индексацию и ничего самому писать не нужно. Бывает все наоборот.
Но как по мне, копаться среди огромного количества тем, выискивать что-то готовое и подходящее – это не по мне. Я беру какую-то более-менее подходящую тему и начинаю ее допиливать, в результате практически полностью переделывая (потому что все они очень косячные, не косячная только дефаултная, но она уродливая).
О том, что помогает в индексации и занятии правильных позиций можно почитать здесь: http://www.sdelaysite.com/kniga/optimization/optimizaciya (в комментариях к посту можем более детально все обсудить) а еще вот здесь: http://www.terehoff.com/temlate-optimisation.html
Автор: , 03.11.2009 в 23:21
Здравствуйте Андрей.
Что то у меня не получилось со скачиванием урока. Вернее он скачался, но отображается листком с заглавием. А мне бы очень пригодился этот урок, может проверите, что там и как?.
Автор: , 03.11.2009 в 23:44
Простите. Всё получилось. Спасибо большое, очень нужный урок!!!!
Автор: , 04.11.2009 в 00:24
Отлично. Хорошо, что все работает нормально.
Автор: , 06.12.2009 в 09:24
Привет, Андрей. Разобрался со скачиванием с Депозита. Теперь могу качать Ваши уроки. Очень рад этому, потому что Вы очень доступно и локанично поясняете материал. Спасибо.
Автор: , 06.12.2009 в 11:48
Ну вот и отлично
Автор: , 15.12.2009 в 03:00
Хорошая идея разобраться с позиционированием одним ударом
Очень полезная информация.
Автор: , 15.12.2009 в 11:58
Дякую за відео. Література – це добре, але таке відео то взагалі бомба)))
Автор: , 02.01.2010 в 17:04
У меня возник такой вопрос: зачем создавать пустой div, почему не задать параметр clear:both прямо в нижележащем div-е?
Автор: , 28.04.2010 в 10:50
Одинарный тэг br style=”clear: both”
Лучше так:
вместо “clear: both” можно “overflow: hidden”