как я делал сайт с Imgmenu

[Alek-Tronic]

И так, после того, как я не смог получить ответ на заданный мной вопрос, прошло достаточно много времени. Я решил сделать небольшой FAQ по тому как я создавал сайт.

Задача: Сайт, с двумя типами меню и простым контентом. Одно меню относится к классу TMENU, а другое к IMGMENU.

Вся трудность состояла с том, что нет полной документации по IMGMENU, пришлось находить и совмещать крупицы, найденные мной в просторах сети. И так, На одной из картинок шаблона должно было располагаться меню, каждый последующий пункт должен был отступать на ровное количество пикселей от начала предыдущего. Выглядить это должно было так:
menuitem
-menuitem
--menuitem
---menuitem
----menuitem
-----menuitem
Ко всему прочему, каждый из пунктов меню должен был отбрасывать тень, которая по мимо этого должна была быть поднята на 7 градусов правой частью. Забавно, но решить стандартными средствами объекта shadow это невозможно, но я нашел решение.

И так, я помещаю ссылку на сайт, который уже функционирует и немного дорабатывается.
http://www.quadratis.ru

А теперь я приведу настройки TYPO3, которые нужны для корректной работы и код самого шаблона.

И так, пошагово начинаем делать настройки
- Charset базы данных должен быть utf-8
- Заходим в InstallTool -> All Configuration, там сыставляем следующие значения:

• image_processing = 1 (то есть включить)
• gdlib = 1
• gdlib_2 = 1
• jpg_quality = (1-100) здесь соответственно вашим графическим файлам
• forceCharset = utf-8

после сего нажимаем кнопку сохранить и переходим дальше. Отмечу, что в Image Processing должны работать все тесты GD library functions, если не работают, проверьте настнойки и активность GDLib или узнайте, стоит ли на сервере это расширение php. То же относится и к ImageMagick.

Предположим что html шаблон уже готов и загружен на сервер.
Начинаем заполнять TS код шаблона:

Constants:
Тут у меня настройки специфических экстеншенов, я не буду здесь их указывать, дабы не путать.

Setup:

config {
spamProtectEmailAddresses = 2
spamProtectEmailAddresses_atSubst = (at)
language = ru
locale_all = ru_RU
renderCharset = utf-8
}

Здесь мы сделали следующее Защищаем наши e-mail адреса от спамеров и выставляем язык по умолчанию, а так же чарсет с которым будет рендерится контент.

Дальше:

page.meta.KEYWORDS.field = keywords
page.meta.DESCRIPTION.field = description

Таким образом мы указываем из каких полей нужно брать и выводить в конечный файл ключевые слова и описание сайта.

Дальше:

page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/путь_к_шаблону/main.css

Здесь создаем объект page и указываем, что он дочерний от объекта PAGE
Так же указываем тип страницы и путь к файлу стилей

Дальше:

page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/путь_к_шаблону/template.htm
workOnSubpart = DOCUMENT
subparts.CONTENT <styles.content.get
subparts.HEADER = TEXT
subparts.HEADER.field = nav_title


<!--код основного меню IMGMENU -->

<!--код верхнего меню TMENU -->

}

Пояснения:
Назначаем объекту page параметр TEMPLATE, указываем что это будет файл и прописываем путь к нему.
Затем "говорим" что начинаем считать шаблон для использования код между метками <!--###DOCUMENT###-->. То есть:

<!--###DOCUMENT###-->

...тут html код шаблона


<!--###DOCUMENT###-->

Все что над или под метками рендериться не будет, можно писать свои комменты и служебную информацию.

subparts.CONTENT <styles.content.get этот параметр указывает на создание метки CONTENT и присвоение ему контента из колонки по умолчанию (NORMAL) для того чтобы это работало нужно открыть полнуя запись шаблона, кликнув по ссылке Click here to edit whole template record и в разделе Include static (from extensions) перенести из Items в Selected SCC Styled Content.

Возвращаемся к полю Setup.
subparts.HEADER = TEXT - указывает на создание метки HEADER и показывает что метка будет иметь текстовое значение

subparts.HEADER.field = nav_title здесь указываем откуда будем брать значение для метки HEADER, в данном случае поле Navigation title

И так, перешли непоредственно к меню. В коде мои комментарии заменяете на ниже преведенный код.

<!--код основного меню IMGMENU -->
После каждой строки оставляю комментарии:

subparts.menu = HMENU
// Создаем метку menu
subparts.menu.maxItems = 8
// Указываем максимальное калочество пунктов
subparts.menu.entryLevel = 0
// Указываем уровень вхождения в меню
subparts.menu.1 = IMGMENU
// Указываем тим меню, в данном случае IMGMENU
subparts.menu.1.imgMapExtras = <AREA SHAPE="rect">
// указываем тип области для ссылки
subparts.menu.1 {
  main.format = jpg
// пормат вывода изображения
  main.XY = [10.w],[10.h]
// назначаем размер изображения по реальной величине элемента 10
  main.10 = IMAGE  
// Указываем что элемент 10 это картинка
  main.10.file = fileadmin/путь_к_шаблону/template_07.jpg 
// ..а это путь к ней
  dWorkArea = 1,195
// Так мы показываем откуда начинается рабочая область для мормирования меню
  fontFile = fileadmin/fonts/tahoma.ttf  
// Если применяем шрифт, то указываем какой и откуда, по умолчанию аналог Arial
  NO.distrib = 4,26  
//Самое интересное, 4 - отступ каждого нового пункта отначала предыдущего (пикселы), 26 - расстояние между пунктами по оси Y
  NO.10 = TEXT
//Указываем тип данных для пунктов меню, в данном случае текст
  NO.10 {
    text.field = nav_title
// Берем текст из поля Navigation title
    fontSize = 13
// Задаем размер шрифта
    fontColor = #B8DBEF
// Его цвет
    offset = 0,0
// Смещение от начала рабочей области
    imgMap.explode = 3,2
//увеличиваем карту ссылки по осям X,Y
    angle = 7
// поворачиваем на 7 градусов
    iterations = 2
// накладываем текст сам на себя для придания эффекта жирного шрифта
    }
 
// тут тоже что и в элементе 10, за исключением поророта и цвета шрифта 
  NO.20 = TEXT
  NO.20 {
    text.field = nav_title
    fontSize = 13
    fontColor = #5b504f
    niceText = 0
    offset = 0,0
    imgMap.explode = 3,2
    
    }

}

Поясню, элемент 10 создавался для организации тени от элементов меню, в то время как элемент 20 как сами элементы меню, делалось так для того, чтобы не было наложения тени на элементы меню.

<!--код верхнего меню TMENU -->

subparts.topmenu = HMENU 
// создаем  метку topmenu
subparts.topmenu.special = directory 
// указываем что меню стороим из элементов дерева первого уровня от рута
subparts.topmenu.special.value = 2
// указываем что корнем меню будет страница с id 2
subparts.topmenu.1 = TMENU
// указываем тип меню - текстовое
subparts.topmenu.1 {
   NO.allWrap = <span class="topmenu-no"> |&nbsp;&#x7C;&nbsp; |*||*| | </span>
// неактивная ссылка, данный код формерует меню, которой вы можете увидеть на сайте, оспользуется optionSplit
   ACT = 1
   ACT.allWrap = <span class="topmenu-act"> |&nbsp;&#x7C;&nbsp; |*||*| | </span>    
// то же самое, только для активного пункта меню
   }

Ну вот в общем то и все, если будут вопросы пишите. Если я где то ошибся прошу профи подправить если что

[void]

респект)
только один момент... стекло на картинке стоит под углом, а надписи горизонтальны.
может быть, лучше сделать основные надписи немного под углом, а тень под большим углом?

[Alek-Tronic]

это фишка, надписи как раз повернут к пользователю, а тень отних соответственно расположению стекла

[salah]

Farm: +1, т.к. фон на иллюстрации строго ограниченный, менюшка статичная. зачем было заморачиваться? а в целом, респект за то что бросился на амбразуру и разжевал.

[Pavel Antonov]

флейм... здесь не дизайнерский форум!
и выяснений отношений по поводу дизайна быть не должно.
если нужно отточить "удар справа" можем открыть отдельно раздел "флейма"... надо?