Как использовать Adobe Dreamweaver

Adobe Dreamweaver — такой мощный инструмент для веб-дизайнеров, потому что в нем есть много вещей, которые вы можете с ним сделать. Конечно, все те вещи, которые вы можете сделать, усложняют процесс обучения. Узнайте о многих вещах, которые может выполнять Dreamweaver, включая изменения в последней версии CS5. И не забудьте проверить, чего не хватает в Dreamweaver CS5.

Определение сайта

• Начать новый сайт
• Создать сайт
• Настройте только те части сайта, которые вам нужны, когда они вам нужны * Новое в CS5
• Настройка удаленных серверов, серверов контроля качества и тестирования для более полных рабочих процессов * Новое в CS5
• Создавать и публиковать новые каталоги
• Измените тип документа
• Включить метаданные на ваших страницах

Ввод вашего сайта в прямом эфире

• Определить удаленный сайт
• FTP файлы на веб-сервер
• Используйте систему контроля версий для проверки файлов в
• Соединитесь с Subversion для более продвинутого контроля версий * Новое в CS5
• Оставьте заметки для ваших товарищей по команде

Создание веб-страниц

• Написать страницу в режиме WYSIWYG
• Написать страницу в HTML
• Создать новую страницу из шаблона
• Создать новую страницу с нуля
• Создать шаблон
• Сохраните файлы в каталог вашего сайта
• Определите свойства страницы

CSS

• Используйте таблицы стилей CSS
• Добавление встроенных стилей
• Создать внешнюю таблицу стилей
• Прикрепить внешнюю таблицу стилей
• Создание класса, идентификатора, тега и составных селекторов CSS
• Изменить существующие правила CSS
• Создать CSS для печатных страниц
• Включить и отключить свойства стиля * Новое в CS5
• Визуально проверить блочную модель CSS * Новое в CS5

Текст

• Изменить текст
• Используйте разные шрифты
• Вставить разрыв строки
• Используйте специальные символы
• Включить сегодняшнюю дату
• Написать комментарии
• Применить HTML-теги к тексту
• Добавить атрибуты HTML в теги

связи

• Текст ссылки и изображения
• Проверьте ссылки на сайте
• Изменить цвета ссылки по умолчанию (ссылка, посещение, наведение, активная)
• Создавайте подсказки по ссылкам
• Создать почтовые ссылки
• Создать якоря веб-страниц

Картинки

• Добавить графику на страницу
• Редактировать изображения
• Изменить размер изображения
• Добавить альтернативный текст к изображениям
• Добавить дополнительные параметры доступности для изображений
• Совместите изображения и текст
• Создать ролловер
• Используйте карты изображений
• Используйте изображения трассировки
• Используйте заполнители изображения
• Вставить фейерверк HTML
• Вставьте файлы Photoshop

раскладка

• Используйте включенные бесплатные шаблоны * Новые CSS начальные макеты в CS5
• Вставьте div для макета
• Редактировать div в панели стилей CSS
• Вставьте абсолютно позиционированные элементы
• Отформатировать абсолютно позиционированные элементы в инспекторе свойств
• Используйте линейки, сетки и направляющие

Списки

• Добавить маркированные и нумерованные списки
• Настроить список маркеров и номеров

таблицы

• Создать таблицу
• Добавить строки заголовка и столбцы
• Используйте прозрачные изображения, чтобы держать ячейки таблицы открытыми
• Создать столбцы фиксированной ширины и гибкой ширины
• Изменить стили границ таблиц
• Вставить таблицу в таблицу
• Импорт табличных данных

формы

• Используйте форму mailto
• Определить форму действий
• Добавить текст, радио, флажок, файл, изображение, поля выбора и скрытые поля формы
• Сделайте ваши формы доступными с полями fieldset и label
• Создание пользовательских кнопок отправки
• Проверяйте формы с помощью JavaScript (Spry)

Базы данных и PHP скриптинг

• Присоедините ваш сайт к базе данных
• Настройте сайт PHP / mySQL
• Используйте элементы Spry для подключения к базе данных
• Вставьте объекты данных на ваши страницы
• Протестируйте и обновите источник данных Spry или дисплей
• Редактировать сложные динамические сайты в режиме конструктора
• Откройте для себя все динамически связанные файлы для сборки сайтов PHP CMS (WordPress, Joomla и Drupal) * Новое в CS5
• Подсказка для пользовательских классов для кода PHP, включая сторонние фреймворки, такие как фреймворк Zend * Новое в CS5

Рамки

• Создайте созданный веб-сайт
• Редактировать содержание noframes
• Форматируйте и стилизуйте ваши рамки
• Установите целевые ссылки по умолчанию между кадрами

Добавить интерактивность

• Создание фотоальбома (больше не в CS5)
• Добавить звук на веб-страницы
• Создать выпадающее меню
• Используйте поведение Dreamweaver для открытия всплывающих окон, создания меню переходов, воспроизведения звука, обмена изображениями и т. Д.
• Добавить RSS-каналы на сайт
• Вставьте Flash-текст как ролловер
• Вставить текст CSS как ролловер
• Вставьте другие плагины
• Добавить строку меню Spry, панели с вкладками, аккордеон, подсказку и складную панель
• Используйте Браузер Виджетов, чтобы найти новые виджеты для вашего сайта, без необходимости знать JavaScript

Проверьте свои страницы

• Протестируйте свои страницы в Live View, чтобы увидеть изменения из-за JavaScript и интерактивности * Новое в CS5
• Проверьте ваш HTML
• Предварительный просмотр ваших страниц в нескольких браузерах
• Используйте BrowserLab для предварительного просмотра страниц в других операционных системах * Новое в CS5
• Используйте Device Central, чтобы проверить, как страницы выглядят на мобильных устройствах.
• Проверьте совместимость браузера
• Измените настройки, чтобы они соответствовали потребностям вашего сайта.
• Проверьте внутренние ссылки сайта
• Проверьте доступность вашего сайта (больше не в CS5)
• Преобразовать документ Word в HTML

Настроить Dreamweaver

• Добавить расширения
• Отключить расширения
• Настройте Dreamweaver с помощью ярлыков

Повысьте эффективность

• Используйте встроенные сочетания клавиш
• Используйте фрагменты кода
• Создавайте и используйте шаблоны
• Создать новые страницы из пользовательских шаблонов
• Обновить шаблоны
• Включить один файл в другой с помощью библиотеки Dreamweaver
• Обновить элементы библиотеки
• Включить один файл в другой, используя SSI
• Воспользуйтесь поиском и заменой