lib4me.ru
 

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

Главная » iWeb  / 28.01.2012


Доброго времени суток, дорогие друзья!

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

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

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

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

 

  1. Похожие материалы:

  2. Короткий адрес для сайта, созданного в Apple iWeb

  3. Делаем правильное меню для сайта на Apple iWeb

  4. Пинг сайта или добавим адреналина поисковикам

  5. Теги заголовков и сайт на iWeb

  6. Dropbox и iWeb – нужны ли они друг другу?

  7. MassReplaceIt: жизнь на территории iWeb

  8. Использование iWeb: Замена html-кода

  9. Использование iWeb: Применение html-сниппетов

  10. Также рекомендую заглянуть в Архив и ознакомиться с другими материалами сайта

Logo lib4me.ru

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

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

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

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

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

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="https://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>


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

  4. width=‘540’ - ширина в пикселах, меняем на свои значения;

  5. height=‘200’ - высота в пикселах, меняем на свои значения;

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

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

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

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

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

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

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

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

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

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

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

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

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


На сегодня все: как всегда, буду рад вашим комментариям и письмам.

Буду благодарен, если поделитесь ссылкой на этот материал в социальных сервисах, подпишитесь на RSS-фид или почтовую рассылку.