Конспект лекции «Основы Web-дизайна»

Вид материала

Конспект

Содержание Создание сайта Советы по планированию содержания Время загрузки Оформление сайта Наполнение сайта JPEG (Joint Photographic Experts Group)

Подобный материал:

• Программа элективного курса по информатике "Интернет-технологии. Основы web-дизайна", 173.98kb.
• Программа учебной дисциплины техника и технология современного изобразительного искусства, 112.54kb.
• Содержание программы: Web -дизайн Основы Web -дизайна. Дизайн в Internet: задачи, подходы,, 13.59kb.
• Опыт преподавания Web-дизайна и программирования для Internet школьникам старших классов, 34.09kb.
• Конспект лекции прочитанной на цикле ту "Основы клинической нейрофизиологии", 88.32kb.
• Тематический план занятий по Web-Дизайну и оптимизации сайтов, 991.38kb.
• Сетевые технологии Web-дизайна, 85.09kb.
• Программа для получения дополнительной квалификации " Специалист в области компьютерной, 64.46kb.
• Учебная программа / расширенный курс 110 часов Дизайн интерьера   Предмет художественного, 37.67kb.
• Программа дисциплины «Мультимедиа технологии. Уровень Создание компьютерных презентаций», 60.69kb.

Конспект лекции «Основы Web-дизайна»


Понятие сайта

Информация, доступная в Internet, располагается на компьютерах (Web-серверах), на которых установлено специальное ПО. Значительная часть этой информации организована в виде Web-сайтов. Для просмотра Web-сайтов используются специальные программы, которые называются браузерами (Internet Explorer и др.).


Web-сайт – это

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

Web-сайты бывают

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

Web-страница представляет собой текстовый файл с расширением *.htm (*.php), который содержит текстовую информацию и специальные команды - HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера.


Вся графическая, аудио- и видео информация непосредственно в Web-страницу не входит и представляет собой отдельные файлы:

*.gif, *.jpg - графика,

*.mid, *.mp3 - звук,

*.avi - видео.

В HTML-коде страницы содержатся только указания на такие файлы.


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


Создание сайта

Этапы создания сайта.

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

Состав команды для создания сайта.

• Администратор. Организует совместную работу между членами группы. Следит за ходом выполнения работ. Дает необходимые указания и рекомендации. Следит за поступлением новой информации
  
• Веб-дизайнер. Создает фирменный стиль и логотип учебного заведения. Реализует его в графических программах (Photoshop, CorelDraw, Flash)
  
• Веб-программист. Занят в написании различных программ для веб-сайта. Например: написание форума, гостевой книги, скриптов для динамического обновления новостей
  
• Веб-мастер. Объединяет в себе функции веб-дизайнера и веб-программиста. Отвечает за общее представление веб-сайта в Интернете.
  
• Верстальщик. После того как создан фирменный стиль сайта и реализован дизайн одной из страниц веб сайта, необходимо сформировать основные страницы, создать структуру и наполнить страницы информацией
  
• Наборщик. Набирает необходимую текстовую информацию для сайта используя редакторы Word, Excel (или другие)
  
• Редактор. Проверяет подготовленный материал для размещения на сайте с литературной точки зрения. Исправляет ошибки, корректирует тексты
  
• Менеджер. Занимается раскруткой и рекламой веб-сайта.
  

Планирование сайта

Решив создать свой сайт и разместить его в Интернет, вы в первую очередь определяете

• с какой целью он создается;
  
• его тематику;
  
• для кого он предназначен.
  

Какой он, ваш пользователь?

• примерная возрастная группа и пол;
  
• с какой целью он к вам придет;
  
• каким браузером он пользуется;
  
• на какой скорости подключен к сети;
  
• какие у него настройки.
  

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

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

Советы по планированию содержания

• На первой (титульной) странице размещать заголовок сайта, ссылки на страницы с основной информацией и некоторые общие сведения
  
• Не подавайте весь текст на входной странице. Иногда кажется, что автор боится, что посетитель уйдет, не узнав главного. На первой странице в идеале должна быть зацепка — ключевое слово или фраза, которые “остановят” посетителя.
  
• Ограничивать длину страниц 3-4 экранами, первая страница - 1 экран.
  
• При необходимости со страниц содержащих основную информацию организовывать ссылки на страницы с более подробной информацией
  

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


Время загрузки

Странички нужно оптимизировать для получения наименьшего их размера (разумеется, в пределах разумного)

50 Кб - 100Кб - это максимальный объем (вес), который может иметь страничка вместе со всей графикой, находящейся на ней

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


Оформление сайта

Дизайн – размещение и оформление элементов содержания и навигации

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

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

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

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


Шрифт

• Оформление документа: выделение необходимых частей текста цветом, применением СТРОЧНЫХ символов, их курсивного и полужирного начертания, а также изменение размера шрифта.
  
• Удобочитаемость: текст выполнен темным цветом на светлом фоне и быть контрастным (не брать пестрый фон).
  
• Ширина строки документа: строка "идеальной ширины" должна умещать порядка 50-70 знаков. При их большем количестве скорость чтения замедляется и утомляемость наступает быстрее.
  
• Мелкий текст, мелкие надписи на картинках делайте шрифтом без засечек.
  
• Любая надпись - должна быть читаемой, то есть доносить до зрителя необходимую информацию.
  
• На одной работе не должно быть очень много шрифтов разных стилей. Это раздражает зрителей.
  
• Любая стилистическая невыдержанность произведения действует отрицательно на смотрящего.
  
• Лучше применить один-два вида шрифтов, но использовать буквы разных размеров либо цветов.
  
• Поменьше пользуйтесь так называемым пляшущим или разноуровневым текстом
  

Графика - это визуальное средство подчеркивания и выделения информации, раскрываемой текстом Web-страницы.

Внешний вид и привлекательность сайта в значительной мере зависит от наполняющей его графики

Пути получения графического изображения:

• создание изображения в графическом редакторе ;
  
• поиск в библиотеках графических изображений (ClipArt, Internet),
  
• сканирование с печатного экземпляра.
  

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

Наполнение сайта

Графические форматы

GIF (Graphic Interchange Format) - формат графического обмена. GIF-файлы - это файлы растровых изображений, в которых используется не более 256 цветов. (прозрачная, анимированная графика и рисунки).

JPEG (Joint Photographic Experts Group) - JPEG - файлы представляют собой растровые изображения, в которых может быть использовано до 16.7 млн. цветов. При каждом сохранении такого файла качество изображения ухудшается. (фотографии)


Работа с цветом

• Выбирайте цвета в соответствии с тематикой сайта
  
• Не применяйте слишком большое количество цветов, если в этом нет необходимости.
  
• Наиболее приятны зрению четырехцветные и дуатонные изображения.
  
• Чем больше цветов, особенно насыщенных и ярких, тем более раздражающе они действуют на психику человека
  

Сочетания цветов также бывают плохие. Самыми неприятными являются следующие цветовые сочетания:

• красный - зеленый,
  
• оранжевый - синий,
  

Оранжевый цвет гипнотизирует и притягивает

Причины, по которым не следует использовать музыку:

• пользователь не готов к тому, что сайт будет звучать;
  
• у пользователя играет своя музыка;
  
• фоновую музыку практически никогда нельзя выключить;
  
• звук с сайта редко бывает хорошего качества;
  
• при переходе на другую страницу сайта музыка пропадает на самом неподходящем месте ;
  
• смысловой и функциональной нагрузки у музыки на сайте — ноль целых, ноль десятых;
  

Звук имеет право на существование, если:

• пользователю предоставлена возможность самому указать, хочет он звук, или нет;
  
• он несет смысловую нагрузку
  

Нельзя использовать музыку в декоративных целях !!!


Размещение сайта

• Размещение на web-сервере в организации, в которой Вы работаете
  
• Размещение на каком-либо web-сервере в Интернет (хостинг)
  

Бесплатный хостинг

• Бесплатный сервис
  
• Быстрый процесс регистрации
  

• Не гарантируется непрерывная работа веб-сайта
  
• Используется реклама лица, предоставляющего хостинг, на Вашем сайте
  
• В любой момент в хостинге может быть отказано
  

r />
u


Платный хостинг

• Домен второго (первого) уровня
  

(или m и т.п.)

• Гарантируется стабильная работа веб-сайта
  
• Гарантируется определенная скорость доступа к веб-сайту
  
• Различные дополнительные услуги (до нескольких электронных адресов (mail@school.ru), размещение других сайтов под данным именем, возможность размещения программ)
  

• Платный сервис
  
• Достаточно долгий процесс
  

br />
ru/

u/


Регистрация сайта

Бесплатный хостинг

• Заполнение определенной ссылка скрыта(описание размещаемого ресурса, название, Ваш e-mail)
  
• Выдача Вам имени и пароля для размещения веб-сайта
  

Платный хостинг

• Заполнение определенной веб-формы (описание размещаемого ресурса, название, Ваш e-mail, адрес, паспортные данные)
  
• Выбор системы оплаты (почтовый перевод, Интернет (web money)
  
• Оплата за размещение веб-сайта
  
• Выдача Вам имени и пароля для размещения веб-сайта
  

Размещение сайта

1. Выдача логина (имени пользователя) и пароля для входа на удаленный веб-сервер
   

Например: логин: school пароль: sc76Ht

Адрес удаленного веб-сервера: ftp://hosting.ru

2. Использование программы Far для входа по протоколу ftp (протокол передачи файлов) для входа на удаленный веб-сервер
   
3. Копирование файлов в каталог на удаленном веб-сервере по протоколу ftp
   
4. Просмотр web-сайта по указанному адресу через броузер
   

Решение проблем

1. Проверить веб-сайт на наличие технических ошибок
   

2. Написать письмо в службу технической поддержки данного веб-сервера
   
3. Сменить хостинг (в случае бесплатного хостинга)