Устанавливаем Dreamweaver, и зачем он нужен

Друзья, многие ругают Дримвивер за его «тяжеловесность» — он долго открывается. Для мелких правок, действительно, лучше использовать более «легкие» редакторы. Некоторые программисты вообще презрительно на него смотрят — почему-то воображают, что вот ОНИ-то пишут код руками, а на дримвивере якобы все само делается ))) — это, конечно, не так.

Однако, Дримвивер невероятно облегчает жизнь именно фронт-ендерам, которым приходится писать огромное количество однообразного кода, с годами набивающим оскомину. Дримвивер позволяет сократить время написания HTML почти в полтора раза, а CSS — так вообще раз в пять. Всё потому, что он дописывает код за вас.

Самое удобное свойство — вам не нужно писать закрывающие теги полностью. Стоит напечатать «</» (начало закрывающего тега), как программа ищет последний открытый и закрывает его сама. Будь то </div> или более длинный </table>. После такой лафы переезд обратно на notepad++ ужасно раздражает )).

В CSS вообще все очень здорово. Notepad тоже может дописывать свойства и стили сам, но он не умеет их контекстно фильтровать! То есть в Дримвивере вы увидите в выпадающем контекстном меню только те стили, которые доступны для данного свойства. Ну например для position вам после двоеточия будут доступны только absolute, relative, static и fixed. Таким образом, вы никогда не спутаете стиль, не поставите border: 0 вместо border: none.

То же касается ява-скриптов. Программа всегда высветит ошибку или незакрытую функцию, подсветив проблемную строку. Вы сэкономите тонну времени на поиске багов.

Установка и работа будут здесь показаны на примере Dreamweaver CS3, так как он значительно легче последней версии. Для начала вам его хватит. Вот когда вам понадобится также писать SCSS и SASS (прграммно генерируемые листы стилей), вот тогда лучше будет поставить последний, потому что он — та-дам! — поддерживает даже такой вид работ. Как это делать, написано здесь: SASS — для чайников — настройка программной среды.

Итак, после запуска программы вы увидите примерно такой интерфейс:

Вы можете выбрать, какой файл создать или открыть, я выделила HTML. Если нажмете на эту кнопку, откроется HTML-файл, в которому будут УЖЕ прописаны все необходимые теги в хедере. Единственное, вместо

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

нужно поставить новую разметку HTML5:

<!DOCTYPE html>

Дальше. Наверху вы увидите выбор, как отображать файл — как код, как дизайн или совмещенный режим.

Потыкайте туда-сюда, чтобы сообразить. Конечно, писать мы будем в режиме кода. Но режим дизайна невероятно полезен для такого вида работ:

Например, вам нужно сделать таблицу БЫСТРО — для сайта или для контент-менеджмента. Так вот вы просто копируете таблицу из Ворда или с другого сайта и вставляете ее копипастой в дизайнерском режиме Дримвивера. ВСЁ!

Перейдите в текстовый режим, и вы увидите, что весь код построен за вас! Часто его нужно вычищать, особенно после Ворда — убирать лишнюю разметку, хотя последний Дримвивер копирует уже чисто. Убрать ширины, высоты или стили шрифтов можно просто через поиск. Выделите ненужную строку, нажмите Ctrl+F, вставьте искомую строку в верхнее окошко, нижнее (где Replace — заменить) оставьте пустым (меняем строку на пустоту) и жмите Replace All.

Таким образом можно вычистить или заменить один код на другой во всем документе автоматически. Дримвивер также позволяет осуществлять поиск по ВСЕМ документам проекта. Это тоже невероятно полезно, если нужно найти проблемные места во всех файлах (и в хтмл, и в джс, и в цсс). Для этого наверху (в селекте) нужно выбрать не Current Document (текущий документ), а другую опцию на выбор (Все открытые, Папка, Текущий проект и т.п.)

Отсюда мы плавно переходим к понятию проект в Дримвивере.

Проект — это сайт, который обычно состоит из html-файлов, папки css с листами стилей, папки js с ява-скриптами, папки img с картинками, и других папок, которые вам нужны. То есть ваш проект — это то, что вы потом можете целиком загрузить на сервер и запустить, чтобы ваш сайт стал доступен из сети интернет.

В дримвивере есть возможность привязать такие проекты к именам, чтобы потом быстро переключаться между ними. Нажмите на пункт меню Site > New Site:

В другой версии программы окно будет выглядеть по-другому, но суть остается той же. Фактически вам нужно указать ИМЯ проекта, выбрать папку на своем компьютере, где будет корень сайта, и выбрать папку с картинками внутри этого корня.

Больше можно ничего не трогать и сразу жать OK.

Remote Info позволяет настроить ftp связь с вашим сайтом на сервере, и потом сэкономить время на загрузке исправленных файлов на удаленный сервер, но лучше все-таки для этих целей пользоваться FTP-менеджером типа FileZilla, хотя — это дело вкуса.

Вот как выглядит мой проект — в правой области — все ваши папки и файлы в виде дерева, все доступно и сворачиваемо.