Учебник Macromedia Dreamweaver (стр. 81 из 135)

<ТITLE>Пример WEB-страницы</ТITLE>

<!— Сценарий, необходимый для нормальной работы этой Web-страницы в старых версиях Navigator —> </SCRIPT> </HEAD> <BODY>

Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя.

</DIV>

</BODY> </HTML>

Этот код дает тот же самый результат, что и предыдущий. Просто выглядит более компактным, особенно если выбросить код сценария, "отвечающего" за совместимость с Navigator.

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

Вопрос в другом. Так ли уж нужны нам эти свободно позиционируемые элементы?

Зачем нужны свободно позиционируемые элементы

Действительно, зачем?

Подавляющее большинство 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 То Grid подменю Grid меню View или нажав комбинацию клавиш <Ctrl>+ +<Alt>+<Shift>+<G>. Подробнее обо всех этих манипуляциях см. главу 8.

Примечание

Имейте, однако, в виду, что это всего лишь рекомендации. Измерительные линейки, сетка и "прилипание", по идее, должны помочь вам, но если вы привыкли работать без таких визуальных "подсказок", не включайте их.

Чтобы создать свободно позиционируемый элемент, проще всего нажать кнопку Draw Layer (рис. 11.3), расположенную на вкладке Common панели объектов.

Рис. 11.3. Кнопка Draw Layer панели объектов

Однако после нажатия этой кнопки новый свободный элемент на странице не появится. Его нужно будет нарисовать примерно так же, как мы рисовали ячейки и таблицы разметки в главе 8. Поместите курсор мыши в окно документа — вы видите, что он принял вид крестика. Это значит, что теперь вы можете нарисовать свободный элемент. Щелкните мышью туда, где должен быть его верхний левый угол, и проведите мышью, не отпуская ее девой кнопки. Вы увидите, что между курсором мыши и точкой, где вы щелкнули, тянется прямоугольник, обозначающий границы вновь создаваемого элемента. После того как он примет желаемые размеры, отпустите левую кнопку мыши. Все, свободно позиционируемый элемент готов (рис. 11.4).

Рис. 11.4. Свободно позиционируемый элемент в окне документа Dreamweaver

Второй способ создания свободного элемента — выбор пункта Layer меню Insert. В этом случае вам не придется рисовать в окне элемент — он появится сразу же. Вам останется только изменить его размеры и местоположение.

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

Заметьте, что граница невыбранного свободного элемента отображается тускло-серым цветом, чтобы не отвлекать вас. Если же она вам все-таки мешает, вы можете отключить показ границ невыбранных свободных элементов. Для этого отключите пункт-выключатель Layer Borders подменю Visual Aids меню Views. После этого границы невыбранных свободных элементов пропадут, однако граница выбранного элемента все еще будет видна.

Теперь щелкните где-нибудь на границе свободного элемента. Вы также можете щелкнуть внутри свободного элемента, удерживая нажатой клавишу <Shift>. Результат показан на рис. 11.5.

Рис. 11.5. Свободно позиционируемый элемент с выделенной границей

Как видите, в данном случае свободно позиционируемый элемент предлагает вам набор маркеров изменения размера. Кроме того, в верхнем левом углу вы видите небольшой прямоугольник, называемый "захватом" (рис. 11.6) "Ухватившись" за него мышью, вы можете двигать свободный элемент. Точно такого же результата можно достичь, "ухватившись" мышью за саму границу элемента, но специальный "захват", согласитесь, удобнее. Щелкнув по нему, вы также сможете выделить границу свободного элемента.

Рис. 11.6. "Захват" свободно позиционируемого элемента

Кроме всего прочего, в окне документа заметен некий значок, представленный на рис. 11.7. Это значок свободного элемента, показывающий, где он должен был бы находиться, если бы не был свободно позиционирован. Вы можете щелкнуть по этому значку для того, чтобы выделить свободный элемент.

Рис. 11.7. Значок свободно позиционируемого элемента

Чтобы удалить свободный элемент, выделите его границу и нажмите клавишу <Del>.

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

Рис. 11.8. Свободно позиционируемые элементы, вложенные друг в друга (сетка временно отключена)

Вы уже знаете, что свободно позиционируемые элементы могут перекрывать друг друга. Обычно элементы, созданные позже, перекрывают элементы, созданные раньше, но вы можете изменить порядок перекрытия. Для этого выберите нужный свободный элемент и в подменю Arrange меню Modify выберите пункт Bring To Front, чтобы увеличить z-индекс элемента, или пункт Send To Back, чтобы его уменьшить. Однако эти пункты работают очень странно, и для задания z-индекса вам лучше воспользоваться другими средствами, описанными ниже.