Файл: Создание сайта с помощью конструктора Wix.docx

если сайт ресурсов для дизайнеров графики, то считаем, что они имеют дисплеи, по крайней мере, с разрешением 800x600 или выше, в соответствии, с чем и разрабатывается страница. Если сайт предназначен специально для WebTV или какого-то другого устройства отображения, следует ориентироваться на это конкретное устройство.

Достойный уважения Web-дизайн включает разработку страниц, доступных для пользователей с ограниченными возможностями, в частности по зрению и слуху. Консорциум World Wide Web объявил об инициативе Web Accessibility Initiative (WAI), которая ставит целью сделать Web более доступным для всех пользователей. Однако успех данной инициативы зависит от участия в ней рядовых разработчиков, которые могут (или не могут) создать Web-сайты в соответствии с поставленными задачами.

Пользователи с ограниченными возможностями зрения могут использовать специальные устройства для увеличения изображения, находящегося на экране. В этом случае к дизайну не предъявляется никаких специальных требований. Многие люди с проблемами зрения используют текстовые браузеры (такие как Lynx) вместе с программным обеспечением, которое громко читает содержимое страницы. В любом случае основное внимание уделяется структуре документа и его тексту. Графическое содержимое может быть просто утеряно [4, стр.74].

---

1.3. Представление текста на Web-страницах

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

Пропорциональный шрифт - иначе «шрифт переменной ширины» для каждого символа выделяет разное количество места в зависимости от его начертания. Например, в пропорциональном шрифте заглавная «W» занимает больше места в строке по горизонтали, прописная «I». Такие гарнитуры, как: Times, Helvetica и Arial являются примерами пропорциональных шрифтов. Web-браузеры для большинства текстов на Web - странице, включая основной текст, заголовки, списки, цитаты и т.д., используют пропорциональные шрифты. Как правило, большие отрывки основного текста удобнее читать, когда они напечатаны пропорциональными шрифтами. Поскольку большинство пользователей не имеют времени заменить шрифты, установленные по умолчанию, с большой вероятностью можно предположить, что текст на вашей странице будет отображен шрифтом Times размером 10 или 12 пунктов (по умолчанию в Netscape) или Helvetica (по умолчанию в Microsoft Internet Explorer). Но это всего лишь общее правило [7, стр. 158].

Шрифт с фиксированной шириной предоставляет одинаковое место для всех символов шрифта. Заглавная «W» занимает т больше места, чем прописная «I». Примерами шрифтов фиксированной ширины являются гарнитуры Courier и Monaco. В Web-браузерах шрифты фиксированной ширины используются для отображения любого текста внутри следующих HTML-тегов: <рге>..... .<хтр>.

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

Обычно размер шрифта определяется в пунктах (22 пункта (пт) = 1 дюйм высоты шрифта) но, к сожалению, эти размеры не достаточно точно переводятся между платформами, Отчасти это происходит потому, что их операционные системы управляют дисплеями с различными разрешениями.

• 
  Можно выделить три гарнитуры шрифта, которые являются стандартными для представления текста на Web-страницах:
  
• 
  Times New Roman - классический шрифт с засечками. Данный шрифт используется для представления на бумажных носителях больших объемов текста;
  
• 
  Anal - шрифт без засечек (гуманистическая гарнитура). Данный шрифт чаще всего используется в заголовках;
  
• 
  Verdana - современный шрифт, разработанный специально для отображения на мониторе компьютера.
  

---

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

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

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

Гиперссылки принято обозначать подчеркиванием. Однако в последнее время возникает тенденция использовать подчеркивание под гиперссылкой лишь при наведении на нее указателя мыши, в этом случае следует выделять гиперссылку другим по отношению к остальному тексту цвету. Выделять гиперссылки цветом желательно даже в тех случаях, когда используется подчеркивание. По материалам исследований Якоба Нильсена, пользователи быстрее определяют зрительно гиперссылки, выделенные синим цветом. Необязательно это будет используемый по умолчанию цвет #0000ff, который и породил этот стереотип - текст любого цвета в синих тонах имеет больше шанса быть идентифицированным как гиперссылка.

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

1.4. Представление графики на Web-страницах

На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее - краткий обзор «большой тройки» онлайновых графических форматов. Более подробная информация представлена в главах, посвященных каждому из форматов. GIF. GIF - Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web. Его свойства состоят в следующем:

---

• 
  поддерживает не более 256 цветов (меньше можно и часто нужно);
  
• 
  использует палитру цветов;
  
• 
  использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы в дальнейшем практически не сжимаются);
  
• 
  поддерживает чересстрочную развертку;
  
• 
  является поточным форматом, т.е. показ картинки начинается во время перекачки;
  
• 
  позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFoв;
  
• 
  имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFoв;
  
• 
  поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах), осуществлять задержку между показами изображений и т.д.
  

GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если взять красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже -оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если надо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов. JPEG.

Вторым наиболее популярным графическим форматом в Web является JPEG - Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16,77 млн цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.

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

---

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

Есть еще третий графический формат, конкурирующий за постоянное использование в Web. Это формат PNG - Portable Network Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web. Именно поэтому он включен здесь в «большую тройку». PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).

Разрешение и размер файла изображений. Поскольку изображения Web существуют только на экране дисплея, будет технически правильно измерять их разрешение в пикселях на дюйм (ppi - pixels per inch). Другая единица измерения разрешения - количество точек на дюйм (dpi - dots per inch) относится к разрешению печатных изображений и зависит от разрешения печатающего устройства.

Но, так как реальные размеры графики зависят от разрешения дисплея, измерение в дюймах становится для Web-окружения неприемлемым. Единственной значимой единицей измерения становится пиксель [1, стр. 24].

Практично создавать изображения с разрешением 72 ppi (это лучший вариант для представления на экране), обращая внимание только на общие размеры в пикселях. В процессе создания графики на Web можно вообще не использовать дюймы. Важен размер изображения по сравнению с другими изображениями на странице и общего размера окна браузера. Например, многие пользователи по-прежнему используют 14-дюймо-вые дисплеи с разрешением 640x480 пикселей. Чтобы гарантировать заполнение графической заставкой всего пространства экрана, лучше сделать его шириной не более 600 пикселей (учитывая, что часть пикселей справа и слева будет использована для окна и для полосы прокрутки). Размер остальных кнопок и изображений на странице следует измерять в пикселях относительно баннера, имеющего ширину 600 пикселей.

---