Задание №11
Использование Dreamweaver’a для создания страницы на основе свободно позиционированных элементов.
Чтобы создать свободно позиционируемый элемент, проще всего нажать кнопку Draw AP Div, расположенную на вкладке Layout панели объектов.
Однако после нажатия этой кнопки новый свободный элемент на странице не появится. Поместите курсор мыши в окно документа — вы видите, что он принял вид крестика. Это значит, что теперь вы можете нарисовать свободный элемент. Щелкните мышью туда, где должен быть его верхний левый угол, и проведите мышью, не отпуская ее девой кнопки. Вы увидите, что между курсором мыши и точкой, где вы щелкнули, тянется прямоугольник, обозначающий границы вновь создаваемого элемента. После того как он примет желаемые размеры, отпустите левую кнопку мыши. Все, свободно позиционируемый элемент готов.
Набор параметров свободных элементов, которые мы можем задать в Dreamweaver, весьма обширен.
В поле ввода CSS-P Element вводится уникальное имя свободного элемента. Dreamweaver по умолчанию подставляет туда автоматически сгенерированное имя вида apDiv<парядковый номер>. Если хотите, можете ввести более вразумительное имя. Вы можете также выбрать пункт ID контекстного меню свободного элемента и ввести новое имя в диалоговом окне Change Attribute.
В полях ввода L и Т вводятся, соответственно, горизонтальная и вертикальная координаты верхнего левого угла свободно позиционируемого элемента. Заметьте, что эти величины могут быть заданы в любой из единиц измерений, поддерживаемых CSS.
В полях ввода W и Н вводятся, соответственно, ширина и высота свободно позиционируемого элемента. Эти величины также могут быть заданы в любой из единиц измерений, поддерживаемых CSS.
В поле ввода Z-Index задаётся порядковый номер данного свободного элемента в "стопке" других. Эта величина может быть как положительной, так и отрицательной. Свободный элемент перекрывает все элементы с меньшим значением z-индекса и перекрывается элементами с большим его значением. Кроме того, свободный элемент перекрывает обычное содержимое страницы, лежащее в "потоке" текста.
С помощью раскрывающегося списка Vis вы можете задать, будет ли свободный элемент видим на странице. Здесь доступны четыре пункта:
inherit - заставляет элемент "наследовать" видимость от, родителя, т. е. если родитель видим, видим и сам элемент, и наоборот;
visible — делает элемент видимым;
hidden — делает элемент невидимым (скрытым); ,
default — как правило, аналогично inherit.
Похожую функцию выполняет подменю Visibility контекстного меню свободного элемента. Оно содержит те же четыре пункта, что и раскрывающийся список Vis.
В поле ввода Bg Image вводится имя файла графического изображения, которое будет использовано в качестве фона. Вы также можете щелкнуть значок папки, расположенный справа от поля ввода, и выбрать нужный файл в появившемся на экране диалоговом окне Select File.
С помощью селектора цветов Bg Color задается цвет фона свободного элемента.
В раскрывающемся списке Tag выбирается тег, с помощью которого создается свободно позиционируемый элемент. Этот список содержит только два пункта: SPAN и DIV. Их назначение должно быть вам понятно. По умолчанию свободный элемент создается с использованием тега <DIV>.
Аналогичную функцию выполняет подменю Tag контекстного меню свободного элемента. Оно содержит те же четыре пункта, что и раскрывающийся список Tag.
С помощью раскрывающегося списка Overflow задается поведение свободного элемента в случае, если его содержимое в нем не помещается. Здесь доступны четыре пункта:
visible — заставляет свободный элемент растянуться по вертикали, чтобы вместить в себя все содержимое;
hidden — просто скрывает ("обрезает") ту часть содержимого свободного элемента, которая превышает его размеры;
scroll — заставляет свободный элемент отобразить полосы прокрутки независимо от того, помещается ли в нем все содержимое или нет;
auto -заставляет свободный элемент отобразить полосы прокрутки только тогда, когда его содержимое в нем не помещается;
пункт <пустая строка> — аналогичен visible (значение по умолчанию).
Пункт scroll предусмотрен для таких случаев, когда содержимое свободно позиционируемого элемента точно выверено, и появление и исчезновение полос прокрутки может его изменить. В других случаях используйте пункт auto или другие пункты.
Группа полей ввода Clip позволяет задать координаты видимой области свободного элемента. Каждый свободный элемент может иметь такую видимую область, иначе говоря, фрагмент содержимого, который виден в окне Web-обозревателя. Содержимое, не входящее в эту область, скрывается. Задание видимой области может понадобиться для создания каких-либо спецэффектов на Web-странице.
В группу полей ввода Clip входят четыре поля:
L горизонтальная координата верхнего левого угла;
Т — вертикальная координата верхнего левого угла;
R — горизонтальная координата нижнего правого угла;
В — вертикальная координата нижнего правого угла.
Создайте новый html документ. Сохраните его под именем d011.html.
Вставьте в него несколько свободно позиционируемых элементов при помощи инструмента Draw AP Div.
Создайте новый css файл. Сохраните его под именем d011.css.
Свяжите созданный css файл с html файлом.
Перенесите все описания стилей из html файла в css файл.
Сохраните все файлы.
Создайте два новых файла: html и css. Сохраните их под именами d011_1.html и d011_1.css соответственно.
Свяжите css файл с html файлом.
Задайте параметры страницы: название, цвет фона, текста, гиперссылок и т.п.
Откройте файл d008.html. Перейдите в файл d011_1.html.
Создайте свободно позиционируемый элемент, расположенный в верхней части страницы, дайте ему имя header. Скопируйте из файла d008.html текст заголовка. Примените к нему заголовок первого уровня (h1). Задайте для текста заголовка выравнивание по центру. Примерный результат показан ниже.
Создайте тень для созданного ранее заголовка. Для этого создайте еще один свободно позиционируемый элемент такого же размера как и элемент заголовка (либо вы можете его просто скопировать). Сделайте заливку нового элемента черного цвета. Задайте ему имя headershadow. Переключитесь на элемент header, задайте ему цвет такой же цвет, как и цвет фона.
Установите для него параметр overflow в hidden.
Если вы делали элемент тени не копированием, то задайте ему такие же значения для ширины и высоты. Сделайте смещение элемента тени относительно самого заголовка (4-5 пикселов будет достаточно). Задайте для элемента тени z-index равным -1 (это необходимо для того, чтобы он располагался ниже, чем ранее созданный элемент с приветствием). Примерный результат представлен на рисунке ниже.
Создайте еще один свободно позиционируемый элемент. Задайте для него имя content. Этот элемент должен располагаться под элементом приветствия. Скопируйте в него текст из файла d008.html. У вас должно получиться примерно следующее:
Добавьте в правый верхний угол свободно позиционируемый элемент, переименуйте его в picture, вставьте в него какое-либо изображение. Изображение должно быть достаточно небольших размеров.
Создайте полосу навигации. Для этого создайте новый свободно позиционируемый элемент, дайте ему имя nav, задайте необходимые фон, шрифт и т.п.
В полосе навигации будут находиться следующие ссылки:
О моих увлечениях – ссылка passion.html
О выполненных мной проектах – projects.html
Обо мне – about.html.
Для текста создайте свои собственные текстовые стили.
Сохраните файл.
Все созданные стили для свободно позиционируемых элементов из html файла перенесите в css файл.