Инструментальные средства

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

Инструментальные средства для верстки веб-страниц бывают двух типов: текстовые и визуальные.

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

Большинство текстовых редакторов для верстки веб-страниц разрабатываются на основе языка программирования HTML (Hypertext Markup Language). Он предназначен для создания гипертекстных документов, формат которых не зависит от ЭВМ или используемой операционной системы. HTML-документы являются SGML-документами (Standard Generalized Markup Language) с семантикой, пригодной для представления информации от широкого круга доменов. Web-страница представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). HTML-документ кроме текста может содержать гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их. Web-страница содержит вставки в виде графики, анимации, видеоклипов и музыки. Для просмотра Web-страниц можно использовать браузеры Microsoft Internet Explorer, NetScape Navigator, Opera. [59, c.28]

Язык HTML позволяет:

1) Создавать и редактировать Web-страницы.

2) Редактировать документы HTML, полученные из интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.).

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

Существуют три основных способа создания документов HTML:

1) Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью браузера.

Технология этого способа создания Web-страницы такова: в редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm. Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы вовремя ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или в виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку «Обновить» в панели инструментов Internet Explorer.

2) Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др.

3) Использование редактора Microsoft Office Word, где создается текст документа, который затем конвертируется в HTML-формат.

Развитием языка HTML является XML, а также CSS (Cascading Style Sheet) и использование языка сценариев JavaScript. Применение стилевого оформления и CSS в частности позволяет существенно уменьшить размер HTML-файлов, сокращая нагрузку на каналы связи. С помощью каскадных таблиц стилей определяется внешний вид документа: шрифт, разбивка на абзацы, цвет фона и шрифта, причем свой вариант отображения в окно браузера с их помощью можно установить для содержимого каждого из контейнеров (тегов).

Язык CSS является языком высокого уровня и использует стандартную терминологию, принятую в электронной полиграфии.

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

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

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Язык позволяет разрабатывать как серверные приложения, так и приложения клиентские. Первые выполняются на Web-сервере, а вторые – браузером клиентского компьютера. Для обоих типов приложений используется общее ядро, включающее стандартные объекты и конструкции, и дополнения для конкретных приложений.[60, c.384]

Язык JavaScript используется на клиентской стороне для создания HTML-документов с помощью сценариев, в том числе совместно с CSS (каскадными таблицами стилей), для оперативной проверки HTML-форм до их передачи на сервер для последующей обработки и для взаимодействия с пользователем в процессе выполнения приложений этого языка. Чтобы браузер смог отобразить разработанную Web-страницу именно в том виде, в каком она задумывалась, на странице обычно помещают вызов функции JavaScript для идентификации типа используемого браузера и его версии. [60, c.386]

Встраивание сценариев JavaScript в HTML-страницу можно осуществить одним из четырех способов:

− заданием операторов этого языка внутри контейнера <Script> языка HTML;

− заданием имени файла языка JavaScript в параметре 5КСтега <Script>;

− использованием выражений языка JavaScript в качестве значений параметров HTML-тегов;

− путем определения обработчика событий в теге HTML.

HTML предоставляет разработчику  следующие возможности:

− публиковать в реальном масштабе времени документы с заголовками, текстом, таблицами, рисунками, фотографиями и т.д.;

− одним щелчком клавиши мышки извлекать документы через гипертекстные связи;

− конструировать формы для осуществления удаленных операций, для заказа продуктов, резервирования билетов или поиска информации;

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

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

HomeSite 4.5.2 – текстовый редактор, снабженный большим количеством  приспособлений, которые значительно  упрощают работу программистов  и предоставляют неограниченные  возможности для конструирования. Объемный дистрибутив редактора  включает в себя редактор TopStyle для редактирования таблиц CSS. Вторым  компонентом, который существует  вне самого HomeSite, является Plug-In, позволяющий  прямо из проводника Windows связываться  с удаленными FTP-хостами для загрузки  файлов. Т.е. в проводнике между  «Панелью управления» и «Назначенными  заданиями» возникает пункт «Allaire FTP & RDS», и остается только добавить  туда координаты собственных  сайтов для FTP-загрузки.[62, c.27]

Весьма мощным инструментом в руках разработчика может стать Visual Tools Markup Language и WizML – Wizard Markup Language, язык разметки инструментов и язык разметки мастеров, соответственно. Это – инструменты, позволяющие пользователю HomeSite изменять встроенные в    HomeSite диалоги и мастера для редактирования тегов HTML, а также создавать свои собственные. Каждый инструмент представляет собой специально разработанный для этих целей язык, для работы с которым в HomeSite встроен специальный редактор – Allaire Visual Tools.[63, c.62]

Для работы с собственно HTML предлагается несколько разных инструментов. Во-первых, – Tag Chooser («выбиратель тегов»). В небольшом окне отображен древовидный список тегов, причем теги скомпонованы не только по назначению, но и по степени «свежести» – теги устаревшие, а также поддерживаемые не всеми браузерами приведены в отдельных подрубриках. Кроме того, здесь же расположены теги для работы не только с HTML, но и с HDML, WML, и многими другими языками. Во-вторых, редактировать можно при помощи стандартного редактора тегов HomeSite. Для его вызова имеется панель с множеством закладок по каждой теме – шрифты, формы, таблицы и т.д.

Наиболее значимая и продуманная часть HomeSite – окно для редактирования страницы. Большие функциональные возможности предоставляет панель инструментов с левой стороны окна. Она содержит небольшие кнопочки для закрытия текущего документа, вызова списка открытых файлов, включения/выключения переноса слов по границе окна и т.д. Не менее важную роль выполняют и остальные инструменты: поиск с заменой по одному или нескольким файлам, менеджер проектов, кнопка для просмотра документа в любом браузере из списка, автоматическое форматирование кода, вставка спецсимволов из панели, менеджер документа и всего проекта в целом, возможность «свернуть» любую часть документа в серую панель на листе, «взвешивание» документа, проверка корректности HTML и т.д.

Веб-редактор TextPad – программа, по сути, весьма похожая на Блокнот, однако разработчики специально предусмотрели некоторые удобства для того, чтобы писать код HTML (а также языков Java, С, C++, Perl и еще некоторых). Это выражается в том, что при написании HTML -документа все теги автоматически подсвечиваются синим цветом, их атрибуты – темно-синим, а значения атрибутов – зеленым (цвета можно настроить по собственному желанию, так же, как и шрифт).

В отличие от Блокнота, TextPad – редактор многооконный. В нем можно открыть сразу несколько документов и работать, легко переключаясь между ними с помощью списка в левой части окна или вкладок в нижней части.

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

Кроме списка тегов TextPad предоставляет также возможность выбирать из списка специальные символы (список HTML Characters), а также, если потребуется, любой управляющий символ, например символы псевдографики DOS и другие.

Завершив краткий обзор возможностей программы TextPad, рассмотрим другую программу для написания HTML-кода – Arachnophilia. Как и в предыдущем случае, программа автоматически подсвечивает синим цветом теги и атрибуты, а значения атрибутов – зеленым, что улучшает зрительное восприятие. В программе Arachnophilia предусмотрена автоматизация ввода тегов HTML. В нижней части окна имеются кнопки, каждая из которых открывает соответствующую кнопочную панель. На этих панелях расположены кнопки для быстрого ввода тегов. [64, c.317]

Нажатие некоторых кнопок вызывает появление диалоговых окон. Например, нажав на кнопку Color (Цвет), можно открыть стандартное диалоговое окно выбора цвета, а с помощью кнопки TableWiz (Мастер таблиц) открывают диалоговое окно Table Wizard (Мастер таблиц), средствами которого можно предварительно задать количество строк и столбцов в таблице, а также определить ее ширину, цвет линий и некоторые другие параметры.

Отличительной особенностью программы является возможность легкого просмотра веб-страницы в различных браузерах, для чего в меню Preview (Предварительный просмотр) предусмотрен пункт Identify Browser (Указать Браузер). Здесь можно назначить до шести различных браузеров, в каждом из которых легко открыть создаваемый HTML-файл для просмотра.

В программе Arachnophilia существует множество дополнительных полезных функций. Например, в меню Selection (Фрагмент) есть команда Find/Replace/Count (Поиск/Замена/Пересчет), которая позволяет быстро найти или заменить нужные слова в выделенной области. Команда Tag Delimiters (Ограничители тегов) из того же меню позволяет преобразовать угловые скобки, являющиеся общепринятыми ограничителями тегов HTML, в специальные символы &lt и &gt, что необходимо, когда надо показать код HTML на самой веб-странице.

Вторую группу, обладающую большей интерактивностью и доступностью, составляют визуальные редакторы. Визуальные редакторы позволяют работать с самой web-страницей «как она есть», в режиме WYSIWYG [61, c.608] (What You See Is What You Get – То, что ты видишь, то и получаешь). Редактирование и форматирование текстов, вставка рисунков, таблиц, гиперссылок и других элементов происходит как в обычном текстовом редакторе, а сама программа формирует (генерирует) соответствующий HTML-код. Кроме средств визуального редактирования эти web-редакторы одновременно предоставляют доступ к получившемуся HTML-коду.

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

К числу современных визуальных редакторов относятся Adobe Dreamweaver, Microsoft FrontPage, Hotdog, Actual Drawing 3.2 и другие.

Adobe Dreamweaver – профессиональный  редактор HTML для визуального создания  и управления сайтами, учебными  продуктами и приложениями сети. Dreamweaver включает в себя большое  количество инструментов и средств  для редактирования и создания  сайта или страницы: HTML, CSS, JavaScript, отладчик JavaScript, редакторы кода (просмотр  кода и инспектор кода), что  позволяет редактировать JavaScript, XML и  другие текстовые документы. Технология Roundtrip HTML импортирует документы HTML без  переформатирования кода. Возможность  визуального редактирования в Dreamweaver также позволяет быстро создавать  или менять дизайн проекта  без написания кода. Dreamweaver полностью  настраиваемый. Функциональные возможности  позволяют создавать свои собственные  объекты и команды, изменять «горячие»  клавиши и писать код JavaScript, чтобы  расширять возможности Dreamweaver новыми  свойствами, инспекторами свойств  и новыми отчетами о сайте.[65, c.235]

Прикладная программа Microsoft Office FrontPage – это визуальный HTML-редактор для быстрого создания электронной среды. Язык HTML является основным языком программирования Web – среды. С помощью FrontPage, можно создавать структуру сайта, формировать страницы, добавлять интерактивные средства и загружать файлы на сервер в сети Интернет.

Web–страницы основаны  на языке описания гипертекстовых  документов HTML (Hypertext Markup Language).

Для того чтобы создать сайт при помощи FrontPage, нет необходимости учить HTML. FrontPage позволяет довольно легко набрать текст, который можно поместить на Web – страницу, расположить в нужных местах рисунки. Используя FrontPage, можно создавать эффекты, для которых обычно требуются скрипты или программы DHTML.