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

Вид материалаКонспект

Содержание


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

Информационные технологии в деятельности учителя-предметника


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


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

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


Web-сайт – это

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


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


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

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

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

*.avi - видео.

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


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


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

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

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

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

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

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


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

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

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

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


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

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

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

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


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

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

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

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

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

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


Шрифт

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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


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

r />
u


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



(или m и т.п.)

br />
ru/

u/


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

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

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

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

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

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


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





Марийский региональный центр интернет образования, 2006