www.wmaster.ru
Wmaster.ru

На главную

Введение в дизайн

СТАТЬИ

Хостинг

DOCS

Коллекция шрифтов

Скрипты

Секреты мастеров

Продвижение сайта

Soft

Журнал Wmaster

Электронные журналы

ФоруМ

web-mastering
HTML
Programming
HTML-редакторы
Учебник по SEO
Apache
MySQL
XML/WML
Flash
Photoshop
.htaccess
Всё для форумов
Clipart
3DSMax
SSI
CSS
Технология раскрутки
Авторское право
Кодовые таблицы
Важное

Windows

Macromedia Dreamweaver MX

10.1. Macromedia DreamWeaver MX. Слои.Часть 1.

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

Для создания слоя следует выбрать место на странице куда вы собираетесь вставить слой (кликнув мышкой), а затем дать команду  Insert - Layer (Рис. 10.01).

Рис. 10.01

Другой способ, это на вкладке Common нажать кнопку "1" (Рис. 10.02)

Рис. 10.02

но в этом случае вам самим придется рисовать слой при помощи мышки. И в том и другом случае результат будет один и тот же, а сам слой будет выглядеть приблизительно так (Рис. 10.03)

Рис. 10.03

Чтобы переместить слой по странице - нажмите левой кнопкой мышки на прямоугольник помеченный на рисунке 10.03 цифрой "1", (указатель сменит вид на крестик) и не отпуская кнопку тащите слой в нужное место (Рис. 10.04)

Рис. 10.04

Для удаления слоя со страницы - кликните правой кнопкой мыши по объекту помеченному цифрой 2 (Рис. 10.03) и в раскрывшемся контекстном меню выберите пункт Cut (так же можно правой кнопкой мышки кликнуть и по цифре "1" того же рисунка и выбрать Cut).

Для изменения размера слоя нужно навести курсор на один из квадратиков расположенных по его (слоя) периметру, нажать левую кнопку мышки и снова "тянуть" куда надо (Рис. 10.05)

Рис. 10.05

Если же вы не хотите чтобы слои накладывались друг на друга или частично перекрывались, то в меню Modify поставте галочку напротив пункта Prevent Layer Overlaps (Рис. 10.06)

Рис. 10.06

Тогда вы не сможете накладывать (перекрывать) слои друг на друга, хотя те слои которые уже перекрываются останутся в прежнем состоянии.

Теперь самое время задать необходимые параметры для слоя. Для этого следует выделить слой и перейти на вкладку Properties  (Рис. 10.07)

Рис. 10.07

В поле Layer ID вводится уникальное имя слоя, в поля L и T вводятся горизонтальная и вертикальная координаты верхнего левого угла слоя, а в поля W и H вводятся длина (ширина) и высота слоя. В поле Z-index вводится номер слоя, для чего он нужен - вот представьте, что на странице расположено сразу несколько слоев, да к тому же они еще и перекрываются друг другом. И как же можно будет указать "кто сегодня сверху, а кто снизу"- :) Вот и получается, что слой сам перекрывает все другие слои с меньшим значением  Z-index, и в тоже время перекрываем другими слоями у кого значение Z-index больше. Значение Z-index может быть не только положительным, но и отрицательным. Чтобы было понятней, скажу, что слои с более высоким индексом расположены над слоями с более низким индексом.

Список Vis, принимаемые значения:

show - делает содержимое слоя видимым,

hidden - делает содержимое слоя невидимым,

inherit - использует свойства видимости родительского слоя.

С помощью поля BG Image - задается фоновый рисунок слоя, а с помощью поля BG Color - задается цвет фона слоя. В поле Tag задается тэг с помощью которого создается слой (это может быть как DIV, так и Span). А с помощью списка Overflow задается метод отображения тех элементов слоя, которые не влезли в его видимую часть. В общем принцип тот же, что и  элементов Inframe

Пример Inframe

Я ничего не писал об Inframe в части посвященной фреймам по той причине, что DreamWeaver MX их не понимает, но они понимаются другими редакторами (например FronPage, тот который входит в состав офиса).

Так вот здесь (в слоях) принцип отображения тот же, всего в списке Overflow доступно четыре пункта (Рис. 10.08)

Рис. 10.08

visible - увеличивает размер слоя (вниз и направо) чтобы все его содержимое было видимо.

hidden - отсекает все содержимое слоя которое не влезло в видимую честь (размер слоя вы задаете сами).

scroll - добавляет к слою полосы прокрутки независимо от того, превышает ли содержимое размер слоя.

auto - добавляет к слою полосы прокрутки только тогда, когда содержимое слоя превышает его размер.

Набор полей Clip определяет видимую область слоя: поля L и T горизонтальная и вертикальная координаты верхнего левого угла, а R и B горизонтальная и вертикальная координаты нижнего правого угла видимой части слоя. Отсчет в данном случае ведется не от границы страницы, а от границы самого слоя.

 

<< назад    оглавление    вперед >>

Партнеры Wmaster
Protoplex.RU
Эскизы татуировок
Поиск по сайту
Объявления
Twitter автора
Карта сайта
Наши баннеры
О проекте

Реклама
(понижение цен)

Об Авторе
Команда
Архив рассылки
 Запомнить эту страницу
Сделать стартовой
Рассылка
Wmaster.ru - всё для вебмастера.
Наша кнопка

Все желающие могут поставить нашу кнопочку к себе на сайт
Всё для веб-мастеров

Партнеры
Бочкарёв Антон
Mail: webmaster[at]wmaster.ru
ICQ: 148780826
Хостинг от Valuehost
© RUscripts.design 2003

© Wmaster Design Group 2001-2008. © Все права защищены. При перепечатке любого материала с сайта  ссылка на http://www.wmaster.ru/  обязательна.