Читать онлайн «Веб-дизайн». Страница 60

Автор Дмитрий Кирсанов

● Длинное тире (англ. ет dash) как знак препинания не имеет ничего общего с дефисом (hyphen) — в идеале оно должно выглядеть именно так, как в этом предложении. Из кодировок кириллицы (стр. 16) длинное тире есть только у Unicode, CP1251 и кодировки Макинтоша, поэтому им нельзя пользоваться в текстах, автоматически перекодируемых из/в КОИ 8 или СР 866. Хотя в Windows почти все шрифты (как с кириллицей, так и без) имеют длинное тире по адресу 151 (шестнадцатеричное 97), пользоваться им на законных основаниях нельзя и в английских текстах — в официально предписанной для HTML кодировке Latin‑1 (как и в Unicode) это знакоместо объявлено «неиспользуемым» (стр. 17). Увы, пока что единственный стопроцентно надежный способ воспроизвести длинное тире в HTML-тексте — набрать два или три дефиса подряд: — или —.

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

● То же самое можно сказать и о коротком тире (англ. еп dash). В русской типографской традиции этого символа не было, но в английском наборе им принято пользоваться для численных интервалов, например: 1998–2000 (короткое тире не только чуть короче длинного, но и приподнято над строкой до середины высоты цифровых символов). В Windows большинство шрифтов имеют этот символ по адресу 150 (шестнадцатеричное 96); в HTML, однако, его приходится опять–таки имитировать одиночным или двойным дефисом.

Надо сказать, что в HTML 4 уже предусмотрены символьные коды — и – для длинного и короткого тире соответственно. Однако ссылаются они на кодовые позиции этих символов в Unicode — и увы, ни MSIE, ни NC в четвертых версиях еще и не думают эти коды поддерживать (хотя MSIE понимает их числовые Unicode–подстановки — и –).

● Кавычки — тема, заслуживающая отдельной книги. Всего существует четыре типа кавычек: «французские» (иначе называемые «елочки»), «немецкие» («лапки»), «английские обычные, или двойные," и 'английские одинарные.' В русском языке традиционно применяются французские «елочки», а для «кавычек «внутри» кавычек» — немецкие «лапки». В английском языке пользуются «английскими двойными» для кавычек первого уровня и 'английскими одинарными' для «кавычек 'внутри' кавычек.» Соответственно, английские кавычки в русском тексте, так же как и обозначение дюйма " вместо полагающихся кавычек в английском тексте, — следствие либо каких–то технических ограничений при наборе, либо (увы, чаще) необразованности того, кто этот текст оформлял.

К сожалению, в HTML вам вряд ли удастся щегольнуть знанием всех кавычечных тонкостей. В Latin‑1 предусмотрены только французские «елочки», для вызова которых стандартный HTML имеет мнемонические подстановки « и ». Однако на практике этими кодами нельзя пользоваться именно там, где они больше всего нужны, — в русском языке: из всех кодировок кириллицы «лапки» есть только в Unicode, CP1251 и в кодировке Макинтоша. И хотя в теории броузер обязан относить мнемонические подстановки к набору символов языка HTML (т. е. Latin‑1), а не к текущей кодировке документа, на практике мысль украсить русский текст «елочками» можно оставить до тех пор, пока все броузеры не научатся правильно разбираться с кодировками и мнемоническими подстановками.

Еще печальнее ситуация с немецкими и английскими кавычками. Их нет даже в Latin‑1, и надеяться остается лишь на Unicode, — точнее, на ссылающиеся на символы Unicode подстановки &bdquo; („), “ ("), ” ("), ‘ (') и ’ ('). Эти символьные коды введены в HTML 4, но еще не поддерживаются графическими броузерами.

Кстати, имейте в виду, что в английском языке точки и запятые принято вносить внутрь кавычек, даже если по смыслу они должны стоять снаружи: «так," а не «так».

● Сравнительно неплохо обстоят дела с символами авторского права (©) и параграфа (§) — они есть и в Latin‑1, и в большинстве шрифтов (как с кириллицей, так и без). Для их вызова из HTML можно пользоваться символьными кодами &сору; и § соответственно. Напротив, символ торговой марки (™), также присутствующий в большинстве шрифтов, в Latin‑1 отсутствует, так что вместо ™ предпочтительнее писать tm.

● Знак номера (№) был заимствован в русский язык из французского, так что в нерусифицированных шрифтах (чей набор символов ориентирован больше на англоязычную типографию) он отсутствует. (В Unicode он есть, но символьного кода в HTML 4 для него не предусмотрено.) Тем не менее символ этот присутствует во всех кодировках русского языка, и если вы ориентируетесь только на русскоязычную аудиторию и при этом вполне уверены в способности автоматического перекодировщика на вашем сервере правильно обрабатывать этот символ, им можно пользоваться просто как буквой (т. е. вставлять его в текст напрямую, без каких бы то ни было конструкций языка HTML).

Позиционирование

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

Эстетические принципы построения композиции, показывающие зависимость восприятия элемента и его отношений с другими элементами от положения на странице, — иными словами, ответы на вопрос «почему» — были предметом гл. II. Здесь нам остается ответить на вопрос «как», пользуясь техническими сведениями, которые вы почерпнули из гл.1 (и, вероятно, из вашего личного опыта). Следующая же глава будет целиком посвящена внутреннему устройству графических элементов, имеющих множество своих собственных технических «как» и эстетических «почему».

Вообще говоря, точное позиционирование материала по двум (и даже, как мы увидим ниже, по трем) измерениям есть второе по важности из условий творческой свободы дизайнера (первое — возможность пользоваться графикой). Характерно, что дизайнер Дэвид Сигель (www.dsiegel.com) — вероятно, самый известный из популяризаторов визуального подхода к веб–дизайну — прославился в первую очередь изобретением невидимой распорки из однопиксельного GIF'a (стр. 237).

ТАБЛИЦЫ И РАСПОРКИ

Простейший механизм размещения материала, доступный в обоих визуальных броузерах (в Netscape начиная с версии 2 и в MSIE с версии 3), — это использование таблиц, чаще всего не имеющих разлиновки и фоновой заливки ячеек и потому невидимых (видимо только их содержание, единственно ради позиционирования которого и вводится таблица). Прием этот позволяет регулировать расстояния между элементами с точностью до пиксела, что является важнейшим — хотя и практически единственным — достоинством этой технологии.

Если абстрагироваться от семантики, таблица для дизайнера — не более чем инструмент, позволяющий размерам одних элементов влиять на размеры и положение других. Изменяя высоту или ширину некоей ячейки, мы тем самым меняем высоту соответствующей строки и ширину соответствующей колонки, влияя на размеры текстовых блоков и выравнивание изображений по всей таблице. Иными словами, таблица служит своеобразной «средой передачи информации» о размерах и расположении элементов.

Для текстовой части документа таблицы — единственный (если не считать CSS) инструмент, позволяющий устанавливать произвольную величину полей, ширину колонки текста, а также верстать текст в несколько колонок. С графическими вставками таблицы используются чаще всего для составления сложных композиций из многих изображений, перемежаемых текстом и ссылками, с гарантированным взаимным расположением. Такой подход, в сравнении с «целиковой отливкой» больших графических блоков, выгоден и с точки зрения доступности информации, и с точки зрения экономии объема файлов (стр. 176).

В некоторых случаях при размещении графики можно вообще обойтись без таблиц или, по крайней мере, упростить их, уменьшив в них количество ячеек. Горизонтальный ряд вплотную прилегающих друг к другу графических вставок, выровненных по нижнему краю, можно получить, просто поставив подряд соответствующие теги IMG. Прервав этот ряд тегом BR, вы начнете следующую «строку», прилегающую верхним краем самой высокой из картинок к нижнему краю предыдущей «строки». Собственно говоря, поведение графических вставок при этом ничем не отличается от поведения букв в абзаце за тем исключением, что броузер может сам перенести такую «строку» после любой «буквы» (если она грозит вылезти по ширине за край окна или за границу отведенной для нее ячейки); предотвратить перенос можно, заключив строку картинок внутрь … .