MaxSite.org 11 лет
Блог вебмастера о сайтостроении
Внимание! Данная запись отмечена как устаревшая и может содержать неточную или неактуальную информацию!

Шаблоны для новичков. Урок 13. Лого и меню с поиском

MaxSite CMS / Создание шаблонов (версии 0.8x)Просмотров: 18631 (269)

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

Второй компонент у нас занимает всю ширину браузера, поэтому его структура по сути повторит структуру первого компонента.

Напомню, что второй компонент это файл header-logo.php. В default-шаблоне уже есть похожий компонент (logo-links.php). Мы скопируем этот код в свой компонент.

<div class="header-logo">
    <div class="wrap">
        <div class="left r1">
            <?php
            $logo = getinfo('stylesheet_url') . 'images/logos/' . mso_get_option('default_header_logo', 'templates', 'logo01.png');
            
            if (!is_type('home')) echo '<a href="' . getinfo('siteurl') . '">';
                
            echo '<img class="left" src="' . $logo . '" alt="' . getinfo('name_site') . '" title="' . getinfo('name_site') . '">';
            
            if (!is_type('home')) echo '</a>';
            echo '
                <div class="name_site">' . getinfo('name_site') . '</div>
                <div class="description_site">' . getinfo('description_site') . '</div>';
            ?>
        
        </div><!-- div class=r1 -->
        
        <div class="right r2">
            <?php if (function_exists('ushka')) echo ushka('header-logo2'); ?>
        </div><!-- div class=r2 -->
        
        <div class="clearfix"></div>
        
    </div>
</div>

HTML-структура «стандартная»: общий блок, в нём wrap-блок, в нем уже два плавающих блока div.r1 и div.r2.

Для вывода данных используем PHP. Переменная $logoформируется из пути шаблона к изображениям с лого и опции default_header_logo, в которой содержится имя файла логотипа. Опция уже определена в options-template.ini, поэтому задавать её отдельно не нужно.

Далее формируем тэг IMG, причем, если это не главная страница, то обрамляем изображение в ссылку на главную страницу сайта.

После выводим название сайта и его описание. Опции задаются в админ-панели, поэтому опять же, нам ничего делать не потребуется.

Блок div.r2 содержит только код вывода ушки.

Для оформления компонента в CSS нужно будет только указать ширину первого блока.

div.header-logo {
    div.wrap {
        div.r1 {
            width: 50%;
        }
    
        div.r2 {
    
        }
    }
}

Для первого я задал ширину 50% и сделал пустую заготовку для второго. На текущем этапе я просто не знаю какая реально потребуется ширина.

Первый и второй компоненты в шапке

В качестве цветового решения компонента я добавил темно-синий фон и светлые буквы. Следует отметить, что default-шаблоне (style-all.css, mso-style.less) уже есть стили для

  • div.logo-links
  • div.name_site
  • div.description_site

Поэтому на текущем этапе они нас устраивают. Остается только цвет.

div.header-logo {
    background: #193C70;
    color: #EBEBEB;
    
    div.wrap {
        div.r1 {
            width: 50%;
        }
    
        div.r2 {
    
        }
    }
}

Добавили фон компонента

«Облагородим» фон

Сейчас я расскажу о приёмах, которые позволяют немного разнообразить фон. Самый простой способ - это добавить градацию. Указывается начальный цвет и конечный. В less-хелперах есть микс .background_gradient().

div.header-logo {
    .background_gradient(#193C70, #214A88);
...

Пример градиента

Хелпер .background_gradient() формирует стиль CSS3 background-image со всеми кросбраузерными префиксами, а для IE использует filter.

Второй способ - это использовать прозрачную текстуру. То есть указывается и фон блока и его текстура. Создается видимость «пупырчатости», «решетки», «линейки» и т.п. Здесь гланое следить за тем, чтобы текстура была в формате PNG24. Именно он обеспечивает корректную прозрачность.

Можно сделать такую текстуру самостоятельно, но я обычно ищу уже готовые файлы в Интернете. Вот пример такого совмещения:

div.header-logo {
    background: #193C70 url("../images/patterns/pattern1.png");
...

Пример наложения прозрачной текстуры

Ну и последний вариант - обычная фоновая картинка. В default-шаблоне в images/patterns уже есть примеры таких фонов (они используются в css-профилях). Для примера я подключил файл bg-gray.png.

Пример фона

Какой именно вариант использовать, зависит от дизайна сайта.

Третий компонент: меню + поиск

Третий компонент строится по той же HTML-схеме, что и первые два. Файл header-menu.php

<div class="header-menu">
    <div class="wrap">
        <div class="left r1">
            меню
        </div><!-- div class=r1 -->
        
        <div class="right r2">
            поиск
        </div><!-- div class=r2 -->
 
        <div class="clearfix"></div>
    </div>
</div>

Этот компонент у нас будет содержать главное меню, которое полностью готово в компоненте menu.php. Следовательно, всё, что нам нужно, так это подключить файл в div.r1.

<div class="header-menu">
    <div class="wrap">
        <div class="left r1">
            <?php require('menu.php') ?>
        </div><!-- div class=r1 -->
...

С формой поиска чуть сложней, поскольку у нас нет её заготовки. Точнее она есть в плагине search_form. Я привожу сразу готовый код.

...
        <div class="right r2">
            
            <form class="fform" name="f_search" method="get" onsubmit="location.href='<?= getinfo('siteurl') ?>search/' + encodeURIComponent(this.s.value).replace(/%20/g, '+'); return false;">
            <p>
            <span><input type="text" name="s" value="" placeholder="Что ищем?" required></span>
            <span class="fsubmit"><input type="submit" name="Submit" value="Поиск"></span>
            <p>
            </form>
    
        </div><!-- div class=r2 -->
...

Отмечу лишь несколько моментов. Прежде всего - форма имеет класс fform, а ячейка span.fsubmit специально для кнопки submit. Это предопределенные классы из default-шаблона, благодаря которому форма верстается по специальным правилам (это нововведение MaxSite CMS в 0.645 (см. mso-forms.less)). Для полей мы используем placeholder (подсказка) и required (обязательное поле) - это из HTML5.

Компонент меню + поиск

Теперь очередь CSS-стилей. Для начала определимся с шириной блоков. Пусть поиск занимает 270px, как и сайдбар. Для ячейки кнопки зададим ширину 60px, остальное будет сделано автоматом (в этом и есть особенность использования form.fform).

div.header-menu {
 
    background: #15325D;
    
    div.wrap {
        div.r1 {
            width: 690px;
        }
    
        div.r2 {
            width: 270px;
            
            form.fform {
                span.fsubmit {
                    width: 60px;
                    input {width: 100%}
                }
            }
        }
    }
}

Три компонента шапки

Обратите внимание, что фон компонента немного отличается от фона меню. Это очевидно, ведь для меню мы не задали стили.

За меню отвечает секция МЕНЮ ВЫПАДАЮЩЕЕ. В нем указал default-фон, просто его убираем. В остальном меню особо менять не требуется.

// МЕНЮ ВЫПАДАЮЩЕЕ
div.MainMenu {
    font-size: 10pt; // шрифт 
}
 
// верхние пункты меню
ul.menu li {
    a {margin-right: 8px; color: white;} // верхний пункт
    a:hover {background: #3A4356; color: white;} // при наведении
    &.selected a {background: #374973;} // выделенный
}

Последний штрих - выровнять форму поиска по высоте меню. У нас меню стандартное - 35px, следовательно для тэга P зададим нулевые оступы поля и укажем line-height: 35px. Браузер автоматом разместит форму по центру.

...
form.fform {
                
    p {
        line-height: 35px;
        padding: 0;
    }
...

Форма по высоте меню

Шаблон для загрузки

Для экспериментов вы можете загрузить текущий файл шаблона 29.

««« Урок 14 | Урок 12 »»»

Комментариев: 7 RSS

1Joomla22-03-2012 14:50

Классно, с помощью css можно еще фотографии переместить скажем на конец заголовка а вместо них какой нибудь графический обьект(небольшая земля и косая пальма)

2blogrole22-03-2012 18:16

Понравился очень шаблон. Но знания моего css, к сожалению, очень малы (

3Apokal28-03-2012 07:11

Мои знания css почти на нуле, но всё же мне это не помешало разобраться в данных уроках, они ну очень доходчиво расписаны :)

4Apokal28-03-2012 07:14

Когда же будут следующие уроки? Скорее бы уже!;-)

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

РЕКЛАМА
Широкоформатная печать Краснодар в рекламном агентстве "Регион Медиа". |

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.