ВНИМАНИЕ!!! В локальной версии дистанционного курса (на компакт-диске) окно с практическими заданиями будет постоянно присутствовать на экране, избавляя вас от необходимости постоянно переключаться между окном с заданиями и окном программы Dreamweaver.
1. Запустите программу Macromedia Dreamweaver MX. (Пуск > Программы > Macromedia > Macromedia Dreamweaver MX).
Если вы запустили программу впервые, то появится диалоговое окно Workspace Setup. В этом окне выберите опцию Dreamweaver MX Workspace. Щелкните по кнопке ОК. Откроется окно программы с уже созданным новым документом (чистой HTML-страницей).
3. Обратите внимание на палитру объектов (Insert). Она находится сразу после строки меню. На палитре вы увидите вкладки, соответствующие категориям. Изначально открыта категория Common. Здесь представлены часто используемые объекты: изображения, таблицы и т.д. Щелкните на вкладке Forms. На этой вкладке представлены элементы управления (кнопки, радиокнопки, флажки, текстовые поля и др.), их практическое применения для создания форм обратной связи мы будем рассматривать в Уроке ╧9.
4. Щелкните обратно по категории Common.
5. Окно документа обычно разделено на две части. В верхней вы видите HTML-код пока еще пустой страницы, а нижняя часть используется непосредственно для размещения на ней элементов.
Переключаться между верхней и нижней частью можно с помощью кнопок (Code , Code&Design , Design). Напишите что-нибудь в нижней части и вы увидите как этот же текст занимает свое место в HTML-коде. Если у вас некорректно отображаются русские буквы, то выполните настройку программы.
6. В нижней части окна программы вы видите палитру свойств. Ей мы всегда будем пользоваться, когда захотим изменить какое-нибудь свойство у размещенного на странице объекта. В этой палитре всегда отображаются свойства выделенного объекта. Например, сейчас там отображаются свойства текста, который вы написали на странице.
7. В правой области окна программы вы видите вспомогательные палитры. Для того, чтобы раскрыть палитру, нужно щелкнуть на ее названии.
1. Выберите пункты меню Site > New Site.
2. В окне Site Definition┘ В поле Site Name напишите имя сайта, которое будет идентифицировать сайт в программе Dreamweaver, например, MySite.
3. В поле Local Root Folder требуется указать папку на вашем жестком диске, в которой будут находится файлы нашего будущего сайта. Для этого щелкните на значке папки справа от поля и в появившемся диалоговом окне выберите папку или создайте новую папку.
4. Остальные поля и категории оставьте без изменений и нажмите кнопку ОК.
Это окно мы еще будем использовать при изучении публикации сайта в сети Интернет.
5. Обратите внимание на палитру Site. В ней отображаются файлы, которые находятся в локальной папке сайта. Сейчас у нас еще нет сохраненных страниц. Сохраним одну из них.
6. Сохраним текущую чистую страницу под именем myself.htm в папку сайта. Для этого выберите пункты File > Save. Убедитесь, что выбрана папка сайта и введите имя файла myself.htm.
7. Создайте новый файл командой главного меню программы File > New┘
8. Сохраним эту пустую страничку под именем friends.htm с помощью команды File > Save As┘
9. Обратите внимание, чтобы страница была сохранена также в папку нашего сайта.
10. В палитре Site теперь должны отображаться два файла: myself.htm и friends.htm.
11. В нижней части рабочей области также должны отображаться две вкладки, соответствующие открытым страничкам: myself.htm и friends-htm.
12. Если какая-то из вкладок отсутствует, дважды щелкните на отсутствующем имени файла в палитре Site. Таким образом, двойной щелчок на имени файла в палитре Site открывает этот файл для редактирования.
13. Завершите работу программы Dreamweaver.
Размещение текста и изображений
1. Запустите программу Dreamweaver MX.
2. В палитре Site выберите файл myself.htm. Переключитесь в режим Design и напишите на странице текст, рассказывающий о вас. Например, такого содержания.
Здравствуйте!
Рад Вас приветствовать на своей персональной страничке.
Мне 25 лет, но я только начинаю осваивать искусство Web-дизайна.
Скоро я приобрету профессиональные навыки создания корпоративных сайтов. Таким образом я смогу эффектно представить информацию о себе всему миру и, может быть, это в будущем изменит мою жизнь.
Этот сайт лишь проба пера. Заходите попозже, когда я освою все 10 уроков.
3. Cохраните страницу (File > Save).
4. Вставим на нее фотографию. Установите курсов в начало страницы. В палитре объектов щелкните на пиктограмме Image .
5. В появившемся диалоговом окне выберите файл myfoto.jpg из папки "Фото для сайта" (ее можно скачать здесь) и нажмите ОК.
Фотография вставилась на страницу в позицию курсора. Установим обтекание текста справа.
6. Щелкните по фотографии и в палитре свойств выберите из раскрывающегося списка Align пункт Left.
7. Сохраните страницу (File > Save).
8. Откройте страницу friends.htm.
9. Напишите на странице текст:
Посмотрите фотографии моих друзей!
Это Брайн Эдамс - очень известный человек. Если вы еще не слышали ни одной его песни, очень рекомендую заполнить этот пробел.
Это Лив Тайлер, известная актриса, но мне она нравится, потому что она дочь Стивена Тайлера из "Аэросмит".
Это мой президент. И этим все сказано...
10. Вставьте фотографии (как было сделано в пунктах 4-7) после каждого абзаца в тексте про друзей. Соответственно файлы √ friends1.jpg, friends2.jpg, friends3.jpg (все файлы из папки "Фото для сайта").
11. Сохраните страницу (File > Save).
Изменим фон страницы и цвет основного текста.
12. Выберите пункты меню Modify > Page Properties. Откроется окно изменения главных свойств Web-страницы.
13. Выберите в поле Background цвет фона для страницы. Для этого нужно щелкнуть по пиктограмме открытия палитры
14. В поле Text аналогично выберите цвет основного текста для страницы. Если вы хотите посмотреть, как смотрится текст на фоне, нажмите кнопку Apply. Тогда окно Page Properties останется открытым.
15. Подберите цвет фона и текста для всех страниц сайта (index.htm, myself.htm, friends.htm).
16. Сохраните результаты своей работы.
1. В программе Dreamweaver MX создайте новую страницу (File > New > Create).
2. Напишите на этой странице следующий текст:
Обо мне
Мои друзья
Пишите мне
3. Выделите все строчки и в палитре свойств установите выравнивание по центру . Сохраните страницу под именем index.htm.
Сейчас мы создадим гиперссылки на странички. Это нужно для того, чтобы при щелчке мышкой на строчке ╚Обо мне╩ появлялась страничка myself.htm.
4. Выделите мышкой строчку ╚Обо мне╩.
5. В палитре свойств в поле Link щелкните слева на значке папки .
6. В диалоговом окне выберите файл myself.htm. Нажмите кнопку ОК.
Строчка ╚Обо мне╩ будет подчеркнута синей линией. Это значит, что гиперссылка назначена.
7. Выделите мышкой строчку ╚Мои друзья╩.
8. В палитре свойств в поле Link щелкните слева на значке папки .
9. В диалоговом окне выберите файл friends.htm. Нажмите кнопку ОК.
Строчка ╚Мои друзья╩ будет подчеркнута синей линией. Это значит, что гиперссылка назначена.
Сделаем ссылку на пункт ╚Пишите мне╩. Здесь будет ссылка на e-mail, чтобы при нажатии на нее запускалась почтовая программа с созданным новым письмом.
10. Выделите мышкой строчку ╚Пишите мне╩.
11. В палитре свойств в поле Link напишите: mailto:[email protected]. Нажмите Enter. Здесь самое главное слово mailto:, затем вы просто вписываете свой электронный адрес.
Протестируем получившийся сайт. Нажмите кнопку F12. Текущая страница должна загрузиться в браузере. Если у вас выдалось сообщение ╚Невозможно отобразить страницу╩, закройте текущее окно браузера и нажмите F12 вновь. Производите эти действия до тех пор, пока в браузере не увидите вашу страницу.