DreamWeaver визуальный редактор гипертекстовых документов

Создание сайта Прежде чем браться за изготовление сайта нужно: четко представить себе его структуру разместить основные материалы в одной папке

Разработка структуры сайта Структуру сайта можно условно разделить на внутреннюю и_внешнюю

Настройка DreamWeaver Выполнить команду Edit-Preferences

Настройка DreamWeaver

Выполнить команду Edit - Preferences - Site Define Sites (определить сайт). Настройка DreamWeaver Определение местоположения сайта …..или Site - Define site

Настройка DreamWeaver Определение местоположения сайта

Настройка DreamWeaver Local Info Определение местоположения сайта Загрузить свою папку Вписать адрес своего сайта

Настройка DreamWeaver Remote info Определение местоположения сайта для всех

Настройка DreamWeaver Design Notes

Настройка DreamWeaver Site Map

Создание сайта Структура сайта. Управление файлами Site Manager Соединение с удаленным сервером, куда закачивается сайт

Создание сайта. Первая главная страница. File - New File Открыть новый файл

Создание сайта. Первая главная страница. File - New File

Создание сайта. Главная страница сайта untitled.htm переименовать вindex.htm index.htm Открыть файл

Создание сайта. Создание страниц. Интерфейс DreamWeaver

Создание сайта. Окно документа Окно (поле) документа это то рабочее пространство, где создаются гипертекстовые документы 1. Работа с HTML 2. Работа с графикой и HTML 3. Работа c графикой

Создание сайта. Окно документа Навигатор панелей

Создание сайта. Основные свойства страницы Modify - Page Properties Вставка рисунка на фон страницы

Основные палитры для разработки сайта Палитра «Объекты» Палитра «Свойства Объекта» Палитра «История»

Основные палитры для разработки сайта Палитра «Объекты»

Вставка таблиц. Rows - количество рядов таблицы Columns - количество колонок Cell padding - расстояние от границы ячейки до объектов внутри ее Cell Spacing - расстояние между границами соседних ячеек Width - ширина таблицы (в пикселях или в процентах) Border - толщина бордюра между ячейками таблицы Insert Table

Создание сайта. Разработка структуры сайта

Вставка таблиц. Вложение таблиц

Добавление объектов. Вставка рисунка.

Добавление объектов. Палитра «common objects» (основные объекты). Image (картинка) - вставляет на страничку графический элемент Rollover Image (перекатыш) - вставляет на страничку конструкцию, которая имитирует анимированную кнопку (кнопку изменяющую свой вид при наведении на нее) Table (таблица) - вставляет на страничку таблицу Tabular data (табличные данные) - вставляет готовую с таблицу с готовыми данными (например из Exel) Horizontal Rule (линейка) - вставляет декоративный элемент - линейку (обычно используется как разделитель абзацев) Navifgation Bar - вставляет навигационную панель состоящую из нескольких кнопок Draw Layer (нарисовать слой) - вставляет на страничку слой (как в PhotoShop) Line Break (мягкий перенос) - вставляет на страничку (в тексте) мягкий перенос Link (ссылка на электронную почту) - вставляет на страничку ссылку на электронный адрес Date (дата) - вставка в документ текущей даты (можно с автообновлением) Flash - вставляет флеш-анимацию в страничку ShockWave - вставляет Shockwave-анимацию Generator - вставляет заготовку Generator FireWorks - вставляет объект FireWorks Applet - вставляет ява-апплет ActiveX - вставляет ActiveX Plugin - вставляет объект, проигрываемый плагином SSI - вставляет инклюд (подключаемый внешний HTML файл)

Добавление объектов. Палитра Invisibles и Палитра head закладки комментарии ява-скрипты неразрывные пробелы мета-теги ключевые слова описания странички устанавливать параметры обновления странички указывать базовую ссылку (ссылку по умолчанию) указывать ссылки

Добавление объектов. Палитра Frames (фреймы) и Палитра forms (формы) поможет сделать одним нажатием на кнопку сложную фреймовую структуру. form - сама форма text field - текстовое поле button - кнопка checkbox - чекбокс (это где вы галочку на выборах ставите) radio button - радиобаттон, обеспечивает выбор одного из вариантов list/menu - делает выпадающий список или меню filefield - форма для закачки файлов imagefield - поле картинки hidden filed - скрытое поле jump menu - для перехода по клику на другую страничку

Добавление объектов. Палитра специальных символов знак копирайта, зарегистрированной торговой марки, итд

Объект Tabular Data - вставка внешних табличных данных data file - исходный файл delimiter - тип разделителя колонок (с несколькими вариантами) Table width - ширину таблицы (по ширине данных или указываем свое значение) Cell padding - расстояние от границы ячейки до объектов внутри ее Cell Spacing - расстояние между границами соседних ячеек Format Top Row - выделение или невыделение шапки таблицы Border - толщина бордюра между ячейками таблицы

Navigation Bar (навигационная панель)

Insert ( вставка )

Insert date ( вставка даты)

Основные палитры для разработки сайта Палитра «Свойства Объекта»

Вставка фона ячейки, строки или таблицы Рисунок в качестве фона Цвет в качестве фона

Вставка ссылки 1. Выделить текст или рисунок, который будет ссылкой 2. В палитре Property –Link вставить адрес ссылки

Палитра Property Inspector (Инспектор свойств) Target (Назначение) _blank. Загрузка связанного документа в новое окно броузера, не имеющее собственного имени. _parent. Загрузка связанного документа в родительское окно или родительский фрейм области (окна или фрейма), содержащей ссылку. Если в документе-источнике нет вложенных областей, то связанный документ загружается в полное окно программы просмотра. _self. Загрузка связанного документа в то же самое окно или фрейм, которые содержат ссылку. Этот вариант принимается по умолчанию. _top. Загрузка связанного документа в полное окно программы просмотра без учета текущей структуры фреймов.

Основные палитры для разработки сайта Палитра «История»

Работа с палитрой History перетащить движок вверх до любого предыдущего действия или щелчком на левой полосе палитры выставить его напротив последней результативной команды.

Табличные стили Commands-Format Table (Команды > Формат таблицы). Apply (Применить),

Цветовые схемы 1. Команда Commands > Set Color Scheme (Команды > Выбрать цветовую схему).

Загрузка сайта на сервер 1. Открыть программу Windows Commander 2. Перед Вами появятся 2 окна. 3. В правом окне открыть папку с вашим сайтом. 4. Затем активизировать левое окно, кликнув по нему мышкой.

Соединение с FTP-сервером

Ввод персональных данных

Настройка FTP-соединения ftp.narod.ru Учетная запись – вставить Ваш логин на сайт Пароль – пароль входа на сайт

Загрузка сайта на сервер После настройки FTP-соединения папки с жесткого диска компьютера копируются в левое окно.