Основы Web – дизайна презентация

Web-сайт

персональные страницы (Home Page) предприятий и частных лиц
тематические веб-сайты (о веб-дизайне, о медицине, о программировании и т.п.)
электронные библиотеки (энциклопедии, www.km.ru)
системы поиска (www.ya.ru)
сайты - хранилища компьютерных программ (freesoft.ru)
электронные газеты/журналы (www.xakep.ru)
электронные магазины (www.ozon.ru)
обслуживающие (www.translate.ru – online-переводчик)

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

Структура Интернет - сайта, уровни документов

Index.htm

Page1.htm

Page2.htm

Page4.htm

// ----
Ссылка

page3

Заголовок
Основной текст
---- // ----

page5

Структура Интернет - сайта

пример – мультипортал Кирилл и Мефодий www.km.ru. Энциклопедия, последние новости, бесплатная почта, погода, курсы валют, библиотека, статьи, поздравительные открытки, поиск работы, путешествия, магазины, гороскопы, анекдоты, игры, каталог сайтов, голосование, доска объявлений, рейтинги, телевизионная программа, фото галереи и конкурсы.

Порталы

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

Графическое оформление

очень большими рисунками для каждого раздела. К сожалению, такое решение делает данный сайт похожим на сайт Интернет - магазина. Складывается впечатление, что нам предлагают выбрать товар, который нам интересен.

Единственное, что говорит о назначении этого сайта, это надпись под меню. Проблема в том, что она не сразу попадается на глаза, и поэтому не сразу понимаешь, что это за сайт.

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

http://cherry-design.spb.ru/pages/articles.htm

http://mrdesign.krasline.ru/articles

размер бумаги, Web-страницы просматриваются на самых разных компьютерах и других электронных устройствах. И здесь в первую очередь играет значение разрешение экрана монитора – это 640х480, 800х600 и1024х768 и различные возможности видео-карты, определяющей глубину цвета. Web-броузеры позволяют прокручивать документы, которые не помещаются на экране, что позволяет создавать страницы практически бесконечной длины.
Что необходимо для отличного Web-дизайна? Можно сказать, что для этого необходим талант, но на самом деле можно добиться очень неплохих результатов, используя определенные приемы и хитрости, и создавать эффектные макеты, несмотря на ограничения HTML.
У каждого дизайнера существует собственный подход к разработке Web-страниц. Наилучший результат получается, когда выполняются эскизы графического оформления страниц.

– векторами, которые имеют координаты и цветовое значение. Например, изображение задается точками, через которые проходят линии, образуя его контур. Цвет определяется цветом контура и заключенных в нем областей. Редактируя векторный объект можно менять свойства линий, из которых состоит изображение. Можно передвигать объект, менять его размеры, форму и цвет без какого либо влияния на качество изображения. Векторная графика не зависит от оптического разрешения и воспроизведение с различным оптическим разрешением не приводит к потере качества изображения.

Растровая графика

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

Photographic Experts Group) PNG (Portable Network Graphics)

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

GIF

JPEG

информация о компонентах цвета (красном, зеленом и синем) каждого пикселя записывается в цветовую таблицу в виде фиксированных значений. Достоинство - малый объем памяти, недостаток - потеря качества. В разработанной в 1989 году новой версии формата GIF89a способность эффективного сжатия дополнена уникальными свойствами - череcстрочная развертка (Interlace) и прозрачность (Transparency). При установке флажка Interlaced получаемое изображение выводиться с высокой скорость но низким разрешением. По мере дальнейшей загрузки файла происходит повышение качества изображения и настраивается его фокус.

Реализован открытый, не запатентованный алгоритм сжатия данных, обеспечивающий более высокие результаты. В отличие от 256 цветовой палитры GIF, формат PNG позволяет сохранять изображение с глубиной 24 бит/пиксель и даже 48бит/пиксель. Более эффективный алгоритм чересстрочности, первый проход занимает 1/64 файла по сравнению с 1/8 в GIF. Позволяет хранить полную информацию о степени прозрачности с помощью специального альфа-канала. Использование гамма-коррекции. Сохраняется коэффициент яркости дисплея.

TIFF).На сегодняшний, день одним из самых распространенных и надежных. Его поддерживают практически все программы на РС и Macintosh так или иначе связанные с графикой. TIFF является лучшим выбором при импорте растровой графики в векторные программы и издательские системы.

Сканеры
Разрешение
Цветовая глубина
Выбор формата файла

Цифровые камеры