Суббота, 18.05.2024, 10:28
| RSS

Почитай-ка

Главная

Главная » Статьи » InterneT » Web и Wap программирование

Делаем сайт быстро и легко! (HTML - kit)

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

Обычно в комплект входят FrontPage или Dreamweaver (для тех, кто пользуется визуальным средствами верстки страниц), HomeSite (для тех, кто работает непосредственно с кодом), графику наш гипотетический типовой дизайнер делает с помощью сонмища каких-то утилиток, поставленных с гипотетического CD со вкусной обложкой "Все для Web-дизайна", а потом все же со скрипом переходит на Photoshop.

Флэш-графика - это тема отдельного разговора,ее вообще мы трогать не будем, но в закромах начинающего дизайнера обнаруживаем Macromedia Flash и Corel Rave, между которыми дизайнер не может сделать выбор. Все это добро оккупирует массу дискового пространства, и говорит - хочу еще, под кэш! А не дадим. А установим такой набор софта, который будет удобен и прозрачен в работе, то есть позволит вам сосредоточиться НА САЙТЕ, А НЕ НА СОФТЕ.

Лучший редактор кода - HTML-Kit

Во-первых, нам требуются редакторы кода. Две штуки: один - простой, для быстрого редактирования, второй - более мощная среда разработки, которая будет нашим "центром" разработки сайта. Кажется, что для первой цели нам подойдет именно Блокнот. Вот и нет. Качаем с www.astonshell.com/rus/files/bred2r.zip его замену - маленький, компактный редактор BRED.

Он поддерживает кодировки DOS-866, KOI8-R и, конечно же, стандартную Windows CP-1251. Надо сказать, я даже удалил notepad.exe и скопировал на его место BRED, переименовав его в notepad.exe (чтобы разные программы, которым надо отобразить текстовый файл, делали это с помощью BRED, а не Блокнота).

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

Поскольку нормальную программу я так и не нашел (хотя перепробовал пять штук), то пришлось добавить функцию "массовой" перекодировки в редактор собственного производства - TEA (www.roxton.kiev.ua/myfreesoft/teasetup.exe, 1 Мб), а именно в Утилиты > Файловый менеджер > Перекодировка. Кстати, в TEA есть множество "мастеров", облегчающих работу веб-дизайнера, но есть редакторы, в которых все это сделано круче.

Представляю вам "фриварный" редактор HTML-Kit (HK) от ChamiSoft (www.chami.com/html-kit/). Уже на первый взгляд его можно без колебаний сравнить с HomePage. При более близком знакомстве с HK я, два года работавший исключительно в HomePage, увы и ах, удалил последний с винта. Потому что HK - монстр, навороченнее которого может быть только его собственная новая версия.

Чем же он меня обаял? Я не буду подробно говорить о подсветке синтаксиса, тесной интеграции с Сетью - вы можете редактировать файлы, расположенные на сервере, а еще имеется модная нынче панель с папками, которые ссылаются на локальные либо лежащие где-то на FTP-сервере директории. На практике это выглядит так - вы подключаетесь к серверу и прямо на нем редактируете страницы или производите некие операции с файлами.

Я не буду даже касаться описания всевозможных "мастеров" и "визардов", которые так упрощают макетирование страницы. Почти все это вы найдете и в других "колоссах" HTML-редакторов - HomeSite, HotDog и так далее. Речь пойдет о другом.

К примеру, я начал набирать тэг:
Несколько движений, и перед глазами появляется палитра, в которой можем выбрать цвет для этого атрибута. Надо сказать, что очень многие вещи в других редакторах разбросанные по разным "визардам", в 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 Мб, что для продукта такого класса довольно необычно. Прямую ссылку не даю - там скачивание основано на скриптах.

Категория: Web и Wap программирование | Добавил: Blacksmith (28.02.2008)
Просмотров: 603 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории каталога

Про интернет [4]
Общая информация
Web и Wap программирование [5]
Web/Wap мастерам

Статистика

Сайт управляется системой uCoz