Weebly

Регистрация на сайте Weebly проходит в несколько шагов.

1. Сперва вы выбираете свой логин, вводите пароль и e-mail.

2. Затем выбираете название и тематику сайта.

3. Регистрируете домен или субдомен va-sya.weebly.com. К сожалению, минимальное количество символов в логине и субдомене - 6.

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

В верхнем фрейме четыре основных вкладки: Elements (элементы страницы, которые можно добавить на сайт), Design (шаблоны с разными дизайнами сайта), Pages (управление страницами сайта - главная, контакт, гостевая и т.п.) и Settings (настройки аккаунта и сайта). Сейчас я по очереди разберу содержимое каждой вкладки.

Elements / Элементы

Все элементы сайта представлены в виде иконок с описанием. Чтобы добавить элемент на сайт, нужно просто мышкой перетащить соответственную иконку в нижний фрейм. Таких иконок очень много, поэтому их разделили на несколько подгрупп.

Basic / Основные элементы, которые всегда должны быть под рукой

Paragraph with Title - текст с заголовком

Paragraph with Picture - текст, обтекающий картинку

Picture - просто картинка

Title - просто заголовок

Paragraph - просто текст

Video Pro - можно закачать на сайт видео, которое будет проигрываться через обычный флэш плеер, функцию можно протестировать в конструкторе, но опубликовать только купив платные услуги

Contact Form - можно добавлять textarea (большое текстовое поле), input text (малое текстовое поле), checkbox (несколько опций выбора), radio (одна опция выбора), select (выпадающий список опций), присоединять файлы к форме можно только после оплаты про аккаунта; можно указать нужные поля обязательными, переименовать их, сделать нужные отступы и поменять e-mail, на которые будут приходить письма

Two Column Layout - добавить таблицу в две колонки

Custom HTML - вставить любой HTML код или виджет

Google AdSense - стандартный виджет от гугла, 50% от прибыли достанутся Вам

Multimedia / Мультимедия - различные аудио и видео плееры, флэш, графика и другие файлы

В этой вкладке внимания достойны только галереи и загрузка файлов. Вывод аудио и видео-плееров платное, поэтому вывод аудио и видео гораздо легче сделать путем вставки виджета.

Photo Gallery - галерея изображений выводится таблицей с уменьшенными версиями картинок; сперва Вы загружаете картинки, к каждой картинке можно сделать текстовый комментарий, прикрепить ссылку или удалить; саму таблицу можно сделать от 2 до 6 колонок, задать отступ, рамку и способ формирования уменьшенных версий

Slideshow - слайдшоу можно вывести 6 разными способами от простой листалки до коллажа; каждой картинке можно дать описание, но делать ссылки уже нельзя; доступны тонкие настройки отступов, автовоиспроизведения и слайд-эффектов

File - после загрузки файла появится иконка расширения, имя файла и ссылка на скачивание; имя файла и его расположение можно изменить

Audio Player - аудио-плеер доступен после оплаты

Video - видео-плеер доступен после оплаты

Embedded Document - вставка документа в тело страницы - доступна после оплаты

Flash - загрузка флэш файла, можно указать высоту и ширину, выравнивание слева, по центру или справа, задать отступы и параметр Vars

Google Maps - стандартный виджет вывода карты гугла

YouTube Video - вставляется адрес страницы с роликом, задается размер плеера, выравнивание, отступы и идентификатор видео (если нужен)

Revenue / Электронная коммерция и элементы для интернет-магазина

Есть интеграция с сервисами Google Checkout и Paypal.

Google AdSense - вывод стандартного виджета гугла, легко прикрепляемого через e-mail

Product Block - вывод таблицы продуктов, каждая ячейка которой содержит изображение, описание и кнопку покупки

Product Small - список продуктов, несколько картинок с поисанием и кнопкой

Product Regular - один продукт с заголовоком изображением, подробным описанием, ценой и кнопкой

Product Large - страницы с продуктом, изображение, заголовок, подробное описание, а сбоку ценник с кнопкой покупки

На этом стандартные элементы кончаются. Остальные элементы, которые используются реже, находятся под катом. Для получения доступа к ним, нажмите кнопку More.

More / Дополнительные виджеты

Forums by Tal.ki - виджет форума Tal.ki, на котором можно авторизовываться через OpenID

Online Bookings - виджет заказов от Book Fresh

Online Poll - виджет опросов от сервиса Poll Daddy

Layout / Каркас - деление страницы на колоки

Two Column Layout - добавление таблицы в две колонки

Divider - добавление горизонтального разделителя <hr>, размер и отступы можно настроить

Fun / Игры

Tower Defense - флэш-игра, в которую можно играть онлайн

Smashing - тоже флэш-игра

6000+ Games - еще дофига онлайн игр

Misc / Разное

Custom HTML - вывод своего HTML кода или виджета

Feed Reader - весьма неплохой транслятор RSS лент, где можно указать адрес ленты, выравнивание, ширину, количество выводимых элементов, полноту краткого описания и отступы; но, к сожалению, лента будет выводится в жуткой бело-голубой таблице, вид которой поменять никак нельзя

Forms / Формы обратной связи

Contact Form - обычная форма, где можно задать e-mail получателя, добавить разные поля с описаниями, сделать их обязательными и т.п.

RSVP Form - опрос с доставкой на e-mail, его отличие от простой формы состоит в радио-кнопках для опроса

Survey - длинный опрос с радио-кнопками с доставкой на e-mail

Design / Дизайн

Favorites - там вы увидите ленту шаблонов, рассортированных по популярности; каждый шаблон легко примерить на свой сайт - для этого нужно всего лишь навести на понравившийся шаблон мышкой

Design Options - в настройках дизайна можно задать цвет, размер и стиль шрифта для отображения заголовков, подзаголовков, простого текста и ссылок; доступно много шрифтов с поддержкой кириллицы: Arial, Geneva, Georgia, Helvetica, Lucida Sans, monospace, Tahoma, Times New Roman, Trebuchet MS, Verdana

All Themes - там Вам предоставят все доступные шаблоны, рассортированные по категориям; там же Вы сможете хранить и свои шаблоны, которые можно импортировать с других сайтов или создать путем редактирования HTML и CSS

Кнопку редактирования HTML и CSS можно найти в правом верхнем углу окна с сайтом. HTML редактор Weebly чрезвычайно удобен. Он разделен на пять вкладок.

HTML - редактор шаблона самой страницы с подсветкой и нумерацией строк, по умолчанию все шаблоны для удобства верстаются DIV'ами

CSS - редактор CSS тоже с подсветкой и нумерацией, путь к изображениям прямой, то есть css файл и изображения лежат в одной директории

Files - менеджер файлов, используемых для дизайна, при клике на каждый файл выводится его привью

Preview - предпросмотр страницы с изменениями

Help - здесь есть подробное описание HTML редактора, а также список переменных и идентификаторов, использованных для элементов страницы

Как видите, такой редактор будет удобен в пользовании даже самым продвинутым дизайнерам. После работы с текстовым редактором Вам предложены три кнопки.

Export - экспортировать дизайн в файл формата ZIP

Cancel - отменить все изменения

Save & Exit - сохранить изменения и покинуть редактор

Кроме редактирования HTML и CSS, можно подгрузить в раздел шаблонов другие шаблоны. Импорт шаблона производится путем загрузки ZIP архива со следующим содержимым:

index.html - шаблон, в котором используются переменные %%TITLE%%, %%MENU%%, %%CONTENT%% и %%WEEBLYFOOTER%%

main_style.css - текстовый файл со стилями CSS

изображения и файлы для дизайна, их названия не имеют значения

Все файлы должны лежать в одной директории. Субдиректории не импортируются!

Pages / Страницы

В редакторе страниц можно создавать простые статические страницы и блоги. При создании страницы ее заголовок становится ее ЧПУ. Кириллица, увы, не транслитерируется, поэтому вместо moj_blog.html мы увидим 857485738.html, однако сами заголовки и пункты меню могут спокойно отображаться кириллицей. Можно настроить порядок отображения каждой страницы в меню или вовсе не показывать страницу в меню. Можно дублировать страницу и защитить страницу паролем. Также можно прописать для каждой страницы тег <title> мета-тег описания description, мета-тег ключевых слов keywords, а также метатеги и скрипты, вставляющиеся в голову и футер страницы.

New Page - добавить новую статическую страницу

New Blog - добавить новую блоголенту

Блоговая страница состоит из двух колонок: левая - колонка с перечнем постов, правая - сайдбар, в котором есть блок введения (об авторе), блок архива с ссылкми на месяца и блок категорий ака тегов. На категории по месяцам записи разбиваются автоматически, а классификация по категориям производится автором путем их ввода через запятую (как теги). Каждую запись можно отредактировать, удалить и сменить ей ЧПУ. Рядом с каждым постом есть кнопка для добавления комментария, кнопка tweet для трансляции в твиттер и кнопка Like для фейсбука. К сожалению, вид кнопок не настраивается. Также есть ссылка на RSS блога. В настройках самого блога Manage Blog можно настроить формат вывода времени, а также установить настройки по умолчанию для комментариев. Комментарии можно выводить сразу, только после проверки админа или запретить вообще. Но сбить настройки по умолчанию можно в настройках каждого поста. При создании записи заполняется заголовок и категории через запятую. В тело самого поста можно запихнуть любые элементы из верхнего фрейма. Сам пост пожно опубликовать сразу, либо отложить его в Drafts - черновики. ЧПУ для записи генерируется из заголовка через тире по принципу moj-ocherednoj-post.html, но помните, что его можно изменить в настройках поста.

Settings / Настройки

Перед вами откроется ajax окно с несколькими тематическими вкладками. Там Вы сможете настроить свой аккаунт на Weebly, а также свой сайт.

General Settings / Основные Настройки

Address - здесь Вы легко сможете поменять свой поддомен или прикрепить платный домен второго уровня

Site Title - установить заголовок сайта

Favicon - установка favicon.ico, к сожалению, платная

Site Password - паролирование сайта целиком тоже платное

Footer Message - вставка своего копирайта в футер - платное; вместо него будет стоять ссылка на Weebly

Navigation - можно отключить кнопку More в меню сайта (она появляется, когда страниц слишком много)

Search Engine Optimization (SEO) / Поисковая Оптимизация

Site Description - описание сайта для мета-тега description

Meta Keywords - ключевые слова для мета-тега keywords

Footer Code - скрипты и коды, которые должны фигурировать на всех страницах сайта

Header Code - мета-теги и коды, которые можно включить в голову сайта

Hide site from search engines - запретить сайт для индексирования поисковыми системами - noindex

Ecommerce Settings / Настройка систем оплаты

Merchant Account - привязать сайт к аккаунту Google Checkout или Paypal

Currency - выбор валюты, российские рубли в списке отсутствуют

Mobile Settings / Настройка просмотра сайта с мобильных устройств

Enable Mobile - разрешить просмотр сайта с мобильных устройств

Theme Color - цветовая гамма для отображения сайта в мобильниках

Archive / Un-publish / Резервное Копирование / Запретить Публикацию

Archive - нажав на ссылку download your site as a .zip archive можно скачать резервную копию данных сайта

Подвожу итоги. Разумеется, радует поддержка кириллицы, однако огорчает отсутствие транслитерации кириллицы в ЧПУ. Опция постинга под катом в постах очень неудобно, поскольку разделитель каждый раз приходится ставить вручную. Очень нравится гибкость настройки дизайна. Раздражает обязательная плата за загрузку музыки, видео и настройку favicon. Зачем платить за то, что бесплатно валяется на каждом углу? Интерфейс администраторской приятен и понятен. У меня ни разу ничего не запарывалось и не тормозило.

В общем, если кого-то не смущает отсутствие транслитерации кириллицы в ЧПУ, то может смело создавать блог, сайт-визитку или магазин на Weebly. Я примерно за 5 часов (настройка собственного дизайна заняла время) смогла создать вот такой говнобложик:
http://ani-do.weebly.com