Описание среды разработки сайтов Jimdo

На выбор предлагается множество шаблонов оформления сайтов (рисунок 1.4).

Рис. 1.4.

При создании сайта, Jimdo предлагает выбрать Шаблон. Когда сайт уже создан, его Шаблон можно поменять. Нужно выбрать справа раздел меню «Шаблоны» (пиктограмма страница), откроется окно со списком шаблонов. Лучше выбирать шаблоны списком, а не таблицей. В списке видно, что можно изменить в шаблоне. Выбранный шаблон отмечается синей рамкой.

Раздел Шаблоны позволяет выбрать шаблоны для платных и бесплатных тарифов, шаблоны собственные и особые. А также настроить выбранный шаблон. Всего 244 Шаблона.

Для выбора внешнего вида, шрифта, цвета необходимо на панели инструментов выбрать вкладку «Стиль» (рисунок 1.5).

Рис. 1.5.

Возможность редактирования шрифта текстов, заголовков, ссылок, разделителей. Так же изменение цвета фона сайта, установка слайд шоу на фон сайта.

Свойства шаблона сайта приведены на рисунке 1.6.

Рисунок 1.6. Управление расположением.

Возможность выравнивания страниц сайта, установки отступов, толщины и цвета рамки отображены на рисунке 1.7.

Рис. 1.7.

Интерфейс Jimdo интуитивно понятен. Он простой и современный, что приобретает еще большее значение в сочетании с неплохим набором возможностей, предоставляемых системой.

Помимо удобного режима визуального редактирования сайта, чем-то напоминающего режим конструктора в uCoz, Jimdo позволяет работать с HTML и CSS-кодом, благодаря чему его сразу можно причислить к тем немногочисленным конструкторам, которые ориентированы не только на новичков. Возможность редактирования CSS распространяется и на мобильную версию сайта.

Более того, количества настроек, имеющихся в Jimdo, достаточно для детального управления любым сайтом — интернет-магазином, блогом или личной страницей. Тем более что разобраться во всех настройках в системе можно действительно просто.

Для вставки виджета, необходимо выбрать модуль «Widget / HTML», в появившемся окне ввести код интересуемого виджета и нажать кнопку «Сохранить (рисунок 1.8).

Рис. 1.8.

Настройка стилей.

Cтиль предоставляет большие возможности настроек выбранного шаблона. Помимо выбора предлагаемых шаблонов, можно перестроить выбранный шаблон в соответствии с дизайном или фирменным стилем сайта.

Рисунок 1.9. Настройка стилей.

Стиль позволяет настроить:

Формат шрифта;

Собственный фон;

Изображение фона;

образец фона;

предложенные цвета — 30 шт.;

собственный цвет;

дизайн блога.

Количество и возможности настроек зависят от заложенных при создании возможностей выбранного Шаблона. Возможности для профессионалов собственного шаблона HTML CSS практически неограниченны.

Настройки Jimdo.

Это самый большой раздел меню, который состоит из множества настроек, сгруппированных в подразделы: Пользователь, Веб — страница, Мобильная версия, Управление доменами и e-mail адресами, Настройка приложений, О jimdo (рисунок 1.10).

Рисунок 1.10. Настройки Jimdo.

Настройки пользователя включают в себя:

Пароль;

Свой Email-адрес;

Личные данные;

Фото для профиля;

Язык;

Удалить аккаунт.

В настройки веб-страницы входят:

Название сайта (Title);

Ссылки в подвале сайта;

Спрятать ссылку входа;

Защита страниц паролем;

Память;

Защита данных;

Рассылка новостей;

Кнопка Наверх;

Иконка странички;

Сообщ. из формуляров;

Обработать head.

Настройки мобильной версии сайта состоят из:

Мобильная версия;

Мобильная визитка;

Собственный шаблон (CSS).

Настройка доменов и Email-адресов.

Email-адреса;

Email-перенаправления;

Домены.

Настройка приложений.

Dropbox;

QR-коды;

Google Analytics;

Twitter.

О Jimdo.

О компании;

Новости Jimdo;

Допольнительные модули;

Рекомендовать Jimdo.

При выборе настройки открывается окно, где можно настроить эту функцию. Например, в настройке Мобильная версия можно включить отображение сайта на мобильных устройствах и выбрать Мобильный шаблон.

Полный функционал раздела SEO (оптимизации сайта для поисковых машин), полный комплекс мероприятий для продвижения сайта к высоким позициям выдачи в системах поиска доступны только для платных пакетов.

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

В Jimdo имеется подробное описание, как работать с сайтом. Все инструкции сгруппированы по разделам (рисунок 1.11).

Рисунок 1.11. Помощь Jimdo.

В этих разделах есть ответы на все вопросы о Jimdo:

• — Первые шаги;
• — Оформление;
• — Блог;
• — Интернет-магазин;
• — Домены;
• — E-mail.

Редактирование шапки сайта При наведении курсора на шапку сайта, раскрывается серая горизонтальная ссылка «Изменить шапку сайта». Раскрывшееся по ссылке окно расположено ниже шапки сайта, чтобы сразу были видны все изменения. При изменении шапки сайта доступны следующие опции:

• — Галерея;
• — Собственное изображение;
• — Образец;
• — Изменить шапку;
• — Заголовок;
• — Логотип.

Рис. 1.12.

Заголовок это название сайта или его слоган. Его можно отформатировать любым Google Fonts. Поэтому выбор достаточно широк. Можно настроить размер шрифта, а также его позицию по вертикали и горизонтали.

Создание страницы сайта Создание страницы в Jimdo связано с навигационным меню. Поэтому вначале нужно навести курсор в район навигационного меню. Появится горизонтальное окно «Редактировать навигационное меню» (рисунок 1.13).

Рис. 1.13.

При нажатии на ссылку «Редактировать навигационное меню» откроется окно создания страниц (рисунок 1.14). Нужно ввести имя страницы. Стрелками вверх — вниз можно перемещать страницу, изменяя ее порядок в меню. Стрелками вправо — влево можно перемещать страницу, изменяя ее порядок вложенности. Создавая корневые, родительские страницы и их подстраницы.

Рисунок 1.14. Редактирование навигационного меню.

Страница после ее создания совершенно пуста. Jimdo при входе на вновь созданную страницу предлагает добавить новый элемент (рисунок 1.15).

Рисунок 1.15. Добавление нового элемента.

При нажатии кнопки «Добавить», Jimdo предлагает список элементов, которые можно добавить на страницу (рисунок 1.16). При формировании содержимого страницы нужно будет добавить несколько элементов. Затем некоторые из них отредактировать.

Рисунок 1.16. Элементы Jimdo.

Список элементов конструктора сайтов Jimdo:

• — Заголовок;
• — Изображение;
• — Текст;
• — Изображение в тексте;
• — Колонки;
• — Интервал;
• — Таблица;
• — Галерея;
• — Загрузка файлов;
• — Формуляр;
• — Разделитель;
• — Гостевая книга;
• — Видео;
• — Flickr;
• — Карты Google;
• — Widget / HTML;
• — Товар;
• — Каталог товаров;
• — RSS Feed;
• — Twitter;
• — Facebook;
• — Google+;
• — Поделиться;
• — Дополнительные элементы.

Вставка заголовка При нажатии на кнопку элемнта на странице открывается контейнер с параметрами его вставки. И кнопкой Сохранить. Например контейнер заголовка имеет:

• — Поле текста заголовка
• — Уровень заголовка 1, 2, 3

Рисунок 1.17. Заголовок

Вверху слева любого контейнера элемента есть кнопки управления элементом:

• — Стрелка Вверх;
• — Стрелка Вниз;
• — Корзина удалить;
• — Копировать;
• — Создать новый.

Вставка текста При нажатии на «создать новый элемент» появляется список выбора элементов. Кнопкой + можно вставить другой элемент, идущий вслед за Новым текстом. Если Новый текст еще не сохранен, параметры его настройки свертываются под заголовком. Чтобы элемент Новый текст был опубликован на странице, после форматирования его нужно сохранить. (рисунок 1.18).

Рис. 1.18.

Чтобы вставить любой новый элемент, нужно войти в режим редактирования предыдущего элемента на странице. Для этого нужно просто кликнуть на этом элементе и нажать «новый элемент». Тогда новый элемент вставится на страницу сразу после редактируемого элемента.

Редактирование изображения

Вставленный на страницу элемент можно в любой момент отредактировать. Для этого нужно нажать левой кнопкой мыши на этом элементе. Внизу элемента раскроется окно редактирования. Например редактирование элемента «изображение». (рисунок 1.19).

Рисунок 1.19. Вставка изображения.

У каждого элемента свои параметры редактирования. У изображения можно отредактировать:

• — Размер;
• — Выравнивание;
• — Повернуть;
• — Увеличиваемый;
• — Подзаголовок;
• — Ссылка;
• — Альтернативный текст;
• — Pinterest.

Для загрузки изображения можно выбрать его на своем компьютере или указать на Dropbox.

2. Практическая часть