Практика разработки Web-страниц
         

Изменение размера шрифта в FrontPage


Простейший способ изменить размер шрифта в FrontPage – это выделить текст и воспользоваться панелью инструментов Formatting (Форматирование). Для размера больше среднего выберите размер от 4 до 7. Для размера меньше среднего – 1 или 2. FrontРage вставляет тэги <FONT> на страницe. Когда вы включаете в текст новые части или табличные ячейки, не забудьте выбрать для них размер шрифта.


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

Чтобы определить стиль шрифта, выполните следующие шаги.

    Удалите всё существующее форматирование шрифтов. В меню Edit выберите SelectAll и затем в меню Format выберите Remove Formatting.Если вас не устраивает текстовый размер, заданный в тэгах HTML, измените его, используя стили. К примеру, вы можете изменить размер текста, заданный по умолчанию, пользуясь стилями в тэгах <BODY> и <TD>, или текст заголовка при помощи стилей для тэга <H1>. Выберите Style в меню Format, найдите нужное обозначение тэга (body, td или h1) в списке стилей, выберите Modify, затем Format и затем Font. Введите размер шрифта, после этого три раза нажмите ОК.


    При помощи стилей вы можете четко устанавливать высоту шрифта равной конкретному числу пикселей

    Для специальных размеров – чтобы определить размер текста, к примеру, равным 12 пикселам, создайте новый стиль и затем примените его к элементам вашей страницы. Выберите Style в меню Format, найдите пункт New, задайте название, начинающееся с точки (например, .small), выберите Format, затем Font, введите размер шрифта и три раза нажмите ОК.Чтобы применить какой-либо стиль как встроенный, например, Heading 1, или созданный вами – установите курсор в какой-либо части текста, ячейке или другом элементе страницы и затем выберите стиль на панели Style слева от панели Formatting.



Ни один из доступных шрифтов не дает нужного эффекта


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

Возможно, вам в голову пришел какой-то спецэффект, вроде "пылающего" тeкста или текста с тенью. Возможно, вы нашли прекрасно подходящий шрифт, но вы знаете, что он доступен не на всех броузерах. Возможно, вы хотите поместить текст в особое пространство на странице, а размеры шрифта не совсем подходят – особенно при переходе с одного броузера на другой. Выход можно найти с помощью графических программ – Macromedia Fireworks, Adobe Photoshop или ImageReady, которые предлагают оригинальное оформление текста. Создавая изображение, включающее текст, вы получаете больше возможности этот текст контролировать. С другой стороны, в этом случае будет тратиться больше времени на загрузку страницы, пользователь не сможет самостоятельно поменять размер текста и сайт будет сложнее найти. Но даже несмотря на это, большинство текста в сети – в частности, заголовки, баннеры, кнопки и логотипы – созданы как изображение, а не как обычный текст HTML.


увеличить изображение
Для баннеров, кнопок и другого нестандартного текста лучше всего использовать изображения

Если с простым текстом на вашей странице возникли трудности, сделайте следующее.

    Определите в пикселах точный размер того пространства, на котором собираетесь разместить текст. К примеру, если текст относится к табличной ячейке, проверьте высоту и ширину тэга <TD>.Создайте в графической программе документ данного размера, установив фоновый цвет изображения таким же, как и фон вашей веб-страницы. К примеру, в Fireworks выберите New. В меню File введите значения для высоты и ширины, затем выберите Custom under Canvas Color, чтобы выбрать цвет фона.Выберите инструмент для ввода текста и щелкните мышью по изображению в том месте, где хотите начать ввод текста. Выберите шрифт, цвет и другие свойства текста, например, полужирный и курсив. Наберите нужный текст – или, если текста много, вернитесь снова на свою страницу и просто скопируйте его – а затем нажмите ОК. Повторите процедуру для каждого фрагмента текста.Если хотите, можете добавить к тексту эффекты. В Fireworks выберите Effect palette, найдите эффект, такой, скажем, как Drop Shadow or Glow, а после этого задайте свойства этого эффекта. Результат от произведенных изменений вы увидите сразу же.





    увеличить изображение
    С помощью графической программы вы можете более точно указать размер текста и его расположение и отобразить его с различными эффектами

    Сохраните ваше изображение с расшитрением GIF. Используйте адаптивную палитру с таким количеством цветов, которое необходимо для сглаживания краев(для простого текста вы можете обойтись только 8 цветами; для эффектов вам понадобится 128) . В Fireworks выберите Export Preview в меню File, настройте опции, выберите Export и сохраните файл в папке, доступной для вашей веб-страницы.Переключитесь снова на вашу дизайнерскую программу и вставьте изображение на страницу. К примеру, в FrontPage в меню Insert найдите пункт Picture, затем From File, выберите изображение и нажмите ОК.

    В тэге <IMG> установите атрибут alt для того же текста, что включает и ваше изображение. Таким образом, данный текст будет виден в тот момент, когда изображение загружается, и поисковые системы смогут распознать текст сразу.

    <img src="text.gif"alt="This is the text."height=40 width=200 border=0>

    Если вы пользуетесь FrontPage, щелкните правой кнопкой мыши на изображении и выберите Picture Properties, введите текст в окне Text под Alternative Representations и затем нажмите ОК.

Один из самых больших недостатков использования текстовых изображений – то, что такой текст становится труднее обновлять. Непременно сохраняйте исходное изображение как файл Fireworks или Photoshop, сколько бы изображений вы потом не делали. Тогда вы легче сможете менять текст.


Размер текста не соответствует остальным параметрам


"Каждому – свое, или на вкус и цвет товарища нет". Это относится и к размеру текста в сети. Ваш текст будет гарантированно меняться в зависимости от броузера и системы пользователя. Windows, к примеру, отображает текст на 20% шире, чем Maсintosh. Различные шрифты занимают разное пространство, даже если их размер в пунктах один и тот же. Более того, пользователи могут менять текстовые установки в своих броузерах, если текст покажется им тяжелым для зрительного восприятия.


Стройте страницу таким образом, чтобы она хорошо смотрелась в любом случае, даже если пользователь пожелает изменить размер шрифта

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

    Если вы задавали размер шрифта через тэг <FONT>, значит, вы хотели изменить его. Стандартами HTML рекомендуется вместо этого использовать стили. Если вы решили воспользоваться ими, последовательно устанавливайте размер, меняя значения от 1 до 7. (Размер, равный трем – размер по умолчанию.)

    <font size="4">Larger than average.</font>

    Для каждого текстового блока и для каждой ячейки таблиц используйте отдельный тэг <FONT>.

    Броузеры могут воспринимать ваши установки по-разному, особенно в случае, когда пользователи пытаются увеличить или уменьшить размер текста. В Netscape всегда можно отрегулировать размер текста. В Internet Explorer шрифты, для которых вы задали определенный размер, используя CSS, не меняются (если только в свойствах броузера не разрешено игнорировать размер шрифта). Если вы хотите дать пользователям возможность самим выбирать размер, не используйте точные установки размера шрифта.

    Для полужирных заголовков на вашей странице используйте тэги от <H1> – для очень большого текста – до <H6> для текста, меньшего по размеру, чем текст на странице.






    Чтобы изменить установки шрифтов по умолчанию, пользуйтесь стилями CSS. В блоке <STYLE> или внешней таблице стилей установите свойство семейственности шрифтов в тэгах <BODY> и <TD>. Например, чтобы увеличить размер шрифта по умолчанию, добавьте следующие строки в блок <HEAD> вашей страницы:

    <style> BODY,TD {font-size:larger } </style>

    Размеры шрифтов могут задаваться по-разному. Можно выделить:



    сравнительные размеры – меньше или большезаданные шрифты – xx-small, x-small, small, medium, large, x-large, xx-largeпроцентные размеры – например, 125%точная высота шрифтов в дюймах, точках или пикселях, например 18in, 11pt или 14px.

    Для того, чтобы изменять индивидуальные текстовые размеры, создайте стиль и применяйте его к конкретным тэгам. Если необходимо точно указать размер, пользуйтесь пикселами, потому что они не меняются в различных операционных системах. Например, этот стилевой блок создает стиль small:

    <style> .small {font-size:12px } </style>

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

    <p class="small">This paragraph is exactly 12 pixels tall.</p>

Очень маленький или очень большой шрифт может оказаться трудным для прочтения и часто не совпадает точно с тем размером, который вы указали. Если вы хотите, чтоб текст или гиперссылка поместились в небольшом пространстве, или, наоборот, были особенно заметны, создайте изображение в графическом редакторе, таком, как Fireworks или Photoshop. Более подробно см. раздел "Ни один из доступных шрифтов не дает нужного эффекта".

Размер текста, который вы набираете в FrontPage – это размер по умолчанию для Internet Explorer. Когда пользователи просматривают вашу страницу, размер текста может меняться в зависимости от броузера. Лучше разработать страницу таким образом, чтобы подходил любой размер текста, однако если вы хотите, чтоб большинство пользователей могло видеть текст крупнее или мельче, в FrontPage можно легко менять размер шрифта какой-либо части или страницы целиком.

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


Шрифт, заданный по умолчанию, выглядит неправильно


Большинство броузеров отображают текст на странице шрифтом Times New Roman, которым обычно набраны книги и газеты. Если он вам не подходит, возможно, вы захотели поменять его – через HTML или используя вашу собственную программу дизайна – и столкнулись с некоторыми трудностями.


увеличить изображение
Задать шрифт по умолчанию гораздо эффективнее и проще, чем устанавливать шрифт для каждого участка текста в отдельности

Например, в программе FrontPage вы могли выделить текст на странице и изменить шрифт с помощью панели инструментов. Это поменяло шрифт выделенного отрывка, но не изменило шрифт по умолчанию для всей страницы, или в HTML вы попробовали добавить дополнительный тэг <FONT> для текста. В обоих случаях вы лишь спутаете на вашей странице связанные со шрифтами установки, но так и не измените шрифт по умолчанию. Более того, если вы позже решите изменять шрифты, вы должны будете менять их ещё во многих местах. Чтобы задать по умолчанию новый шрифт, сделайьте следующее.

    Если вы задаете параметры шрифтов через тэги <FONT>, найдите все тэги, которые связаны с указанным шрифтом, и удалите их. Это позволит уменьшить беспорядок и гарантирует, что установки для шрифта не противоречат правилам. (Вы можете оставить тэги, указывающие на второстепенные шрифтовые установки, или воспользоваться стилями – тогда их тоже следует удалить).

    Если вы использовали тэг <BASEFONT> Internet Explorer для того, чтобы установить шрифт, удалите его. Шрифт, заданный по умолчанию, дает лучший результат и может быть использован в большем количестве броузеров.

    Используя блок <STYLE> или внешнюю таблицу стилей, установите свойство семейственности шрифтов для тэгов <BODY> и <TD>.

    К примеру, если вы хотите установить шрифт Verdana (или Geneva, или любой другой шрифт без засечек, если Verdana недоступен) как шрифт по умолчанию, добавьте следующие строки в блок <HEAD> вашей страницы:




    <style> BODY,TD {font-family:Verdana,Geneva,sans-serif } </style>

    Для того, чтобы задать шрифт по умолчанию, вы должны использовать стили. Это значит, что ваши установки шрифтов подействуют только в броузерах, которые поддерживают СSS, к примеру, Internet Explorer 3 и выше или Netscape 4 и выше. К счастью, в них работает большинство пользователей, а броузеры, не поддерживающие стилевые установки, просто отобразят текст шрифтом, установленным броузером по умолчанию.



    Если вы хотите задать другой шрифт для отдельных элементов страницы, таких как заголовки, добавьте дополнительные стилевые установки. Например, для того, чтобы изменить шрифт заголовка на Comic Sans MS, вставьте в блок <STYLE> следующую строку:

    H1,H2,H3 {font-family:'Comic Sans MS', Helvetica,sans-serif }

    Затем воспользуйтесь тэгами <H1>, <H2> и <H3> чтобы выделить текст заголовков в вашем HTML (вместо форматирования каждого заголовка отдельным тэгом <FONT>).

Для того, чтобы установить последовательные стили шрифтов для сети во FrontPage, вы можете использовать внутреннюю таблицу стилей или тему (см. главу "Стили"). Если вы воспользовались таблицей стилей или темой, вы должны сделать необходимые изменения в установках шрифта по умолчанию именно там, а не на отдельных страницах.


Установка шрифта по умолчанию во FrontPage


    Чтобы удалить все существующее форматирование шрифтов, выберите команду SelectAll (Выделить все) в меню Edit (Правка), а затем выберите команду Remove Formatting (ОтменитьФорматирование) в меню Format (Формат).

    Если ваша страница уже обладает специальными установками шрифта, сохраните их. Вместо того чтобы выделять целую страницу, выделяйте каждую область на странице, в которой не должны использоваться специальные установки для шрифтов, и выбирайте Remove Formatting (Отменить форматирование) в меню Format (Формат).

    Щелкните правой кнопкой мыши на странице и выберите Page Properties (Свойства), затем Style (Стиль), Format (Формат) и, наконец, Font (Шрифт). Выберите необходимый шрифт из списка – желательно тот, который предположительно может использоваться в большинстве систем – такой как Arial или Verdana – а затем нажмите ОК три раза.Для того, чтобы ваши установки могли действовать в Netscape 4, вы должны задать тот же шрифт для тэга <TD> так же, как и для обычного текста. В меню Format выберите Style, затем в списке стилей выберите td (если td не отображен, выберите All HTML Tags в List box), выберите Modify, затем Format и затем Font. Укажите нужный шрифт и нажмите ОК три раза.Для форматирования заголовков лучше использовать стили заголовков, чем обычное форматирование шрифта. Поставьте курсор на заголовок и выберите стиль, например Heading 1 или Heading 2 в списке стилей слева от панели инструментов.



Выбранные шрифты не отображаются на некоторых компьютерах


Выбор шрифта для вашей страницы может оказаться непростым. Трудность заключается в то, что список шрифтов, установленных на компьютере, не может быть одинаковым для всех. В системах Macintosh и Windows доступные шрифты различаются. Когда броузер не может отобразить выбранный шрифт, он, как правило, меняет его на стандартный шрифт по умолчанию, к примеру, Times New Roman. К счастью, вы можете определить альтернативные шрифты, которые броузер использует, если ваш первоначальный выбор окажется невозможным. Таким образом, вы можете выбрать один шрифт для Windows, другой – для Macintоsh, и еще один – на случай, если у пользователей не установлены выбранные вами шрифты.

Если на вашей странице текст отображается неправильным шрифтом, сделайте следующее.

    В HTML и таблице стилей замените каждое описание шрифта соответствующим списком имен шрифтов. Броузеры отобразят текст, используя первый шрифт, который устанавлен в системе пользователя. (Для более полного представления о том, что можно включить в список шрифтов, см. "Определение семейств шрифтов" на следующей странице).

    В HomeSite, например, выберите Extended Replace в меню Search. В FrontPage выберите вкладку HTML и Replace в меню Edit. В окне Find What укажите шрифт, для которого вы хотите указать альтернативу, например, Arial. В окне Replace With наберите список шрифтов, отделяя их друг от друга запятыми, например Arial, Helvetica, Sans-serif. Повторите эти шаги для всех шрифтов, которые встречаются на странице.


    Там, где вы используете один шрифт в HTML, лучше заменить его на список шрифтов, чтобы обеспечить возможность замены.

    По окончании каждый тэг <FONT> или описание стиля в вашем HTML должно выглядеть приблизительно таким образом:

    <font face="Arial,Helvetica,sans-serif">Arial text,if possible.</font>

    Если важно, чтобы текст отображался одинаково для всех пользователей, вы можете создать изображение, содержащее текст, используя графическую программу, такую, как Fireworks или Photoshop, однако из-за этого ваша страница может загружаться медленней. Более подробно см. "Ни один из доступных шрифтов не дает нужного эффекта".




    <style> BODY,TD { font-family:Arial,Helvetica,sans-serif } </style>

    Используйте список шрифтов, а не один шрифт в атрибуте face, в тэге <FONT> или пользуясь свойством семейственности шрифтов в CSS.Если возможно, просмотрите вашу страницу на других компьютерах, чтобы убедиться, что шрифты выглядят так, как нужно.
Всегда вводите названия шрифтов точно так, как они указаны в системном программном обеспечении, иначе броузер не сможет использовать их. Если имя шрифта содержит пробелы, вписывайте имя в одинарных кавычках. Например: <font face="'Arial Narrow', Helvetica, sans-serif">
В этих примерах приводятся шрифты, которые установлены практически у всех пользователей, но этим не ограничивает ваш выбор в области шрифтов. Если найдется особый шрифт, который вы бы хотели использовать – Palatino или Century Schoolbook, к примеру – сопроводите этот желаемый шрифт наиболее близким из этого семейства на то случай, если данный шрифт не установлен.

Определение семейств шрифтов

Ключом к тому, чтобы выбранные вами шрифты или их ближайшие родственники отображались на экране, является правильное определение наиболее часто устанавливаемых шрифтов. В конце каждого описания шрифтов включается общий тип шрифта, например serif, sans-serif или monospace.

Ниже предложены некоторые из семейств шрифтов, отобранные из тех, что обычно встречаются в газетах или книгах (названия с пробелами заключены в кавычки, как требуется в HTML).

'Times New Roman', Times, serifGeorgia, 'New York', 'Times New Roman', Times, serifGaramond, Palatino, serif

Ниже приведены семейства шрифтов sans-serif (расположенные тем же образом, и с указанием общего типа).

Arial, Helvetica, sans-serif'Arial Narrow', Helvetica, sans-serifVerdana, Geneva, Helvetica, sans-serif'Comic Sans MS', Helvetica, sans-serifSystem, Chicago, sans-serif

Наконец, используйте следующее описание для monospace – стиля "пишущей машинки":

'Courier New', Courier, monospace