Материал этого и следующего уроков написан под большим впечатлением замечательной книги Дмитрия Кирсанова “Вебдизайн” (издательство “Символ-Плюс”, Санкт-Петербург, 1999). Прочитать эту книгу рекомендуется всем, кто имеет серьезные намерения достичь высот в непростом и увлекательном деле — создание качественных гипертекстовых приложений. Книгу можно заказать в интернетовском магазине www.books.ru.
Легкость, с которой 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 — это латынь гипертекстовой разработки и знать ее необходимо, хотя бы для того, чтобы понимать, о чем говорят и пишут люди в этой области. Тем более, как вы поняли из семи уроков этой книги, HTML предельно прост и доступен для работы на уровне обычного текстового редактора. Ну, а визуальные редакторы, конечно, вещь полезная. Почему бы и не использовать их, когда действительно трудно. Например, никто не заставит меня вручную размечать графическую карту гипертекстовыми ссылками.
Текст — это основной информационный элемент.
Новичок стремится побыстрее перейти к графике и “заляпать” цветными пятнами свою работу, не понимая, что текст — это кит, основание, и относиться к нему нужно очень серьезно, и, в том числе, как к важному элементу дизайна.
На первых порах старайтесь сдерживать желание украсить страницу декоративными элементами (как графическими, так и текстовыми), и следуйте академическому стилю, предусмотренному в самом браузере по умолчанию. Этот дизайн самый дешевый. И он не так плох. Документы, выполненные в этом стиле, отличает строгость форм и комфортность восприятия информации с экрана компьютера.
Этот стиль, как черный костюм, белая рубашка и галстук.
Человек одетый таким образом всегда выглядит элегантно и представительно. А вот парнишка в драных джинсах, длинной рубашке до колен, кроссовках на платформе и повязкой на лбу может выглядеть и очень интересно, и совершенно неуместно. Одеваться таким образом, очень непросто — нужен вкус, легко попасть впросак и вызвать у окружающих сочувственную улыбку.
Чем же определяется академический стиль оформления гипертекстового документа?
Проектировщик должен помнить, что разрешение экрана у пользователя может быть совсем не таким, как у него на рабочем столе.
Разрешение экрана — это его размеры в пикселах. Наиболее распространенным сейчас является разрешение 600x800. Но есть пользователи, которые смотрят странички в разрешениях 640x480, 1024x768 и даже 1280x1024.
Если проектировщик жестко привязывает свою страницу к определенному пикселному размеру за счет разных ухищрений (помещения элементов в пикселно заданную таблицу, использование тега PRE), то, тем самым, он рискует либо включить у пользователя горизонтальную линейку протяжки, либо прижать свою композицию к левому краю пустого экранного поля.
Понятно, что в последнем случае, все дизайнерские задумки будут сведены на нет — центр тяжести будет смещен влево и общий вид страницы будет испорчен.
Горизонтальная протяжка — тоже неприятна. Пользователь будет рассматривать вашу страницу в лупу своего экрана и никогда не получит возможность увидеть всю совокупность элементов целиком. Кроме всего прочего, горизонтальная линейка уменьшает и без того небольшое полезное поле экрана и не является элементом вашего дизайна.
И вертикальная линейка не украшает экран, но, к сожалению, это неизбежное зло: очень мало страниц целиком помещаются на одном экране.
Если вы не будете принимать специальных мер, а будете использовать умолчание браузера, страница станет “резиновой”. Для каждого разрешения браузер отформатирует элементы таким образом, чтобы они целиком покрывали весь экран, а горизонтальная протяжка при этом включаться не будет.
Эти элементы задаются в команде BODY. Кроме того, можно временно изменить цвет текста, заданный в BODY при помощи команды FONT (атрибут color).
Известно, что наиболее благоприятны для восприятия — абсолютно черный текст на абсолютно белом фоне:
<BODY bgcolor=white text=black> |
|
Именно такие значения устанавливает для этих атрибутов браузер Explorer по умолчанию. То есть, если написать просто тег <BODY> без всяких атрибутов, Explorer будет писать черный текст на белом фоне.
У браузера Netscape умалчиваемые значения другие: черные символы на сером фоне.
На самом деле, пользователь может изменить эти “умалчиваемые” значения и сделать их какими угодно для своего браузера. Правда, обычные пользователи редко это делают, но такая возможность есть. Поэтому, ориентируясь на академический стиль, нужно всегда писать явно:
<BODY bgcolor=white text=black> |
Приходится в этом месте сделать огорчительное замечание. Настройки браузеров настолько гибки, что в них можно задать режим, при котором браузер не будет обращать внимания на атрибуты bgcolor и text в BODY, а будет использовать цветовую гамму, установленную пользователем.
Ссылки — это особый элемент гипертекстового жанра. Ссылок как активных элементов нет ни в книге, ни в газете. В академическом стиле ссылки выделяются цветом и подчеркиванием. В силу этого:
Так как ссылка — это уже выделение текста, то:
С ссылками связан не один цвет, а целых три:
Цвет неотработанной ссылки должен быть заметным, контрастным по отношению к остальным цветам страницы. Ведь мы хотим привлечь к ссылке внимание пользователя. Хотим сделать так, что бы его рука сама потянулась к мышке, и он сделал то физическое усилие, на которое рассчитывал проектировщик страницы.
Посещенные (отработанные) ссылки должны иметь существенно меньшую напряженность окраски. Они должны говорить об окончании своей рабочей смены и отдыхать. Не надо на них по-прежнему фиксировать взгляд пользователя.
Цвет ссылки, сразу после щелчка, должен быть еще более активным, чем цвет неотработанной ссылки. Внимание! Я (ссылка) приступила к работе. Документ загружается и скоро появится на вашем экране. Потерпите немного!
В браузерах цвета ссылок по умолчанию такие:
синий — цвет неотработанной ссылки
красный — цвет активной ссылки
пурпурный — цвет отработанной ссылки
Эти цвета выбраны, конечно, не случайно.
Однако, как и в случае умолчания для цвета фона и текста, пользователь может покопаться в настройках браузера и переустановить, по крайней мере, два из этих трех параметров по своему желанию.
Поэтому, всегда записывайте в теге BODY атрибуты, явно задающие цвета ссылок.
BODY в черном костюме, белой рубашке и строгом галстуке выглядит так:
<BODY bgcolor=white text=black
link=blue alink=red vlink=purple>
|
Эта запись совершенно эквивалентна следующей:
<BODY bgcolor=#FFFFFF text=#000000
link=#0000FF alink=#FF0000 vlink=#800080>
|
Смысл атрибутов:
link — задает цвет неотработанных ссылок
alink — задает цвет активных ссылок (во время загрузки документа)
vlink — задает цвет отработанных ссылок
Кегль — это размер шрифта. В Word'e этот параметр задается в специальном окошке числами, как правило, от 8 до 72. Можно даже не выбирать готовое значение, а вписать число “руками”, например, “1” или “500”. Word будет работать!
Что означают эти числа? Это величина кегля в пунктах. Один типографский пункт равен 0.375 мм. Причем, это размер не самих символов шрифта, а размер так называемого “очка”. То есть, размер по вертикали матрицы, на которой гравируется в типографии символ (литера). Этот размер больше, чем размер самой литеры. Так, в шрифте кегля 10 заглавные буквы имеют размер около 7 пунктов.
При печати книг, как правило, для основного текста выбирается кегль в 10 или 12 пунктов. Для заголовков — более крупные кегли, а для ссылок и примечаний более мелкие (обычно 8 пунктов).
Какие средства дает HTML для управления кеглем?
Реальный размер символов на HTML-странице зависит от двух (на самом деле от трех, но об этом чуть ниже) вещей:
Атрибут size может принимать значения (условные) от 1 до 7. Причем, значение size=3 соответствует базовому размеру шрифта, который выставлен в настройках браузера. Другие значения атрибута size позволяют отклоняться от базового размера в сторону уменьшения или увеличения. Существуют и другой способ задания размера шрифта в виде size=+n или size=-n. В этой системе отсчета за 0 берется размер базового шрифта.
Итак, размер шрифта в теге FONT можно задавать следующим образом:
size=1 size=-2 size=2 size=-1 size=3 size=+0 Базовый размер, выставляется в браузере. size=4 size=+1 size=5 size=+2 size=6 size=+3 size=7 size=+4
Один из первых читателей гипертекстовой книги “HTML-конструирование” стал жаловаться, что читать ее совершенно невозможно, ибо она написана слишком мелким шрифтом. “Такая нонпарель может подорвать здоровье детей и сделать их калеками прежде, чем они научатся писать гипертексты.” — заявил он мне на полном серьезе.
Зная, что “HTML-конструирование” написана шрифтом по умолчанию, который пользователь может регулировать самостоятельно, я пошел посмотреть на настройки браузера своего оппонента.
Причина нонпарели оказалась не в настройках браузера. Там было установлено обычное значение “шрифты = средние”, а дело оказалось в разрешении экрана.
Я увидел на экране в 14" (с плохим зерном) разрешение 1024x768!!! Предложение изменить разрешение вызвало протест, тогда мы поставили в браузере “шрифты = самые крупные“ и ситуация выправилась.
Итак, казалось бы простой вопрос, “Чему равняется кегль базового шрифта браузера?” — совсем не прост и не однозначен. Ответ зависит как от разрешения экрана (то есть, его размера в пикселах), так и от его реального размера в сантиметрах или дюймах. Вот вам и третий компонент размера символа на экране: диагональный размер самого экрана и установленное разрешение!
Эти команды подробно описаны в уроке 2 книги. Их использование тоже ориентировано на изменение кегля шрифта по отношению к базовому размеру.
Гарнитура — это набор начертаний символов одного шрифта.
Этот набор может включать в себя прямое и курсивное начертание, различаться по степени жирности (толщине штрихов), ширине литер (сжатые, нормальные, растянутые) и кеглю.
Сами шрифты подразделяются на серифные (с засечками) и рубленые (без засечек). Пример шрифта с засечками — гарнитура Times, без засечек — Helvetica.
Серифные шрифты посредством засечек (серифов) в нижней части литер улучшают читаемость документа. Нижние серифы создают впечатление слитности написания слова, объединяя соседние буквы.
Рубленые шрифты, в отличие от серифных, имеют гладкие края букв и не имеют завитков. Чаще всего они используются для заголовков и для создания на HTML-страницах надписей, “замурованных” в графику (надпись внутри логотипа, надписи на “обложке” сайта).
Можно предложить еще одно деление шрифтов на два класса: пропорциональные шрифты и моноширинные.
Моноширинные шрифты имитируют литеры пишущих машинок и матричных принтеров. В этих шрифтах ширина всех литер одинакова. Именно таким шрифтом браузер выводит текст на экран по командам PRE, CODE, TT, SAMP, KBD.
Обычные же тексты браузер выводит пропорциональным шрифтом. В пропорциональных шрифтах каждая буква занимает столько места, сколько ей действительно нужно.
Гарнитуры Times и Helvetica — пропорциональные. К моноширинным шрифтам относится гарнитура Courier.
Любая графическая операционная система имеет три набора стандартных гарнитур, для Windows это:
Times Roman (серифный шрифт)
Arial(рубленый шрифт)
Courier(моноширинный шрифт)
Браузер по умолчанию использует шрифт Times Roman для вывода обычного текста и шрифт Courier для моноширинного.
Однако и здесь пользователь имеет возможность установить свои собственные значения шрифтов для режима умолчания.
Академический стиль HTML активно не поощряет приемы управления гарнитурой шрифта, хотя для этой цели существует специальный атрибут face в команде FONT. Можно запросто написать:
<FONT face=SchoolBook>
Этот текст будет показан
шрифтом SchoolBook?
</FONT>
|
|
И тот же Word, переводя свой текст в HTML, расставляет эти атрибуты в соответствии с используемыми в этом тексте шрифтами. Так как в Word'е нельзя писать шрифтом “по умолчанию”, все без исключения тексты из-под Word'а обрамляются тегами FONT с атрибутом facе.
На своем компьютере вы видите красивые HTML-документы из-под Word'а и недоумеваете — почему же не отойти от скучного Times Roman?
Сначала браузер пытается найти заказанный шрифт на компьютере пользователя. Если такой шрифт есть, он используется при выводе текстового фрагмента.
Неприятность. Шрифт с одним и тем же названием может содержать или не содержать в своем наборе русские буквы. Иными словами, ваш текст у пользователя может быть похож на “древненорвежский” и никакие переустановки кодировок в браузере не помогут. Изображений (глифов) русских букв в шрифте просто не существует!
Уж лучше бы браузер не нашел заказанного шрифта! В этом случае он станет пользоваться шрифтом по умолчанию, то есть Times Roman или тем, который установил пользователь вместо Times Roman для своего браузера.
Значением атрибута face может быть не один, а целый список шрифтов (разделитель — запятая). Если хочется вывести надпись рубленым шрифтом, можно написать:
<FONT face="Arial,Geneva,Helvetica>
Текст будет показан
рубленым шрифтом?
</FONT>
|
|
Сначала браузер пытается найти первый из указанных шрифтов, потом, в случае неудачи, второй, и так далее, по списку.
Если ни один шрифт не найден, берется шрифт по умолчанию. И эта неудача может оказаться для пользователя сущим благом.
Язык CSS (Cascading Style Sheets) был разработан в дополнение к HTML. Основная цель этой технологии — предоставить разработчику более гибкие способы управления визуальным форматированием гипертекстовой страницы.
В языке CSS шрифт можно задавать почти так же, как в HTML при помощи списка названий конкретных гарнитур. Однако, в этот список можно включать и родовой признак шрифта: serif (для шрифта с засечками), sanserif (для рубленого шрифта), monospace (для моноширинного шрифта). Если браузер не находит конкретного шрифта, он пытается его заменить другим, который есть на компьютере, учитывая родовой признак.
При этом, как вы понимаете, проблема с прочтением русского текста на компьютере пользователя по-прежнему остается.
Во второй версии языка CSS шрифтам уделено повышенное внимание. Теперь разработчик может написать указание, по которому браузер будет загружать нужный шрифт с сервера Интернета (того же самого, откуда загрузилась страничка, или другого) или даже синтезировать шрифт. Для синтеза шрифта пользователь должен задать метрику шрифта и его свойства, а браузер, исходя из этих описаний, будет создавать шрифт, беря за основу один из шрифтов, существующих на компьютере пользователя.
Примером детской работы, выполненной в стиле “черного костюма”, является работа Пановой Ольги из Барнаула:
Мелкие ошибки в этой работе:
![[оглавление]](pic/home.gif "оглавление"){kind=small}
![[урок 7]](pic/left.gif "урок 7"){kind=small}
![[урок 9]](pic/right.gif "урок 9"){kind=small}