Создание сайта. Основные этапы создания сайта 1. Разработка концепции сайта 2. Планирование бюджета и времени работы 3. Создание рабочей группы 4. Подготовка. - презентация

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

2 Основные этапы создания сайта 1. Разработка концепции сайта 2. Планирование бюджета и времени работы 3. Создание рабочей группы 4. Подготовка информационного материала. 5. Технологический этап Технологический этап 6. Реклама сайта.

3 1. Разработка концепции Постановка цели. Формулирование задач. Оценка аудитории. От всех этих параметров будет зависеть содержание, стиль оформления, образ подачи информации, техническое решение сайта.

4 2. Планирование бюджета и времени работы Определить масштабы проекта : установить сроки исполнения, указав конкретные шаги и требуемые ресурсы. Обеспечить поддержку рабочей группы как финансовую в виде выделения бюджетных средств, так и моральной в виде одобрения конечных сроков и целей.

5 3. Создание рабочей группы В команде должны быть определены роли : менеджер, дизайнер, программист, веб - мастер, редактор, ответственный за сбор материала, ответственный за рекламу, ответственный за сетевое общение.

6 4. Подготовка информационного материала Собрать и стандартизировать весь имеющийся по теме материал для сайта в электронной форме. Внимательно изучить сайты других организаций, с целью отследить ошибки, а также понять, что надо добавить и чего избегать при создании собственного сайта.

7 5. Технологический этап разработка дизайн - проекта, сбор материала, верстка, размещение в Интернете. Для создания сайта необходимо подготовить специальное программное обеспечение : веб - редакторы, графические редакторы, программы для переноса сайта на сервер ( для публикации в интернете ) и т. д.

8 6. Реклама сайта Составить план рекламной кампании. Использовать различные виды рекламы. Постоянно обновлять материал, проверять ссылки, « поддерживать жизнь » вашего сайта.

9 Технологический этап создания сайта Физическая структура сайта Набирая в строке адреса, например, и соединяясь с сервером, последний сопоставляет данный адрес с папкой, структура которой, как правило, имеет следующий вид : \pic \papka1 \papka2 index.htm stranitsa1. htm stranitsa2. htm foto.jpg ru На компьютер клиента в первую очередь выдается файл index.htm.

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

11 Дизайн сайта Предмет дизайна : шрифт, блоки текста, изображения, панель навигации и т. д. Все страницы сайта должны быть разработаны в одном стиле. Основным элементом разметки страницы сайта являются таблицы. Свойства таблиц : ширина и высота, 1) определяемой браузером по содержанию страницы, 2) задаваемой или в процентах или в пикселях ; ширина границ в пикселях ; отступ текста от границы в пикселях ; промежуток между ячейками в пикселях. фоновое изображение ячейки ;

12 Примеры

13 Оформление сайта Композиция построение художественного произведения, обусловленное его содержанием и характером. Композиция является важнейшим элементом художественной формы, придающим произведению единство и цельность. Цветовая гамма ряд гармонически взаимосвязанных цветовых оттенков художественного произведения. Различают теплые, горячие, холодные, яркие, блеклые, светлые и другие цветовые гаммы. Выбор цветов зависит от личных предпочтений и концепции сайта. Рекомендуется ограничить палитру цветов. Выберите главный цвет графических элементов и размывайте его от темного до светлого, добавьте в палитру также контрастный цвет ( например, для фона ). Цвет текста должен контрастировать с цветом фона для максимально удобного чтения. Обычно темный текст на светлом фоне читать легче, чем светлый текст на темном фоне. Текст приглушенного тона читать легче, чем фосфоресцирующий. Используйте яркие цвета только для заголовков и подзаголовков, а спокойные приглушенные тона для основного текста. Шрифты - Шрифт должен служить задачам восприятия информации. На сайта должен быть одинаковый стиль оформления текста ( заголовки разных уровней, эпиграфы, цитаты, ссылки и т. д.). С помощью различных вариантов шрифтов можно передавать настроение : радость, досаду и др.

14 Разработка сайта. Язык HTML HTML(hypertext markup language) язык разметки гипертекста. Язык HTML размечает экран на прямоугольные области, в которые идет загрузка изображений и компонуется текст в зависимости от ширины области. Веб - дизайнер язык HTML обязан знать в полном объеме.

15 Структура документа HTML Описание страницы ( сайта ) содержится в документе HTML, который представляет собой обычный текстовый файл. Документы HTML содержат программные коды, называемые тэгами. Тэги представляют собой последовательности символов, заключённые в угловые скобки, например,. Некоторые тэги используются только парами, как, например, тэги и. При этом первый из них называется открывающим или стартовым, а второй – закрывающим или конечным.

16 Теги определяют границы действия элементов. Элемент - это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных. Элементы могут вкладываться один в другой подобно матрешкам.

17 Вложенность элементов 50 80

18 Атрибут - параметр или свойство элемента. Запись стартового тега с атрибутом в общем виде: Все атрибуты записываются внутри стартового тега. Запись атрибута в общем виде: имя Атрибута="значение" Атрибуты внутри стартового тега разделяются пробелами.

19 Наиболее распространенные атрибуты 1. a lign - выравнивание 2. width - ширина в пикселах или процентах от ширины окна браузера 3. height - высота в пикселах или процентах от ширины окна браузера 4. color - Указывает цвет в формате RGB или стандартный цвет.

20 HTML - документ Структура гипертекстового документа Первый абзац документа ……… Последний абзац документа заголовок

21 Заголовок Первый абзац документа Последний абзац документа HTML - документ Программа-браузер Управляющая часть Окно просмотра интерпретированного HTML - документа Заголовок окна Строка адреса ресурса ( URL) Взаимодействие документа и браузера

22 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа URL:

23 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа URL:

24 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа ДОКУМЕНТ НАЙДЕН… ЖДИТЕ.

25 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа НАЙДЕНО НАЧАЛО HTML-КОДА

26 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа НАЧАТО ИНТЕРПРЕТИРОВАНИЕ ГОЛОВЫ

27 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа ИНТЕРПРЕТАЦИЯ ЗАГОЛОВКА Заголовок

28 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа ГОЛОВА ПРОИНТЕРПРЕТИРОВАНА Заголовок

29 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок НАЧАТО ИНТЕРПРЕТИРОВАНИЕ ЧАСТИ ДОКУМЕНТА ОТОБРАЖАЕМОЙ В ОКНЕ БРАУЗЕРА

30 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок ИНТЕРПРЕТИРУЕТСЯ ТЕКСТ Первый абзац документа

31 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок ИНТЕРПРЕТИРУЕТСЯ КАРТИНКА Первый абзац документа

32 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок Первый абзац документа ИНТЕРПРЕТИРУЕТСЯ …ТЕКСТ ……… Последний абзац документа

33 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок Первый абзац документа ……… Последний абзац документа ЗАКОНЧЕНО ИНТЕРПРЕТИРОВАНИЕ ЧАСТИ ДОКУМЕНТА ОТОБРАЖАЕМОЙ В ОКНЕ БРАУЗЕРА

34 Программа-браузер HTML - документ Заголовок Первый абзац документа ……… Последний абзац документа Заголовок Первый абзац документа ……… Последний абзац документа ДОСТИГНУТА ГРАНИЦА HTML- ДОКУМЕНТА СТРОК ДЛЯ ИНТЕРПРЕТАЦИИ БОЛЬШЕ НЕТ

35 Домашнее задание Просмотрите в Интернете различные типы сайтов образовательных учреждений, Оцените их с точки зрения дизайна и удобства навигации, Составьте рейтинг из 10 понравившихся вам сайтов, опишите их ( название, адрес, стиль оформления, способы навигации и пр.). Информацию представить в виде файла, отправив его по эл. почте на адрес