Доброго времени суток, дорогие друзья!
Данный материал является логическим продолжением статьи «Apple iWeb: Выводим текст в окне с прокруткой», в которой рассказывалось о том, как разместить «длинный» текст (или даже целую веб страницу целиком) в окнах с прокруткой на сайте, созданном в редакторе iWeb. Способ, описанный в упомянутой статье, подразумевает использование плавающих фреймов и, при всех своих достоинствах, обладает и существенными недостатками, главным из которых является использование тега <iframe>. Сегодня я хочу рассказать вам еще об одном методе создания таких окон, основанном на использовании стилевых свойств блочного элемента <div>. Данный способ является более «продвинутым» и очень легким в реализации: для его осуществления потребуется выполнить всего несколько простых шагов, минимальное знание языка html, сам Apple iWeb, любой текстовый редактор, способный корректно работать с исходным кодом веб-документов (например, TextWrangler) ну и, конечно же, немного внимания. В процессе, будут даваться необходимые разъяснения, воспользовавшись которыми, вы, надеюсь, легко сможете создать похожие окна на своем сайте.
Создаем окна с прокруткой с помощью тега <div> и сниппета HTML
Кратко опишу, что и как мы будем делать. Для начала, необходимо создать новую веб-страницу с текстом, который необходимо выводить в окне с полосами прокрутки, далее на основную страницу сайта (в то место, где необходимо разместить окно) добавляем html сниппет, вставляем в него исходный код страницы с текстом, добавив несколько своих строчек, публикуем изменения и наслаждаемся результатом.
Теперь эти шаги более подробно:
Определяемся для себя, какого размера должно быть окно и какие полосы прокрутки нужны в нем.
В редакторе iWeb создаем вспомогательную страницу с текстом, который, в дальнейшем, должен будет прокручиваться в окне. Можете ограничится минимальным оформлением этой страницы, или дать волю своей фантазии и сделать полноценный веб-документ: добавить графику или видео, использовать шрифты разных семейств, цветов и начертаний - но, я не советую особенно увлекаться, для понимания принципа достаточно просто разместить на этой странице отрывок любого текста. Вертикальный размер страницы должен получиться достаточно большим, горизонтальный выбираем исходя из размеров будущего окна. Для окна только с вертикальной полосой прокрутки, ширину страницы делаем на 20px меньше ширины окна, если же необходима и горизонтальная полоса прокрутки, ширину страницы делаем больше соответствующего размера окна. Для примеров, как и в первой части данного материала, я буду использовать выдержки из справки редактора iWeb, тем более, что такие страницы у меня уже есть.
Публикуем созданную страницу в локальную папку и открываем ее исходный код в текстовом редакторе. Нам необходимо сделать несколько изменений. Смотрим на код страницы и перед первым тегом <div> вставляем следующие строки:
<div style="width: 540px;height: 200px;overflow: auto;position: relative;padding: 0;
border: 1px solid #999;">
<div style="padding: 0;overflow: hidden;width: 520px;">
Опускаемся ниже по html коду и, после последнего закрывающего тега </div> перед </body>, вставляем еще два тега </div>. Изменяем свойства:
width: 540px; - ширина будущего окна с прокруткой;
height: 200px; - высота будущего окна с прокруткой;
width: 520px; - ширина созданной страницы с текстом.
Чтобы было понятнее, как выбирать эти размеры, посмотрите на участки данного кода, со значениями для разных случаев применения:
Код для окна с вертикальной полосой прокрутки.
Страница с текстом, который будем «прокручивать», имеет ширину 520px, размеры окна 540px на 200px (540px-520px=20px - необходимы для отображения самой полосы прокрутки):
.......
<div style="width: 540px;height: 200px;overflow: auto;position: relative;padding: 0;
border: 1px solid #999;">
<div style="padding: 0;overflow: hidden;width: 520px;">
.......
Тот же код, но для окна с прокруткой по вертикали и горизонтали.
Страница с текстом, который будем прокручивать, имеет ширину 720px, размеры окна 540px на 200px:
.......
<div style="width: 540px;height: 200px;overflow: auto;position: relative;padding: 0;
border: 1px solid #999;">
<div style="padding: 0;overflow: hidden;width: 720px;">
.......
Изменяем значения width, height и width, исходя из ваших размеров окна и страницы, сохраняем изменения. Надеюсь вы уже догадались, что исходный код этой страницы мы и будем вставлять в сниппет HTML на основной странице, поэтому произведем еще несколько изменений. Изменим пути к папкам «Scripts» и «Media», добавив к ним «../» в следующих строках (предполагается, что страница с окном будет находиться в корне сайта):
.......
<!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='../Media/IE8.css'/><![endif]-->
<script type="text/javascript" src="../Scripts/iWebSite.js"></script>
<script type="text/javascript" src="../Scripts/iWebImage.js"></script>
.......
Копируем код этой страницы в буфер обмена и переходим в окно редактора Apple iWeb. На страницу вашего сайта, на которой необходимо создать окно с прокруткой, добавляем сниппет HTML и вставляем в него скопированный код, применяем и публикуем страницу в локальную папку. При возникновении трудностей с добавлением сниппета, можете обратиться к статье «Использование iWeb: Применение html-сниппетов», где этот процесс описывается очень подробно.
Теперь можете открыть страницу в любом браузере - вы должны увидеть окно с текстом вспомогательной страницы, который должен прокручиваться. На данном этапе это окно может выглядеть примерно так:
Как видите, у нас не загрузились таблицы стилей и изображения. Исправить это очень просто: идем в каталог с опубликованным сайтом и переносим папку «название _страницы_с_текстом_files» в папку «название_страницы_с_окном_files» - открываем страницу с окном в браузере и видим, что теперь все отображается правильно, можно загружать сайт на свой хостинг с помощью любого FTP-клиента.
На сегодня все: буду рад вашим комментариям и письмам.
Буду благодарен, если поделитесь ссылкой на этот материал в социальных сервисах, подпишитесь на RSS-фид или .
-
Похожие материалы:
-
Также рекомендую заглянуть в Архив и ознакомиться с другими материалами сайта
Created by Apple iWeb • Library for Me