как я делал сайт с 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 как сами элементы меню, делалось так для того, чтобы не было наложения тени на элементы меню.

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