Меню
Главная
Авторизация/Регистрация
 
Главная arrow Информатика arrow Информационные технологии и моделирование бизнес-процессов

Основы Web-дизайна. Особенности технологии

Для web-страниц существует четко оговоренный набор шрифтов и цветов. Это объясняется тем, что созданную страницу могут просматривать на любом браузере, компьютере любой конфигурации и мониторе произвольного калибровки - Интернет крайне разнообразным.

Для того, чтобы текст на странице всегда отображался корректно (а не набором непонятных символов), разработчики сайтов используют следующие шрифты: Arial, Times и Courier с поддержкой стилей Bold, Italic, Underline.

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

Пример графического изображения, созданного на основе текста

Рис.13.3. Пример графического изображения, созданного на основе текста

Для иллюстрации важности использования стандартных шрифтов в дизайне страницы, рассмотрим случай, когда текст автор оформил шрифтом ВиrсhСТТ. При разработке страницы и в броузере на компьютере автора текст выглядел так:

Вид страницы на ПК с шрифтом BirchCTT

Рис.13.4. Вид страницы на ПК с шрифтом BirchCTT

При просмотре рассматриваемой страницы на другом компьютере, где установлен шрифт BirchCTT, Web-браузер отображает текст одним из шрифтов по умолчанию, а именно Times New Roman:

Вид страницы на ПК без шрифта BirchCTT

Рис.13.5. Вид страницы на ПК без шрифта BirchCTT

Аналогичным образом броузер может заменить предусмотренный автором цвет на цвет по умолчанию. При всем разнообразии цветов, представленных системой управления цветом RGB (аббревиатура от Red / красный /, Green / зеленый / и Blue / синий /) существует лишь 219 "безопасных" цветов. Они зарезервированы браузерами для непосредственного доступа на платформах Windows и Macintosh. Если палитра страницы (включая цветом шрифта) состоит исключительно из этих безопасных цветов, то страница на любом компьютере будет выглядеть одинаково. Обычно, безопасная web-палитра входит в набор стандартных палитр любого графического редактора.

Подготовка графики для сети Интернет. Кроме текстовой информации на сайте могут быть различные графические элементы - рисунки, фотографии, стрелки, кнопки, цветные или текстурные линии, анимированные изображения, и тому подобное. И, конечно, фон ("background" или просто "back") также может содержать картинку. Все это придает сайту индивидуальности и подчеркивает его содержание. Процесс создания и размещения на сайте мультимедиа - звука и видео (и Flash-анимация) в данной работе рассматриваться не будет, поскольку подробное изучение этих вопросов может составить отдельный учебный курс. Поэтому ограничимся изучением самых распространенных Интернет-форматов изображений * .GIF и * .JPEG. Об их специфику мы поговорим ниже.

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

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

Разрезания изображения средством редактора Adobe Photoshop

Рис.13.6. Разрезания изображения средством редактора Adobe Photoshop

Самым простым способом разрезания на части можно реализовать, разбив изображение нужным образом с помощью линий разметки (Guidelines), перетащив их мышкой с линейки, расположенной вверху и слева изображения. Линейка включается командами меню на панели инструментов Adobe Photoshop: View - Rulers.

Разбив изображение на части, активизируем инструмент "Slice" на панели инструментов Adobe Photoshop (рис.13.6). Кликаем мышкой на кнопке "Slices From Guides" панели Options.

Полученный результат записываем в окне File - Save For Web как готовую Web-страницу с фоном, состоящий из отдельных файлов. Программа автоматически размещает их в папке "images".

Поскольку фоновое изображение будет загружаться отдельными частицами небольшого размера (причем в окне "Save For Web" их размер в Kb можно еще уменьшить путем оптимизации цветов), это существенно уменьшит время загрузки страницы в целом.

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

 
< Предыдущая   СОДЕРЖАНИЕ   Следующая >
 
Предметы
Агропромышленность
Банковское дело
БЖД
Бухучет и аудит
География
Документоведение
Естествознание
Журналистика
Инвестирование
Информатика
История
Культурология
Литература
Логика
Логистика
Маркетинг
Математика, химия, физика
Медицина
Менеджмент
Недвижимость
Педагогика
Политология
Политэкономия
Право
Психология
Региональная экономика
Религиоведение
Риторика
Социология
Статистика
Страховое дело
Техника
Товароведение
Туризм
Философия
Финансы
Экология
Экономика
Этика и эстетика
Прочее