Итак, мы узнали с вами, что нужно делать для того, чтобы наш Web макет отображался корректно при открытии его в браузере, что нужно изменять, какие стандарты поддерживаются в Web-е и, какие не поддерживаются. А теперь давайте рассмотрим вопрос обратный. Что, если мы имеем элемент, который не можем изменять под стандарты Web?

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

Помните, мы в предыдущем занятии мы отключали этот параметр. Сейчас мы сделаем наоборот. Мы этот параметр включим для нашего заголовка. Для этого вызовем окно Modify для этого текстового блока и в разделе Text в нижней части экрана включим параметр Convert to Graphic on Export - конвертировать в графику при экспорте. После щелчка на кнопке ОК, мы можем видеть значок фотоаппарата, появившийся в углу текстового блока. Что происходит при этом? Мы можем взять любые элементы на странице, которые, возможно, в своем оригинальном виде не будут корректно изображены при просмотре в браузере, и указать для них вот этот атрибут.

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

Естественно растровое изображение выглядит не настолько идеально. С этим поделать, к сожалению, ничего нельзя. Второй вариант решения данной проблемы - это использование каскадных таблиц стилей. Что такое каскадные таблицы стилей? Прежде чем это выяснить, давайте уясним для

себя вот что - любой браузер оперирует не названиями шрифтов, а шрифтовой классификацией. Т.е. для любого браузера на странице существует всего лишь 5 видов шрифтов.

Это шрифт с засечками, шрифт без засечек, моноширинный шрифт, декоративный шрифт, и шрифт для заголовка. Поэтому мы, само собой разумеется не можем предугадать, какие шрифты будут стоять у пользователя. И даже когда мы используем, скажем, в заголовке или в тексте стандартный системный шрифт, такой как Times New Roman или Arial, то даже в этом случае нет гарантии, что пользователь увидеть именно Times New Roman, потому что у него браузер может быть перенастроен так, что вместо Times New Roman он будет отображать, например, шрифт Georgia. Что же такое каскадные таблицы стилей? С помощью каскадных таблиц стилей мы можем задать приоритеты подмены шрифтов. Что это означает? Например, мы используем в нашей публикации шрифт BernardMod BT.

Давайте, зайдем в пункт меню Edit и найдем в нем команду CSS Font Families - семейство шрифтов CSS. Аббревиатура CSS - это и есть каскадные таблицы стилей - Cascade Style Sheets. После щелчка мышью мы можем увидеть на экране вот такое окошко. Давайте, разберемся, что же здесь есть. У нас здесь есть список шрифтов, причем некоторые из них активны, некоторые нет. И если мы внимательно присмотримся, все эти шрифты - это системные шрифты Windows XP. Шрифты Arial, Courier, Courier New, Georgia, Helvetica, Times, Times New Roman.

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

Например, давайте посмотрим, какие настройки у нас для шрифта Arial. В нижней части экрана мы видим следующую надпись. Первая - Arial, вторая

- Helvetica Generic Font Sans-serif. Или, например, для шрифта Times New Roman: первая - Times New Roman, вторая - Times Generic Font: Serif. Что это означает? Это означает, что любая надпись, которая сделана шрифтом Times New Roman в нашем проекте будет отражаться им в том случае, если шрифт Times New Roman установлен в компьютере пользователя и он установлен, как шрифт с засечками по умолчанию. Если такого шрифта нет, то следующий за ним по приоритету идет так называемый Times Generic Font, это стандартный шрифт Times с засечками, который установлен в системе. Какой это шрифт будет, неизвестно.

Мы можем добавить от себя дополнительные шрифты. Например, возьмем тот шрифт, который мы используем в нашем заголовке. Щелкаем на кнопке

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

Единственное, что остается выбрать для этого шрифта, - это какого типа системный шрифт будет использоваться при его отсутствии в компьютере пользователя: стандартный шрифт с засечками Serif, без засечек Sans-serif, Cursive - заголовочный, Fantasy - декоративный или Monospace - моноширийный. Но на самом деле этим все не ограничивается. Мы можем добавить в данный список любое количество шрифтов. Но при этом, конечно, на самом деле следует добавлять шрифты, которые похожи на данный шрифт.

Сейчас, конечно, мы не будем копаться в списке шрифтов и искать, какие из этих шрифтов похожи и какие нет, мы просто добавим их наугад вот таким образом. Главное здесь - понять принцип действия данного процесса. Итак, в списке у нас 5 шрифтов. Изначально в документе у нас используется шрифт BernardMod BT. Если он отсутствует на компьютере пользователя, то следующим после него по приоритету следует шрифт Brush Type, и система будет искать этот шрифт. Если он у пользователя есть, то она его подставит. Если шрифта Brush Type нет, то соответственно будет искаться следующий шрифт по приоритету. И т.д., пока не будет найден шрифт из списка, или не закончится список шрифтов и ни один шрифт не будет найден.

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

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

телефонную линию, в течение 15-20 минут. Конечно же, это не очень хорошо. Т.е. в большинстве случае пользователь просто не дождется конца загрузки страницы и переключиться на что-нибудь другое.

⇐Преобразование печатных макетов в web формат | TeachPro WEB-дизайн | Создание гиперссылок⇒