ПЛАН
1.
Создание интернет-страницы. Редактор FrontPage
1.1.
Характеристика программы FrontPage
1.2.
Создание Web - страниц
2.
Создание интернет-страницы. Редактор HTML
2.1.
Характеристика языка HTML
2.2. Создание
Интернет-страницы средствами Word
Литература
1.
Создание интернет-страницы. Редактор FrontPage
1.1. Характеристика программы FrontPage
Прикладная
программа FrontPage – это визуальный html-редактор для быстрого создания
сайта. Язык HTML является основным языком программирования Web - среды. С
помощью FrontPage, можно создавать структуру сайта, формировать страницы, добавлять
интерактивные средства и загружать файлы на сервер в сети Интернет.
Web–страницы
основаны на языке описания гипертекстовых документов HTML (Hypertext Markup
Language). В HTML для определения содержания и формата гипертекстовых
документов используются команды, которые называются тегами (tags). HTML –
страницы представляет собой документы в обычном текстовом формате, содержащие
специальные команды форматирования (теги HTML).
Для того чтобы
создать сайт при помощи FrontPage, нет необходимости учить HTML. FrontPage
позволяет довольно просто набрать текст, который можно поместить на Web -
страницу, расположить в нужных местах рисунки. Используя FrontPage, можно
создавать эффекты, для которых обычно требуются скрипты или программы DHTML. Сайт
или Web-узел – это набор связанных между собой близких по смыслу Web-страниц и
файлов. В программе FrontPage существуют мастера, которые позволяют создавать
сайт, и шаблоны или набор предварительно разработанных текстовых и
графических форматов, на основе которых могут создаваться новые веб - страницы.
Мастера и шаблоны FrontPage позволяют создавать сайты различных типов. На
каждом сайте существует одна Web-страница, которая называется главной или
домашней. Домашняя страница – первая Web-страница, на которую попадает
посетитель сайта. Используя навигацию или гиперссылки, пользователи смогут попасть
и на другие страницы сайта.
Обычно сайт
размещается на Web-сервере – компьютере, который предоставляет доступ к
Web-страницам посетителям сайта. FrontPage позволяет создавать сайт непосредственно
в файловой системе компьютера пользователя, а затем, когда он будет готов,
опубликовать его на Web-сервере.
Окно приложения
FrontPage
После запуска
программы FrontPage (Пуск – программы – FrontPage) на экране появится окно приложения,
в котором отображается новая страница (нов_стр_1.htm). В области задач отображается
панель Приступая к работе.
Окно приложения
FrontPage состоит: из строки заголовка, строки меню, панелей инструментов
редактирования и форматирования, кнопок быстрого выбора тега (для редактирования
и ввода тегов), ярлычков вкладок выбора страниц (для перехода между страницами),
рабочего окна, в котором отображается новая страница, панели рисования, кнопок
режимов просмотра, индикатора ожидаемого времени загрузки страниц при скорости
56 кбит/с, индикатора размера страниц, области задач.
В редакторе
FrontPage можно пользоваться одним из четырех режимов просмотра:
"Конструктор", "Код", "С разделением" и
"Просмотр". В режиме "Конструктора" как в любом текстовом
редакторе можно в визуальном режиме создавать, редактировать и форматировать
страницу, т.е. вводить текст, добавлять рисунки, таблицы. При этом теги языка
HTML автоматически добавляются в фоновом режиме, но кодировка HTML на экране не
отображается.
В режиме
"Код" на экране будет отображаться вся кодировка и можно напрямую
редактировать код HTML, а также вводить новые коды. На рисунке представлен HTML
– код новой пустой страницы в редакторе FrontPage .
В
режиме "С разделением" - на экране отображается Web-страница одновременно
в режиме Код и в режиме Конструктор. В режиме просмотра Web–страница
имеет вид аналогичный ее отображению в Web–браузере.
Команды,
которые предназначены для работы с Web–страницами и Web–узлами, расположены в
меню Вид редактора FrontPage:
- Страница – это
режим просмотра и разработки страницы.
- Папки –
отображается структура папок текущего сайта.
- Удаленный узел –
узел, который находится на сервере сети Интернет.
- Отчеты –
предоставляется сводка об Web – узле.
- Переходы –
отображается структура переходов между страницами сайта.
- Гиперссылки –
открывает список ссылок текущей страницы.
- Задачи – открывает
список задач для текущего сайта
Создание новой пустой Web-страницы
Если
при открытии окна приложения FrontPage в нем отображается пустая страница, то
разработку веб - страницы можно осуществлять на базе этой страницы. Если при
открытии редактора FrontPage, отображается пустое главное окно, то для создания
новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в
области задач Пустая страница. В окне приложения появится пустая страница.
Далее необходимо осуществить разработку страницы, т.е. выполнить разметку
(структуру) страницы, ввести текст, рисунки и т.д.
Создание веб–страницы на основе шаблонов FrontPage
Создать
новую страницу можно также на базе одного из шаблонов. Для этого необходимо
выбрать команду «Другие шаблоны страниц» в области задач. На экране будет
отображаться окно диалога Шаблоны страниц, в котором представлены различные шаблоны
страниц по категориям.
Создание
веб–страницы на основе имеющихся Web-страниц в ПК
Создать
веб–страницу можно и на базе имеющихся, на компьютере веб–страниц. Для этого
необходимо в области задач выбрать команду «Из имеющейся страницы» и в
появившемся окне диалога выбрать требуемую страницу. Далее можно произвести необходимые
изменения на странице и сохранить ее под другим именем.
Создание сайта
в редакторе FrontPage
Создание нового
пустого сайта или создание веб-узла без содержимого
Для создания нового пустого сайта надо выполнить команду Файл/Создать и выбрать
в области задач команду «Другие шаблоны веб–узлов». Откроется окно диалога
Шаблоны веб–узлов, в котором необходимо выделить Пустой веб–узел и щелкнуть ОК.
В окне приложения FrontPage будет отображаться веб - узел, который представлен
на рисунке.
Для
создания пустой домашней страницы в новом веб-узле необходимо перейти в режим
Переходы и щелкнуть на кнопке Новая страница на панели Переходы, в рабочем поле
появится домашняя страница (для создания домашней страницы можно также использовать
контекстное меню).
Дважды щелкните на домашней странице левой кнопкой мыши, и она откроется
в режиме конструктора для редактирования (страница - index.htm).
Далее
можно осуществить разработку домашней страницы (создать разметку или структуру
страницы, ввести текст, рисунки и т.д.), а затем к домашней странице можно
добавить страницы в режиме Переходы. Для этого в режиме Переходы выделите домашнюю
страницу и щелкните на кнопке Новая страница на панели Переходы или примените
контекстное меню. Будет добавлена Новая страница 1, которая представлена на
рисунке. Далее добавьте столько страниц, сколько необходимо для сайта, затем
страницы можно переименовать и изменить порядок их следования. Далее на каждую
страницу нужно ввести содержание или контент (текст, таблицы, картинки и т.д.),
в результате получим сайт.
Создание сайта на основе шаблона редактора FrontPage
Для
создания сайта на основе шаблона выполните Файл/Создать и в области задач
щелкните команду Веб – пакеты, откроется окно диалога Шаблоны веб–узлов.
Выберим требуемый
шаблон или мастера для создания нового сайта. Созданный сайт имеет разметку и дизайн,
но в нем отсутствует контент. Далее в страницы этого сайта необходимо ввести
соответствующий текст, рисунки, скрипты, счетчики и другие элементы сайта.
1.2. Создание Web - страниц
Создание
новой пустой Web-страницы.
Если
при открытии окна приложения FrontPage в нем отображается новая пустая
страница, то разработку веб - страницы можно осуществлять на базе этой страницы.
Если при открытии редактора, отображается пустое главное окно, то для создания
новой пустой страницы необходимо выполнить команду Файл/Создать и выбрать в
области задач "Пустая страница".
В окне
приложения появится новая пустая страница. Сохраняем страницу, но перед тем,
как сохранить страницу в окне «Сохранить» создаем папку, например EN101, в которой
создаем вложенную папку images для рисунков, а затем сохраняем страницу в папке
EN101. Имя страницы назначаем - index, что означает домашняя или главная
страница. Редактор сохраняет страницу с расширением .htm. Таким образом, в
папке EN101, будет находиться вложенная папка images и файл index.htm.
Рисунки для веб -
страницы должны быть заранее подготовлены и вставлены в папку images, причем
имя рисунка должно состоять из символов латинского алфавита. Скопируем в
папку images рисунки для создания веб – страницы, посвященной изучению
английского языка в Интернет.
Далее необходимо
осуществить разработку страницы. Разработка страницы начинается с ее разметки.
Для разметки страницы используются таблицы, можно применить Макеты страницы,
которые расположены на панели задач "Макеты таблицы и ячейки" в области
задач. Установим в области задач "Макетные таблицы и ячейки"
Далее щелкаем на требуемом макете таблицы, в результате чего получим размеченную
страницу, которая представлена на рисунке.
1.
Устанавливаем ширину (в точках или процентах) странички равную 900 точек
(ширина первого столбца – 213 точек, ширина второго столбца – 687 точек). Для
этого подводим указатель мыши к верхней границе и когда от примет вид наклоненной
влево стрелки щелкаем левой кнопкой мыши, появятся раскрывающиеся списки,
раскрыв которые можно изменить ширину столбца.
2.
Выравниваем страничку по центру. Устанавливаем размер границы, цвет. Для этого
щелкаем на раскрывающийся тег таблицы <table> (на панели быстрый вызов
тега) и выбираем команду «Свойства тега», затем в открывшемся окне
диалога «Свойства таблицы» устанавливаем: Выравнивание по центру, Границы:
размер – 1 и цвет – темно-синий.
3. В
ячейках таблицы я установил цифры: 1, 2, 3, 4 (эти цифры будут заменены содержанием
ячеек), чтобы можно было легко ориентироваться. Итак, в первую ячейку можно
установить рисунок ("Вставка / Рисунок / Из файла", выбираем рисунок
из папки images). Вставим, например, логотип компании EN101, которая ведет
курсы дистанционного обучения иностранных языков в Интернет.
4.
Устанавливаем фон ячейки 1 и 2 аналогичный фону логотипа (существуют приложения
для подбора цвета, например, «Цветик ver. 5.1») код цвета - dee7ef. Для заливки
ячейки цветом необходимо щелкнуть на раскрывающийся тег ячейки <td> (на
панели быстрый вызов тега) и выбрать команду «Свойства тега», затем в открывшемся
окне диалога «Свойства ячейки» устанавливаем: цвет фона.
5.
Во вторую ячейку помещаем заголовок сайта, например «Английский язык в Интернет».
В режиме конструктора вводим текст. Выбираем шрифт Verdana (наиболее распространенный
шрифт для веб - страниц), размер 24 пт, цвет темно-синий (код цвета: 000080),
выравнивание по центру.
6. В
ячейке 3 размещаем навигацию, для перехода на другие (будущие) странички.
Вводим текст НАВИГАЦИЯ шрифтом Verdana, размер шрифта 12 пт, выравнивание
по центру. Далее вводим текст (шрифтом Verdana, размер шрифта 8 пт): Главная, О
компании En101, Бизнес-обзор проекта, Способы оплаты, выделяем эти строки и
щелкаем на кнопке маркеры на панели инструментов форматирования. Таким образом,
создали маркированный список для навигации.
7.
Устанавливаем гиперссылку для строки Главная. Выделяем строку Главная, щелкаем
правой кнопкой мыши и из контекстного меню выбираем команду Гиперссылка. Откроется
окно диалога, в котором надо в папке EN101 выделить файл index и нажать
ОК.
8.
Создаем ссылки на партнерские сайты. Устанавливаем курсор ниже списка и выбираем
команду "Таблица / Вставить / Таблица", в открывшемся окне диалога
устанавливаем: Строк – 1, Столбцов – 1; Выравнивание – по центру; Задать
ширину: 98%; Задать высоту: 30 в точках; Границы: размер – 1, цвет–темно-синий
(код: 000080); Фон: цвет-темно-синий (код: 000080). Далее щелкаем Применить и
ОК. Затем в созданную таблицу вводим текст «ПАРТНЕРСКИЕ САЙТЫ», шрифтом Verdana, размер шрифта 10
пт, выравнивание по центру, цвет белый.
Ниже таблицы ПАРТНЕСКИЕ
САЙТЫ вводим адреса требуемых сайтов и создаем гиперссылки. Например,
выделяем адрес #"1.files/image016.jpg">
Содержание третьей ячейки представлено на рисунке:
9. В ячейке 4
размещаем текст и рисунки. Текст можно вводить с клавиатуры или вставлять
скопированный текст из буфера обмена. Текст вводится, редактируется и форматируется
как в любом текстовом редакторе. Рисунки можно вставлять только из папки
images, которую предварительно создаем при сохранении веб – страницы.
10. Добавляем
таблицу для записи: Copyright © Английский язык в Интернет, 2007. All Rights
Reserved, которая предназначена для защиты Вашей интеллектуальной собственности
на данную веб-страницу. Кроме того, в этой таблице располагаются
счетчики. Для этого устанавливаем курсор ниже страницы (вне поля страницы, т.е.
ниже третьей и четвертой ячеек) и в области задач в разделе «Новые таблицы и
ячейки» выбираем команду «Вставить макетную таблицу». Размеры этой таблицы
подгоняем под размеры страницы, например, устанавливаем 900х57 точек, размер
границы - 1, цвет - темно-синий, цвет фона - белый. В созданную таблицу вводим
текст Copyright © Английский язык в Интернет.
11. Добавляем цвет фона вокруг страницы. Выбираем команду Формат / Фон, в
открывшемся окне диалога на вкладке форматирование устанавливаем цвет фона –
темно-синий.
12. Добавляем и заполняем
метатеги (между тегами <head> и </head>) в режиме Код: <title>Английский
язык в Интернет</title>
<meta name="keywords" content="EN101 курсы английского языка
обучение регистрация"> <meta name="description"
content="Курсы дистанционного обучения английскому языку в Интернет">
<meta NAME="Author" CONTENT="Владимир Ткаченко"> <META
content="INDEX, FOLLOW" name=ROBOTS>
В
результате разработки получим готовую веб-страницу, фрагмент которой представлен
на рисунке:
2. Создание интернет-страницы. Редактор HTML
2.1. Характеристика языка HTML
В основе создания
Web-страниц лежат простейшие языки программирования, базирующиеся на
HTML-кодах. HTML – это язык разметки документа, позволяющий форматировать и
верстать страницы, используя самую различную информацию (текстовую,
графическую, звуковую). Заметим, что совсем до недавнего времени
созданием Web-страниц (что совершенно естественно) занимались только программисты.
Однако вопросы эстетического характера при оформлении Web-страниц и сайтов
отступали на второй план.
В настоящее время появляется все
больше вспомогательных программных продуктов, облегчающих процесс написания
кода. Кроме того, подобную проблему иногда решают очень просто. Над
созданием Web-документов одновременно работают программисты и художники,
как же, как и многие специалисты. Исключает ли это знание методов работы
напарника? Конечно же, нет. Особенно для разработки макета сайта, где решаются
композиционные задачи, цветовое решение Web-страницы, программирование и
другие современные требования Web-дизайна для оптимального решения творческой
задачи. Обращаем Ваше внимание на то, что важно для Web-дизайнера. А
именно, далеко не только знание языка программирования HTML. Хотя, разумеется,
профессиональный Web-дизайнер должен знать все тонкости и нюансы внутренней
структуры своей Web-страницы. По этому поводу можно заметить, что
внимание к дизайну страницы и программированию должно быть разделено пополам
Web-дизайнеры часто спорят о
выборе программных средств компьютерной графики. Некоторые утверждают, что
важны только профессиональные инструменты графического дизайна. Другие же
выражают распространенную точку зрения, что важны не инструменты, а проблемы
дизайна в Internet. Инструменты, в конечном счете, ничего не значат. И все же,
если вы хотите стать профессионалом в области Web-дизайна, то вам необходимо в
совершенстве владеть не только компьютерными инструментами высшего уровня, но и
знаниями классического дизайна. Обойтись без него нам не представляется
возможным, поскольку дизайн несет в себе различные виды информации. И мы видим
в нем аналогию между языком Web и грамотным и эффективным подходом к любой визуальной
коммуникации, чтобы говорить языком изобразительных форм.
2.2. Создание Интернет-страницы
средствами Word
Учитывая популярность текстовых редакторов WinWord, среди всех названных
выше программ - помощников Web-мастера можно порекомендовать начинающим именно
Word 97, в котором функции просмотра и редактирования HTML-документов не просто
добавлены как некое дополнение, но представляют собой составную часть единого
комплекса возможностей данного приложения. В версии MS Word 2000 - страницы генерируются
с использованием XML, а не в "чистом" HTML. Но основные приемы работы
аналогичны и в Word 2000, за исключением некоторых отличий в интерфейсе.
Мало кто знает, что возможность сохранять обычные документы в виде
HTML-страниц имеется и в более ранней версии редактора Word 7.0 (по крайней мере,
в некоторых его экземплярах): из-за ошибки, допущенной разработчиками или,
возможно, при русификации данной программы вместо объявленного в списке допустимых
форматов сохранения файла встроенного конвертора WinWord 2.x на самом деле
вызывается конвертор в формат HTML, который, согласно официальной информации,
должен был впервые появиться лишь в Word 97. Достаточно выбрать в списке Тип файла
пункт Word 2.x для Windows (*.doc), и программа преобразует ваш документ в
Интернет-страницу (файл с тем же именем и расширением .htm).
Работая с Word 97, можно как создать новую Интернет-страницу (в том
числе используя готовые шаблоны или Мастер создания Интернет-страниц), так и
сохранить имеющийся "обычный" документ в виде HTML-страницы (для
этого нужно указать в списке Тип файла окна Сохранение документа формат HTML
Document или выбрать в меню Файл пункт Сохранить в формате HTML). Во время
сохранения Word 97 запрашивает вид кодировки, а сразу же после выполнения сохранения
Word переходит в режим "браузера" с соответствующим изменением
внешнего вида экрана и появлением новых панелей инструментов. Заметим, что при
сохранении документа в формате HTML Word 97 не только генерирует все необходимые
тэги, но и формирует в том же каталоге весь требуемый комплект графических
файлов, имевшихся в данном документе (включая фоновую фактуру, рисунки ClipArt
и пр.), автоматически преобразуя их в формат JPEG или GIF (имена файлов
генерируются программой Word 97 по стандартному образцу Image[порядковый
номер].jpg или Image[порядковый номер].gif).
Отметим,
что при сохранении в формате HTML часть форматирования, не поддерживаемая
стандартами этого языка, может быть утеряна. Поэтому рекомендуется сначала
сохранить созданный документ в формате Word (или RTF) и только затем переписать
его в виде Интернет-страницы.
Создание новой страницы по шаблону.
Эта
операция производится аналогично использованию альтернативного шаблона при
создании нового обычного документа: при помощи команды Создать меню Файл, но в
появившемся окне Создание документа требуется выбрать закладку Web-страницы. Далее
можно выбрать любой подходящий шаблон из предлагаемого в окне списка и щелкнуть
мышью на кнопке ОК. После этого можно редактировать имеющиеся и добавлять новые
элементы - дополнительные графические изображения, ссылки и пр., а затем сохранить
страницу в файл HTML.
Создание новой страницы с помощью
Мастера Web-страниц
Если ни один из имеющихся шаблонов вам не подходит, можно создать желаемую
страницу по шагам, выбрав в окне Создать (закладка Web-страницы) вместо шаблона
ярлык Мастер Web-страниц (Web Page Wizard) и далее выбрав один из предложенных
Мастером вариантов (предполагаемый вид страницы демонстрируется на фоне
диалогового окна Мастера. Далее пользователь заменяет фиктивный текст
требуемым, добавляет новые элементы и т. п.
Создание "пустой" новой
страницы
Если вы хотите создать свою страничку полностью заново и совершенно нестандартно,
выберите шаблон Новая Web-страница или просто, создав новый обычный документ
(например, щелчком мыши на кнопке Создать в панели инструментов), сразу же сохраните
его в формате HTML.
Редактирование Интернет-страницы в среде Word 97 производится почти аналогично
работе с обычным документом: вы по-прежнему выполняете набор и форматирование
текста (выбирая вид, начертание, цвет и размер шрифта, расположение абзацев и
пр.), вставляете рисунки и т. д. Лишь некоторые операции специфичны именно для
работы с Web-страницами, и эти операции мы рассмотрим подробнее.
Выбор фона страницы
Привычный для документов Word белый фон часто выглядит слишком скучно
для Интернет-страницы (хотя во многих случаях, когда необходимо обеспечить хорошую
читаемость мелкого текста, желателен именно однотонный белый или хотя бы очень
светлого оттенка фон). Создавая Web-страничку при помощи Word 97, можно задать
любой желаемый цвет закраски фона или фоновое изображение, воспользовавшись
командой Фон в меню
Формат (или
кнопкой Фон в панели инструментов). В появившейся на экране палитре можно
выбрать стандартный цвет, воспользоваться кнопкой Дополнительные цвета или
кнопкой Способы заливки, вызывающей на экран дополнительное окно с образцами
фоновых текстур. Здесь можно выбрать (с помощью мыши) понравившийся образец
или, воспользовавшись кнопкой Другая текстура в нижней части окна, загрузить с
диска в качестве фонового любое содержащееся во внешнем графическом файле изображение.
Отметим, что при генерации HTML-кода (во время сохранения данной странички
на диск в формате HTML) Word 97 сохраняет сведения о выбранном цвете фона как
значение атрибута BGCOLOR (если оставлен белый фон, это значение равно
#FFFFFF), а имя файла фонового изображения - как значение атрибута BACKGROUND
тэга <BODY>.
Изменение общего цвета текста и ссылок
Чтобы
изменить цвет всего текста (заданный по умолчанию черным) на какой-либо другой,
а также определить желаемые цвета еще не посещенных и уже отработанных ссылок,
воспользуйтесь командой Цвета текста в меню Формат. Появившееся на экране диалоговое
окно содержит три списка для выбора цвета (Основной текст, Гиперссылка и
Просмотренная гиперссылка), содержащих готовые образцы цветов. (Соответствующие
значения впоследствии будут присвоены атрибутам TEXT, LINK и VLINK тэга
<BODY>.) Заметим, что устанавливаемый здесь цвет текста носит характер
"глобального"; при желании всегда можно изменить цвет любого
фрагмента (строки, слова, одного или нескольких символов), выделив его мышью и
установив нужный цвет при помощи кнопки Цвет шрифта панели инструментов
рисования (или при помощи соответствующей опции меню Формат, Шрифт) - в этом
случае код цвета будет записан в качестве значения параметра COLOR тэга
<FONT>.
Оформление списков
Точно
так же, как делаем списки (маркированные или нумерованные) в обычном документе
Word, можно разместить их и на Интернет-странице. Для этого необходимо выделить
все абзацы, которые нужно оформить как список (текст должен быть уже набран), а
затем выбрать команду Список в меню Формат. Одноименное окно содержит две
закладки: Маркированный и Нумерованный, позволяющие выбрать маркер
("буллет") или вид нумерации (арабские, римские цифры и буквы от A до
Z). В качестве маркеров можно выбрать как стандартные для HTML ( или ), так и произвольные, вставляемые как графические
файлы (в нужные места HTML-текста помещаются тэги <IMG SRC...>). Кнопка
Другой позволяет загрузить в качестве "буллета" любой рисунок из
имеющегося на диске файла (желательно, чтобы он был небольшим по размеру).
Вставка
отлиновок
Отлиновку
(горизонтальный разделитель) можно вставить в желаемое место страницы с помощью
команды Горизонтальная линия меню Вставка. В появившемся на экране окне можно
выбрать стандартный (реализуемый при помощи тэга HR, в списке он самый верхний)
или графический разделитель (вставляемый как рисунок; соответствующие
графические файлы хранятся, как и для графических маркеров, в папке ClipArt).
Щелкнув на вставленном изображении разделителя правой кнопкой мыши, можно
выбрать в выпадающем меню: для стандартного разделителя - команду Формат
Автофигуры, а для графического - команду Формат рисунка для изменения свойств
графического изображения. Кнопка Другая в нижнем правом углу окна позволяет
загрузить в качестве отлиновки любой рисунок из имеющегося на диске файла.
Работа
с таблицами
Создание
и редактирование таблиц в режиме работы с Web-страницей практически ничем не
отличается от тех же операций при обработке "обычных" документов
Word. При этом можно создавать таблицы достаточно сложного вида, объединяя
ячейки по горизонтали и вертикали, создавая неполные столбцы и строки и пр., например:
Когда
будем сохранять созданную страницу в htm-файле, Word сгенерирует всю
необходимую для кодирования структуры такой таблицы последовательность тэгов
<TABLE>, <TR> и <TD> и их атрибутов, подобрать которую для
получения желаемого результата вручную (не в WYSIWYG-редакторе) удается лишь
после достаточно большого числа проб и ошибок. Работа с таблицами - это одно из
наиболее заметных преимуществ Word 97 как HTML-редактора.
Воспользовавшись
командами Границы, Свойства таблицы и Свойства ячейки в меню Таблица, можно
менять по своему вкусу характеристики всей таблицы (разлиновка, фон) и
отдельных ячеек или групп выделенных вами ячеек.
Заметим,
что таблицы с невидимой разлиновкой - это наиболее удобный способ размещения
текста и рисунков на Интернет-странице: создания совмещенных
текстово-графических заголовков, оборки рисунков текстом или красивого размещения
подписей к рисункам и фотографиям, верстки в несколько колонок и пр. - все эти
приемы благодаря Word 97 стали доступными для нас без необходимости писать
вручную громоздкие конструкции тэга <TABLE>.
Гиперссылки
Word 97
изначально "обучен" распознавать в тексте доменные имена (начинающиеся
с www или #"1.files/image037.jpg">
Если в
целевом тексте (на который требуется создать ссылку, в том числе текущем)
вставлены закладки (bookmark), для чего используется команда Закладка в меню
Вставка, то во время ввода ссылки на такой текст можно воспользоваться строкой
Имя объекта в документе в окне Добавить гиперссылку, чтобы выбрать название
требуемой закладки в выданном на экран списке, - так формируется гиперссылка с
символом # в значении параметра HREF (соответственно, имена закладок преобразуются
в значения параметра NAME).
Чтобы
изменить уже добавленную гиперссылку, нужно щелкнуть на ней правой кнопкой мыши
и выбрать в появившемся меню команду Гиперссылка, Изменить гиперссылку - на
экране появится такое же диалоговое окно, как и при создании новой ссылки, поля
которого содержат ранее присвоенные данной гиперссылке параметры. Измените их и
щелкните на кнопке ОК.
Чтобы
удалить гиперссылку, надо вызвать ее на редактирование (см. выше) и удалить
содержимое поля Связать с файлом / URL. При этом собственно текст ссылки не
уничтожается, но перестает быть оформленным как гиперссылка. (Заметим, что
такую операцию полезно проделывать со всеми ссылками, когда вы при помощи Word
97 сохраняете в файле копию "перетащенного" через буфер обмена
фрагмента просматриваемой в браузере Интернет-страницы. В противном случае есть
риск потерять текст, являющийся ссылкой, так как при открытии сохраненного
файла на другом компьютере (или в более старой версии Word) вместо ссылок
частенько выдается сообщение "Закладка не определена". Иногда в этом
случае помогает немедленное, сразу же после открытия такого документа в Word,
выполнение команды отмены последнего выполненного действия - автоматически
производимой Word'ом попытки "обновления" содержащихся в тексте
гиперссылок).
Вставка элементов мультимедиа
Кроме
рисунков (обычных и анимированных GIF), вставляемых в текст с помощью команды
Рисунок меню Вставка, на создаваемую Интернет-страницу могут быть добавлены
такие элементы как видеофрагмент, фоновый звук, бегущая строка и пр.
·
Фоновый звук.
Выберите в меню Вставка команду Фоновый звук, Свойства и укажите в появившемся
диалоговом окне желаемое имя файла (wav или midi) и количество повторений (или
пункт списка Бесконечно). Указанный вами файл копируется в ту же папку, что и
файл самой страницы, а его имя заносится в состав тэга BGSOUND.
Бегущая строка. Выберите в меню Вставка пункт Бегущая
строка и укажите в появившемся диалоговом окне желаемые параметры: способ
"прокручивания" строки (список Движение: Насквозь - рулонная
прокрутка, когда строка уходит за один край экрана и вновь появляется из-за
противоположного - SCROLL, До края - одноразовое перемещение строки до противоположного
края и ее остановка - SLIDE при LOOP=1, Между краями - циклическое перемещение
от одного края до другого и обратно - ALTERNATE; цвет фона строки; направление
движения (слева направо или справа налево); количество повторов (Бесконечно -
непрерывное движение); скорость движения и текст строки). Изменения параметров
сразу же отображаются в расположенном внизу окна поле Образец.
·
Видеофрагмент.
Выберите в меню Вставка команду Видеоклип или воспользуйтесь кнопкой Видеоклип
в панели инструментов рисования. На экране появится диалоговое окно, в котором
указываются (в том числе с помощью кнопки Обзор) файлы самой видеозаписи,
заменяющего ее рисунка и текста (на случай, если в браузере у просматривающего
эту страницу пользователя отключен показ видеозаписей), условия запуска (автоматически
после открытия данной страницы, по щелчку мышью или обоими способами),
количество повторов (в том числе Бесконечно), отображение или скрытие панели
управления воспроизведением и пр. (правда, не во всех браузерах эти параметры
воспринимаются корректно, особенно это касается запуска по щелчку мыши и показа
панели управления воспроизведением).
Просмотр
Интернет-страницы в процессе редактирования
Хотя
Word 97 ориентирован на отображение HTML-документов, максимально близкое к
ожидаемому в браузере, в нем предусмотрена и возможность передачи текущего
документа в браузер Internet Explorer одним щелчком мыши на кнопке Просмотр
Web-страницы. Имеется и возможность работы непосредственно с HTML-кодом, соответствующим
создаваемой странице, при помощи команды Источник HTML в меню Вид. Возврат к
обычному способу отображения производится щелчком мыши на кнопке Закрыть
источник HTML в верхней панели инструментов (в режиме просмотра исходного кода
вид панели инструментов несколько иной по сравнению с обычным).
Постобработка HTML-файла, сгенерированного Word 97
Хотя
Word 97 и предоставляет пользователю удобную WYSIWYG-среду для редактирования
Интернет-страниц, он не лишен недостатков. Word 97 (точнее, встроенный в него
конвертор в формат HTML) рассчитан на браузер Internet Explorer последних версий,
поэтому, в целях максимального соответствия вида получаемой Интернет-страницы
исходному документу, в генерируемый HTML-текст заносится ряд тэгов и
параметров, необязательных, а иной раз и мешающих при просмотре странички в
других браузерах. Например, Word 97 не только упрямо помещает в HTML-код
множество тэгов <FONT> с одним и тем же именем шрифта в значении
параметра FACE всякий раз при переходе от русских букв к латинским и обратно,
но и записывает в них исключительно имена шрифтов Unicode. Последнее приводит к
некорректной работе браузеров в более ранних версиях Windows (3.xx и 95), где существуют
отдельные русифицированные шрифты. Например, если Word 97 записывает в HTML-коде
тэг <FONT FACE=Arial>, браузер у таких пользователей подгрузит для
просмотра данной страницы шрифтовой файл Arial, а не его кириллический аналог
Arial Cyr, и русские буквы превратятся в "западнославянские" (пример
получаемого в этом случае результата: "crdraiinerainecl"). Поэтому
необходимо открыть только что сгенерированную Интернет-страницу в браузере
Internet Explorer, вызвать на редактирование ее исходный код (команда в виде
HTML меню Вид браузера либо Источник HTML в одноименном меню Word) и дописать к
записанным в упомянутых тэгах названиям шрифтов слово "Cyr", либо
совсем удалить из них параметр FACE вместе с именами шрифтов (а иногда - и весь
тэг <FONT> вместе с соответствующим ему закрывающим </FONT>).
Заодно можно убрать вставляемый в начале документа метатэг с указанием, что
данная страница была сгенерирована Word 97, а также при необходимости
подредактировать общий вид страницы, например, убрав ненужные промежутки между
абзацами (замена тэгов <P> на <BR>).
Таким
образом, удобно использовать Word 97 в качестве вспомогательного средства при
создании Интернет-страниц со сложными таблицами или версткой при помощи таблиц
с невидимой разлиновкой, а также для автоматизации процесса подготовки множества
однотипных страниц, текст которых уже имеется в файле. Однако если вы хотите
создавать Интернет-страницы на действительно профессиональном уровне, наличие
Word 97 еще не избавляет вас от необходимости знакомства с языком HTML хотя бы
в общих чертах.
Размещение страницы в Интернете
Итак,
наш первый Интернет-сайт создан. Но пока еще он доступен только пользователям
нашего компьютера, поскольку содержится на нашем, "локальном",
жестком диске. Для того же, чтобы наш сайт могли увидеть все желающие, нужно разместить
его на диске одного из серверов Интернет. Как это сделать?
1. Если у вас есть знакомый владелец
или администратор сервера (на фирме, в учебном заведении и т. д.), можно
попросить его об этой услуге и даже договориться, чтобы он взял на себя все
работы по размещению вашего творения в сети, получив от вас все нужные файлы
(html-тексты, рисунки и прочие медиаданные) в архиве по e-mail и сообщив вам
адрес вашего сайта. В дальнейшем для внесения каких-либо изменений или
дополнений вам вновь потребуется его помощь.
2. Если в вашей школе (или иной
организации, где вы учитесь или работаете) есть свой Интернет-сервер,
обратитесь к его администратору: ваши файлы будут скопированы на диск сервера и
таким образом сразу "попадут в Интернет"; при желании вы всегда
сможете тем же путем модифицировать свой сайт, копируя на его диск новые и/или
исправленные файлы.
3. Если вы пользуетесь доступом в
Интернет через какого-либо провайдера, загляните в текст договора с ним или
обратитесь в его службу поддержки пользователей: как правило, большинство
провайдеров предоставляют своим клиентам место для размещения собственного
сайта (иногда за небольшую отдельную плату).
4. И наконец, если у вас нет ни
первого, ни второго, ни третьего, можно заручиться помощью одного из бесплатных
общедоступных серверов, предоставляющих дисковое пространство для всех
желающих. Сегодня таких "коммунальных" серверов существует достаточно
много: www.geocities.com, www.narod.ru...
Литература
1.
Айзенменгер
Р. HTML: Справочник. - М.: "Издательство БИНОМ", 1998.
2.
Морис
Б. HTML в действии. - СПб: "Питер", 1997.
3.
Кенцл
Т. Форматы файлов Internet. - СПб: "Питер", 1997.
4.
Федоров
А. Язык HTML. Все о фреймах //КомпьютерПресс. 2004. № 3.
5.
Федоров
А. Создание Web-страниц средствами Microsoft Office 97 //КомпьютерПресс. 2004.
№ 3.
6.
Кирсанов
Д. Профессиональная графика для WWW. //КомпьютерПресс. 2004. № 3.
7.
Евдокимов
М. Visual Basic + HTML = VBScript. //Мир ПК. 2004. № 10.
8.
Лаушкина
И. С. Разработка сценария on-line теста на языке Java Script. //Информатика и
образование. 2005. № 9.
9.
Маргулев
А. И. Программирование на языке VisualBasic 5. (Выпуск 2. Глава 4. Компоненты
ActiveX) //Информатика. 2005. № 28.