Несколько движений, и перед глазами появляется палитра, в которой можем выбрать цвет для этого атрибута. Надо сказать, что очень многие вещи в других редакторах разбросанные по разным «визардам», в HK интегрированы под крышей одного лишь TagWizard, предназначенного для редактирования атрибутов тэгов. Из него вызывается и мастер вставки картинок, и мастер создания таблиц, и палитра, и многое другое.
Все процессы, которые в других редакторах приходится делать руками, в HK доведены до полной автоматизации. Например, есть некий блок текста, и нужно в конце каждой строки поставить
. Достаточно выделить текст, и из меню Text выбрать Add
to end-of-lines. Аналогичную штуку можно проделать с другими тэгами (<li>, <p>, <td> и так далее).
В наличии средство HTML-Tidy для чистки кода или его конвертирования в XML / XHTML. Результат обработки записывается не в текущий файл, а на страницу редактора под названием Output. Можно воспользоваться еще более радикальным «уборщиком» кода — плагином CodeCrusher.
В плане интеграции с другими приложениями HK даст фору всем другим HTML-редакторам. Конечно же, как многие из них, он «сотрудничает» с CSS-редактором TopStyle, ставшим уже стандартной утилитой в этой области. Например, у меня есть HTML-файл и связанный с ним файл стилей.
Когда мне требуется отредактировать последний, я просто выбираю в HK пункт меню TopStyle > Open Linked Stylesheets. Если я хочу с комфортом поработать над стилями, прописанными в HTML-документе, то просто ставлю курсор в начало кода, и из контекстного меню выбираю Edit style Tag Content — открывается TopStyle со стилем из HTML-документа. Редактирую, нажимаю Done, и измененный стиль помещается в документ. Да, еще по моим наблюдениям, вышеупомянутый пункт меню появляется, если TopStyle установлен после редактора HTML-Kit.
В продолжение разговора об интеграции. Думаю, вы согласитесь, что при работе над большими сайтами со средним количеством графики, уследить за всеми картинками становится довольно сложно — появляются новые версии кнопочек, баннеров, шапок, карт — и все это где-то лежит. Приходится смотреть с помощью какой-нибудь ACDSee (www.acdsystems.com) или бесплатной IrfanView (irfanview.tuwien.ac.at/english.htm) эти графические файлы, сравнивать их названия с теми, которые вы используете в проекте, потом тащить в файлы в графический редактор, если требуется в картинке что-то изменить…
Но у нас есть HK, правда? А раз уж так, то устанавливаем курсор на имя файла в вашей страничке и нажимаем правую кнопку мыши. В контекстном меню на сей раз присутствуют два дополнительных и вкусных блюда, а именно пункты Edit Linked Image File и View Linked Image. Первый откроет вам этот файл в графическом редакторе, например, «фотошопе» (редактор задается в Edit > Preferences > Programs > Image Editor). А второй пункт покажет вам картинку во встроенном в HK-браузере. Все, забудьте о внешней «смотрелке» хотя бы на время.
Раз уж мы коснулись темы просмотра, то как в HK обстоят дела с предпросмотром страниц в браузерах? У меня HK самостоятельно нашел Opera, Internet Explorer, Netscape и «официальный» браузер от W3C — Amaya (www.w3.org/Amaya/User/BinDist.html). Самостоятельно я без труда добавил к списку два браузера под MS-DOS — графический Arachne browser.arachne.cz/) и текстовый Lynx (www.fdisk.com/doslynx/lynxport.htm). Настоящий веб-дизайнер должен быть во всеоружии.
Редактор HK ассоциирует с каждым браузером комбинацию клавиш (Alt + X), поэтому с быстрым и удобным просмотром страниц в разных браузерах проблем быть не должно.
Помимо браузеров HK сотрудничает с интерпретаторами Java, Perl, PHP, Python, Ruby (Edit > Preferences > Programs > Actions). Еще HK предоставляет нам не только множество встроенных функций, но еще и мощную несущую конструкцию для плагинов. Плагины лежат здесь: www.chami.com/html-kit/plugins. Они бесплатные и небольшие. Их несколько десятков! Есть плагины для быстрого ввода тэгов — CSS, JavaScript / JScript, Java, скриптовый язык графики SVG (который поддерживается, кстати, браузером Amaya), VoiceXML для голосовой разметки документа и т. д.
Очень полезной штукой мне кажется утилита Slugs для подбора цветов — кроме уймы палитр вы можете «сграбить» цвет из любой точки экрана. Другие плагины реализуют поиск текста в файлах, создают гипертекстовые индексы файлов, форматируют текст — короче, реализуют все, что нужно веб-дизайнеру. C той же страницы полезно будет скачать спецификации HTML и CSS.
Плагины встраиваются в редактор столь прозрачно, что потом трудно отличить, где плагин, а где — часть программы. Любому плагину (или его подфункции), равно как и любому пункту меню, можно назначить свою комбинацию клавиш. Или, например, можно сделать так, чтобы по нажатию на определенные клавиши вставлялся некий текст.
В итоге — гипер-навороченный редактор, размер дистрибутива которого — всего 3 Мб, что для продукта такого класса довольно необычно. Прямую ссылку не даю — там скачивание основано на скриптах.
Графика
Перейдем теперь к графике. Для создания популярных нынче карт изображений (image-maps) обычно используется Adobe ImageReady. Но я хочу обратить ваше внимание на GeoHTML 2.1 Александра Самсонова — www.fegi.ru/geohtml/indexr.htm).
Это бесплатный редактор карт. В отличие от ImageReady, GeoHTML, специализируясь именно на картах, хранит данные о них отдельно от графических файлов. Редактор предлагает для построения карт использование иерархии слоев, в одном проекте может быть более одной карты. Рабочее поле оснащено пиксельной сеткой для точной подгонки областей.
Получить HTML-код можно либо со страницы HTML-Source, либо экспортировав код в файл. На входе редактор получает JPEG или GIF-файл. Прикручиваем его к HTML-Kit, и работаем! Дистрибутив весом 1,2 Мб можно скачать отсюда: www.winsite.com/info/pc/win95/miscutil/geohtm21.exe.
К сожалению, когда я связался с разработчиком (предложил ему ввести поддержку формата PNG), то узнал, что дальнейшего развития GeoHTML не будет.
Редакторы растровой графики. Любой пользователь назовет вам Photoshop и Paintshop. Немного подумав, добавит — Corel Photopaint. Но при этом понимая, что из этой тройки лидерство — за первым.
А впрочем, в параллельном мире «линукса» тоже есть мощнейший растровый редактор, под названием GIMP, что расшифровывается как GNU Image Manipulation Program, который портирован и под Windows. Версия для Windows (www.gimp.org/win32) выходит с некоторым отставанием от оригинальной (www.gimp.org), потому что портированием на другую систему занимается всего один энтузиаст, некто Тор Лилльквист (Tor Lillqvist) (зато проект насчитывает более 600 бета-тестеров).
Разумеется, GIMP бесплатен. Он сравнительно большой (12 Мб), но при среднем качестве связи скачать его реально. Интерфейс несколько непривычен для Windows (например, все меню оснащены линией отрыва сверху. Вы можете взять любое меню, «оторвать» его и поместить где-то на экране, чтобы обеспечить себе удобный доступ к нему).
Но не в косметических наворотах главное. Нас интересуют функциональные возможности. Пожалуй, единственное, где Photoshop дает фору GIMP — это цветоделение для полиграфии. Но в веб-дизайне все равно не используются цветовые пространства вроде CMYK. А для веб-графики GIMP — в самый раз.
В GIMP есть все, что имеется в «фотошопе», за исключением слоевых эффектов и хорошего цветоделения, а набор встроенных эффектов, пожалуй, больше. Вдобавок есть утилита Image Map для создания карт, которая по качеству сравнима с GeoHTML, хотя последний предоставляет больше возможностей. Зато Image Map проще, и дизайн у нее эргономичней.
Форматы файлов программа понимает почти все те же, что и Photoshop.
XCF — оригинальный формат GIMP — Photoshop не понимает. А вот штука, которую Photoshop никогда не делал! GIMP может конвертировать изображение в формат HTML-таблицы. Звучит безумно, тем не менее — работает, хотя файлы в результате получаются нереальных размеров.
Из-за некоторой мороки с лицензией в дистрибутив GIMP для Windows не входит плагин работы с GIF. Сам плагин (в нем и поддержка сжатых LZW «тифов») бесплатен и лежит по адресу www.iki.fi/tml/gimp/win32/lzw-plugins-20001226 Если строго следовать условиям лицензии, то вы можете использовать плагин, лишь имея лицензию Unisys на алгоритм сжатия LZW, либо если вы живете в стране, где Unisys не имеет патента на этот алгоритм (после установки этого плагина удалите из папки plug-ins файл tiff_nolzw, чтобы он не конфликтовал с новым загрузчиком TIFF).
О плагинах. Все-таки GIMP — это не линуксовый MPlayer, который кушает на завтрак «виндовые» кодеки и просит добавки. Поэтому ваши любимые плагины для «фотошопа» в GIMP не работают (кроме фильтров для Photoshop FilterFactory). У GIMP свои плагины, причем разных типов. Бинарные — то есть «экзешники». Понятное дело, что в этом случае плагины для Линукса не подходят для Windows-версии GIMP. И наоборот. Далее, штука под названием скрипт-фу.
Плагины, написанные на скрипт-фу, общие как для Линукс, так и для Windows. То же относится к паттернам, кисточкам, градиентам и прочим не основанным на компилированном коде вещам — все они свободно доступны с основного сайта GIMP for Linux — www.gimp.org.
Чтобы установить их, просто распаковывайте в соответствующие папки — например, скрипты в папку scripts. Прямая ссылка на дистрибутив GIMP for Windows: ftp.gimp.org/pub/gimp/win32/gimp-setup-20001226.zip.
Установите апдейт (замените gimp.exe) — www.gimp.org/win32/updates-20001226-20001229.zip.
А также апдейты для плагинов Flame и Gimpressionist — www.gimp.org/win32/updates-rand-func-plug-ins.zip.
Галереи
Как создавать галереи картинок? Довольно просто делается это с помощью ACDSee, но поскольку наш обзор посвящен бесплатному софту, то обратимся за помощью к уже упомянутой ранее программе IrfanView от боснийца по имени Ирфан Скилиан (Irfan Skiljan).
Это одна из тех программ, которые можно обозвать «кухонным комбайном» — там есть все — от функций сканирования, эффектов и фильтрации изображения до именно того, что нужно нам — создание thumbnails, уменьшенных копий картинок, для которых автоматически генерируется HTML-файл.
В него IrfanView помещает таблицу с thumbnails, и каждый из них ссылается на полноразмерный файл-оригинал. Делается это примерно так — запускаете IrfanView, нажимаете кнопку T (чтобы перейти в режим thumbnails), затем выделяете нужные вам картинки, и выбираете File > Save Selected Thumbs as HTML-file.
Появится окно опций, где вы отмечаете галочкой Write Relative Path Names (чтобы локальные пути к файлам не были включены в ссылки), а в поле Destination Folder указываете папку, куда будут помещены созданные thumbnails и HTML-файл. Если нужно, чтобы оригинальные изображения были скопированы в ту же директорию, то помечайте опцию Copy Original Images to Destination Folder. Все, нажимайте на OK. Дело сделано.
А теперь вам может потребоваться превратить thumbnails в симпатично выглядящие кнопки. Загружайте каждую сгенерированную картинку в главное окно программы (двойным щелчком из окна Thumbnails) и выбирайте Image > Effects > 3D Button. Потом нажимайте на кнопку сохранения картинки. Регулировка ширины рамки производится в Image > Effects > Setup (или просто нажмите Ctrl-E), и смотрите секцию 3D Button.
Но именно для веб-дизайна IrfanView — незаменимый графический помощник! Прямая ссылка на дистрибутив весом в 800 кб — irfanview.tuwien.ac.at/iview361.exe.
А отсюда — irfanview.tuwien.ac.at/languages.html — вы можете скачать файлы для локализации интерфейса, включая русский (irfanview.tuwien.ac.at/lang/russian.zip).
А вот еще одно чудо для графики — Image Magick (www.imagemagick.org). И снова Linux, и снова портированная для Windows версия продукта. Прямая ссылка: ftp.nluug.nl/pub/ImageMagick/binaries/
ImageMagick-win2k.zip, вес — около 3 Мб. Это набор консольных утилит, без графического интерфейса.
Теперь вам необязательно пользоваться редактором ImageReady, например, для того чтобы сделать анимацию из, скажем, четырех кадров. С помощью Image Magick в папке, где лежат подготовленные заранее файлы, можно просто набрать команду: convert -delay 20 *.* animation.gif. И все! Создается анимация animation.gif, где каждый кадр имеет задержку 20 сотых секунды. Ну как, быстро? А какого формата должны быть файлы с кадрами, спросите вы? А я отвечу — ЛЮБОГО, который вам знаком.
Собственно говоря, основной утилитой в пакете является Convert. Правда, в «линуксе» ее функциональность гораздо шире, но и под Windows хорошо работает. Как легко догадаться по названию, Convert конвертирует файлы из одного формата в другой. Чтобы пользоваться утилитой со всеми удобствами и запускать ее откуда угодно, пропишите путь к ImageMagick в переменной path в файле autoexec.bat.
Программка Convert умеет не только конвертировать изображения, но и применять к ним фильтры, работать с палитрами, изменять масштаб, обрезать границы, вращать, осуществлять цветокоррекцию и многое другое. Процесс можно поставить на поток, используя утилиту Conjure, которая является интерпретатором основанного на XML скриптового языка Magick Scripting Language (MSL).
Найди свой оптимум
Как вы уже, наверное, догадались, я описал те инструменты, с которыми работаю сам. После очень долгих поисков я нашел действительно оптимальный софт для веб-дизайна.
Этот набор не является некой последней инстанцией, это мой личный набор инструментов, работает он быстро, слаженно, вдобавок занимает мало места на жестком диске. Попробуйте, может быть, и вам понравится. Я утверждаю, что это эффективно.