Apple iWeb: Выводим текст в окне с прокруткой | Интернет интересности и полезности

Apple iWeb: Выводим текст в окне с прокруткой

Сегодня поговорим о том, как вывести любую текстовую информацию в окне с вертикальной или горизонтальной прокруткой на страницах сайта, созданного в редакторе Apple iWeb. Пригодиться это может в случае, если на странице интернет ресурса необходимо разместить достаточно длинный текст (например: html код, журнал ошибок, листинг программы — да мало ли что еще…), вертикальный или горизонтальный размер которого превышает размеры этой страницы. В примерах, я буду выводить таким образом части справки редактора iWeb, Вы же, думаю, поняв принцип создания этих окон, сами сможете найти им достойное применение.

В общем случае это может выглядеть, примерно, так:

В верхнем примере окно имеет полосу вертикальной прокрутки, в нижнем, вертикальную и горизонтальные полосы.

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

iFrame и его применение при создании окон

В данном случае, для приведенных выше примеров, был применен стандартный тег html <iframe>, позволяющий создавать одну из разновидностей фреймов — плавающий фрейм.

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

Как создавать окна с прокруткой

Весь процесс создания можно разбить на три этапа:

1. В нужном месте своей веб страницы (назовем ее, основной) создаем плавающий фрейм, для этого воспользуемся стандартным виджетом редактора iWeb «Сниппет HTML». Добавляем сниппет на нашу страницу и в его окно вставляем следующий код:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»

«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»ru» lang=»ru»>

<head><meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ />

<meta name=»robots» content=»noindex,nofollow» />

<title>iFrame Window Scroll</title></head>

<body><iframe width=»540″ height=»200″ allowTransparency=»true» frameborder=»0″ scrolling=»yes» style=»border: solid 1px #999;»  src=»../help_iweb.html»></iframe>

</body></html>

 

Изменяем параметры вывода фрейма:

width=»540″ — ширина в пикселах, меняем на свои значения;

height=»200″ — высота в пикселах, меняем на свои значения;

border: solid 1px #999 — стиль, размер и цвет рамки вокруг фрейма. В примере указана сплошная одинарная рамка толщиной в 1 пиксел цвет #999999, соответственно, меняем на свои значения, если рамка вообще не нужна border: solid 1px #999 заменяем на border: none;

scrolling= «auto«- указывает, что должны будут появиться полосы прокрутки, если содержимое не помещается в область фрейма. Если поставить scrolling= «yes» — полосы прокрутки будут отображаться всегда;

Части кода, выделенные зеленым и красным цветом пока не трогаем, вернемся к ним чуть позже.

Сохраняем изменения и публикуем сайт в локальную папку на компьютере (рекомендуется всегда публиковать сайт в локальную папку, и только после тестирования размещать его на хостинге с помощью любого FTP-клиента).

Открываем созданную страницу в браузере и видим пустой фрейм — у нас ведь еще нет страницы с текстом, которая должна была загрузиться в тело фрейма. Полос прокрутки, соответственно, тоже нет: так и должно быть — сейчас мы это исправим…

Если на этапе создания сниппета у вас возникают проблемы, советую ознакомиться с ранее опубликованным материалом этого сайта «Использование iWeb: Применение html-сниппетов»

  1. 2. Создаем страницу с текстом, который мы будем выводить в окне с прокруткой (назовем ее, загружаемой). Как Вы будете создавать эту страницу, не имеет никакого значения: можно написать код даже вручную… Для приведенных примеров, был выбран более простой путь: веб страницы создавались прямо в редакторе Apple iWeb. Тут важен только один момент: если, в дальнейшем, вам необходимо получить окно с вертикальной полосой прокрутки, ширину создаваемой страницы делаем на 20 пикселов меньше, чем значение width фрейма; для окон с горизонтальной и вертикальной прокруткой, ширину страницы необходимо делать больше чем значение width фрейма; высота страниц в обоих случаях должна быть больше значения height фрейма.

Создаем страницу, добавляем на нее нужный текст, графические файлы и т.д. (для примеров, как Вы помните, я размещал на этих страницах разделы справки редактора iWeb), публикуем в локальную папку. Можете открыть опубликованную страницу в браузере и посмотреть что получилось: Вы должны увидеть обычный веб документ с интересующей вас информацией. Если, так оно и есть, считайте большая часть работы уже сделана, осталось совсем немного…

3. В редакторе Apple iWeb переходим к основной странице, на которой мы размещали html-сниппет и в коде фрейма прописываем путь к созданной странице c текстом (часть кода, выделенная красным цветом). В приведенном примере, эта страница находилась в корневом каталоге сайта и имела название help_iweb.html — изменяем путь и имя на свои, сохраняем изменения, публикуем страницу. Открываем основную страницу в любом браузере и видим «новоиспеченное» окно с текстом, который вы располагали на загружаемой странице. Если окно еще имеет и полосы прокрутки, значит Вы все сделали правильно и добились необходимого результата.

Теперь можете загрузить свой сайт на хостинг, я же хочу уточнить некоторые моменты

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

Поисковые системы не одобряют, но и не осуждают использование фреймов на страницах сайта, к ним они относятся с «подозрением» и вот почему. Дело в том, что многие «нечистоплотные на руку» веб мастера используют iFrame для «черной» рекламы и накрутки сайтов, чем полностью дискредитируют эту технологию. Настоятельно не рекомендую вам, использовать фреймы для отображения страниц «чужих» веб ресурсов, пусть даже и проверенных: используем фреймы только в пределах своего доменного имени, для отображения своих страниц.

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

Есть еще одно небольшое «но»: все современные браузеры давно научились корректно отображать окна со скроллингом, созданные с помощью данной разновидности фреймов, исключение могут составлять некоторые мобильные браузеры: в частности, это относится к Safari на iPhone и iPod touch — на них, содержимое таких окон вытягивается в «полный» размер, в этом можете убедиться сами, посетив данную страницу с упомянутых устройств.