Создание пункта меню для блога категории
В предыдущей главе было рассказано о том, как создать и настроить главную страницу сайта. Теперь можно приступать к загрузке остальных материалов. Так как процесс создания почти ни чем не отличается от описанного в предыдущей главе, здесь основное внимание будет уделено качественному и правильному оформлению текста материала. Начнём!
Структура сайта
О структуре сайта уже было не раз сказано ранее, поэтому повторим несколько важных моментов.
Пользователю, зашедшему на сайт, должно быть удобно и комфортно им пользоваться; человек не должен долго и упорно искать, где же находится нужная ему информация, поэтому всё должно быть просто и понятно. Все материалы должны быть "разложены по полочкам", роль которых на сайте выполняют меню и их подразделы - подменю в виде раскрывающихся списков. Названия для всех этих пунктов нужно тщательно подбирать, что бы оно было коротким и в то же время чётко формулировало суть данного раздела. Так же важно, что бы такие разделы, как "Помощь", "Обратная связь", "Контакты" и так далее было легко доступны, что бы пользователи могли легко получить ответы на свои вопросы.
К созданию структуры сайта подходите очень серьёзно; помните, что лучше всё сделать с первого раза, чем потом перестраивать. На этапе создания сайта, когда он находится на локальном сервере, что-то переделать ещё не так сложно, но когда сайт находится на хостинге и общедоступен, когда его страницы находятся в выдаче поисковиков, то что-то серьёзно менять это сложная и трудоёмкая работа, которая мало того, что потребует большого количества времени, так ещё и весьма вероятно, что ваши материалы, находящиеся выдаче, потеряют свои позиции.
Ниже будет подробно рассказано, как создавалась структура этого сайта, и после изучения данной статьи вы сможете, исходя из полученных знаний, хорошо продумать и правильно построить структуру своего сайта.
Как было сказано выше, всё должно быть просто и понятно, поэтому все учебные материалы здесь будут находиться в пункте "Учебные материалы", справочники – в "Справочниках" и т.д.
Любой пункт меню может выполнять разные функции, например, открывать только один какой-то конкретный материал или выводить блог материалов, быть заголовком (применяется как родительский пункт при создании раскрывающихся списков), выводить какой-либо компонент (форум, фотоальбом, форму обратной связи и так далее) и многое другое.
К любому пункту меню можно привязать раскрывающийся список первого уровня, который будет появляться при наведении курсора на этот пункт; список так же будет состоять из пунктов меню. Для каждого пункта из этого списка тоже можно создать раскрывающийся список (второго уровня) и так далее. Однако, не стоит увлекаться глубоким вложением! Возникает вопрос: насколько это будет удобно пользователям и будет ли такой сайт нормально индексироваться поисковиками?
Пользоваться сайтом, имеющим в меню более двух уровней вложений, для пользователей не совсем удобно, а вот роботам поисковиков до этого никакого дела нет! Для роботов важно только наличие возможности проиндексировать страницу, т.е. наличие ссылки на неё и разрешения на индексирование. Но стоит иметь в виду, что сайты с многоуровневыми меню индексируются дольше.
Как вариант, можно было бы для каждого материала просто создать соответствующий пункт меню и сделать все эти пункты "дочерними" по отношению к "Учебным материалам", т.е., проще говоря, поместить всё в один большой раскрывающийся список, но не так-то всё просто! Во-первых, это было бы неудобно для пользователя, а во-вторых, это невозможно сделать, так как в этом случае будет открываться внушительный список, который просто не поместится на странице! Представьте себе, что при нажатии на кнопку открывается список, состоящий из 40 и более строк! Что бы всё это поместилось на экране придётся делать такую ширину строки в списке, что прочитать содержимое можно будет только с лупой!
Есть другой вариант: создать раскрывающийся список первого уровня с пунктами "Часть 1", "Часть 2", "Часть 3" и т.д., а для каждого из этих пунктов создать раскрывающиеся списки второго уровня, и уже к ним привязать все материалы, т.е. приблизительно так:
Но всё равно списки второго уровня получатся слишком длинными. Поэтому нужно использовать третий вариант.
Смысл третьего варианта заключается в том, что пункты списка первого уровня будут открывать не списки второго уровня, а блоги категорий, т.е. каждый их них будет выводить все материалы определённой категории. Это значит, например, что "Часть 1" откроет страницу, на которой будет представлен список материалов категории "Материалы-1", "Часть 2" откроет блог категории "Материалы-2" и так далее. Этот вариант ещё удобен тем, что вы сможете не только без всяких проблем дополнять эти категории материалами, но и вносить различные изменения, например, при необходимости менять их местами, удалять; при этом общая структура меню не будет изменяться, а это довольно важно для поисковых систем, а так же для пользователей, которые уже не раз заходили на ваш сайт и знают его общую структуру.
Порядок работы будет такой: сначала создаётся категория, затем она наполняется материалами и в конце создаётся и настраивается пункт меню. Обратите внимание, что не обязательно всё делать по порядку, так как расположение материалов можно легко изменить!
Создание материала
Будем исходить из того, что текст и рисунки уже созданы (см. главу 4), поэтому теперь необходимо всё это перенести на сайт и правильно оформить. Для начала в административной панели через меню заходим на Материалы > Менеджер материалов > Создать материал и на открывшейся странице прописываем название; создание алиаса лучше всего доверить системе:
Далее устанавливаем категорию для данного материала:
Нажимаем Сохранить .
В процессе работы над материалом, особенно большим, рекомендуется периодически сохранять внесённые изменения что бы избежать случайной потери данных!
Копирование текста в текстовый редактор
Теперь нужно внести текст. По умолчанию в административной панели стоит очень удобный редактор, предоставляющий администратору большие возможности, а то, что в редакторе не предусмотрено, можно просто прописать в исходном коде (об этом будет рассказано позже, в другой части).
Стоит иметь ввиду такую особенность редактора: не все браузеры имеют прямой доступ к буферу обмена. Что это значит? Это значит, что для выполнения некоторых операций с текстом нужно использовать определённые сочетания клавиш, например, Ctrl + C ("Копировать"), Ctrl + V ("Вставить"), Ctrl + X ("Вырезать") и другие. Надо сказать, что такими сочетаниями клавиш во время работы вообще очень удобно пользоваться; вы можете просмотреть и распечатать список таких клавиш здесь.
Открываем созданный для первой главы текст и полностью его копируем, т.е. выделяем и нажимаем Ctrl + C. Обратите внимание: если вы для наглядности вставляли в текст изображения (например, редактор MS Word такое позволяет делать), то эти изображения нужно перед копированием удалить; вместо них можно временно прописать "1", "2" и так далее, просто что бы не забыть, что куда вставлять. И ни в коем случае не удаляйте тексты после копирования на сайт, сохраните оригиналы! Эти тексты пригодятся сразу после перенесения сайта на хостинг, а вот для чего - об этом поговорим в другой главе.
После копирования (внесения текста в буфер обмена) переходим в менеджер материала, кликаем на пустое поле текстового редактора (появится моргающий курсор) и нажимаем Ctrl + V. Скопированный текст появится в редакторе, но выглядеть он будет не совсем так, как выглядел изначально. Далее нужно привести его в соответствующий вид, оформить, вставить изображения и так далее.
Установка шрифта для страниц
Теперь нужно установить шрифт. Обратите внимание на то, что для всех (или большинства) материалов сайта лучше всего применять общие настройки оформления, т.е. не должно оказаться так, что в одном материале в качестве основного шрифта применён Arial, а в другом – Georgia и т.д. Точно так же должны быть "стандартно" для данного сайта оформлены заголовки и всё остальное. Всё это нужно хорошо продумать, может быть даже немного поэксперементировать; также рекомендуется куда-либо записать данные о всех применяемых шрифтах, цветовых оформлениях и т.п., что бы потом, при создании новых материалов, не вспоминать какими параметрами вы пользовались.
Для выставления основного шрифта выделяем весь текст, выставляем желаемый шрифт (1), размер шрифта (2) и его выравнивание (3) (рис.124):
Теперь весь текст будет иметь один и тот же шрифт, размер и выравнивание. На выравнивание обратите особое внимание: вариант, показанный на рис.124, наиболее предпочтителен, так как выравнивает текст на всю ширину страницы и именно такой текст воспринимается лучше, приятнее для глаз: посмотрите любую книгу или статью в газете – там всегда применяется именно такое выравнивание; а вот сайты, где текст не выравнивается на всю ширину страницы, смотрятся как не слишком профессионально сделанные.
Вставка изображений
Для удобства дальнейшего редактирования материала лучше сразу внести все рисунки, расставить их по своим местам. Для внесения рисунка в текст сначала его нужно скопировать на сайт, так же, как это было сделано при установке "шапки" сайта (см. глава 8, "Как загрузить и вставить изображение?"). Можно отдельно копировать изображения через медиа-менеджер, а затем вставлять их при создании текста, но можно это сделать прямо из текстового редактора. В любом случае сначала наведите курсор на то место, куда должно быть вставлено изображение, а затем воспользуйтесь одним из подходящих вариантов:
В первом варианте вы сможете ввести адрес изображения, которое уже загружено на сайт, например, images/Foto1.png. Адрес, который вы указываете, начинается от корня сайта (без "/"), как правило, это папка images. При вводе обратите внимание на регистр: названия папок и файлов должны полностью соответствовать тому, что вы указываете, нельзя, например, вместо images/Foto1.png писать Images/foto1.png, для системы это будут разные изображения.
Во втором, более удобном и простом варианте можно всё сделать не закрывая текстовый редактор, при этом порядок действий практически такой же, как и при установке изображения в "шапку" сайта. Хотя всё это уже было описано ранее в главе 8, коротко повторим ещё раз.
- жмём на соответствующую кнопку (рис.125, 2);
- в самом низу открывшегося окна находим блок загрузки файлов;
- нажимаем кнопку "Выбрать файлы" и выбираем соответствующий файл;
- после того, как название файла появится рядом с кнопкой, жмём "Загрузить";
- после загрузки кликаем на загруженный файл (появится зелёный чекбокс) и нажимаем "Вставить".
Небольшой "секрет", касающийся вставки изображений при помощи текстового редактора. Как правило, такие рисунки должны находиться по центру страницы, но как это сделать? Всё просто! То, что вы вставляете, является для редактора абзацем, поэтому достаточно просто выделить изображение и выставить для него выравнивание как и для обычного текста (см. рис.123), только вариант выравнивания должен быть в этом случае применён другой: "по центру".
Описанным выше способом вставляем все изображения на страницу и приступаем к следующему действию: оформлению заголовков.
Оформление заголовков
Заголовки играют важную роль не только в восприятии материала пользователем, но и важны для правильной работы поисковых систем, поэтому их надо не просто оформлять с помощью изменения текста (увеличения размера, подчёркивания и т.п.), а указывать именно как заголовок.
Заголовки бывают шести разных уровней – от самого главного (важного) до самого небольшого; где какой должен быть заголовок – решать вам, но не забывайте о том, что все заголовки на сайте должны быть оформлены в одном стиле. Так как заголовок материала, который мы указываем в отдельном поле редактора, уже имеет первый уровень, все остальные заголовки можно делать со второго по шестой. Так же стоит учесть, что оформление заголовков, установленное по умолчанию, можно изменить, но это уже тема для отдельной главы.
Для того, что бы оформить какой-то текст в качестве заголовка необходимо:
- выделить данный текст;
- кликнуть на раскрывающееся меню со словом "Параграф" (рис.126);
- выбрать нужный заголовок.
Таким способом оформляем все заголовки на странице и переходим к созданию якорей.
Создание якорей
Что такое якорь? Это определённая точка на странице, метка, доступ к которой осуществляется по специальной ссылке; при этом страница откроется таким образом, что строка, в которой установлен якорь, будет находится в самом верху окна браузера.
Для чего это нужно? В первую очередь для того, что бы создать в самом верху материала список из таких ссылок; это позволит пользователю быстро перейти к интересующему его разделу. Так же ссылки на якоря можно использовать для перехода с одного материала на определённое место другого. Если ссылка используется в пределах одного материала, то она выглядит очень просто:
#ИМЯ_ССЫЛКИ,
где в качестве имени вы можете указать всё, что угодно. Если же вы делаете ссылку с одной страницы на якорь другой, то сначала указывается адрес страницы:
htths://my_site.ru/page_1#ИМЯ_ССЫЛКИ.
Не забудьте, что использование кириллицы не допускается!
Как создаются якоря и ссылки на них? Для начала продумываются те места, где будут установлены якоря. Это может быть любая строка, но чаще всего якоря ставят вместе с заголовками. Далее вверху страницы создаются соответствующие строки (будет правильно, если текст совпадёт с текстом в заголовках):
Теперь устанавливаем якоря. Для этого наводим курсор на нужное место и кликаем на соответствующий значок:
В открывшемся окошке нужно ввести идентификатор id; данный идентификатор подбирается по вашему усмотрению (не применяйте кириллицу!). После ввода жмём "ОК" и видим результат проделанных действий:
Далее нужно привязать ссылки на эти якоря к нужному тексту. Для этого выделяем нужный текст и жмём на значок ссылки:
В открывшемся окне есть поле с раскрывающимся списком якорей; кликаем на нужный якорь (при этом он появится в поле адреса, например, такой: #m1) и жмём "ОК":
Всё, теперь данный текст является ссылкой на определённую метку на странице.
Оформление списка меток в начале страницы
После того, как вы тоже самое проделаете со всеми другими строками, можно оформить эти строки так, что бы они отличались от основного текста (рис.132). Для этого выделим их все сразу (1), после чего можно, например, применить курсив и/или жирное начертание (3), выбрать другой тип шрифта (4) и его размер (5), а вот цвет менять не стоит, так как по традиции все ссылки автоматически выделяются синим:
Так же можно оформить эти строки как маркированный список (2), однако если вы будете устанавливать для статьи рисунок (на вкладке Изображения и ссылки), то этого делать не стоит.
В результате получим следующее:
В данном варианте применён шрифт Comic Cans MS, размер 14.
Оформление текста
Если в тексте должны быть созданы ссылки на другие сайты, то им нужно сразу присвоить соответствующие адреса, а вот с ссылками на страницы создаваемого сайта, которые очень важны для поисковых систем, несколько сложнее, так как их можно сделать только на те страницы, которые уже созданы. Выход из этой ситуации простой: в процессе создания материалов отмечайте (просто где-нибудь записывайте) те ссылки, которые нужно будет создать в конце работы над сайтом, когда все материалы будут на своих местах.
Процесс создания ссылок аналогичен процессу создания ссылок на якоря, описанному выше: выделяем нужный текст, жмём на значок ссылок (рис.130), вводим адрес и нажимаем "OK"; при этом цвет текста изменится на стандартный синий. Есть и ещё более короткий способ вставить ссылку:
- в браузере в отдельном окне открываем нужную страницу;
- кликаем на строку браузера и нажимаем "Копировать", т.е. вводим адрес страницы в буфер обмена;
- в редакторе материала выделяем нужное слово или нужный текст и при помощи сочетания клавиш Ctrl + V присваиваем выделенному содержимому ссылку.
Так же вы можете (рис.134):
- оформить какие-то слова или небольшие части текста в виде жирного начертания, курсива или подчёркивания (1);
- установить выравнивание отдельных частей текста (2);
- установить тип списка (3);
- отрегулировать отступы (4);
- изменить цвет текста или создать фон для букв (5);
- создать таблицу (6);
- вставить специальные символы, смайлики, горизонтальную линию и даже видео (7);
- вставить цитату (8):
И ещё нужно отметить одну важную возможность, предоставляемую редактором: редактирование непосредственно кода страницы (значок "<>"), но для этого нужно знать основы языка разметки HTML (смотрите в Языки программирования: HTML).
Все выше указанные дополнительные варианты оформления текста вы можете применять по своему усмотрению, но обратите внимание на то, что во-первых, текст при этом не должен стать похож на новогоднюю ёлку, т.е. всё должно быть в меру, а во-вторых, как уже было сказано не раз, ко всем страницам должен применяться одинаковый, общий стиль оформления.
При работе с текстом обязательно внимательно прочитайте его ещё раз, возможно возникнет желание что-то изменить, дописать, или наоборот, удалить. Так же не забудьте проверить текст на ошибки: сайты с ошибками в тексте вызывают у большинства пользователей негативное отношение.
После того, как работа над материалом будет закончена, нажмите кнопку Сохранить и закрыть .
Теперь самое время создать соответствующий пункт меню. В главе 10 уже был создан один пункт и к нему был "привязан" один материал; поэтому сейчас рассмотрим другой вариант:
Создание пункта меню для блога категории
В административной панели открываем Меню > Все пункты меню и жмём на кнопку "Создать"; при этом откроется уже знакомый менеджер.
Здесь вписываем заголовок ("Часть 1"), затем устанавливаем тип меню, но в отличии от предыдущего раза выбираем Блог категории, а следующем поле устанавливаем нужную категорию ("Материалы-1"):
В правой колонке устанавливаем в поле Меню значение "Main Menu", а в поле Родительский элемент - значение "Учебные материалы". Это значит, что созданный пункт будет принадлежать главному меню сайта, но не будет являться его корневым пунктом, а будет находится в раскрывающемся списке первого уровня:
Обратите внимание на то, что вкладки в Менеджере меню на сей раз другие; это значит, что вкладки менеджера зависят от того, пункт какого типа мы создаём. Прежде чем дальше что-то настраивать, давайте сохраним созданный пункт (кнопка Сохранить ) и откроем страницу сайта ("Просмотр сайта" в нижнем левом углу), что бы посмотреть на то, что получилось. В результате откроется всё тоже самое, что и было раньше, но при наведении курсора на "Учебные материалы" теперь открывается список, в котором пока есть только один элемент:
Жмём на "Часть 1" и видим, что открылся материал ("Глава 1"), причём полностью. Но так быть не должно, ведь это страница блога материалов, на которой должны выводится только заголовки или небольшие части! Это значит, что нужно внести некоторые изменения в настройках блога и в самом материале, но об этом подробно уже в следующих статьях.
