Создаем сайты в системе uCoz. Практика
Продолжение. Начало в КГ №№ 30, 31
Где и как можно быстро создавать профессиональные сайты, получить хостинг и доменное имя, причем все это с минимумом финансовых и интеллектуальных затрат? Среди наиболее ярких сервисов в этой области можно выделить uCoz, о котором мы начали говорить в двух первых частях, и уже на самом деле многое сделали. Продолжим.
В профессиональной терминологии то, с чем вы работаете в рамках системы uCoz как администратор и создатель сайта, называется back office, а то, с чем имеют дело посетители сайта — front office. Точно по такой же структуре организовано множество весомых ресурсов. Автоматизация, разделение полномочий и динамическая работа с контентом — вот отличительные характеристики современного веб-девелопмента. При этом отметим: с чем вы не (!) сталкиваетесь, но система это делает за вас — работа с базами данных, защита. В принципе, доступ к серверу дается только формально. То есть сервис разрешает работать с HTML, CSS, а также вставлять Java-скрипты, но при этом не дает права на использование PHP/Perl, мотивируя это низким качеством кода основной массы бесплатных сценариев, написанных на последнем.
Загрузите любой пустой шаблон для экспериментов, создав временный сайт.
Важно знать
Шаблоны сайтов, представленные на uCoz, строятся на динамических страницах, то есть в каком-либо отдельном виде эти страницы не существуют, а формируются уже в окне браузера за счет специальных скриптов (сценариев).
Система ориентирована на то, чтобы пользователь фактически отвечал только за одну функцию — управление контентом (формирование,
структурирование, добавление, исправление, удаление). На этом уровне в простом случае знаний HTML/CSS не нужно.
Оформление контента дается в рамах готовых шаблонов, то есть для человека, не владеющего основными навыками веб-разработки, за эту часть полностью отвечает сервис. Если же вы знаете HTML/CSS, то шаблоны можно менять по своему усмотрению, хоть на 100%.
Скрипт (сценарий), который собирает страницу в единое целое, извлекая блоки контента из базы, лежит только на плечах uCoz, и этот сценарий можно лишь дополнять своими собственными, но не видоизменять.
«Шаблоны в шаблонах»
Как уже было сказано выше, динамический режим формирования страниц подразумевает их сборку «на лету». Причем не стоит думать, что выбранный вами шаблон представляет собой нечто глобальное и незыблемое. На самом деле он состоит из множества мелких шаблонов. Например, главное меню — это отдельный маленький шаблон. А в коде он вообще скрывается за именем переменной $SITE_MENU$ — эти имена также называются «кодами uCoz». Таким образом, введя где-нибудь $SITE_MENU$, вы выведете главное меню.
Быстрая замена
Это очень удобная функция, которая доступна через пункт главного меню Панели Управления «Дизайн» > «Быстрая замена участков шаблонов». Потом вы этим будете часто пользоваться. Но в данном случае можете ради эксперимента произвести замену, например, «а» на «б».
Три разновидности редакторов верстки
В данном случае можно сказать о наличии трех отдельных, но взаимосвязанных между собой редакторах. С ними вы работаете как в Панели Управления, так и просто в режиме добавления материалов, находясь непосредственно на сайте.
Визуальный редактор
Визуальный WYSWYG
Удобен для начинающих, а также при добавлении новых материалов для сайта.
WYSWYG — аббревиатура, в переводе обозначающая «что видите, то и получаете». Внешне напоминает обычный WordPad. В его рамках можно быстро добавлять материалы, а также редактировать внутреннее наполнение страниц.
Доступны опции выравнивания текста, добавления списков, таблиц (их редактирование), а также изображений, видео и флеша. Что касается гиперссылок, то тут будет одна интересная загвоздка. В рамках WYSWYG почему-то гиперссылки вы можете делать только на внутренние страницы вашего ресурса, но никак не внешние. Это не очень удобно, вернее, совсем неудобно.
Отдельно стоит сказать о работе с текстом в рамках буфера обмена. То есть, например, вы хотите добавить материал из Word’а путем Ctrl+C/Ctrl+V. В принципе, если особенно не разбираетесь, то можете так и поступать, но это будет не совсем верным. Дело в том, что в такой ситуации будет вставляться текст формата Word со всеми сопутствующими внутренними пометками и т.п. Правильнее скопировать текст из Word в «Блокнот» Windows, а уже оттуда неформатированным в визуальный редактор uCoz. Этим действием мы не только улучшаем совместимость, но и уменьшаем размер файла. Вообще, в uCoz есть ограничения по этому поводу.
И еще один минус — таблицы. Если вы хотите вставить таблицы больших размеров (например, 25 строк), то в рамках визуального редактора это вам вряд ли удастся. Выходов несколько. Быстрый — «скрипя зубами»:) перенести такую таблицу из Word, либо разметить все в HTML.
Других серьезных ошибок в этом режиме редактора не замечено.
Меняем надпись копирайта в HTML
HTML
Стандартный HTML-редактор с динамическим анализом и подсветкой кода. Иногда немного глючит, что проявляется в обновлениях. Например, вы написали нововведения, по мере анализа программа начала думать об ошибках, и потом по странной случайности делает HTML-код «с ошибкой». В данном случае рекомендуется использовать сторонний HTML-редактор или хотя бы «Блокнот». И вообще, перед тем как что-то делать в HTML-редакторе uCoz, лучше скопировать исходник в «Блокнот».
В остальном все удобно.
Редактор BB-кодов
BBCode (аббр. от англ. Bulletin Board Code) — это специальный язык разметки, функционально схожий с HTML, который раньше был принят для досок объявлений (BBS) и форумов. От HTML отличается большей простотой и небольшим отличием в синтаксисе, а именно, вместо скобок «<» и «>» там используется «[» и «]». В принципе, ваш покорный слуга этим никогда не пользовался, поэтому основные прелести описать не могу.
Несколько слов о главном
Очевидно, что первоначальной задачей uCoz является ориентирование на неподготовленных пользователей, которые загружают шаблон и вводят в него контент. Что касается более узких и уже приближающихся к профессиональному уровню тем, сопутствующие вопросы решены слабее, но и в этом случае сервис нельзя назвать неудобным.
Настройка колонки меню в режиме конструктора
Как строится работа?
Давайте опишем самый простой случай. Вы выбрали шаблон, отметили или потом добавили глобальные блоки (новости, список статей, гостевая книга, форум и т.п.). Фактически ваш сайт уже готов, причем автоматически сформировано главное меню, в котором новости будут обозначаться как «Главная» и так далее. Пункты меню можно реконфигурировать, перемещать между собой, добавлять новые. Все это делается в Панели Управления > Главная страница > Управление Дизайном (Конструктор меню). Жмем на «Конструктор меню».
Теперь загрузите сам сайт. Вы уже можете добавлять новости, статьи (если выбрали этот модуль) и так далее.
То есть, на самом деле, внутренней верстки как таковой не требуется. Управление самим контентом вы можете осуществлять извне, то есть со стороны сайта. Единственный момент, который стоит указать — это права на изменения/добавления.
Допустим, мы хотим, чтобы те же новости могли добавлять только вы. Для этого в основном меню Панели Управления кликаем на пункт «Пользователи», из загрузившегося списка выбираем «Группы пользователей», после этого загружается перечисление всех типов пользователей, а внизу находится кнопка установления общих прав групп. Нажимаем на нее, после чего расставляем приоритеты доступа к добавлению, чтению, редактированию. Все достаточно просто на самом деле.
Теперь, имея все права администратора, добавьте несколько новостных статей с изображениями. Если все получилось, то вы увидите, как работает система в рамках настроек по умолчанию — новость автоматически добавляется и становится верхней (хотя этот порядок можно изменить в настройках глобального модуля «Новости» в ПУ). Под самой новостью появляется панель, в которой указывается дата, кто добавил, кто автор, рейтинг и т.п. Эту панель также можно менять по своему усмотрению, но уже в рамках кода.
Согласитесь, что внешне все начинает напоминать множество сайтов, где предлагается скачать/прочитать и так далее. В принципе, большинство из них и сделано в uCoz, даже более того, скоро вы начнете и шаблоны узнавать.
Увидев, как все работает, имеет смысл зайти в Панель Управления, выбрать пункт «Новости» и посмотреть, что же находится в его общих настройках. Ничего особенно сложного для понимания — порядок расстановки, число сообщений, выводимых на страницу, ограничение по количеству символов и размеру картинок.
Работаем с конструктором
Если вы вошли на свою страницу как администратор, то сверху будет присутствовать отдельное меню управления. Сейчас нас интересует в нем крайний правый пункт «Конструктор». Нажав на него, вы обнаружите пункт «Включить». ОК. Что произойдет в данном случае?
Появятся все пункты меню сайта из стандартного комплекта uCoz, а это «Главное меню», «Каталог», «Поиск», «Календарь» и так далее. В этом режиме вы их можете переставлять между собой, производить настройку и так далее. Еще режим конструктора позволяет менять надписи. Воспользуемся этим, проведем некоторые замены, например, в строке копирайта напишем: «копирайт Вася Пупкин». Теперь в меню «Конструктор» выбираем пункт «Сохранить изменения» и закрываем его. Наш сайт изменился согласно тому, что мы ввели.
Конечно, это самый топорный и неуклюжий метод по внесению изменений в структуру сайта, но в ином случае пользователям нужно будет лезть в HTML/CSS.
Давайте проделаем те же операции через код…
То же через ПУ
Входим в Панель Управления > Главная страница > Управление дизайном. Нажимаем на пункт «Страницы сайта», тем самым автоматически перейдя в HTML- редактор этого структурного блока. Просматриваем чисто визуально HTML-код. В конце должна находиться наша строка с копирайтом, заменяем там написанное на «здесь был Вася Пупкин через код», нажимаем кнопку «Сохранить». Теперь перезагружаем сам сайт и смотрим — изменения появились. Наша колонка (или наши колонки) с меню будет находиться в HTML-файле «Первая колонка» (или «Первая колонка», «Вторая колонка»). Здесь мы можем через код увидеть, из чего она формируется. Причем структурные элементы будут прятаться за именами переменных, о чем мы расскажем отдельно. В эту колонку вы можете произвольным образом добавлять счетчики, информеры, баннеры, изображения и тому подобное.
Подытожим
В общем, ваша первоочередная задача — от и до изучить возможности Панели Управления, после чего уже можно будет реализовывать более сложные вещи.
Кристофер http://itcs.3dn.ru
Где и как можно быстро создавать профессиональные сайты, получить хостинг и доменное имя, причем все это с минимумом финансовых и интеллектуальных затрат? Среди наиболее ярких сервисов в этой области можно выделить uCoz, о котором мы начали говорить в двух первых частях, и уже на самом деле многое сделали. Продолжим.
В профессиональной терминологии то, с чем вы работаете в рамках системы uCoz как администратор и создатель сайта, называется back office, а то, с чем имеют дело посетители сайта — front office. Точно по такой же структуре организовано множество весомых ресурсов. Автоматизация, разделение полномочий и динамическая работа с контентом — вот отличительные характеристики современного веб-девелопмента. При этом отметим: с чем вы не (!) сталкиваетесь, но система это делает за вас — работа с базами данных, защита. В принципе, доступ к серверу дается только формально. То есть сервис разрешает работать с HTML, CSS, а также вставлять Java-скрипты, но при этом не дает права на использование PHP/Perl, мотивируя это низким качеством кода основной массы бесплатных сценариев, написанных на последнем.
Загрузите любой пустой шаблон для экспериментов, создав временный сайт.
Важно знать
Шаблоны сайтов, представленные на uCoz, строятся на динамических страницах, то есть в каком-либо отдельном виде эти страницы не существуют, а формируются уже в окне браузера за счет специальных скриптов (сценариев).
Система ориентирована на то, чтобы пользователь фактически отвечал только за одну функцию — управление контентом (формирование,
структурирование, добавление, исправление, удаление). На этом уровне в простом случае знаний HTML/CSS не нужно.
Оформление контента дается в рамах готовых шаблонов, то есть для человека, не владеющего основными навыками веб-разработки, за эту часть полностью отвечает сервис. Если же вы знаете HTML/CSS, то шаблоны можно менять по своему усмотрению, хоть на 100%.
Скрипт (сценарий), который собирает страницу в единое целое, извлекая блоки контента из базы, лежит только на плечах uCoz, и этот сценарий можно лишь дополнять своими собственными, но не видоизменять.
«Шаблоны в шаблонах»
Как уже было сказано выше, динамический режим формирования страниц подразумевает их сборку «на лету». Причем не стоит думать, что выбранный вами шаблон представляет собой нечто глобальное и незыблемое. На самом деле он состоит из множества мелких шаблонов. Например, главное меню — это отдельный маленький шаблон. А в коде он вообще скрывается за именем переменной $SITE_MENU$ — эти имена также называются «кодами uCoz». Таким образом, введя где-нибудь $SITE_MENU$, вы выведете главное меню.
Быстрая замена
Это очень удобная функция, которая доступна через пункт главного меню Панели Управления «Дизайн» > «Быстрая замена участков шаблонов». Потом вы этим будете часто пользоваться. Но в данном случае можете ради эксперимента произвести замену, например, «а» на «б».
Три разновидности редакторов верстки
В данном случае можно сказать о наличии трех отдельных, но взаимосвязанных между собой редакторах. С ними вы работаете как в Панели Управления, так и просто в режиме добавления материалов, находясь непосредственно на сайте.
Визуальный WYSWYG
Удобен для начинающих, а также при добавлении новых материалов для сайта.
WYSWYG — аббревиатура, в переводе обозначающая «что видите, то и получаете». Внешне напоминает обычный WordPad. В его рамках можно быстро добавлять материалы, а также редактировать внутреннее наполнение страниц.
Доступны опции выравнивания текста, добавления списков, таблиц (их редактирование), а также изображений, видео и флеша. Что касается гиперссылок, то тут будет одна интересная загвоздка. В рамках WYSWYG почему-то гиперссылки вы можете делать только на внутренние страницы вашего ресурса, но никак не внешние. Это не очень удобно, вернее, совсем неудобно.
Отдельно стоит сказать о работе с текстом в рамках буфера обмена. То есть, например, вы хотите добавить материал из Word’а путем Ctrl+C/Ctrl+V. В принципе, если особенно не разбираетесь, то можете так и поступать, но это будет не совсем верным. Дело в том, что в такой ситуации будет вставляться текст формата Word со всеми сопутствующими внутренними пометками и т.п. Правильнее скопировать текст из Word в «Блокнот» Windows, а уже оттуда неформатированным в визуальный редактор uCoz. Этим действием мы не только улучшаем совместимость, но и уменьшаем размер файла. Вообще, в uCoz есть ограничения по этому поводу.
И еще один минус — таблицы. Если вы хотите вставить таблицы больших размеров (например, 25 строк), то в рамках визуального редактора это вам вряд ли удастся. Выходов несколько. Быстрый — «скрипя зубами»:) перенести такую таблицу из Word, либо разметить все в HTML.
Других серьезных ошибок в этом режиме редактора не замечено.
HTML
Стандартный HTML-редактор с динамическим анализом и подсветкой кода. Иногда немного глючит, что проявляется в обновлениях. Например, вы написали нововведения, по мере анализа программа начала думать об ошибках, и потом по странной случайности делает HTML-код «с ошибкой». В данном случае рекомендуется использовать сторонний HTML-редактор или хотя бы «Блокнот». И вообще, перед тем как что-то делать в HTML-редакторе uCoz, лучше скопировать исходник в «Блокнот».
В остальном все удобно.
Редактор BB-кодов
BBCode (аббр. от англ. Bulletin Board Code) — это специальный язык разметки, функционально схожий с HTML, который раньше был принят для досок объявлений (BBS) и форумов. От HTML отличается большей простотой и небольшим отличием в синтаксисе, а именно, вместо скобок «<» и «>» там используется «[» и «]». В принципе, ваш покорный слуга этим никогда не пользовался, поэтому основные прелести описать не могу.
Несколько слов о главном
Очевидно, что первоначальной задачей uCoz является ориентирование на неподготовленных пользователей, которые загружают шаблон и вводят в него контент. Что касается более узких и уже приближающихся к профессиональному уровню тем, сопутствующие вопросы решены слабее, но и в этом случае сервис нельзя назвать неудобным.
Как строится работа?
Давайте опишем самый простой случай. Вы выбрали шаблон, отметили или потом добавили глобальные блоки (новости, список статей, гостевая книга, форум и т.п.). Фактически ваш сайт уже готов, причем автоматически сформировано главное меню, в котором новости будут обозначаться как «Главная» и так далее. Пункты меню можно реконфигурировать, перемещать между собой, добавлять новые. Все это делается в Панели Управления > Главная страница > Управление Дизайном (Конструктор меню). Жмем на «Конструктор меню».
Теперь загрузите сам сайт. Вы уже можете добавлять новости, статьи (если выбрали этот модуль) и так далее.
То есть, на самом деле, внутренней верстки как таковой не требуется. Управление самим контентом вы можете осуществлять извне, то есть со стороны сайта. Единственный момент, который стоит указать — это права на изменения/добавления.
Допустим, мы хотим, чтобы те же новости могли добавлять только вы. Для этого в основном меню Панели Управления кликаем на пункт «Пользователи», из загрузившегося списка выбираем «Группы пользователей», после этого загружается перечисление всех типов пользователей, а внизу находится кнопка установления общих прав групп. Нажимаем на нее, после чего расставляем приоритеты доступа к добавлению, чтению, редактированию. Все достаточно просто на самом деле.
Теперь, имея все права администратора, добавьте несколько новостных статей с изображениями. Если все получилось, то вы увидите, как работает система в рамках настроек по умолчанию — новость автоматически добавляется и становится верхней (хотя этот порядок можно изменить в настройках глобального модуля «Новости» в ПУ). Под самой новостью появляется панель, в которой указывается дата, кто добавил, кто автор, рейтинг и т.п. Эту панель также можно менять по своему усмотрению, но уже в рамках кода.
Согласитесь, что внешне все начинает напоминать множество сайтов, где предлагается скачать/прочитать и так далее. В принципе, большинство из них и сделано в uCoz, даже более того, скоро вы начнете и шаблоны узнавать.
Увидев, как все работает, имеет смысл зайти в Панель Управления, выбрать пункт «Новости» и посмотреть, что же находится в его общих настройках. Ничего особенно сложного для понимания — порядок расстановки, число сообщений, выводимых на страницу, ограничение по количеству символов и размеру картинок.
Работаем с конструктором
Если вы вошли на свою страницу как администратор, то сверху будет присутствовать отдельное меню управления. Сейчас нас интересует в нем крайний правый пункт «Конструктор». Нажав на него, вы обнаружите пункт «Включить». ОК. Что произойдет в данном случае?
Появятся все пункты меню сайта из стандартного комплекта uCoz, а это «Главное меню», «Каталог», «Поиск», «Календарь» и так далее. В этом режиме вы их можете переставлять между собой, производить настройку и так далее. Еще режим конструктора позволяет менять надписи. Воспользуемся этим, проведем некоторые замены, например, в строке копирайта напишем: «копирайт Вася Пупкин». Теперь в меню «Конструктор» выбираем пункт «Сохранить изменения» и закрываем его. Наш сайт изменился согласно тому, что мы ввели.
Конечно, это самый топорный и неуклюжий метод по внесению изменений в структуру сайта, но в ином случае пользователям нужно будет лезть в HTML/CSS.
Давайте проделаем те же операции через код…
То же через ПУ
Входим в Панель Управления > Главная страница > Управление дизайном. Нажимаем на пункт «Страницы сайта», тем самым автоматически перейдя в HTML- редактор этого структурного блока. Просматриваем чисто визуально HTML-код. В конце должна находиться наша строка с копирайтом, заменяем там написанное на «здесь был Вася Пупкин через код», нажимаем кнопку «Сохранить». Теперь перезагружаем сам сайт и смотрим — изменения появились. Наша колонка (или наши колонки) с меню будет находиться в HTML-файле «Первая колонка» (или «Первая колонка», «Вторая колонка»). Здесь мы можем через код увидеть, из чего она формируется. Причем структурные элементы будут прятаться за именами переменных, о чем мы расскажем отдельно. В эту колонку вы можете произвольным образом добавлять счетчики, информеры, баннеры, изображения и тому подобное.
Подытожим
В общем, ваша первоочередная задача — от и до изучить возможности Панели Управления, после чего уже можно будет реализовывать более сложные вещи.
Кристофер http://itcs.3dn.ru
Компьютерная газета. Статья была опубликована в номере 33 за 2010 год в рубрике soft
