Реферат: Планирование бюджета и времени работы 8 Создание рабочей группы 8 Подготовка информационного материала 8 Технологический этап 9

Технология построения веб-сайтов образовательного назначения







Технология построения веб-сайтов
образовательного назначения


Представление о назначении сайта ОУ 3

Представление о назначении сайта образовательного учреждения 3

Примеры сайтов образовательного учреждения 3

Основные этапы создания сайта 7

1. Разработка концепции 7

2. Планирование бюджета и времени работы 8

3. Создание рабочей группы 8

4. Подготовка информационного материала 8

6. Технологический этап 9

7. Реклама сайта 10

Знания, необходимые для создания сайта 10

Контрольное задание 10

Представления о стиле, структуре и навигации сайта ОУ 11

^ Физическая структура сайта 11

Логическая структура 12

Создание списка содержимого сайта 12

Создание карты сайта 12

Тематические разделы 12

Навигация 12

Интерактивные элементы 13

Содержание сайта и оформление. 13

Контактная информация 14

^ Контрольное задание 14

Основы разработки сайта ОУ 14

Компоновка информации 14

Компоненты оформления 17

Композиция 17

Цветовая гамма 17

 Шрифты 18

Графика 19

^ Контрольное задание 20

Технология создания сайта 20

Подготовка к созданию веб-страницы. Язык HTML 20

Подготовка папок для сайта 20

Знакомство с языком HTML 20

^ Создание шаблона сайта 21

Создание графических элементов сайта 27

Создание заголовка сайта в графическом редакторе 27

Рисование кнопок для панели навигации 29


Создание логотипа 30

^ Компоновка графических элементов на странице 31

Создание страниц сайта 34

Наполнение сайта информацией 35

Приемы форматирования веб-страницы 35

CSS стили 36

Оценка результатов работы 37

Размещение в Интернете и поддержка сайта ОУ 38

Размещение сайта в Интернет 38

Вы также можете загружать файлы на свой сайт при помощи FTP 39

Реклама сайта 41

Контрольное задание 42



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

история и традиции школы;

приоритетные направления школьной работы;

педагогический коллектив;

жизнь школы (праздники, конференции, конкурсы, творчество учащихся и педагогов и т.п.)

учебные материалы;

образовательная политика (программные документы, устав, нормативные документы);

техническое оснащение школы;

дополнительное образование;

условия приема и обучения

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

Что такое сайт с точки зрения компьютерщика? Сайт в переводе с английского означает "место". То есть, это просто папка на сервере, куда можно помещать любую информацию. Применительно к Интернет, сайт — это группа страниц, логически связанных друг с другом общей идеей или темой, написанных на языке HTML и имеющих общее дизайнерское решение. Для того, чтобы адрес сайта легко запоминался, желательно, чтобы он был простым, например, http://www.shkola8.ru. Этот адрес ученики и родители должны запомнить, и, что составляет мечту любого разработчика сайтов, должны регулярно его посещать.
^ Примеры сайтов образовательного учреждения
http://www.koriphey.ru/ -— сайт гимназии Корифей, г. Екатеринбург. Очень содержательный сайт. отражающий внутреннюю жизнь образовательного учреждения. Учебный план, расписание, попечительский совет, совет гимназистов, новости образования. Информация постоянно обновляется. На сайте проводятся опросы, ведется новостная лента.



http://www.1580.ru/ -— Физико-математический лицей при МГТУ им. Баумана. Сайт очень профессионально создан учащимися лицея. На сервере собрано множество полезной информации для поступающих, учеников лицея, абитуриентов МГТУ им. Н.Э.Баумана, а также их родителей и учителей. Работает форум, на котором можно задать вопросы к администрации, проконсультироваться по поводу поступления в Лицей, пообщаться на разные темы. Есть центр дистанционного обучения.



http://zabrod.narod.ru http://www.zabrod.net Заброденская общеобразовательная школа, Воронежская область.

На сайте школе есть возможность загрузки программ для аттестации директоров школ в формате zip, представлены материалы по Единому Государственному Экзамену, собрание школьных сочинений, коллекция обучающих программ. В разделе "Воспитание" - разработки классных часов.

http://school.ort.spb.ru/index.htm Школа 550, Санкт-Петербург

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




http://www.fegi.ru/education/gym2/main.htm Гимназия дифференцированного обучения № 2 г. Владивосток

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



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

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

Планирование бюджета и времени работы

Создание рабочей группы

Подготовка информационного материала.

Технологический этап (разработка дизайн-проекта, сбор материала, верстка, размещение в Интернете)

Реклама сайта.

Дальнейшие этапы связаны с формированием аудитории сайта, вовлечением в его деятельность учащихся и родителей.
^ 1. Разработка концепции
Начнем с постановки цели. Цель должна быть реалистична. К примеру, основная цель школьного сайта — связать между собой учеников, родителей и учителей обменом информацией по различным направлениям школьной жизни. Например, в связи с занятостью родители не всегда могут прийти в школу лично, и лучше ввести их в курсе дела школы посредством объявления на сайте. С помощью школьного сайта, на котором отражена вся школьная жизнь, подростки будут больше вовлечены в социальную деятельность, смогут получать дополнительное образование дистанционно, учителя получат удобную доску объявлений о проводимых конференциях, смогут публиковать свои методические наработки и многое, многое другое. Школьные сайты должны быть по существу виртуальной школой. Это в значительной степени сможет облегчить выбор школы для ребенка, так как родители получают большое количество разноплановой информации (например, существуют сетевые рейтинговые службы, которые отражают качество обучения в школах, лицеях и гимназиях). Также школьные сайты — это прекрасная возможность показать творческие способности учащихся и способы самореализации подростков, отразить атмосферу в школьном коллективе.

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

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

Обеспечьте поддержку рабочей группы — как финансовую в виде выделения бюджетных средств, так и моральной в виде одобрения конечных сроков и целей.
^ 3. Создание рабочей группы
Школьный сайт необходимо создавать в широком коллективе учителей и учащихся. В команде должны быть определены роли: менеджер, дизайнер, программист, веб-мастер, редактор, ответственный за сбор материала, ответственный за рекламу, ответсвенный за сетевое общение. Ту или иную роль может выполнять группа учащихся. Проговорите с сотрудниками учебного заведения — возможно, кто-то из числа ваших коллег может дать ряд ценных советов (к примеру, пригласите учителя рисования для того, чтобы он объяснил основные законы композиции, цветовые сочетания и т.д.). Постарайтесь привлечь администрацию, учителей и учащихся к обсуждению вопросов создания школьного сайта. Чем больше человек будут участвовать в первоначальном обсуждении проекта, тем больше вероятность того, что впоследствии они будут его активно поддерживать.
^ 4. Подготовка информационного материала
Соберите и стандартизируйте весь имеющийся о школе материал для сайта в электронной форме.

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

Для создания сайта необходимо подготовить специальное программное обеспечение. Примеры:

 

Веб-редакторы:



MS FrontPage (входит в пакет Microsoft Office, удобен для создания простых сайтов)



Macromedia Dreamweaver (профессиональный редактор)




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



Adobe Photoshop (обработка и оптимизация растровых изображений: изменение размера, коррекция качества, создание элементов дизайна – кнопок, заголовков и т.д.)



Adobe ImageReady (создание анимации, интерактивной навигации, но самое главное – возможность оптимизации изображения как в целом, так и фрагментарно).



Macromedia Flash (создание анимации, с возможностью импорта звука и видео. На воспроизведение Flash-анимации требуется меньшее время (при более высоком качестве), чем на воспроизведение растровой GIF-анимации. Для вставки Flash-фильма в веб-страницу генерируется специальный html-код, а сам фильм оптимизируется).




^ Программа для просмотра графики



ACDSee Browser




^ Программы для переноса сайта на сервер (для публикации в Интернете)



Global SCAPE Cute FTP или



Windows Commander

Для настройки последних трех программ требуется получить от хостинг-провайдера FTP Host Address, имя пользователя и пароль для доступа на FTP-сервер.
^ 7. Реклама сайта
Для того чтобы ваш сайт был доступен максимальному числу посетителей, составьте план рекламной кампании. Используйте различные виды рекламы, не забывайте, что к вам «в гости» могут прийти люди, которые редко выходят в Интернет, но они заинтересовались методическими материалами того или иного преподавателя, лежащими у вас на сервере, прочитав статью в журнале. Постоянно обновляйте материал, проверяйте ссылки, «поддерживайте жизнь» вашего сайта. Сайт это живое существо, и если, один раз сделав, вы про него навсегда забудете, то тогда не стоит даже браться за это дело.
^ Знания, необходимые для создания сайта
Для создания качественного сайта необходимо иметь представления о

принципах обмена данных в Интернете;

технологии клиент-сервер, протоколах HTTP и FTP;

языке HTML

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

Откройте файл в текстовом редакторе (MS Word) и составьте коллекцию аннотированных сайтов ОУ.

Сохраните файл под названием сайты_ОУ .doc

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

Отправьте файл преподавателю.

 

 

 
Представления о стиле, структуре и навигации сайта ОУ
Допустим, вы прошли организационные этапы создания сайта и подготовили необходимый материал. Переходим к технологическому этапу. В данном занятии рассматривается физическая и логическая структура сайта, формируется его предварительное содержание на бумаге (макет сайта).
Физическая структура сайта
Набирая в стоке адреса, например, http://school8.ru, и соединяясь с сервером, последний сопоставляет данный адрес с папкой, структура которой, как правило, имеет следующий вид:

..
\pic
\papka1
\papka2
index.htm
stranitsa1.htm
stranitsa2.htm
foto.jpg

На компьютер клиента в первую очередь выдается файл index.htm (index — название файла, htm — расширение, указывающее тип файла). Этот файл прописан в настройках веб-сервера, как файл, который выдается пользователю, когда имя файла явным образом не указано, например, в виде http://school8.ru/pic/knopka.gif.

Файлы с расширением HTM или HTML представляют собой гипертекстовый документ, в котором могут существовать ссылки на изображения (например, foto.jpg) или другие гипертекстовые файлы (например, stranitsa1.htm). HTML(hypertext markup language) — язык разметки гипертекста. Язык HTML размечает экран на прямоугольные области, в которые идет загрузка изображений и компонуется текст в зависимости от ширины области. Веб-дизайнер язык HTML обязан знать в полном объеме. Запишите ссылку хорошего справочника по HTML в Интернет: http://html.manual.ru/book/html.php

Для удобства создания сайта информацию на сайте структурируют по папкам, например, изображения помещают в папку pic, дополнительную информацию к страницам 1 и 2 желательно разместить в собственных папках papka1 и papka2.

Запомните! Имена файлов могут состоять только из букв латинского алфавита, цифр, символов «_» и «-». Большие и маленькие буквы различаются (зависит от операционной системы сервера), поэтому все имена файлов вместе с расширениями пишите маленькими буквами. Русские буквы и пробел в именах файлов при передаче трансформируются в специальный код, делая файлы недоступными для просмотра.

Примеры

неправильно

правильно

о школе.htm
ученики.htm
Ucheniki.htm
ucheniki.HTM

o_shkole.htm
ucheniki.htm

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

Определите информационную часть сайта (статическая составляющая) и активную часть, которая требует от пользователя выполнения действий, например, заполнения форм, просмотр ресурсов и т.п.

Сгруппируйте идеи по содержанию.

Сгруппируйте идеи по возможностям.

Определите приоритет каждой из идей.
Создание карты сайта
Из созданной структуры сайта создайте карту сайта. Карта сайта — это своеобразная диаграмма, позволяющая визуально представить веб-страницы еще до их построения. Для наглядности нарисуйте на листе бумаги прямоугольники, соответствующие каждой веб-странице. Начинайте с домашней (она же загрузочная) страницы index.htm, разместив ее в верхней части листа, затем ниже разместите прямоугольники, соответствующие основным разделам. В следующем ряду добавьте подразделы. Продумайте логические связи (ссылки) между страницами и разделами.
Тематические разделы
Для удобного доступа к информации сайт нужно разумно организовать. Все предполагаемое содержание нужно разбить на основные темы (разделы сайта), содержащие одну или несколько HTML-страниц. Каждый раздел при большом количестве информации удобно разделить на несколько подразделов.
Навигация
На каждой странице сайта необходима панель навигации, внешний вид которой не меняется при смене страниц. Панель навигации позволяет посетителю сайта целиком видеть его логические блоки. Пункты меню навигации должны отображать основные логические блоки сайта. Они должны быть краткими и лаконичными, чтобы не занимать много экранного места. Помните, что пользователь должен иметь возможность быстро и эффективно перемещаться по страницам сайта. Чтобы помочь пользователю сориентироваться, схема навигации должна представлять собой простую, наглядную карту «дорог» всего сайта, с указанием места — «вы находитесь здесь». При планировании сайта, необходимо предусмотреть такую схему навигации, чтобы от страницы к странице пользователь мог перемещаться, сделав минимум щелчков кнопкой мыши. Простейший способ уменьшить количество щелчков — поместить на все страницы одинаковый набор навигационных ссылок. Если веб-сайт имеет много разделов, можно сгруппировать ссылки подразделов в раскрывающееся меню. В дальнейшем элементами навигации могут быть кнопки, ссылки и пр. Панель навигации обычно располагается в левой или верхней части странице. Далее на каждой странице сайте размещайте панель навигации в одной и той же области страницы. Таким образом, пользователю не придется каждый раз искать нужные кнопки. Все интерактивные элементы должны быть выполнены в едином стиле.

Субнавигация — это навигация в пределах одной страницы, ссылки на начало и конец страницы, на ключевые пункты.

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

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

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

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

Пример организации фотоматериала на сайте Московского учебного центра ФИО: http://center.fio.ru/photoalbum.asp
Контактная информация
Кто-то нашел вас сайт в Интернет и хочет связаться с вами, например, для того, чтобы устроить ребенка в вашу школу, чтобы обменяться опытом, чтобы пообщаться с педагогами после обучения в любимой школе. Контактная информация должна быть легко доступной и полной. Интернет — глобальная сеть, поэтому фразы «Наша школа находиться на ул. Иванова, д. 10» не годятся. В каком городе, где телефон, адрес электронной почты, имя и отчество контактного лица? Все это надо обязательно не забывать отражать на сайте. Относитесь к сайту, как к серьезному средству информации. Поместите контактную информацию в самые посещаемые места на сайте, в частности, на стартовую страницу index.htm. 
^ Контрольное задание
Откройте текстовый редактор.

Выпишите пункты меню навигации и имена файлов, соответствующие разделам вашего сайта.

Выпишите, какие интерактивные элементы будут включены в сайт вашего образовательного учреждения

Выпишите, какие иллюстрации вам необходимы для разработки сайта.

Сохраните файл под именем карта сайта ОУ.doc  
^ Основы разработки сайта ОУ Компоновка информации
Дизайн — художественное конструирование предметного мира. Применительно к сайтостроению, предметами художественного конструирования являются: шрифт, блоки текста, изображения, панель навигации и т.д. Как красиво расположить разнородные элементы на одной странице, как достичь наилучших результатов восприятия информации, как доставить посетителю эстетическое удовольствие? Все эти задачи и должен решать дизайн сайта.

Фактически, необходимо разработать дизайн одной страницы, так как весь сайт будет строиться по единому шаблону. Для помощи в разработке дизайна можно обратиться к учителю ИЗО.

Основным элементом разметки страницы сайта являются таблицы. На странице можно разместить сколько угодно таблиц всех форм и размеров. Смело вкладывайте одну таблицу в другую для достижения необходимого эффекта. Контроль над размером, количеством и расположением ячеек каждой таблицы позволяет очень эффективно использовать на странице. Каждая ячейка таблицы является «контейнером» для хранения информации, текста, рисунка и т.д.

Каждая таблица в языке HTML обладает набором следующих свойств:

шириной и высотой, 1) определяемой браузером по содержанию страницы, 2) задаваемой или в процентах или в пикселях;

шириной границ в пикселях;

отступом текста от границы в пикселях;

промежутком между ячейками в пикселях.

фоновым изображением ячейки;

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

Мы предлагаем следующий вариант размещения информации на странице, которая будет использоваться как шаблон для всех остальных страниц сайта (таблица 1).

Таблица 1. Табличный вариант размещения информации на странице.

логотип

название

Разделы:

Главная

Учителям

Ученикам

Родителям

Контакты

Карта сайта

_______

© данные о разработчиках сайта

Основное содержание

 

 

 

 

 

 

Разделы подменю:

Подраздел 1 | Подраздел 2 | Подраздел 3

Ниже вы увидите примеры сайтов, сделанные с применением табличной структуры. Они размещены на сайте Московского учебного центра ФИО в разделе «Избранные выпускные работы» http://center.fio.ru/works.asp



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



Навигационное меню может размещаться также сверху страницы:


^ Компоненты оформления Композиция
Композиция — построение художественного произведения, обусловленное его содержанием и характером. Композиция является важнейшим элементом художественной формы, придающим произведению единство и цельность. Композиционное построение включает в себя:

выяснение центра композиции и подчинение ему других частей произведения;

объединение отдельных частей произведения в гармоническом единстве;

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

Для пользователя Интернет страница не должна «разваливаться» на отдельные части, при первом взгляде не нее должно создаваться впечатление единого целого. Добиться этого можно грамотным размещением элементов дизайна на странице. Нужно учесть, что на странице будут некоторые служебные компоненты: элементы навигации, рекламные баннеры, формы для взаимодействия с пользователем, надписи и пр. — все это должно уложиться в общую композицию страницы. Например, способ отображения кнопок и их месторасположение на странице существенно влияют на качество сайта. Если пользователь не может найти кнопку, поскольку ни один элемент страницы на кнопку не похож, скорее всего, он откажется от дальнейшего просмотра сайта. Кроме того, необходимо помнить не только о внешнем виде интерактивных элементов, но и о их месторасположении на странице. С помощью предложенного табличного варианта размещения элементов сайта вы сможете решить эту проблему.
^ Цветовая гамма
Цветовая гамма — ряд гармонически взаимосвязанных цветовых оттенков художественного произведения. Различают теплые, горячие, холодные, яркие, блеклые, светлые и другие цветовые гаммы

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

Замечание. Цветовая гамма задается для всего сайта через таблицу стилей одним СSS файлом (Cascading Style Sheets — каскадные таблицы стилей).
Шрифты
Шрифт должен служить задачам восприятия информации. На сайта должен быть одинаковый стиль оформления текста (заголовки разных уровней, эпиграфы, цитаты, ссылки и т.д.).

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

Шрифты с засечками (маленькими черточки по краям букв) создают впечатление стабильности, безопасности, профессионализма — это лучший выбор для серьезного сайта. Шрифты с засечками используют для печати больших фрагментов текста.

Шрифты без засечек создают впечатление передового мышления, стремительности. Шрифты без засечек используют для печати заголовков и небольших фрагментов текста.

Таблица 2. Примеры шрифтов.

шрифт с засечками

шрифт без засечек

Times New Roman
Georgia
Courier New

Arial
Verdana

 

Шрифты фиксированной ширины (Courier New) используются для блоков текста особого содержания, имитирующих нажатия на клавиши клавиатуры или печатной машинки, например, для кодов программ.

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

Замечание. Чтобы ваша страница смотрелась одинаково на любом компьютере, вне зависимости от того, установлен на нем используемый вами шрифт или нет, используйте только стандартные шрифты Times New Roman, Arial, Courier New
Графика
Использование графики должно быть оправданным, графика должна четко соответствовать содержанию сайта. Переизбыток графики и анимации отвлекает от основного содержания, переключая внимание посетителей сайта, затрудняет загрузку страницы. Графика занимает основной объем трафика веб-страниц. Одна фотография в килобайтах занимает место в десятки раз большее, чем лист текста A4. Графика обязательно должна быть оптимизирована! Используйте повторяющиеся изображения, так как компьютер сохраняет один раз загруженные файлы во временных папках для экономии времени загрузки. Пример: графика панели навигации.

Графические элементы требуют для работы с собой знаний форматов GIF и JPEG, а также навыков владением графическими редакторами.  К графическим элементам отн6осятся элементы навигации (кнопки), линии, фотографии, рисунки, анимация. Графические средства могут являться элементами для разделения страницы на отдельные информационные части и привлекать внимание пользователей к отдельным информативным областям.

В веб-дизайне большие фотографии и сложные рисунки, занимающие весь экран, выглядят неуклюже. Кроме того, большие фотографии будут долго загружаться. Чаще всего сканированные изображения или полученные из Интернета графические объекты нуждаются в дополнительном редактировании в графическом редакторе (например, Adobe Photoshop).

Под редактированием изображения понимается:

обрезка части изображения;

регулировка контрастности и яркости;

регулировка цветового баланса;

изменение размера изображения;

регулировка объема изображения.

Основная задачи при создании графических элементов для веб-сайта состоит в максимизации качества графики при минимизации размера файла. Чем выше качество изображения и, тем больше размер файла и дольше время загрузки. В программе Adobe Photoshop есть возможность достичь компромисса между качеством изображения и его объемом, путем настройки параметров оптимизации в диалоговом окне специальной функции Save for Web (Сохранить для Веб). Для реализации поставленных задач принято использовать форматы GIF и JPEG . Выбор формата полностью зависит от типа сохраняемого изображения. Алгоритм сжатия JPEG основан на избирательном восприятии информации человеческим глазом и позволяет сжимать фотографии в 20÷50 раз, усредняя цвета малых участков изображения. При этом резкие переходы между цветами могут размываться. Для сохранения простых контрастных изображений (например, кнопки, сканированные таблицы), а также анимированных изображений используется формат GIF. В формате GIF сохраняют рисунки с небольшим количеством цветов. Сжатие файлов происходит за счет уменьшения количества индексированных цветов. Всего в формате GIF их 256, но иногда для рисунка бывает достаточно и четырех. Еще одна особенность формата GIF – возможность сохранения объекта с прозрачным фоном.
Привет, мир!

^ Создание графических элементов сайта Создание заголовка сайта в графическом редакторе
В графическом редакторе Adobe Photoshop можно сделать заголовок для веб-сайта. Для этого надо создать фон заголовка и написать на нем текст. Для надписи можно использовать различные эффекты.

Для создания фона:

Создайте новый холст. Размер холста, по опыту авторов, не должен превышать 550х80 пикселей.

Залейте холст цветом (таким же, каким залита ваша верхняя правая ячейка), используя инструменты Paint Bucket (Заливка).

В случае необходимости, текстурируйте фон. Можно использовать фоновый рисунок (если он используется в ячейке заголовка.)

Для написания текста:

Выберите инструмент ^ Type (Текст) , предназначенный для создания в изображении надписей на отдельном текстовом слое, и настройте его параметры: тип шрифта, размер, цвет (контрастный к фону). Остальные параметры можно оставить по умолчанию.

Напишите текст и выровняйте его с помощью инструмента ^ Move (Перемещение). Обратите внимание на слои: у вас получилось два слоя: слой фона (Background) и слой надписи.

На панели Layers (Слои), щелкнув правой кнопкой мыши по слою с текстом, выберите команду Blending Options (Параметры смешивания).

В открывшемся диалоговом окне выберите функцию Drop Shadow (Тень) (поставьте галку в ячейку).

Выберите команду ^ Bevel and Emboss (Фаска и рельеф). Настройте параметры функции Bevel and Emboss (Фаска и рельеф), дважды щелкнув по ее названию: Style (Стиль), Direction (Направление), Angle (Угол), Altitude (Глубина), Shadow Mode (Тень).



Обрежьте лишний фон заголовка с помощью инструмента Crop (Обрезка).

Сохраните полученное изображение в папке site/pic под именем zag.gif . Для сохранения выберите команду File/Save For Web (Файл/Сохранить для Веб), используйте 8 или 16 цветов.

Сохраните промежуточный файл в формате PSD.


^ Рисование кнопок для панели навигации
С помощью программы Adobe Photoshop можно создать кнопки для панели навигации сайта. Этот процесс можно разделить на два этапа: подготовка шаблона кнопки и написание текста.

Замечание. При работе в программе Adobe Photoshop сохраняйте промежуточные результаты работы в формате PSD, этот формат не склеивает слои. Вы можете продолжить работу с данным файлом для создания однотипных надписей, таким образом соблюдая единство стиля сайта..

Для того, чтобы создать шаблон:

Создайте новый холст с помощью команды ^ File/New (Файл/Создать). Установите следующие размеры: Width (Ширина) – 120 пикселей, Height (Высота) – 30 пикселей.

Используя инструмент Paint Bucket (Заливка), залейте кнопку тоном, более светлым, чем тон вашего основного цвета.

На панели Layers (Слои), на слое Background (Фон), нажмите правую кнопку мыши и выберите Duplicate Layer ( Дубликат слоя). В диалоговом окне нажмите на ОК.

На вновь созданном слое Background Copy нажмите правую кнопку мыши и выберите команду Blending Options (Параметры смешивания).

В открывшемся диалоговом окне Layer Style ( Стили слоя) выберите функцию Bevel and Emboss (Фаска и рельеф). Таким образом, вы придадите вашей кнопке объем.

Настройте параметры (угол, глубина, цвет тени) функции ^ Bevel and Emboss (Фаска и рельеф) и нажмите на ОК. Сохраните промежуточный результат в формате PSD с именем kn.psd.



Замечание. Давайте именам файлов осмысленные названия. Можно использовать русские слова ( в сокращенном варианте), но писать их лати