l6 (Презентации лекций)

Веб дизайнЭтапы разработки и созданияweb-сайтаПостановка задачиРазработка и утверждение дизайнаПрограммированиеТестированиеПубликация сайта в интернетеЗаполнение сайта материаламиПродвижение (раскрутка)Поддержка сайтаГрафика Растровая графика Векторная графикаФорматы растровой графикиBMPPCXTIFFGIFPNGJPEGВМРВМР - формат хранения растровыхизображенийВ файле содержится:ЗаголовокИнформационный заголовокПалитраДанные растровой картинкиВМР – виды форматаМонохромный16 цветов256 цветов24 разрядный рисунокИспользуется алгоритм сжатия RLEАлгоритм сжатия RLEКодирование длин серий (Run-LengthEncoding) или Кодированиеповторов:последовательность одинаковыхсимволов, составляющих серию,заменяется строкой, котораясодержит сам повторяющийсясимвол и количество его повторов.Размер файла ВМРЗависит от содержимого:GIFGIF - формат хранения растровыхизображений (алгоритм сжатия LZW)В файле содержится: Заголовок Таблица цветов КартинкаGIF может содержать в себе несколькокартинок, тогда перед каждой из нихрасполагается своя таблица цветовGIF – плюсы и минусы Мультипликация Прозрачная графика Чересстрочная разверткаНе более 256 цветовPNGPNG - формат хранения растровыхизображений (алгоритм сжатия Deflate )Альтернатива GIF – унаследовал основныевозможности. Нет ограничений по цветамНет анимацииНе все браузеры одинаково отображаютсодержимое png-файлаJPEGJPEG - формат хранения растровыхизображений (алгоритм сжатияс потерями)JPEG - эффективный метод храненияизображений с большой глубиной цвета,например, получаемых присканировании фотографий смногочисленными едва уловимыми (аиногда и неуловимыми) оттенками цветаJPEG – плюсы и минусы Большая глубина цвета Хорошее качество фотографий Легко уменьшить размер файла безчувствительной потери качества Прогрессивный jpeg для webАлгоритм сжатия с потерями!!Появление артефактовРастровая и векторная графика Растровый рисунок – набор точекПри увеличении рисунка будетувеличиваться не рисунок как объект, ачисло точек рисунка, заменяя старые точкибОльшим количеством новых, подбирая дляних цвета, близкие к цветам прежних точек Векторный рисунок – набор объектовПри увеличении картинки объекты будутпостроены зановоВекторная графикаСпособ представления сложныхобъектов как совокупностьгеометрических примитивовИзображение окружности будетсодержать:Координаты центраРадиусЦвет заполненияЦвет и толщина контураПлюсы векторной графики Преобразования рисунка выполняетсябез искажений Графический файл в векторномформате меньше по объему Рисовать быстрее Любую часть рисунка можноредактировать независимо отостальных Большая точность отрисовки При изменении размеров изображенияне изменяется размер файлаМинусы векторной графики Не каждый объект может бытьпредставлен в векторном виде Ограничение в живописных средствах Слишком правильные формы и цвета Перевод из векторной графики врастровую прост, но обратногопреобразования нетИконки, пиктограммыПиктограммы - схематичныеизображения различных предметови явленийНужно стремиться к минимальномуобъему: Минимум цветов В лучшем случае размер иконки 40х40Неразглаженная графика Маленький объем файлачем меньше цветов, тем меньше размер Всегда и везде отображается одинаковоиконки должны правильно отображаться влюбом компьютере, а значит использоватьминимум цветов графика с неразмытыми краями хорошогодится для подвижных картинок ианимацийу размытых картинок на неподходящем фонепроступают «рваные края» и «светлые поля»40х40Размер одной картинки не более 3КБШрифты внутри иллюстрацийОграничения на выбор шрифтоввнутри иллюстраций ненакладываются, НО: Такие шрифты не масштабируются Такой текст не видят поисковые роботы Любое изменения текста повлечет за собойпеределку иллюстрацийКак выбрать шрифт Необходимо минимизировать количествоиспользуемых шрифтов При выборе шрифта важно следовать общимтребованиям фирменного стиля компании Необходимо помнить, что шрифты являютсяобъектом авторского права Шрифт должен быть контрастен по отношению кфону Страницы сайта должны выглядеть корректно прилюбом размере системного шрифта Желательно использовать только стандартныешрифты В CSS-файле необходимо задать предпочтительныеальтернативыРазмер шрифта (кегль) фиксированные единицы: px – пикселы pt – типографские пункты cm – сантиметры стандартные обозначения: large,medium, small, x-small и др. проценты: font-size: 110% emШрифтыПараметры шрифтов:форма, насыщенность, кегель, наклон,контрастность, цвет и т.д.С засечками: BookAntiqua, BookmanБез засечек: Arial Narrow, Century Gotic, TahomaМоноширинные: Courier, Lucida ConsoleВсе эти характеристики в сочетании с параметрамифона определяют такое ключевое для веб-сайтасвойство шрифта, как удобочитаемостьПри публикации текстов на вебсайте надо следовать принципам: Следует ограничить, стандартизироватьиспользуемые способы форматирования Следует соблюдать правила верстки Страница должна иметь яснуювизуальную иерархию с целью сделать еепригодной для беглого просмотра Необходимо обеспечить «воздушность»внешнего вида текста Желательно использовать достаточнокрупный шрифтПри публикации текстов надоследовать принципам: Ширина текстового поля должнаобеспечивать удобство чтения Для отдельных материалов необходимоуказать их «выходные данные» Текст должен быть разбит на компактныеблоки Следует отказаться от подчеркивания какприема визуального оформления.