Разработка электронного учебного пособия по Visual Basic 6.0

    Графические редакторы Web-страниц. Конкретная работа по созданию Web-страниц или Web-узла будет зависеть от того, какое именно программное обеспечение вы для этого выберете. Графические Web-редакторы позволяют компоновать страницу в режиме, близком к WYSYWYG («что видишь, то и получишь»), и формируют за вас весь код. Это очень упрощает работу.

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

    Front Page-2000. Front Page-2000 фирмы Microsoft позволяет стать настоящим Web-мастером. Этот пакет поддерживает все новейшие мультимедийные технологии работы с анимированной графикой, позволяет разрабатывать приложения и управляющие элементы ActiveX и Java. Кроме того, он предлагает большой набор модифицируемых шаблонов и множество оригинальных эффектов.

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

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

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

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

    Таким образом, в данном пункте было рассмотрено  понятие языка гипертекстовой разметки HTML, его возможности и практическое применение. Так же дополнительно был рассмотрен один из популярных графических редакторов web-страниц – Microsoft Office Front Page.

 

2.2.2 Алгоритм создания страницы в HTML

    Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.

    Рассмотрим, как создаются Web-сайты, на примере разработки электронного учебного пособия по языку объектно-ориентированного программирования Visual Basic 6.0.

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

Пусть наш сайт кроме главной страницы будет содержать:

• страницу  «Вводные понятия о Visual Basic»,  содержащую  понятия о языке программирования;

• страницу «Интегрированная среда разработки»;

• страницу «Панель инструментов»;

• страницу «Окна программы». 

Форматирование  текста и размещение графики

    Создание  структуры Web-страницы. Приступим к созданию титульной Web-страницы сайта. Для этого используем привычный и достаточно удобный для этих целей текстовый редактор Блокнот. Создание Web-сайта «Компьютер» 1. Открыть окно текстового редактора Блокнот.

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

    HTML-код страницы помещается внутрь контейнера <HTML></HTML>. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и   содержание.

    Заголовок Web-страницы заключается в контейнер <HEAD></HEAD> и содержит название документа и справочную информацию о странице, которая используется браузером для ее правильного отображения.

Название  Web-страницы содержится в контейнере <ТIТTLE></TITLE> и отображается в строке заголовка браузера при просмотре страницы. Назовем нашу Web-страницу «Учебник»:

<HEAD>

<Т1ТLЕ>Учебник</ТIТLЕ> </HEAD>

Основное  содержание страницы помещается в контейнер <BODY></BODY> и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и так далее. Поместим для начала на страницу текст «Электронный учебник»:

<BODY>

    Электронный учебник </BODY> Созданную Web-страницу необходимо сохранить в виде файла. Принято сохранять титульный файл сайта, то есть тот, который первый загружается в браузер, под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html.

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

    Необходимо  различать имя файла index.htm, то есть имя, под которым Web-страница хранится в файловой системе, и собственно имя Web-страницы «Учебник», которая высвечивается в верхней строке окна браузера и в первую очередь анализируется поисковыми системами. Имя Web-страницы должно в максимальной степени соответствовать ее содержанию.

3. В окне приложения Блокнот ввести HTML-код Web-страницы. Сохранить файл под именем index.htm в папке сайта. Загрузить этот файл в окно браузера для просмотра.

 <HTML> <HEAD>

<ТIТLЕ>Учебник</ТIТLЕ>   

</HEAD>

<BODY> Электронный учебник </BODY> </HTML>

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

Размер  шрифта для имеющихся в тексте заголовков задается тэгами от <Н1> (самый крупный) до <Н6> (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом:

<Н1>Электронный учебник</Н1>

    Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру. Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN= "right", а по центру — ALIGN="center":

<Н1   ALIGN="center">Электронный учебник</Н1>

С помощью  тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE= "Arial"), атрибут SIZE — размер шрифта (например, SIZE=4), атрибут COLOR — цвет шрифта (например, COLOR="blue").

    Значение  атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и так далее), либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые щестнадцатеричные цифры задают интенсивность красного , две следующие — интенсивность зеленого  и две последние — интенсивность синего  цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF. Легко догадаться, что синему цвету будет соответствовать значение   "#0000FF".

Таким образом, задать синий цвет заголовка  можно с помощью тэга FONT с атрибутом COLOR:

<FONT   COLOR="blue ">

<H1   ALIGN="center">Электронный учебник</Н1> </FONT>

    Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга <HR>.

    Разделение  текста на абзацы производится с помощью  контейнера <Р></Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания.

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

<Р   ALIGN="left"> Этот учебник - содержит всю основную и необходимую информацию для изучения визуального языка программирования Visual Basic. </Р><Р ALIGN="right"> Здесь вы познакомитесь с интерфейсом самой популярной системы программирования. Удачи в обучении! </Р>

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

3. В  окне приложения Блокнот в  контейнер <body> вставить последовательность тэгов и просмотреть результат в браузере:

< FONT   COLOR="blue"> <H1   ALIGN="center"> Электронный учебник по Visual Basic. </Н1> </FONT> <HR>

<P  ALIGN="left"> Этот учебник - содержит всю основную и необходимую информацию для изучения визуального языка программирования Visual Basic. </P> <P  ALIGN= “right”> Здесь вы познакомитесь с интерфейсом самой популярной системы программирования. Удачи в обучении! </P>

Вставка изображений. На Web-страницы обычно помещают изображения, чтобы сделать их визуально более привлекательными. На Web-страницах могут размещаться графические файлы трех форматов — GIF, JPG и PNG. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office.

    На  титульной странице создаваемого сайта уместно разместить изображение того объекта, которому посвящен сайт (в нашем случае — окно языка программирования Visual Basic).

4. Для  вставки изображения Используется  тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:

<IMG   SRC="VB.gif">

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

<IMG   SRC="C:\computer\VB.gif">

Если  файл находится на удаленном сервере  в Интернете, то должен быть указан URL-адрес этого файла. Например:

<IMG   SRC="http://www.server.ru/VB.gif">

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

Поясняющий  текст выводится с помощью  атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке: