Web дизайн: главное
презентация к уроку на тему

Слайд 1

W ЕВ-ДИЗАЙН Тема 1. Назначение, разновидности и функциональные возможности программ для публикации мультимедиа контента

Слайд 2

Список использованных источников и литературы Немцова Т. И., Назарова Ю. В. Компьютерная графика и wе b -дизайн . Практикум: учебное пособие / под ред. Л. Г. Гагариной.- М. : Ид •ФОРУМ•: ИНФРА-М, 2010 .- 288 с .: Робин Ноблес, Керри - Лэй Греди. Эффективный Web-сайт . Учебное пособие.— М,: Издательство ТРИУМФ, 2004 — 560с.: ил . Цель занятия: 1) ознакомиться с понятием wе b - дизайна; 2) изучить основы планирования сайта;

Слайд 3

Содержание Введение в w е b -дизайн Организация сайта Публикация сайта в Интернете Графика на w е b – страницах Цвет в дизайне Композиция и информативность Шрифт и текст

Слайд 4

Введение в w е b -дизайн W eb -дизайн ─ это создание w eb -сайтов средствами программирования и компьютерной графики . Цель занятия научится: • разрабатывать структуру сайта; • публиковать сайт в Интернете .

Слайд 5

Основы w е b -технологий Web - страница - это текстовый файл, содержащий текст, оформленный с помощью языка разметки HTML , а также ссылки на графические файлы (иллюстрации) и гипертекстовые ссылки на другие web -страницы сайта HTML . Hyper Text Markup Language ( язык разметки гипертекста ) - язык, используемый для создания документов в Интернете . Файлы, содержащие гипертекстовый код, имеют расширение .htm или . html .

Слайд 6

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

Слайд 7

Сайт (буквально «место, сегмент, часть в сети») — совокупность электронных документов ( файлов ) частного лица или организации в компьютерной сети , объединённых под одним адресом . Гиперссылка - базовый функциональный элемент html-документа, представляющий собой реализацию динамической связи какого-либо объекта данной web -страницы с контекстным содержимым другого документа. Браузеры . Для просмотра html-документов необходимо специальное программное обеспечение, предназначенное для динамической обработки кода НТМL и отображения web -страниц. Такие программы называются браузерами .

Слайд 8

Сервер - это компьютер с установленным на нем специальным программным обеспечением, имеющий собственное доменное имя. Работа системы «клиент-сервер». Функция браузера ( программы- клиента ) состоит в том, чтобы запросить у сервера определенную страницу , получить ее и отобразить на экране пользователя . Поиск запрашиваемой страницы осуществляется в определенной директории , которая отведена на серверном компьютере под данный сайт.

Слайд 9

Дата-центр или центр ( хранения и ) обработки данных ( ЦОД / ЦХОД ) — это специализированное здание для размещения хостинга ) серверного и сетевого оборудования и подключения абонентов к каналам сети Интерне т.

Слайд 10

Система адресации Чтобы информация безошибочно могла передаваться с одного компьютера на другой, необходимо наличие уникальных адресов, с помощью которых можно однозначно определить (идентифицировать) получателя информации. Универсальный указатель ресурса или URL (Universal Resource Locator) включает в себя: протокол доступа к документу, доменное имя или IP-адрес сервера, на котором находится документ, а также путь к файлу и имя файла : protocol:// domain_name/path/file_name http:/ /www.your site.server.com

Слайд 11

Специализация в w е b -дизайне В создании крупного сайта, как правило, участвуют несколько специалистов: • редактор w е b -кода ( w е b -кодер , w е b -верстальщик ); • w е b -мастер ( w е b -программист ); • w е b -дизайнер .

Слайд 12

Планирование web-ca йт a Особенности проектирования сайтов . К особенностям проектирования сайтов можно отнести следующее: 1) избыток информации; 2) люди не читают wе b -страницы , а просматривают; 3) пользователи избегают медленно загружающихся сайтов; 4) люди плохо ориентируются в большом количестве информации; 5) ограниченность кратковременной памяти человека; 6) трудности чтения с экрана монитора.

Слайд 13

Организация сайта Цель занятия : 1 ) изучить этапы разработки сайта и типовые виды сайтов; 2 ) познакомиться с принципами организации файловой структуры сайта Основные этапы разработки сайта 1 ) составление технического задания; 2) подготовка текстового содержания и иллюстраций; 3) разработка дизайна сайта; 4) кодирование и про r раммирование; 5) тестирование сайта; 6) публикация и раскрутка сайта.

Слайд 14

Типовые виды сайтов Персональный сайт . Визитная карточка . Промо-сайт Корпоративный сайт Интернет-магазин . Тематические порталы Персональный сайт . Это, прежде всего, рассказ о себе, т. е. вольное изложение собственной биографии . Затем необходима рубрика, которую можно условно назвать «Мои хобби» или «мои увлечения», подробно рассказывающая о том, чем вы любите заниматься в свободное от дел время. Весьма желательна фотогалерея, включающая ваши фотографии, а также страницы, касающиеся вашей семьи и работы. По желанию в список разделов можно добавить страничку с подборкой ссылок, которые по тем или иным причинам кажутся вам интересными.

Слайд 15

Структура страницы сайта Сверху находится шапка сайта , или header . Традиционно там располагается название сайта или картинка, а также какие-нибудь элементы навигации, например, ссылка На главную или Напишите нам. Обычно шапка — это первое, что пользователи системы стремятся изменить в своем дизайне. Примеры нестандартных пользовательских шапок: Вторая традиционная часть страницы — это подвал, или footer . Он расположен внизу страницы и обычно содержит сведения о создателе сайта, копирайт, год создания и т. д. Также часто в подвалах размещают счетчики статистики и рекламу. Стилистически подвал обычно перекликается с шапкой. Боковые колонки сайта обычно служат для меню, навигации, элементов поиска по сайту », опросов , рекламы и т. д. Такая колонка может располагаться либо справа или слева, либо с обеих сторон. Меню лучше всего располагать именно в боковых колонках или в строке под шапкой. Если вы его уберете в подвал, то часть пользователей может его просто не найти. Центральная колонка (или просто центр ) отводится для основного содержимого сайта. Она самая широкая (2/3 экрана), чтобы было удобно просматривать и изучать информацию. В эту часть сайта нельзя добавлять яркие и пестрые подложки — в таком случае глаза буду уставать, и изучать информацию будет просто некомфортно.

Слайд 16

Публикация сайта в Интернете Цель занятия : 1 ) ознакомиться с возможностями публикации сайта в Интернете; 2 ) узнать о проблемах продвижения сайта; 3) научиться использовать mеtа-теги для описания сайта; 4 ) научиться размешать сайт на бесплатном хосте.

Слайд 17

Чтобы опубликовать документы в Web, вы должны расположить их на постоянно доступном сервере Web -хостингом или просто хостингом, называется размещение web -страниц в сети Интернет на заранее арендованном дисковом пространстве какого-либо сервера (бесплатный хостинг, хостинг у провайдера, платный хостинг). Публикация контента в социальных сетях

Слайд 18

Продвижение сайта Регистрация в каталогах и поисковых системах . Размещение описания сайта в рассылках-обзорах Сети . Обмен ссылками с другими сайтами . Баннерная реклама . Написание собственных статей . Открытие собственной рассылки . Подбор ключевых слов Использование МЕТА-тегов

Слайд 19

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

Слайд 20

Цвет в дизайне Цель занятия : 1) познакомиться с понятием цвета; 2 ) узнать правила сочетания цвета;

Слайд 21

Цвет - свойство света вызывать определенное зрительное ощущение в соответствии со спектральным составом отражаемого или испускаемого излучения . Цвет - один из основных аспектов восприятия графики . Мозг человека одновременно воспринимает только 3-4 цвета. Обильность цветов отвлекает, уменьшает внимание

Слайд 22

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

Слайд 23

При создании произведений искусства, дизайна, рекламы художники пользуются понятием цветовой гармонии . В переводе с греческого языка гармония буквально означает связь, стройность, соразмерность. Одним из принципов гармоничного согласования цветов является их расположение на основе «равносторонности», когда цвета находятся в круге на одинаковом расстоянии друг от друга и при соединении их прямыми линиями образуются правильные геометрические фигуры. Если в композиции используются три цвета , то для их гармонизации необходимо применять вписанный в круг правильный ( равносторонний) треугольник , если четыре цвета , требуется применять квадрат , пять цветов – правильную пентаграмму , шесть - правильный шестиугольник т. д . Во всех случаях сумма цветов по-прежнему останется равной нейтральному серому цвету.

Слайд 24

Цветовой круг Иттена Гармоничность , а соответственно и дисгармоничность цветовых сочетаний можно определить по цветовому кругу. Цветовой круг представляет собой полный переход цветов спектра, расположенных по окружности В круге Иттена основой являются три цвета: синий , красный и жёлтый. Профессиональные веб-дизайнеры часто придерживаются одной схемы: • Они подбирают контрастные цвет фона и текста. Так легче читать и воспринимать статьи. • Кроме того, избегают аляповатости: количество цветов ограничено, стараясь в то же время не использовать их слишком мало, чтобы не сделать дизайн скучным. • Не пренебрегают интенсивными цветами , чтобы привлечь посетителя. • Ищут вдохновения и новых колористических комбинаций в природных цветовых сочетаниях .

Слайд 25

Композиция и информативность Цель занятия: познакомиться с основными принципами построения композиции ; Композиция - сочетание различных частей в одно целое в соответствии с определенной идеей При создании композиции необходимо определить : • смысловой центр (основная идея произведения) ; • изобразительный центр (точка внимания); • логику композиции (порядок рассмотрения и восприятия композиции ) .

Слайд 26

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

Слайд 27

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

Слайд 28

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

Слайд 29

Шрифт и текст Цель занятия : l) познакомиться со шрифтовым дизайном; 2) узнать правила подбора шрифтов; Ни одна работа не обходится без шрифтовых заголовков, логотипов , надписей и это самая ответственная часть любого проекта . Большинство современных профессиональных шрифтов ,созданных лучшими художниками на основе вековых традиций ,могут подходить или не подходить к конкретному случаю. Поэтом у подбор оптимального шрифта и подгонка его по месту - не только важная часть любого проекта, но и хорошее упражнение для развития дизайнерского вкуса и чувства формы . Главное правило подбора шрифтов для дизайнерского проекта заключается в том, что композиция должна содержать минимальное количество шрифтов. Шрифты должны быть резко различными , контрастирующими и тем самым поддерживающим и друг друга.