10 плюсов и 10 минусов программы Adobe Dreamweaver
В бесплатном базовом курсе по Dreamweaver CS 5.5, который я на днях записал, было упоминание статьи про 10 достоинств и 10 недостатков этой среды разработки.
Наконец-то, перевод этой статьи готов и вы можете ознакомиться с ним в этой заметке.
===============================
10 плюсов и 10 минусов программы Adobe Dreamweaver
Дримвейвер — это программа для создания веб-сайтов. Изучение этой программы может оказаться довольно сложной задачей, особенно если вы — новичок в веб-дизайне и не знаете языка html.
При первом запуске программы вы увидите окно приветствия, которое выглядит довольно устрашающе. Кажется, что там целая тысяча различных инструментов, которые невозможно изучить. Но в этой статье мы остановимся лишь на нескольких функциях программы, которые полезны как профессионалам веб-дизайна, так и новичкам. Цель этой статьи состоит в том, чтобы обобщить факты и прийти к выводу, является ли Дримвейвер просто редактором кода или это жизненно необходимый инструмент для создания сайтов.
Дривмейвер. Для чего нужна эта программа?
Дримвейвер является одним из флагманов в области программ компании Adobe. В какой-то степени он объединяет и другие программы от Adobe. Например, сначала дизайнеры создают дизайн будущего сайта в программе Photoshop или Fireworks, затем разрезают картинку, подготавливая ее к верстке, и далее формируют непосредственно html-код шаблона, где как в Дримвейвере. То же самое касается и флэш-роликов, которые после разработки в Adobe Flash попадают в Дримвейвер для внедрения в сайт.
Основная функциональность программы сосредоточена на создании HTML и CSS кода, а также работе с файлами сайта. Визуальный интерфейс программы позволяет работать с этими вещами быстро и интуитивно понятно. Вы можете наглядно видеть результат вашего кода, однако отображаемый в программе результат не всегда соответствует действительности. А если же внимательно и точно писать код, то сторонники написания кода в блокноте могут сказать, что по сути код можно качественно писать и в любой другой программе, зачем для этого использовать Дримвейвер? Нужно ли в таком случае все многообразие его инструментов? Нужен ли по такой огромной цене (около 800 долларов за версию CS5) просто редактор кода и файловый менеджер?
Давайте попробуем разобраться и выделим десять плюсов и десять минусов этой программы.
10 плюсов программы Adobe Dreamweaver.
1. Подсветка кода.
Эта функция поможет вам быстро просканировать ваш код, а также найти возможные ошибки. Каждый тип кода имеет различную подсветку, что позволит вам наглядно отличать HTML, CSS, PHP, Javascript и др.
Это очень удобно, когда ваша веб-страница представляет собой сочетание html и динамических языков, таких как например PHP или ASP.
Для начинающих веб-разработчиков подстветка кода помогает лучше понять каждый элемент кода, а также помогает выявить возможные ошибки. Например, ниже мы видим, что в написании атрибута пропущены кавычки, и в результате, благодаря подсветке (код подсвечен светло-голубым цветом), мы отслеживаем код чуть выше и сразу видим, где была допущена ошибка.
2. Автоподстановка кода.
Еще одна полезная функция, которая позволяет экономить время — это автоматическое дописывание кода. Когда вы начинаете писать какие-нибудь html-теги, перед вами открывается список возможных вариантов на основе введенных первых букв. Вам остается лишь выбрать подходящий вариант. Причем это удобно не только для написания самих тегов, но и для их атрибутов.
Возьмем, например, добавление изображения. Как правило, вы должны знать такие вещи, как расположение изображения и его размеры. С помощью Дримвейвера вы можете просто написать <img , а далее, как только вы нажмете пробел и напишете букву S, то вам мгновенно выведут атрибут src=»», далее просто дважды нажмите Еnter и перед вами откроется окно проводника, чтобы вы могли выбрать подходящее изображение, а далее Дримвейвер автоматически пропишет его путь, а также подставит атрибуты ширины и высоты этой картинки.
Еще один пример этой функции: допустим, вы пишете CSS-код, и вам нужно прописать свойство семейства шрифтов “font-family:Arial, Helvetica, sans-serif;”, т.е. нам в данном случае нужно ввести 41 символ. Или же:
1. пишем fon и один раз нажимаем стрелку Вниз на клавиатуре;
2. нажимаем Enter, чтобы выбрать опцию «font-family«;
3. выбираем из списка «Arial, Helvetica, sans-serif«;
4. добавляем точку с запятой, и все готово!
Набор 41 символа или выполнение 4 простых шагов… Я знаю, что из этого вы выберете! )
Если вы только изучаете HTML, то такая помощь оказывается действительно необходимой, т.к. предоставляет вам полный контроль над кодом, но в то же время дает возможность не ошибиться в написании каких-то деталей.
А для более опытных функция автоподстановки позволяет писать код гораздо быстрее.
3. Режим кода и режим дизайна
Всегда здорово видеть, что получается в результате написания того или иного кода, поэтому функция визуального отображения очень полезна. В Дримвейвере есть возможность быстрого переключения режима кода и режима дизайна.
Например, когда мы размещаем блоки div, создавая каркас сайта, нам удобнее работать в режиме кода, а когда нужно добавить на страницы какой-то контент, то в этом случае больше подойдет режим дизайна.
Противники работы в Дримвейвере здесь могут возразить, что реальную работу кода можно увидеть только при просмотре в браузере. Однако все-таки удобно при каких-то основных изменениях кода увидеть сразу этот результат. Зачем запускать браузер, если можно просто кликнуть на вкладку визуального отображения и увидеть изменения?
4. Проверка кода.
В Дримвейвере есть отличный инструмент проверки кода, который не позволит ни одному веб-дизайнеру писать код, не соответствующий стандартам.
Ошибки и проблемы совместимости могут быть быстро найдены именно во время написания кода, а не после того, как файлы с кодом уже загружены на сервер и проверены онлайн-валидатором.
5. Панель свойств и панель вставки изображений.
Панель свойств — это лучший инструмент для быстрого создания ссылок, выделения шрифта полужирным или курсивом, создания нумерованных и ненумерованных списков и т.п. Суть в том, что вы концентрируетесь на содержании при разработке веб-сайта, а не на его коде. Например, просто выделите какой-нибудь текст и напишите ссылку, по которой посетитель вашего сайта должен будет перейти по клику.
Или еще пример: если вам кажется, что эти три абзаца будут лучше смотреться в виде списка, выделите их и нажмите соответствующую иконку на панели свойств и… через мгновение вы увидите результат!
6. Глобальная функция «Найти/Заменить».
Это может спасти часы драгоценного времени. Вы можете находить и заменять код не только на одной странице, но и полностью на сайте. Но на этом чудеса не заканчиваются: вы можете осуществлять поиск только по тексту на странице, только по исходному коду и даже только по специальным тегам.
Например, компания, которой вы делаете сайт, поменяла в своем названии литеры LTD на PLC. Без Дримвейвера вам бы пришлось перебирать сотни или тысячи страниц вашего сайта, а с Дримвейвером вы сможете все заменить за пару секунд.
Или еще вариант: например, вам нужно обновить версию jQuery на статичном сайте. Нажимаем Ctrl+F, чтобы вызвать окно поиска/замены, в поле «Найти» вводим «jquery.1.XXXXXXX» а в поле «Заменить» — «jquery.XXXXX«, выбираем опции «Искать на сайте» и «Искать в исходном коде» и кликаем кнопку «Заменить все». Через две секунды все страницы вашего сайта обновлены и готовы к загрузке на сервер вместе с последней версией JQuery.
Но прежде чем запускать функцию «Найти/Заменить«, пожалуйста, будьте очень аккуратны и внимательны, дважды все проверив, потому что отменить результат применения этой функции нельзя. И наконец, если вдруг вы захотите использовать это для замены названий файлов, прочитайте следующий плюс программы Дримвейвер.
7. Файловый менеджер.
Система работы с файлами — это, наверное, одна из главных особенностей, которая превращает Дримвейвер в нечто большее, что просто редактор кода.
Прежде всего определите расположение вашего сайта (Site > New Site > Имя сайта > Затем выберите папку в которой находится ваш локальный сайт) и дальше позвольте Дримвейверу позаботиться о всех файлах вашего сайта.
Если вы измените имя какого-либо файла, то Дримвейвер предложит вам обновить ссылки. Например, если вы изменили имя файла «about-web-courses-bangkok.html» на просто «about.html» Дримвейвер обновит все ссылки, которые должны быть связаны с этим файлом.
Это также относится и к файлам контента, например при изменении имени картинки с «dc2234.jpg» на «product-name-2345.jpg» все ссылки, ведущие к этому изображению будут немедленно обновлены.
Также файловый менеджер может соединиться по фтп с вашим удаленным сервером и при сохранении изменений в каком-либо файле этот файл будет автоматически загружаться на сервер. Еще вы можете включить отображение всех удаленных файлов и работать непосредственно с файлами на удаленном сервере.
8. Шаблоны.
Возможно, вы захотите создавать все больше и больше сайтов. И следующий шаг к созданию CMS — это использование шаблонов. Вы создаете одну страницу, дизайн которой будет использоваться для всего сайта, и превращаете ее шаблон, выбирая те области, которые будут редактируемыми и те области которые будут одними и теми же на всем сайте.
Таким образом, через функцию «Save as» можно создать из шаблона новую страницу. Когда вы будете обновлять какие-то элементы в шаблоне, они будут обновляться на всех страницах.
Следовательно, у вас получится подобие динамического сайта, когда обновляя одну страницу, вы обновляете все остальные. И в то же время в данном случае вам нет необходимости знать язык php.
9. Вкладки и связанные файлы.
Вкладки были представлены начиная с версии CS3 Дримвейвера и значительно упростили работу с текущими файлами. Это очень удобно, когда вам приходится ставить ссылки с одной страницы на другую, а также перемещать контент из одного места в другое.
Еще одной действительно полезной вещью является появление значка * на вкладке тех файлов, изменения в которых вы уже сделали, но еще их не сохранили. Таким образом, вы можете сразу понять, почему те изменения, которые вы уже сделали в редакторе не отображаются в браузере — вы просто забыли их сохранить.
Начиная с версии CS4 появилась возможность видеть все подключенные к странице файлы, такие как файлы таблиц стилей или яваскрипт-файлы. Они отображаются чуть ниже вкладок файлов. Это позволяет быстро переключиться например на css-файл, подключенный к редактируемой странице. Также в режиме split (одновременное отображение режима кода и режима визуального отображения) очень удобно видеть изменения на странице при редактировании css-стилей.
10. Новые интересные возможности, появившиеся в версии CS5.
— Больше нет головной боли из-за различного отображения сайта в разных браузерах.
Когда вы занимаетесь разработкой сайта, то вы должны проверять его отображение во всех браузерах. Возможно, вам не удастся добиться абсолютной идентичности отображения, но в любом случае вы должны проверить, что все блоки и элементы стоят на своих местах.
BrowserLab когда-то был отдельным сервисом, разработанным Adobe, который позволял проверить сайт во всех браузерах, а теперь этот сервис внедрен в CS5, чтобы вы смогли проверить, все ли в порядке с дизайном до запуска сайта.
«Предпросмотр динамических страниц и локального контента с различными видами отображения, возможностию диагностики и инструментами для сравнения» — Adobe о сервисе BrowserLab.
— Поддержка «большой тройки» CMS.
Единственный способ эффективно управлять большими сайтами — это, конечно, использование CMS. Просто-напросто непрактично делать каждую страницу в Дримвейвере, затем загружать ее на сервер с остальным контентом (изображения и т.п.). Как раз в этом случае на помощь приходят CMS.
До появления версии Дримвейвера CS5 мы должны были создать весь код отдельно для нашего шаблона, загрузить его и затем проверить онлайн непосредственно на движке, как сделанные изменения работают.
Теперь же Дримвейвер может продемонстрировать результат в режиме Live View, вместе с данными, загруженными из базы данных движка.
Кроме того, как мы уже упоминали, Дримвейвер имеет возможность автоподстановки кода для этих популярных движков.
Вот еще некоторые новые возможности CS5:
- Возможность экспериментирования с HTML5;
- Возможность подсветки собственных php-классов и функций, что позволяет писать код более аккуратно;
- Интеграция со службой Business Catalyst, которая является сервисом для размещения чего угодно: от великолепных веб-сайтов и до мощных онлайн-магазинов.
10 минусов программы Adobe Dreamweaver.
1. Запутанный интерфейс.
В самом верху программы мы видим 15 опций: это и пункты меню и иконки быстрого изменения интерфейса программы. Чуть ниже находятся еще от 5 до 50 опций (в зависимости от количества открытых файлов), а далее мы видим еще 15 элементов. Таким образом, перед нами одновременно находятся более 35 элементов, с помощью которых мы можем выполнять те или иные функции программы. Не каждый может удержать в голове значение всех этих элементов.
2. Непродуманная система обучения.
Если вы предпочтете изучать работу в программе Дримвейвер самостоятельно, то это будет очень непросто. Несмотря на то, что большинство функций программы сгруппированы логично и последовательно, все же некоторые элементы могут поставить в ступор даже профессионала.
Инструменты программы предназначены для реализации разнообразных задач при построении сайта. Например, вы захотите добавить данные соединения с базой данных вашего сайта, который вы разрабатываете на локальном сервере. Но если вы новичок, то это будет для вас практически невыполнимая задача.
Нужно признаться, что интерфейс Дримвейвера может быть удобен лишь немногим профессионалам, создающим мощные сайты и постоянно использующим все функции программы. А для рядовых дизайнеров все эти иконки интерфейса просто никогда не понадобятся. Например, в стандартном интерфейсе есть панели для работы с базами данных и с сервером, но практически никто их не использует (тем более, что со скриптами, выполняющимися через сервер, Дримвейвер работает ужасно).
Как и при работе с любым многофункциональным и мощным инструментом, желательно, чтобы кто-то показал или научил вас, как с ним работать. Как вариант, можно купить книги по этой теме. Но проблема в том, что автор книги обзорно освещает все инструменты программы, не подозревая о том, какие конкретно из инструментов нужны именно вам.
Пошаговые уроки уже более целенаправлены, например «Как создать сайт-портфолио» или «Куда ввести название сайта«, но все же лучший вариант — это обучение у веб-дизайнера, который использует Дримвейвер в своей повседневной работе. Такие люди точно знают, какие инструменты программы могут пригодиться, и как использовать их наиболее эффективно. Таким образом вы будете концентрироваться именно на конкретной задаче, а не на абстрактных функциях того или иного инструмента.
3. Погрешности визуального редактора.
Как мы уже говорили выше, нельзя доверять отображению сайта в визуальном редакторе Дримвейвера, т.к. это все-таки не браузер. От версии к версии разработчики программы стараются сделать отображение кода в режиме дизайна более точным, но все же пока оно далеко от реальности.
В частности проблемы наблюдаются с отображением элементов с абсолютным позиционированием, где это отображение может отличаться от заданного на 20 пикселей и даже больше. А говорить о качественном отображении результатов работы php-кода и javascript-кода вообще не приходится.
Поэтому вам всегда нужно проверять отображение и работу сайта именно в браузере, а лучше в нескольких.
4. Громоздкий динамический код.
Дримвейвер имеет возможность создания динамических сайтов, если вы работаете с локальным или удаленным сервером. Единственная проблема в том, что код, который создает дримвейвер (точно так же, как и встроенные снипетты, о которых мы поговорим в следующем пункте), перегружен и усложнен.
Гораздо лучше писать код вручную или использовать готовые фреймворки такие как CakePHP, CodeIgnitor или Zend.
5. Плохо написаннные сниппеты.
Заготовки участков кода в Дримвейвере были не самыми лучшими, еще когда Дримвейвер принадлежал компании Macromedia, но даже и сейчас в версии CS5 они не стали лучше.
Причина в том, что эти заготовки кода неоправданно большие. Например, чтобы вставить проверку всего одного поля формы, Дримвейвер предложил нам вставить целых 19 строк javascript-кода.
6. Неопределенность в написании css-стилей (до версии CS4).
С этой проблемой приходится сталкиваться снова и снова. Используя панель свойств, можно оформлять участки кода при помощи сss-стилей, однако новички слишком увлекаются этим, и в итоге получаются сотни строк кода с неопределенными стилями типа style1, style2 и т.д. Причем все стили автоматически прописываются Дримвейвером между тегами веб-страницы.
Позволяя Дримвейверу прописывать стили за вас, вы теряете контроль над кодом и, что еще хуже, вполне могут появится конфликты стилей. Самое лучшее решение — это держаться подальше от стилей, которые предлагает Дримвейвер и полностью взять эту функцию на себя, прописывая те свойства, которые нужны именно вам, в которых вы не запутаетесь. И, что важно, стили должны быть в отдельном файле стилей, а не в том же файле, что и html-код.
К счастью Adobe убрали эту функцию в последних версиях программы.
7. Неполный контроль над кодом.
Использование визуального редактора — это самый простой путь потерять контроль над кодом. Когда люди используют только режим дизайна, то их код перегружается тегами, которые автоматически прописываются где только можно. Особенно много встречается пустых строк, оформленных таким образом:
<p><strong><strong>Текст</strong></strong></p>
<p><strong>.</strong></p>
<p> </p>
Еще одним распространенным примером является вставка изображений. Если вы редактируете какой-то текст, и вам нужно вставить изображение, то вставляйте его, не нажимая перед этим клавишу Enter. В противном случае тег будет заключен в теги абзаца, что является абсолютно лишним.
Поэтому не забывайте всегда контролировать код, прописанный визуальным редактором, и, в случае необходимости, корректируйте его.
8. Действительно полезными являются только 10% функционала.
Вы только взгляните на интерфейс программы, как уже упоминалось, вы увидите больше 35 различных кнопочек, меню, иконок, большая часть из которых никогда вам не пригодится. Такое чувство, что Дримвейвер буквально напичкан лишней информацией.
Все веб-дизайнеры лишь хотят иметь удобный инструмент для написания кода, а кнопочки для каждого случая жизни им не нужны. Понятно, что некоторые панели можно просто отключить, но это лишние телодвижения.
Почему бы не начать, наоборот, с простого интерфейса, дав возможность профессионалам самостоятельно включать необходимые им панели и пиктограммы?
9. Дримвейвер развивает в веб-дизайнере лень.
Если вы не будете осторожным, то Дримвейвер сделает вас ленивым. Хотя бы взглянуть на многие школы, в которых обучают только работе с режимом «Дизайн» при разработке так называемых «профессиональных» сайтов. Это заставляет ужаснуться. Являясь инструментом для разработки кода, в данном случае Дримвейвер не выполняет эту функцию.
Нужно акцентировать внимание именно на кодировании, чтобы все остальные инструменты способствовали и помогали этому. Не полагайтесь на автоматические функции дримвейвера.
Разработка html-кода — это основа основ при разработке сайта, поэтому не стоит для его формирования необоснованно использовать иконки или пункты меню.
10. Очень дорого.
Конечно понятно, сколько работы вложено в разработку Дримвейвера, но в любом случае его цена в $654,72 — это очень дорого.
Кроме того, при разработке сайта, вам, скорее всего, понадобится Фотошоп — а это еще 1456,14 долларов. Итого получается, что вам понадобится 2110,86 долларов, чтобы приступить к работе.
К счастью, существуют бесплатные альтернативы. Для фотошопа — это программа Gimp, а для дримвейвера такой альтернативой является Aptana.
Вывод. Так что же такое Дримвейвер? Неужели это просто редактор кода с завышенной ценой? Или все-таки что-то большее?
Безусловно, Дримвейвер — очень мощный инструмент, но в то же время эта мощность является его «Ахилессовой пятой». Несмотря на то, что он насыщен функционалом, большая часть этих функций никогда не будет восстребована. Т.е. вы переплачиваете огромную цену за те функции, которыми не будете пользоваться.
Но в последнее время специалисты Adobe стараются добавлять именно те функции, которые будут полезны. Например, сниппеты для работы с CMS.
Для начинающих Дримвейвер удивительно удобен, но лишь в случае, если вы уже неплохо знаете html и css-код, а не слепо доверяете инструментам программы, которые прописывают часть кода автоматически.
Конечно, эту программу можно рекомендовать и начинающим пользователям и профессиональным веб-разработчикам. Но все же хотелось бы иметь и более упрощенную версию этого редактора, как, например, Elements является упрощенной версией Фотошопа.
Конечно, это не просто редактор кода с завышенной ценой. Это, действительно, мощный инструмент, с которым должен познакомиться каждый веб-дизайнер.
Надеемся, что в следующих версиях программы появятся новые полезные функции, которыми мы будем с радостью пользоваться.
Автор: Carl Heaton
Переводчик: Сергей Патин
Бесплатный курс по Dreamweaver CS 5.5 от Евгения Попова
evgeniypopov.com
Обзор Macromedia Dreamweaver 8 — WYSIWYG HTML редактора
Macromedia Dreamweaver 8 (в переводе – ткач мечты) – HTML-редактор, разработанный компанией Macromedia. Богатый инструментарий, удобный интерфейс, открытость приложения для всевозможных настроек и другие особенности делают Dreamweawer одним из самых популярных HTML-редакторов в мире.
Возможности Macromedia Dreamweaver 8 значительно шире, чем возможности обычных редакторов для создания веб-страниц. Однако вместе с этим программа благодаря легко настраиваемому и простому пользовательскому интерфейсу подходит как для профессионалов, так и начинающих создателей веб-проектов любой сложности.
Основной упор в данном продукте сделан на визуализацию разработки веб-страницы. Работа проходит в режиме WYSIWYG (What You See Is What You Get – что видишь, то и получаешь), то есть Dreamweaver объединяет в себе средство для визуального расположения элементов, управления их свойствами на уровне языка HTML и средства поддержки Dynamic HTML.
Macromedia Dreamweaver обеспечивает:
- генерацию свободного от ошибок HTML-кода;
- динамическое отображение создаваемой страницы в выбранном браузере;
- сохранение расположения для ранее созданных документов и документов, созданных другими средствами;
- средства наглядного дизайна таблиц и фреймов;
- генерацию Dynamic HTML для различных браузеров;
- расширяемую коллекцию скриптовых программ JavaScript;
- поддержку анимации, схожую с инструментами Macromedia Director.
Кроме этого:
- Macromedia Dreamweaver 8 – это и разработчик дизайна, и редактор кода в одном инструменте;
- Dreamweaver 8 позволяет с легкостью использовать новые технологии дизайна и кодирования;
- с помощью Dreamweaver 8 и Flash Video поместить видео на сайт не составит никакого труда;
- мощная CSS-панель предоставляет возможность произвести изменения, не набирая код вручную;
- Dreamweaver взаимодействует с XML.
Macromedia Dreamweaver позволяет создавать страницы на основе фреймов. Страница делится на фреймы с помощью команды Modify – Frameset, после чего можно задать цвет фона каждого фрейма или выполнить какие-либо другие действия. Расположив фреймы, можно заняться дизайном каждого фрейма в качестве отдельной страницы или продолжить работать с ними в виде фреймов. При этом при необходимости можно переключиться в редактор HTML-кода и вносить изменения вручную.
Чтобы вставить какие-либо элементы, нужно использовать меню Insert и различные диалоговые панели, появляющиеся при выборе отдельных команд. Помимо традиционных меню есть множество отдельных инструментальных панелей: для вставки отдельных элементов, для установки атрибутов, для управления фреймами и т. п.
Спецификация каскадных таблиц стилей в программе появилась довольно давно. Однако этот механизм стал по-настоящему актуальным только с внедрением в современные браузеры поддержки технологии Dynamic HTML. Пакет Macromedia Dreamweaver обеспечивает удобную работу с каскадными таблицами стилей. В панели определения стилей есть возможность создать собственные стили или импортировать существующие.Поддержка JavaScript
Macromedia Dreamweaver 8 обладает расширенными возможностями написания скриптовых программ и их связи с отдельными элементами создаваемого документа. Рассмотрим пример. Мы помещаем в документ форму, а в нее – обычную кнопку. В панели Behaviors мы можем сразу же получить список событий, поддерживаемых данным элементом, и даже выбрать ряд предопределенных скриптовых программ, например вывести сообщение в диалоговой панели или в статусной строке.
Выбор события в панели Behaviors
Macromedia Dreamweaver 8 поддерживает создание скриптовых программ для различных браузеров, что означает возможность выбора платформы из списка представленных браузеров.Анимация
Механизм поддержки анимации в данном продукте называется Timeline (в переводе – линия времени). Его суть заключается в том, что после выбора объекта (например, графического изображения, помещенного в «слой» [layer]) задается сценарий его поведения. Для этого используется временная шкала (timeline), разделенная на кадры. К каждому кадру можно присоединить какое-либо событие.Новые возможности
Прежде всего, Macromedia Dreamweaver 8 дает возможность визуальной работы с данными XML. Кроме того, программа обладает улучшенной технологией WebDAV (для закачки файлов), возможностью фоновой загрузки файлов во время работы с документом, новыми шаблонами сайтов, а также включает новые инструменты для облегчения работы (и помощи) в создании страниц в режиме дизайна или кода.
Об этих инструментах – более подробно.
Модифицированная панель CSS
- Модифицированная панель CSS
Новая (модифицированная) панель CSS содержит сгруппированные в одном месте инструменты для изучения, работы и применения стилей CSS к страницам в режиме визуального редактирования. С новым интерфейсом легче просматривать каскадные таблицы, примененные к отдельным элементам.
- Усовершенствованное представление CSS
Усовершенствованное представление CSS позволяет просматривать результат применения CSS в разных браузерах с учетом их особенностей. Dreamweaver полностью поддерживает продвинутую технику CSS, например псевдоэлементы, элементы формы и т. д.
- Опция Zoom
Опция Zoom служит для более точного контроля над дизайном и позволяет приближать или удалять страницу создаваемого документа. Границы манипуляции – от 6 до 6400%.
- Специальная вставка
С новой опцией вставки в Dreamweaver 8 появилась возможность сохранить все форматирование, созданное в Microsoft Word, или просто вставить текст.
- Визуализация слоев CSS (в режиме дизайна границ, фона слоев CSS)
Применение визуальной помощи в работе со слоями поможет разобраться при работе со сложными структурами документов.
- Улучшенная синхронизация и сравнение файлов
Эта функция позволит быстро сравнить файлы для определения, что было изменено в них в процессе работы. Есть возможность сравнить два локальных файла, файл на локальном и удаленном сайтах и два файла на удаленном компьютере.
- Обновлена помощь от O’REILLY
Добавлены новые материалы по XML, XSLT и XPath, обновлены материалы по ASP.
- Панель Style Rendering
С помощью этой панели при создании документа можно посмотреть, как пользователь будет видеть страницу с поддержкой стилевых таблиц CSS и без нее, а также в разных представлениях (экран монитора, напечатано принтером, экран мобильного телефона, экран телевизора и т. п.).
- Поддержка новых технологий
Поддержка ColdFusion MX 7, PHP 5, Flash Video.
- Сворачивание кода
Сворачивание кода
Есть возможность свернуть часть кода, что сильно упрощает работу и делает код более простым для восприятия.
Отступы
В Dreamweaver 8 есть кнопка, не менее опасная в плане замусоривания страницы, чем инструменты свойств текста. Эта кнопка – увеличение отступа. Использовать такой способ управления отступом не рекомендуется, поскольку Dreamweaver применяет не предназначенные для этого теги. Если вам необходимо создать несколько абзацев с большим отступом от левого края, пользуйтесь для этого классами CSS.
Таблицы
В Dreamweaver 8 добавлена возможность от руки рисовать таблицы и их ячейки (режим Layout View). Если вы не хотите добавить на страницу мусор в виде неоправданно сложных таблиц, никогда не пользуйтесь этим режимом. Чудес не бывает, и HTML не изменился с выходом новой версии редактора – таблицы по-прежнему описываются строками и ячейками, причем столбцы в одной таблице всегда имеют одинаковую ширину. Те невообразимые таблицы с частично перекрывающимися столбцами разной ширины, которые вы нарисуете в художественном азарте, будут описаны на вашей странице кодом невообразимого размера, очень сложным для чтения и анализа. К тому же сомнительно, что браузеры Netscape отобразят подобную страницу верно.
Стили в Dreamweaver
Для того чтобы сделать в Dreamweaver 8 красивую страницу с чистым кодом, нужно использовать стилевые правила CSS. Хотя инструменты для работы с таблицами стилей в Dreamweaver и не безупречны, однако их вполне достаточно для повседневной работы. Встроенный редактор таблиц стилей позволяет создавать классы CSS (Make Custom Style Class) или назначать стилевое оформление отдельным элементам HTML (Redefine HTML Tag). Обычно классы используются, когда надо придать единообразный вид нескольким элементам на странице (например, задать одно и то же выравнивание всем абзацам). Если же вы хотите всего лишь изменить параметры конкретного элемента (например, сделать фон одной из ячеек таблицы красным), допустимо назначение стиля непосредственно элементу c id, соответствующему этой ячейке.
Итоги
Macromedia Dreamweaver 8 – это без сомнения один из самых удобных редакторов HTML, предназначенный для тех, кто ценит комфорт и удобство в движениях. Поэтому для тех, кто еще не имеет подобной программы, Macromedia Dreamweaver 8 будет отличным выбором.
www.ixbt.com
Описание установки Dreamweaver
Установка Dreamweaver |
|
Российский дистрибутив Macromedia Dreamweaver 9.0 СS3 можно скачать здесь: http://depositfiles.com (если ссылка нерабочая, то придется искать самостоятельно, по мере нахождения официальных лицензионных и свободно распространяемых копий этого продукта ссылки будут добавлятся).
Основные возможности:
Для технологий, подобных Ajax с использованием CSS, автоопределением CSS-ошибок в браузерах, Dreamweaver CS3 несет в себе все необходимое.
Spry Framework для Ajax сконструирован таким образом, чтобы работать с ним могут и дизайнеры и разработчики. Возможность использования HTML и CSS удобна дизайнерам, но Spry обладает и большими возможностями для web-разработчика.
Решена проблема несовместимости браузеров с различными инструкциями CSS. Adobe Dreamweaver CS3 автоматически находит код, который может вызвать неверный рендеринг в распространенных браузерах, подскажет причину и решение потенциальной проблемы. Также, имеется возможность получить решение CSS-проблем при помощи нового ресурса Adobe – CSS Advisor: сообщества разработчиков и дизайнеров. Валидатор кода проверяет код по XHTML- и CSS-стандартам. Dreamweaver CS3 – это первый инструмент, позволяющий автоматизировать нахождение и решение множества наиболее популярных CSS-ошибок, что позволяет вести кросс-браузерную разработку.
Интеграция с Adobe Photoshop. Используя Dreamweaver CS3 и Photoshop CS3 вы можете непосредственно копировать и вставлять изображения в Dreamweaver. Просто выберите тип компрессии и файл, а также место вставки в документ. Dreamweaver CS3 запомнит источник файла, поэтому при необходимости вы с легкостью сможете отредактировать необходимый файл. И все это делается очень быстро! Так же вы можете импортировать в Dreamweaver CS3 непосредственно Photoshop CS3-документ. Dreamweaver CS3 теперь понимает PSD-файлы.
Шаблоны. Преимущества использования CSS все очевидней и многим необходимы примеры использования. Adobe Dreamweaver CS3 предлагает на выбор воспользоваться шаблонами одно-, двух- или трехколоночными шаблонами, которые могут быть как фиксированной, так и «эластичной» ширины. СИСТЕМНЫЕ ТРЕБОВАНИЯ: Microsoft Windows XP with SP 2 or Windows Vista™ Home Premium, Business, Ultimate, or Enterprise ( for 32-bit ).
270
3 40
info-pages.com.ua
Как создать шаблон Adobe Dreamweaver.
Шаблоны Dreamweaver решают проблему, с которой сталкиваются многие компании – как поддерживать сайт и оставлять стандартные разделы стандартными. Обычным решением является использование SSI (Серверные вставки), но не все веб-сервера поддерживают эту технологию. Есть другие способы, посредством которых можно включить один html-файл в другой, но все они используют или программы на стороне сервера, или java-скрипты на на стороне пользователя.
Шаблоны Dreamweaver позволяют создавать шаблон страницы, который постоянно находится в одной области вашего сайта, и в последующем создавать другие страницы, основываясь на этом шаблоне. Потом, при внесении изменений в шаблон, изменятся также страницы, использующие шаблон.
1. Начинаем с макета
Самый простой способ создания шаблона на Dreamweaver – начать с макета, на основе которого вы хотите создать шаблон. Я использую усовершенствованную версию бесплатного шаблона: слева – навигация, вверху – шапка, а также фото и цвета.
Так как существует возможность создания шаблона Dreamweaver с нуля, многие считают, что легче сначала сделать дизайн, а потом решить, что в нем будет изменяться, а что будет частью шаблона.
2. «Сохранить как шаблон…» – в меню Файл
В меню Файл есть опция «Сохранить как шаблон…». Выберите её, чтобы сохранить созданный дизайн как шаблон Dreamweaver.
Примечание. Шаблоны Dreamweaver создаются как часть сайта Dreamweaver. Если у вас не определён ни один сайт, вам нужно создать сайт в Dreamweaver перед созданием шаблона.
3. Сделайте описание шаблона
Выберите сайт, на котором вы хотите использовать шаблон. Я буду его использовать на сайте «Dreamweaver Examples». Название вашего сайта будет отличаться.
Опишите шаблон. Описание может быть настолько коротким или длинным, насколько вам это необходимо. Однако не скупитесь на детали, они могут быть важными в будущем.
4. Создание папки для хранения шаблонов
У моего сайта уже есть папка для шаблонов. Но если её не было, Dreamweaver автоматически создаст такую.
Все шаблоны Dreamweaver хранятся в папке «templates» на вашем сайте, и имеют расширение *.dwt (сокращенно от Dreamweaver Template).
5. Начинаем добавлять редактируемые области
- Выберите часть текста, которую хотите сделать изменяемой.
- Перейдите в пункт меню Вставка — Объекты шаблона.
- Выберите «Редактируемая область».
Есть и другие объекты шаблона, но они выходят за рамки данного урока.
6. Задайте имя Редактируемой области
Вы можете оставить имя, которое Dreamweaver задал по умолчанию, но я рекомендую задать описывающее имя, что позже напомнит вам, какая именно информация должна содержаться в этой области.
7. Редактируемые области в блочных элементах
Если вы попробуете разместить редактируемые области внутри блочных элементов (таких как заголовок, параграф), Dreamweaver выдаст предупреждение. Если вы оставите область внутри блочного элемента, ваши авторы контента не смогут внедрить туда какие-либо другие HTML-элементы.
Я использую это, когда хочу убедиться, что заголовок останется заголовком, или необходимо конкретное количество параграфов или других элементов в шаблоне.
Если вы решили оставить возможность добавлять другие блочные элементы внутри данного элемента, тогда вам нужно перенести границы редактируемой области за теги элемента. Вы можете это сделать в режиме отображения HTML-кода, или заново указав область, предварительно её удалив.
8. Оцените готовый шаблон
В готовом шаблоне редактируемые области выделяются рамками, над которыми будет имя области.
9. Создаем страницу на основе шаблона
Как только вы сохраните шаблон, можете его использовать на сайте:В меню Файл выберите «Создать»;
- Перейдите ко вкладке «Страница из шаблона»;
- Выберите созданный шаблон;
- Удостоверьтесь, что выбран пункт «Обновлять страницу при изменении шаблона»;
- Нажмите «Создать».
Теперь вы можете вносить изменения, но только в редактируемые области. Dreamweaver не позволит вам изменять другие части шаблона.
10. Измените шаблон – обновите файлы
Если позже вам необходимо внести какие-то изменения в шаблон, отредактируйте файл dwt в папке «Templates». Как только вы сохраните изменения в шаблоне, Dreamweaver спросит не хотите ли вы обновить страницы, созданные на основе шаблона. Он также укажет, какие это файлы.
Как только вы кликните «Обновить», все файлы, созданные на основе этого шаблона, будут обновлены. Вам только остается сохранить их и загрузить на веб-сервер.
Алексей Повловский
web-profy.com