Мастер-класс "Использование блоков с прокруткой на сайте "

Нина Васильевна Ефимова   04.01.2015   3330   16

Ефимова Нина Васильевна,
учитель русского языка и литературы.
Амурская область, Тамбовский район,
МБОУ Садовской СОШ, филиал с.Лозовое
   Цель:
Обучить последовательному действию при вставке объемного текста в блок с прокруткой на странице УчПортфолио.
Задачи: 
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 минут, а после первых нескольких раз и того меньше.
Рада, если этот мастер-класс поможет моим коллегам! 

• Как скачать МР3 файл с сайта muzofon.com на свой компьютер
• Установка закладок для интернет-страниц в браузерах Opera и Chrome
• Как вставить автофигуры в презентацию в программе «PowerPoint 2013»
• Как скачать видео с сайта youtube.com на свой компьютер
• Использование блоков с прокруткой на сайте
• Как настроить в браузере Google Chrome расположение скачиваемых файлов

Обнаружили плагиат? Сообщите об этом

Комментарии