Создание и сопровождение сайтов на CMS SiteEdit

Создание и сопровождение сайтов на CMS SiteEdit  +7(924)666-55-65

    

 

 

 

 

       

Пример настройки «родного» модуля Слайдшоу в программе SiteEdit

Демонстрацию описанного ниже примера создания слайд-шоу смотрите здесь.

 Для начала необходимо подготовить нужные фотографии, сделать так, чтобы размеры всех фото были идентичны. Это возможно в самой стандартной программе, которая есть у всех пользователей Windows Microsoft Office Picture Manager (обрезать лишние участки изображения).

Создаёте на Вашей страничке раздел с модулем Слайд-шоу, даёте ему заголовок (в моём случае это «Демонстрация слайд-шоу»). При выборе модуля двойным щелчком установятся настройки по умолчанию. Включаете режим редактирования. В левой стороне монитора видите папку с Вашим названием.

Наводите курсор на папку, нажимаете правую кнопку мыши и выбираете «добавить запись», вводите Ваш заголовок. Здесь же загружаете первое фото с помощью значка «добавить рисунок». Открывается окошко «вставить рисунок», и тут можно окончательно настроить размер Вашего фото, нажав «изменить». Для этого примера я приготовил все 5 фото с размером 1146 x 640, но для моей конкретной страницы этот размер был большим, поэтому здесь я «изменил» его на 640 x 302. Таким же образом добавляете поочерёдно (не добавляйте все картинки сразу, лучше по одной) остальные фото, изменяете их размер, вводите, при необходимости, текст к каждому изображению в этом же окне. Нажимаете «сохранить».

А теперь уже будем настраивать наше слайд-шоу. Нажимаем на «редактор дизайна», выбираем слева модули – фотоальбомы – слайдшоу. Теперь находим «область альбома» и задаём нужные нам размеры во вкладке CSS «позиционирование» с учётом размеров наших фото. В моём случае «общая ширина» - 700px (фото – 640), «общая высота» - 450px (фото – 302). Размеры должны быть чуть больше наших изображений.

«Область фотографий» выставляете по 100% в ширину и высоту. Потом: «объект» – «рисунок» выставляете точные размеры ширины и высоты (у меня 640 и 302), тип контейнера выбираете «block». Далее можно отредактировать ваш текст в панели «текст».

Осталось отрегулировать «пункт переключателя». Здесь вы настраиваете «тип контейнера», ширину и высоту, положение, выравнивание, смещение вниз, смещение вправо. В моём случае это выглядит вот так. Во вкладке «нумерация» - «фон» можете настроить форму и цвет Ваших переключателей. Вот теперь всё.

Как реально смотрится созданное нами слайд-шоу смотрите здесь (выделил для демонстрации примера отдельную страницу).  

Вверх

Как внедрить презентацию Power Point на страницу своего сайта

Видео по теме здесь.
 

Думаю, перед многими пользователями SiteEdit (и не только этой CMS, но и всех имеющихся на сегодняшний день) такой вопрос рано или поздно вставал. Встал такой вопрос и передо мной. Пробовал, но формат Power Point не является форматом для web-страниц, долго искал выход, и нашёл (в данном случае вполне уместна известная поговорка - "Кто ищет, тот найдёт"). Компания iSpring в 2015 году выпустила бесплатную версию своей программы - iSpring Free 7, которая позволяет без проблем конвертировать обычную для нас презентацию Power Point в формат флеш с раширением файла swf. Скачиваете программу, устанавливаете, открываете с её помощью файл Power Point (предварительно создаёте где-нибудь папку для отконвертируемой презентации), выполняете поочерёдно все действия со скриншотов - всё! Затем созданный файл swf вставляете себе на страницу.

Для примера я взял презентацию Power Point с официального сайта компании Edgestile, исходный размер - 2,69 Мб, сохранённый конвертируемый файл swf - 1,7Мб. Прямоугольничек в нижнем правом углу даёт возможность просматривать презентацию в полноэкранном режиме.

Очерёдность действий следующая:

Вверх

Ещё раз о меню

 

Хочу поделиться с Вами, уважаемые посетители моего сайта, как можно оживить меню, используя новое свойство CSS3. Это свойство называется transition (анимация). Наглядно и подробно об этом свойтве можете прочитать и проверить на сайте CSS Generator (ссылка на этот сайт на странице "Он-лайн сервисы"). Я остановлюсь на практическом его применении. Как это работает, видно на верхнем горизонтальном меню этого конкретного сайта. Оно подойдёт как пользователям Site Edite, так и тем, кто использует любой другой HTML-редактор: Блокнот, NotePad++, Adobe Dreamweaver и т.д. Так как я пользуюсь программой Site Edite v 5.1, начну именно с неё. Останавливаться на том, как именно создать обычное меню не буду, думаю, все пользователи это знают (если нет - напишите, я отвечу). Так вот, когда меню уже готово, и вы хотите его как то оживить, вот здесь и приходит на выручку свойтво CSS - transition.

1. Нажимаете вверху "РЕДАКТОР ДИЗАЙНА" (картинка здесь)

2. Нажимаете чуть правее на кнопку CSS.

3. В редакторе дизайна выбираете строку Меню - Универсальное мею (это в моём случае) - Таблица меню - Пункт меню при наведении курсора.

4. В таблице стилей сразу же выделяется (автоматически) нужная Вам строка.

5. В конце строки делаете следующую запись: tansition:all 1s; linear(задержка) 1s; - и всё. Потом сохраняете CSS, обновляете (зелёные стрелочки в левом верхнем углу), просматриваете результат в Вашем браузере (в самой программе работать не будет, только с помощью браузера), если нужно - корректируете время (у меня это 1 секунда, а можно 1,5s 2s и т.д.). В этой записи указано, что я анимирую всё в течение 1 секунды (all 1s;), запись linear обозначает задержку (можете подобрать сами нужное значение). В моём случае настроено на анимацию всего (формы пункта меню, цвета пункта меню, размера шрифта, цвета шрифта и цвета границы пункта меню), Вы же можете анимировать только то, что Вам необходимо (это и записываете в таблицу стилей), например background, font-color...

Для тех, кто не является пользователем программы Site Edite, в архиве (скачать) находятся 4 файла, два из которых шаблоны html и css, два других, это index.html и style.css. Запустите index.html, посмотрите пример, его код находится в шаблоне html, а запись css смотрите в шаблоне css. 

Вверх

Меню сайта

Хочеться сказать несколько слов о меню отдельно, не в общей статье. Лично для меня меню сайта - важный элемент дизайна,  как бы визитка сайта. Я решил подойти к вопросу творчески, хотелось иметь нестандартное меню. В этом направлении большую помощь, практическую подсказку, оказали мне видеоуроки Артёма Хусаинова (тоже партнёра SiteEdit), которые выложены на youtube в достаточном количестве. К слову сказать, там же выложены около двух сотен отличных видеоуроков по программе Site Edite, практически по любым темам. Имеющееся в этом сайте горизонтальное меню создано чисто програмными средствами, заложенными в настройках. Требуется лишь немного фантазии и упорства. Нужно пробовать и не отчаиваться, если что-то не получается, а продолжать работу, всё у ВАС получится. Если есть желание поэксперементировать с меню - напишите, спросите, всегда отвечу. В нескольких словах опишу процедуру создания такого меню. Прежде всего - это универсальное горизонтальное меню, но настроено через переменную как дополнительное. Просто при настройке дополнительного меню больше возможностей для его редактирования, что дало возможность при наведении курсора на пункт меню изменять его форму, цвет текста, цвет фона и положение. Расшифрую слово "положение". Я имею ввиду, что пункты меню могут быть расположены или в шахматном порядке - второй выше первого, третий как первый и так далее, или по дуге. В данном случае используется настройка "смещение вниз"  редактора дизайна раздела "ДРУГИЕ СТИЛИ". Здесь есть возможность редактировать положение и форму каждого отдельного пункта меню, нужно только найти эти пункты в "других стилях". Как это сделать, очерёдность действий, показаны на скриншотах ниже. Если при выделенном конкретном пункте меню в поле "смещение вниз" поставить цифру в пикселях, на такую высоту от исходной и поднимется наш пункт. Рисунок первый  и второй

Процесс создания нестадартных форм пунктов меню смотрите на этих рисунках: первый, второй. Обратите внимание, что в поле РАДИУС введены два значения. Если будет только одно значение - все четыре угла закругляются одинаково, а два значения следует понимать так: первая цифра показывает закруглене двух углов, левого верхнего и правого нижнего, вторая цифра соответственно показывает закругления двух друх оставшихся углов. Другими словами, здесь есть возможность настраивать радиусы закругления каждого из четырёх углов, если ввести все 4 значения, не забывая к цифре добавлять PX (пиксели). Поэксперементировав немного, можно изменить форму пункта меню по нашему усмотрению, и в результате получим что-то интересное и необычное.

А вот боковое вертикальное меню я попробовал сделать в специализированной программе, пришлось, правда, повозиться, но результат перед вами. Кому интересно - поделюсь.

Вверх

Один из способов преобразования html-шаблона сайта в проект сайта Siteedite

Видео здесь.

Стандартный способ, через загрузку исходного кода и разбивку по слоям и таблицам, в версии программы v 5.1 отсутствует. Поэтому, чтобы потратить минимум усилий на процедуру преобразования, достаточно воспользоваться имеющимися у Вас следующими программами: Notepad++ или Adobe (macromedia) Dreamweaver. Лично я пробовал и создал такой проект с помощью Adobe Dreamweaver CS6.

Для началала скачиваем понравившийся html-шаблон (в моём случае это templatemo_118_block_3d), благо таковых в сети великое множество. Для тех, кто делает свои первые шаги в сайтостроении, научиться работать с шаблонами - приобретение практических навыков, опыта работы. Как правило, такие шаблоны состоят из файлов index.htmlstyle.css и папки images. Скачанный шаблон я открыл в Adobe Dw, здесь удобно просматривать размеры всех нужных отступов, размеры основных блоков сайта.

Файл style.css тоже открывается в этой же программе, и есть возможность просмотреть все необходимые настройки для последуюющего их переноса в проект Siteedite.

Далее можно следовать стандартной процедуре создания нового проекта Siteedite: удалить имеющиеся настройки шаблона, чтобы перед Вами был "чистый лист". Потом заходите в редактор карты дизайна, устанавливаете основные слои и, для удобства, подписываете, устанавливаете в них фунциональные блоки.

Следующий шаг - распределение содержимого папки images по слоям, выравнивание их с учётом данных файла css.

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

Вверх

Создание новых стилей оформления страниц в SiteEdit (14.12.2015)

С помощью этой функции на Вашем сайте, созданном в CMS SiteEdit, Вы легко можете создавать отдельные страницы с совершенно другим оформлением. На этом конкретном сайте я буквально вчера, пользуясь стандартной инструцией от компании EDGESTILE (ссылка на инструкцию), изменил две страницы сайта: Главная и Наши услуги, - можете посмотреть. Изменить действительно можно всё, вплоть до карты дизайна отдельной страницы.

Что я делал.

1. Открыл нужную страницу (Главная, например).

2. В левой стороне вверху выбрал "РЕДАКТИРОВАТЬ", потом "ИЗМЕНИТЬ СТРАНИЦУ".

3. На появившейся странице нажал слово "СТИЛЬ", нашёл внизу справа "ВЫБОР ИНДИВИДУАЛЬНОГО стиля страницы", нажал на "копировать стиль", потом выбрал стиль своей конкретной страницы (в моём случае - home.css) - и всё. Потом вощёл в карту дизайна, удалил из неё левый сайдбар, централью часть контента увелтчил в процентах, полтом уже добавил на страницу нужную картинку.

4. Аналогичные действия произвёл и со страницей "Наши услуги".

Главное во всём этом - не бойтесь, и не спешите, чтобы не перепутать очерёдность действий, - всё у Вас получится!


Вверх