close

Вход

Забыли?

вход по аккаунту

?

Заголовок слайда отсутствует

код для вставкиСкачать
Основы Web – дизайна
Что такое Web-сайт
Web-сайт это набор взаимосвязанных страниц.
Страницы связанны между собой ссылками
(гиперссылками)
персональные страницы (Home Page) предприятий и частных лиц
тематические веб-сайты (о веб-дизайне, о медицине, о программировании и т.п.)
электронные библиотеки (энциклопедии, www.km.ru)
системы поиска (www.ya.ru)
сайты - хранилища компьютерных программ (freesoft.ru)
электронные газеты/журналы (www.xakep.ru)
электронные магазины (www.ozon.ru)
обслуживающие (www.translate.ru – online-переводчик)
Структура Интернет - сайта, уровни документов
Первый документ Web-сайта называется главной (или начальной)
страницей (home page). Главная страница содержит ссылки на все
остальные документы сайта. Так как связи между страницами могут
быть очень сложными, то при создании сайта используют карты или
графические схемы. На рисунке показана схема Web-сайта с тремя
уровнями.
Главная
Index.htm
Мой предмет
Page1.htm
Ссылки на
ресурсы Интернет
Page2.htm
Об авторе
Тесты
Page4.htm
Моя школа
Структура Интернет - сайта
Заголовок
Основной текст
---- // ----
Ссылка
Ссылка
Ссылка
index
Заголовок
Заголовок
Заголовок
Основной текст
Основной текст
Основной текст
---- // ----
---- // ----
---- // ----
Ссылка
Ссылка
page2
page1
Заголовок
Основной текст
---- // ----
page5
page3
Структура страницы
Обычная страничка с кнопками
Типовая представительская страничка
Порталы
Сайты объединяющие в себе несколько типов. Часто их называют порталами. Яркий пример
– мультипортал Кирилл и Мефодий www.km.ru. Энциклопедия, последние новости,
бесплатная почта, погода, курсы валют, библиотека, статьи, поздравительные открытки,
поиск работы, путешествия, магазины, гороскопы, анекдоты, игры, каталог сайтов,
голосование, доска объявлений, рейтинги, телевизионная программа, фото галереи и
конкурсы.
Графическое оформление
Создавая web-страницы и целые сайты авторы зачастую не задумываются о
графическом оформлении. Фон странички фиолетовый, цвет текста
красный, обилие анимационных картинок, взятых из одних и тех же
стандартных библиотек и прочее. Пользователь, попавший на такую
страничку, либо просто не сможет найти и получить нужную ему
информацию либо постарается побыстрей уйти с такого сайта. Ему будет
резать глаз едкий цвет, раздражать мигание по всей страничке. Или
напротив, пользователю станет скучно читать голый текст.
Студия дизайна – Web Line Online
http://www.weblineonline.ca
Основное меню в центре страницы, с очень большими
рисунками для каждого раздела. К сожалению, такое решение
делает данный сайт похожим на сайт Интернет - магазина.
Складывается впечатление, что нам предлагают выбрать товар,
который нам интересен.
Единственное, что говорит о назначении этого сайта, это надпись под
меню. Проблема в том, что она не сразу попадается на глаза, и поэтому
не сразу понимаешь, что это за сайт.
Технологический процесс веб-дизайна включает в
себя планирование сайта, создание понятного
пользовательского интерфейса, разработку
внешнего вида Интернет - страниц и реализацию
проекта, используя соответствующие технологии.
http://cherry-design.spb.ru/pages/articles.htm
http://mrdesign.krasline.ru/articles
Дизайн страниц
В отличие от печати, где
при создании дизайна макета задается
размер бумаги, Web-страницы
просматриваются на самых разных
компьютерах и других электронных
устройствах. И здесь в первую
очередь играет значение разрешение
экрана монитора – это 640х480,
800х600 и1024х768 и различные
возможности видео-карты,
определяющей глубину цвета. Webброузеры позволяют прокручивать
документы, которые не помещаются
на экране, что позволяет создавать
страницы практически бесконечной
длины.
Что необходимо для
отличного Web-дизайна? Можно
сказать, что для этого необходим
талант, но на самом деле можно
добиться очень неплохих результатов,
используя определенные приемы и
хитрости, и создавать эффектные
макеты, несмотря на ограничения
HTML.
У каждого дизайнера
существует собственный подход к
разработке Web-страниц. Наилучший
результат получается, когда
выполняются эскизы графического
оформления страниц.
О векторной и растровой графике
Растровая графика
Растровая графика описывает объект цветными точками –
пикселями, определенным образом размещенных в
координатной сетке. В этом случае тот же листочек
описывается положением и цветом всех точек, из которых,
как из мозаики, складывается единый объект. Редактируя
растровые объекты, можно менять только точки а не линии.
Растровая графика зависит от оптического разрешения, так
как ее объекты описываются точками в координатной сетке
определенного размера. В этом случае при изменении
размеров объекта может измениться качество изображения,
например могут расплыться края из-за перераспределения
пикселей по краям координатной сетки. Воспроизведение
растрового объекта на устройстве с низким оптическим
разрешением снижает качество изображения.
Векторная графика
Векторная графика описывает объект направленными кривыми –
векторами, которые имеют координаты и цветовое значение. Например,
изображение задается точками, через которые проходят линии, образуя его
контур. Цвет определяется цветом контура и заключенных в нем областей.
Редактируя векторный объект можно менять свойства линий, из которых
состоит изображение. Можно передвигать объект, менять его размеры,
форму и цвет без какого либо влияния на качество изображения.
Векторная графика не зависит от оптического разрешения и
воспроизведение с различным оптическим разрешением не приводит к
потере качества изображения.
Графические форматы используемые в Интернет
GIF (Graphics Interchange Format)
JPG или JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
Требования:
Тип изображения. Размер файла. Необходимое качество изображения.Время вывода на экран
JPEG лучше подойдет для изображений с богатой цветовой гаммой, например, фотографий или
сканированных рисунков
Формат GIF предпочтительнее использовать для хранения иллюстраций с небольшим
количеством цветов или четкими границами между ними.
JPEG
GIF
Формат GIF89a
Индексированные цвета (Palettes)
Вместо трех цветовых каналов используется один, в котором
информация о компонентах цвета (красном, зеленом и синем) каждого
пикселя записывается в цветовую таблицу в виде фиксированных
значений. Достоинство - малый объем памяти, недостаток - потеря
качества. В разработанной в 1989 году новой версии формата GIF89a
способность эффективного сжатия дополнена уникальными
свойствами - череcстрочная развертка (Interlace) и прозрачность
(Transparency). При установке флажка Interlaced получаемое
изображение выводиться с высокой скорость но низким разрешением.
По мере дальнейшей загрузки файла происходит повышение качества
изображения и настраивается его фокус.
Формат PNG (Portable Network Graphics)
Разработан в качестве альтернативы GIF - формату. Реализован открытый, не запатентованный алгоритм
сжатия данных, обеспечивающий более высокие результаты. В отличие от 256 цветовой палитры GIF,
формат PNG позволяет сохранять изображение с глубиной 24 бит/пиксель и даже 48бит/пиксель. Более
эффективный алгоритм чересстрочности, первый проход занимает 1/64 файла по сравнению с 1/8 в GIF.
Позволяет хранить полную информацию о степени прозрачности с помощью специального альфа-канала.
Использование гамма-коррекции. Сохраняется коэффициент яркости дисплея.
Устройства ввода информации
Сканеры
Разрешение
Цветовая глубина
Выбор формата файла
Цифровые камеры
Системы видео захвата
Аппаратно независимый формат
TIFF(Tagged Image File Format,
TIFF).На сегодняшний, день одним
из самых распространенных и
надежных. Его поддерживают
практически все программы на РС и
Macintosh так или иначе связанные
с графикой. TIFF является лучшим
выбором при импорте растровой
графики в векторные программы и
издательские системы.
Сохранение файлов из Интернет и «Photoshop»
Текст
Шрифт Times
Шрифт Arial
Таблицы
Документ
Категория
Презентации по информатике
Просмотров
13
Размер файла
3 929 Кб
Теги
1/--страниц
Пожаловаться на содержимое документа