Приветствую вас, уважаемый читатель. Сегодня я познакомлю вас с очень интересной и удобной штуковиной под названием CSS-framework.
В своей работе по созданию сайтов я использую ее в качестве отличного помощника и упростителя рутинной верстки админки.
Админка – это внутренняя часть сайта, предназначенная для служебных целей. Видит и пользуется ей только администратор сайта.
Давайте рассмотрим, какой функционал зачастую применяется в админке:
- Меню переключения разделов админки. Обычно, я формирую переключение разделов при помощи ссылок в горизонтальном меню сайта с используем выпадающих пунктов. В мощных сайтах может пригодится вертикальное меню, как дополнительный способ навигации в разделе.
- Вывод данных. Для формирования выводимых данных могут применяться таблицы, расположение в блоках абзаца, разделение блоков логическими заголовками.
- Редактирование данных. Для редактирования данных применяются различные поля ввода, селекторы, выпадающие списки.
Весь этот функционал должен быть хорошо структурирован (т.е. должна быть выдержана иерархия размеров шрифта, отступов, чтобы было понятно, какой элемент к чему имеет отношение), а интерфейс – приятен глазу. Также функционал должен одинаково хорошо выполнять все свои функции в любом популярном браузере.
При этом, как вы понимаете, для админки не требуется разработка индивидуального дизайна, каких-то особых ухищрений юзабилити-структурирования (по крайней мере в подавляющем большинстве случае).
Сократить усилия по верстке админ-части сайта и сэкономить драгоценное время вам поможет тот самый CSS-framework, о котором и пойдет речь в данной статье.
Читать полностью »
Сегодня, уважаемый читатель, мы с вами разберемся с проблемой вертикального выравнивания в блоке div.
Скорее всего вы уже знаете о существовании замечательного свойства CSS vertical-align. И сам Бог велел нам пользоваться для вертикального выравнивания именно этим свойством (не зря же оно носит такое, говорящее само за себя, название).
Постановка задачи: Необходимо выровнять содержимое блока переменной высоты по центру относительно вертикали.
Теперь приступим к решению поставленной задачи.
Читать полностью »
В сегодняшнем видеоуроке по div верстке сайта я познакомлю вас, уважаемый читатель, с принципами верстки блока с закругленными углами. Причем не просто блока, а резинового блока, который может тянуться в ширину и высоту без ограничений.
На настоящий момент существует множество способов верстки блоков с закругленными углами (статья на HabraHabr с 38-ю способами). Многие из них даже очень оригинальны и изящны.
Только ко всему этому изящному многообразию у меня есть ряд претензий:
- Во-первых, сложность CSS-конструкций, в которой разобраться новичку будет очень сложно.
- Во-вторых, зачем городить огород и искать себе проблемы, когда поставленную задачу можно решить, быть может, не так изящно, но все же, решить достойно и в соответствии со стандартами.
- В-третьих, большое количество способов базируются на методе раздвижных дверей, а для этого метода необходимо загружать большое изображение. Размеры этого изображения бывает сложно предугадать. Кстати, если вы не знакомы с методом раздвижных дверей, то я рассказываю про него в статье Верстка динамической кнопки на CSS.
Мы решим поставленную задачу дубовым методом, но не лишенным некоего изящества.
И, конечно же, верстать мы будем при помощи тегов div, без применения таблиц. В процессе просмотра видеоурока вы оцените простату данного метода, по сравнению даже с табличной реализацией.
За одно с версткой вы, как и всегда, получите порцию знаний по работе с программой Photoshop.
Переходите к просмотру видеоурока.
Читать полностью »
Верстка | Андрей Морковин 10.11.2009 | 
Отзывов (22) 
