Советы

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

При создании страниц я рекомен do you удержаться от использования таких программ, как FrontPage(r), HomePage(r), PageMill(r), SiteMill(r) и т.п. Если вы одной рукой мешаете в кастрюле борщ, другой утомительно замачиваете белье, а третьей собираетесь делать сайт, то это ваши программы (они для домохозяек).
Артемий Лебедев

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

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

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

Существуют более продвинутые, по сравнению с 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.pereslavl.ru