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

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

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

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

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

Создание сайта подразделяется на следующие этапы:

а) подготовительный - осмысление необходимости создания образовательного сайта и принятие решения о его создании;

б) проектировочный - выбор структуры сайта, названия, дизайна, подбор материалов;

в) практический - создание главной страницы с подразделами, выбор картинки, выбор подразделов;

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

Рассмотрим более подробно каждый этап.

Этап 1 - принятие решения о создании сайта.

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

Этап 2 - проектирование.

Выработка концепции - очень важный этап создания сайта.

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

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

Этап 3 - практический - наполнение сайта информацией, кодирование.

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

Этап 4 - заключительный.

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

2.3 Техническая реализация программного продукта

2.3.1 Интерфейс программы Adobe Dreamwewer CS 3

Электронный учебно-методический комплекс по дисциплине «объектно-ориентированное программное обеспечение» создается в программе Adobe Dreamwewer CS3.

При загрузке Dreamweaver появляется стартовое окно (рисунок 1), позволяющее выбрать тип нового создаваемого документа (HTML, ColdFusion, PHP и др.), либо создать документ по готовым образцам (CSS Style Sheets, Framesets и др.), а также открыть недавно использовавшиеся документы. Кроме этого имеются ссылки на интернет-ресурсы: сайт Dreamweaver MX Exchange, обзор программы Dreamweaver и справочная информация по Dreamweaver MX.

Рабочая область Dreamwewer настраивается под различные стили работы и уровни знаний. Вот некоторые наиболее используемые компоненты:

- окно документа отображает текущий документ по мере его создания и редактирования;

- панель инструментов Документ содержит кнопки, представляющие разные варианты отображения в окне документа (такие как представления Дизайн или Код), различные параметры просмотра и некоторые распространенные операции, такие как предварительный просмотр в браузере;

- панель инструментов содержит кнопки и всплывающие меню, которые позволяют просматривать окно Документ различными способами, устанавливать опции вида, и обращаться к некоторым операциям, например, просмотр в браузере;

- контекстное меню позволяет быстро обращаться к полезным командам, имеющим отношение к текущему выбору или области. Чтобы отобразить контекстное меню, необходимо щелкнуть правой кнопкой мыши на элементе в окне;

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

- инспектор свойств позволяет увидеть и изменить множество свойств выбранного объекта или текста. Каждый объект имеет различные свойства. Инспектор свойств не раскрывается по умолчанию в макете рабочего пространства.

Рисунок 1 - Стартовое окно программы

Dreamwewer обеспечивает использование многих других инспекторов, панелей и окон, которые не показаны здесь.

Чтобы открыть окна Dreamweaver, инспекторы и панели, используют меню Окно. Отметка рядом с элементом в меню Окно указывает, что данный элемент в настоящее время открыт (хотя он может быть скрыт позади других окон). Чтобы отобразить элемент, который в настоящее время не открыт, нужно выбрать название элемента в меню. Если панель или инспектор отмечен, но не появляется, выбирают Окно > Показать панели.

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



Рисунок 2 - Окно сайта

Окно документа (рисунок 3) предназначено для непосредственного редактирования страницы. Оно имеет три режима работы: код, код и дизайн, дизайн, причем второй - очень удобен для изучения HTML.

Рисунок 3 - Окно документа

Панель инструментов окна документа содержит:

- кнопки переключения режимов окна;

- поле ввода заголовка страницы;

- File Management - для публикации сайта в Сети;

- кнопку просмотра во внешнем браузере (клавиша F12);

- кнопки управления редактором: обновление страницы, описание тега, установка закладок, настройка окна;

- поле ввода заголовка страницы;

Строка состояния окна документа содержит:

- кнопки для выделения тегов;

- настройка размера области просмотра;

- размер документа и время его загрузки на скорости, определенной в настройках;

- панель быстрого доступа до: окна сайта, менеджера объектов, двух окон стилей, окна поведения объектов, окон истории команд и инспектора кода.

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

Панель свойств (рисунок 4) размещается в нижней части экрана, вызывается сочетанием клавиш Ctrl+F3 и предназначена для настройки всех параметров объектов, выделенных в окне редактора. Кнопка в правом нижнем углу панели позволяет уменьшить ее размеры.

Рисунок 4 - Панель свойств

Окно сайта вызывается клавишей F8. Схема сайта открывается сочетанием клавиш Alt + F8. Нельзя перетаскиванием изменять структуру сайта, однако, создавать ссылки можно, перетаскивая значок «Выберите Файл» из окна свойств к нужному файлу в окне сайта. Можно выполнять и обратное действие для создания ссылки - перетаскивать файлы из окна сайта в поле ввода ссылки в окне свойств при выделенном объекте в окне редактора. Кнопка в левом нижнем углу окна сайта позволяет уменьшить его размеры.

Dreamwewer полностью настраиваемый. Можно использовать Dreamwewer, чтобы создавать свои собственные объекты и команды, изменять «горячие» клавиши и расширять возможности Dreamwewer новыми свойствами, инспекторами свойств и новыми отчетами о сайте. Эта программа создает максимальные условия для творчества и является наиболее эффективным средством проектирования Web-страниц.

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

Самый первый этап создания сайта - это дизайн. Для создания макета страницы и заголовка используется программа Adobe Photoshop. В данной программе рисуем макет страницы и heаder. Панель навигации располагаем в левом углу, а основной текст - по середине страницы. Цветовая гамма сайта - оттенки синего цвета. Дизайн страницы представлен в приложении В.

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

Далее необходимо создать еще 3 страницы (на них будет ссылаться меню сайта):

- теория;

- уроки;

- проверка знаний.

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

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

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

Список уроков с выходом на практику (располагаются на странице Уроки):

- начальные сведения о оболочке Delphi 7;

- основная форма и её свойства;

- объекты построчного вывода информации;

- объекты TPanel, TRadioButton, TListBox, TComboBox;

- группировка объектов;

- создание главного меню программы;

- дополнительные кнопки Delphi, использование массивов;

- текст и закладки;

- работа с анимацией и ползунковой настройкой;

- простейший файловый менеджер;

- улучшенный файловый менеджер (С возможностью запуска файлов);

- начальные сведения при работе с графикой;

- начальные сведения при работе с БД;

- управление данными при работе с БД;

- вывод данных при работе с БД;

- создание отчетности в Excel;

- разграничение доступа через подключение к базе данных MS Access;

- работа с сетью на примере Sockets. Клиент;

- работа с сетью на примере Sockets. Сервер;

- Delphi работа с сетью на примере Sockets. Потоки;

Теоретические материалы:

- методология объектно-ориентированного программирования;

- начальные сведения о Delphi;

- языки объектно-ориентированного программирования;

Практические занятия:

- создание приложения с активными компонентами;

- создание приложений с использованием навыков программирования интерфейса в среде Delphi;

- создание приложений с использованием навыков программирования интерфейса в среде Delphi;

- создание приложений с использованием навыков программирования интерфейса в среде Delphi;

- освоение графических возможностей, построение плоских фигур;

- математические ребусы с частично зашифрованной записью;

- математические ребусы с полностью зашифрованной записью;

- подключение из приложения Delphi к своей БД по индивидуальному заданию. Редактирование интерфейса;

- подключение из приложения Delphi к своей БД по индивидуальному заданию. Формирование отчетов.

Готовый учебно-методический комплекс по дисциплине объектно-ориентированное программирование весит в полном объеме 24,4 Мб, в архивированном - 13 Мб. Режим работы приложения - интерактивный.

2.4 Перспективы развития

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

сайт программирование учебный образовательный

Заключение

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

В процессе разработки комплекса были решены следующие задачи:

- разработан интерфейс программы;

- создан дизайн страниц сайта;

- упорядочен материал учебного курса «Объектно-ориентированное программирование»;

- разработаны тестирующие материалы для самопроверки.

Разработанное электронное учебно-методическое пособие «Объектно-ориентированное программирование» призвано помочь студентам освоить азы программирования на объектном языке (в частности Delphi).

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

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

Электронное учебно-методическое пособие поможет преподавателю объектно-ориентированного программирования правильно построить свою педагогическую деятельность и эффективно организовать процесс обучения.

Список источников

1 Стандарт организации Учебно-методический комплекс по дисциплине. Разработка, публикация, сопровождение. - Томск: Томск. гос. ун-т систем упр. и радиоэлектроники, 2010. - 64 с.

2 Comparison of HTML editors, 6.06.2012: [Wikipedia] http://en.wikipedia.org/wiki/Comparison_of_HTML_editors

3 А.В. Белозубов, Д.Г. Николаев. Основы работы с HTML-редактором Abobe Dreamweaver CS3. Учебно-методическое пособие. - СПб.: СПбГУ ИТМО, 2007. -112 с.

4 Осипова Оксана. Самоучитель Adobe Dreamweaver CS3. - СПб.: «БХВ-Петербург», 2008. -400 с.

5 Стив Макконнелл. Совершенный код. Практическое руководство по разработке программного обеспечения. - СПб: Питер, 2005. - 896 с.

6 Дронов В. HTML 5, CSS 3 и Web 2. 0. Разработка современных Web-сайтов. - СПб.: BHV, 2010. - 416 с.

7 Осипова О. Самоучитель Adobe Dreamweaver CS3. - СПб: BHV, 2008. - 400 с.

8 Токарев С.А. Самоучитель Macromedia Dreamweaver MX. - СПб.: BHV, 2003. - 544 с.

9 Крамер Э. HTML: наглядный курс Web-дизайна. - М.: Диалектика, 2001. - 304 с.

10 Купер А. Основы проектирования взаимодействия. - М.: Символ-Плюс, 2009. - 688 с.

Размещено на Allbest.ru