Мастер-класс "Использование блоков с прокруткой на сайте "
Ефимова Нина Васильевна,
учитель русского языка и литературы.
Амурская область, Тамбовский район,
МБОУ Садовской СОШ, филиал с.Лозовое
Обучить последовательному действию при вставке объемного текста в блок с прокруткой на странице УчПортфолио.
Задачи:
1. Передать коллегам личный опыт по предложенной теме.
2. Оказать помощь участникам сайта «УчПортфолио»
При работе на сайте с текстом иногда возникает необходимость вставить объемный текст, но так, чтобы он не занимал очень много места. Для этого можно использовать такой прием, как блок с прокруткой.
Существует много видов таких блоков различной сложности. Я предлагаю к применению один из самых простых. Сам блок состоит из определенного шифра символов и уже при вставке на страницу принимает необходимый вид окна с функцией прокрутки.
Работа не занимает много времени, и ничего сложного в ней нет.
1 шаг
Выходим на сайт «Блокнот Сайтостроителя» http://filwebs.ru/blok-s-prokrutkoj-na-stranice-sajta/)
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/01.png)
Скачиваем на странице архив с кодом блока.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/02.png)
2 шаг
Открыв скаченный архив, мы видим текстовой файл в формате txt
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/03.png)
Открыв тестовой файл, мы видим непонятный набор букв, цифр и символов – это код самого блока для вставки на сайтах.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/04.png)
3 шаг
Среди этого кода выделяется фраза «Текст вставляется здесь.», вместо ее мы вставляем нужный нам текст.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/05.png)
В данном случае я взяла довольно большое стихотворение и вставила его в блок с прокруткой, чтобы оно не занимало слишком много места на странице. Так выглядит код блока с уже вставленным мною стихотворением.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/06.png)
4 шаг
Дальше все это выделяем и копируем.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/07.png)
Вставляем в текстовой блок на странице УчПортфолио. Можно вставить как в новый инфоблок, так и в уже существующий. Я вставляю в существующий.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/08.png)
5 шаг
Сохраняем наш инфоблок с вставленным текстом, и видим окно с прокруткой на своей странице.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/09.png)
6 шаг
Окно получилось не посередине нашего инфоблока, а прижатым к левому краю. Чтобы разместить его дальше от левого края, выделяем в инфоблоке код прокрутки с вставленным в него текстом и пользуемся инструментом «Увеличить отступ» на верхней панели инфоблока, нажимаем нужное количество раз.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/10.png)
После нескольких отступов видим такую картину.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/11.png)
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/12.png)
7 шаг
Чтобы изменить размеры самого окна с прокруткой, нам нужно исправить данные в коде прокрутке, где 450 – ширина окна, 250 – высота.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/13.png)
Я, в данном случае, поменяла ширину на 300, а высоту на 400.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/14.png)
С такими параметрами стихотворение лучше выглядит в инфоблоке.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/15.png)
8 шаг
После всех коррекций расположения блока с прокруткой в инфоблоке обновляем страницу и видим, что настройка размера и положения блока с прокруткой нам теперь недоступна. Поэтому рекомендую сохранять изменения в инфоблоке, но не обновлять страницу браузера (опера, хром т др.) до полного завершения работы с настройками, иначе придется все повторять сначала.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/16.png)
9 шаг
После обновления страницы нам остаются доступны все виды редактирования вставленного текста (не самого окна прокрутки), как в простом текстовом блоке, т.е. мы можем изменять цвет и размер, менять расположение текста в окне с прокруткой, вставлять картинки. Тут я изменила размер и цвет.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/17(1).png)
Итог всех действий.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/18.png)
С первого взгляда все это кажется сложным, но, если вы будете следовать всем шагам, у вас это займет не более 15 минут, а после первых нескольких раз и того меньше.
Рада, если этот мастер-класс поможет моим коллегам!
учитель русского языка и литературы.
Амурская область, Тамбовский район,
МБОУ Садовской СОШ, филиал с.Лозовое
Использование блоков с прокруткой на сайте «УчПортфолио»
Цель:Обучить последовательному действию при вставке объемного текста в блок с прокруткой на странице УчПортфолио.
Задачи:
1. Передать коллегам личный опыт по предложенной теме.
2. Оказать помощь участникам сайта «УчПортфолио»
При работе на сайте с текстом иногда возникает необходимость вставить объемный текст, но так, чтобы он не занимал очень много места. Для этого можно использовать такой прием, как блок с прокруткой.
Существует много видов таких блоков различной сложности. Я предлагаю к применению один из самых простых. Сам блок состоит из определенного шифра символов и уже при вставке на страницу принимает необходимый вид окна с функцией прокрутки.
Работа не занимает много времени, и ничего сложного в ней нет.
1 шаг
Выходим на сайт «Блокнот Сайтостроителя» http://filwebs.ru/blok-s-prokrutkoj-na-stranice-sajta/)
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/01.png)
Скачиваем на странице архив с кодом блока.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/02.png)
2 шаг
Открыв скаченный архив, мы видим текстовой файл в формате txt
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/03.png)
Открыв тестовой файл, мы видим непонятный набор букв, цифр и символов – это код самого блока для вставки на сайтах.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/04.png)
3 шаг
Среди этого кода выделяется фраза «Текст вставляется здесь.», вместо ее мы вставляем нужный нам текст.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/05.png)
В данном случае я взяла довольно большое стихотворение и вставила его в блок с прокруткой, чтобы оно не занимало слишком много места на странице. Так выглядит код блока с уже вставленным мною стихотворением.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/06.png)
4 шаг
Дальше все это выделяем и копируем.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/07.png)
Вставляем в текстовой блок на странице УчПортфолио. Можно вставить как в новый инфоблок, так и в уже существующий. Я вставляю в существующий.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/08.png)
5 шаг
Сохраняем наш инфоблок с вставленным текстом, и видим окно с прокруткой на своей странице.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/09.png)
6 шаг
Окно получилось не посередине нашего инфоблока, а прижатым к левому краю. Чтобы разместить его дальше от левого края, выделяем в инфоблоке код прокрутки с вставленным в него текстом и пользуемся инструментом «Увеличить отступ» на верхней панели инфоблока, нажимаем нужное количество раз.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/10.png)
После нескольких отступов видим такую картину.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/11.png)
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/12.png)
7 шаг
Чтобы изменить размеры самого окна с прокруткой, нам нужно исправить данные в коде прокрутке, где 450 – ширина окна, 250 – высота.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/13.png)
Я, в данном случае, поменяла ширину на 300, а высоту на 400.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/14.png)
С такими параметрами стихотворение лучше выглядит в инфоблоке.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/15.png)
8 шаг
После всех коррекций расположения блока с прокруткой в инфоблоке обновляем страницу и видим, что настройка размера и положения блока с прокруткой нам теперь недоступна. Поэтому рекомендую сохранять изменения в инфоблоке, но не обновлять страницу браузера (опера, хром т др.) до полного завершения работы с настройками, иначе придется все повторять сначала.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/16.png)
9 шаг
После обновления страницы нам остаются доступны все виды редактирования вставленного текста (не самого окна прокрутки), как в простом текстовом блоке, т.е. мы можем изменять цвет и размер, менять расположение текста в окне с прокруткой, вставлять картинки. Тут я изменила размер и цвет.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/17(1).png)
Итог всех действий.
![](/users_content/6a6610feab86a1f294dbbf5855c74af9/images/18.png)
С первого взгляда все это кажется сложным, но, если вы будете следовать всем шагам, у вас это займет не более 15 минут, а после первых нескольких раз и того меньше.
Рада, если этот мастер-класс поможет моим коллегам!
Другие мастер-классы пользователя
- Установка закладок для интернет-страниц в браузерах Opera и Chrome
- Как настроить в браузере Google Chrome расположение скачиваемых файлов
- Использование блоков с прокруткой на сайте
- Как скачать видео с сайта youtube.com на свой компьютер
- Как скачать МР3 файл с сайта muzofon.com на свой компьютер
- Как вставить автофигуры в презентацию в программе «PowerPoint 2013»
Обнаружили плагиат? Сообщите об этом
Комментарии
![](/users/b0df2270be9cb16c14537e5bc2f2d37b/mini_1063164874.jpg)
#1 Спасибо за полезный МК, Нина Васильевна!
Нажия Утепова, дата: 04.01.2015 в 19:46
![](/users/b71155d90aef3bc38cb92db5a9afe4ce/mini_rNJlrjc20OBC.jpg)
#2 Мастер-класс просто "класс"! Обязательно попробую, если что не получится, обращусь к Вам за помощью, Нина Васильевна!
Ирина Матюшина, дата: 04.01.2015 в 19:58
![](/users/b5ecbbf5782cc7fe9e453f3a2f26f24b/mini_dyKBIu6PWDIp.jpg)
#3 Нина Васильевна! Очень своевременно для меня! Большое спасибо!
Александра Зорина, дата: 04.01.2015 в 20:13
![](/users/8ab8dff7441eda91aa7bb26becb3afd3/mini_te0qGqrcc02r.jpg)
#4 Очень полезный мастер-класс! Спасибо,Нина Васильевна! Постараюсь освоить этот прием.
Валентина Федоровна Шайдурова, дата: 04.01.2015 в 22:15
![](/users/c82836ed448c41094025b4a872c5341e/mini_llAt4cXsTYxL.jpg)
#5 Уважаемая Нина Васильевна! Большое спасибо, что обратили моё внимание на свой мастер-класс! Хоть, Вы и пишите, что все просто, разрешите обратиться к Вам за помощью.
Светлана Блинова, дата: 04.01.2015 в 22:16
#6 Нина Васильевна, спасибо за мастер-класс. Всё понятно.
Ольга Петрова, дата: 05.01.2015 в 17:57
![](/users/dcf9082a17123c1adc46b4f19dc90e6c/mini_U4XoAJQdRVtp.jpg)
#7 Нина Васильевна, спасибо за мастер-класс.
Татьяна Козак, дата: 05.01.2015 в 18:21
![](/users/1f4fe6a4411edc2ff625888b4093e917/mini_LO4xqJ4vEk47.jpg)
#8 Нина Васильевна, спасибо за очень нужный мастер-класс. Думаю, что многие воспользуются им для оформления своих страничек.
Людмила Викторовна Шеломенцева, дата: 05.01.2015 в 19:08
![](/users/6a6610feab86a1f294dbbf5855c74af9/mini_xfKqYpt4DCkg.jpg)
#9 Дорогие коллеги Большое спасибо за добрые слова в мой адрес. Обращайтесь, если будет нужно.
Нина Васильевна Ефимова, дата: 06.01.2015 в 11:06
![](/users/88cf91a1aef212f3c2cd12406983427d/mini_p3ukvEtwUJgh.gif)
#10 Нина Васильевна, спасибо за мастер-класс
Валентина Титова, дата: 20.02.2015 в 18:48
#11 Нина Васильевна, спасибо за полезный мастер-класс!
Евгения Брашко, дата: 23.02.2015 в 19:00
![](/assets/img/no_photo_xsmall.jpg)
#12 Нина Васильевна, спасибо за мастер-класс
Людмила Брайт, дата: 12.04.2015 в 22:27
![](/users/aecad42329922dfc97eee948606e1f8e/mini_knNvY6KrMBnE.jpg)
#13 Нина Васильевна, спасибо очень большое. Вы все так последовательно описали, обязательно воспользуюсь (давно хотела попробовать на своих страничках сайта). Теперь не надо искать эту технологию.
Татьяна Медведева, дата: 13.06.2015 в 23:52
![](/users/d783823cc6284b929c2cd8df2167d212/mini_BqxWsDtk8XXD.jpg)
#14 Нина Васильевна, приятно удивляюсь , когда в очередной раз знакомлюсь с Вашим материалом - какая Вы молодец, некоторые учителя информатики "отдыхают" по сравнению с Вами! Спасибо за материал, очень полезно, всех Вам благ!
Наталья Новосельцева, дата: 21.11.2015 в 18:21
![](/users/9f5506939986201d55a4353ff8b4028e/mini_LMWqrGBQzdY5.jpg)
#15 Спасибо за мастер-класс. Полезный материал.
Светлана Староверова, дата: 25.03.2016 в 20:21
![](/users/176d4cc26aefd148d136259a089d354a/mini_HHTg0ffd47Am.jpg)
#16 Нина Васильевна,спасибо за мастер - класс. Всё доступно и понятно. Обязательно попробую.
Ирина Мерзлютина, дата: 22.06.2016 в 23:39
Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь и авторизируйтесь на сайте.