Визуальный редактор страниц

Из всех рассмотренных шаблонов только для формирования содержимого двух типов — Веб-страница и Объявления, может быть применен визуальный редактор страниц. В первом случае, весь инструментарий редактора используется для форматирования и редактирования всей страницы в целом, а во втором — каждого сообщения отдельно (страница состоит из последовательности объявлений, каждое из которых отдельно редактируется).

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

Рис. 16.1. Строка меню и панель инструментов визуального редактора

Область содержания сайта становится доступной для форматирования, редактирования текста, вставки дополнительных элементов. Пользователю, знакомому с особенностями форматирования и редактирования текстового документа Microsoft Office или OpenOffice.org, не составит труда разобраться в несложных командах данного редактора. В этом разделе будет сделан акцент на конкретных примерах, которые могут быть вам полезны при создании сайта для оформления различных страниц.

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

Прежде чем заниматься форматированием и редактированием содержимого страницы, необходимо выбрать макет — организационную форму для размещения содержания. Стандартные формы меню Макет (рис. 16.2) составляют варианты страниц из 1, 2 или 3 колонок, начинающихся стразу под областью заголовка или ограниченных сверху и снизу строками. Как можно использовать эти строки, рассмотрим на примере, который был приведен ранее (см. рис. 14.4). Вернемся к этому примеру и разберем, наконец, как оформить ссылки на подстраницы под заголовком страницы.

Рис. 16.2. Выбор одного из вариантов макета для страницы сайта

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

Ссылки создадим так:

1. В область под строкой заголовка вводим имена ссылок на подстраницы, разделяя их символом |.

2. Выделим одну из будущих ссылок, нажмем кнопку Ссылка на панели инструментов.

3. В открывшемся окне зафиксируем необходимую страницу для перехода по данной ссылке.

4. Нажмем кнопку OK.

Рис. 16.3. Оформление дополнительных ссылок на подстраницы

Последний фрагмент этого алгоритма можно видеть на рис. 16.3. Аналогичные действия мы уже выполняли при оформлении ссылки на сайт школы на панели навигации.

Таким образом, мы создали дополнительные ссылки на подстраницы данной страницы под ее заголовком. Также можно было создать при необходимости дополнительные ссылки в области под основным содержанием страницы (у нас эта выделенная часть макета осталась незаполненной).

Страницы сайта, оформленные на основе макета Три столбца (простой) или Три столбца, ориентированы на включение большого объема информации разного характера, по типу газетных полос.

Если вы сами вводите текст содержания в такие колонки, помните правило — чем короче строка, тем меньше кегль шрифта, который ее заполняет, и соответственно иллюстрации должны быть подготовлены по ширине столбца.

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

Для подготовки макета выполните следующие действия:

1. Нажмите кнопку Редактировать страницу.

2. В меню Макет (см. рис. 16.2) выберите вариант Три столбца.

3. Оформите ссылки на вложенные страницы на горизонтальной полосе макета (см. пример ранее).

Рис. 16.4. Макет Три столбца с ссылками на подстраницы на горизонтальной полосе

В результате получаем такую организацию страницы, как показано на рис. 16.4.

Далее, в каждый из столбцов мы вставим гаджет.

П роверьте себя!

• Оформите макеты для страниц сайта, выбирая простые маке-ты для страниц без подстраниц и макеты с выделенной горизонтальной областью для страниц с вложенными страницами.

• Создайте ссылки на подстраницы и разместите их в верхней горизонтальной области макета.

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

Рис. 16.5. Панель редактирования положения объекта на странице

На этой панели можно легко:

Выровнять положение по:

L — левому краю;

C — центру;

R — правому краю;

отредактировать относительный Размер изображения:

C — малый;

П — средний;

L — большой;

Оригинал — показать исходный размер изображения; Обтекание текстом:

вкл. — включить;

выкл. — выключить.

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

Меню режима редактирования Вставить включает все типы объектов, которые могут быть размещены на страницах сайта.

П роверьте себя!

Вставьте на страницу сайта иллюстрации, отформатируйте их

положение на странице сайта:

• с помощью программы Picasa из веб-альбома, размещенного в Интернете;

• с помощью меню Вставить из режима редактирования страницы вставьте иллюстрацию на страницу сайта из ранее подготовленного графического файла с вашего компьютера.

Приступая к вводу, редактированию и форматированию текста на страницах сайта Google, вам необходимо знать несколько важных правил.

Переход в режим редактирования страницы осуществляется нажатием кнопки Редактировать страницу.

Изменив заголовок страницы в этом режиме и сохранив затем отредактированную страницу, вы поменяете соответственно ссылку на данную страницу сайта на боковой панели навигации.

Приступая к вводу текста, постарайтесь следовать установленным стилям оформления, которые приведены в меню Формат (рис. 16.6). Основной текст страницы должен быть оформлен стилем Обычный текст параграфа.

Рис. 16.6. Форматирование заголовков на странице сайта

Особенно внимательно отнеситесь к многоуровневой структуре заголовков.

Заголовки текста веб-страницы выполняют не только функцию обозначения логически законченного фрагмента, для поисковых систем уровень заголовка обозначает степень важности содержимого текста, следующего за ним¹, которая понижается от H1 до H6. Поэтому ключевые слова и фразы необходимо включать в текст заголовков, причем они должны быть приближены к предполагаемым запросам пользователей, но в то же время, соответствовать реальному содержанию текста и присутствовать в нем.

Заголовок первого уровня (H1) имеет наибольшую значимость среди заголовков, поэтому к его текстовому содержанию следует относиться особенно серьезно. Размещать заголовок уровня H1 следует только в верхней части страницы, выше заголовков других уровней. На сайте Google таким заголовком является название сайта, которое фиксируется в области заголовка, и изменить его можно из формы общих параметров сайта: Дополнительные действия → Управление сайтом → Общие.

Необходимо избегать беспорядочного использования заголовков разных уровней на странице. Примерная рекомендуемая частота использования заголовков одного уровня на странице соответствует их номеру. То есть заголовок первого уровня (H1) не желательно применять более одного раза на странице, второго уровня (H2) — более двух раз и т. д.

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

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

Также негативно может быть воспринят больший размер шрифта заголовка низкого уровня по сравнению с заголовком высокого уровня (например, размер шрифта заголовка H5 больше, чем размер шрифта заголовка H2).

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

Фрагменты текста можно выделять, форматируя как Код блока цитаты, подчеркивая другой гарнитурой и цветным фоном (рис. 16.7).

При необходимости скопировать большой объем текста, например из текстового процессора Microsoft Word, следует заранее очистить все стили в исходном тексте. После вставки на страницу нужно выделить этот фрагмент, установить стиль Обычный текст параграфа (см. рис. 16.7) и, открыв список Обычный на панели инструментов, выбрать гарнитуру шрифта (рис. 16.8) основного текста.

Рис. 16.7. Выделение фрагментов текста как Код блока цитаты

Рис. 16.8. Установка гарнитуры шрифта

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

1^ SEO по-русски, продвижение сайта. http://seo-in.ru/tag-zagolovok.html.