Создаем, программируем, шлифуем и раскручиваем web-caйт. Серия Быстро и легко - Алексеев Ю.М.
Скачать (прямая ссылка):
Заметим, что размер слоя можно изменять, если вводить в поля W и Н на панели свойств слоя необходимые значения. . НК^т.ї?**,;' ' •
Давайте переместим слой Layer 2 (Слой 2) в новое положение.
> Подведите указатель мыши к маркеру 0. Указатель мыши примет вид <$+.
> Нажмите и удерживайте левую кнопку мыши. Указатель мыши изменится на
> Не отпуская левую кнопку мыши, перемещайте мышь вправо. Вместе с указателем
. мыши будет перемещаться прямоугольная рамка, а в полях L и Т на панели свойств ¦ слоя будут изменяться координаты слоя.
Выбрав новое положение рамки, отпустите левую кнопку мыши. Слой будет размещен на новом месте. ,
> Переместите слои Layer 1 (Слой 1) и Layer 3 (Слой 3) в правую часть рабочей области окна.
Точное положение слоя в пикселах можно указать в полях ввода L и Т панели
слоя.
Кроме положения и размера слоя, на панели свойств слоя можно изменять другие его параметры. Например, если выбрать в открывающемся списке Vis (Видимость) строку hidden (Скрытый), то выделенный слой станет невидимым. С помощью значка Q с надписью Bg Color (Цвет фона) можно установить цвет фона в слое. Поле ввода Layer ID (Идентификатор слоя) позволяет изменить имя слоя. Используя значок & в правой верхней части панели свойств слоя, вы можете изменить свойства слоя на HTML.
280
Быстро и легко создаем, программируем и раскручиваем Web-сайт
Скопированные графические файлы мы создали в главах, посвященных профамме Macromedia Fireworks MX.
V Переименуйте файл СЛСайтьЛбаннер.діт в файл СЛСайтьЛЬагтегО.діт, а С:\Сайтьі\баннер1.діт в С:\Сайтьі\Ьаппег1.діт, поскольку программа Macromedia Dreamweaver MX 2004 некорректно работает с русскими именами файлов.
Эти рисунки баннеров фирмы АТЛАНТ мы будем использовать при создании сайта.
> На панели Insert (Вставка) выберите пункт Common (Общие) в левом открывающемся списке. Вид панели изменится в соответствии со сделанным выбором (Рис. 7.16).
> На панели Insert" (Вставка) щелкните мышью на кнопке Щ Image (Рисунок) и в раскрывшемся меню выберите пункт Image (Рисунок). На экране появится диалог Select Image Source (Выбрать исходное изображение) (Рис. 7.21).
IS и lud Image Souici
Select Hie name from: 0 Fite system
О Data sources
Папка: | (?? Сайты '
~[3 о ?f ES-
banner0.gif banneil .gif
•(Сайты
¦I
OK
| Image Files Г-оі';*ІРЗ-"-ІРвоЛрпо)
-
Отмена j
URL |HcAWCe(tfbi
Relative to: !Document indeithtm
RI Pievww images
' -- -, .? Jk
^ Рис. 7.21. Диалог Select Image ¦ Source (Выбрать исходное изображение) % ¦
> В открывающемся списке Папка (Save in) выберите диск С:.
В списке папок и файлов диалога выберите папку Сайты, в которой находится
необходимое изображение. ¦ -;i . .
> Щелкните мышью на графическом файле banner0.gif в списке папок и файлов. В поле ввода Имя файла (File name) появится имя выбранного файла.
Если установлен флажок Preview Images (Предварительный просмотр изображений), то в поле Image Preview (Предварительный просмотр изображения) появится указанный
рисунок - баннер фирмы АТЛАНТ.
> Нажмите кнопку ОК, чтобы закрыть диалог"Select " Image Source (Выбрать исходное изображение). В верхнем прямоугольнике появится выбранное изображение
(Рис. 7.22). ,. . ¦
¦•'Г.
¦¦ • ;.-.г. 1,
Image preview
ГЛАВА 7. Создание Web-сайта с помощью Macromedia Dreamweaver MX
281
File Edit View I nseit Modify Text Command. Site Wind™ HcIu
cooron- 5ь в ,'В '4¦•IBI(QlB-S»
j ii jaj<.ude|bjs.« j Щ ОєіЦг, I THr [гпеевоя стражи, 1#? Jt- ©. | С
нг*ч страница |rCdAibi/indfjK htm")
it
Компьютеры на тобой вкус ¦
.? с I * * ^ й I т
Bt)J SK-МПАН|[С:\Сайги) \-~Щ banrvJrfl.Qf 1—? banner! .дї '-? indes.htm
I Layeft 4 ? Prevent overlaps Hamo I Z
OES (Ut L_I
Ota Mt д
MeD I VSpace
ілі as a «sc*.«
O ?3 ^ [oefaut
Laver3 Layer2 Leyerl
Puc. 7.22. Рисунок в первом слое
П
Если щелкнуть мышью на кнопке | в середине левого края области закрепленных панелей, то все панели у правого края рабочего окна будут скрыты: Повторное нажатие
кнопки у вновь развернет панели.
Теперь вставим рисунок другого баннера в слой Layer 2 (Слой 2) - вторую сверху прямоугольную рамку.
V Вставьте анимационный графический файл С:\Сайть.\Ьаппег1.діт во второй слой (Рис. ,7.23). .
File Edit View Insert Modify T eel Command. Site Window Help
I Hi I [І2І Code ggSpft Design Title: | Славная странна
г.гр.чінц-t {CrtAridi1 HMrJ^M hrrri')
5»e - АТЛАНТ (САСайты) Ьаппег0.с# ?оплеті-ді
.htm
i,u,,v:;
Рис. 7.23. Рисунки в двух слоях
*282
Быстро и легко создаем, программируем и раскручиваем Web-сайт
Обратите внимание, что анимация во втором баннере отсутствует. Анимация будет проигрываться при просмотре сайта в браузере (см. знакомство «Просматриваем Web-сайт в браузере»). А сейчас отображается первый кадр анимации.
Давайте присвоим имена рисункам.