Для начала стоит отметить, что Expression Web это один из компонентов, который можно купить у Microsoft отдельно, или в пакете Microsoft Expression Studio, в который еще входит ряд других программ. В список этих программ входит Microsoft Expression Blend – WYSIWYG-инструмент для проектирования пользовательского интерфейса приложений, создаваемых на основе . Microsoft Expression Media — Специальное приложение для создания каталогов медиа-файлов. Microsoft Expression Design — профессиональный инструмент для графического дизайна и подготовки иллюстраций, который позволяет создавать впечатляющие элементы пользовательского интерфейса для настольных и web-приложений. Стоимость всей студии составляет 699$, стоимость Expression Web 2 – 299$. Нюанс состоит в том, что ряд программных продуктов, которые состоят в студии нельзя купить отдельно, вот почему такая небольшая разница в ценах.

Microsoft Expression Web 2 относиться к группе WYSIWYG редакторов, который имеет ряд полезных функций которые мне понравились. В первую очередь нужно отметить, что по скорости загрузки продукт от Microsoft явно обгоняет Adobe, но это скорее связано с не очень богатым функционалом первого. Кроме скорости загрузки мне еще понравилось пару полезных функций. Первое это возможность просмотра верстки в браузере с заданным размером экрана. По умолчанию можно просматривать в окнах размером 1024х768, 800х600, 640х480. Другой функцией которая мне понравилась, это то что название классов, идентификаторов является ссылкой на объявление этого класса в внешнем файле. Таким образом, можно переходить к редактированию свойств класса простым кликом по его названию.

На этом, список полезных функций, которые я увидел в этом программном продукте заканчивается.

переезд офиса по низким ценам

Не так давно стало известно что Microsoft готовит новый продукт в составе которого будет инструмент под названием Expression Web SuperPreview. Это программа для мультибраузерного просмотра верстки. Правда сейчас выпущена только бета версия, в которой можно просматривать верстку только в Internet Explorer 6 и 7 версии и которую уже можно скачать. В финальном релизе Expression Web 3, можно будет просматривать верстку во всех популярных браузерах.

Программа Expression Web SuperPreview на меня справила неоднозначное впечатление. При первом просмотре мне понравился интерфейс и наличие некоторых полезных функций. В программе есть функция выделения структурных элементов похожая на фаербаговску, правда намного беднее и без просмотра дерева вложенности кода. В программе встроена система добавления направляющих аналогична фотошопу и возможность выделять структурные элементы. Другая полезная функция – наличие линейки по вертикали и горизонтали. Также радует то, что в программе реализована возможность одновременного просмотра верстки в нескольких окнах браузеров, которые можно разместить или столбиками, или строчками.

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

Лично для меня программа показалась не более чем красивой игрушкой, которая не может заменить функционал IETester или Multiplie IE.

Решить юридические вопросы организациям помогут квалифицированные адвокаты.«Асгардъ» — профессиональные услуги адвоката в Москве.

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

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

Закладки страниц

Над рабочей областью программы находиться панель с закладками (табами) страниц. Между страницами можно переключаться кликая по выбранной закладке, или используя функциональное сочетание клавиш Ctrl+ Tab. Довольно удобно. При правом клике по закладке есть пункт Compare with remote. Это пункт можно использовать для подключения сторонней программы, которая позволит сравнивать на предмет изменения два файла. Можно подключать любую программу для сравнения вроде Ultra Compare, Araxis Merge, Totato DiffMerge. Недостаток в том, что, так как программы сторонние настройки для FTP в них нужно прописывать отдельно.

Менеджер проектов.

Открывается через Site -> Manage Site. Под каждый отдельный проект (сайт) создается своя запись. В этой записи идут настройки FTP, расположения проекта на локальном компьютере и прочих фич. Таким образом, можно потом выбрать нужный проект и работать непосредственно с его файлами на удаленном сервере. Все относительные пути будут сохраняться относительно корневой директории проекта. Также можно потом выполнять проверку битых ссылок (если сайт статичный). И валидацию всех html страниц.

Встроенный FTP клиент

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

Collapse

Эта полезная функция сворачивает ненужные в данный момент участки кода. Например, есть блок, в котором много содержимого, поставив курсор на выбранный тег и нажав Ctrl+J(или на иконку) весь блок с содержимым свернется в небольшой блок. При клике по этому блоку можно развернуть его обратно. Также можно сворачивать не только выделенные теги, но и выделенные области текста, кликнув по ним правой кнопкой мышки и выбрав Selection -> Collapse Selection.

Format Source Code

Функция форматирования исходного кода. Для выполнения нужно кликнуть по иконке и выбрать Apply Source Formating. При ее использовании код выстраивается лесенкой, вложенные теги идут с новой строки и с отступом в несколько пробелов. Количество пробелов, которое вставляется в новом уровне вложенности можно настраивать, кликнув по иконке и выбрав Code Format Options.

Wrap Tag

Небольшая функция, позволяющая обволакивать текст. Используется если есть какой-то контент который необходимо поместить в определенный тег или несколько тегов. Вместо того чтоб дописывать открывающиеся и закрывающиеся теги вокруг контента, контент выделяться и после клика по иконке Wrap Tag вписываются нужные теги, а Dreamweaver уже сам вставляет закрывающие теги. При вписывании тегов работает автодописыване тегов и атрибутов.

Apply comment

Функция похожая на Wrap Tag с той разницей, что выделенный текст окружается комментариями, причем можно выбирать каким именно комментарием (html, css). Ниже расположена иконка, которая позволяет одним кликом убирать поставленный комментарий.

Расширенный поиск и замена

Функционал поиска в программе расширен. Кроме стандартного поиска нужного фрагмента в текст, есть поиск по всему проекту. То есть поиск фрагмент кода во всех файлах на локальном компьютере, которые привязаны к активному проекту. Также есть поиск с точным совпадением по всей фразе, регистрозависимый поиск, поиск с игнорированием пробелов. Если искать некий фрагмент по всему проекту результаты выводятся в блоке Results с указанием файла, в котором найдено и номер строки. По этому результату можно кликнуть, чтоб попасть курсором на него.

Дерево вложенности

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

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

Подробней о других инструментах которые позволяют ускорить и улучшить верстку можно прочитать в заметке Джентльменский набор верстальщика нужен сайт Киев

1.Adobe Dreamweaver

Для меня это лучший инструмент для написания, правки, заливки кода. Из недостатков я вижу только ресурсоемкость, которая может быть заметна на слабеньких тазиках и угрызения совести по поводу использование пиратского софта. Из пюсов огромный вагон полезных и удобных фич о которых можно прочитать в заметке За что я уважаю Dreamweaver.

2.Adobe Photoshop

Полезный инструмент для «нарезки графики» и выполнения корректировок. Многие отказываются от него в пользу Gimp из-за бесплатности последнего и отсутствия необходимости держать такого монстра для выполнения мелких работ. С моей точки зрения в фотошопе встроен отличный инструмент для разбивки макета для верстки. Эта «фича» позволяет минимизировать время на нарезку графики. В заметке «Как разрезать графику для верстки» рассказывается о том, как готовить графику для верстки этой программой

3.Web Developer Toolbar

Незаменимый плагин для FireFox. Имеет такие полезные инструменты как линейка для измерения расстояний, изменения окна браузера под нужные разрешения, отключения стилей, картинок иконкой или горячими кнопками, просмотр заголовков в виде отельной иерархической структуры. Подсветка таблиц, блочных элементов. Также этот плагин показывает валидность CSS и режим отображения браузера.
addons.mozilla.org/ru/firefox/addon/60

4.FireBug

Плагин для FireFox. Я не представляю, как без него может работать верстальщик. Это плагин который позволяет просматривать структуру документа, DOM, отлаживать скрипты. Имеет полезную функция подсветки отдельных, выбранных, структурных элементов. К тому же к этому плагину есть ряд полезных надстроек для просмотра кукисов, подсветки синтаксиса скриптов, плагин для пхп, плагин показывающий время загрузки и прочие.
addons.mozilla.org/ru/firefox/addon/1843

5. FireBug Light

Тот же FireBug с некоторыми ограничениями. Он выполненный в виде подключаемого джава скрипта что позволяет его использовать в других браузерах.
getfirebug.com/lite.html

6. IETester / Multiple IE

Программы для совместного использования ИЕ6 и ИЕ7 на одном компьютере. Первая реализована в виде отдельного приложения в котором вкладками можно открывать ИЕ5,6,7. Вторая устанавливает отдельно каждую версию браузера. Недостаток первой в наличии мерцания при переключении вкладок и небольшая тормознутость. Недостаток второго в том что пока не работает под MS Vista. Мне больше нравится первая программа.
my-debugbar.com/wiki/IETester/HomePage
tredosoft.com/Multiple_IE

7.HTML Validator

Плагин для FireFox. Выполняет проверку валидности страницы при загрузки. Результат отображает значком в строке состояния. Если страница валидная отображается зеленый значок в виде галочки, в случае не прохождения валидации отображается красный значек в виде креста. При клике на значек можно просмотреть ошибки валидации. В настройках можна выбрать среди трех алгоритмов валидации HTML Tidy, SGML Parser, Serial. SGML Parser это самый жесткий алгоритм, он же используется на w3c, его я и рекомендую использовать.
addons.mozilla.org/ru/firefox/addon/249

8. Color Zilla

Плангин для фаерфокса. Выполнен как обычный инструмент «Пипетка» в графических редакторах. Позволяет вытянуть в буфер код цвета с окна браузера.
addons.mozilla.org/ru/firefox/addon/271

9. Сервисы для сжатия CSS

Эти сервисы позволяют сжать уже готовый CSS. Некоторые из них имеют богатый функционал, некоторые имеют попроще. Они убирают лишние пробелы, табуляцию, лишние символы такие как ненужный px после 0. Мне больше всего нравиться www.cleancss.com. Он предельно прост и имеет большое количество настраиваемых параметров.

10. OptiPNG,PNGOut

Небольшие программы которые позволяют ужимать пнг картки. Сжатие не всегда большое но все же некая оптимизация есть. В статье «Оптимизация PNG c помощью OptiPNG, PNGOut» рассказывается об этих программах и как их использовать .
optipng.sourceforge.net

11. Pixel Perfect

Плагин для FireBug позволяющий оценить насколько точно относительно макета вы сверстали сайт. Плагин накладывает на сайт слой в котором находится картинка сайта, можно изменять ее прозрачность, таким образом что видно сверстанный сайт под нею и можно сравнить насколько верстка соответствует макету.
https://addons.mozilla.org/ru/firefox/addon/7943

NoSquint

Плагин, который отображает в статус баре зум страницы
No Squint

Этап разбивки графики на отдельные графические элементы сходен с вырезанием ножницами рисунков для коллажа. Поэтому первое, что нужно сделать перед тем, чтоб вырезать графический элемент с макета, это убрать все лишнее с него. Все отдельные элементы: плашки, текст, структурные элементы в Photoshop рисуются в отдельных слоях, по этому, если нам нужно, например, вырезать рисунок который находиться под текстом, нам нужно сначала отключить отображения слоя, в котором находиться текст. Для этого нужно кликнуть на значке «глаз» в блоке слоев (блок слоев открывается нажатием кнопки F4, или через “Window – Layers” главного меню программы). На иллюстрации красным квадратом обведена кнопка «Глаз».

После того как на макете остались только необходимые элементы можно переходить к выделению областей которые будут сохранены в отдельные файлы. Для того чтоб выделить область необходимо воспользоваться инструментом Slice tool. Данный инструмент выделяет область в синюю рамку, которая имеет коричневый цвет и восемь маркеров (которые используются для изменения размеров выбранной области) при ее активности. Инструмент Slice tool находиться в группе с вторым инструментом – Slice Select Tool, который можно выбрать кликнув правок кнопкой мышки по инструменту Slice tool, или кликнув на черный треугольник в нижнем правом углу иконки инструмента. Slice Select Tool используется для выбора вырезанных областей и редактирования их параметров.

При двойном клике инструментом Slice Select Tool по вырезанной области появляется диалоговое окно «Slice Options». Это диалоговое окно используется для изменения параметров выбранной области. Главным для нас параметром является поле Name. В нем задается имя, которое будет присвоено файлу, в который будет сохранен выбранный фрагмент макета. Также в нем можно изменять ширину (W) и высоту (H) выбранной области.

Теперь, когда на макете дизайна размечены с использованием инструмента Slice tool все области, которые необходимо сохранить в отдельный файл, можно приступать их сохранению. Для этого нужно открыть диалоговое окно Save for Web & Devices, выбрав пункт «Save for Web & Devices…», в разделе File главного меню или воспользоваться комбинацией клавиш Alt+Shift+Ctrl+S.

Большую часть этого окна занимает блок предпросмотра макета. В верхней левой части содержит панель которая состоит из таких инструментов: «рука» для перемежения по масштабированном макету, «лупа» для масштабирования рисунка(масштаб рисунка также можно изменять выбрав необходимое знчения масштаба в выпадающем списке в левой нижней части диалогового окна), Slice Select Tool для выбора фрагмента для разрезки, пипетка для выбора цветов и кнопка отключения сетки нарезки.

В левой верхней части диалогового окна Save for Web & Devices… находиться панель с закладками. Она используется для изменения режимов отображения рисунка. Можно отображать оригинал(original), оптимизированный рисунок (optimized), оригинал и оптимизированный рисунок (2-up) и оригинал и три варианта оптимизированного рисунка.

Снизу от каждого вида рисунка, находиться блок, в котором написано формат, в котором оптимизируется рисунок и размер файла, в котором будет сохранен фрагмент. Также, там написано приблизительное время загрузки файла при определенной скорости подключения к сети интернет. Расчетную скорость подключения можно изменить, выбрав необходимое значения из выпадающего списка, которое открывается при нажатии на иконку двойной стрелочки, которая находиться в верхней правой части диалогового окна.

Теперь перейдем к рассмотрению главной области, которая используется для оптимизации графики перед сохранением. В правой части диалогового окна Save for Web & Devices находиться блок с настройками оптимизации графики. Данные настройки оптимизации применяются к выделенному фрагменту, который выбирается в окне предпросмотра. Главным параметром является формат, в котором сохраняется рисунок. Формат выбирается в выпадающем списке которые имеет такие варианты: JPEG, GIF, PNG-8, PNG-24, WBMP(подробней о форматах графики и их различиях можно прочитать в заметке «Краткое описание графических форматов«). У каждого выбранного формата есть свои уникальные настройки. При выборе формата JPEG ключевой настройкой является Quality которая указывает на процент сжатия рисунка (чем сильнее сжатие тем меньше размер файла рисунка и ниже его качество). При выборе формата GIF это параметр Colors который указывает на количество цветов рисунка, Dither который указывает на рассевание цветов и Lossy который указывает на потерю качества. При выборе формата PNG-8 настройки аналогичны настройкам формата GIF. Различия между форматом PNG-8 и PNG-24 состоит в том, что первый не поддерживает альфа-канал (полупрозрачность).

После того как для каждого фрагмента установлены параметры оптимизации можно сохранять фрагменты в файл. Для этого необходимо нажать на кнопку Save в этом(Save for Web & Devices) диалоговом окне. После нажатия откроется диалоговое окно в котором необходимо выбрать папку в которую будут сохранены рисунки. Стоит отметить, что рисунки будут сохранены в папку images в выбранной папке, а имена рисунков будут соответствовать именам фрагментов, о которых говорилось ранее.

Подробней о других инструментах ускоряющих работу верстальщика можно прочитать в заметке «Джентльменский набор верстальщика«, а том как оптимизировать файлы формата PNG можно прочитать в заметке «Оптимизация PNG c помощью OptiPNG«

Кратко перечислим осовные достоинства формата PNG:

• Альфа-канал (8-битный канал прозрачности), который позволяет создавать полупрозрачные элементы;
• Отсутствует ограничение на количество цветов (у GIF их 256);
• Более высокая степень сжатия, чем в GIF;

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

Оптимизация графики используя PNGOut

Мне PNGOut нравится больше всего. Эта программа, в отличии от OptiPNG имете понятный интерфейс и простая в использовании. PNGOut есть в двух видах – как отдельная программа и как плагин для фотошопа. Мне больше подходит вариант в виде отдельной программы, так как плагин для фотошопа работает путем пересохранения отдельной картинки через Save as, а имея около 10 картинок это большая потеря времени. PNGOut в виде отдельной программы позволяет загружать список файлов и оптимизировать их, что для меня очень удобно. Также PNGOut имеет лучше показатели в сжатии чем OptiPNG

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

Оптимизация графики используя OptiPNG

Утилита OptiPNG как раз и предназначена для оптимизации PNG. Ниже я привожу подробную инструкцию которая описывает как по использованию OptiPNG

Скачать дистрибутив программы можно с официального сайта разработчика optipng.sourceforge.net (выбрать Windows executable или другой если вы работаете под Линуксом).

Как установить:

1. Скачайте дистрибутив OptiPNG.
2. Скопируйте optipng.exe из скачанного архива в папку c:\windows
3. Теперь OptiPNG доступен с командной строки в любой папке.

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

1. Откройте директорию с файлами PNG, которые планируете оптимизировать, в файловом менеджере с поддержкой командной строки (FAR, Total Commander). При отсутствие менеджера можно воспользоваться командной строкой доса;
2. Напишите в командной строке (после чёрточки буква o, а не ноль) optipng -o7 *.png для оптимизации всех файлов с расширением .png в этой папке; если требуется оптимизировать только какой-то определённый файл, то напишите его имя вместо *.png, например optipng -o7 picture.png
3. Нажмите Enter, через некоторое время указанные файлы будут заменены оптимизированными

Порой можно добиться уменьшения размера изображения на 10-15% и это без потери качества. Хочу заметить что, несмотря на плюсы PNG, его не всегда целесообразно использовать. О том, чем отличаются графические форматы, можно прочитать в заметке «Краткое описание графических форматов«.

Подробней о других полезных инструментах веб-разработки можно прочить в заметке «Джентльменский набор верстальщика«