Основы Web – дизайна. Web-сайт это набор взаимосвязанных страниц. Страницы связанны между собой ссылками (гиперссылками) Что такое Web-сайт персональные. - презентация

1 Основы Web – дизайна

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

3 Главная Мой предметСсылки на ресурсы Интернет Об автореТесты Моя школа Первый документ Web-сайта называется главной (или начальной) страницей (home page). Главная страница содержит ссылки на все остальные документы сайта. Так как связи между страницами могут быть очень сложными, то при создании сайта используют карты или графические схемы. На рисунке показана схема Web-сайта с тремя уровнями. Структура Интернет - сайта, уровни документов Index.htm Page1.htmPage2.htm Page4.htm

4 Заголовок Основной текст ---- // ---- Ссылка page1 Заголовок Основной текст ---- // ---- Ссылка index Заголовок Основной текст ---- // ---- page2 Заголовок Основной текст ---- // ---- Ссылка page3 Заголовок Основной текст ---- // ---- page5 Структура Интернет - сайта

5 Структура страницы

6 Обычная страничка с кнопками

7 Типовая представительская страничка

8 Сайты объединяющие в себе несколько типов. Часто их называют порталами. Яркий пример – мультипортал Кирилл и Мефодий Энциклопедия, последние новости, бесплатная почта, погода, курсы валют, библиотека, статьи, поздравительные открытки, поиск работы, путешествия, магазины, гороскопы, анекдоты, игры, каталог сайтов, голосование, доска объявлений, рейтинги, телевизионная программа, фото галереи и конкурсы. Порталы

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

10 Студия дизайна – Web Line Online Основное меню в центре страницы, с очень большими рисунками для каждого раздела. К сожалению, такое решение делает данный сайт похожим на сайт Интернет - магазина. Складывается впечатление, что нам предлагают выбрать товар, который нам интересен. Единственное, что говорит о назначении этого сайта, это надпись под меню. Проблема в том, что она не сразу попадается на глаза, и поэтому не сразу понимаешь, что это за сайт.

11

12

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

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

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

16 Графические форматы используемые в Интернет GIF (Graphics Interchange Format) JPG или JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) Требования: Тип изображения. Размер файла. Необходимое качество изображения.Время вывода на экран JPEG лучше подойдет для изображений с богатой цветовой гаммой, например, фотографий или сканированных рисунков Формат GIF предпочтительнее использовать для хранения иллюстраций с небольшим количеством цветов или четкими границами между ними. GIFJPEG

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

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

19 Системы видео захвата Устройства ввода информации Аппаратно независимый формат TIFF(Tagged Image File Format, TIFF).На сегодняшний, день одним из самых распространенных и надежных. Его поддерживают практически все программы на РС и Macintosh так или иначе связанные с графикой. TIFF является лучшим выбором при импорте растровой графики в векторные программы и издательские системы. Сканеры Разрешение Цветовая глубина Выбор формата файла Цифровые камеры

20 Сохранение файлов из Интернет и «Photoshop»

21 Шрифт Times Шрифт Arial Текст

22 Таблицы