Создание и обслуживание школьного сайта на портале www. *****
/методические рекомендации/
Раздел I
Создание структуры сайта и навигации, добавление новых страниц
На странице, где находятся все школьные сайты, внизу, я прицепил два файла – две формы таблиц для сайта. Одна – таблица главной страницы, вторая – таблица для остальных страниц. Скачайте их. Вам понадобится только таблица для остальных страниц (вы её узнаете – там есть только одна фраза “На главную”- файл forma. doc).
Не спешите помещать материалы на страницы! Материалы добавите потом. Все положения, устав и прочее – потом!
Сначала сделайте навигацию сайта. Чтобы получался переход со страницы на страницу, с Главной на другие и обратно. Для этого:
1. Открываете главную страницу вашего сайта (где Новости и большая таблица). Копируете ссылку на неё. Вот так на примере Бочкарёвской ООШ: 
2. Вставляете ссылку на чистый лист Ворда:
Эта ссылка будет использоваться вами часто. И она же совпадает с названием вашего сайта. На ней должны быть в дальнейшем Новости.
Далее для удобства работы вы можете открыть новую вкладку в Internet Explorer и в ней ещё раз открыть *****. Если это вам неудобно – можете работать без новой вкладки. Но с вкладкой лучше. Привыкайте.
3. Выбираем «Создать материал» - «Запись в блоге». Записываем название «Визитка» в поле «Заголовок». А в поле «Тэги» - что-нибудь, например, «Визитка …вашей… школы». Помещаем таблицу в чисто поле. Для этого: откройте в Ворд файл с таблицей, выделите таблицу (можно щёлкнуть левой кнопкой по значку в виде квадрата в левом верхнем углу таблицы – она выделится вся). Команда «Копировать». А вставлять надо по значку «Вставить из Wodr». Если появится окно с подтверждением нажатия каких-либо клавиш – сделайте, как будет там описано. Таблица должна вставиться. Потом помещаем материал в поля таблицы. А теперь – самое главное: выделяем курсором мыши слова «На главную» и создаём гиперссылку (значок в виде глобуса). В поле гиперссылки копируем из листа Ворд вашу ссылку и жмём «Ок». (Перед этим – не забудьте нажать стрелку вправо на клавиатуре, чтобы исчезло лишнее «http»). Должно выглядеть, как на рисунке ниже. Потом – «Ок».
4. Вставляем:
5. Теперь жмём «Сохранить» внизу страницы. Полдела сделано!
6. Идём дальше. Не спешите уходить с вашей страницы! Вам нужно взять гиперссылку только что созданной страницы. Для этого вы выделяете адрес страницы вверху в адресной строке и жмём «Копировать»:
ЗАМЕЧАНИЕ!! Эту операцию проделываем после того, как вы нажали «Сохранить», а не тогда, когда вы редактируете страницу и впечатываете в неё текст или вставляете картинку, ещё не нажав «Сохранить».
7. Итак, ссылка выделена и скопирована в буфер обмена компьютера. Дальше открываем страничку Ворд, на которой у вас ссылка на главную и вставляем ниже ещё одну ссылку, командой «Вставить». Вот так:
(КРУПНЫМ ШРИФТОМ ПОКАЗАНО ПОЯСНЕНИЕ, ЧТО ЗА ССЫЛКИ СКОПИРОВАНЫ. Пояснения делать необязательно).
8. После этого мы переходим на Главную страницу сайта нажав «На главную».
9. На Главной странице сайта вы выбираете кнопку «Редактировать» (это вверху):
10. Завершающий этап: теперь вы делаете гиперссылку из меню вашего сайта на ту страницу, что сделали и сохраняетесь. Подробнее:
Выделяете в меню нужную вам строку, отражающую название недавно созданной вами страницы, например, «Визитка». Создаёте гиперссылку с помощью значка, похожего на глобус, выделяете мышкой строку со ссылкой, что записана у вас на листе Ворд («Новая страница» - на моём рисунке), команда «Копировать». Затем вставляете скопированный текст в поле с гиперссылкой (не забываем нажать стрелку вправо на клавиатуре для удаления «http»!). Вот так:
Жмём «Ок» в окне гиперссылки». Сохраняем страничку кнопкой «Сохранить».
Ура-а! Готово!
Вы делаете такие связи со страницами и Главной страницей (навигация, называется) ДЛЯ ВСЕХ СТРАНИЦ СВОЕГО САЙТА. Для всех! Затем, проверяете как работают ссылки, получается ли попасть на все ваши страницы по очереди и вернуться назад. И только потом начинаете эти страницы заполнять.
После этих действий Главную уже не трогаем. Она готова. Главную страницу вашего сайта вы будете «трогать», когда будете обновлять новости, не забывая писать дату последнего обновления.
Чтобы заполнить материалом новые страницы, вы переходите на них, жмёте «Редактировать» и заполняете.
ВНИМАНИЕ!!!
1. КОГДА ВЫ УЖЕ СОЗДАЛИ НАВИГАЦИЮ, И ВСЁ РАБОТАЕТ, НЕ МЕНЯЙТЕ ЗАГОЛОВОК СТРАНИЦ! Иначе, навигация у вас нарушится.
2. Не делайте текст меню на Главной странице слишком крупным. У вас крупный текст может отображаться некорректно, что-то может пропадать из меню. Используйте размер текста не более 14 пт.
3. И НИ В КОЕМ СЛУЧАЕ НЕ МЕНЯЙТЕ ЗАГОЛОВОК НА ГЛАВНОЙ СТРАНИЦЕ ВАШЕГО САЙТА!!! ВЫ РИСКУЕТЕ ПОТЕРЯТЬ ВАШ САЙТ ЦЕЛИКОМ!!! На рисунке ниже я показал заголовки страниц Главной и новых. Это – Главная страница сайта:
4. 
А это – новая страница «Визитка»:
На этом создание структуры сайта и навигации (на примере одной страницы) завершено.
Раздел II
Публикация объёмных документов
Иногда, при создании школьного сайта, нужно опубликовать объёмный многостраничный документ, например, Программу развития или Устав и т. п. Но публикация большого документа бывает не всегда удобной при просмотре. Длинный текст неудобно крутить.
Здесь можно поступить по-другому. На созданной странице опубликуйте начало документа (заголовок, титульный лист и т. п.), а ниже напишите фразу, типа «скачать весь документ вы можете внизу страницы». (Можете написать любую подобную фразу, лишь бы было понятно, где искать документ).
Затем, внизу страницы, находите пункт «Приложенные файлы», открываете его. Жмёте «Обзор». Находите ваш документ и нажимаете кнопку «Прикрепить». Файл загружается. Можно добавить много документов к одной странице.
Теперь остаётся только сохранить страницу и всё.
Важное замечание!
Иногда от школы требуется указать ссылку на документ (устав, программу развития и т. п.). Например, такое требование может быть для мониторинговой таблицы. Существует правило указания ссылок: щёлкнув по ссылке – должен открыться весь документ, а не его часть. Поэтому, указывать ссылку на страницу с файлом будет неправильно. Нужно указать ссылку на сам прикреплённый файл.
Для этого поступают так: НА УЖЕ СОХРАНЁННОЙ СТРАНИЦЕ, которую вы сделали, щёлкаем правой кнопкой по прикреплённому файлу и выбираем «Копировать ярлык».
В этом случае, у вас адрес ссылки окажется в буфере обмена ПК. Теперь остаётся только вставить эту ссылку хоть в таблицу, хоть в любой другой документ, хоть в адресную строку браузера. Её можно отправить письмом, вставив в текст письма.
Ваша ссылка готова.
Раздел III
Простая обработка изображение (сжатие, уменьшение размера)
1. Общая информация.
Для размещения в интернете, презентациях и в других случаях часто приходится обрабатывать изображение, выполнять обрезку некоторых его частей, проводить сжатие и т. д.
Фотография, сделанная современным цифровым фотоаппаратом или отсканированный на сканере рисунок, часто имеют большой объём (размер) файла (иногда 4-10 Мбайт или больше). Такие изображения могут не разместиться на сайтах, не отправиться по электронной почте, а компьютер будет долго «думать», обрабатывая вашу презентацию, насыщенную такими изображениями.
В таких случаях нужно проводить простую обработку изображений.
Итак, имеем первоначальное изображение (фотографию). Размер файла – 4,3 Мб. (Очень много!)
Чтобы определить размер файла, нужно навести на него курсор мыши, и через секунду появится подсказка, где будет указан его объём. Второй способ: щелчок правой кнопкой мыши (ПКМ) по файлу. Выбрать «Свойства». И вы увидите его размер.
Примечание: Для публикации изображений на сайтах лучше задавать размер файлов не более 500 Кбайт. А чаще – достаточно 150-200 Кб. Если нет необходимости в качественной картинке (устраивает её маленькая длина и ширина), то можно обойтись даже 20-50 Кбайтами.
В любом случае, 100-500 Кбайт вам вполне достаточно для любых задач, если это, конечно, не публикация фотографии в цветном журнале или книге. В том случае, чем больше размер файла – тем лучше. Но это – не наш случай.
2. Обработка изображения.
Для обработки изображений воспользуемся программой Microsoft Office Picture Manager (2003г) или Microsoft Office 2Не так важен год выпуска программы – они в разные годы идентичны. В моём примере это будет программа Microsoft Office 2010.
Примечание: если на вашем компьютере установлен текстовый редактор Microsoft Office Word, то, значит, и эта программа так же у вас установлена.
Итак, шаги:
1. Находим нужный для обработки файл.
2. Щелчок ПКМ по файлу. В меню выбираем «Открыть с помощью». Наводим курсор на эту надпись, и рядом открывается ещё одно меню (контекстное), в котором вы найдёте эту программу. У неё красный значок. Напомню её название: Microsoft Office Picture Manager 2003 ИЛИ Microsoft Office 2010 (2007).
3. Изображение открывается в программе. Выглядит это почти так:
4. 
5. Нажимаем сверху на панели инструментов кнопку «Изменить рисунки». Появляется панель справа. С помощью этой панели производится обработка изображения. Можно провести обрезку изображения. Выбираете «Обрезка». Передвигая сверху, снизу, справа, слева и по углам чёрные метки, вы можете обрезать изображение. То, что окажется внутри этих меток, то сохранится. Обрежется та часть изображения, которая окажется за метками ближе к краю рисунка.
Примечание: все ваши изменения будут сохранены, если вы нажмёте кнопку «Сохранить» на панели инструментов или в меню «Файл» программы.
6. Как провести сжатие рисунка? Выбираем на правой панели «Сжатие рисунка». Там есть 4 позиции: «Не сжимать» - оставляет как есть; «документов» - сжатие для документов, презентаций, сайтов (самый ходовой режим! Используйте, в основном, его); «веб-страниц» - выбирайте этот режим, если качество картинки не имеет особого значения и предполагается использовать не очень крупный формат рисунка; «сообщений электронной почты» - самое низкое качество, лучше не использовать.
Обратите внимание, что, выбирая режим, ниже на панели отображается размер будущего файла после обработки. Ориентируйтесь на него. После преобразований не забудьте выполнить сохранение.
Примечание: если вы планируете обрезку и сжатие, то сначала нужно обрезать несжатый файл, а потом его сжимать. Так вы сохраните более качественную картинку на выходе.
7. Здесь, на панели, есть возможность применить и другие приёмы обработки (автоподстройку, изменить яркость и другие параметры картинки и др.).
8. После сохранения результата, закройте программу (на любые вопросы программы отвечаем «Да»). Проверьте объём получившегося файла. Иногда это значение отличается от того, что было отображено на панели при обработке.
Примечание: иногда имеет значение не кол-во килобайт файла рисунка, а его размер по длине и ширине (в точках). Тогда вы выбираете в Меню – Изменить рисунки – Изменение размера. После этого вы увидите справа на панели исходный размер рисунка (в точках). Чуть выше, здесь же, на панели, вы можете выбрать режимы нового размера. Например «Стандартные ширину и высоту». И там выбрать нужный размер. Так же, вы можете выбрать произвольные ширину и высоту (длина х ширина), либо процент от исходного размера. Во всех этих случаях новый размер картинки будет показан чуть ниже - «новый размер». Ну забудьте сохранить изменения (Файл – Сохранить).
Теперь – о размерах. Для пользователей мною установлено ограничение размера изображений 640х480 точек, которые они могут помещать на страницу. Но даже такой размер – очень крупный! Оптимальный размер картинок для сайта – 314х235 точек. Можно немного больше, но не более 400 точек. Слишком большие рисунки громоздки, часто разрушают уже выстроенный дизайн сайта.
Раздел IV
Публикация изображений на сайт
Есть, например, новогодняя картинка (или любое другое фото). Как её опубликовать на сайт? Имя файла ng.jpg.
Входим в режим редактирования той страницы сайта, на которую вы хотите поместить изображение.
Появляется примерно, такое окно:
Находим значок «Изображение» (показан стрелкой). Жмём его. Далее, в новом окне, выбираем «Посмотреть на сервере». Открывается папка на сервере, которая отведена специально для вас. В ней будут все файлы, что вы будете публиковать когда-либо. Чтобы опубликовать в неё вашу картинку, нужно нажать сверху «Загрузить». Затем, кнопку «Обзор». После этого найти на своём компьютере уже заранее обработанную, как описано в Главе III, картинку, выбрать её и нажать «Открыть».
В строке вверху, после слова «Файл», появится путь к файлу. Жмём кнопку «Загрузить» (не ту, что жали первый раз, а ту, что расположена сразу за кнопкой «Обзор»).
Через несколько секунд ваш файл загрузится и появится в списке ниже. Выделяем его щелчком левой кнопкой мыши. После этого нажмём кнопку вверху «Отправить для ckeditor». Вот так:
Здесь желательно установить значение «1» (или любое другое) в поля «бордюр», «горизонтальный отступ», «вертикальный отступ». Это придаст картинке симпатичный вид. Жмём «ОК». Всё. Ваша картинка вставлена туда, где до этого находился курсор мыши в тексте страницы. Теперь вы можете переместить вашу картинку, куда вам нравится в пределах вашей редактируемой страницы, уменьшить/увеличить размер картинки за боковые точки на изображении. Картинка закрепится на вашей странице после сохранения изменений, нажав кнопку «Сохранить». Всё.
Замечания:
1. Удаление картинок на сайте производится в режиме редактирования страницы. Выделите картинку мышью (на картинке должны появиться боковые точки!) и нажмите кнопку «Delete» на клавиатуре.
2. Если вы однажды уже загружали картинку и хотите вторично её вставить, например, эту же на другую страницу ещё раз или после удаления хотите её вернуть вновь, то вам не надо снова загружать её на сервер. Она остаётся на сервере в вашей папке даже после удаления кнопкой «Delete». Просто выберите её из списка, который появляется после нажатия на кнопку «Изображение» (см. выше). После её выбора нажмите «Отправить для ckeditor». И далее – по тексту.
Раздел V
Создание красивых кнопок меню и не только меню
Красивая кнопка красит сайт. И это – факт. Как её сделать. Можно использовать два варианта. В первом случае кнопку можно сделать самому, например, в векторном редакторе, даже во встроенном в Word, во втором случае ещё более красивую кнопку можно сделать в специальной программе. Но в любом случае, кнопка – это графический объект, графический файл, к которому вы привяжете гиперссылку. Кнопки на вашем сайте должны быть одного стиля, иначе пестрота будет портить вид.
К сожалению, кнопки, что можно создавать силами самого редактора на сайте (что есть среди инструментов, когда вы правите страницу), могут не работать в некоторых браузерах. Т. е. пользоваться инструментом «Кнопка» не желательно. Вы можете потерять много времени зря.
1. Публикация готовой кнопки на сайт.
Начнём с обратного. Предположим, ваша кнопка уже готова и лежит на Рабочем столе в виде файла button. jpg . Вот она: 
Как её прицепить на сайт?
Процесс «прицепления» состоит из двух шагов – публикации картинки (кнопки) на сайт и создание гиперссылки на кнопке.
Чтобы опубликовать изображение на сайте вы поступаете точно так же, как описано в этой инструкции в главе IV как и любое изображение. Помещаете кнопку в поле слева, где меню. Лучше сначала опубликовать сразу все кнопки, что вы собираетесь помещать на сайт и расположить их в нужных местах.
Теперь привязываем гиперссылки. Если у вас уже есть меню, в котором перечислены страницы, то вам надо эти гиперссылки прикрепить к соответствующим кнопкам. Для этого в режиме просмотра страницы (для перехода в режим просмотра нажмите «Сохранить» внизу страницы) вам нужно скопировать, например, в Word, все гиперссылки. Так проще, чтобы не запутаться. Я бы это сделал так:
новости | http://www. *****/blog/bochkarevskaya-oosh |
визитка | http://www. *****/blog/vizitka |
НФП | http://www. *****/blog/nfp |
РСОКО | http://www. *****/blog/rsoko |
… и так все пункты меню сайта до конца.
Получение гиперссылки возможно следующим путём: щелчок правой кнопкой мыши по пункту меню, выбрать «Копировать ярлык». Теперь вставляем её в таблицу справа, а слева пишем название пункта.
Дальше всё просто. Word со ссылками открыт рядом. Вы выделяете первую гиперссылку из таблицы Ворда, команда «Копировать». Открываем вашу страницу на сайте, где лежат ваши кнопки, входим в режим редактирования. Выделяем нужную кнопку, соответствующую вашей гиперссылке, жмём значок в виде глобуса на панели инструментов редактора сайта «Вставить/редактировать гиперссылку».
Вставляем в поле для вставки гиперссылки вашу скопированную ссылку (щелчок правой кнопкой мыши в поле – Вставить). Жмём «ОК». Готово! Жмём «Сохранить» внизу страницы. Ваша кнопка готова. Аналогично сделайте с другими кнопками. Затем, удалите все надписи меню, что были ранее.
2. Создание кнопки для сайта.
2.1 Создание кнопки в векторном редакторе MS Word.
Откройте векторный редактор в MS Word «автофигуры». Выберите фигуру, похожую на кнопку, например, овал. Вставьте надпись и выполните заливку цветом. Примерно, так:
Скопируйте эту кнопку в программу MS PowerPoint (где делают слайды) на первый слайд. Затем щелчок правой кнопкой мыши по кнопке – «Сохранить как рисунок». Сохраняете в формате, например, jpg. Затем откройте уже сохранённый рисунок программой обработки изображений MS Picture Manager (мы ей уже пользовались выше). И установите размер кнопки примерно 90 на 30 точек. Сохраните. Всё теперь эту кнопку можно помещать на сайт, как описано выше.
Недостатком этого способа является относительная убогость кнопок. И ещё – не всегда все кнопки удастся сделать одного размера. Поэтому я рекомендую второй способ, о котором расскажу ниже.
2.2 Создание кнопки с помощью программы Cristal Button.
Программа Кри'стал Ба'ттон специально предназначена для создания кнопок. Программа на русском языке и очень проста. Я расскажу только об одном приёме работы с ней, но вы сами можете изучить её и создавать замечательные самые различные кнопки.
Скачиваем программу с портала www. ***** (раздел «Поддержка» - «Загрузки», позиция 39). Прямая ссылка: http://www. *****/sites/default/files/Files/Crystal_Button_v2.8Rus. exe Устанавливаем её. Здесь всё без хитростей. Запускаем программу. Получаем такое окно:
Справа есть кнопки. Справа вверху вы можете выбирать их типы и стили. Любой текст на кнопке можно изменить. Выберите, что вам понравится. Слева – инструменты для работы. Изучите их самостоятельно. Ваша выбранная кнопка - по центру.
Чтобы изменить на ней текст сделайте следующее: в меню выберите пункт «Окно». Там выберите «текст». Введите нужный текст кнопки в поле вместо текста «ваш текст». Размер и начертание шрифта выберите сами. Жмём «Закрыть». Теперь кнопка с вашим текстом.
Если вы уже поэкспериментировали со всеми инструментами и решили, что кнопка достаточно красива, то можно её сохранять в графический файл. Для этого проделаем следующее: меню «Файл» - «Экспорт изображения кнопки». Введите имя файла кнопки, формат лучше выбрать jpg. Всё! Кнопка готова. Программа позволяет создавать множество самых различных кнопок. Пользуйтесь. При выходе программа спросит о сохранении проекта. Можно не сохранять, если вы не планируете экспериментировать с этой же кнопкой в дальнейшем.
_____________________
Несколько ценных советов напоследок:
1. Так как наши страницы сайтов все состоят из форм в виде таблицы, то каждую ячейку можно разукрасить на свой вкус и провести форматирование набранного в ней текста. Для этого в режиме редактирования страницы щёлкните правой кнопкой по ячейке, которую вы хотите разукрасить, например, поле, где находятся все пункты меню. Далее, «Ячейка» - «Свойства ячейки». В новом окне выберите «Цвет фона». Жмём «Ок». Так мы разукрасили ячейку.
Чтобы текст меню был в ячейке в верхней её части, проделайте то же, что описано чуть выше, но выберите «Выравнивание по вертикали» - «По верху». Теперь текст будет в самом верху, а не по центру.
2. Бывает такая ситуация, когда по ошибке удаляется вся Главная страница сайта целиком или так сильно видоизменяется (опять же, из-за ошибки!), что сайт уже не похож на сайт. Как быть в этой ситуации? На самом деле, если такое произошло, то вы НЕ потеряли весь сайт, а потеряли только его главную страницу. Правда, и навигацию тоже. Но все остальные страницы сайта, что вы создавали ранее, остались нетронутыми. Только связь с ними потеряна. Как восстановить?
Делаем так: Заходим в режим редактирования, обновляем Главную страницу сайта, загружаем форму «Главная», что в виде Вордовской таблицы. Пишем слева пункты меню (если вы помещали ранее кнопки, то эти кнопки вы достанете уже с сервера – заново их публиковать НЕ надо. Как достать кнопки – читайте в этой инструкции на стр.16 со второго абзаца). Кнопки размещаем где надо. Создали!
Как найти гиперссылки на другие страницы сайта, чтобы их привязать к кнопкам (или к заголовкам в меню, если без кнопок)? Это просто: Выбираем слева Мой Профиль. Открывается страничка с профилем пользователя (школьный профиль). Сверху жмём кнопочку «Следить». У вас появится список всех страниц, которые вы когда-либо создавали и писали на сайте. Вы находите там нужную страницу, на неё будет гиперссылка. Щёлкаем правой кнопкой мыши по нужной ссылке, выбираем «Копировать ярлык» (в некоторых браузерах «Копировать ссылку»). И теперь открываем вашу уже обновлённую Главную страницу сайта, находим соответствующую кнопку (или текст заголовка меню) и делаем гиперссылку, как обычно. Всё! Вы привязали одну страницу сайта к Главной. И так далее, пока не привяжете все. Через несколько минут сайт будет как и раньше, словно ничего с ним и не было.
Аналогично, можно восстановить все фотографии, что были на первой странице (они остаются на сервере и вам доступны!). Так же останутся все прикреплённые вами файлы. Текст, правда, на Главной придётся написать заново. Но это не страшно. Удачи!
