Alek-Tronic
13.10.2006, 15:08
И так, после того, как я не смог получить ответ на заданный мной вопрос, прошло достаточно много времени. Я решил сделать небольшой 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"> | | |*||*| | </span>
// неактивная ссылка, данный код формерует меню, которой вы можете увидеть на сайте, оспользуется optionSplit
ACT = 1
ACT.allWrap = <span class="topmenu-act"> | | |*||*| | </span>
// то же самое, только для активного пункта меню
}
Ну вот в общем то и все, если будут вопросы пишите. Если я где то ошибся прошу профи подправить если что :)
Задача: Сайт, с двумя типами меню и простым контентом. Одно меню относится к классу 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"> | | |*||*| | </span>
// неактивная ссылка, данный код формерует меню, которой вы можете увидеть на сайте, оспользуется optionSplit
ACT = 1
ACT.allWrap = <span class="topmenu-act"> | | |*||*| | </span>
// то же самое, только для активного пункта меню
}
Ну вот в общем то и все, если будут вопросы пишите. Если я где то ошибся прошу профи подправить если что :)