I. Dreamweaver Настройка пути к сайту и создание структуры
1. Пункт меню Site-New Site. Появится окно свойств нового сайта.
2. В поле SiteName укажите имя будущего сайта (Site)
3. В поле Local Root Folder выберите папку, где Вы будете размещать Ваш сайт.
(MySite). Удобнее воспользоваться проводником, нажав на иконку с желтой папкой.
4. Нажмите кнопку Ok
5. Появится окно, содержащее «структуру» пустого сайта.
6. Пункт меню File-New File
7. В правой части окна появится поле с именем untitled.htm. Измените его на
index.htm
8. Аналогично создайте столько страниц, столько Вы наметили вначале: page1.htm,
page2.htm, page3.htm, page4.htm.
9. Двойным щелчком по изображению файла index.htm откройте его в режиме
редактирования.
II. Задание параметров страниц
1. Для работы откроем окна Window > Objects (объекты) и Window >
2. Properties (свойства) (если их нет на экране)
3. Через меню Modify > Page Properties определим параметры страницы.
4. В поле Title задайте заголовок, который будет виден в заголовке окна (Учебный
сайт)
5. В поле Background Image можно выбрать файл с рисунком, который заполнит фон
6. В других полях можно настроить цвет фона, цвет текста, гиперссылок, и т.д.
7. В поле Document Encoding выбрать кодировку Cyrillic Windows-1251
8. По завершению нажмите Ok.
III. Создание панели навигации
1. Откройте страницу index.htm (Site-Site Files-двойной щелчок по имени файла).
Вверху страницы напишите название сайта: Хабаровская летняя краевая физико-
математическая школа. В окошке свойств укажите нужные атрибуты: стиль, цвет,
шрифт.
2. На панели объектов нажмите иконку с изображением таблицы. Или выполните
цепочку Insert-Table
3. В диалоговом окне определите параметры таблицы: рядов 1, колонок 5.
4. Нажмите Ок и появится изображение таблицы.
5. На панели свойств укажите в поле Border размер сетки 0. Таким образом мы
сделали границу таблицы невидимой. В поле BgColor можно указать цвет фона
таблицы, в поле BgImage можно выбрать файл с фоновым изображением внутри
всей таблицы.
6.
Заполняем клетки названиями страниц.
7.
Настроим гиперссылки для каждого пункта меню.
i.
Выделите слово, с которого пойдет ссылка
ii.
На панели свойств в поле Link выберите имя файла (с помощью
иконки с желтой папкой рядом с полем) или напишите адрес сайта, на который
ссылаетесь. Например для пункта меню Главная выбираем файл index.htm, для пункта
Про нас - page1.htm и так далее.
b. Запишите отредактированную страницу. File-Save
c. Просматриваем результат в браузере: F12
d. Проверив работу панели навигации, закройте окно браузера
e. Если все в порядке – идем дальше, иначе – исправляем ошибки☺
IV. Оформление страниц сайта с помощью созданного шаблона
1. Создадим шаблон оформления всего сайта на основе созданной главной странички
index.htm. Это означает, что все остальные страницы будут содержать один общий
заголовок и одинаковую для всех панель навигации.
2. Сохраните открытую страницу как шаблон: File – Save As Template
3. В появившемся диалоговом окне укажите имя нового шаблона ( osnova). После чего
нажмите кнопку Save
4. Создадим в шаблоне область, доступную для редактирования:
i. Установите курсор в то место, откуда буде начинаться область, доступная для
изменений.
ii. Пройдите цепочку: Modify – Templates – New Editable Region
iii. В диалоговом окне введите имя области (например 1) и подтвердите операцию
щелчком по кнопке Ок.
2. Сохраните шаблон еще раз. File – Save.
3. Откройте страницу page1.htm.
4. Применим шаблон к открытой странице: Modify – Templates – Apply Template to
Page
5. В диалоговом окне выберите шаблон osnova и нажмите кнопку Select
6. Вид страницы должен стать такой же, как у главной.
7. Сохраните страницу. File-Save
8. Аналогичную процедуру проделайте с оставшимися файлами.
9. По окончании оформления всех страниц, проверьте работу меню, для чего
запустите просмотр (F12) и пощелкайте на пункты меню. Если все сделано верно,
то при нажатии должен меняться только наименование файла в адресной строке
браузера.
V. Оформление содержания страниц
В этом параграфе Вам будут предложены основные элементы оформления
страниц. Все элементы можно вставлять на страницу через меню, или через окно
объектов.
1. Работа с текстом
Текст может быть просто введен с клавиатуры. Большие фрагменты удобнее
создавать во внешнем текстовом редакторе и затем с помощью буфера обмена
(копирования и вставки) добавлять на страницу сайта.
При работе с текстом на панели свойств можно менять: размер шрифта, тип
шрифта, цвет, расположение (по центру, слева, справа), создавать списки и делать
абзацные отступы.
При нажатии клавиши Enter начинается новая строка и между абзацами
вставляется пустая строчка, чтобы этого избежать, можно воспользоваться
комбинацией клавиш Shift+Enter.
2. Вставка изображений
Напоминаю, что желательно все файлы изображений, которые будут
располагаться на Вашем сайте, держать в папке Images.'>Images.
• Для вставки изображения воспользуйтесь панелью объектов, или пройдите
цепочку Insert – Image
• В открывшемся диалоговом окне выберите папку Images и укажите имя файла с
нужным изображением. Нажмите кнопку Select.
• Картинка появится в том месте, где находился курсор.
• Для несознательных: если все-таки нужное Вам изображение лежит не в папке
Images, то выберите в диалоговом окне место расположения нужного файла и на
запрос компьютера поместить файл в рабочую папку с Вашим сайтом ответьте
положительно.
Смысл полей
•
W – ширина изображения в пикселях
•
Н - высота изображения в пикселях
•
Align – этот список задает девять видов горизонтального и вертикального
выравнивания
•
Alt – текстовый комментарий к картинке (необязательное поле)
•
V space – задает размер свободного пространства по вертикали над и под
изображением (в пикселях)
•
H space - задает размер свободного пространства по горизонтали справа
и слева от изображения (в пикселях)
•
Low Scr – Задает графический суррогат для целевого изображения, то
есть картинку низкого разрешения (но легкую), которая замещает основную на время
ее загрузки
•
Border – задает толщину граничной рамки, если она нужна.
3.Таблицы
Вставка таблицы уже описана в пункте IV.
Достарыңызбен бөлісу: | 
