Мастер-класс "Использование блоков с прокруткой на сайте "
Нина Васильевна Ефимова
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 минут, а после первых нескольких раз и того меньше.
Рада, если этот мастер-класс поможет моим коллегам!
учитель русского языка и литературы.
Амурская область, Тамбовский район,
МБОУ Садовской СОШ, филиал с.Лозовое
Использование блоков с прокруткой на сайте «УчПортфолио»
Цель:Обучить последовательному действию при вставке объемного текста в блок с прокруткой на странице УчПортфолио.
Задачи:
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 расположение скачиваемых файлов
Обнаружили плагиат? Сообщите об этом
Комментарии
#1 Спасибо за полезный МК, Нина Васильевна!
Нажия Утепова, дата: 04.01.2015 в 19:46
#2 Мастер-класс просто "класс"! Обязательно попробую, если что не получится, обращусь к Вам за помощью, Нина Васильевна!
Ирина Матюшина, дата: 04.01.2015 в 19:58
#3 Нина Васильевна! Очень своевременно для меня! Большое спасибо!
Александра Зорина, дата: 04.01.2015 в 20:13
#4 Очень полезный мастер-класс! Спасибо,Нина Васильевна! Постараюсь освоить этот прием.
Валентина Федоровна Шайдурова, дата: 04.01.2015 в 22:15
#5 Уважаемая Нина Васильевна! Большое спасибо, что обратили моё внимание на свой мастер-класс! Хоть, Вы и пишите, что все просто, разрешите обратиться к Вам за помощью.
Светлана Блинова, дата: 04.01.2015 в 22:16
#6 Нина Васильевна, спасибо за мастер-класс. Всё понятно.
Ольга Петрова, дата: 05.01.2015 в 17:57
#7 Нина Васильевна, спасибо за мастер-класс.
Татьяна Козак, дата: 05.01.2015 в 18:21
#8 Нина Васильевна, спасибо за очень нужный мастер-класс. Думаю, что многие воспользуются им для оформления своих страничек.
Людмила Викторовна Шеломенцева, дата: 05.01.2015 в 19:08
#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
Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь и авторизируйтесь на сайте.