Бриф на разработку веб

1
Инструкция по работе с содержанием нового портала МУБиНТ
Содержание
Инструкция по работе с содержанием нового портала МУБиНТ ............................................. 1
Содержание ................................................................................................................................... 1
1. Начало работы ....................................................................................................................... 1
2. Наполнение страницы ........................................................................................................... 2
2.1. Занесение текста на страницу ........................................................................................... 2
2.2. Если у вас недостаточно прав ........................................................................................... 4
2.3. Редактирование текста. ..................................................................................................... 5
2.4. Добавление таблицы ......................................................................................................... 6
2.5. Добавление «Изображения» ............................................................................................ 7
2.6. Создание ссылки в тексте ................................................................................................ 10
2.7. Создание включаемой области в правой части центральной колонки ...................... 11
3. Создание и редактирование элементов сайта ................................................................. 12
3.1. Создание и редактирование элементов инфоблока .................................................... 12
3.2. Создание страницы и добавление ее в меню ............................................................... 13
3.3. Создание или наполнение «Сотрудники» ..................................................................... 13
На 02.12.09 Новый сайт находится по адресу: http://newweb.mubint.ru/. Если вы хотите
зайти на сайт из дома или с другого компьютера не находящегося в сети МУБиНТ, то
используйте адрес: http://web.mubint.ru/.
В ближайшее время сайт будет перенесен на официальный домен mubint.ru.
Для работы с системой управления 1С-Битрикс необходимо зарегистрироваться на сайте
и пройти небольшой бесплатный он-лайн курс обучения Визуальный HTML-редактор:
http://www.1c-bitrix.ru/support/course/test.php?COURSE_ID=21&ID=19
1. Начало работы
1.
2.
3.
4.
Для работы с порталом используйте Internet Explorer.
Зайдите на главную страницу нового портала МУБиНТ.
В правом верхнем углу нажмите ссылку «Вход»
В открывшемся окне введите логин и пароль. Если его у вас нет, вы можете
запросить его у Щелкунова Александра, с указанием раздела, который вам
необходимо отредактировать. Н.р. (Подразделения/Институты/Институт
управления.
5. Вместо ссылки Вход должен появиться ваш логин.
6. Если этого не произошло, повторите ввод логина и пароля, проверьте раскладку
клавиатуры и язык (должен быть английский язык).
7. Далее действуйте по инструкции, внимательно читая каждый пункт, не смотря на
то, что он может показаться очевидным. Так же вы можете воспользоваться
гиперактивным содержанием, расположенном в начале документа.
Перемещайтесь по нему, нажав CTRL и щелкнув по необходимому вам пункту.
2
8. Каждый раз после внесения изменений проверяйте соответствие внешнего вида
занесенной информации дизайн макетам, которые прилагаются к инструкции.
2. Наполнение страницы
2.1.
Занесение текста на страницу
1. Откройте документ либо страницу на каком-либо сайте, с которой вы хотите
перенести содержание на страницу нового портала МУБиНТ.
2. Откройте программу Блокнот (Пуск/Все программы/Стандартные/Блокнот).
3. Перейдите на главную страницу нового портала МУБиНТ, проверьте, авторизованы
ли вы. Если вы авторизованы, в правом верхнем углу должен быть отображен ваш
логин.
4. Найдите необходимую вам страницу на новом портале МУБиНТ и перейдите на
нее. Вы можете найти любую необходимую вам страницу в Главном меню,
которое расположено в левой колонке.
5. После того как вы перешли на страницу, которую необходимо наполнить,
перейдите на вкладку «Редактирование», расположенную в самом верху
страницы. На панели управления нажмите стрелочку рядом с кнопкой «Изменить».
В появившемся списке необходимо выбрать Панель управления/Текущую
страницу и кликнуть один раз. См. скриншот ниже.
6. Откройте окно документа либо страницу, с которой вы хотите перенести текст на
страницу нового портала МУБиНТ.
Для дальнейшей работы было бы удобно использовать комбинации клавиш.
Команда
Комбинация клавиш (английская раскладка)
нажать CTRL и удерживая его нажать
3
Выделить весь текст
Скопировать выделенный текст
Вставить выделенный текст
Отменить предыдущее действие
Вызов поиска слова в текущем окне
Быстрый переход по вкладкам
браузера
Переход по открытым окнам
необходимую клавишу с буквой
CTRL + a
CTRL + c
CTRL + v
CTRL + z
CTRL + f
CTRL + TAB
ALT + TAB
7. Выделите и скопируйте (CTRL + c) фрагмент текста, который вам необходимо
вставить на страницу нового портала.
8. Откройте окно программы «Блокнот».
9. Вставьте туда скопированный текст (CTRL + v).
10. Скопируйте вставленный в блокнот текст (CTRL + a потом CTRL + c)
11. Перейдите вкладку браузера с открытой страницей редактирования. Вставьте сюда
скопированный из блокнота текст. (CTRL + v).
12. Возможно, вы увидите окно, указанное на скриншоте ниже. Выберете «Разрешить
доступ». См. скриншот ниже.
13. После того как вы вставили текст, нажмите кнопку «Применить», которая
расположена под окном вставки текста. После этого текст сохранится, и вы можете
перейти к его редактированию. См. скриншот ниже.
4
2.2.
Если у вас недостаточно прав
Если вы на каком либо этапе получили сообщение, что у вас недостаточно прав,
попробуйте выполнить следующее:
1. Найдите в главном меню сайта страницу, которую вам необходимо отредактировать.
2. Перейдите на вкладку «Редактирование». Найдите пункт «Документооборот»,
кликните по стрелке рядом с ним и выберете пункт «Изменить страницу».
3. В появившейся форме редактирования после окончания работы с содержимым
укажите статус «Готово».
4. Все дальнейшие действия аналогичны описанным в остальных пунктах, за
исключением того, что вы не сможете посмотреть, как страница будет выглядеть на
вкладке «Просмотр» и «Редактирование». Изменения будут добавлены на сайт
только после проверки страницы администратором. См. скриншот ниже.
5
2.3.
Редактирование текста.
1. Если вам необходимо отредактировать текст, проделайте действия, необходимые
для открытия страницы в режиме редактирования, если это еще не сделано
(пройдите шаги 4-5, описанные в разделе «Занесение текста на страницу»).
2. В раскрывающемся списке «Портал» выберете «Портал (контент)» см. скриншот
следующего шага. См. скриншот ниже.
3. Для того чтобы выделить заголовок в тексте, необходимо отделить его клавишей
«Enter» от другого текста (если он еще не отделен), выделить фрагмент текста, и
6
выбрать в поле «(Normal)» один из стилей: Heading 1, Heading 2, Heading 3).
Желательно для внутренних заголовков страницы использовать стиль Heading 2.
См. скриншот ниже.
Кнопка
«Нумерованн
ый список»
Кнопки
«Жирный»
«курсив»
«Подчеркнутый»
4. Для того чтобы создать пронумерованный или промаркированный список
необходимо разделить строчки, которые должны выглядеть в виде списка кнопкой
«Enter» (если они еще не разделены), затем выделить эти строчки и нажать кнопки
Маркированный или пронумерованный список. См. скриншот выше.
5. Если вы хотите выделить фрагмент текста жирным, курсивом, либо подчеркнутым,
используйте для этого соответствующие кнопки.
6. Нажмите кнопку «Сохранить».
7. Затем проверьте правильность отображения во внешней части сайта на вкладке
«Просмотр».
2.4.
Добавление таблицы
1. Если вам необходимо добавить на страницу таблицу, проделайте действия,
описанные в шаге 1, 2 раздела «Редактирование текста», если они еще не были
проделаны.
2. Поставьте курсор в то место, где вы хотите создать таблицу. Кликните по значку
«Таблица», расположенному на панели задач редактора, выберете количество
строк, столбцов, укажите ширину рамки (желательно 1). В поле Style выберете
стиль info. В случае если таблицу не нужно растягивать по ширине необходимо
выбрать в поле Style стиль info1. Больше никакие параметры желательно не
указывать. Затем нажмите кнопку «Сохранить». См. скриншот ниже.
7
Вставить таблицу
3. После этого вы можете ввести в колонки текст. При этом если вы его копируете,
откуда-либо, то необходимо его перед вставкой очистить через Блокнот (описано
выше).
4. После заполнения таблицы текстом, проверьте, нет ли лишних знаков перевода
строк, если они есть, их желательно удалить.
5. После таблицы желательно поставить «Enter».
6. Если для форматирования таблицы необходима выделенная шапка, перейдите в
режим редактирования в HTML и замените рядом с наименованием каждой
колонки теги <td> на <th> и </td> на </th>.
7. Нажмите кнопку «Сохранить».
8. Затем проверьте правильность отображения во внешней части сайта на вкладке
«Просмотр».
2.5.
Добавление «Изображения»
9. Если вам необходимо добавить в текст изображение проделайте действия,
описанные в шаге 1, 2 раздела «Редактирование текста», если они еще не были
проделаны.
10. Подготовьте изображение для его размещения на сайте. Оно не должно быть
размером более 100 Кб. И шириной не более 250 точек. Название изображения
должно быть на английском языке. Вместо пробелов используйте нижнее
подчеркивание «_».
11. Поставьте курсор в то место, куда вы хотите добавить изображение. Кликните по
значку «Изображение», расположенному на панели задач редактора.
12. В появившемся окне в пункте «Путь к изображению» кликните кнопку с тремя
точками. См. скриншот ниже.
8
Кнопка
«Изображение»
13. В появившемся окне перейдите на вкладку «Загрузить фаил». См. скриншот ниже.
Переход на
вкладку
«Загрузить фаил»
14. В пункте «Загрузить файл» кликните на кнопку «Обзор» и найдите на вашем
компьютере файл изображения, который вы хотите вставить на страницу. Нажмите
кнопку «Загрузить». См. скриншот ниже.
9
15. В появившемся окне вы можете указать Название (title) и альтернативный текст –
это текст, который будет отображаться при наведении на иллюстрацию мышкой.
Больше никакие параметры желательно не указывать. См. скриншот ниже.
16. Затем кликните по Изображению, чтобы оно выделилось рамкой (появились
вокруг маленькие квадратики, активируйте вкладку «Свойства» и выберете в поле
«Стиль» стиль «cimg». См. скриншот ниже.
Рамочка
Активизация
вкладки
«Свойства»
17. Нажмите кнопку «Сохранить».
10
18. Затем проверьте правильность отображения во внешней части сайта на вкладке
«Просмотр».
2.6.
Создание ссылки в тексте
1. Если вам необходимо в текст добавить ссылку, проделайте действия, описанные в
шаге 1, 2 раздела «Редактирование текста», если они еще не были проделаны.
2. Выделите фрагмент текста, который хотите оформить ссылкой, и кликните кнопку
«Ссылка». См. скриншот.
3. Если вы хотите сделать ссылку на какую то интернет страницу сайта, то в пункте
«Тип» выберете пункт Ссылка на другой сайт. Затем в пункте URL: в правое поле
скопируйте адрес необходимой вам страницы сайта. Затем перейдите на начало
ссылки и если там есть символы http:// - удалите их. Затем нажмите кнопку
сохранить. Если все оформлено правильно, ссылка должна окрасится в синий цвет.
4. Если вы хотите убрать ссылку, кликните по ней правой кнопкой мыши и выберете
«Удалить ссылку».
Кнопка
«Ссылка»
5. Если вы хотите чтобы фрагмент текста являлся ссылкой на скачивание какого-либо
документа, то в пункте «Тип» выберете «Ссылка на документ на сервере». В пункте
«Документ» кликните на кнопку с тремя точками. См. скриншот ниже.
11
2.7.
Создание включаемой области в правой части
центральной колонки (только для уверенных пользователей)
1. Перейдите на вкладку «Панель управления»
2. На вкладке «Панель управления» в разделе «Файлы и папки/ D: Portal найдите папку,
в которой размещена страница, для которой необходима включаемая область. Для
того чтобы найти раздел, посмотрите путь, где расположена соответствующая папка с
файлами в адресной строке н.р. путь:
http://newweb.mubint.ru/management/council.php значит что папка называется
management.
3. Создайте страницу с именем <имя страницы>_inc.php и укажите шаблон страницы
«Включаемая область для страницы».
4. Если необходимо, наберите заголовок размещаемого блока, выделив его заголовком
Heading 2. Н.р. «Консультант», «Сотрудник» «Контакты» и пр.
5. Активируйте вкладку «Компоненты 2.0». Из раздела «Компоненты
портала/инфоблоки вы можете добавить компоненты «Сотрудник» и «Контакты»
«Отзывы», перетащив их под необходимый заголовок.
6. Затем проверьте правильность отображения элемента во внешней части сайта на
вкладке «Просмотр».
7. Если внешний вид элемента включаемой области не соответствует стандарту (пример
оформления блока сотрудник, контакты, отзывы web.mubint.ru/departments/training/ege/ и
web.mubint.ru/departments/service/lmm/index.php). Вернитесь в редактирование
документа, переключитесь на HTML код и проверьте, нет ли там лишних символов
(н.р. <H2>), определяющих стиль компонента. Если они там есть их необходимо
удалить. Если вы не можете это сделать, вышлете запрос администратору с указанием
ссылка на страницу, с возникшей проблемой.
12
8. Обратите внимание, что включаемый блок сравнительно небольшой и не следует
размещать в нем излишнее количество контента.
3. Создание и редактирование элементов сайта
3.1.
Создание и редактирование элементов инфоблока
Инфоблок – это четко структурированная информационная единица. В виде инфобоков
оформлены Сотрудники, События, отзывы, Партнеры, Слухи, FAQ, Специальности и пр.
1. Перейдите на вкладку «Панель управления»
2. В левой части найдите и откройте раздел «Содержание портала»
3. Найдите и откройте необходимый вам инфоблок н.р. «Сотрудники», выберете
необходимую папку, если они есть. Если подходящей папки нет, создайте ее кликом
на кнопку «Добавить раздел». Если у вас не прав на создание, вышлете запрос на ее
создание у администратора.
4. После обнаружения или создания папки, зайдите в нее, нажмите на стрелочку справа
от названия любого существующего элемента и выберете пункт «Копировать», либо
нажмите кнопку «Добавить элемент».
Вкладка
«Панель
управления»
Кнопка
«Добавить
элемент»
Кнопка
«Добавить
раздел»
5. Заполните, скорректируйте либо замените информацию, указанную в полях для ввода
ТОЛЬКО на вкладке «Элемент». В поле «Активность» должна стоять галочка. В полях
«Начало активности» и «Окончание активности» значения выставлять не надо.
6. Если вы на вкладке «Элемент» обнаружили панель редактирования текста, вносите в
это поле текст ТОЛЬКО через очистку программой «Блокнот» (см. выше).
Постарайтесь НЕ использовать функционал панели редактирования текста, т.к. это
может привести к некорректному отображению информации на сайте. Обратите
внимание на требования к загружаемым фотографиям и строго придерживайтесь их!
7. Если вы обнаружили необходимый вам элемент инфоблока в какой-либо папке, и вам
необходимо скопировать его в другую папку, проделайте следующие действия.
13
Скопируйте элемент. Перейдите на вкладку «Разделы» и выберете раздел, куда вам
необходимо скопировать этот элемент. Затем вы можете зайти в папку,
соответствующую этому разделу и отредактировать скопированный ранее элемент.
8. Затем проверьте правильность отображения элемента во внешней части сайта на
вкладке «Просмотр».
3.2.
Создание страницы и добавление ее в меню (только для
уверенных пользователей)
5. На вкладке «Панель управления» в разделе «Файлы и папки/ D: Portal, найдите папку,
в которой необходимо создать дополнительную страницу. Для того чтобы найти
раздел, посмотрите путь, где расположена соответствующая папка с файлами в
адресной строке н.р. путь: http://newweb.mubint.ru/management/council.php значит
что папка называется management.
6. Для создания страницы нажмите кнопку «Новый файл». Выберете шаблон
«Стандартная страница» - если это простая страница с текстом, таблицей, картинками,
либо «Включаемая область для страницы - если это страница, состоящая из
инфоблоков, н.р. «Сотрудники».
7. Укажите имя файла (обязательно английскими буквами без пробелов), и заголовок
страницы. Если это необходимо на данном этапе, добавьте содержимое страницы или
разместите необходимый компонент. На вкладке Редактирование укажите
необходимые данные.
8. Скопируйте название созданного раздела и название файла. Затем зайдите в фаил
«Меню типа Left» в режиме редактирования. Добавьте название раздела и название
файла, так же надо указать путь к файлу в виде н.р. /management/council.php
3.3.
Создание или наполнение «Сотрудники» (только для
уверенных пользователей)
1. Если в вашем разделе есть страница типа сотрудники, но при добавлении элементов в
соответствующую папку, на странице Сотрудники элементы не отображаются или
страницы сотрудники нет, вам следует, либо запросить размещение компонента
«Сотрудники» на указанной вами странице, либо проделать следующие действия.
2. Перейдите на вкладку «Панель управления»
3. Зайдите в папку, соответствующую разделу, где размещена страница типа
«Сотрудники» откройте ее (или создать ее), укажите для нее шаблон страницы
«Включаемая область для страницы».
4. Удалите весь имеющийся в поле под панелью редактирования, текст.
5. Во панели «Компоненты 2.0» откройте вкладку «Компоненты Портала/Инфоблоки.
Найдите компонент «Список сотрудников» и перетащите на страницу.
6. Кликните по нему мышкой и выберете раздел, содержимое которого должно
отображаться на этой странице.
7. Затем проверьте правильность отображения элемента во внешней части сайта на
вкладке «Просмотр».