Перевод Лебедев Сергей
В этом учебнике рассматривается создание трехколоночной темы для вебсайта на Joomla. Такими является большинство Joomla сайтов и это уже считается в некотором роде стандартом. Кроме того, позже можно будет скрыть неиспользуемые колонки.
Вообще-то, создать тему для Joomla сайта с помощью таблиц проще, так поступает большинство. Использование CSS требует большего профессионализма - научиться этому сложнее, кроме того, есть проблемы с интерпретацией CSS некоторыми браузерами. Поэтому, этот учебник предназначен для людей, имеющих опыт работы с CSS.
Трехколоночная тема на базе CSS.
Итак, у вас уже есть опыт работы с CSS. Тогда вам будет полезно зайти на _http://www.csscreator.com/version2/pagelayout.php - это мощный инструмент, позволяющий вам сгенерировать CSS.
Однако, в этом учебнике мы воспользуемся другой техникой создания слоев – абсолютным позиционированием. Полагаю, использование такого CSS наиболее просто для понимания начинающими. Вы всего лишь должны точно задать расположение контента на странице. Например:
#leftcontent {
position:absolute;
top:20px;
left:50px;
width:200px;
}
создаст область шириной 200px с началом в точке 20px от верха и 50рх от левого края. Вы спросите, от левого края чего? Обычно, от верха окна браузера, однако, если центральный сектор (область, в которой находится левая колонка) также позиционируется, тогда 50рх надо отсчитать относительно него. Далее, попробуем добавить картинки…
Сначала определим центральный сектор:
#wrapper {
position:relative;
width:560px;
margin: 50px auto;
}
Вы, должно быть, заметили, что мы изменили тип позиционирования с абсолютного на относительный. Таким образом, мы приблизились к определению понятия «Документ» и пониманию того, как элементы влияют друг на друга. Воспользуемся следующим html для примера:
<div id="wrapper">
Text in wrapper, blah, ipsum stuff
</div>
<div id="leftcontent">
Leftcontent text, blah and domini and what is the url to generate that random latin?
</div>
Согласно вышесказанному выглядеть он будет так:
{mosimage}
Не слишком-то красиво! Теперь разместим левую колонку внутри основного окна (понимаете почему оно названо «wrapper» - расширитель)
<div id="wrapper">
wrapper text, blah, blah and ipsum stuff
<div id="leftcontent">
Text in leftcontent, blah, blah and ipsum domini and what is the url to generate that random latin
</div>
</div> <!-- End of the wrapper div-->
Теперь наш пример выглядит так:
{mosimage}
Гораздо лучше. Текст налезает на основной контент, но на данном этапе это нас не волнует. Теперь взглянем на CSS, который мы будем использовать для нашей страницы. Он располагается в отдельном файле layout.css. Этот файл впоследствии будет импортирован в template_css.css. Рекомендуется отделять слой от типографии при дизайне и совмещать по его завершении. Это позволит уменьшить количество ошибок браузера. Большинство из них случаются, когда вы пытаетесь комбинировать позиционирование элементов паддингом или с различными размерами. Старайтесь избегать применения паддинга/границ вместе с элементами фиксированной ширины. Этого можно достичь размещением всех операций позиционирования в один лист, а паддинга и границ - в другой (скомбинировать можно будет позднее). Таким образов ваш сайт быстрее пройдет тест на валидность.
Итак, вот трехколоночная тема Joomla:
/* Базовая трехколоночная тема Joomla */
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:100px;
width:200px;
background-color:#fff;
border:1px solid #000;
}
#centercontent {
background-color:#fff;
margin-left: 211px; /*на 1 больше, т.к. учитываем границу*/
margin-right:211px;
margin-top:7px; /* Отступ чтобы подровнять центральную и боковые колонки */
border:1px solid #000;
}
#rightcontent {
position: absolute;
right:10px;
top:100px;
width:200px;
background-color:#fff;
border:1px solid #000;
}
О адаптации слоев можно прочесть здесь _http://glish.com/css/7.asp. Мы опустили большую часть CSS для упрощения и потому, что мы не собираемся делать сайт с поддержкой IE5.X.
Это не совсем простое абсолютное позиционирование. Левая и правая колонки позиционируются так, как рассказано выше. А как же позиционировать центр? Абсолютно позиционируемые элементы считаются «вне документа». Это значит, что весь остальной контент располагается так, как будто этих элементов нет. Вы это уже видели в начальном примере. Для того, чтобы расположить центральный контент правильно, мы воспользовались отступами (margin). Теперь центральный текст расположится как бы в «средней» колонке.
Файл index.php выглядел так:
<body>
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
<?php mosLoadModules('top');?>
<?php mosLoadModules('left');?>
<?php mosMainBody(); ?>
<?php mosLoadModules('right');?>
<?php mosLoadModules('bottom');?>
<?php include_once('includes/footer.php'); ?>
</body>
</html>
Теперь разместим в него теги позиционирования CSS
<body>
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
<?php mosLoadModules('top');?>
<div id="leftcontent">
<?php mosLoadModules('left');?>
</div>
<div id="centercontent">
<?php mosMainBody(); ?>
</div>
<div id="rightcontent">
<?php mosLoadModules('right');?>
</div>
<?php mosLoadModules('bottom');?>
<?php include_once('includes/footer.php'); ?>
</body>
Итак, мы получили трехколоночную тему Joomla, неплохо для начала. Пример этой темы можно увидеть здесь livesite.compassdesigns.net. Итак, все колонки на своих местах. Изменив размеры окна браузера, вы увидите, что изменится размер только центральной колонки – это называется гибкий CSS слой. Просмотрев страницу через IE6, мы увидим небольшое несоответствие в нижней части левой колонки – не переживайте, IE6 сам – одно большое неосоответствие…
Сайт соответствует стандарту (валиден) ?
Да, мы соблюли все стандарты W3C Standards Compliant CSS Joomla Website. Возможно результат вас не слишком впечатлил, но тогда для чего же наши остальные учебники ?!
