Визуальные редакторы

Легкость, с которой Word переводит свой текст в формат HTML, заставляет начинающего вебмастера задаться неизбежным вопросом: зачем изучать язык, если можно получать HTML-коды без всякой головной боли?

Что касается Wordа, то пример явно неудачный. Как раз здесь, головная боль обеспечена на все 100%.

При использовании Word как визуального HTML-редактора возникают следующие проблемы:

• Невозможно добиться точного соответствия Word-страницы визуальному представлению полученного HTML-документа.
  
  
• Word вставляет в HTML-коды много лишнего. Процент “мусора” порой достигает 50%. А пересылка “довеска” по сети стоит времени и денег.
  
  
• Word не справляется с конвертированием в HTML больших и сложных по структуре файлов.
  
  
• Word не умеет записывать HTML-тексты шрифтом по умолчанию. Он обязательно вставляет тег FONT с атрибутом face, в котором прописывает конкретный шрифт. Эта “привычка” Wordа не является безобидной для русскоязычных сайтов. Если на машине клиента указанные шрифты не содержат русских букв, то прочитать текст нельзя. Вероятно, вы встречались в Интернете с такой ситуацией, пробовали менять кодировки, но все с нулевым эффектом — браузер показывает текст шрифтом, в котором нет русских букв, и смена кодировки в этом случае, естественно, не помогает.
  
  

Существуют более продвинутые, по сравнению с Word, визуальные HTML-редакторы. Среди них — очень хороший и мощный продукт HomeSite, а также очень простой в обращении FrontPage Express.

Последний редактор, подобно Wordу, переформатирует текст HTML-программы по-своему, причем, не лучшим образом. Переформатирует весь код заново, а не только ту вставку, которая сделана в этом редакторе.

Можно добавить еще, что FrontPage не все умеет делать даже на уровне стандартного HTML3.2 и, бывает, встает в тупик перед простой проблемой. Например, отказывается вставлять пустую строчку между двумя таблицами, примыкающими вплотную друг к другу.

Но, тем не менее, редактор FrontPage Express — хороший. Работать с ним удобно.

Последнее достижение фирмы Microsoft — FrontPage 2000. Этот продукт — существенный прорыв на рынке визуальных HTML-редакторов.

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

В комплекте с FrontPage 2000 идет огромное количество предопределенных скриптов, формы, гостевые книги, картинки, таблицы и всякие другие “полуфабрикаты” для изготовления HTML-блюд на разный вкус.

Так нужно ли изучать HTML и заниматься ручной “вспашкой”, когда есть такие мощные “землеобрабатывающие” комбайны?

Мнение Сидорова и мнение авторитетных вебдизайнеров в этом вопросе однозначно — да!

Если вам нужно создать оригинальное HTML-произведение, которое не будет выглядеть как набившие оскомину интернетовские штампы, если вы хотите получить оптимальный код и добавить на страницу интерактивность за счет собственных скриптов и таблиц стилей, знания тегов и принципов построения HTML-кода просто необходимы.

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

Наконец, свободно владея HTML, вы будете ощущать себя принятым в хорошую компанию.

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

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

Конкурсы Роботландского Университета — бездонный колодец поучительнейших иллюстраций ко всем мыслимым ошибкам и погрешностям начинающих веб-проектировщиков.

Ниже предлагается ведерко из этого источника. Оно наполнено кодами, сгенерированные визуальными редакторами. Примите напиток как горькое лекарство и вы всерьез начнете учить “матчасть” (теги и технику их использования).

1. Пробел, который центрируется в пустой строке.

   <p align="center">&nbsp;</p>
   

   Визуальному редактору все равно, что центрировать, можно и пробел.
   
   

2. Ужасный абсолютный адрес

   <p align="center"><img
   src="file:///C:/WINDOWS/Рабочий%20стол/10'A'/fleayoyosb.gif"
   width="69" height="106"></p>
   

   Совет для любителей визуального редактирования: обязательно перед публикацией в Интернете перенесите свой сайт на другое место жесткого диска. Вы с удивлением обнаружите, что картинки не показываются, а ссылки не работают. Причина в абсолютных адресах, которые появляются в большом количестве у неумелых “визуалов”.

   И еще один совет: введите на своем сайте строгую дисциплину имен файлов и каталогов, ведь на сервере, который обычно работает под UNIX, регистр символов имеет значение! Адреса, прекрасно уживающиеся с Windows, на сервере могут перестать работать. Если картинка, например, имеет имя bacground.jpg, а в ссылке на нее написано Bacground.jpg, то изображения в Интернете не увидеть.

   Самое лучшее, когда имена всех файлов и каталогов внутри сайта имеют формат 8.3: не более 8 символов в имени, не более 3 в расширении. Никаких русских букв, пробелов и спецсимволов. Все имена каталогов и файлов записаны в одном регистре (например, нижнем).
   
   

3. Полужирный пробел с собственным лицом.

   Визуальный редактор сотворил такой код:

   <font
   color="#FF0080" size="6" face="Courier New"><strong> </strong></font>
   

   Для пробела (пустого места) определяется новый шрифт, цвет и он записывается полужирным начертанием!
   
   

4. А — это совсем не то, что ккордики!

   <font color="#0000FF" size="5" face="Times New Roman">А</font><font
   color="#0000FF" size="5" face="Times New Roman">ккордики</font><font
   color="#0000FF" size="5" face="Times New Roman"><img
   src="Star.jpg" width="14" height="11"></font>
   

   Шрифт Times New Roman браузер использует по умолчанию. Задавать его явно не нужно и даже вредно, как, вообще, задавать шрифт атрибутом face. Цвет шрифта надо задавать один раз в теге BODY, а не в каждом слове абзаца (тем более, один и тот же). Зачем выделять букву А в отдельный font-блок, когда для нее задается то же самое, что и для продолжения ккордики? Зачем задавать размер, вид и цвет шрифта для картинки?

   Приведенный выше бред переписывается так:

   <FONT size=5>Аккордики</FONT>
   <IMG src=Star.jpg width=14 height=11>
   

   Или так, если не нужен пробел между словом и картинкой:

   <FONT size=5>Аккордики</FONT
   ><IMG src=Star.jpg width=14 height=11>
   

5. Хорошего должно быть много!

   Вот плотно набитый код табличной строки:

   <td width="34%"><font color="#0000FF" size="4"
   face="Courier New"><strong>Местонахождение</strong></font></td>
   <td width="18%"><font color="#0000FF" size="4"
   face="Courier New"><strong>Количество MB</strong></font></td>
   <td width="17%"><font color="#0000FF" size="4"
   face="Courier New"><strong>E-Mail</strong></font></td>
   <td width="7%"><font color="#0000FF" size="4"
   face="Courier New"><strong>CGI </strong></font></td>
   <td width="23%"><font color="#0000FF" size="4"
   face="Courier New"><strong>Примечание</strong></font></td>
   

   “Руками” это записывается так:

   <FONT color=#0000FF size=4 face="Courier New">
     <STRONG>
   ...
      <TD width=34%>Местонахождение</TD>
      <TD width=18%>Количество MB</TD>
      <TD width=17%>E-Mail</TD>
      <TD width=7%>CGI</TD>
      <TD width=23%>Примечание</TD>
   ...
     </STRONG>
   </FONT>
   

6. Брр!

   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
   <br><br><br><br><br><br>
   

   Если вам нужен большой отступ, используйте картинку-распорку, поместив ее в таблицу.
   
   
7. Двойное центрирование: а вдруг однократное не поможет?

   <div align="center"><center>
   ...
   </center></div>
   

8. Визуальные узоры.

   <table>
   <ul>
   <tr><td rowspan=9 width=20></td>
   <td><li><font size=+1 face="courier new"><i><b><small><a href="biog.htm">биография</a></small></b></i></font></td></tr>
   <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="friend.htm">друзья</a></small></b></i></td></tr>
   <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="hobby.htm">увлечения</a></small></b></i></td</tr>
   <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="favorite.htm">любимое</a></small></b></i></td</tr>
   <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="educat.htm">образование</a></small></b></i></td</tr>
   <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="future.htm">future life</a></small></b></i></td</tr>
   <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="dream.htm">мысли по поводу...</a></small></b></i></td</tr>
   <tr><td><font size=+1 face="courier new"><i><b><li><small><a href="map.htm">карта сайта</a></small></b></i></td</tr>
   <tr><td><font size=+1 face="courier new"><i><b><li><a href="ps.htm">P.<small>ост</small> S.<small>сриктуп</small></a> </b></i></td</tr>
   </ul>
   </table>
   

9. Строки, длиной в километр.

   <p align=justify><strong>Образование</strong> - одна из самых моих любимых тем для разговора, потому что именно оно (образование) часто определяет человека, показывает его качества, а так же дает человеку возможность жить в благоприятны
   х
   

Как видите проводить “уборку” после визуального редактора очень утомительно и требует больших временных затрат. Гораздо быстрее, качественнее и безопаснее писать сразу в обычном текстовом редакторе.

      Иван Сидоров kurs@robotland.botik.ru