Верстка с помощью Grid » maxsite.org,
Верстка с помощью GRIDрубрика: - - - среда, 28 октября 2009 г. Просмотров: 2413подписаться на ]]>]]> после обсуждения я переосмыслил немного предыдущей статьи свои же идеи. Всем спасибо, участие в обсуждении кто принял и раз готов я на сей дальнейшее развитие концепции предложить и практический вариант готовый.
В предыдущий довольно остановился подробно раз я с помощью таблицы на верстке (TABLE), но восприняли многие это как холивар «TABLE VS DIV». Это ошибка, потому что шла речь вовсе не о блочной или табличной верстке, а о подходе самом. Я каркас страницы предлагаю верстать с помощью PHP-функций, сами генерировать которые будут нужный HTML-код.
Я на этот бы хотел раз с описаний небольших начать, объяснят подход которые и мотивы, побудили меня которые «изобретать велосипед» эпизод 1 итак, начнем с рабочего процесса создания сайта. Заказывает сайт клиент. В первую очередь обычно идет дизайнера работа. Думает именно он всех элементов графических об оформлении. Дизайнеры грамотные в Голове факт тот постоянно держат, что результат конечный это в фотошопе не файл, а HTML-страничка, свои ограничения которая имеет. Например неизвестный в блоках различных объем текста. Или то, что осущствляется прямоугольниками вывод информации. Те же дизайнеры, типографской верстки которые имеют опыт (назовем условно их так) могут своих программ думать возможностями. Например обтекание текстом сложное, с перетеканием колонки, «фонарики» и т. Д. Такой дизайн во многих случаях если реализуется на HTML, то с большим трудом. Откройте какой-нибудь журнал глянцевый для примера и типографской верстки увидите вы пример.
Участником процесса вторым верстальщик будет. Предстоит ему «нарезать» дизайн под HTML и нужные прописать CSS-стили. Помимо прочего всего верстальщик не соответствие просто визуальное должен обеспечить, но в разных браузерах одинаковое отображение (хотя бы до пределов разумных). И тут, помимо сложностей и хитростей верстки, подводных камней есть масса. Например настаивает на Том заказчик, чтобы корректно работал сайт в IE6. Стоит ли о Том говорить, что совсем старый этот браузер и не многим соответсвует WEB-стандартам? Образом верстальщик таким на сложности дополнительные вынужден идти. Например часто используют очень вложенные DIV-блоки, только в браузерах ради корректного отображения IE. Что касается CSS-стилей, то помимо т. Н. Появляется лес Хаков правил плохо очевидных. Конечно же код это сильно усложняет и вообще работа во многом на шаманство тянет со стилями отмечу отдельно, что если верстальщик блочную верстку выбирает, то HTMLдополнительно обрастает -разметка блоками вложенными, а CSS - стилями путанными, что опять же усложняет не только создание, но дальнейшую поддержку.
После верстальщика, готовый HTML в руки программиста попадает, которого в задачу входит «натянуть» шаблон на CMS. Главная головная боль для программиста - это разбить HTML на части, подключает система которые, а согласовать CSSверстальщика со стилями -стили и HTML-кодом, генерирует который CMS. На деле самом это задача довольно сложная и случается порой так, что возвращать шаблон верстальщику программист вынужден, чтобы его поправил тот. Раз случается иной так, что клиентом дизайн Утвержденный (и уже верстальщиком сверстанный), невозможно в рамках выполнить CMS. То есть CMS такой генерирует HTML-код, очень далек который верстальщиком от сделанного. И тут либо подстроиться уговаривать клиента под «движок», либо что-то в системе менять.
Мы таким образом видим, что на трех этапах этих идеальным было общих бы согласование правил дизайна, программирования и верстки. В оф-лайн компаниях наверное так происходит, но на практике чаще всего верстальщика и просто ставят перед фактом программиста: вот есть дизайн/шаблон - сделать сайт нужно. Случае в этом от программиста знания довольно-таки неплохие требуется прежде всего верстки. У меня, например, ситуации нередки, когда глядя шаблон на предоставленный, принимаю я его переписать решение полностью. Причин быть может масса: от заголовков H3, вместо H1 (генерирует система который), до безобразного совершенно или путанного очень HTML и CSS-кода. То есть это как раз случай, когда быстрей и проще с нуля сделать, чем переделывать и разбираться существующее эпизод 2 теперь рассмотрим в работе дизайнера общие черты, программиста и верстальщика. Ничего на первый взгляд, кроме факта, что работа идет над проектом одним и нет. Но на самом деле в своей работе единый подход все они используют, а именно - сетку модульную. Уверен я, что сложности основные заключены в Том факте именно, что из используется них у каждого сетка своя, может которая в противоречие прийти с другими.
Для ясности определим модульной сетки само понятие. Это линий набор, которых с помощью можно различные элементы позиционировать. Является важным фактом то, что сетка модульная на продукте конечном не отображается, она лишь вспомогательную роль выполняет.
Такой сетки самым простым примером, служит могут т. Н. В редакторах направляющие. Например инструмент SLICE выполняет в фотошопе такую примерно же роль. В CORELDRAW можно в виде точек сетку выставить, а направляющим самим произвольный угол наклона задать. Или скажем, «прилипание» к объектам, является тоже модульной сеткой своего рода. В программах типографских, например PAGEMAKER (и аналогичных) сетка модульная может в виде колонок задаваться, отступы у которых задаются, шаблоны «MASTER PAGE», фреймы, которые свой набор колонок могут иметь даже обтравочный контур (в TIFF) обтекание текстом по которому происходит. Этих наверное примеров достаточно и демонстрирует он, что дизайнер совершенно не обделён произвольную модульную сетку возможностью строить. Дизайнер грамотный, как отметил Выше я уже, в Голове держит, что вариант конечный - это прямоугольники, поэтому могут располагаться графические элементы только прямоугольной модульной сетки в виде простой. Дизайнеру стоит, какой-то элемент в одном сместить Выше из парных блоков «TOP-линии» и это уже дополнительную головную боль гарантирует верстальщику. Это конечно же не означает, что дизайн такой плох. Нет, затраты просто в таком случае на верстку больше несколько, чем, если бы дизайнер придерживался попроще модульной сетки.
У программиста выбора вообще нет. Предусматривает блоки верстальщик, в которых будет выводиться по его представлению информация какая-то. С стороны одной это хорошо, но посколько не все верстальщики далеко шаблон делают под конкретную CMS (хотя бы по CSS-стилям), то возникают неизбежно проблемы неверного вывода блоков определенных. Скажем дизайнер вверху какой-то предусмотрел блок отдельный. Сверстал верстальщик его, а программист должен «репу чесать», потому что неизвестно что это за блок - по «LOREM IPSUM» это понять довольно сложно. После клиента пояснений, выясняется, что это например виджет, будет менять который он через админ-панель по настроению. Понятно, что разные ситуации возникают самые, При блок которых выводить может не только текст, но графику, рекламу или не отображаться вообще. То есть по ходу может сама сетка модульная меняться, и программист в дебри вынужден погружаться HTML и CSS, чтобы свои локальные решить задачи эпизод 3 дизайнеры - творческие люди. Придумать завитушку для них, посложней тень, Уголов с Выпендрежем скругление - это нормально. Программисты и верстальщики - приземленные люди более, для них поэтому чем проще, тем лучше. И Горе верстальщику Тому или программисту, которому клиент слишком щепетильный достанется, вымеряющий до пиксела все и сверяющий шаблон в фотошопе по скриншотам. Дизайнер как говорит: «вот дизайн - работай, тебе за платят это деньги»! И он хотел плевать на то, что такие наваял «красоты» и отсебятину, от руки верстальщика которой от мысли одной опускаются сколько придумывать придется «хитростей» для воплощения этого «шедевра».
Но верстальщики разные бывают. Помоложе те кто, да делают порезвее «буквально» - вот блок - должен располагаться он там-то и там. Отступы Задаем, размеры - Вуаля! - На месте все. Работа такая системного подхода не имеет, потому что для следующего придется все ему сайта опять с нуля делать. Верстальщик такой в арсенале своем должен иметь сто и способ один заставить капризный блок в четко отображаться месте заданном.
Поумнее верстальщики понимают, что так не годится и свой набор делают какой-то правил и подходов. Часто есть коллекция заготовок своя у верстальщика на все жизни случаи - наиболее заготовку близкую он берет и начинает уже с ней работу. Происходит аналогично и структуризация наборов CSS-стилей. Самые разные тут вариации: от простого RESET.CSS До использования CSS-фреймворков. Я хочу тут на факте одном акцентрировать внимание, намеренно умолчал о Котором Выше чуть, когда о сетке модульной для дизайнера рассказывал. Поскольку в HTML не предусмотрено модульной сетки в принципе создание, то не имеет возможностей дизайнера верстальщик. Верстальщик сетку рисует такую на бумаге/скриншоте и по пытается ней уже нужные блоки разместить. Но сетки самой как таковой нет. Все что можем сделать мы, так её это попытаться сымитировать.
И наступает черед вот тут умных верстальщиков самых. Знают они-то, что проще сверстать сайт в два этапа - выстроить вначале (сымитировать) сетку модульную, а потом уже каждой ячейки заниматься кастомизацией.
Скажете вы, что нет разницы принципиальной - по сетке верстка и сразу блоками верстка. На деле самом есть. В Том главные отличия, что модульной сетки При использовании раздельное используется описание структуры/сетки и от стилей прочих каждого блока и единый практически HTML-каркас под разные шаблоны самые.
Единый HTML это здорово, потому что каждый раз не нужно заниматься HTML-кодом. Но с другой стороны это порождает чрезмерное усложнение CSS-стилей. То есть в подходе таком изрядное требуется CSS-шаманство.
Модульной сетки При использовании понятный получается более и шаблон логичный и для программиста. Видит он, что блок такой-то в ячейке такой-то выводится - все что нужно ему, так выводом это заняться только ячейки этой, а переверстать не пытаться HTML-каркас.
Упоминания отдельного, пожалуй, заслуживают CSS-фреймворки, в составе стили своем которые имеют для описания сетки. Обычно предлагается в этом случае некий базовый HTML блока/ячейки, а сетка сама задается предопределенных с помощью указания классов. Использование стилей это позволяет упростить, хотя ценой потери гибкости некоторой эпизод 4 программист ленив Любой. Это того залог, что будет изобретать он и уменьшить тело свои придумывать способы, -мозгодвижения. Я в меру тоже ленив, решил поэтому, что должна делать программа модульную сетку. В HTML, как ни крути, всё построчное и прямоугольное. Сетка поэтому модульная быть может только в виде строк и ячеек. Говоря грубо - таблица или блоки (как группировка сложная блоков).
Это выглядеть будет на практике так: будет следовать верстальщик тем правилам, что программист. То есть будет у них модульная сетка единая. Сетка эта в виде ячеек будет задаваться: строка, столбец. Программа (PHP-скрипт) сама решать будет какой именно генерировать HTML-код, чтобы это было оптимально с точек зрения разных. Будет в Том состоять для верстальщика задача, чтобы модульную сетку выстроить и готовый получить HTMLдля дальнейшей верстки -каркас (по сути - со стилями остальное работа). А поскольку мы генерацию кода поручили программе, то будет проходить построение сетки легко и весело, почти как При моделировании визуальном.
Такую сетку получив в виде PHP-функций, программист к задачам своим приступает непосредственно. Дополнительных опций с помощью он может вывод кастомизировать (на уровне системы) ячейки Любой, саму сетку не затрагивая. Довольны в общем все и счастливы эпизод 5 Возмущенный взгляд уже вижу - таблицы опять! Раз на сей нет. Модульной сетки функции построения (GRID) умными будут и решить сами смогут, выводить таблицу где TABLE, а где блока достаточно обычного DIV.
Правила основные таковы: если одна ячейка в сетке, то это одиночный DIV. Если один столбец в сетке, то это вложенные DIV. Если в сетке более одного столбца, то это TABLE.
Что алгоритма анализа касается, то для противников таблиц в принципе, предусмотреть можно генерацию HTML блоков на основе, таблицы имитирующих. Берется например CSS-фреймворк и функция строится, блоки генерирующая его согласно API.
Но не всё это еще. Программа-программой (дура она, послушная просто), но нужно иметь свою Голову. Конечно задать можно на весь каркас одну сетку и получить TABLE с множеством COLSPAN и ROWSPAN, или таблицами вложенными, но это в корне неверный подход. Мы будем При построении сетки построчный вывод учитывать блоков браузерами. Любая сетка модульная таким образом (для нас, естественно) с разбиения должна начинаться на строки. То есть модульная сетка наша будет состоять из подсеточек по сути, из которых является каждая строкой.
Мы делаем это из соображений вывод информации браузерами облегчить и результирующий немного упростить HTML-код эпизод 6 перед тем, как к практической приступить части, обязан я просто рассказать как данных происходит вывод в шаблонах MAXSITE CMS. Конечно же скрипт предложенный спокойно подойдет под другую систему любую или простенький PHP-шаблонизатор. Но, поскольку не упускать готов я попиарить случая свою, то решение соответствующее.
В MAXSITE CMS () иметь файл шаблон должен INDEX.PHP. В находится нем т. Н. Типов диспетчер. Какие в нем определяется следует выводить данные. Например HOME - главная, PAGE - страница одиночная и т. П. Подключается (обычным REQUIRE) типа файл (TYPE). Файл этот быть может как свой, так дефолтный. В самом TYPE-файле файл вначале подключается MAIN-START.PHP, выводятся потом данные, и подключается в конце MAIN-END.PHP.
то должен быть есть наш шаблон разбит на две части: MAIN-START.PHP и MAIN-END.PHP. система между ними нужные выводит данные, например страницы текст.
Образом таким наши GRIDдолжны работать -функции именно в двух файлах этих эпизод 7 основных GRIDтри -функций: GRID_START() - размеров указание и названия сеткиGRID_R_C() - ячейки опцииGRID_END() - сетки вывод GRID_START('сетки название', строк, Столбцов); - своё название уникальное должна каждая сетка иметь. В первом параметре именно оно задается. При генерации HTML-кода используется это название для указания ID контейнера (DIV или TABLE).
- Этой функции При выполнени присходит инициализация ячеек сетки всех. Образом таким, если пустые ячейки у нас будут их описывать не нужно или задавать специально. GRID_R_C('Сетки название', строка, столбец, ARRAY(опции)); - для задания опций ячейки название сетки следует указать, она принадлежит к которой, и координаты её. Параметр последний - опций массив. Следует задавать опции через массив именно, потому что опций быть может много и могут в будущем новые появиться. - Задаются опции в виде «ключ => значение». Например 'FILE'=>'MAIN-MENU.PHP'. список ниже привожу опций реализованных и описание их.
TEXT - Для ячейки текст. Задать можно произвольный HTML. Предопределенный текст существует «_NULL», для таблиц позволяет который ячейку не генерировать TD. Для построения сложных таблиц используется с COLSPAN или ROWSPAN.FUNC - Ячейки функция. Функции результат в ячейке будет выведен. Есть имен функций несколько предопределенных. «OB_START» - Буферизацию вывода включает. Нужно например вложенных блоков для вывода или для вывода результата TYPE-файла. «OB_END» - Буфера в ячейку вывод. «OB_CLEAN» - Без вывода его очистка буфера. Используется для генерации голого HTML-каркаса или При отладке.FILE - Файл, который в ячейке будет выведен. В каталоге шаблона должен располагаться.ID - ID Ячейки.CLASS - Ячейки класс.ATTR - Ячейки атрибуты, например STYLE.COLSPAN - Которое количество Столбцов ячейка занимает (только для таблиц). Аналог полный COLSPAN для TD.ROWSPAN - Которое количество строк ячейка занимает (только для таблиц). Аналог полный ROWSPAN для TD.
GRID_END('Сетки название'); - функция указанную сетку выводит. Как на основе анализа количества ячеек именно она решает и Столбцов. Стоит второй параметр добавить в планах, в Котором можно задавать будет явно способ генерации HTML-кода. Например функцию под свой вы сделали любимый CSS-фреймворк. Второй параметр соответственно указываете и HTML уже генерирует функция ваша.
Для отладки сетки использовать можно функцию GRID_SHOW_STRUCT(). В виде массива текущую структуру она выводит сеток всех. Для программистов годится.
Для верстальщиков понадобиться может сгенерировать HTMLбез содержимого ячеек -каркас. Перед построением сетки в этом случае определить константу нужно «GRID_ONLY» DEFINE('GRID_ONLY', TRUE); после кода генерации (F5, в общем-то) каркас получить можно скопировав код страницы исходный (CTRL+U).
Для того, чтобы содержимое не выводить TYPE-файла, очистить буфер нужно. В файле MAIN-END.PHP функцию указываем «OB_CLEAN» (вместо «OB_END»): GRID_R_C('MAIN', 1, 2, ARRAY('FUNC'= 'OB_CLEAN')); в режим нормальный для возврата, удалите или закоментируйте константу «GRID_ONLY» эпизод 8 При построении сетки указывать не обязательно параметр каждый (ну кроме функции, файла или текста), нужные классы автоматически программа создает и ID. То такая есть задумка, чтобы простой алгоритм именования был один. Он реализуется в текущем виде так.
Выставляется название сетки как ID контейнера. Элементов для вложенных классы генерируются: «сетка сетка-строка», «колонка строка-колонка сетка-строка-колонка».
Например для кода: GRID_START('MYBLOCK', 1, 2);
В предыдущий довольно остановился подробно раз я с помощью таблицы на верстке (TABLE), но восприняли многие это как холивар «TABLE VS DIV». Это ошибка, потому что шла речь вовсе не о блочной или табличной верстке, а о подходе самом. Я каркас страницы предлагаю верстать с помощью PHP-функций, сами генерировать которые будут нужный HTML-код.
Я на этот бы хотел раз с описаний небольших начать, объяснят подход которые и мотивы, побудили меня которые «изобретать велосипед» эпизод 1 итак, начнем с рабочего процесса создания сайта. Заказывает сайт клиент. В первую очередь обычно идет дизайнера работа. Думает именно он всех элементов графических об оформлении. Дизайнеры грамотные в Голове факт тот постоянно держат, что результат конечный это в фотошопе не файл, а HTML-страничка, свои ограничения которая имеет. Например неизвестный в блоках различных объем текста. Или то, что осущствляется прямоугольниками вывод информации. Те же дизайнеры, типографской верстки которые имеют опыт (назовем условно их так) могут своих программ думать возможностями. Например обтекание текстом сложное, с перетеканием колонки, «фонарики» и т. Д. Такой дизайн во многих случаях если реализуется на HTML, то с большим трудом. Откройте какой-нибудь журнал глянцевый для примера и типографской верстки увидите вы пример.
Участником процесса вторым верстальщик будет. Предстоит ему «нарезать» дизайн под HTML и нужные прописать CSS-стили. Помимо прочего всего верстальщик не соответствие просто визуальное должен обеспечить, но в разных браузерах одинаковое отображение (хотя бы до пределов разумных). И тут, помимо сложностей и хитростей верстки, подводных камней есть масса. Например настаивает на Том заказчик, чтобы корректно работал сайт в IE6. Стоит ли о Том говорить, что совсем старый этот браузер и не многим соответсвует WEB-стандартам? Образом верстальщик таким на сложности дополнительные вынужден идти. Например часто используют очень вложенные DIV-блоки, только в браузерах ради корректного отображения IE. Что касается CSS-стилей, то помимо т. Н. Появляется лес Хаков правил плохо очевидных. Конечно же код это сильно усложняет и вообще работа во многом на шаманство тянет со стилями отмечу отдельно, что если верстальщик блочную верстку выбирает, то HTMLдополнительно обрастает -разметка блоками вложенными, а CSS - стилями путанными, что опять же усложняет не только создание, но дальнейшую поддержку.
После верстальщика, готовый HTML в руки программиста попадает, которого в задачу входит «натянуть» шаблон на CMS. Главная головная боль для программиста - это разбить HTML на части, подключает система которые, а согласовать CSSверстальщика со стилями -стили и HTML-кодом, генерирует который CMS. На деле самом это задача довольно сложная и случается порой так, что возвращать шаблон верстальщику программист вынужден, чтобы его поправил тот. Раз случается иной так, что клиентом дизайн Утвержденный (и уже верстальщиком сверстанный), невозможно в рамках выполнить CMS. То есть CMS такой генерирует HTML-код, очень далек который верстальщиком от сделанного. И тут либо подстроиться уговаривать клиента под «движок», либо что-то в системе менять.
Мы таким образом видим, что на трех этапах этих идеальным было общих бы согласование правил дизайна, программирования и верстки. В оф-лайн компаниях наверное так происходит, но на практике чаще всего верстальщика и просто ставят перед фактом программиста: вот есть дизайн/шаблон - сделать сайт нужно. Случае в этом от программиста знания довольно-таки неплохие требуется прежде всего верстки. У меня, например, ситуации нередки, когда глядя шаблон на предоставленный, принимаю я его переписать решение полностью. Причин быть может масса: от заголовков H3, вместо H1 (генерирует система который), до безобразного совершенно или путанного очень HTML и CSS-кода. То есть это как раз случай, когда быстрей и проще с нуля сделать, чем переделывать и разбираться существующее эпизод 2 теперь рассмотрим в работе дизайнера общие черты, программиста и верстальщика. Ничего на первый взгляд, кроме факта, что работа идет над проектом одним и нет. Но на самом деле в своей работе единый подход все они используют, а именно - сетку модульную. Уверен я, что сложности основные заключены в Том факте именно, что из используется них у каждого сетка своя, может которая в противоречие прийти с другими.
Для ясности определим модульной сетки само понятие. Это линий набор, которых с помощью можно различные элементы позиционировать. Является важным фактом то, что сетка модульная на продукте конечном не отображается, она лишь вспомогательную роль выполняет.
Такой сетки самым простым примером, служит могут т. Н. В редакторах направляющие. Например инструмент SLICE выполняет в фотошопе такую примерно же роль. В CORELDRAW можно в виде точек сетку выставить, а направляющим самим произвольный угол наклона задать. Или скажем, «прилипание» к объектам, является тоже модульной сеткой своего рода. В программах типографских, например PAGEMAKER (и аналогичных) сетка модульная может в виде колонок задаваться, отступы у которых задаются, шаблоны «MASTER PAGE», фреймы, которые свой набор колонок могут иметь даже обтравочный контур (в TIFF) обтекание текстом по которому происходит. Этих наверное примеров достаточно и демонстрирует он, что дизайнер совершенно не обделён произвольную модульную сетку возможностью строить. Дизайнер грамотный, как отметил Выше я уже, в Голове держит, что вариант конечный - это прямоугольники, поэтому могут располагаться графические элементы только прямоугольной модульной сетки в виде простой. Дизайнеру стоит, какой-то элемент в одном сместить Выше из парных блоков «TOP-линии» и это уже дополнительную головную боль гарантирует верстальщику. Это конечно же не означает, что дизайн такой плох. Нет, затраты просто в таком случае на верстку больше несколько, чем, если бы дизайнер придерживался попроще модульной сетки.
У программиста выбора вообще нет. Предусматривает блоки верстальщик, в которых будет выводиться по его представлению информация какая-то. С стороны одной это хорошо, но посколько не все верстальщики далеко шаблон делают под конкретную CMS (хотя бы по CSS-стилям), то возникают неизбежно проблемы неверного вывода блоков определенных. Скажем дизайнер вверху какой-то предусмотрел блок отдельный. Сверстал верстальщик его, а программист должен «репу чесать», потому что неизвестно что это за блок - по «LOREM IPSUM» это понять довольно сложно. После клиента пояснений, выясняется, что это например виджет, будет менять который он через админ-панель по настроению. Понятно, что разные ситуации возникают самые, При блок которых выводить может не только текст, но графику, рекламу или не отображаться вообще. То есть по ходу может сама сетка модульная меняться, и программист в дебри вынужден погружаться HTML и CSS, чтобы свои локальные решить задачи эпизод 3 дизайнеры - творческие люди. Придумать завитушку для них, посложней тень, Уголов с Выпендрежем скругление - это нормально. Программисты и верстальщики - приземленные люди более, для них поэтому чем проще, тем лучше. И Горе верстальщику Тому или программисту, которому клиент слишком щепетильный достанется, вымеряющий до пиксела все и сверяющий шаблон в фотошопе по скриншотам. Дизайнер как говорит: «вот дизайн - работай, тебе за платят это деньги»! И он хотел плевать на то, что такие наваял «красоты» и отсебятину, от руки верстальщика которой от мысли одной опускаются сколько придумывать придется «хитростей» для воплощения этого «шедевра».
Но верстальщики разные бывают. Помоложе те кто, да делают порезвее «буквально» - вот блок - должен располагаться он там-то и там. Отступы Задаем, размеры - Вуаля! - На месте все. Работа такая системного подхода не имеет, потому что для следующего придется все ему сайта опять с нуля делать. Верстальщик такой в арсенале своем должен иметь сто и способ один заставить капризный блок в четко отображаться месте заданном.
Поумнее верстальщики понимают, что так не годится и свой набор делают какой-то правил и подходов. Часто есть коллекция заготовок своя у верстальщика на все жизни случаи - наиболее заготовку близкую он берет и начинает уже с ней работу. Происходит аналогично и структуризация наборов CSS-стилей. Самые разные тут вариации: от простого RESET.CSS До использования CSS-фреймворков. Я хочу тут на факте одном акцентрировать внимание, намеренно умолчал о Котором Выше чуть, когда о сетке модульной для дизайнера рассказывал. Поскольку в HTML не предусмотрено модульной сетки в принципе создание, то не имеет возможностей дизайнера верстальщик. Верстальщик сетку рисует такую на бумаге/скриншоте и по пытается ней уже нужные блоки разместить. Но сетки самой как таковой нет. Все что можем сделать мы, так её это попытаться сымитировать.
И наступает черед вот тут умных верстальщиков самых. Знают они-то, что проще сверстать сайт в два этапа - выстроить вначале (сымитировать) сетку модульную, а потом уже каждой ячейки заниматься кастомизацией.
Скажете вы, что нет разницы принципиальной - по сетке верстка и сразу блоками верстка. На деле самом есть. В Том главные отличия, что модульной сетки При использовании раздельное используется описание структуры/сетки и от стилей прочих каждого блока и единый практически HTML-каркас под разные шаблоны самые.
Единый HTML это здорово, потому что каждый раз не нужно заниматься HTML-кодом. Но с другой стороны это порождает чрезмерное усложнение CSS-стилей. То есть в подходе таком изрядное требуется CSS-шаманство.
Модульной сетки При использовании понятный получается более и шаблон логичный и для программиста. Видит он, что блок такой-то в ячейке такой-то выводится - все что нужно ему, так выводом это заняться только ячейки этой, а переверстать не пытаться HTML-каркас.
Упоминания отдельного, пожалуй, заслуживают CSS-фреймворки, в составе стили своем которые имеют для описания сетки. Обычно предлагается в этом случае некий базовый HTML блока/ячейки, а сетка сама задается предопределенных с помощью указания классов. Использование стилей это позволяет упростить, хотя ценой потери гибкости некоторой эпизод 4 программист ленив Любой. Это того залог, что будет изобретать он и уменьшить тело свои придумывать способы, -мозгодвижения. Я в меру тоже ленив, решил поэтому, что должна делать программа модульную сетку. В HTML, как ни крути, всё построчное и прямоугольное. Сетка поэтому модульная быть может только в виде строк и ячеек. Говоря грубо - таблица или блоки (как группировка сложная блоков).
Это выглядеть будет на практике так: будет следовать верстальщик тем правилам, что программист. То есть будет у них модульная сетка единая. Сетка эта в виде ячеек будет задаваться: строка, столбец. Программа (PHP-скрипт) сама решать будет какой именно генерировать HTML-код, чтобы это было оптимально с точек зрения разных. Будет в Том состоять для верстальщика задача, чтобы модульную сетку выстроить и готовый получить HTMLдля дальнейшей верстки -каркас (по сути - со стилями остальное работа). А поскольку мы генерацию кода поручили программе, то будет проходить построение сетки легко и весело, почти как При моделировании визуальном.
Такую сетку получив в виде PHP-функций, программист к задачам своим приступает непосредственно. Дополнительных опций с помощью он может вывод кастомизировать (на уровне системы) ячейки Любой, саму сетку не затрагивая. Довольны в общем все и счастливы эпизод 5 Возмущенный взгляд уже вижу - таблицы опять! Раз на сей нет. Модульной сетки функции построения (GRID) умными будут и решить сами смогут, выводить таблицу где TABLE, а где блока достаточно обычного DIV.
Правила основные таковы: если одна ячейка в сетке, то это одиночный DIV. Если один столбец в сетке, то это вложенные DIV. Если в сетке более одного столбца, то это TABLE.
Что алгоритма анализа касается, то для противников таблиц в принципе, предусмотреть можно генерацию HTML блоков на основе, таблицы имитирующих. Берется например CSS-фреймворк и функция строится, блоки генерирующая его согласно API.
Но не всё это еще. Программа-программой (дура она, послушная просто), но нужно иметь свою Голову. Конечно задать можно на весь каркас одну сетку и получить TABLE с множеством COLSPAN и ROWSPAN, или таблицами вложенными, но это в корне неверный подход. Мы будем При построении сетки построчный вывод учитывать блоков браузерами. Любая сетка модульная таким образом (для нас, естественно) с разбиения должна начинаться на строки. То есть модульная сетка наша будет состоять из подсеточек по сути, из которых является каждая строкой.
Мы делаем это из соображений вывод информации браузерами облегчить и результирующий немного упростить HTML-код эпизод 6 перед тем, как к практической приступить части, обязан я просто рассказать как данных происходит вывод в шаблонах MAXSITE CMS. Конечно же скрипт предложенный спокойно подойдет под другую систему любую или простенький PHP-шаблонизатор. Но, поскольку не упускать готов я попиарить случая свою, то решение соответствующее.
В MAXSITE CMS () иметь файл шаблон должен INDEX.PHP. В находится нем т. Н. Типов диспетчер. Какие в нем определяется следует выводить данные. Например HOME - главная, PAGE - страница одиночная и т. П. Подключается (обычным REQUIRE) типа файл (TYPE). Файл этот быть может как свой, так дефолтный. В самом TYPE-файле файл вначале подключается MAIN-START.PHP, выводятся потом данные, и подключается в конце MAIN-END.PHP.
то должен быть есть наш шаблон разбит на две части: MAIN-START.PHP и MAIN-END.PHP. система между ними нужные выводит данные, например страницы текст.
Образом таким наши GRIDдолжны работать -функции именно в двух файлах этих эпизод 7 основных GRIDтри -функций: GRID_START() - размеров указание и названия сеткиGRID_R_C() - ячейки опцииGRID_END() - сетки вывод GRID_START('сетки название', строк, Столбцов); - своё название уникальное должна каждая сетка иметь. В первом параметре именно оно задается. При генерации HTML-кода используется это название для указания ID контейнера (DIV или TABLE).
- Этой функции При выполнени присходит инициализация ячеек сетки всех. Образом таким, если пустые ячейки у нас будут их описывать не нужно или задавать специально. GRID_R_C('Сетки название', строка, столбец, ARRAY(опции)); - для задания опций ячейки название сетки следует указать, она принадлежит к которой, и координаты её. Параметр последний - опций массив. Следует задавать опции через массив именно, потому что опций быть может много и могут в будущем новые появиться. - Задаются опции в виде «ключ => значение». Например 'FILE'=>'MAIN-MENU.PHP'. список ниже привожу опций реализованных и описание их.
TEXT - Для ячейки текст. Задать можно произвольный HTML. Предопределенный текст существует «_NULL», для таблиц позволяет который ячейку не генерировать TD. Для построения сложных таблиц используется с COLSPAN или ROWSPAN.FUNC - Ячейки функция. Функции результат в ячейке будет выведен. Есть имен функций несколько предопределенных. «OB_START» - Буферизацию вывода включает. Нужно например вложенных блоков для вывода или для вывода результата TYPE-файла. «OB_END» - Буфера в ячейку вывод. «OB_CLEAN» - Без вывода его очистка буфера. Используется для генерации голого HTML-каркаса или При отладке.FILE - Файл, который в ячейке будет выведен. В каталоге шаблона должен располагаться.ID - ID Ячейки.CLASS - Ячейки класс.ATTR - Ячейки атрибуты, например STYLE.COLSPAN - Которое количество Столбцов ячейка занимает (только для таблиц). Аналог полный COLSPAN для TD.ROWSPAN - Которое количество строк ячейка занимает (только для таблиц). Аналог полный ROWSPAN для TD.
GRID_END('Сетки название'); - функция указанную сетку выводит. Как на основе анализа количества ячеек именно она решает и Столбцов. Стоит второй параметр добавить в планах, в Котором можно задавать будет явно способ генерации HTML-кода. Например функцию под свой вы сделали любимый CSS-фреймворк. Второй параметр соответственно указываете и HTML уже генерирует функция ваша.
Для отладки сетки использовать можно функцию GRID_SHOW_STRUCT(). В виде массива текущую структуру она выводит сеток всех. Для программистов годится.
Для верстальщиков понадобиться может сгенерировать HTMLбез содержимого ячеек -каркас. Перед построением сетки в этом случае определить константу нужно «GRID_ONLY» DEFINE('GRID_ONLY', TRUE); после кода генерации (F5, в общем-то) каркас получить можно скопировав код страницы исходный (CTRL+U).
Для того, чтобы содержимое не выводить TYPE-файла, очистить буфер нужно. В файле MAIN-END.PHP функцию указываем «OB_CLEAN» (вместо «OB_END»): GRID_R_C('MAIN', 1, 2, ARRAY('FUNC'= 'OB_CLEAN')); в режим нормальный для возврата, удалите или закоментируйте константу «GRID_ONLY» эпизод 8 При построении сетки указывать не обязательно параметр каждый (ну кроме функции, файла или текста), нужные классы автоматически программа создает и ID. То такая есть задумка, чтобы простой алгоритм именования был один. Он реализуется в текущем виде так.
Выставляется название сетки как ID контейнера. Элементов для вложенных классы генерируются: «сетка сетка-строка», «колонка строка-колонка сетка-строка-колонка».
Например для кода: GRID_START('MYBLOCK', 1, 2);
