.

Графический и HTML-текст

Существует два вида текста для Web-страницы: графический текст (который на самом деле является изображением) и HTML-текст (сгенерированный с помощью HTML-тегов). HTML-текст называют живым, так как его можно изменять, как текст в вашем текстовом редакторе. Вы можете выбирать и изменять различные варианты размера и стиля шрифта для HTML-текста. Однако графический текст — это только изображение. Чтобы осуществить изменения в таком тексте, вам предстоит изменить изображение. Кроме того, графический текст имеет больший размер файла, чем HTML-эквивалент. Поэтому графический текст загружается дольше.

Исходя из этих соображений, на Web-сайте лучше использовать больше HTML-текста, чем графического. Вы можете удивиться: если HTML-текст более эффективен, зачем же тогда вообще использовать графический текст? Вместе эти два вида текста предоставляют разные уровни возможностей по дизайну. Возможности графического текста, связанные со шрифтом, цветом и даже выбором текстуры, безграничны благодаря тому, что это изображение, как фотография. Можно, например, поместить изображение заходящего солнца внутрь букв.

Для 1рафического текста можно также применить эффект сглаживания (anti- /j 00 \ aliasing) краев букв в тексте, как показано на рис 8.11. Из-за того что пиксели на экране квадратные, кривые в изображении и в графическом тексте выглядят ^ОБНО^ ступенчатыми. Сглаживание позволяет ввести немного промежуточных оттенков цвета для эффекта мягкого перехода от изогнутых краев изображения к фону. Когда вы используете программы Photoshop или Fireworks для создания графических элементов текста, сглаживание текста производится по умолчанию.

С другой стороны, в HTML-тексте для краев букв сглаживание применить невозможно, поэтому вы получаете “ступенчатый эффект” (рис. 8.12). К тому же для HTML-текста доступен только ограниченный набор шрифтов. Это делается для того, чтобы выбранные вами шрифты были установлены в системе целевого пользователя. На сегодняшний день используются очень разные системы. У вас должно быть около четырех вариантов шрифта для выбора. В HTML-тегах вы задаете первый, второй и третий варианты шрифта. Например, если вы хотите отформатировать заголовок шрифтом Verdana, вы можете задать Anal и Helvetica как альтернативные варианты шрифта на тот случай, если в системе пользователя не окажется стиля Verdana. О необходимости альтернативных вариантов рассказывается ниже.

Ложка графического текста на бочку HTML-текста

Многие Web-сайты должны быть просты в обновлении. Внести изменения в HTML- текст-— относительно несложная процедура, в отличие от полного изменения графики. По этой причине используйте на странице 90% HTML-текста и 10% графического текста. Применяйте графический текст для заголовков, кнопок, врезок и других ффектных текстовых элементов, которые вы разместите на вашем макете страницы.

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

Вам также следует минимизировать использование графического текста, если вы собираетесь локализовать (переводить на другие языки) ваш Web-сайт. Переводить HTML-текст гораздо проще, чем собирать все исходные файлы с графическим текстом и переделывать их, например, в испанский вариант.



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×