РАБОТА С НАПОЛНЕНИЕМ
Добавление изображений в запись
Добавление изображений прямо в тексте
Добавление ссылки
Добавление баннера, фото, flash
Реализация Статистики на сайте
Добавление изображений в запись
Создадим новую страницу (F7), Назовем, к примеру, "Фотоальбом", имя файла страницы "foto" (можете написать свое) (Рис. Создание страницы "Фотоальбом"). Включим режим иконок редактирования (F9), нажмем на желтую иконку добавления раздела, на вкладке "Содержание" пишем в заголовке раздела "Фотоальбом", на вкладке "Тип модуля" выберем модуль "Фотоальбом" (Рис. Выбор модуля Фотоальбом).
Рис. Создание страницы "Фотоальбом"
Рис. Выбор модуля "Фотоальбом"
Далее, Чтобы добавить запись (одна запись - одна фотография + описание к ней), достаточно нажать на зеленую иконку с плюсом. Далее работаем в открывшемся текстовом редакторе. В заголовке сверху пишем название фотографии (к примеру: "На курорте"). Обратим внимание, что добавить новую запись можно, нажав правой кнопкой мыши в левой части редактора и выбрав в меню "Добавить запись". В нижней части располагается панель добавление изображения. Перед добавлением фото обратим внимание, что если стоит галочка у пункта "Изменить ширину до:", то фотография будет пропорциональна уменьшена до размеров, которые мы укажем в ячейках. Слева размер маленького изображения (превью), справа размер конечного изображения (фото в подробном описании записи). К примеру, укажем размеры: 100 и 400 (можете поставить свои, по желанию). Фотографию можно добавить, щелкнув на иконку "Загрузить изображение с диска" (на нижней панели).
Рис.Описание Текстового редактора
В открывшемся проводнике выбираем фото, Открываем (Рис. Добавление фотографии в запись). Жмем "Сохранить"
Рис. Добавление фотографии в запись
В программе существует функция быстрого добавления ряда фотографий.
Для этого жмем на иконку фотоальбома "редактировать раздел". В текстовом редакторе, в левой части редактора жмем правой кнопкой мыши, и в меню выбираем "Добавить изображения". В открывшемся проводнике выбираем изображения (выделяем несколько фотографий, используя кнопку Ctrl), жмем "Открыть".
Рис. Добавление сразу нескольких фотографий
Видим, как в редакторе формируются несколько записей (размеры фотографий будут такими, какие мы указали изначально в нижней панели редактора). При желании можем дать заголовки записям. Затем жмем кнопку "Сохранить" в редакторе.
Совет: Добавляя фотографии, постарайтесь подобрать такие, чтобы их пропорции совпадали, иначе визуально общая картинка фотоальбома будет смотреться не так красиво. К примеру, не желательно добавлять рядом горизонтальные и вертикальные изображения.
Вверх
Рис. Создание страницы "Фотоальбом"
Рис. Выбор модуля "Фотоальбом"
Далее, Чтобы добавить запись (одна запись - одна фотография + описание к ней), достаточно нажать на зеленую иконку с плюсом. Далее работаем в открывшемся текстовом редакторе. В заголовке сверху пишем название фотографии (к примеру: "На курорте"). Обратим внимание, что добавить новую запись можно, нажав правой кнопкой мыши в левой части редактора и выбрав в меню "Добавить запись". В нижней части располагается панель добавление изображения. Перед добавлением фото обратим внимание, что если стоит галочка у пункта "Изменить ширину до:", то фотография будет пропорциональна уменьшена до размеров, которые мы укажем в ячейках. Слева размер маленького изображения (превью), справа размер конечного изображения (фото в подробном описании записи). К примеру, укажем размеры: 100 и 400 (можете поставить свои, по желанию). Фотографию можно добавить, щелкнув на иконку "Загрузить изображение с диска" (на нижней панели).
Рис.Описание Текстового редактора
В открывшемся проводнике выбираем фото, Открываем (Рис. Добавление фотографии в запись). Жмем "Сохранить"
Рис. Добавление фотографии в запись
В программе существует функция быстрого добавления ряда фотографий.
Для этого жмем на иконку фотоальбома "редактировать раздел". В текстовом редакторе, в левой части редактора жмем правой кнопкой мыши, и в меню выбираем "Добавить изображения". В открывшемся проводнике выбираем изображения (выделяем несколько фотографий, используя кнопку Ctrl), жмем "Открыть".
Рис. Добавление сразу нескольких фотографий
Видим, как в редакторе формируются несколько записей (размеры фотографий будут такими, какие мы указали изначально в нижней панели редактора). При желании можем дать заголовки записям. Затем жмем кнопку "Сохранить" в редакторе.
Совет: Добавляя фотографии, постарайтесь подобрать такие, чтобы их пропорции совпадали, иначе визуально общая картинка фотоальбома будет смотреться не так красиво. К примеру, не желательно добавлять рядом горизонтальные и вертикальные изображения.
Добавление изображений прямо в тексте
Откроем любую страницу в проекте. Добавим с помощью желтой иконки новый раздел, в открывшемся редакторе на вкладке "Тип модуля" выберем модуль "Текст и рисунок". Нажмем "Сохранить". Нажмем на иконку "Добавить новую запись". Находясь в текстовом редакторе, скопируем и внесем текст из Word или другого текстового редактора.
Совет: Если копируете текст из Microsoft Word, работайте в режиме HTML, т.к. В этом режиме весь "мусор" (лишний код) обрезается. Остается только небольшое редактирование текста.
Допустим у нас есть уже фотография, добавленная в запись стандартными способами - через нижнюю панель добавления изображений. А, поскольку, к одной записи больше одной фотографии невозможно прикрепить, то воспользуемся прямым добавлением изображения в текст. Поставим курсор в то место, где будет фотография, допустим в начало перед текстом, затем нажмем на иконку сверху "Добавить рисунок", В открывшемся окне "Вставить рисунок" жмем на иконку "загрузить рисунок с диска", в открывшемся проводнике выбираем подготовленную фотографию (уже заданных размеров), жмем "Открыть".
Рис. Добавление изображения непосредственно в текст
Фотографии можно задать некоторые свойства, в зависимости от задач создателя сайта. В нашем случае нам нужно, чтобы текст обтекал фотографию по краям. Для этого перейдем в режим "Текст" в редакторе, затем нажмем правой кнопкой мыши на рисунок, и в контекстном меню выберем пункт "Рисунок".
Рис. Свойства вставленного рисунка
В открывшемся окне "Вставить рисунок" переходим на вкладку "Отображение". У пункта "Выравнивание" ставим параметр "Left" (стыковка к левому краю), у пункта "Гориз. отступ" ставим значение "15" (примерно). Жмем "Сохранить"
Рис. Назначение свойств вставленному рисунку
Теперь мы видим, что текст обтекает рисунок по правому краю.
Плюс импорта изображений прямо в текст в том, что таких изображений можно добавить сколь угодно, расположить каждое индивидуально, а также назначить отдельные изображения ссылкой. Учтите, что такие изображения уже нельзя отредактировать с помощью дерева дизайна. Каждое редактируется отдельно, непосредственно в текстовом редакторе.
Вверх
Совет: Если копируете текст из Microsoft Word, работайте в режиме HTML, т.к. В этом режиме весь "мусор" (лишний код) обрезается. Остается только небольшое редактирование текста.
Допустим у нас есть уже фотография, добавленная в запись стандартными способами - через нижнюю панель добавления изображений. А, поскольку, к одной записи больше одной фотографии невозможно прикрепить, то воспользуемся прямым добавлением изображения в текст. Поставим курсор в то место, где будет фотография, допустим в начало перед текстом, затем нажмем на иконку сверху "Добавить рисунок", В открывшемся окне "Вставить рисунок" жмем на иконку "загрузить рисунок с диска", в открывшемся проводнике выбираем подготовленную фотографию (уже заданных размеров), жмем "Открыть".
Рис. Добавление изображения непосредственно в текст
Фотографии можно задать некоторые свойства, в зависимости от задач создателя сайта. В нашем случае нам нужно, чтобы текст обтекал фотографию по краям. Для этого перейдем в режим "Текст" в редакторе, затем нажмем правой кнопкой мыши на рисунок, и в контекстном меню выберем пункт "Рисунок".
Рис. Свойства вставленного рисунка
В открывшемся окне "Вставить рисунок" переходим на вкладку "Отображение". У пункта "Выравнивание" ставим параметр "Left" (стыковка к левому краю), у пункта "Гориз. отступ" ставим значение "15" (примерно). Жмем "Сохранить"
Рис. Назначение свойств вставленному рисунку
Теперь мы видим, что текст обтекает рисунок по правому краю.
Плюс импорта изображений прямо в текст в том, что таких изображений можно добавить сколь угодно, расположить каждое индивидуально, а также назначить отдельные изображения ссылкой. Учтите, что такие изображения уже нельзя отредактировать с помощью дерева дизайна. Каждое редактируется отдельно, непосредственно в текстовом редакторе.
Добавление ссылки
Давайте попробуем сделать изображение ссылкой. Зайдем в запись, которая имеет добавленное изображение непосредственно в текст. Перейдем в режим "Текст", выделим мышкой изображение, нажмем сверху на иконку "гиперссылка". В открывшемся окне "Прикрепить страницу или URL" выберите страницу из списка, на которую должна ссылаться фотография при нажатии пользователя на нее, либо введите имя сайта напротив пункта "URL".
Рис. Добавление ссылки к картинке
Тоже самое вы можете сделать с текстом. Зайдя в текстовый редактор, выделим часть текста или слово мышкой, затем нажмем на иконку сверху "гиперссылка", и в открывшемся окне выберем страницу или сайт, на который она будет ссылаться.
Рис. Добавление ссылки к картинке
Вверх
Рис. Добавление ссылки к картинке
Тоже самое вы можете сделать с текстом. Зайдя в текстовый редактор, выделим часть текста или слово мышкой, затем нажмем на иконку сверху "гиперссылка", и в открывшемся окне выберем страницу или сайт, на который она будет ссылаться.
Рис. Добавление ссылки к картинке
Добавление баннера, фото, flash
Для того, чтобы вставить рекламный материал, баннер, или просто фото, flash, Мы должны определить, в каком месте сайта он будет располагаться. Для этого нам нужно поставить контент в нужную колонку или ячейку, отведенную в таблице дизайна.
Разберем на примере уже созданного сайта. Зайдем в карту дизайна (Ctrl+F3), либо с помощью верхнего меню: "Оформление\Редактирование карты дизайна". Проверим, если ли контент. Если нет, то нажмем правой кнопкой мыши и поставим "content-1" в левую колонку, чуть ниже меню. Если мы предполагаем, что информация будет на всех страницах в этом блоке, то ставим один из глобальных контентов. Если информация на каждой странице должна быть разная, то - обычный контент.
Рис. Вставка контента-1 в карту дизайна
Сохраняем изменения в карте дизайна, выходим в обычный режим. Включаем режим иконок редактирования (F9), жмем на желтую иконку добавления раздела, в том месте, где добавили контент. В открывшемся окне на вкладке "Тип модуля" выбираем модуль "Текст и рисунок" (хотя может быть и другой, похожий). Жмем "Сохранить"
Рис. Добавление раздела "Текст и рисунок"
Жмем на зеленую иконку добавления записи у добавленного раздела, в текстовом редакторе на вкладке Краткий текст нам нужно внести необходимую нам информацию (изображение, flash, текст). Текст вносим обычным образом. Изображение добавляем с помощью иконки сверху "Добавить рисунок". Flash добавляется точно также, как и обычная фотография.
Рис. Место для рекламного баннера
Давайте добавим FLASH баннер. Представим, что у нас уже заготовлен файл с расширением .swf. В текстовом редакторе жмем на иконку "Добавить рисунок", В открывшемся окне жмем на иконку "Загрузить рисунок с диска", В проводнике выбираем нужный нам файл (в нашем случае: banner_art2_140x200.swf). Жмем "Открыть".
Рис. Добавление flash баннера
Заметим, что при создании файла swf мы прописали размеры flash баннера в имени файла, что упростит в дальнейшем работу. Теперь в окне "Вставить рисунок" появился flash баннер.
ВАЖНО!! Указать размеры (Ширина, Высота) flash в правой части окна "Вставить рисунок". Изначально они 100х100. Указываем "140" и "200". Если не указать размеры, flash ужмется до маленьких размеров, что даст искажение графики и неразборчивую информацию.
Далее Жмем "Сохранить". При необходимости добавим текст в редакторе. Далее тоже жмем "Сохранить"
Рис. Прописывание размеров flash
Для того чтобы flash баннер не прилипал к краям других блоков, зададим небольшие отступы у блока "Content-1" на вкладке Позиционирование, включив дерево дизайна (F4). Сверху укажем отступ - 20, Слева - 10, Справа - 20.
Рис. Позиционирование контента-1
Вверх
Разберем на примере уже созданного сайта. Зайдем в карту дизайна (Ctrl+F3), либо с помощью верхнего меню: "Оформление\Редактирование карты дизайна". Проверим, если ли контент. Если нет, то нажмем правой кнопкой мыши и поставим "content-1" в левую колонку, чуть ниже меню. Если мы предполагаем, что информация будет на всех страницах в этом блоке, то ставим один из глобальных контентов. Если информация на каждой странице должна быть разная, то - обычный контент.
Рис. Вставка контента-1 в карту дизайна
Сохраняем изменения в карте дизайна, выходим в обычный режим. Включаем режим иконок редактирования (F9), жмем на желтую иконку добавления раздела, в том месте, где добавили контент. В открывшемся окне на вкладке "Тип модуля" выбираем модуль "Текст и рисунок" (хотя может быть и другой, похожий). Жмем "Сохранить"
Рис. Добавление раздела "Текст и рисунок"
Жмем на зеленую иконку добавления записи у добавленного раздела, в текстовом редакторе на вкладке Краткий текст нам нужно внести необходимую нам информацию (изображение, flash, текст). Текст вносим обычным образом. Изображение добавляем с помощью иконки сверху "Добавить рисунок". Flash добавляется точно также, как и обычная фотография.
Рис. Место для рекламного баннера
Давайте добавим FLASH баннер. Представим, что у нас уже заготовлен файл с расширением .swf. В текстовом редакторе жмем на иконку "Добавить рисунок", В открывшемся окне жмем на иконку "Загрузить рисунок с диска", В проводнике выбираем нужный нам файл (в нашем случае: banner_art2_140x200.swf). Жмем "Открыть".
Рис. Добавление flash баннера
Заметим, что при создании файла swf мы прописали размеры flash баннера в имени файла, что упростит в дальнейшем работу. Теперь в окне "Вставить рисунок" появился flash баннер.
ВАЖНО!! Указать размеры (Ширина, Высота) flash в правой части окна "Вставить рисунок". Изначально они 100х100. Указываем "140" и "200". Если не указать размеры, flash ужмется до маленьких размеров, что даст искажение графики и неразборчивую информацию.
Далее Жмем "Сохранить". При необходимости добавим текст в редакторе. Далее тоже жмем "Сохранить"
Рис. Прописывание размеров flash
Для того чтобы flash баннер не прилипал к краям других блоков, зададим небольшие отступы у блока "Content-1" на вкладке Позиционирование, включив дерево дизайна (F4). Сверху укажем отступ - 20, Слева - 10, Справа - 20.
Рис. Позиционирование контента-1
Реализация Статистики на сайте
Чтобы реализовать статистику у себя на сайте, нам нужно добавить в карту дизайна блок Статистики. Для этого зайдем:
Оформление\Редактирование карты дизайна
Выберем колонку или ячейку в таблице, где будет располагаться блок, нажмем правой кнопкой мыши, и в контекстном меню выберем "Вставить блок Статистики"
Рис. Добавление блока Статистики
Поскольку Блок Статистики является переменной, он не будет отображаться в дереве дизайна. Для того, чтобы блок можно Позиционировать в дальнейшем, нам нужно заключить его в слой. Щелкнем еще раз правой кнопкой мыши и выберем "Вставить слой". Стерем слова "Новый слой", раздвинем вручную границы слоя до нужных нам размером (но не слишком много, иначе слой может повлиять на расположение других блоков). После перенесем мышкой блок Статистики в слой.
Рис. Заключение блока Статистики в Слой
Поскольку каждый пользователь выбирает, какая именно статистика будет на его сайте, какой он доверяет, то блок Статистики на первоначальном этапе пустой. Статистику пользователь заказывает сам на том ресурсе, которому он доверяет. Пропустим моменты, когда пользователь выбирает, и представим, что нам на почту уже выслан код Статистики. Находясь в Карте дизайна, щелкнем правой кнопкой мыши на блок статистики, и выберем "Редактировать блок". В открывшемся окне нужно вставить код, который вам будет выслан ресурсом, на котором вы заказали Статистику. В нашем случае статистика от mail. Жмем "Сохранить" в редакторе.
Рис. Добавление кода в блок статистики
Сохраняем изменения в карте дизайна и выходим в обычный режим. Теперь зайдем в дерево дизайна (F4) Найдем ту колонку, в которой располагается блок статистики, и зададим Отступы у слоя "div192" на вкладке "Позиционирование" : Сверху - 20, Слева - 20 (Название слоя у вас естественно будет другим).
Рис. Позиционирование блока Статистики
Заметим, что в программе вы можете наблюдать пустоту вместо блока статистики, либо статическую картинку. Рабочая статистика будет только на сайте, когда вы выгрузите проект в Интернет.
Вверх
Оформление\Редактирование карты дизайна
Выберем колонку или ячейку в таблице, где будет располагаться блок, нажмем правой кнопкой мыши, и в контекстном меню выберем "Вставить блок Статистики"
Рис. Добавление блока Статистики
Поскольку Блок Статистики является переменной, он не будет отображаться в дереве дизайна. Для того, чтобы блок можно Позиционировать в дальнейшем, нам нужно заключить его в слой. Щелкнем еще раз правой кнопкой мыши и выберем "Вставить слой". Стерем слова "Новый слой", раздвинем вручную границы слоя до нужных нам размером (но не слишком много, иначе слой может повлиять на расположение других блоков). После перенесем мышкой блок Статистики в слой.
Рис. Заключение блока Статистики в Слой
Поскольку каждый пользователь выбирает, какая именно статистика будет на его сайте, какой он доверяет, то блок Статистики на первоначальном этапе пустой. Статистику пользователь заказывает сам на том ресурсе, которому он доверяет. Пропустим моменты, когда пользователь выбирает, и представим, что нам на почту уже выслан код Статистики. Находясь в Карте дизайна, щелкнем правой кнопкой мыши на блок статистики, и выберем "Редактировать блок". В открывшемся окне нужно вставить код, который вам будет выслан ресурсом, на котором вы заказали Статистику. В нашем случае статистика от mail. Жмем "Сохранить" в редакторе.
Рис. Добавление кода в блок статистики
Сохраняем изменения в карте дизайна и выходим в обычный режим. Теперь зайдем в дерево дизайна (F4) Найдем ту колонку, в которой располагается блок статистики, и зададим Отступы у слоя "div192" на вкладке "Позиционирование" : Сверху - 20, Слева - 20 (Название слоя у вас естественно будет другим).
Рис. Позиционирование блока Статистики
Заметим, что в программе вы можете наблюдать пустоту вместо блока статистики, либо статическую картинку. Рабочая статистика будет только на сайте, когда вы выгрузите проект в Интернет.