CSS-framework или как упростить процесс верстки
Приветствую вас, уважаемый читатель. Сегодня я познакомлю вас с очень интересной и удобной штуковиной под названием CSS-framework.
В своей работе по созданию сайтов я использую ее в качестве отличного помощника и упростителя рутинной верстки админки.
Админка – это внутренняя часть сайта, предназначенная для служебных целей. Видит и пользуется ей только администратор сайта.
Давайте рассмотрим, какой функционал зачастую применяется в админке:
- Меню переключения разделов админки. Обычно, я формирую переключение разделов при помощи ссылок в горизонтальном меню сайта с используем выпадающих пунктов. В мощных сайтах может пригодится вертикальное меню, как дополнительный способ навигации в разделе.
- Вывод данных. Для формирования выводимых данных могут применяться таблицы, расположение в блоках абзаца, разделение блоков логическими заголовками.
- Редактирование данных. Для редактирования данных применяются различные поля ввода, селекторы, выпадающие списки.
Весь этот функционал должен быть хорошо структурирован (т.е. должна быть выдержана иерархия размеров шрифта, отступов, чтобы было понятно, какой элемент к чему имеет отношение), а интерфейс – приятен глазу. Также функционал должен одинаково хорошо выполнять все свои функции в любом популярном браузере.
При этом, как вы понимаете, для админки не требуется разработка индивидуального дизайна, каких-то особых ухищрений юзабилити-структурирования (по крайней мере в подавляющем большинстве случае).
Сократить усилия по верстке админ-части сайта и сэкономить драгоценное время вам поможет тот самый CSS-framework, о котором и пойдет речь в данной статье.
Итак, что же такое CSS-framework?
Это уже готовый, сверстанный и одинаково хорошо отображающийся во всех браузерах, HTML и CSS-каркас с набором всех необходимых функций, для реализации админки довольно сложно сайта.
Вы можете с легкостью скопировать и отредактировать только те элементы, которые необходимо задействовать, не тратя время на верстку. Админка легко собирается из готовых кубиков.
Еще одним жирным плюсом в использовании CSS-framework является его бесплатность. Достаточно просто зайти на сайт официальный сайт, скачать свежую версию и…
А вот что с ней делать дальше, я наглядно расскажу в видеоуроке.
Видео на сервисе RuTube:
Видео на сервисе YouTube (Часть 1):
Видео на сервисе YouTube (Часть 2):
Из-за алгоритмов сжатия видео сервисами YouTube и RuTube, мелкие детали становятся плохо различимы. Вы можете скачать видео в лучшем качестве с Deposit Files (19.52 Мбайт *.mp4).
С уважением, Андрей Морковин.
Похожие материалы:
Отзывов: 20 на «CSS-framework или как упростить процесс верстки»
-
Firebug - инструмент для верстки сайта — 12.11.2009 в 17:00
Автор: Never Lex, 10.11.2009 в 15:23
Прикольно. Для админки достаточно Фрейворка, но верстать сам сайт на данном фрейворке будет не просто.
Автор: Андрей Морковин, 10.11.2009 в 15:27
Да, эта штука идеально подходит для админки, для сайта – лишние проблемы.
Автор: Never Lex, 10.11.2009 в 15:29
В принципе для админки можно использовать специальные темы оформления. Не раз встречал в буржуйнете шаблоны админок.
Автор: Андрей Морковин, 10.11.2009 в 15:38
Мое мнение, красота админки заключается в понятной структуре элементов управления, а никак не в красивых ярких шкурках.
Красивая админка – это понятная и аккуратная админка
Автор: Never Lex, 10.11.2009 в 15:59
Согласен. Шаблоны админок вроде не особо красивы. Упор идёт на выделение определённых объектов. Но сам не пользовался. Рекламировать не буду
Автор: gashek, 10.11.2009 в 15:57
Вещь полезная, только он уже почти год не обновлялся.
Я думаю лучше использовать зарубежные аналоги.
Автор: Андрей Морковин, 10.11.2009 в 16:07
А чего там обновлять? Я использую, все работает нормально, никакие навороты пока не требовались.
Автор: Ян, 10.11.2009 в 19:27
А зачем вообще админку то делать? Есть же joomla например. И сайт сделать можно любой сложности и админка уже есть, да и о безопасности профессионалы позаботились.
Автор: Андрей Морковин, 10.11.2009 в 19:46
Ну по поводу “Сделать сайт любой сложности на Joomla” – это Вы уж хватили лишнего. С чего Вы только такое взяли?
А в принципе, для создания админки, эту штуковину применяю я, Вам же она может пригодится для каких-то еще случаев (будите страничку дополнительную делать, а joomla не даст вам возможности нормально с HTML работать, вот и придется ручками что-то новое ваять; при этом, чтобы руки зря об клавиатуру не тереть, вспомните про CSS-framework).
Автор: Never Lex, 14.12.2009 в 11:19
Полностью согласен. Джумла для извращенцев или новичков, ещё не осознавших всю её косячность
Автор: Ольга, 10.11.2009 в 21:47
Это первый урок который я к сожалению не поняла, наверное сначала (для ноничков) надо было объяснить, что такое админка и с чем её едят.
А то получается, что уроки по вёрстке отличные, а дальше галопом по Европам.
Автор: Андрей Морковин, 11.11.2009 в 11:34
Я в тексте данной статьи рассказываю, что такое админка.
Автор: Ольга, 11.11.2009 в 12:07
Конечно статью читала, но там вобщем то понятно для тех кто уже с этим сталкивался, а кто совсем с нуля не понятно. Как например её пользоваться? Мы же не сталкивались с этим ни разу.
Автор: Андрей Морковин, 11.11.2009 в 15:45
Значит оно вам, на данном этапе, и не нужно
Админка, в принципе, это такой интерфейс управления сайтом, который скрыт от обычных посетителей. С его помощью администратор может, без знания HTML, наполнять сайт контентом.
Т.е. в админке есть поля ввода, переключатели, кнопки и, благодаря всему этому функционалу, появляется возможность работать с контентом сайта, и при этом не лезть в HTML.
Вход в админку осуществляется по определенному адресу, по которому находится страница запроса логина и пароля и, если авторизация прошла успешно, вы попадаете в интерфейс админки. Вот и вся хитрость.
Автор: Артур, 26.11.2009 в 14:52
а в чем удобство, что-то не пойму?
проше самому написать шаблоны и вставлять в нужных местах
Автор: Андрей Морковин, 26.11.2009 в 15:01
Удобство как раз в том, чтобы самому не писать шаблоны.
Автор: Lardok, 30.11.2009 в 01:48
Вот так! Век живи, век учись, а я как-то о CSS-Framework и не слышал никогда! Спасибо, Андрей, есть чем ночь занять
Автор: Dмитрий, 30.11.2009 в 23:50
Если на сайте 15-20 страниц, то достаточно просто сделать страничку и самому. А вот если их более сотни, да они еще и обнавляются периодически, то ручками тяжеловато будет
Автор: Андрей Морковин, 01.12.2009 в 13:03
Дмитрий, фишка не совсем в этом, точнее даже, совсем не в этом
Сейчас поясню.
На сайте есть 100 страниц и все они регулярно обновляются. Регулярно может обновляться только контент. Контент лежит себе в SQL-базе данных и, по запросу посетителя вставляется в один HTML + CSS шаблон. При помощи вставки в этот шаблон различного контента, получается множество страниц.
Мне сложно представить сайт из 100 страниц, где каждая новая страница имела бы свой HTML и CSS. Так никто не делает.
В результате, на любом сайте есть 15-20 индивидуально сверстанных страниц (и это в лучшем случае, обычно страниц бывает 3-4).
Теперь давайте разберемся с плюсами данного framework-а.
HTML + CSS – код нужно писать самому (как это делать, можно посмотреть в видеоуроках по div-верстке), если вы хотите получить хоть сколько-нибудь сложный или индивидуальный шаблон.
Когда вы верстаете админку, то только извращенный заказчик может потребовать индивидуальности ее дизайна. Из своей практики знаю, что для админки наиболее важен функционал, но, при этом, не должно быть косяков в отображении интерфейса. Все должно выглядеть аккуратно.
В этом случае серьезно сэкономить время и нервы помогает использование framework-а, т.к. все необходимые функциональные элементы интерфейса админки уже сверстаны, на них наложены симпотные стили, все выглядит красиво и стильно. А, главное, создатель framework-а почистил, в силу своих возможностей, баги и глюки и верстка кроссбраузерна.
Вот в чем приемущество framework.