+7 (499) 709-98-06

Введение

Используя (X) HTML и CSS, это просто место, прямоугольные границы вокруг части веб-страницы. Обычно это делается путем включения код для этой части веб-страницы в

... метки (или аналогичный), а затем применяя границу использованием CSS границы собственности.

Тем не менее, в настоящее время не возможно создать непрямоугольной границы, используя только (X) HTML и CSS. (Non-прямоугольные границы, упоминаемые в этом учебнике как "закругленными углами, так как это наиболее распространенный осуществления Однако, углы не должны быть округлыми -. Этот метод может быть использован для создания различных форм и стилей границ .)

Для того чтобы преодолеть ограничения CSS границы, мы можем использовать одно или несколько изображений, чтобы обеспечить появление границы. Это очень легко сделать, когда вы знаете, насколько велика ваша будет - вы просто создаете образ правильного размера показаны границы вы хотите, и установить его в качестве фона для вашей . В целом, однако, мы хотим элементов веб-страницы, чтобы изменить их размеры (ширина, высота, или оба) в зависимости от их содержания. Это особенно верно для шаблона дизайнеров, использующих CMS, таких как Joomla! - Если мы не знаем, какое содержание будет размещен на странице, мы не можем знать, что размер должно быть! Основное внимание в этом учебнике Поэтому о создании закругленных углов, которые "жидкости" - то есть, что можно изменить размер для размещения различных размеров содержимого.

Теория

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

Процесс иллюстрируется анимации показано на рисунке справа. На каждом этапе, изображение наносится на верхней части последнего.

1. Во-первых, большое изображение, содержащее левой и верхней границ, и в верхнем левом углу округлые, находится в левом верхнем углу нашей

контейнер (они изложены в красный для ясности). Изображение больше, чем требуется для этого контейнера, и так выходит за пределы нижней и правой края; это показано в частичной прозрачности в анимации для иллюстрации процесса, но не будет рассматриваться на практике.
2. Далее, тонкой горизонтальной изображение, содержащее нижней границей и нижнем левом углу округлые находится в нижнем левом углу контейнера , в верхней части первого изображения. Это изображение было дано тонкая граница в темный розовый для иллюстрации процесса; эту границу, обычно не используется. Опять же, это можно увидеть, что изображение выходит за пределы правой края контейнера.
3. В-третьих, тонкие вертикальные изображения, содержащего правой границы и верхнем правом углу округлые находится в верхнем правом углу контейнера, в верхней части второго изображения.
4. Наконец, площадь изображение, содержащее только правом нижнем углу округлые помещается в правом нижнем углу контейнера.

Положив ее на практике - создание изображений

Для создания изображения нам нужно, мы будем использовать открыть векторный графический редактор источник Inkscape. В отличие от растровых рисунок программного обеспечения (например, GIMP), который занимается в отдельных пикселей, программное обеспечение векторной графики работы с геометрическими фигурами. Это делает его гораздо проще создать закругленные углы, имеющий ровно геометрии мы хотим.

Мы будем использовать Inkscape для создания простых округлых коробку с розовой передний план и белый фон, и тень в правом нижнем углу. Это же окно, как показано на анимации выше.

1. Для начала мы должны решить, что максимальный размер мы хотим для наших окно. Как указано выше, это будет определять размер изображения нам нужно использовать. Так как больше изображение будет иметь больше размер файла, и, следовательно, причиной сайт для загрузки более медленно, нет смысла делать какие-либо крупные изображения, чем это необходимо. Для целей этого примера, мы будем использовать максимальный размер 800px в ширину 600px высокой. Поэтому мы создаем новый документ в Inkscape, имеющих эти размеры. Документ размеры устанавливаются выбрав Файл> Свойства документа из меню, и ввода правильного значения в диалоговом окне, которое появляется. Также в этом диалоговом окне, мы должны изменить фон по умолчанию от прозрачного до белого (FFFFFFFF). После закрытия диалога, мы изменим имя по умолчанию слой (перейдите к Layer> Переименовать слой ...) на "Закругленный прямоугольник".

2. Мы оставим 5px поля вокруг нашего изображения. Кроме того, нам понадобится 5px ширина тени на правой и нижней границ нашей округлые окна. Поэтому нам необходимо нарисовать скругленный прямоугольник с шириной 785px и высотой 585px. Мы будем также уделять закругленными углами 5px радиуса. Для этого выберите инструмент прямоугольник из панели инструментов в левой, и щелкнуть левой кнопкой мыши, перетащить в любом месте пустой документ. Точный размер прямоугольника вы рисуете не имеет значения, на данном этапе. Затем перейдите на панели опций и введите следующие параметры: Д: 783,00 H: 583,00 Rx: 5,000 Ry: 5,000 пикселей. Почему разница в размерах? Эти размеры не включают в ширину границы. Мы собираемся дать нашим прямоугольник 2px границы, которая будет усугубляться каждого измерения по 2px.

3. Далее нам нужно настроить, что границы, и множество цветов нашего прямоугольника. Что прямоугольник установлен, перейдите к "Объект"> заливки и обводки в строке меню, или нажмите Shift + Ctrl + F, чтобы открыть заливки и обводки диалога. На вкладке "Заполнить", выберите цвет переднего плана заполнить. Мы собираемся использовать шестнадцатеричный цвет # ffd7eb, поэтому введите "ffd7ebff в вход RGBA. (Шестнадцатеричное значение окончательного "FF" задает уровень альфа-прозрачность для заполнения - в нашем случае, совершенно непрозрачный). На вкладке "Stroke краски" положим цвет границы. В нашем случае, мы хотим черной границей, так что мы можем оставить вход RGBA на значение по умолчанию 000000ff. Наконец, на вкладке "инсульт стиль, положим инсульта (границы) ширина быть 2.000px.

4. Теперь у нас есть наш прямоугольник, но это не в нужном месте. Inkscape меры позиции от левом нижнем углу документа, поэтому нам нужно разместить наш прямоугольник при х = 5 и Y = 10. Выберите инструмент выделения из панели инструментов в левой, левой кнопкой мыши в любом месте внутри прямоугольник с закругленными углами, и входить в позицию значения в панели опций.

5. Далее, нам необходимо создать новый слой провести тени. Во-первых, скрыть оригинальный слой ("Округлый прямоугольник"), нажав на иконку глаза в нижней части главного окна. Затем перейдите в меню Layer> Add Layer ... в строке меню, и создать новый слой под названием "Тень" ниже текущего слоя. Затем мы можем создать еще один округлые окна в этом слое. Сделать этот 785px широкий, высокий 585px, с угловыми радиусами 5px, и расположен в точке х = 10 и Y = 5. В 'Заливка и обводка диалога, множество заполнить RGBA к '00000081', и размытие слайдер в 0 0,6. На вкладке "инсульт краски", выберите значок "нет краски. Это даст прямоугольник с закругленными углами в серый цвет, частично прозрачным, и с несколько размытыми краями.

6. И наконец, показать "Закругленный прямоугольник" слой, выбрав его в раскрывающемся списке в нижней части главного окна, и левой кнопкой мыши значок глаза снова. Поздравляем - вы можете увидеть, как округлые окно будет выглядеть! Вы можете сохранить изображение в этом пункте, как Inkscape. SVG-файл, так что вы легко можете вернуться и изменить его позже.

7. Теперь нам нужно создать четыре отдельных изображений нам понадобится, и сохранять их в веб-формате. Inkscape также делает это очень легко - просто зайдите в меню Файл> Экспортировать Bitmap ... и выберите кнопку "Custom" в диалоговом окне. Мы можем экспортировать соответствующие части нашего изображения, введя координаты в x0/y0 и X1/Y1 коробки. Помните, что все координаты отсчитываются от левого нижнего угла! Лучшее место, чтобы вырезать изображение перед кривой закругленные углы на нижней и правой края. Мы могли бы использовать эту следующие настройки:

В результате изображения следующим образом:

Положив ее на практике - Редактирование шаблона

Для реализации закругленными углами на модуль, мы будем использовать 'rounded' Модуль хром, в том числе по следующим

<jdoc:include type="modules" name="POSITION" style="rounded" />

Это создает следующий код в окончательном веб-страницы:

<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Main Menu</h3>
        <ul class="menu">
          <li><!-- various menu items --></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Четыре вложенные <div>s дать нам слоев нам необходимо для наших четырех изображений. Мы можем использовать имя класса внешней <div> чтобы гарантировать, что мы действительно имеем дело с правильным <div>s, а затем использовать вложенности отношения применять правильное изображение для каждого слоя.

div.module_menu {
  background: url(../images/rounded_topleft.png) 0 0 no-repeat;
  padding: 0;
}
 
div.module_menu div {
  background: url(../images/rounded_bottomleft.png) 0 100% no-repeat;
  margin: 0;
  border: 0;
}
 
div.module_menu div div{
  background: url(../images/rounded_topright.png) 100% 0 no-repeat;
}
 
div.module_menu div div div {
  background: url(../images/rounded_bottomright.png) 100% 100% no-repeat;
}

div.module_menu div div div div{
  background: none;
}

<jdoc:include type="modules" name="user1" style="custom" />

Это можно увидеть, что же хром Модуль применяется для каждого модуля в таком положении, - иными словами, если вы хотите иметь два 
модуля в колонке, но хотим, чтобы они имеют различные хром модуль, то они должны быть созданы как два разных позиций 
"(например, 'user1' и 'user2').

Стандартный Joomla! 1,5 пакет включает в себя шесть стилей по умолчанию модуль хром. Однако, гибкость системы шаблонов означает, 
что вы не ограничены в этих стилей - это очень просто сделать, как много новых стилей, как вы хотите!

Обратите внимание, что этот пример включает класс дополнений потому примеры взяты использованием mod_mainmenu. 
Суффикс "_menu" к классу DIV и "menu" класса на ул тегов нет с другими модулями.

<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Main Menu</h3>
        <ul class="menu">
          <li><!-- various menu items --></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<ul class="menu">
  <li><!-- various menu items --></li>
</ul>

<table cellpadding="0" cellspacing="0" class="moduletable_menu">
  <tr>
    <th valign="top">Main Menu</th>
  </tr>
  <tr>
    <td>
      <ul class="menu">
        <li><!-- various menu items --></li>
      </ul>
    </td>
  </tr>
</table>

<table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
    <td valign="top">
      <table cellpadding="0" cellspacing="0" class="moduletable_menu">
        <tr>
          <th valign="top">Main Menu</th>
        </tr>
        <tr>
          <td>
            <ul class="menu">
              <li><!-- various menu items --></li>
            </ul>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<div class="moduletable_menu">
  <h3>Main Menu</h3>
  <ul class="menu">
    <li><!-- various menu items --></li>
  </ul>
</div>

<div class="mod-preview">
  <div class="mod-preview-info">left[outline]</div>
  <div class="mod-preview-wrapper">
    <ul class="menu">
      <li><!-- various menu items --></li>
    </ul>
  </div>
</div>

<?php 
  function modChrome_STYLE( $module, &$params, &$attribs ) 
  {
    /* chromed Module output goes here */
  }
?>

В рамках этой функции вы можете использовать любой из доступных свойств модуля (т.е. полей в таблице jos_modules в Joomla! 
Базе данных на сервере) для этого модуля, но основные из них вы, вероятно, нужны 
$module->content, $module->showtitle and $module->title. $module->showtitle  
является логической переменной, так что либо истинно (когда название модуля должно быть показано на рисунке) или 
"ложь" (когда он не должен быть показан). $module->content and $module->title  Основное содержание модуля и название модуля, 
соответственно.

Функция нормальной функции PHP и так можно использовать любой обычный код PHP. Один общий пример использования, если заявление 
и проверить значение $module->showtitle, а затем включить название или не соответствующим образом:

<?php
  if ($module->showtitle) 
  {
    echo '<h2>' .$module->title .'</h2>';
  }
?>


Параметры модуля получить с помощью $ Params объекта. Например, можно назначить модуля Суффикс класса модуля в бэкэнда вашего 
Joomla! Сайт, который затем хранится в параметры этого модуля как moduleclass_sfx. Чтобы создать <div> с класса определяется суффикс 
класса модуля, можно использовать:

<div class="<?php echo $params->get( 'moduleclass_sfx' ); ?>">
  <!-- div contents -->
</div>


Кроме того, можно пройти дальше атрибутов в функции модуля хрома с использованием тех же заявление /> <jdoc:include, который 
устанавливает хром модуль. Эти дополнительные атрибуты могут быть все что угодно, и хранятся в $ attribs массива. 
Рассмотрим следующий пример модуля хром функции: 

<?php
  function modChrome_custom( $module, &$params, &$attribs ) {
    if (isset( $attribs['headerLevel'] )) 
    {
      $headerLevel = $attribs['headerLevel'];
    } else {
      $headerLevel = 3;
    }
 
    if (isset( $attribs['background'] )) 
    {
      $background = $attribs['background'];
    } else {
      $background = 'blue';
    }
 
    echo '<div class="' .$params->get( 'moduleclass_sfx' ) .'" >';
 
    if ($module->showtitle) 
    {
      echo '<h' .$headerLevel .'>' .$module->title .'</h' .$headerLevel .'>';
    }
 
    echo '<div class="' .$background .'">';
    echo $module->content;
    echo '</div>';
 
    echo '</div>';
  }
?>


Затем вы должны установить значения для фона и headerLevel в заявлении /> <jdoc:include как показано ниже. 
Если значение не установлено, атрибутов по умолчанию "синий" и "3"  соответственно.

<div>
  <h3><!-- Module title --></h3>
 
  <div class="blue">
    <!-- Module content -->
  </div>
</div>

<div>
  <h3><!-- Module title --></h3>
 
  <div class="green">
    <!-- Module content -->
  </div>
</div>

<div>
  <h1><!-- Module title --></h1>
 
  <div class="yellow">
    <!-- Module content -->
  </div>
</div>