Текстовый редактор“Чемоданчик” сайтостроителя содержит такой минимальный набор инструментов:
Текстовый редакторНаписать гипертекстовую страницу можно в любом текстовом редакторе. Подойдёт и Блокнот Windows. Только не надо включать в нём опцию Перенос по словам в меню Формат. Если опцию включить, на экране будут демонстрироваться короткие строки, а в файл — записываться длинные. Это нарушит форматирование кода (структурную лесенку).
Однако Блокнот — не лучший вариант в качестве редактора гипертекстового кода.
Автор рекомендует использовать бесплатное приложение PSPad. Этот маленький редактор предоставляет богатый инструментарий и удобную возможность работать с древовидными проектами, имитирующими структуру сайта. В списке выбора языка интерфейса есть и русский.
PSPad позволяет:
У PSPad есть и другие интересные возможности. Загрузить этот бесплатный редактор можно со странички www.pspad.com/ru
Гипертекстовые коды можно записывать и с помощью других текстовых ASCII-редакторов (редакторов plain-текста) — тех, к которым вы привыкли. Но не надо использовать для этого текстовые процессоры, подобные Word.
БраузерыУ сайтостроителя под рукой всегда должен быть набор популярных браузеров. Ведь пользователь Сети может “заехать” на страничку на любом “транспорте”! И нужно заранее знать, что он увидит.
Список самых популярных браузеров (на момент написания книги) представлен ниже.
Анализатор грамматики русского языкаРазработчик должен заботиться не только о правильности кода, но и о грамматической правильности текстов на своих страницах.
Даже в том (увы, редком) случае, когда ваши знания русского языка великолепны, необходимо проверять тексты автоматическими анализаторами для выявления всевозможных описок.
Для такой проверки хорошо подойдёт текстовый процессор Word. Страницу можно скопировать из окна браузера в Word через буфер обмена Windows по следующему алгоритму:
Платному офисному набору от Microsoft (в который входит Word) есть бесплатная альтернатива: продукт OpenOffice.org.
В его состав входят следующие компоненты:
По своим возможностям OpenOffice.org сопоставим с MS Office.
Можно загружать документы MS-Office (Word, Excel, Powerpoint), редактировать их и сохранять как в оригинальном формате, так и в формате OpenOffice.org. Основное ограничение состоит в том, что OpenOffice.org не исполняет макросы в этих документах. Но они сохраняются и их можно использовать при работе с MS Office.
Описание продукта можно найти по адресу ru.openoffice.org/about-product.html
Русскую сборку продукта можно загрузить (около 90 Мбайт) со страницы ru.openoffice.org/about-downloads.html
Анализатор кодаПервым шагом проверки кода, написанного для браузера, является, конечно, запуск этого кода в самом браузере. И лучше не в одном, а в нескольких, ибо браузеры работают по-разному.
Но, браузеры относятся к ошибкам HTML-синтаксиса своеобразно. Вместо того чтобы прямо сказать разработчику о допущенной погрешности, они пытаются молчаливо обойти ошибку, принимая меры для правильной (с их точки зрения) интерпретации неверной конструкции.
Для исправления ошибок кодирования непременно нужно использовать специальные программы — анализаторы кода, или, как их ещё называют — валидаторы.
Примером такого анализатора кода является продукт CSE HTML Validator Lite (с англоязычным интерфейсом). Бесплатную версию этой программы можно загрузить со странички www.htmlvalidator.com/lite
Этот продукт можно использовать не только в качестве валидатора, но и в качестве редактора кода.
Внизу, в подокне программы, появляется список ошибок. Щёлкаем на ошибке, она отмечается в тексте. Исправляем ошибку, записываем исправленный файл и снова:
Tools/Validate (или F6)
Например, ошибка описана так:
The “RL” element is not a recognized element. Did you misspell it? (Элемент “RL” не опознан. Вы допустили описку?)
Щёлкаем на этой строке и видим в тексте кода строку:
<RL type=disc>
Ошибка очевидна. Исправляем на
<UL type=disc>
Записываем файл (Ctrl+S) и снова нажимаем F6. Ошибок больше нет.
Валидатор CSE HTML Validator Lite не зря называется Lite. Он показывает не все ошибки. Некоторые он “зажимает” от пользователя сообщая:
“The lite edition missed n errors that the standard or professional edition would have found”.
Он говорит, что платная профессиональная версия покажет еще n ошибок.
Если такое происходит, воспользуйтесь on-line бесплатным валидатором с сайта организации W3C (организация, которая разрабатывает стандарты Web):
Валидатор работает в одном из трёх режимов:
В режиме Validate by File Upload можно указать имя htm-файла на вашем компьютере и проверить его.
В контексном меню (щелчок правой кнопкой на отображаемой странице) браузера Opera есть пункт “Соблюдены ли Web-стандарты”. Если щелкнуть на этом пункте, браузер автоматически отправит текущий файл на проверку в http://validator.w3.org, и покажет страницу с результатами. Это самый удобный способ запуска валидадатора от W3C.
СправочникиДля уточнения формата языковых конструкций (теги, атрибуты тегов и их значения, стилевые свойства и их значения) разработчику полезно иметь под рукой описания стандартов W3C (англ. World Wide Web Consortium — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины).
Стандарты W3C
Спецификация HTML 4.0 от 18 декабря 1997 года
Спецификация HTML 4.01 от 24 декабря 1999 года
Спецификация CSS2 от 12 мая 1998 г
Графические редакторыДля подготовки иллюстраций для Web необходимо иметь:
Полезен для обработки фотографий, в том числе и для сайта. Про Photoshop CS2 говорить не приходится — признанный лидер. Бездонная по возможностям программа. В неё встроен и оптимизатор графики.
Что касается альтернативных бесплатных вариантов, то можно предложить два неплохих продукта.
Растровый редактор GIMP: www.gimp.org. Можно скопировать продукт с сайта Softodrom.ru: soft.softodrom.ru/ap/p2159.shtml. Есть поддержка русского языка.
Растровый редактор Pixia: park18.wakwak.com/~pixia. С сайта автора можно скачать плагины для подключения Photoshop filters и дополнительные фильтры. Можно скопировать продукт с сайта Softodrom.ru: soft.softodrom.ru/ap/p839.shtml. В комментариях упоминается русский хэлп и русификатор.
Векторный редактор очень удобен для подготовки графики в силу следующих его свойств:
Очень хороший векторный редактор — Xara X (и новый вариант Xara Xtreme). Адрес сайта производителя: www.xara.com/products/xtreme.
В качестве бесплатного варианта можно назвать продукт Inkscape. Адрес сайта производителя: www.inkscape.org. Можно скопировать продукт с сайта Softodrom.ru: soft.softodrom.ru/ap/p4432.shtml.
Оптимизатор графикиПосещаемость сайта (при прочих равных условиях) тем выше, чем быстрее он просматривается.
Вот почему уменьшение объёма графических файлов (без видимого ухудшения качества изображения) имеет большое значение в сайтостроении — графические файлы создают основную часть трафика, передаваемого с Web-сервера на браузер клиента, для показа гипертекстовой страницы.
Оптимизатор графики встроен во всеядный Photoshop, но часто бывает удобнее пользоваться небольшими специализированными программами, которые выполняют только одну функцию, но делают это очень хорошо.
Для оптимизации графики, предназначенной для Web, можно рекомендовать бесплатный продукт WebGraphics Optimizer Professional: www.webopt.com/download.
Ftp-клиентСайты разрабатываются на локальном компьютере, а потом передаются на Web-сервер (чтобы их можно было смотреть в Интернете).
Передачу файлов на сервер эффективнее выполнять по протоколу FTP. Для этого нужно обзавестись хорошим ftp-клиентом.
Хороший ftp-клиент встроен в оболочку Far (бесплатный продукт): farmanager.com.
Пользователям, привыкшим к графическому интерфейсу Windows, можно рекомендовать бесплатный продукт SmartFtp: www.smartftp.com. Можно скопировать продукт с сайта Softodrom.ru: soft.softodrom.ru/ap/p1527.shtml.
Кроме того, ftp-клиент входит в состав текстового редактора PSPad.