Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Рецепты HTML # 118
| Информационный Канал Subscribe.Ru |
| | Руководство
| Дизайн и юзабилити
| Графика
| Создание и раскрутка сайта | | Справочная информация | Инструментарий | Шаблоны | Все статьи | Форум | |
Добрый день.
Зайдите на сайт RunWeb.ru, укажите в комментарии "от сайта htmlbook.ru" и получите 20% скидки на услуги хостинга.
Возможности радуют — здесь и PHP4, mySQL, SSI, Perl, C, самостоятельная настройка параметров, неограниченный трафик и многое другое. Сам бы выбрал, если бы нуждался в хостинге, так что рекомендую.
Спасибо всем активным читателям, кто высказал свое мнение о статьях по JavaScript. Я решил открыть новую рассылку и публиковать материалы в ней. Здесь больше примеры по языку JavaScript и динамическому HTML приводиться не будут. В любом случае, найти и почитать вы все сможете на сайте htmlbook.ru.
Сегодня продолжение темы, которая вызвала интерес у многих читателей — верстка с помощью слоев, новая статья открывает подборку, посвященную резиновому дизайну. Адрес статьи на сайте — www.htmlbook.ru/content/?id=204.
Резиновый дизайн. Основы
«Резиновым дизайном» будем называть структуру веб-страницы, которая автоматически приспосабливается под определенный размер окна браузера пользователя. Такой макет имеет несколько преимуществ:
- используется все доступное пространство браузера;
- у пользователей с маленькими мониторами не возникают горизонтальные полосы прокрутки;
- пользователи больших мониторов могут порадоваться, как эффективно используется вся площадь экрана, а значит деньги на монитор были потрачены не зря;
- веб-страницы удобно печатаются на бумаге любого формата.
Среди недочетов можно отметить придирчивость разных браузеров к <резиновому> макету и большая вероятность появления ошибок. В связи с чем повышается сложность верстки веб-страниц.
Перед созданием макета следует продумать следующие моменты: количество колонок (две, три или более), ширина отдельных блоков, будут ли некоторые колонки фиксированной ширины и т.д. Типичные шаги описаны ниже.
Количество колонок
Наиболее распространенным вариантом является наличие на веб-странице двух колонок — одна из них содержит навигацию, а во второй, более широкой, размещается контент. Впрочем, хоть такая схема и представляет собой устоявшуюся традицию, это не значит, что следует придерживаться обязательно ее. Использование всей ширины окна позволяет более эффективно применять площади веб-страницы. Так что можно добавить три, и даже четыре колонки. Это зависит исключительно от имеющегося объема контента. Учтите и обратный эффект — чем больше информации, тем больше рассеивается внимание посетителя, и ему сложнее становится ориентироваться на сайте.На рис. 1 приведены типичные схемы размещения колонок. Красным цветом выделен заголовок страницы, светло-серым — область для навигации, рекламы, небольших текстовых вставок и т.д., а белым цветом — место для основного контента. Нижняя часть страницы, как правило, отводится для контактной информации, баннеров, кнопочек и других не самых существенных элементов.
|
|
|
|||||||||||||||||||||||||||
| а. две колонки | б. три колонки | в. четыре колонки | |||||||||||||||||||||||||||
Рис. 1. Варианты размещения колонок
Ширина слоев
Ширина слоев устанавливается в процентном отношении от ширины родительского элемента. Если поместить слой сразу на веб-страницу, то его родителем будет выступать окно браузера (пример 1).Пример 1. Слой, занимающий всю ширину окна браузера
<body>
<div style="""width: 100%; background:
#fc6; border: 1px solid black">
И мышка рассказала следующее. Давным-давно, людям, чтобы достать яркие пригожие
яблоки с высоких деревьев, требовалась особая ловкость и умение. Не всякий
умел быстро забраться на яблоню (а эти деревья были тогда высокие-превысокие)
и суметь полакомиться вкусными плодами. И вот однажды пришел добрый волшебник
по имени Нортон, посмотрел он на страдания людей, покачал головой и сделал
специальную колотушку, с помощью которой любой человек мог получить плоды
с самого возвышенного дерева. Надо было только встать под него, ударить посильней
и ловить яблоки в корзину. Колотушка получилась очень красивая - ручка золоченая,
а сам набалдашник синий, одно удовольствие пользоваться.
</div>
</body>
</html>
100 процентов означает, что слой займет всю доступную ширину окна. Однако здесь проявляется небольшое различие между браузерами, что же такое <доступная ширина>. Internet Explorer и Netscape используют всю ширину окна, исключая отступы на веб-странице, а Opera учитывает еще вертикальную полосу прокрутки, независимо от того, видна она или нет. В браузере Opera отступ у правого края получается больше, чем тот же отступ слева.
Если один слой находится внутри другого, то родителем для внутреннего слоя выступает внешний, и ширина будет отсчитываться от него. За 100 процентов в этом случае берется ширина контейнера, внешнего слоя (пример 2).
Пример 2. Слой, занимающий всю ширину контейнера
<body>
<div style="""width: 50%; background: #fc3;
border: 1px solid black">
<div style="""width: 100%">Колотушка
получилась очень красивая - ручка золоченая, а сам набалдашник синий, одно
удовольствие пользоваться.</div>
</div>
</html>
В примере ширина первого слоя установлена в 50 процентов, а второй, который находится внутри него, занимает всю область внешнего слоя.
Отступы на веб-странице
Горизонтальные и вертикальные отступы от края браузера до содержимого веб-страницы встроены в браузер по умолчанию. Тем не менее, можно изменить значение этих параметров, делая отступы по желанию больше или меньше. Так, например, можно установить отступ от верхнего края окна до заголовка страницы, или вообще убрать его.Отступы задаются параметрами CSS margin и padding для селектора BODY. Наличия двух атрибутов вместо одного, опять же требуют интересы разных браузеров, margin — IE, а padding — Opera и Netscape. Совмещение разных параметров гарантирует, что показываться веб-страница в разных браузерах будет одинаково.
Управлять отдельными отступами от разных краев экрана можно с помощью параметров margin-top, margin-bottom, margin-right и margin-left, которые соответственно изменяют расстояние от верхнего, нижнего, правого и левого краев окна браузера. Прежде чем их использовать, следует задать нулевое значение для параметров margin и padding (пример 3).
Пример 3. Изменение верхнего отступа от края браузераmargin: 0px;
padding: 0px;
margin-top: 10px;
}
Поля
Полями называют расстояние от края слоя до воображаемого прямоугольника, ограничивающего его содержимое. Использование полей повышает читабельность текста и улучшает дизайн страницы.Задать поля для всех сторон одновременно можно параметром padding (пример 4).
Пример 4. Установка полейБраузеры по разному интерпретируют данный код. Internet Explorer не изменяет общую ширину слоя, а браузеры Netscape и Opera добавляют значение полей к ширине самого слоя, увеличивая тем самым его величину. При ширине слоя 100 процентов это может оказаться критичным, так как приведет к появлению горизонтальной полосы прокрутки и тому, что часть данных не поместится целиком на веб-страницу. Одним из вариантов решения проблемы является использование полей для вложенных в слой элементов, например, параграфа (пример 5).
Пример 5. Установка полей для параграфа<head>
<style>
DIV P { padding: 10px; }
</style>
</head>
<body>
<div style="""width: 100%; background:
#fc3; border: 1px solid black">
<p>Колотушка получилась очень красивая - ручка золоченая, а сам набалдашник
синий, одно удовольствие пользоваться.</p>
</div>
</html>
Конструкция DIV P означает, что стиль следует применять только к тегу P, который находится внутри тега DIV. Такая форма записи позволит использовать параграф в другом месте, а не только в слоях, не опасаясь, что будут добавлены поля вокруг текста.
clip
| Браузер | Internet Explorer | Netscape Navigator | Opera | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Платформа | Windows | Macintosh | Все платформы | Все платформы | ||||||||
Версия |
4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0 |
| Поддерживается | Нет | Нет | Да | Да | Нет | Частично | Нет | Да | Да | Нет | Частично | Да |
Описание
Параметр clip определяет область позиционированного элемента, в которой будет
показано его содержимое. Все, что не помещается в эту область, будет обрезано
и становится невидимым. На данный момент единственно доступная форма области
— прямоугольник. Все остальное остается только в мечтах. Параметр clip
работает только для абсолютно позиционированных элементов.
Синтаксис
clip: rect(сверху справа снизу слева) | auto
Аргументы
В качестве аргументов используется расстояние от края элемента до области
вырезки. Если край области нужно оставить без изменений, следует поставить
параметр auto.
Значение по умолчанию
auto
Наследование
Значения, присвоенные данному параметру, не наследуются.
<body>
<div style=""xposition:" absolute; clip: rect(20px
auto auto 20px); width: 200px; color: white; background: #7F4C3E;
border: solid 1px black">
<p style=""padding:" 10px">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Применяется
Ко всем элементам.
Объектная модель
[window.]document.getElementById("elementID").style.clip
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
| В избранное | ||
