10 полезных советов и рекомендаций Dreamweaver для начинающих

Пользователь Dreamweaver определенно определит, что это за электростанция. Обладает множеством функций, опций и, несомненно, одним из самых известных IDE (Integrated Development Environment) на современном рынке. Это может не соответствовать критериям, которые требовали некоторые разработчики, однако Dreamweaver, несомненно, предоставляет достойный набор инструментов для разработки, совместной работы и кодирования. Эти параметры и инструменты скрыты под слоями прискорбных, менее интуитивных меню, поэтому мы предлагаем учебные пособия в сегодняшнем посте..

Мы покажем вам некоторые из самых мощных функций Dreamweaver, которые помогут вам быстро получить к ним доступ, а также многие другие полезные приемы, которые помогут вам сэкономить время на разработку и значительно улучшить качество кода. Полный список после прыжка.

1. Динамический просмотр с “Прямая трансляция”

Мы уже знаем, что DW предлагает статическое представление наших открытых файлов, но как насчет "динамические взгляды" приложения, такого как WordPress?

Во-первых, нам нужно сказать DW, какие настройки использовать, чтобы представить наши"динамические взгляды" правильно. Для этого выберите Настройки HTTP-запроса от Просмотр> Параметры просмотра в реальном времени меню, затем войдите в ПОЛУЧИТЬ или же СООБЩЕНИЕ параметры, необходимые для правильного просмотра приложения.

Затем, переключившись на Прямая трансляция в DW он заменяет старый Представление дизайна панель с живым, идеальным для пикселов рендерингом WebKit вашей страницы; в комплекте с живым Javascript, манипуляциями с DOM, запросами к базе данных, серверным кодом и визуализированным CSS, а не с символами-заполнителями, которые вы видите в Представление дизайна.

2. «Навигатор по коду» - это Firebug DW

Шаг вперед - это все о Кодовый навигатор и когда в Прямая трансляция Окно, нажав ALT (Command-Option-click для Mac) в любом месте окна, мгновенно представляет код, который отображал этот элемент. Подобно тому, что вы можете увидеть в Firefox / Firebug.

3. Замораживание JavaScript

Из-за динамической природы Ajax нам часто приходится взаимодействовать со страницей, где определенные элементы не отображаются или не доступны при загрузке первой страницы. Это элементы, которые вводятся на страницу через некоторое время после загрузки страницы. Вот пример:

Возможно, вы захотите изменить стиль подсказки, которая полностью реализована в JavaScript. До сегодняшнего дня вы должны были бы методично искать свой сценарий, чтобы найти то, что создавалось и где.

Вместо этого попробуйте это:

Рендеринг вашей страницы в Прямая трансляция, затем нажмите F6 замораживать JavaScript в любое время, позволяя вам нацеливать и анализировать код, относящийся к любому динамическому элементу на странице.

4. Следующий лучший друг Live View - «Живой код»

Когда используешь Прямая трансляция, Вы также можете включить Живой код. Живой код обновит ваш код при наведении курсора, нажатии и взаимодействии с элементами и элементами в Окно просмотра в реальном времени!

5. Автоматическое завершение JavaScript

Dreamweaver поставляется с интеллектуальным и полным HTML и CSS дополнением кода, но как насчет Javascripts? Если вы кодируете jQuery или Prototype в Dreamweaver, вы должны знать, что существуют расширения API, которые обеспечивают завершение кода Javascript. Это уменьшает необходимость набора текста и может пригодиться для быстрых программистов.

Нажмите здесь, чтобы прочитать больше или скачать:

• Расширение jQuery API для Dreamweaver
• Расширение прототипа API для Dreamweaver

6. Украсить коды на лету

Ваша кодовая страница выглядит как неорганизованные, грязные строки кода? Использовать Применить исходное форматирование функция и переформатировать его в соответствии с вашими предпочтениями. Чтобы быстро очистить их, нажмите Формат исходного кода значок в нижней части Панель инструментов кодирования (Правка> Панели инструментов> Кодирование) и выберите Настройки формата кода установить желаемое форматирование.

Вы также можете получить доступ к опции форматирования из Команды> Применить исходное форматирование или применить его только к выбранному блоку кода, выбрав Применить исходное форматирование к выделению вариант.

7. Получить виджет

Просто нажмите на Расширить значок Dreamweaver (выглядит как шестеренка) в панели приложений и выберите Обзор веб-виджетов. Это приведет вас к Adobe Exchange, где вы сможете найти дополнительные виджеты от таких поставщиков, как Yahoo !, JQuery и многих других..

8. Subversion и Dreamweaver

И да, Dreamweaver поддерживает Subversion (SVN). Для разработчиков, которые используют SVN для контроля версий своего проекта, это может быть хорошей новостью. Разработчик Dreamweaver Эндрю Вольтмер обсудить как вы можете использовать Subversions с Dreamweaver.

9. Нет больше избыточных стилей

Многие люди используют Dreamweaver как способ визуального обновления контента, например, текстовый процессор. До Dreamweaver CS4 это могло привести к избыточным правилам CSS, таким как .class1, .class2, и так далее. В Dreamweaver CS4 просто переключите Инспектор недвижимости в HTML режим (щелкните значок HTML слева от инспектора), и вы попрощаетесь со всем этим избыточным CSS, вставив только соответствующую HTML-разметку.

10. Проверка формы стала проще

Хотите проверить поля формы, но беспокоитесь о том, что вам придется восстанавливать с нуля? Не волнуйтесь. Просто выберите существующий элемент формы, например текстовое поле, и примените Виджет проверки Spry от Вставить> Spry menu. Затем контролируйте требования проверки, такие как минимальные или максимальные символы, непосредственно из Инспектор недвижимости.

Бонус: еще 3

11. Доступ к связанным файлам легко

Когда вы откроете файл HTML или PHP, вы увидите строку зависимых имен файлов, таких как CSS, Javascript и даже включенные файлы для PHP, в верхней части окна документа. Вы можете легко переключаться на эти файлы, вносить изменения и сохранять их, даже не открывая их. Если щелкнуть любой файл на панели «Связанные файлы», вы увидите его источник в представлении «Код» и родительскую страницу в представлении «Дизайн». Или используйте Code Navigator для быстрого доступа к исходному коду CSS, который влияет на ваш текущий выбор.

12. Проверьте совместимость браузеров

Откройте документ, который вы хотите проверить на совместимость; в той же строке меню, где доступны виды Code / Split / Design, посмотрите справаПроверить страницукнопка.

Нажав на нее, вы раскроете выпадающее меню и выберитеПроверьте совместимость браузера». Окно результатов совместимости браузера в нижней части окна будут отображаться любые вопросы, которые вам нужно решить.

Примечание: это НЕ будет проверять новые версии IE на Mac! Чтобы выбрать браузеры для тестирования, выберите Проверить страницу > настройки из меню.

13. Предварительный просмотр страниц PHP

Dreamweaver позволяет запускать и просматривать коды PHP в программном обеспечении. Вот как это настроить.

Начиная

1. Сначала выберите сайт -> Новый сайт с верхней навигации.
2. Вы увидите как основной а также Расширенное определение сайта вкладки опций. Давайте продолжим, выбрав Вкладка "Расширенное определение сайта".
3. Введите имя папки для сайта в соответствующем поле (для этого примера мы будем использовать «myphp» в качестве имени папки).
4. Создайте еще одну папку с именем «images», введя ее имя в поле «Папка изображений по умолчанию»..
5. Под Местная информация, введите следующие значения в поля:
   • Название сайта: название сайта. Для использования только в Dreamweaver
   • Локальная корневая папка: Это название сайта, на котором вы будете работать. Обязательно называйте сайты таким образом, чтобы минимизировать конфликты или вводить в заблуждение имена.
   • Папка изображений по умолчанию: Это необязательно, но рекомендуется создавать его сейчас, так как большинство сайтов будут использовать изображения в некоторой степени. Именно здесь DW будет «искать» для вставки изображений в ваши документы на этапе кодирования..
   • Ссылки относительно: Определяет, как будут обрабатываться ссылки на документы в Dreamweaver. Вы можете выбрать либо Document, либо Root. Различия между ними следующие:
     • Относительный документ - вставит путь относительно файла, с которым вы работаете, и элемента, с которым связан.
     • Root Relative - использует /, что приводит к связыванию документа / файла с папкой ROOT..
     • Другой альтернативой является добавление некоторой конфигурации в файлы конфигурации сервера. Будучи более сложной задачей, мы пока просто будем использовать Document -lative.
   • HTTP-адрес: введите корневую папку сайта для вашего проекта
   • Чувствительные к регистру ссылки: Dreamweaver проверит, может ли какой-либо файл в проекте иметь проблему с учетом регистра при загрузке на сервер. Уведомления будут отображаться при использовании: Сайт -> Проверить ссылки в сторону. Вы можете оставить это проверенным, если хотите. Я лично не оставляю это проверенным, поскольку я всегда называю файлы строчными буквами. Заглавная буква не рекомендуется.
   • кэш: Установите флажок Включить кэш.
6. в Удаленная информация странице, либо настройте свой FTP или другой доступ к удаленному серверу, либо оставьте доступ к None.
7. в Тестовый сервер На странице выберите опцию, относящуюся к типу файла / системе, которую вы будете тестировать..
8. Контроль версий не будет использоваться для этого примера, поэтому вы можете оставить его пустым, если не знакомы с ним.
9. маскировка позволяет вам размещать файлы .psd, .fla и другие исходные файлы в папке ваших сайтов, и DW будет игнорировать их при загрузке / обновлении вашего сайта.
10. Примечания к дизайну идеально подходят для команды веб-дизайнеров, поскольку они сохраняют информацию об изменениях, внесенных в файлы. Это проверено по умолчанию и хорошо для нас, чтобы использовать этот способ.
11. Покидать Столбец просмотра файлов, Делать вклад, а также Шаблоны по умолчанию.
12. проворный страница просто указывает на папку ресурсов Spry, которая автоматически включается в Dreamweaver. Там нет необходимости менять это. Как только каждая настройка завершена, нажмите Хорошо.

Предварительный просмотр PHP в Dreamweaver

Теперь откройте файл PHP и внесите в него необходимые изменения. Для просмотра этого файла в Dreamweaver просто нажмите F12 и результаты будут отображаться в вашем браузере по умолчанию. Вы можете изменить, какой браузер используется в редактировать -> предпочтения -> Предварительный просмотр в браузере. Это позволяет сократить время редактирования и предварительного просмотра, избавляет от необходимости вводить длинные URL-адреса в панель браузера или использовать другое серверное программное обеспечение для рендеринга файлов PHP, что экономит время!

Это все. Happy Dreamweaver'ing :-)

Примечание редактора: Этот пост написан Джесси Мэтлок для Hongkiat.com. Последние 6 лет Джесси погружается в дизайн пользовательского интерфейса, разработку приложений и веб-тренды. Он является основателем и руководителем проекта небольшой, но очень талантливой команды разработчиков, которая занимается разработкой приложений под заказ..