Визуальный конструктор Serif WebPlus
На самом деле, большинству посетителей сайтов абсолютно все равно, на базе каких технологий эти сайты сделаны. Самое главное — приятный дизайн и хорошо оформленная полезная информация. Если человек хочет создать сайт самостоятельно, то на него сразу же обрушивается шквал информации, в результате чего он не совсем ясно представляет, с чего начинать. Именно поэтому визуальные конструкторы сейчас приобрели популярность, причем не только в сегменте веб-разработок, но и множества других, например, программирования.
К Serif WebPlus многие специалисты относятся не совсем серьезно. Ну, конечно, как же это современный сайт на статических HTML-страницах!? А между тем, в ряде случаев использование этого визуального конструктора вполне оправданно. Например, в нем можно быстро делать наброски дизайна и проверять сразу же на месте его функциональность. Во-вторых, WebPlus понятен пользователям, то есть прекрасно решены вопросы обновления: человек создает или меняет страницу, нажимает кнопку «Publish to Web», и все изменения загружаются прямо на сайт (главное, специально для него настроить подключение к FTP-серверу). При этом пользователь не должен знать HTML как таковой, и тем более заботиться о специальной обработке изображений и сохранении оных на сервер.
То есть, Serif WebPlus — это определенного рода CMS (системами управления сайтами). Единственный минус по сравнению с более мощными конкурирующими системами выражен в самой технологии — используется фактически статический HTML с возможностью включения блоков JavaScript (хотя можно использовать скриптовые вставки и на других языках). То есть, никакой ключевой базы данных ресурса как таковой не используется, за исключением варианта интернет-магазинов, где в качестве основы можно применять dbase или XLS-файлы.
Но это ограничение работает и в плюс, потому как некоторые CMS требуют определенной поддержки своих технологий со стороны хостинг-провайдеров, а то, что создается в рамках конструктора, может быть беспроблемно размещено абсолютно у всех.
Во-вторых, во многих конкурирующих системах управления сайтами часто имеются ограничения по дизайну в силу реализованных технологий. То есть, человек, ничего не понимающий в принципах HTML-верстки, будет, скорее всего, приобретать или использовать шаблоны. В варианте описываемой нами программы он может на уровне визуального редактирования все настраивать по своему усмотрению.
В опубликованной некогда статье «Веб-конструктор Serif WebPlus» мы обсудили множество практических аспектов на конкретном примере создания сайта. В ней хорошо было показано создание меню и кнопок, а также мы много говорили о представлении структуры сайта. Сейчас обсудим другие сопутствующие вопросы. Причем с ними я столкнулся, не только прочитав отклики на предыдущую статью, но и посмотрев, как работают с программой начинающие.
Итак…
Общие характеристики конструктора
От пользователей не требуется какого-либо знания HTML. Работа в визуальном редакторе чем-то напоминает обычную верстку, в рамках которой вы можете оперировать функциональными блоками: текст, изображения, таблицы, графические элементы, медиа, флеш и т.п.
Сравнение с версткой вполне уместно, поскольку имеет место аранжировка элементов между собой (выдвинуть на передний план, спрятать на задний и так далее). В рамках рабочего пространства вы можете ставить элементы там, где вам угодно — программа после автоматически все переводит в специализированный HTML-код.
Для быстрого создания сайтов есть большая библиотека шаблонов как готовых ресурсов, так и отдельных элементов (кнопок, форм, графических объектов).
В последней версии продукта реализована плотная интеграция с популярными веб-сервисами от Google (Maps, Adsense, Analytics), YouTube, помимо этого имеется весь необходимый арсенал интерактивных элементов для iTunes, RSS, E-Commerce и т.п.
Если у вас нет времени на создание меню, вы просто верстаете сами страницы, расставляете их в определенной иерархии, после чего WеbPlus автоматически создаст современное меню ресурса, в котором сразу же прописываются ссылки. Его можно изменять и редактировать. В последней версии добавлены навигационные бары на Flash. Пользователи лицензионной версии программы получают бесплатный хостинг у ее владельцев, хотя размещать сайт можно по собственному усмотрению где угодно. Поскольку речь идет главным образом об HTML и JavaScript (хотя можно использовать скриптовые вставки и на других языках), то проблем с размещением вовсе нет.
В последней версии добавлены инструменты SEO, то есть продвижения в поисковых системах Google и Yahoo!.
Важно понимать
Сам файл проекта Serif WebPlus, в рамках которого вы делаете сайт, подразумевает особую структуру хранения данных, из которой потом(!) генерируются html-страницы, преобразуются и оптимизируются изображения и так далее. То есть, на самом деле вы работаете не с HTML, а с визуальными представлениями будущих страниц.
Как происходит опубликование уже преобразованного под веб материала? Есть два варианта: экспорт сайта или его отдельных страниц на жесткий диск компьютера и экспорт на FTP-сервер.
Сохранение происходит следующим образом: в корневой папке размещаются все html-страницы ресурса, также формируются две папки — wpimages (в нее помещаются все изображения) и wpscripts (служебные скрипты).
Важно! Работа с изображениями
В плане изображений программа практически всеядна, то есть понимает около 20 форматов графических файлов, включая такие специфические, как, например, Adobe PCD. После их непосредственной вставки на страницы в настройках сайта (меню File —> Site Properties) имеет смысл посетить закладку Pictures, в которой вы:
. Указываете, нужно ли конвертировать еще раз помещенные и неизмененные по размерам файлы GIF, JPEG и PNG. Напротив каждого формата стоит указатель, если он активен, то изображения не обрабатываются и помещаются как есть в исходном виде.
. Выбираете выходной формат всех остальных изображений ресурса. То есть те, которые будут сформированы при опубликовании. На выбор дается опять же три варианта: GIF, JPEG и PNG. Здесь вы можете указать качество компрессии от 5 (самые качественные) до 100 (самые ужатые). При этом важно понимать, что если вы использовали в создании ресурса различные графические объекты (прямоугольники, окружности и т.п.), то они также преобразуются в файлы изображений.
. Отдельно настраиваются опции для PNG, это касается в первую очередь прозрачности.
. По умолчанию программа сохраняет изображения со своими специфическими названиями, которые им присваивает. Если вы хотите сохранить оригинальные имена файлов, то сделайте активным пункт (Use original names of graphic files). В этом плане нужно быть аккуратным, потому как все изображения помещаются в одну папку, и может быть пересечение имен.
Теперь пометка для тех, кто больше разбирается в технологиях: если вы хотите еще больше оптимизировать ресурс в плане скорости загрузки, то имеет смысл изначально сохранить весь сайт на жесткий диск, после чего зайти в папку wpimages и просмотреть наиболее большие по размерам файлы. Затем, если есть возможность их ужать без видимой потери качества, делаете это, сохраняете в один из трех форматов GIF, JPEG и PNG. После открываете файл проекта и вставляете более сжатое изображение как есть вместо того, что было раньше. Программа больше не будет его конвертировать, и все последующие экспорты пройдут как нужно.
Как уже было отмечено, если вы используете в рамках графические объекты (прямоугольники, окружности и т.п.) с градиентной заливкой, 2D или 3D- эффектами, они также после автоматически преобразуются в изображения, причем иногда программа их пытается совместить (склеить) между собой в единые файлы изображений. На самом деле, это не столь критично, но об этом нужно просто знать — это во-первых. Во-вторых, выставив среднее качество компрессии изображений при экспорте, не злоупотребляйте градиентными заливками.
Важно! Работа с текстом и таблицами
В принципе, программа позволяет импортировать в текстовые блоки выделенные фрагменты из Word или OpenOffice.org, в которых также могут содержаться таблицы и изображения. Но с точки зрения профессиональной верстки эта операция правомочна только для новичков, которые плохо разбираются в компьютерных технологиях.
Дело в том, что при копировании/вставке таким образом вы вместе с полезной информацией размещаете очень много мусора (информация о шрифтах, отступах, параграфах и т.п.). Если говорить о качественном варианте, то имеет смысл все делать отдельно, а именно, текст вставлять как Unformatted Unicode Text через Edit -> Paste Special. В принципе, для скорости можно предусмотреть и промежуточный вариант с использованием программы Блокнот. То есть текст сначала копируется из Word в нее, а потом из нее помещается в WebPlus. Данный вариант выгоден и тем, что, например, текстовый блок страницы может включать несколько фрагментов с различными вариантами верстки (цветом текста, его размером и т.п.). При выделении такого фрагмента и замены его вставкой другого текста его настройки сохраняются.
Блок таблиц, предусмотренный в рамках WebPlus, сделан очень хорошо и удобно. В принципе, работа с ними очень сильно напоминает Word. Правда, есть одна тонкость: в программе предусмотрено два типа: HTML и обычные (Creative Tables). В чем разница между ними? Ключевая в том, что обычные могут сохраняться и просто в виде изображений, что происходит при определенных условиях. Подробности отображены в таблице. Хотя стоит отметить и тот момент, что в списке HTML-таблиц есть интерактивные варианты, в которых имеется подсветка ячеек, над которыми находится указатель мыши.
Изображения также целесообразнее помещать отдельным образом, а не копировать из Word.
Ротатор баннеров!
По этой теме задавалось сразу несколько вопросов. И действительно, отдельного модуля ротатора баннеров в программе не предусмотрено. Но этот вопрос легко решается. В меню инструментов нажимаем кнопку Insert HTML Code, после чего курсором мыши рисуем прямо на странице контур размещения элемента в том месте, где он должен быть. После этой операции открывается окно Attach HTML Code, куда между тегами и вносим наш скрипт.
Для наглядного примера покажу стандартный вариант с двумя баннерами, которые будут выводиться при загрузке страницы в случайном режиме:
К Serif WebPlus многие специалисты относятся не совсем серьезно. Ну, конечно, как же это современный сайт на статических HTML-страницах!? А между тем, в ряде случаев использование этого визуального конструктора вполне оправданно. Например, в нем можно быстро делать наброски дизайна и проверять сразу же на месте его функциональность. Во-вторых, WebPlus понятен пользователям, то есть прекрасно решены вопросы обновления: человек создает или меняет страницу, нажимает кнопку «Publish to Web», и все изменения загружаются прямо на сайт (главное, специально для него настроить подключение к FTP-серверу). При этом пользователь не должен знать HTML как таковой, и тем более заботиться о специальной обработке изображений и сохранении оных на сервер.
То есть, Serif WebPlus — это определенного рода CMS (системами управления сайтами). Единственный минус по сравнению с более мощными конкурирующими системами выражен в самой технологии — используется фактически статический HTML с возможностью включения блоков JavaScript (хотя можно использовать скриптовые вставки и на других языках). То есть, никакой ключевой базы данных ресурса как таковой не используется, за исключением варианта интернет-магазинов, где в качестве основы можно применять dbase или XLS-файлы.
Но это ограничение работает и в плюс, потому как некоторые CMS требуют определенной поддержки своих технологий со стороны хостинг-провайдеров, а то, что создается в рамках конструктора, может быть беспроблемно размещено абсолютно у всех.
Во-вторых, во многих конкурирующих системах управления сайтами часто имеются ограничения по дизайну в силу реализованных технологий. То есть, человек, ничего не понимающий в принципах HTML-верстки, будет, скорее всего, приобретать или использовать шаблоны. В варианте описываемой нами программы он может на уровне визуального редактирования все настраивать по своему усмотрению.
В опубликованной некогда статье «Веб-конструктор Serif WebPlus» мы обсудили множество практических аспектов на конкретном примере создания сайта. В ней хорошо было показано создание меню и кнопок, а также мы много говорили о представлении структуры сайта. Сейчас обсудим другие сопутствующие вопросы. Причем с ними я столкнулся, не только прочитав отклики на предыдущую статью, но и посмотрев, как работают с программой начинающие.
Итак…
Общие характеристики конструктора
От пользователей не требуется какого-либо знания HTML. Работа в визуальном редакторе чем-то напоминает обычную верстку, в рамках которой вы можете оперировать функциональными блоками: текст, изображения, таблицы, графические элементы, медиа, флеш и т.п.
Сравнение с версткой вполне уместно, поскольку имеет место аранжировка элементов между собой (выдвинуть на передний план, спрятать на задний и так далее). В рамках рабочего пространства вы можете ставить элементы там, где вам угодно — программа после автоматически все переводит в специализированный HTML-код.
Для быстрого создания сайтов есть большая библиотека шаблонов как готовых ресурсов, так и отдельных элементов (кнопок, форм, графических объектов).
В последней версии продукта реализована плотная интеграция с популярными веб-сервисами от Google (Maps, Adsense, Analytics), YouTube, помимо этого имеется весь необходимый арсенал интерактивных элементов для iTunes, RSS, E-Commerce и т.п.
Если у вас нет времени на создание меню, вы просто верстаете сами страницы, расставляете их в определенной иерархии, после чего WеbPlus автоматически создаст современное меню ресурса, в котором сразу же прописываются ссылки. Его можно изменять и редактировать. В последней версии добавлены навигационные бары на Flash. Пользователи лицензионной версии программы получают бесплатный хостинг у ее владельцев, хотя размещать сайт можно по собственному усмотрению где угодно. Поскольку речь идет главным образом об HTML и JavaScript (хотя можно использовать скриптовые вставки и на других языках), то проблем с размещением вовсе нет.
В последней версии добавлены инструменты SEO, то есть продвижения в поисковых системах Google и Yahoo!.
Важно понимать
Сам файл проекта Serif WebPlus, в рамках которого вы делаете сайт, подразумевает особую структуру хранения данных, из которой потом(!) генерируются html-страницы, преобразуются и оптимизируются изображения и так далее. То есть, на самом деле вы работаете не с HTML, а с визуальными представлениями будущих страниц.
Как происходит опубликование уже преобразованного под веб материала? Есть два варианта: экспорт сайта или его отдельных страниц на жесткий диск компьютера и экспорт на FTP-сервер.
Сохранение происходит следующим образом: в корневой папке размещаются все html-страницы ресурса, также формируются две папки — wpimages (в нее помещаются все изображения) и wpscripts (служебные скрипты).
Важно! Работа с изображениями
В плане изображений программа практически всеядна, то есть понимает около 20 форматов графических файлов, включая такие специфические, как, например, Adobe PCD. После их непосредственной вставки на страницы в настройках сайта (меню File —> Site Properties) имеет смысл посетить закладку Pictures, в которой вы:
. Указываете, нужно ли конвертировать еще раз помещенные и неизмененные по размерам файлы GIF, JPEG и PNG. Напротив каждого формата стоит указатель, если он активен, то изображения не обрабатываются и помещаются как есть в исходном виде.
. Выбираете выходной формат всех остальных изображений ресурса. То есть те, которые будут сформированы при опубликовании. На выбор дается опять же три варианта: GIF, JPEG и PNG. Здесь вы можете указать качество компрессии от 5 (самые качественные) до 100 (самые ужатые). При этом важно понимать, что если вы использовали в создании ресурса различные графические объекты (прямоугольники, окружности и т.п.), то они также преобразуются в файлы изображений.
. Отдельно настраиваются опции для PNG, это касается в первую очередь прозрачности.
. По умолчанию программа сохраняет изображения со своими специфическими названиями, которые им присваивает. Если вы хотите сохранить оригинальные имена файлов, то сделайте активным пункт (Use original names of graphic files). В этом плане нужно быть аккуратным, потому как все изображения помещаются в одну папку, и может быть пересечение имен.
Теперь пометка для тех, кто больше разбирается в технологиях: если вы хотите еще больше оптимизировать ресурс в плане скорости загрузки, то имеет смысл изначально сохранить весь сайт на жесткий диск, после чего зайти в папку wpimages и просмотреть наиболее большие по размерам файлы. Затем, если есть возможность их ужать без видимой потери качества, делаете это, сохраняете в один из трех форматов GIF, JPEG и PNG. После открываете файл проекта и вставляете более сжатое изображение как есть вместо того, что было раньше. Программа больше не будет его конвертировать, и все последующие экспорты пройдут как нужно.
Как уже было отмечено, если вы используете в рамках графические объекты (прямоугольники, окружности и т.п.) с градиентной заливкой, 2D или 3D- эффектами, они также после автоматически преобразуются в изображения, причем иногда программа их пытается совместить (склеить) между собой в единые файлы изображений. На самом деле, это не столь критично, но об этом нужно просто знать — это во-первых. Во-вторых, выставив среднее качество компрессии изображений при экспорте, не злоупотребляйте градиентными заливками.
Важно! Работа с текстом и таблицами
В принципе, программа позволяет импортировать в текстовые блоки выделенные фрагменты из Word или OpenOffice.org, в которых также могут содержаться таблицы и изображения. Но с точки зрения профессиональной верстки эта операция правомочна только для новичков, которые плохо разбираются в компьютерных технологиях.
Дело в том, что при копировании/вставке таким образом вы вместе с полезной информацией размещаете очень много мусора (информация о шрифтах, отступах, параграфах и т.п.). Если говорить о качественном варианте, то имеет смысл все делать отдельно, а именно, текст вставлять как Unformatted Unicode Text через Edit -> Paste Special. В принципе, для скорости можно предусмотреть и промежуточный вариант с использованием программы Блокнот. То есть текст сначала копируется из Word в нее, а потом из нее помещается в WebPlus. Данный вариант выгоден и тем, что, например, текстовый блок страницы может включать несколько фрагментов с различными вариантами верстки (цветом текста, его размером и т.п.). При выделении такого фрагмента и замены его вставкой другого текста его настройки сохраняются.
Блок таблиц, предусмотренный в рамках WebPlus, сделан очень хорошо и удобно. В принципе, работа с ними очень сильно напоминает Word. Правда, есть одна тонкость: в программе предусмотрено два типа: HTML и обычные (Creative Tables). В чем разница между ними? Ключевая в том, что обычные могут сохраняться и просто в виде изображений, что происходит при определенных условиях. Подробности отображены в таблице. Хотя стоит отметить и тот момент, что в списке HTML-таблиц есть интерактивные варианты, в которых имеется подсветка ячеек, над которыми находится указатель мыши.
| В чем разница между двумя видами таблиц | HTML | Creative Tables |
| Контент таблицы находится поисковыми системами | да | нет |
| Вставка скриптов для генерации динамического контента | да | Нет |
| Вращение таблицы | нет | да* |
| Вращение текста в ячейках | нет | да* |
| Сортировка контента таблицы | да | да |
| Однотонная заливка ячеек цветом | да | да |
| Градиентная заливка ячеек текстом (или заливка изображением) | нет | да |
| Прозрачность | нет | да* |
| Деформация | нет | да* |
| Эффекты 2D/3D | нет | да* |
| * — если вы это используете, то Creative Table сохраняется как изображение |
Изображения также целесообразнее помещать отдельным образом, а не копировать из Word.
Ротатор баннеров!
По этой теме задавалось сразу несколько вопросов. И действительно, отдельного модуля ротатора баннеров в программе не предусмотрено. Но этот вопрос легко решается. В меню инструментов нажимаем кнопку Insert HTML Code, после чего курсором мыши рисуем прямо на странице контур размещения элемента в том месте, где он должен быть. После этой операции открывается окно Attach HTML Code, куда между тегами и вносим наш скрипт.
Для наглядного примера покажу стандартный вариант с двумя баннерами, которые будут выводиться при загрузке страницы в случайном режиме:
©1997-2024 Компьютерная газета