Зачем нужны свободно позиционируемые элементы
Действительно, зачем?
Подавляющее большинство Web -дизайнеров и Web -сайтов до сих пор прекрасно обходятся традиционными способами дизайна. Применять на своих страницах свободные элементы никто особо не хочет. Даже анимированные элементы, казалось бы, замечательное средство привлечь внимание посетителя, — большая редкость на просторах Сети.
Вполне возможно, это обычный консерватизм, уже погубивший множество перспективных технологий. Конечно, не стоит сбрасывать со счетов и то, что свободно позиционируемые элементы поддерживаются только новыми версиями программ Web -обозревателей (фактически теми из них, которые поддерживают таблицы стилей). Но это не довод: те же таблицы стилей применяются несравнимо чаще. Видимо, всетаки консерватизм...
Но если подавляющее большинство Web -дизайнеров как-то обходятся без свободно позиционируемых элементов, так ли уж они нужны? Стоит ли их применять? Может, лучше остаться при своих таблицах и фреймах?
Это решать вам.
Нужны ли вам свободно позиционируемые элементы? Нужны ли они вашему сайту? Сможете ли вы без них обойтись? Вот вопросы, ответы на которые вам стоит поискать.
Конечно, свободные элементы имеют множество преимуществ. Они позволяют располагать фрагменты содержимого Web -страниц так, как вам нужно, и при этом обходиться минимальным количеством кода (сравните с громоздкими таблицами разметки). Однако, если вы надумаете переделывать ваш старый сайт в новый, использующий свободные элементы, переделка будет весьма значительной. Особенно если ваш сайт достаточно велик и основан на таблицах. Так что, если сайт работает нормально и без свободно позиционируемых элементов, лучше его не трогать.
Правда, иногда бывает, что без свободно позиционируемых элементов не обойтись. Давайте рассмотрим каждую из подобных ситуаций.
Как гласил рекламный лозунг фильма "Годзилла", размер имеет значение. В самом деле, если ваши Web -страницы сделаны на основе таблиц разметки и достаточно сложны, HTML -код догоняет в габаритах вышеупомянутое земноводное. А чем больше страница, тем дольше она будет загружаться... Свободно позиционируемые элементы позволят радикально сократить размер HTML -кода страниц и при этом добавят им такие возможности, которых у таблиц просто нет и не будет.
Вы задумали такой дизайн для своих Web -страниц, который никак не создать без использования свободно позиционируемых элементов. Подобный дизайн может включать "окошки в окошке" для показа фрагментов текста, перекрывающиеся элементы и т. п.
Вы собираетесь анимировать некоторые элементы страницы. Но прежде чем их анимировать, нужно сделать их свободно позиционируемыми.
Вот, вроде бы, и все случаи, когда вам не обойтись без свободных элементов. В остальных случаях они не обязательны.
Работа со свободно позиционируемыми элементами
Теперь рассмотрим, как в Dreamweaver создаются свободно позиционируемые элементы.
Создание свободно позиционируемых элементов
Создайте в Dreamweaver новую Web -страницу. С ней мы и будем экспериментировать.
Однако прежде, чем начинать свои эксперименты, давайте выполним некоторые предварительные операции. Сначала включим измерительные линейки, для чего включим пункт-выключатель Show в подменю Rulers меню Modify или нажмем комбинацию клавиш
< Ctrl >+< Alt >+< R >. После этого включим координатную сетку, включив пункт-выключатель Show Grid подменю Grid меню View или нажав комбинацию клавиш < Ctrl >+< Alt >+< G >. И напоследок включим "прилипание", включив пункт-выключатель Snap To Grid подменю Grid меню View или нажав комбинацию клавиш < Ctrl >+ +< Alt >+< Shift >+< G >. Подробнее обо всех этих манипуляциях см. главу 8.
Примечание Имейте , однако , в виду , что это всего лишь рекомендации . Измерительные линейки , сетка и " прилипание ", по идее , должны помочь вам , но если вы привыкли работать без таких визуальных " подсказок ", не включайте их .
Чтобы создать свободно позиционируемый элемент, проще всего нажать кнопку Draw Layer , расположенную на вкладке Common панели объектов.
Однако после нажатия этой кнопки новый свободный элемент на странице не появится. Его нужно будет нарисовать примерно так же, как мы рисовали ячейки и таблицы разметки в
главе 8. Поместите курсор мыши в окно документа — вы видите, что он принял вид крестика. Это значит, что теперь вы можете нарисовать свободный элемент. Щелкните мышью туда, где должен быть его верхний левый угол, и проведите мышью, не отпуская ее левой кнопки. Вы увидите, что между курсором мыши и точкой, где вы щелкнули, тянется прямоугольник, обозначающий границы вновь создаваемого элемента. После того как он примет желаемые размеры, отпустите левую кнопку мыши. Все, свободно позиционируемый элемент готов.
Второй способ создания свободного элемента — выбор пункта Layer меню Insert . В этом случае вам не придется рисовать в окне элемент — он появится сразу же. Вам останется только изменить его размеры и местоположение.
Посмотрите, изображенный на нем свободный элемент в настоящий момент выбран. Текстовый курсор находится внутри него, поэтому вы сразу же можете создать какое-либо содержимое. Чтобы выйти из свободного элемента, щелкните мышью где-либо вне его. А чтобы вернуться в свободный элемент, щелкните мышью по нему (но не по его границе).
Заметьте, что граница невыбранного свободного элемента отображается тускло-серым цветом, чтобы не отвлекать вас. Если же она вам все-таки мешает, вы можете отключить показ границ невыбранных свободных элементов. Для этого отключите пункт-выключатель Layer Borders подменю Visual Aids меню Views . После этого границы невыбранных свободных элементов пропадут, однако граница выбранного элемента все еще будет видна.
Теперь щелкните где-нибудь на границе свободного элемента. Вы также можете щелкнуть внутри свободного элемента, удерживая нажатой клавишу < Shift >.
Как видите, в данном случае свободно позиционируемый элемент предлагает вам набор маркеров изменения размера. Кроме того, в верхнем левом углу вы видите небольшой прямоугольник, называемый "захватом" . "Ухватившись" за него мышью, вы можете двигать свободный элемент. Точно такого же результата можно достичь, "ухватившись" мышью за саму границу элемента, но специальный "захват", согласитесь, удобнее. Щелкнув по нему, вы также сможете выделить границу свободного элемента.
Кроме всего прочего, в окне документа заметен некий значок. Это значок свободного элемента, показывающий, где он должен бы находиться, если бы не был свободно позиционирован. Вы можете щелкнуть по этому значку для того, чтобы выделить свободный элемент.
Чтобы удалить свободный элемент, выделите его границу и нажмите клавишу < Del >.
Вы также можете создавать свободно позиционируемые элементы, вложенные в другие свободно позиционируемые элементы. Для этого достаточно просто нарисовать или вставить новый элемент внутрь уже существующего. Обычно элементы, созданные позже, перекрывают элементы, созданные раньше, но вы можете изменить порядок перекрытия. Для этого выберите нужный свободный элемент и в подменю Arrange меню Modify выберите пункт Bring To Front , чтобы увеличить z -индекс элемента, или пункт Send To Back , чтобы его уменьшить. Однако эти пункты работают очень странно, и для задания z -индекса вам лучше воспользоваться другими средствами, описанными ниже.
В том же самом подменю Arrange меню Modify находится пункт - выключатель Prevent Layer Overlaps. Если он включен, Dreamweaver не позволит вам "наложить" один свободно позиционируемый элемент на другой, т.е. вы не сможете ни переместить его, ни изменить его размеры так, чтобы он перекрыл другие свободные элементы. Однако те элементы, которые ре "лежат" на других, останутся на своих местах.
Сохраните готовую Web -страницу под именем 11.3. htm .
