План: 1. Функциональные возможности DreamWeaver 2. Основные объекты Web –страницы 3. Настройки DreamWeaver Исторические сведения - 1989 год – Тим Бернерс-Ли написал документ “Information Management: A proposal” («Управление информацией: предложение»), которое легло в основу изобретения языка гипертекстовой разметки (HTML).
- 1993 год - по всему миру существовали сотни компьютеров, способных отображать HTML-документы.
- 1997 год - появилась программа Dreamweaver 1.0 от Macromedia.
- 2003 год - фирма Macromedia объявила о выходе приложения MX 2004.
- 2005 год – фирма Adobe выкупила программу Dreamweaver у Macromedia и включила в состав Creative Suite («Набор для творчества»), комплекта программ для графического (полиграфического и веб-)дизайна фирмы Adobe, включающего также PhotoShop, Illustrator и InDesign – Dreamweaver CS3.
- Далее вышло четвертое издание Creative Suite, отсюда сокращение CS4.
- 12 апреля 2011 года – выпущена Adobe Creative Suite 5.5 (CS5.5). Предлагается в пяти вариантах: Design Standard, Design Premium, Web Premium, Production Premium и Master Collection.
- 7 мая 2012 года – выпущена версия Adobe Creative Suite 6.
Dreamweaver — один из наиболее распространенных редакторов языка гипертекстовой разметки (HTML) Программа предлагает невероятное множество инструментов для дизайна и редактирования кода: - кодировщики любят его за разнообразные улучшения, встроенные в среду окна представления Code (Код);
- разработчикам нравится, что программа поддерживает такие языки программирования, как ASP, PHP, ColdFusion и JavaScript;
- проектировщикам по душе, что текст и графика появляются в точном соответствии с концепцией «что вы видите, то и получаете» (WYSIWYG, what you see is what you get) — при этом не надо тратить время на предварительный просмотр страницы в браузерах;
- для начинающих веб-разработчиков важно, что мощный интерфейс программы прост в использовании.
Рабочее пространство программы Adobe Dreamweaver CS6
Панель приложений
меню рабочего пространства
Главное меню
Панель Вставка
Панели
Клиентская
область окна
Панель Свойства
Стартовый экран
Окно программы с загруженными документами
Панель Документы
Полоса вкладок
Полный путь к файлу, открытому в активном окне документа
Панели - Панели — особые окна Dreamweaver, предоставляющие доступ к различным инструментам Dreamweaver. Таких панелей у Dreamweaver довольно много — каждая на свой особый случай.
- В верхней части окна располагается панель Документ. По умолчанию панель Документ "приклеена" к верхней части главного окна Dreamweaver, ниже полосы вкладок (фиксированная панель). Однако мы можем перенести ее на произвольное место экрана. Для этого найдем на ее левом краю захват, представляющий собой набор мелких точек, "захватим" его мышью, переместим на другое место экрана и "отпустим". Панель станет плавающей.
- Плавающая панель похожа на обычное окно Windows. Она имеет заголовок, за который ее можно перемещать (впрочем, для этого можно пользоваться и захватом, который все еще будет присутствовать на панели), а в нем —название панели и кнопку закрытия.
Захват
Название панели
- Мы можем снова "приклеить" плавающую панель к верхнему или нижнему краю главного окна, сделав ее опять фиксированной. Для этого "захватим" мышью ее захват или заголовок и переместим к нужному нам краю главного окна. В какой-то момент Dreamweaver отобразит тонкими черными линиями рамку в том месте, где панель будет приклеена, — это дает о себе знать док, специально выделенное для "приклеивания" панелей место на главном окне. Если мы теперь отпустим кнопку мыши, панель "приклеится" к этому краю главного окна, заняв соответствующий док.
Доки находятся на всех четырех краях окна — верхнем, левом, нижнем и правом. Но панель Документ (и некоторые другие панели) может быть "приклеена" только к верхнему и нижнему доку. - Доки находятся на всех четырех краях окна — верхнем, левом, нижнем и правом. Но панель Документ (и некоторые другие панели) может быть "приклеена" только к верхнему и нижнему доку.
- Мы познакомились с первой разновидностью панелей Dreamweaver. Они имеют постоянные размеры, могут быть "приклеены" только к верхнему и нижнему докам и "ходят сами по себе“.
- Панели, относящиеся ко второй разновидности, могут менять свои размеры, "приклеиваются" к любому доку, кроме верхнего, и могут объединяться в группы. Все панели такого рода, изначально присутствующие на экране, занимают правый док.
Переключение и разделение представлений - Программа Dreamweaver предлагает специализированные представления для кодировщиков и дизайнеров (проектировщиков), а также сложный вариант, объединяющий оба режима.
Представление Code (Код) — это рабочее пространство программы Dreamweaver, целиком сфокусированное на редактировании HTML-кода. Для переключения на представление Code (Код) щелкните по одноименной кнопке на панели инструментов Document (Документ). - Представление Code (Код) — это рабочее пространство программы Dreamweaver, целиком сфокусированное на редактировании HTML-кода. Для переключения на представление Code (Код) щелкните по одноименной кнопке на панели инструментов Document (Документ).
Представление Design (Дизайн) отображает редактируемый интерфейс страницы, похожий на то, как она выглядела бы в браузере. Чтобы переключиться на представление Design (Дизайн), щелкните по одноименной кнопке на панели инструментов Document (Документ). - Представление Design (Дизайн) отображает редактируемый интерфейс страницы, похожий на то, как она выглядела бы в браузере. Чтобы переключиться на представление Design (Дизайн), щелкните по одноименной кнопке на панели инструментов Document (Документ).
Представление Split (Разделение) предоставляет сложное рабочее пространство, которое дает доступ к оформлению и коду одновременно. Изменения, сделанные в одном окне, немедленно отображаются в другом. Для переключения на представление Split (Разделение) щелкните по одноименной кнопке на панели инструментов Document (Документ). - Представление Split (Разделение) предоставляет сложное рабочее пространство, которое дает доступ к оформлению и коду одновременно. Изменения, сделанные в одном окне, немедленно отображаются в другом. Для переключения на представление Split (Разделение) щелкните по одноименной кнопке на панели инструментов Document (Документ).
Можно расположить окна по горизонтали, отключив вертикальное разделение в меню View (Просмотр). Чтобы вернуться к нему снова, выполните команду меню View ⇒ Split Vertically (Просмотр ⇒ Разделить по вертикали). - Можно расположить окна по горизонтали, отключив вертикальное разделение в меню View (Просмотр). Чтобы вернуться к нему снова, выполните команду меню View ⇒ Split Vertically (Просмотр ⇒ Разделить по вертикали).
Выбор рабочего пространства - Быстрый способ настроить рабочую среду программы Dreamweaver — использовать одно из уже готовых рабочих пространств. Эти пространства были оптимизированы экспертами таким образом, чтобы разместить необходимые инструменты.
- Dreamweaver CS6 включает одиннадцать готовых рабочих пространств. Для доступа к ним выберите нужное из раскрывающегося списка Workspace (Рабочее пространство) на панели приложений.
Тестирование Web-страниц в Web-обозревателе - Первый способ — нажать кнопку Просмотр и отладка в браузере, находящуюся на панели Документ. Пункты меню этой кнопки предлагают нам протестировать Web-страницу в различных Web-обозревателях, установленных на нашем компьютере.
- Второй способ протестировать страницу в Web-обозревателе — использование подменю Предварительный просмотр в браузере меню Файл. В нем мы увидим те же пункты, что присутствуют в меню кнопки Просмотр и отладка в браузере.
Предварительная настройка Dreamweaver - Настройка программы выполняется в диалоговом окне Настройки. Чтобы вызвать его, нужно выбрать пункт Настройки меню Правка или нажать комбинацию клавиш +.
- В левой части окна Настройки находится список категорий Категория, а в правой — элементы управления, задающие относящиеся к выбранной категории настройки.
Регистрация Web-сайта в Dreamweaver - Регистрация Web-сайта в Dreamweaver начинается выбором пункта Новый сайт меню Веб-сайт. На экране появится диалоговое окно Настройка сайта.
- Изначально в списке категорий окна Настройка сайта выбрана категория Веб-сайт
- Здесь в соответствующее поле вводится имя Web-сайта, под которым он будет зарегистрирован в Dreamweaver.
- В поле ввода Локальная папка сайта указывается путь к корневой папке локальной копии Web-сайта.
- На этом регистрация Web-сайта завершена.
Тест
Щелкните кнопку Тест на панели инструментов iSpring Pro для редактирования теста
Dostları ilə paylaş: |
