Сайт учителя начальных классов

Букиной   Ирины
Юрьевны

Категории раздела
Обои для рабочего стола [1]
Онлайн уроки [2]
Меню сайта
Теги
Статистика
Яндекс.Метрика

Яндекс цитирования


Онлайн всего: 2
Гостей: 2
Пользователей: 0
Статистика
free counters

2

Главная » Файлы » МОИ ФАЙЛЫ » Онлайн уроки

Ставим интерактивное расписание уроков
[ · Скриншот ] 15.05.2012, 16:52

Ставим интерактивное расписание уроков

 

Как поставить готовое интерактивное расписание уроков на свой сайт?

 

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

Один из приёмов повышения привлекательности является использование интерактивных изображений, достоинство которых состоит в способности по желанию (клику) пользователя изменять информативную и визуальную составляющую.

Особенностью, рассматриваемого в этой статье интерактивного расписания уроков является то, что это не просто картинка, а набор, состоящий из фонового изображения и отдельных его фрагментов.  Для осуществления увеличения или даже замены фрагмента на иную картинку по клику пользователя, создаётся специальный HTML код – «Таблица», в котором на фоновое изображение накладываются фрагменты, подключённые к ява-скрипту плавного увеличения изображения.

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

Даже для начинающих web-мастеров установка готового расписания уроков, от распаковывания архива, до опробования работоспособности,  займёт совсем немного времени.

 

И так, начнём!

1 - В самом низу этой страницы скачайте архив , в котором находятся все необходимые картинки, HTML код готовой таблицы и javascript плавного увеличения изображения с инструкцией по его установке и распакуйте его;

2 - В папке "images" откройте папку "Расписание" и в пустые картинки (day-1 ... day-5) впишите свой вариант расписания уроков на тот день недели, который обозначен на изображении . Это можно сделать даже на стандартном Microsoft Paint или в любом другом, доступном для вас графическом редакторе . Для подобных целей подойдёт  PicPick, эта программа способна так же сделать скриншот (захватить изображение с экрана, достаточно нажать кнопку «Print Screen SysRq» на клавиатуре), рисовать разные фигуры, линии и стрелочки, менять их толщину и цвет.

3 – Залейте на сайт  (в корень сайта) все необходимые картинки из архива, а именно:

-  Фоновая – RU.jpg ,

Фрагменты:

-  Понедельник – RU_02.jpg ;

-  Вторник – RU_04.jpg ;

-  Среда – RU_06.jpg ;

-  Четверг – RU_08.jpg ;

-  Пятница – RU_10.jpg

 

 

И все day-1 ... day-5 с вашим вариантом расписания.

 

 

 

Как залить файлы в корень сайта – Подсказка!

4 – Так же залейте в корень сайта файл «image_zoom.js» - это код  ява-скрипта.

5 – Откройте в архиве файл с HTML кодом таблицы - «Таблица», можно скопировать код в блокнот и работать с ним там.

Теперь самое интересное!

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

Как получить ссылки на ваши файлы из файлового менеджера – Подсказка!

Расставляйте ссылки в соответствии с этой схемой (смотреть)

6 – После окончания работы с таблицей скопируйте полученный HTML код (код таблицы уже с вашими ссылками) и вставьте его на страницу вашего сайта.

Как вставить HTML код на страницу сайта – подсказка!  

 

Результаты работы (действующее интерактивное расписание уроков) ниже.

Ну вот, собственно и всё! Если возникнут вопросы, пишите в коментариях, буду стараться отвечать.

 

 

 

 

 

 

 

 

Понедельник   Вторник   Среда
  Четверг   Пятница  
 
               

 

Скачать архив можно здесь!

 

Если Вам необходимо установить расписание уроков на 6 учебных дней, пройдите на следующую страницу.  

 

 






Letitbit



Далее



Сохранить ссылку на 100zakladok.ru

Категория: Онлайн уроки | Добавил: Dron | Теги: Расписание уроков, в начальной школе, интерактивное расписание уроков, картинки расписание уроков
Просмотров: 9665 | Загрузок: 412 | Комментарии: 6 | Рейтинг: 5.0/10
Всего комментариев: 6
5  
Ирина Юрьевна, здравствуйте! Ссылки что вы установили для скачивания интерактивного расписания не активны. Подскажите, как можно еще скачать. Спасибо!

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

4  
Здравствуйте! А мой сайт на движке вордпресс, шаблон не принял таблицу, все разъехалось. Пришлось сделать отдельной html страницей, что не очень удобно((( и пыталась (с помощью умного мальчика)))) скрипт поправить, чтобы картинка с днем недели вылетала не из угла. тут немного получилось, а вот улетает все равно в угол)))
http://maltzewa17.ru/uroki/raspisanie-urokov-2/

3  
Здравствуйте,Ирина Юрьевна. У меня почему то не получается ,чтобы понедельник стоял на картинке на понедельнике,а вторник на вторнике,Вы могли бы мне помочь?Я делала все по инструкции ,5 раз переделывала,перепроверяла,не получается(((Вот так только выходит  Заранее большое спасибо!

2  
И у меня все замечательно работает. Спасибо!!!!

1  
Ирина Юрьевна, большое Вам спасибо! Скачала вашу работу, установила на сайт. Всё работает! Желаю творческих успехов!

Имя *:
Email *:
Код *:
Поиск
Форма входа
Создание сайта
Мини профиль

Читать ЛС ()

Вызашли как гость. Пожалуйста зарегистрируйтесь или авторизуйтесь!




Возраст сайта
Стоковое фото
 
Stock Photos
Друзья сайта
  • Создать сайт
  • Все для веб-мастера
  • Программы для всех
  • Мир развлечений
  • Лучшие сайты Рунета
  • Кулинарные рецепты

  • Copyright MyCorp © 2017
    Дизайн навигатор
    Каталог сайтов 'Российское образование в сети' Яндекс.Метрика

    Персональный сайт учителя начальных классов

    1.3