С нами 15426 учителей, 5273 ученика.
Присоединяйтесь – это бесплатно!
Мастер-класс "Использование блоков с прокруткой на сайте "
Ефимова Нина Васильевна,
учитель русского языка и литературы.
Амурская область, Тамбовский район,
МБОУ Садовской СОШ, филиал с.Лозовое
 
Использование блоков с прокруткой на сайте «УчПортфолио»
 Цель:
Обучить последовательному действию при вставке объемного текста в блок с прокруткой на странице УчПортфолио.
Задачи: 
1. Передать коллегам личный опыт по предложенной теме.
2. Оказать помощь участникам сайта  «УчПортфолио»
 
При работе на сайте с текстом  иногда возникает необходимость вставить объемный текст, но так, чтобы он не занимал очень много места. Для этого можно использовать такой прием, как блок с прокруткой.
Существует много видов таких блоков различной сложности. Я предлагаю к применению один из самых простых. Сам блок состоит из определенного шифра символов и уже при вставке на страницу принимает необходимый вид окна с функцией прокрутки.
Работа не занимает много времени, и ничего сложного в ней нет.

1 шаг
Выходим на сайт «Блокнот Сайтостроителя» http://filwebs.ru/blok-s-prokrutkoj-na-stranice-sajta/)
 
Скачиваем на странице архив с кодом блока.
 

2 шаг
Открыв скаченный архив, мы видим текстовой файл в формате txt
 
Открыв тестовой файл, мы видим непонятный набор букв, цифр и символов – это код самого блока для вставки на сайтах.
 

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

4 шаг
Дальше все это выделяем и копируем.
 
Вставляем в текстовой блок на странице УчПортфолио. Можно вставить как в новый инфоблок, так и в уже   существующий. Я вставляю в существующий.
 

5 шаг
Сохраняем наш инфоблок с вставленным текстом, и видим окно с прокруткой на своей странице.
 

6 шаг
Окно получилось не посередине нашего инфоблока, а прижатым к левому краю. Чтобы разместить его дальше от левого края, выделяем в инфоблоке код прокрутки с вставленным в него текстом и пользуемся инструментом «Увеличить отступ» на верхней панели инфоблока, нажимаем нужное количество раз.
 
После нескольких отступов видим такую картину.
 


7 шаг
Чтобы изменить размеры самого окна с прокруткой, нам нужно исправить данные в коде прокрутке, где 450 – ширина окна, 250 – высота.
 
Я, в данном случае, поменяла ширину на 300, а высоту на 400.
 
С такими параметрами стихотворение лучше выглядит в инфоблоке.
 

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

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

Итог всех действий.
 
 
С первого взгляда все это кажется сложным, но, если вы будете следовать всем шагам, у вас это займет не более 15 минут, а после первых нескольких раз и того меньше.
Рада, если этот мастер-класс поможет моим коллегам! 
Обнаружили плагиат? Сообщите об этом

Комментарии

#1 Спасибо за полезный МК, Нина Васильевна!
Нажия Утепова, дата: 04.01.2015 в 19:46  
#2 Мастер-класс просто "класс"! Обязательно попробую, если что не получится, обращусь к Вам за помощью, Нина Васильевна!
Ирина Матюшина, дата: 04.01.2015 в 19:58  
#3 Нина Васильевна! Очень своевременно для меня! Большое спасибо!
Александра Зорина, дата: 04.01.2015 в 20:13  
#4 Очень полезный мастер-класс! Спасибо,Нина Васильевна! Постараюсь освоить этот прием.
#5 Уважаемая Нина Васильевна! Большое спасибо, что обратили моё внимание на свой мастер-класс! Хоть, Вы и пишите, что все просто, разрешите обратиться к Вам за помощью.
Светлана Блинова, дата: 04.01.2015 в 22:16  
#6 Нина Васильевна, спасибо за мастер-класс. Всё понятно.
Ольга Петрова, дата: 05.01.2015 в 17:57  
#7 Нина Васильевна, спасибо за мастер-класс.
Татьяна Козак, дата: 05.01.2015 в 18:21  
#8 Нина Васильевна, спасибо за очень нужный мастер-класс. Думаю, что многие воспользуются им для оформления своих страничек.
#9 Дорогие коллеги Большое спасибо за добрые слова в мой адрес. Обращайтесь, если будет нужно.
Нина Васильевна Ефимова, дата: 06.01.2015 в 11:06  
#10 Нина Васильевна, спасибо за мастер-класс
Валентина Титова, дата: 20.02.2015 в 18:48  
#11 Нина Васильевна, спасибо за полезный мастер-класс!
Евгения Брашко, дата: 23.02.2015 в 19:00  
#12 Нина Васильевна, спасибо за мастер-класс
Людмила Брайт, дата: 12.04.2015 в 22:27  
#13 Нина Васильевна, спасибо очень большое. Вы все так последовательно описали, обязательно воспользуюсь (давно хотела попробовать на своих страничках сайта). Теперь не надо искать эту технологию.
Татьяна Медведева, дата: 13.06.2015 в 23:52  
#14 Нина Васильевна, приятно удивляюсь , когда в очередной раз знакомлюсь с Вашим материалом - какая Вы молодец, некоторые учителя информатики "отдыхают" по сравнению с Вами! Спасибо за материал, очень полезно, всех Вам благ!
Наталья Новосельцева, дата: 21.11.2015 в 18:21  
#15 Спасибо за мастер-класс. Полезный материал.
Светлана Староверова, дата: 25.03.2016 в 20:21  
#16 Нина Васильевна,спасибо за мастер - класс. Всё доступно и понятно. Обязательно попробую.
Ирина Мерзлютина, дата: 22.06.2016 в 23:39  
Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь и авторизируйтесь на сайте.