Верстальщик + JavaScript = вместе веселее

Сегодня, уважаемый читатель, я расскажу о неоценимой помощи, которую готов оказать JavaScript верстальщику сайта.

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

Читать полностью »

Резиновый блок с закругленными углами на div

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

На настоящий момент существует множество способов верстки блоков с закругленными углами (статья на HabraHabr с 38-ю способами). Многие из них даже очень оригинальны и изящны.

Только ко всему этому изящному многообразию у меня есть ряд претензий:

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

Мы решим поставленную задачу дубовым методом, но не лишенным некоего изящества.

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

За одно с версткой вы, как и всегда, получите порцию знаний по работе с программой Photoshop.

Переходите к просмотру видеоурока.

Читать полностью »

<div> – основной инструмент блочной верстки. Работа с тегом.

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

Ведь тег <div> – это основной инструмент для позиционирования элементов сайта на странице и все его свойства и особенности нужно знать максимально подробно.

Информацию о теге я записал в формате видеоурока.

Тематика видеоурока:

• Размеры блока div и контента, их соотношение.
• Рассматриваю особенности позиционирования (position:absolute, position:fixed, position:relative).
• Объясняю принципы построения плавающей модели.
• Иллюстрирую необходимость использования свойства CSS clear:both.

Переходите к просмотру видео.

Читать полностью »