Уроки изучения FrontPage2000, как среды создания электронных учебников: Методические указания

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РФ ВОСТОЧНО-СИБИРСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНОЛОГИЧЕСКИЙ УНИВЕРСИТЕТ Бурятский Региональный Центр Федерации Интернет Образования

МЕТОДИЧЕСКИЕ УКАЗАНИЯ

«Уроки изучения FrontPage2000, как среды создания электронных учебников»

Составители: Найханов В.В. Найханова Л.В.

Улан-Удэ, 2001

Оглавление

Введение.................................................................................................................................................. 4 Основные аспекты построения электронных учебников, как сайтов сети Интернет .......Ошибка! Закладка не определена. FrontPage и Internet................................................................. Ошибка! Закладка не определена. Процесс разработки Web-сайта ............................................ Ошибка! Закладка не определена. Планирование Web-сайта или гипертекстового электронного учебникаОшибка! Закладка не опр Занятие 1. Начало работы с редактором Frontpage ............................................................................. 5 Запуск Редактора .............................................................................................................................5 Окно Views.......................................................................................................................................5 Folder List .........................................................................................................................................6 Окно редактирования......................................................................................................................6 Просмотр в браузере .......................................................................................................................6 Работа с панелями инструментов ..................................................................................................7 Создание нового сайта....................................................................................................................7 Создание новой страницы ..............................................................................................................7 Сохранение страницы .....................................................................................................................7 Открытие сайта................................................................................................................................8 Открытие страницы.........................................................................................................................8 Настройка кириллицы.....................................................................................................................8 Преобразование в web - страницу .................................................................................................9 Контрольные вопросы ....................................................................................................................... 9 Занятие 2. Дизайн страницы................................................................................................................ 10 Вставка и удаление текста............................................................................................................10 Выделение, копирование и вставка текста .................................................................................10 Вставка содержания документа с помощью команд меню FrontPage ....................................11 Импортирование документов в состав сайта..............................................................................11 Изменение формата текста ...........................................................................................................12 Фон страницы ................................................................................................................................12 Разрыв строки ................................................................................................................................13 Горизонтальная линия ..................................................................................................................13 Символы .........................................................................................................................................14 Списки ............................................................................................................................................14 Контрольные вопросы ..................................................................................................................... 15 Задание № 1 для самостоятельной работы .................................................................................15 Занятие № 3. Создание текстовой ссылки ......................................................................................... 16 Создание текстовой ссылки на страницу....................................................................................16 Редактирование ссылки ................................................................................................................17 Закладки .........................................................................................................................................18 Создание закладки.........................................................................................................................18 Контрольные вопросы ..................................................................................................................... 19 Занятие № 4. Рисунки ......................................................................................................................... 20 Вставка рисунка.............................................................................................................................20 Сохранение рисунка......................................................................................................................20 Свойства рисунка ..........................................................................................................................23 Создание ссылки с рисунка..........................................................................................................25 Создание миниатюры предварительного просмотра.................................................................25 Разделяемые рисунки....................................................................................................................26 Контрольные вопросы ..................................................................................................................... 27 Задание № 2 для самостоятельной работы .................................................................................27 Занятие 5. Фреймы............................................................................................................................... 28 Применение фреймов....................................................................................................................28 2

Фреймсеты ............................................................................................................................................ 28 Работа с фреймами ............................................................................................................................... 28 Задание страницы фреймов..........................................................................................................29 Выбор страницы или фреймсета..................................................................................................29 Свойства фрейма ...........................................................................................................................29 Сохранение фреймов и фреймсетов ............................................................................................31 Первое сохранение фреймов и фреймсетов........................................................................... 31 Удаление фрейма...........................................................................................................................31 Открытие страницы в новом окне ...............................................................................................31 Разбиение страницы во фреймсете..............................................................................................31 Назначение целевого фрейма для ссылки...................................................................................32 Назначение целевого фрейма по умолчанию .............................................................................33 Вкладки просмотра фреймов .......................................................................................................33 Контрольные вопросы ..................................................................................................................... 33 Занятие № 6. Дополнительный дизайн .............................................................................................. 34 Подвижные кнопки .......................................................................................................................34 Бегущая строка ..............................................................................................................................35 DHTML эффекты...........................................................................................................................36 Темы ...............................................................................................................................................37 Контрольные вопросы ..................................................................................................................... 39 Занятие № 7. Публикация сайта.......................................................................................................... 40 Публикация на сервере имеющем серверные расширения FrontPage .....................................40 Публикация на сервере не имеющем серверные расширения FrontPage ................................40 Контрольные вопросы ..................................................................................................................... 41 Дополнение (необязательный раздел)................................................................................................ 42 Таблицы............................................................................................................................................. 42 Построение таблиц........................................................................................................................42 Вставка таблицы............................................................................................................................42 Редактирование таблиц.................................................................................................................43 Выбор строк и столбцов ...............................................................................................................44 Редактирование свойств ячейки ..................................................................................................44 Титульные ячейки .........................................................................................................................45 Перемещение по таблице .............................................................................................................45 Добавление ячеек ..........................................................................................................................45 Добавление строк ..........................................................................................................................45 Добавление столбцов ....................................................................................................................46 Удаление строк или столбцов ......................................................................................................46 Заголовок таблицы ........................................................................................................................46 Перемещение строк и столбцов ...................................................................................................46 Разбиение ячеек .............................................................................................................................47 Слияние ячеек................................................................................................................................47 Вставка изображений в ячейки таблицы.....................................................................................47 Таблицы в таблицах ......................................................................................................................47 Инструменты панели таблиц........................................................................................................47 Остальные кнопки панели таблиц ...............................................................................................48 Стили ................................................................................................................................................. 49 Внутренняя таблица стилей .........................................................................................................49 Внешняя таблица стилей: создание, присоединение, использование......................................51 Приложение A ...................................................................................................................................... 53 Как получить e-mail ......................................................................................................................53 Как получить место под сайт .......................................................................................................53 Как опубликовать свой сайт.........................................................................................................53 Приложение B....................................................................................................................................... 56 3

Немного о JavaScript ............................................................................................................................ 56

4

Введение Для разработки гипертекстовых электронных учебников в настоящее время наибольшее распространение получили три инструментальных системы: ¾ MS Word 2000; ¾ Редакторы типа FrontPage; ¾ HTML-редакторы. MS Word обладает возможностями, посредством которых можно создать электронный учебник. Однако, электронный учебник (ЭУ), созданный в среде MS Word, обладает значительным объемом, что делает его неповоротливым и неудобным в работе. Поэтому не рекомендуется использовать MS Word для создания больших полноценных электронных учебников. При этом небольшие ЭУ (например, в размере методических указаний) на нем можно создавать. Вторым представителем инструментальных систем, используемых для разработки ЭУ, является Редактор FrontPage. Основное назначение данного Редактора - создание Web-сайтов. Анализ инструментальных средств показал, что электронные учебники удобно создавать и представлять в виде Web-сайтов. Такой подход имеет несколько преимуществ. Во-первых, ЭУ построен на интернет-технологиях. Это означает, что такой учебник может иметь гиперссылки на какую-либо информацию, которая находится на удаленном компьютере, подсоединенном к всемирной паутине. Это также означает, что к ЭУ могут иметь доступ пользователи, работающие в глобальной сети. Это является большим достоинством для развития системы дистанционного обучения. Во-вторых, он может разрабатываться не специалистами в области вычислительной техники и информатики, а например, учителями различного профиля. Втретьих, для его эксплуатации используются широко распространенные системы – браузеры. Вчетвертых, FrontPage является достаточно продвинутой средой разработки. В – пятых, поскольку FrontPage является программным продуктом, встроенным в MS Office (одним из наиболее часто используемых пакетов в России), FrontPage можно легко установить на локальный компьютер, в отличие от других редакторов, которые еще предстоит найти (и возможно купить за отдельную плату). В – шестых, из-за принадлежности к одному пакету, интерфейс FrontPage сходен с интерфейсом MS Word (в большинстве случаев – просто идентичен), а это значит, что пользователю ранее работавшему с текстовым процессором, будет легче освоить FrontPage. И наконец, ЭУ, созданный в среде FrontPage, легко редактируется и отлаживается. При этом файл учебника сравним с исходным текстовым документом. Третьей разновидностью инструментальных средств, являются HTML-редакторы. Они также предназначены для разработки Web-сайтов. Однако они используются в основном программистами, так как требуют знания языка HTML. Согласно вышеизложенному, в этом курсе изучаются принципы создания электронного учебника посредством Редактора FrontPage. Изучение данного курса предполагает знание пакета MS Office и основ работы в Internet.

5

Занятие 1. Начало работы с редактором Frontpage Цели По завершении изучения материала занятия вы сможете: • запускать редактор Frontpage; • создавать новый сайт; • создавать новые страницы; • сохранять новые страницы; • открывать существующие страницы различных сайтов.

Запуск Редактора Для запуска редактора Frontpage в меню (кнопке) «Пуск»(Start) выберите пункт «Программы»(Programs), затем, в появившемся подменю выберите пункт «Microsoft FrontPage». Откроется редактор FrontPage (рис.1.1). Редактор может быть разделен на 3 окна – окно Views, окно Folder List и собственно окно редактора. Показать или скрыть окна Views и Folder List можно с помощью щелчка левой кнопкой мышки по командам Views Bar и Folder List меню View.

Рис.1.1 Общий вид редактора Frontpage Примечание: Окно Folder List можно скрыть или активизировать с помощью одноименной кнопки на стандартной панели инструментов (Standard).

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

Рис. 1.2 Служебное окно Views. 6

• • • •

• •

Режим Page – в правом окне отобразится редактируемая страница (основной режим работы). Режим Folders – в правом окне будет показано содержимое вашего сайта. Режим Reports– предназначен для вывода разнообразных отчетов о состоянии создаваемого сайта. Выбрать нужный вид отчета можно с помощью команды View -> Reports -> необходимый отчет. Режим Navigation – в правом окне можно будет в визуальном режиме создавать ссылки между страницами, перетаскивая страницы из окна Folder List . Кроме этого позволяет создавать новые страницы и удалять старые. При создании новой страницы в этом окне автоматически будет проставлена ссылка от выделенной в данный момент страницы к новой. Режим Hyperlinks - показывает документы сайта и ссылки между ними. Режим Tasks - менеджер задач.

Folder List В окне Folder List (Рис.1.3 ) находится перечень каталогов и документов вашего сайта. Работа в этом окне напоминает работу в Проводнике (Explorer) Windows. Т.е. можно удалять, переименовывать, вставлять файлы и т.д.

Рис.1.3 Служебное окно Folder List.

Окно редактирования Самое правое окно предназначено для редактирования создаваемой страницы. Оно имеет три вкладки, ярлычки от которых расположены внизу окна. Щелкнув по ярлычку вы можете активизировать нужную вкладку. На вкладке Normal (Нормальная) вы вводите текст, вставляете рисунки, кнопки, создаете ссылки и т.д. На вкладке HTML (код HTML) вы можете увидеть код который создает FrontPage в зависимости от ваших действий. Активизировав вкладку Preview (Предварительный просмотр) вы сможете увидеть как примерно будет выглядеть ваша страница в браузере и проверить работоспособность ссылок.

Просмотр в браузере Существует возможность загрузить разрабатываемую страницу в браузер, воспользовавшись командой Preview in Browser (Предварительный просмотр в браузере) из меню File (Файл). Если вы щелкнете левой кнопкой мышки по этой команде, то появится диалоговое окно с тем же названием. (Рис.1.4)

7

Рис.1.4. Диалоговое окно Preview in Browser (Предварительный просмотр в браузере). В этом окне можно выбрать браузер в котором вы хотите просмотреть вашу страницу (если на вашем компьютере установлено несколько браузеров), указать размер экрана, отметить поле выбора Automatically save page (Автоматически сохранять страницу) для того, чтобы FrontPage сохранил страницу перед загрузкой в браузер. Выбрав все необходимые опции (или оставив их значения по умолчанию) щелкните по кнопке Preview – страница будет загружена в браузер.

Работа с панелями инструментов Редактор располагает рядом панелей инструментов: Standard (Стандартная), Formatting (Форматирование), DHTML Effects (Эффекты DHTML), Navigation (Навигация), Pictures (Рисунки), Positioning (Позиционирование), Reporting (Отчеты), Style (Стиль) и Tables (Таблицы). Когда они все видны, они занимают существенную часть окна Редактора. Поэтому те, что вам не нужны, лучше убрать. Чтобы скрыть панель инструментов, откройте меню View (Вид), выберите пункт Toolbars (Панели инструментов) и в появившемся подменю уберите галочку напротив имени этой панели. Чтобы показать спрятанную панель, найдите ее имя в меню View -> Toolbars и поставьте галочку напротив, тогда панель появится на том же самом месте, которое она раньше занимала.

Создание нового сайта Сайт, это несколько интернет-страниц, принадлежащих одному владельцу. (Одним владельцем может быть какая угодно по численности компания.) Для создания нового сайта нужно в меню File (Файл) выбрать пункт New (Создать) и затем команду Web (Сайт). Появится диалоговое окно New. В этом окне необходимо из предложенного перечня выбрать макет создаваемого сайта и в области Options, в текстовом поле с выпадающим списком Specify the location of the new web (Укажите место размещения вашего сайта), указать местоположение сайта. После чего нажать кнопку Ok.

Создание новой страницы Интернет-страница – электронная страница, отформатированная специальным образом для использования в WWW. Чтобы создать новую страницу нужно в меню File (Файл) выбрать пункт New (Создать) и затем команду Page (Страница). В появившемся диалоговом окне на вкладке General (Общая) выберите макет создаваемой страницы и нажмите на кнопку Ok. Новая страница будет создана. Также, для создания пустой страницы можно щелкнуть по кнопке New Page (Новая страница) на стандартной панели инструментов или нажать комбинацию клавиш +. Примечание: Если щелкнуть по стрелке рядом с кнопкой New Page (Новая страница) на панели инструментов можно будет также создать новый сайт, новую папку, новую задачу.

Сохранение страницы Для сохранения страницы нужно в меню File (Файл) выбрать пункт Save (Сохранить). Если страница сохраняется в первый раз, то появится диалоговое окно Save As (Сохранить как) (Рис. 1.5). В этом окне надо указать папку в которой будет сохранена созданная страница (поле Save in (Папка)), заголовок страницы, нажав на кнопку Change (Изменить заголовок), и имя страницы в поле File name (Имя файла). Можно также изменить тип сохраняемого файла в поле 8

Save as type (тип файла). После чего нажать кнопку Save (Сохранить). Если страница уже была однажды сохранена, то окно Save as (Сохранить как) не появится и внесенные изменения будут сохранены под тем же именем. Но если вы захотите страницу под другим именем или в другой папке и т.д., то окно Save As (Сохранить как) можно вызвать, выбрав пункт Save As (Сохранить как) меню File (Файл).

Рис. 1.5 Диалоговое окно Save As. Примечание: Сохранить страницу можно также, нажав комбинацию клавиш +<S> или щелкнув по кнопке Save (Сохранить). Изменить заголовок страницы можно вызвав контекстно – зависимое меню и выбрав в нем пункт Page Properties (Свойства страницы). На первой вкладке этого окна General (Общие) в поле Title (Заголовок) выводится заголовок страницы. Если в служебном окне Folder List (Список папок) вызвать контекстно – зависимое меню для какого-либо файла и выбрать пункт Properties (Свойства), то на первой вкладке появившегося окна General (Общие) в поле Title (Заголовок) также выводится заголовок страницы

Открытие сайта Для открытия сайта надо в меню File (Файл) выбрать пункт Open Web (Открыть сайт) и в появившемся диалоговом окне указать открываемый сайт. Последние по времени работы сайты перечислены в меню File (Файл) в пункте Recent Webs (Последние сайты).

Открытие страницы Для открытия страницы надо в меню File (Файл) выбрать пункт Open (Открыть) и в появившемся диалоговом окне указать открываемую страницу. Последние по времени разработки страницы перечислены в меню File (Файл) в пункте Recent Files (Последние файлы).

Настройка кириллицы Если при открытии ранее сохраненной страницы вы увидите неизвестные символы, то попробуйте настроить FrontPage на использование кириллицы. Для этого в меню File (Файл) выберите команду Properties (Свойства) или щелкните на странице правой кнопкой мыши и в контекстном меню выберите команду Page Properties (Свойства страницы)(Рис.1.6). Вы увидите диалоговое окно Page Properties(Свойства страницы). Перейдите на вкладку Language (Язык) и укажите в поле Mark current document as (Отметить текущий документ как…) Russian (Русский). В поле HTML encoding (HTML кодировка) – Cyrillic (Кириллица) и в поле (Перезагрузить документ как) тоже Cyrillic (Кириллица). Для вступления введенных изменений в силу нажмите OK.

9

Рис.1.6 Диалоговое окно Page Properties (Свойства страницы) с открытой вкладкой Language.

Преобразование в web - страницу Чтобы представить в составе сайта документы, подготовленные с помощью других приложений MS Office, например Power Point, Word или Excel, эти документы можно сначала преобразовать в стандарт web–страницы. Для этого откройте документ в исходном приложении и в меню File (Файл) выберите команду Save as Web Page (Сохранить как Web–страницу). После этого ее можно включить в состав сайта с помощью команды Import (Импорт) (Занятие 2 Дизайн страницы – Импортирование документов в состав сайта).

Контрольные вопросы 1. 2. 3. 4. 5. 6.

Что такое сайт? Дайте определение страницы сайта. Как создать новый сайт? Как сохранить страницу? Обязательно ли, чтобы окно Редактора содержало все панели инструментов? Как открыть сайт?

10

Занятие 2. Дизайн страницы Цели По завершении изучения материала занятия вы сможете: • форматировать текст; • изменять фон страницы; • импортировать документы в состав сайта: • создавать списки; • вставлять специальные символы.

Вставка и удаление текста Ввод текста Чтобы поместить на страницу текст, просто введите его с клавиатуры. Текст начинается с левого края текущей строки. Можно расположить его каким-либо другим образом: сделать отступ, выровнять по правому краю или по центру. Можно поменять шрифт и кегль текста, изменить цвет символов, сделать его заголовком или модифицировать его свойства другими способами, точно такими же, какие имеются в Word. Чтобы начать новый абзац, нажмите клавишу <Enter>. Удаление текста Удаление текста ничем не отличается от удаления текста в Word. Например: отметив удаляемый фрагмент, можно затем нажать клавишу . Совет: Если вы захотите вернуть обратно удаленный материал, выберите в меню Edit (Правка) пункт Undo (Отменить ввод) или щелкните кнопку Undo (Отменить ввод) на панели инструментов, или же нажмите +. Вы можете удалять символы и целые слова перед курсором и после него. Чтобы удалить слово справа от курсора, нажмите +, а слово слева от курсора — +. Из всех комбинаций клавиш Редактора Frontpage и Microsoft Word эти используются, наверное, реже всех, но они могут существенно ускорить процесс редактирования.

Выделение, копирование и вставка текста На создаваемую страницу можно вставить уже имеющийся текст, подготовленный в других приложениях MS Office. Вставить текст можно с помощью буфера обмена или с помощью специально предназначенных для этого команд меню. Вставка текста с помощью буфера обмена Для того, чтобы вставить текст с помощью буфера обмена надо открыть имеющийся документ, выделить необходимый фрагмент и скопировать его в буфер обмена. Затем перейти на создаваемую web – страницу и вставить скопированный фрагмент. Примечание: Выделить необходимый фрагмент можно несколькими способами. Например: Установив курсор мыши в начало или конец фрагмента нажать на левую кнопку мыши и не отпуская кнопку перемещать мышь по странице до тех пор, пока весь фрагмент не будет выделен другим цветом. Если вы хотите выделить определенный абзац, то щелкните по этому абзацу 3 (три) раза левой кнопкой мыши. Если вы хотите выделить весь текст то в меню Edit (Правка) выберите пункт Select All (Выделить все). Можно выделить фрагмент и с помощью клавиатуры. Для того, чтобы выделить весь текст нажмите на +. Если необходимо выделить фрагмент текста, то установите курсор в нужную позицию, нажмите клавишу <Shift> и не отпуская ее, выделите необходимый фрагмент с помощью клавиш перемещения курсора. Если при этом в добавлении к клавише <Shift> вы нажмете еще и клавишу
перемещения курсора - это клавиши со стрелками и клавиши Home (Начало), End (Конец), Page Up (На страницу вверх), Page Down (На страницу вниз)). Скопировать выделенный фрагмент также можно с помощью мыши или клавиатуры. Для того, чтобы скопировать выделенный текст с помощью мыши, надо или в меню Edit (Правка) выбрать команду Copy (Копировать), или на панели инструментов нажать на кнопку Copy (Копировать), или же, нажав на выделенном фрагменте правую кнопку мыши и вызвав тем самым контекстно-зависимое меню, выбрать в этом меню команду Copy (Копировать). Для того, чтобы скопировать выделенный фрагмент с помощью клавиатуры надо нажать +. Чтобы вставить скопированный фрагмент на страницу надо: или в меню Edit (Правка) выбрать команду Paste (Вставить), или на панели инструментов нажать на кнопку Paste (Вставить), или в контекстно-зависимом меню выбрать команду Paste (Вставить), или нажать +. Совет: Для того, чтобы быстро перейти в начало или конец документа надо нажать + или +<End> соответственно.

Вставка содержания документа с помощью команд меню FrontPage Для того, чтобы полностью вставить содержание какого-либо документа на создаваемую страницу FrontPage, можно использовать команду File (Файл) из меню Insert (Вставить). После щелчка мышью по этой команде появится диалоговое окно Select File. (Рис.2.1). В поле Files of type (Тип файла) надо выбрать тип документа из которого будет происходить вставка, например: Word 97-2000 (*.doc) для файлов с расширением .doc и затем, указав сам файл нажать на кнопку Open (Открыть).

Рис.2.1. Диалоговое окно Select File. Примечание: В некоторых случаях форматирование документа может быть частично утрачено.

Импортирование документов в состав сайта Для того, чтобы включить какой-либо документ в состав разрабатываемого сайта, можно воспользоваться командой Import (Импорт) из меню File (Файл). Появится диалоговое окно Import (Импорт) (Рис.2.2)

Рис.2.2. Диалоговое окно Import (Импорт). В этом окне нажмите кнопку Add File (Добавить файл) или Add Folder (Добавить папку) если хотите добавить папку и в следующем окне Add File to Import List (Добавить файл в список импортируемых)(Рис.2.3) выберите необходимый файл или папку, нажмите кнопки Open (Открыть) и затем OK. Файл или папка будет скопирован(а) в состав вашего сайта. 12

Рис.2.3 Окно Add File to Import List (Добавить файл в список импортируемых)

Изменение формата текста Форматирование текста во FrontPage производится с помощью команды Font (Шрифт) меню Format (Формат). При активизации этой команды появляется диалоговое окно Font (Шрифт)(Рис.2.4) в котором на первой вкладке можно указать шрифт, начертание, размер, цвет, различные эффекты для вводимых символов. На второй вкладке можно также указать интервал и смещение символов. (Это окно несомненно должно вам напомнить почти такое же окно в текстовом процессоре Word.)

Рис.2.4. Диалоговое окно Font (Шрифт). Примечание: Окно Font (Шрифт) можно получить вызвав контекстно-зависимое меню и выбрав команду Font (Шрифт). Кроме этого, кнопки форматирования текста находятся на панели инструментов Format (Форматирование). Они аналогичны кнопкам форматирования текста в Word.

Фон страницы Для изменения фона страницы необходимо установить курсор на этой странице и в меню Format (Формат) выбрать команду Background (Фон), появится диалоговое окно Page Properties (Свойства страницы) (Рис.2.5) с активизированной вкладкой Background (Фон).

Рис.2.5. Диалоговое окно Page Properties (Свойства страницы) FrontPage позволяет в качестве фона страницы использовать однотонную заливку или какойлибо рисунок. Для указания цвета однотонной заливки в качестве фона, этот цвет нужно просто 13

выбрать в поле Background (Фон), в области Colors (Цвета). Там же, в поле Text (Текст) можно указать цвет текста, которым по умолчанию будет окрашен текст на всей странице. Для назначения в качестве фона какого-либо рисунка, в области Formatting (Форматирование) надо отметить поле выбора Background Picture (Фоновый рисунок). После этого можно воспользоваться кнопкой Browse (Просмотр). Щелчок левой кнопкой мышки на этой кнопке откроет диалоговое окно Select Background Picture (Выбор рисунка для фона) (Рис.2.6) в котором надо указать используемый рисунок. Если у вас уже есть страница с назначенным фоном, то можно, отметив поле выбора Get background information from another page (Получить информацию о фоне с другой страницы) указать эту страницу и загрузить фон с этой страницы. Изменение формата текстовой ссылки На той же вкладке Background (Фон), находятся поля с выпадающим списком Hyperlink (Ссылка), Visited hyperlink (Посещенная ссылка), Active hyperlink (Активная ссылка) с помощью которых можно изменить назначаемый по умолчанию цвет соответственно для ссылок, посещенных ссылок, активных ссылок. Кроме того, если отметить поле Enable hyperlink rollover effects и щелкнуть по кнопке Rollover style (Стиль ролл-овера), то можно будет указать измененный формат текстовой ссылки при наведении на нее указателя мыши.

Рис.2.6. Диалоговое окно Select Background Picture (Выбор рисунка для фона) Примечание: Если в окне Select Background Picture (Выбор рисунка для фона) у вас не видно

ни одного подходящего фонового рисунка, то можно воспользоваться кнопкой Select a file on your computer (Выбрать файл находящийся на вашем компьютере) и затем в стандартном окне Windows с названием Select file (Выбор файла) найти необходимый рисунок.

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

Горизонтальная линия Чтобы выделить элементы вашего текста, можно использовать горизонтальные линии. - как вставить горизонтальную линию - чтобы вставить горизонтальную линию, установите курсор там, где вы хотели бы, чтобы появилась линия, затем выберите команду Horizontal Line (Горизонтальная линия) в меню Insert. - форматирование горизонтальных линий - чтобы изменить уже созданную линию, нажмите правую кнопку мыши и выберите пункт Horizontal Line Properties из контекстного меню. Появится диалоговое окно Horizontal Line Properties, которое показано на рис. 2.7.

14

-

Рис. 2.7. Диалоговое окно Horizontal Line Properties. удаление горизонтальной линии - чтобы удалить линию, выделите ее и нажмите клавишу или .

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

Списки Часто бывает удобно представлять материал в виде списков. Списки читаются легче длинных непрерывных абзацев, поэтому умеренное использование списков может улучшить восприятие страниц. Точный вид списков определяется браузером, используемым для просмотра страницы. Все типы списков доступны в раскрывающемся списке стилей на панели форматирования: - Bulleted List (Маркированный список). Элементы такого списка снабжены маркерами. - Directory List (Указатель). Другой формат маркированных списков. - Menu List (Меню). Еще один формат маркированных списков. - Numbered List (Нумерованный список). Этот список представляет собой последовательность пронумерованных упорядоченных пунктов. Атрибуты нумерованных списков можно менять. Например, нумерация может производиться римскими цифрами (как прописными, так и строчными) или буквами (также и строчными, и прописными); можно установить любое начальное значение номера. Создание списка Для того, чтобы создать нумерованный список выполните следующие действия: 1. Открыв страницу в Редакторе, поместите курсор на то место, где должно находиться начало списка. Если в той строке, где стоит курсор, уже имеется какой-либо текст, то FrontPage сделает этот абзац первым пунктом списка. Если нужно начать новый список, то установите курсор на пустую строку. 2. Выберите в раскрывающемся списке стилей (Рис.2.8.) опцию Numbered List. FrontPage отметит первую строку нового списка номером 1. Наберите текст первого пункта списка. 3. Введя первый пункт, нажмите клавишу <Enter>. Редактор поставит на новой строке следующий номер, после которого можно ввести следующую порцию текста. (Повторяйте эту процедуру до тех пор, пока список не закончится.) 4. Завершив ввод списка, нажмите комбинацию клавиш +<Enter>. Редактор FrontPage начнет новую строку под списком и установит курсор на ее начало. Можно превратить в маркированный или нумерованный список уже существующий текст. Для этого отметьте нужный фрагмент и нажмите соответствующую кнопку на панели инструментов.

15

Рис.2.8. Список стилей.

Контрольные вопросы 7. Как отформатировать введенный текст? 8. Можно ли в качестве фона страницы использовать рисунок? 9. Как вставить символ торговой марки (™)? 10. Можно ли создать маркированный список?

Задание № 1 для самостоятельной работы Целью данного задания является закрепление навыков создания и дизайна страниц.

Описание задания: 1. Создайте новую страницу. 2. Введите текст (по вашему усмотрению). 3. Измените цвет текста. 4. Вставьте горизонтальную строку. 5. Измените фон страницы.

6. Сохраните страницу с названием «one.htm» и заголовком «Эта страница сделана самостоятельно».

Методические указания к выполнению задания: 1. Для выполнения первого пункта, если Редактор не запущен, запустите его одним из способов, описанных в параграфе «Запуск Редактора» первого занятия. Также можно посмотреть параграф «Создание новой страницы» первого занятия. 2. Для выполнения второго пункта задания используйте материал, описанный в параграфе «Вставка и удаление текста» второго занятия. 3. Для выполнения 3-го пункта задания, используйте материал, изложенный в параграфе «Изменение формата текста» второго занятия. 4. Для выполнения 4-го пункта задания, используйте материал, изложенный в параграфе «Горизонтальная строка» второго занятия. 5. Для выполнения 5-го пункта задания, используйте материал, изложенный в параграфе «Фон страницы» второго занятия. 6. Для выполнения 6-го пункта задания, используйте материал, изложенный в параграфе «Сохранение страницы» первого занятия.

16

Занятие № 3. Создание текстовой ссылки Цели По завершении изучения материала занятия вы сможете: • создавать текстовые ссылки; • создавать закладки; • использовать закладки при создании ссылок. Текстовая ссылка или гиперссылка — фрагмент текста, указывающий на другой файл или объект (это может быть другая страница, рисунок, закладка, файл программы и т.д.). Можно сказать, что ссылки позволяют “загрузить” какой-то ресурс. Адрес на который указывает ссылка представляется в виде URL (Uniform Resource Locator, Унифицированный указатель ресурса).

Создание текстовой ссылки на страницу Для того чтобы создать ссылку, выделите участок текста (который, собственно говоря, и будет являться ссылкой) и нажмите комбинацию клавиш + или выберите пункт Hyperlink (Гиперссылка) из меню Insert. Вы увидите диалоговое окно Create Hyperlink (Создание гиперссылки), показанное на рис. 3.1.

Рис. 3.1. Диалоговое окно Create Hyperlink (Создание гиперссылки). Совет: Вы можете быстро создать или отредактировать ссылку, выбрав нужный участок текста и нажав кнопку Hyperlink на панели инструментов. Вы можете устанавливать ссылки на объекты различных типов: на любой URL, используя при этом ваш Web-браузер, на любой файл, находящийся на вашем компьютере, на любой e-mail адрес. Вы можете также создать новую страницу и ссылка на эту страницу будет создана автоматически. Помимо этого, вы можете указать, что целью перехода является определенная закладка или что страница должна быть загружена в определенный фрейм. Ниже описаны различные способы создания гиперссылок: - Ссылки на страницы текущего сайта. В диалоговом окне Create Hyperlink (Создание гиперссылки) вы увидите перечень всех страниц вашего сайта, и на любую из них можно установить гиперссылку, для этого достаточно просто щелкнуть по имени страницы и название страницы появится в поле URL. Можно вручную записать имя страницы в поле URL, предварительно убрав протокол доступа. Обязательно укажите расширение. - Ссылки на URL. Вы можете ввести точный адрес (URL) страницы в текстовом поле или же нажать на кнопку Use your Web Browser to select a page (Указать страницу с помощью браузера). По нажатию этой кнопки запускается Web-браузер, установленный на вашем компьютере. Когда вы найдете нужную страницу в 17

-

-

Internet, и снова активизируете FrontPage, адрес этой страницы будет автоматически помещен в текстовое поле URL в диалоговом окне Create Hyperlink. Ссылки на локальные файлы. Если вы хотите установить гиперссылку на файл, находящийся на вашем компьютере, вы можете сделать это, используя кнопку Make a hyperlink to a file on your computer (Создать ссылку на файл находящийся на вашем компьютере). В появившемся диалоговом окне Select File (Выбор файла) вы можете указать нужный файл. Ссылки на адрес e-mail. Если вы хотите создать ссылку, которая позволяла бы посетителям вашего сайта отправить письмо по какому-либо электронному адресу, то в этом случае можно использовать кнопку Make a hyperlink that sends E-mail (Создать ссылку для отправки письма по электронной почте). Откроется диалоговое окно Create E-mail Hyperlink (Создание почтовой ссылки), изображенное на рис. 3.2. В этом окне вам достаточно просто ввести адрес получателя в текстовом поле. После щелчка по такой ссылке будет запускаться почтовый клиент с уже введенным адресом.

Рис. 3.2. Диалоговое окно Create E-mail Hyperlink - Ссылка на новую страницу. Данная возможность позволяет создать ссылку, указывающую на новую страницу. Нажатие на кнопку Create a page and link to the new page (Создать страницу и проставить ссылку) вызывает появление диалогового окна создания новой страницы New (Новая страница).. Вы также можете использовать две дополнительные возможности, предоставляемые диалогом Create Hyperlink: - Закладка. Если вы хотите, чтобы создаваемая гиперссылка указывала на закладку, установленную в целевом документе, вам необходимо ввести название закладки в предназначенном для этого поле Bookmark (Закладка). (см. ниже, Закладки.) Совет: Если щелкнуть по кнопке раскрытия списка, то вы увидите все закладки имеющиеся на целевой странице. Щелчок по нужной закладке выведет закладку в это текстовое поле. - Целевой фрейм. Чтобы указать, в каком фрейме должна отображаться страница, загружаемая в результате перехода по ссылке, введите название целевого фрейма в поле Target Frame (Целевой фрейм). (см. ниже, Занятие №5 – Фреймы) После того как будут сделаны все необходимые настройки для создаваемой ссылки, нажмите кнопку ОК. Вы увидите, что выделенный участок текста окрасился цветом, установленным по умолчанию для ссылок текущей страницы. Чтобы проверить новую ссылку, нажмите клавишу и щелкните по ссылке кнопкой мыши или перейдите на вкладку Preview и также щелкните по ссылке.

Редактирование ссылки Чтобы изменить существующую ссылку, выделите ее и выберите в меню Insert (Вставка) пункт Hyperlink (Гиперссылка). Также вы можете щелкнуть по ссылке правой кнопкой мыши и выбрать пункт Hyperlink Properties (Свойства гиперссылки) из контекстного меню. В появившемся диалоговом окне Edit Hyperlink (Редактирование гиперссылки) аналогичном окну Create Hyperlink (создание гиперссылки) вы можете изменить любой из необходимых параметров. 18

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

Создание закладки Для того чтобы создать закладку, проделайте следующее: 1. В той точке текста, куда вы хотите "перескакивать" по гиперссылке, выделите один или несколько символов. 2. Выберите Bookmark (Закладка) из меню Insert (Вставка). Появится диалоговое окно Bookmark (рис. 3.3). 3. Введите название закладки в строке Bookmark Name (Имя закладки). Старайтесь называть ваши закладки по возможности просто и понятно, потому что позже при простановке ссылок вам понадобится ввести имя закладки или выбрать его из списка. (Если документ уже содержит какие-либо закладки, то они будут отображены в данном диалоговом окне.) 4. После того как вы введете имя закладки, щелкните мышью по кнопке ОК. В Редакторе вы увидите, что отмеченный текст теперь подчеркнут пунктиром — это означает, что здесь установлена закладка. Совет: Для редактирования существующей закладки, щелкните по этой закладке правой кнопкой мыши и выберите из контекстного меню пункт Bookmark Properties (Свойства закладки) – появится диалоговое окно Bookmark. Также окно настройки можно получить, установив курсор на закладку и нажав комбинацию клавиш +<Enter>.

Рис. 3.3. Диалоговое окно Bookmark Поиск нужной закладки Для того чтобы быстро найти участок текста, соответствующий закладке, в диалоговом окне Bookmark, выделите закладку в списке и нажмите кнопку Goto (Переход). Нужный участок текста с выделенной закладкой отобразится на экране.

19

Удаление закладки Чтобы удалить закладку, выделите ее и выберите пункт Bookmark из меню Insert или щелкните на закладке правой кнопкой мыши и в контекстном меню укажите пункт Bookmark Properties. В появившемся диалоговом окне Bookmark выделите удаляемую закладку и нажмите кнопку Clear (Очистить). Диалоговое окно закроется и закладка будет удалена. Данная процедура не влияет на текст, она просто удаляет закладку. Использование закладки при создании ссылки Для того, чтобы использовать закладку при создании ссылки, ее необходимо указать в поле Bookmark (Закладка) диалогового окна Create Hyperlink (рис. 3.1). При этом, если закладка находится на той же странице, что и создаваемая ссылка, то можно сразу раскрыть список закладок, щелкнув по кнопке с черным треугольником (кнопка раскрытия списка) в поле Bookmark (Закладка), если закладка находится на другой странице, то вначале надо указать эту страницу, а затем раскрыть список закладок и выбрать необходимую.

Контрольные вопросы 1. 2. 3. 4.

Для чего предназначается ссылка? Для чего предназначается закладка? Можно ли по ссылке перейти в определенное место на странице? Можно ли создать ссылку на страницу, расположенную на другом сайте в интернете? 5. Как можно легко найти нужную закладку на вашей странице?

20

Занятие № 4. Рисунки Цели По завершении изучения материала занятия вы сможете: • вставлять на страницу рисунки; • создавать ссылки с рисунка; • создавать миниатюры предварительного просмотра; • редактировать свойства рисунка.

Вставка рисунка Чтобы на страницу вставить рисунок, установите курсор в нужное место страницы и меню Insert (Вставка) выберите пункт Picture (Рисунок), затем, в появившемся подменю щелкните левой кнопкой мыши по команде From File (Из файла). Появится диалоговое окно Picture (Рисунок) (рис. 4.1):

Рис. 4.1. Диалоговое окно Picture (Рисунок). Для того, чтобы вставить рисунок из текущего сайта, в поле Look in выберите нужную папку. В окне слева будут показаны все графические файлы из данной папки. Если вы выделите какойлибо файл, в правом окне будет показана уменьшенная копия рисунка, а кнопка ОК активизируется, щелчком мыши по этой кнопке Вы можете вставить выделенный (выбранный) рисунок на свою страницу. (Также можно вставить нужный рисунок, дважды щелкнув по нему мышкой.) Для того, чтобы вставить рисунок, который находится на дисках вашего компьютера, вне создаваемого сайта нажмите кнопку Select a file on your computer (эта кнопка находится справа от поля URL). В появившемся диалоговом окне обзора в поле Look in выберите папку где лежит рисунок и укажите этот рисунок, после чего нажмите на кнопку OK. Рисунок будет вставлен.

Сохранение рисунка Если вы вставили рисунок, то при следующем сохранении страницы FrontPage выведет диалоговое окно Save Embedded Files (Сохранить встроенные файлы, рис. 4.2):

Рис. 4.2. Диалоговое окно Save Embedded Files. 21

В левом окне отображается список рисунков, которые вы вставили в страницу, а в правом окне Picture Preview будет показана уменьшенная копия выделенного рисунка. В поле Embedded Files to Save имеется три столбца - Name (имя), Folder (папка) и Action (действие). - В столбце Name показано имя, которое FrontPage по умолчанию дает рисунку. Это имя можно изменить нажав на кнопку Rename (Переименовать). (Постарайтесь оставить расширение тем же.) - В столбце Folder показывается папка, в которой FrontPage предлагает сохранить рисунок. Вы можете сохранить рисунок в другой папке текущего сайта, нажав кнопку Change Folder... В появившемся диалоговом окне укажите нужную папку и нажмите ОК. - В столбце Action указывается действие, которое нужно выполнить относительно данного рисунка. По умолчанию в этом поле указывается Save. Если вдруг вы не захотите сохранять рисунок в текущем сайте (что не рекомендуется), то можете выбрать нужное действие, нажав на кнопку Set action. Появится диалоговое окно, изображенное на рисунке 4.3.

Рис. 4.3. Диалоговое окно Set action. В этом окне можно выбрать следующие опции: - сохранить файл (Save: Save this file); - не сохранять файл в текущем сайте (Don`t save: Don`t save and leave the reference in the page as is - Не сохранять этот файл в текущем сайте и оставить на странице ссылку на источник как есть) - этого лучше не делать. (Чем отличается рисунок на жестком диске компьютера и рисунок из своего web-сайта, который находится на вашем же компьютере? Очень часто web-мастера допускают ошибку, которую не видно со своего компьютера. Дело в том, что пока web-сайт находится на вашем компьютере, ему без разницы, где лежит рисунок - в папке "Мои документы" или в папке My Webs\Content (название может быть любое), так как вы имеете право на просмотр любой из этих папок. Но при переносе сайта в WWW или при создании web-сервера в интранете вашей организации для других посетителей рисунок, лежащий в "Моих документах" будет не виден, так как они не имеют права на просмотр этой папки. Рисунки (и страницы) надо располагать внутри сайта в других подпапках, например в папке images, которую FrontPage создает специально для рисунков при открытии нового web. Только не кладите их в папки, начинающиеся с подчеркивания, например _private и др., так как эти папки скрытые.) Если в папке в которой вы сохраняете рисунок, уже существует рисунок с тем же именем, то при сохранении файла диалоговое окно (рис. 4.4) будет немного другим:

Рис. 4.4 Диалоговое окно Set action с расширенным выбором 22

Это окно включает: - Overwrite: Overwrite the existing file with the new file and make the page refer to the new file - Переписать существующий файл и поставить на странице ссылку на новый графический файл. То есть файл рисунка будет переписан. Рекомендуется оставлять всегда резервную копию первоначального варианта рисунка, чтобы при сохранении изменений не потерять его без возможности восстановления; - Use Existing: Make the refer to the existing file - Оставить ссылку на существующий файл. - Don’t save: Don’t save this file and leave the reference in the page as is - Не сохранять этот файл в текущем сайте и оставить на странице ссылку на источник как есть. Если вы хотите вставить рисунок из набора ClipArt, нажмите в окне Picture кнопку ClipArt... (Или это можно сделать, выбрав в меню Insert -> Picture –> Clip Art.) Выберите понравившийся рисунок и нажмите Вставить клип, после чего рисунок будет вставлен в указанном месте. Сохраняя файл, укажите место, куда сохранять файл, и поменяйте ему имя, нажав на кнопку Rename. Чтобы вставить на страницу рисунок со сканера, нажмите кнопку Scan. В появившемся диалоговом окне (рис. 4.5):

Рис. 4.5. Диалоговое окно Camera / Scanner. Нажмите кнопку Source для того, чтобы определить источник рисунка(рис. 4.6):

Рис. 4.6. Диалоговое окно Select Source. Выберите нужный сканер и нажмите кнопку Select. Вернувшись в окно Camera / Scanner нажмите кнопку Acquire для того, чтобы начать процесс сканирования. Сохраните отсканированный рисунок в своем сайте. Если вы хотите (и автор рисунка разрешит вам это,) можете вставить чужой рисунок из WWW на свою страницу, непосредственно введя его адрес в поле URL или нажав на кнопку с глобусом и лупой (Use your Web Browser to select a page or file – Использовать ваш браузер для выбора страницы или файла) и отдельно открыв нужный рисунок в браузере (т.е. в поле Адрес вашего браузера должно стоять что-то вроде: http://www.bestpicture.com/naomy_campbell.jpg). После этого снова активизируйте FrontPage и тогда в поле URL будет проставлен адрес этого рисунка. В этом случае его загрузка будет происходить дольше. Вообще-то, лучше всего сохранять все рисунки у себя на сайте, однако если место для страницы у Вас ограничено, следует рассмотреть возможность вставки рисунков, которые лежат где-нибудь в WWW и пожертвовать скоростью загрузки рисунков.

23

Свойства рисунка Для того, чтобы изменить свойства рисунка, щелкните по нему правой кнопкой мыши и в контекстном меню выберите Picture Properties или выделите рисунок и нажмите [Alt]+[Enter], или в меню Format (Формат) выберите пункт Properties (Свойства). Появится диалоговое окно Picture Properties с тремя вкладками General, Video и Appearance. Вкладка General (рис. 4.7) показывает основные данные о рисунке - его источник, расширение графического файла, альтернативную надпись, гиперссылку и т.п.

Рис. 4.7. Диалоговое окно Picture Properties вкладка General. -

-

В поле Picture Properties указывается местоположение файла в структуре вашего сайта или в WWW. Нажав кнопку Browse можете выбрать другой рисунок, а нажав кнопку Edit - отредактировать рисунок если установлен графический редактор. В области Туре указывается тип файла – GIF, JPEG или PNG. Для каждого из форматов активизируются свои поля. o Для формата GIF можете поставить галочку Transparent чтобы сделать рисунок прозрачным, но это только в том случае, если в рисунке уже были прозрачные области. И, соответственно, убрать эту галочку, чтобы сделать прозрачный рисунок непрозрачным. Рекомендуется также ставить галочку Interplaced - она позволяет постепенно загружать рисунок, который по мере загрузки становится все более четким. Если ее не ставить, то браузер не отобразит рисунок до полной его загрузки. o Для формата JPEG можно увеличить качество рисунка, пожертвовав временем его загрузки. Для этого увеличьте число в поле Quality. В поле Progressive Passes установите количество этапов загрузки рисунка. Если хотите, можете изменить одно расширение на другое, просто указав в этом окне другое расширение, при этом будет создана копия рисунка с тем же именем и другим расширением. В области Alternative Representations (Альтернативное представление) указывается альтернативное содержание рисунков: o Выберите в поле Low-Res кнопкой Browse рисунок с более низким разрешением или меньшего объема. (Опция полезна тогда, когда большие рисунки долго грузятся и в это время можно отобразить рисунок с меньшим разрешением.) Эта опция не обязательна. o Введите в поле Text какой-нибудь текст, который объяснил бы суть рисунка пользователям, у которых в браузерах отключена опция "Отображать рисунки" или владельцам браузеров, не поддерживающих рисунки. Например, если рисунок является гиперссылкой, здесь можно поставить подсказку, которая объяснит посетителям, куда ведет эта ссылка. То есть, если на рисунке 24

-

проставлен ссылка, можно написать "Перейти на следующую страницу данного раздела". В области Default Hyperlink: o В поле Location укажите ссылку на файл, закладку или же оригинал уменьшенной копии рисунка. o Если ваша страница содержит фреймы, введите имя фрейма в поле Target Frame.

Во вкладке Video (рис. 4.8) устанавливаются свойства видеозаписи. - Файл видеозаписи. - Галочка Show Controls in Browser отобразит в браузере кнопки управления видеозаписью - запустить, остановить, повторить видеозапись; - Укажите, сколько раз повторять видеозапись на странице. Галочка в поле Forever (Всегда) инициирует постоянное повторение видеозаписи; - В поле Loop Delay (задержка) укажите в миллисекундах паузу между показами видеозаписи; - В поле Start укажите, когда запускать видеозапись: o On File Open - при открытии файла; o On Mouse Over - при наведении мыши.

Рис. 4.8. Диалоговое окно Picture Properties вкладка Video. На вкладке Appearance (рис. 4.9) указывается:

Рис. 4.9. Диалоговое окно Picture Properties вкладка Appearance. 25

-

В поле Alignment - положение рисунка относительно текста: o Left - слева от текста. Текст будет обтекать рисунок по правому краю рисунка; o Right - справа от текста. Текст будет обтекать рисунок по левому краю; o Top - текст будет располагаться наравне с верхней границей рисунка и под ним; o Texttop - Самая верхняя часть букв текста будет выровнена с верхним краем рисунка; o Middle - Выравнивает текст по центру рисунка; o Absmiddle - Выравнивает рисунок с серединой текущей строки. o Baseline - Выравнивает рисунок с базовой линией текущей строки. Базовая линия - воображаемая линия, которая проходит по низу букв; o Bottom - выравнивает низ рисунка с окружающим текстом; o Absbottom - выравнивает рисунок с низом текущей строки; o Center - выравнивает центр рисунка с окружающим тестом. - В поле Border Thickness указывается толщина рамки вокруг рисунка в пикселях. Здесь можно указать 0 для того, чтобы вокруг рисунка не было синей рамки когда на ней установлена гиперссылка. - В поле Horizontal Spacing и Vertical Spacing укажите отступ от рисунка до текста соответственно горизонтальный и вертикальный; - В поле Size указываются размеры рисунка: o Поставьте галочку Specify Size для того, чтобы указать специальный размер для рисунка в пикселях или в процентах от оригинала; o Поставьте галочку Keep Aspect Ratio для того, чтобы при изменении одного размера рисунка в пикселях, пропорционально изменялся и другой рисунок. Примечание: Когда рисунок выделен, по углам и посередине каждой из сторон рисунка отображаются небольшие квадраты, если навести указатель мыши на один из этих квадратов и нажав левую кнопку мыши начать перемещать ее, удерживая кнопку в нажатом состоянии, то размеры рисунка будут изменяться.

Создание ссылки с рисунка Рисунок можно использовать для создания ссылки. Для этого выделите рисунок и в меню Insert (Вставка) выберите команду Hyperlink (Гиперссылка), появится уже знакомое вам окно создания ссылки Create Hyperlink (Создание гиперссылки), все действия в нем аналогичны действиям при создании текстовой ссылки (см. Задание №3 Создание текстовой ссылки).

Создание миниатюры предварительного просмотра Миниатюры предварительного просмотра предназначены для того, чтобы вместо исходного большого рисунка (рисунков) который(ые) вероятнее всего приведет(ут) к замедлению загрузки страницы, вставить небольшую копию (миниатюру предварительного просмотра) и тем самым ускорить загрузку страницы. С этой небольшой копии автоматически проставляется ссылка на исходный рисунок и посетитель при желании может щелкнуть по миниатюре предварительного просмотра и загрузить оригинал рисунка. Чтобы создать миниатюру предварительного просмотра необходимо вначале вставить на страницу оригинал рисунка. Затем щелчком мыши по рисунку необходимо выделить его, должна появиться панель инструментов Picture (Рисование) (Рис.4.10). (Если эта панель на появилась, то вызвать ее можно с помощью команды View (Вид) –> Toolbars (Панели инструментов) – > Picture (Рисование).)

26

Рис. 4.10 Панель рисования. Если на этой панели инструментов щелкнуть мышью по кнопке AutoThumbnail (Миниатюра предварительного просмотра), то FrontPage создаст уменьшенную копию оригинала, заменит исходный рисунок на эту копию и автоматически проставит ссылку на исходный рисунок.

Разделяемые рисунки С одного и того же рисунка можно проставить несколько ссылок, делается это с помощью кнопок Rectangular hotspot (прямоугольная область выделения), Circle hotspot (область выделения в виде круга) и Polygon hotspot (многоугольная область выделения). • Чтобы создать прямоугольную область выделения надо щелкнуть кнопкой мыши по кнопке Rectangular hotspot (прямоугольная область выделения) на панели рисования, затем установить указатель мыши в начало области выделения (указатель в этот момент должен принять форму карандаша) нажать кнопку мыши и не отпуская ее переместить мышь, после того, как вы отпустите кнопку мыши возникнет окно создания ссылки Create Hyperlink в котором надо будет указать адрес ссылки. • Чтобы создать круглую область выделения надо щелкнуть мышкой по кнопке Circle hotspot (круглая область выделения) на панели рисования, затем установить указатель мыши в центр области выделения (указатель в этот момент должен принять форму карандаша) нажать кнопку мыши и не отпуская ее переместить мышь, после того, как вы отпустите кнопку мыши возникнет окно создания ссылки Create Hyperlink в котором надо будет указать адрес ссылки. • Чтобы создать многоугольную область выделения надо щелкнуть кнопкой мышки по кнопке Polygon hotspot (многоугольная область выделения) на панели рисования, затем установить указатель мыши в первую точку области выделения (указатель в этот момент должен принять форму карандаша) и щелкнуть один раз левой кнопкой мыши: возникнет небольшой квадрат, затем надо (отпустив кнопку мыши) переместить указатель мыши к следующей точке (вы увидите как вслед за указателем тянется полоса выделения) и снова щелкнуть кнопкой мыши. Таким образом надо обвести весь контур области выделения. После того, как вы замкнете область – т.е. вновь щелкните мышью на первой точке области выделения возникнет окно создания ссылки Create Hyperlink в котором надо будет указать адрес ссылки.

27

Контрольные вопросы 1. Как вызвать окно свойств рисунка? 2. Какое действие (Action) лучше всего выбирать при сохранении рисунка? Поясните ответ. 3. Как назначить обтекание рисунка текстом справа? 4. Почему рекомендуется использовать миниатюры предварительного просмотра для больших рисунков? 5. Для чего предназначается поле Text в окне свойств рисунка?

Задание № 2 для самостоятельной работы Целью данного задания является закрепление навыков создания закладок и ссылок и вставки рисунков.

Описание задания: 1. Откройте страницу one.htm. 2. Введите текст «Ссылка на сайт Бурятского регионального центра Интернетобразования». 3. Выделите участок текста и создайте ссылку на www.buryatia.fio.ru. 4. Вставьте рисунок (по вашему усмотрение). 5. Создайте ссылку с рисунка на страницу любую страницу вашего сайта. 6. Сохраните изменения

Методические указания к выполнению задания: 1. Для выполнения первого пункта, если Редактор не запущен, запустите его одним из способов, описанных в параграфе «Запуск Редактора» первого занятия, откройте ваш сайт, для помощи используйте материал изложенный в параграфе «Открытие сайта» первого задания, для открытия страницы используйте материал изложенный в параграфе «Открытие страницы» первого задания. 2. Для выполнения второго пункта задания используйте материал, описанный в параграфе «Вставка и удаление текста» второго занятия. 3. Для выполнения 3-го пункта задания, используйте материал, изложенный в параграфе «Создание текстовой ссылки» третьего занятия. 4. Для выполнения 4-го пункта задания, используйте материал, изложенный в параграфе «Вставка рисунка» четвертого занятия. 5. Для выполнения 5-го пункта задания, используйте материал, изложенный в параграфе «Создание ссылки с рисунка» четвертого занятия. 6. Для выполнения 6-го пункта задания, используйте материал, изложенный в параграфе «Сохранение страницы» первого занятия.

28

Занятие 5. Фреймы Цели По завершении изучения материала занятия вы сможете: • создавать фреймы; • компоновать фреймсеты; • редактировать свойства фрейма, фреймсета; • выделять страницы во фреймсете; • отображать страницы во фрейме. Фреймы (Frames) — это прямоугольные области на Web-странице, в которых демонстрируются отдельные страницы или изображения. Для создания фреймов во Frontpage обычно используются шаблоны.

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

Фреймсеты Фреймсет (frameset) в действительности является отдельной страницей, содержащей информацию о составляющих страницы фреймов. Эта информация отправляется серверу для загрузки в браузер соответствующих файлов. Если во фреймсете отображаются три страницы то к ним надо добавить еще одну для самого фреймсета. В итоге получается, что число страниц, необходимых для отображения такой конструкции, равно четырем. Это означает: для того, чтобы вывести подобную страницу, браузеру придется четырежды обратиться к серверу. Поэтому особенно увлекаться не стоит. Редактор Frontpage выводит все части фреймсета вместе, на одной странице так, как они будут отображаться в браузере.

Работа с фреймами Для того, чтобы сделать страницу, состоящую из фреймов, выберите в меню File пункт New, и затем щелкните по команде Page. Появится диалоговое окно New в котором необходимо активизировать вкладку Frames Pages (Фреймы), имеющая несколько шаблонов раскладки страницы на фреймы. Щелкнув на каком-либо из предлагаемых вариантов, можно посмотреть его внешний вид в поле Preview. Выберите желаемый вариант и нажмите ОК. В редакторе появится шаблон создания фреймсета (Рис. 5.1), состоящий из других страниц, которые нужно назначить.

29

Рис. 5.1. Диалоговое окно FrontPage с создаваемыми фреймами. Если у Вас уже есть страницы, из которых можно составить фреймовую страницу, то нажмите Set Initial Page и выберите нужные страницы. Если же вы только создаете их, выберите New Page, и тогда будет создана новая страница.

Задание страницы фреймов Когда вы начинаете создавать страницу фреймов, составляющие ее страницы еще не определены. До того как начать заполнять страницы информацией, вам предстоит сделать выбор: - Set Initial Page (Задать начальную страницу). Начальная страница (Initial page) — это страница, которая будет видна при открытии фрейма. Нажав эту кнопку, вы перейдете в диалоговое окно Create Hyperlink (Создать гиперссылку). Далее вы сможете установить ссылку на любую страницу сайта. - New Page (Новая страница). Если вы нажмете эту кнопку, то во фрейм будет загружена новая чистая страница. Это обычная страница, созданная по шаблону Normal.

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

Свойства фрейма Для вызова окна свойств фрейма, щелкните правой кнопкой мыши в этом фрейме и в появившемся контекстно-зависимом меню выберите команду Frame Properties (или выделив фрейм, в меню Frame выберите команду Frame Properties). Появится диалоговое окно Frame Properties, показанное на рис. 5.2. В текстовом поле Name указано имя текущего фрейма, вы можете ввести любое другое имя. Также можно задать другую начальную страницу, введя ее имя в текстовом поле Initial Page или нажав кнопку Browse. После нажатия этой кнопки появится диалоговое окно Edit Hyperlink (Редактировать гиперссылку), аналогичное окну Create Hyperlink (Создать гиперссылку).

30

Рис. 5.2. Диалоговое окно Frame Properties. В этом окне есть еще три области, предназначенные для более детальной настройки параметров страницы: - Options (Опции). Здесь вы можете указать, следует ли позволить пользователю браузера по своему усмотрению изменять размеры фрейма. По умолчанию флажок Resizable in Browser установлен, и для большинства страниц разумно будет его оставить. Здесь же (поле Show Scrollbars) вы можете установить, в каких случаях браузер будет показывать полосы прокрутки: по необходимости (опция if Needed), никогда (опция Never) или всегда (опция Always). По умолчанию установлено значение if Needed; в подавляющем большинстве случаев вам не придется его менять, если только у вас не будет очень веских причин совсем запретить прокрутку этой страницы. Если вы выберете опцию Always, то полосы прокрутки всегда будут присутствовать на странице, независимо от степени ее заполнения и размера окна браузера пользователя. - Frame Size (Размер фрейма). В этой секции можно отрегулировать ширину Width (Ширина) и высоту Row Height (Высота строки) фрейма. Опции установки ширины разрешены, если фрейм занимает не всю ширину окна, а имеет соседей справа или слева. Значение Relative (Относительно) означает, что размер фрейма будет вычисляться с учетом размеров соседних по горизонтали фреймов. Значение Percent (Проценты) означает, что при отображении в браузере ширина фрейма будет составлять указанное количество процентов от полной ширины окна. А если вы захотите задать точную ширину фрейма, введите ее значение и установите опцию Pixels (Пикселы). Если фрейм по высоте занимает не все окно, т. е. выше или ниже него располагаются другие фреймы, то эти опции доступны. Значения их имеют тот же смысл, что и для ширины фрейма. Когда вы изменяете размеры одного из фреймов, то и размеры всех фреймов, которых эти изменения касаются, корректируются соответствующим образом. - Margins (Поля). Если вы хотите установить размер полей в странице, введите для них значения ширины и высоты в текстовых полях Width и Height соответственно, тогда все содержимое этой страницы будет отображаться с заданным отступом. Нажав кнопку Frames Page, вы попадете в диалоговое окно установки свойств страницы фреймов Page Properties. При этом вы увидите диалоговое окно Page Properties, открытое на вкладке Frames. В нем можно установить две опции: • Frame Spacing (Расстояние между фреймами). В этом окне устанавливается ширина границы между фреймами в пикселах. • Show Borders (Показывать рамки). Установив или сняв этот флажок, можно сделать рамки фреймов видимыми или невидимыми соответственно. Примечание: Вкладку Frames в окне Page Properties можно получить если перейти в режим No Frames и в меню File выбрать команду Properties.

31

Сохранение фреймов и фреймсетов Первое сохранение фреймов и фреймсетов Сохранение происходит в основном так же, как и в случае первого сохранения обычных страниц, но с одним отличием. Если во фреймсете были созданы новые страницы, то когда вы в первый раз сохраняете фрейм, в диалоговом окне Save As появляется миниатюрное схематическое изображение вашего фреймсета, в котором цветом выделена текущая сохраняемая страница, так, как изображено на рис. 5.3. Благодаря этому вы видите, какая страница в данный момент будет сохранена и ее имя. Подробности процедуры сохранения страниц изложены в разделе “Занятие №1 - Сохранение страниц”. Когда вы дадите странице имя и нажмете кнопку ОК, на миниатюре будет подсвечена следующая страница и т. д. Когда вы запишете все фреймы, очередь дойдет до сохранения страницы фреймсета.

Рис 5.3. Первое сохранение страницы фреймов

Удаление фрейма Если вы хотите удалить фрейм из фреймсета, отметьте его и выберите в меню Frame опцию Delete Frame. Фрейм будет удален, а оставшиеся заполнят собой освободившееся пространство окна.

Открытие страницы в новом окне Если вы хотите просмотреть фрейм в своем собственном окне вне фреймсета, щелкните на странице правой кнопкой мыши и в контекстном меню выберите Open Page in New Window (Открыть страницу в новом окне), такая же команда присутствует в меню Frame.

Разбиение страницы во фреймсете Уже создав фреймсет по одному из шаблонов фреймов, вы можете сообразить, что в нем явно не хватает еще одного фрейма. Исправить дело можно двумя различными способами: через меню Frame или с помощью клавиатуры. I. Использование меню Frame: 1. Щелчком кнопки мыши выберите фрейм, который вы хотите разделить. При этом страница этого фрейма будет выделена цветным контуром. 2. Выберите в меню Frame команду Split Frame (Разбить фрейм). На экране появится диалоговое окно Split Frame, показанное на рис. 5.4.

32

Рис. 5.4. Диалоговое окно Split Frame 3. Установите переключатель в положение Split into Columns (Разбить на столбцы) или Split into Rows (Разбить на строки) и нажмите кнопку ОК. I I. Использование клавиатуры: 1. Установите курсор мыши на рамку фрейма, который надо разбить; 2. Нажмите клавишу и, не отпуская ее, щелкните кнопкой мыши на границе между фреймами, удерживая кнопку мыши в нажатом состоянии переместите курсор, при этом граница текущего фрейма последует вслед за мышью, а на освободившемся пространстве образуется новый фрейм. 3. Когда вы достигнете желаемого результата, отпустите клавишу и кнопку мыши — новый фрейм будет создан.

Назначение целевого фрейма для ссылки Создаваемой ссылке можно назначить определенный фрейм в котором и будет отображаться загружаемая страница. Для этого в окне Create Hyperlink (Создать гиперссылку) вам необходимо щелкнуть по кнопке Change Target Frame (Изменить целевой фрейм)(Рис. 5.5)

Рис. 5.5 Окно создания ссылки Create Hyperlink (Создать гиперссылку). Появится диалоговое окно Target Frame (Рис.5.6). В левой части этого окна (Current frames page) отображаются все фреймы имеющиеся в вашем фреймсете. Для указания целевого фрейма щелкните мышью на любом фрейме, фрейм будет выделен и имя фрейма появится в поле Target Setting, после чего можно смело нажать OK.

Рис.5.6 Диалоговое окно Target Frame (Целевой фрейм). 33

Кроме этого в области Common target выводятся дополнительные опции расширяющие выбор целевых фреймов. - Page default. Страница будет загружаться во фрейм и без того назначенный целевым фреймом по умолчанию. - Same Frame. Страница будет загружаться в тот же самый фрейм в котором находится ссылка. - Whole Page. Раскладка окна браузера на фреймы будет отменена и страница займет все окно. - New Window. Страница будет загружена в новое окно браузера. - Parent Frame. Страница будет загружена в родительский фрейм. Если при выборе какого-то фрейма вы поставите отметку в поле Set as page default то этот фрейм станет целевым фреймом по умолчанию.

Назначение целевого фрейма по умолчанию Если у вас есть страница со множеством ссылок и вы не хотите назначать целевой фрейм каждой из них по отдельности, вы можете связать их все с целевым фреймом по умолчанию (default target frame). Целевые фреймы по умолчанию задают фрейм назначения для всех ссылок страницы, включая графические, которые не связаны с явно указанными целевыми фреймами. Чтобы задать целевой фрейм по умолчанию: 1. Щелкните правой кнопкой мыши на любом месте открытой в Редакторе страницы и выберите в контекстном меню Page Properties. 2. В диалоговом окне Page Properties перейдите на вкладку General (Общие), нажмите кнопку справа от текстового окна Default Target Frame. На экране появится диалоговое окно Target Frame. Укажите в нем фрейм, который вы хотите установить по умолчанию, и нажмите кнопку ОК. Но у вас по-прежнему остается возможность назначения отдельным гиперссылкам целевых фреймов, отличных от заданного по умолчанию.

Вкладки просмотра фреймов В первый раз открыв фреймсет в Редакторе, вы увидите в нижней части окна новые вкладки. На каждой из этих вкладок вы увидите различную картину: - No Frames (Без фреймов). Здесь отображается экран в том виде, как его увидит пользователь, пытающийся просмотреть вашу страницу фреймов в браузере, не поддерживающем фреймы. Здесь вы можете разместить любой текст; как правило, это бывает пожелание пользователю поскорее сменить браузер. - Frames Page HTML (Код HTML страницы фреймов). В этом окне можно просматривать и редактировать код HTML фреймсета. Редактируйте его с особой осторожностью, не меняйте ничего, пока не приобретете достаточного опыта работы в HTML и фреймах.

Контрольные вопросы 1. 2. 3. 4. 5. 6.

Назовите самый распространенный случай использования фреймов. Зависит ли число обращений к серверу от количества фреймов в сайте? Что такое фреймсет? Можно ли фрейму назначить еще не созданную страницу? Как отменить показ разделительной линии между фреймами? Как создать дополнительный фрейм?

34

Занятие № 6. Дополнительный дизайн Цели По завершении изучения материала занятия вы сможете: • использовать подвижные кнопки; • вставлять бегущие строки; • назначать темы.

Подвижные кнопки Чтобы создать подвижную кнопку выберите в меню Insert команду Component и затем Hover Button в появившемся подменю. Это приведет к открытию диалогового окна Hover Button, показанного на рис 6.1. В окне Hover Button находится ряд стандартных опций, а также несколько более экзотических, обеспечивающих любопытные дополнительные возможности, такие, как проигрывание звукового файла или использование изображения в качестве кнопки. В число стандартных опций входят следующие: • Button Text (Текст на кнопке) Большинство кнопок на Web-страницах снабжены текстом, поясняющим, чего следует ожидать при нажатии на них. Текст, который вы хотели бы разместить на кнопке, введите в текстовом поле Button Text. • Link to (Ссылка). Если с кнопкой должна быть связана гиперссылка, введите ее URL в этом текстовом поле или задайте URL, нажав кнопку Browse. • Button color (Цвет кнопки). Этот раскрывающийся список служит для задания цвета кнопки. Если для кнопки вы выберете изображение (опция Custom), то задавать здесь цвет ни к чему. • Effect (Эффект), Effect color (Цвет эффекта). В списке Effect вы можете выбрать один из множества визуальных эффектов. Цвет кнопки выбирается в раскрывающемся списке Effect Color. Здесь есть ряд интересных вариантов, так что поэкспериментируйте и выберите тот, который лучше всего подходит. • Width (Ширина), Height (Высота). Здесь следует ввести значения соответственно ширины и высоты (в пикселах) вашей кнопки. Если в качестве кнопки вы используете изображение, то в этих полях следует проставить его размеры. • Не обращайте внимания на кнопку Background Color.

Рис. 6.1 Диалоговое окно Hover Button Чтобы добраться до специальных опций подвижной кнопки, нажмите в нижней части диалогового окна Hover Button кнопку Custom. При этом откроется диалоговое окно Custom, показанное на рис. 6.2. (Это окно разделено на две части, в каждой из которых имеют место всего по два параметра.)

Рис. 6.2. Диалоговое окно Custom 35

-

-

Play Sound (Проигрывать звук). В этой секции можно задать звук, который будет воспроизводиться, когда пользователь щелкнет по кнопке мышью (On click) или проведет курсор мыши над ней (On hover). Можно проигрывать звук в обоих случаях, но это не самое разумное решение. Для поиска звуковых файлов используется стандартный диалог Browse. Custom Image (Заказное изображение). Если вам кажется, что в графическом исполнении ваша кнопка будет смотреться лучше, нажмите рядом с полем Button кнопку Browse и выберите подходящий рисунок. А если вам нужно, чтобы изображение на кнопке появлялось, когда пользователь проводит над ней мышью, то аналогичным образом укажите изображение в поле On hover. He забудьте, что в диалоговом окне Hover Button вам нужно будет ввести для выбранных здесь изображений правильные значения ширины и высоты.

Изменение параметров подвижной кнопки Окно свойств Hover Button можно вызвать щелкнув правой кнопкой мыши на существующей подвижной кнопке и выбрав в контекстном меню Hover Button Properties, или двойным щелчком на существующей кнопке, или выделив подвижную кнопку, нажать комбинацию клавиш +<Enter>.

Бегущая строка Бегущие строки — это элементы HTML, позволяющие вставить в страницу движущийся текст (Браузером Netscape Navigator не поддерживаются). Установите курсор в то место страницы, где должна располагаться бегущая строка. Выберите в меню Insert (Вставка) пункт Components (Компоненты) и далее Marquee (Бегущая строка. На экране появится диалоговое окно Marquee Properties (Свойства бегущей строки), показанное на рис. 6.3. 1. В поле Text введите текст бегущей строки. 2. В секции Direction (Направление) укажите направление движения строки — Left (Влево) или Right (Вправо). (Если на шаге 5 в секции Behavior будет выбрано положение Alternate, то задавать направление движения в этом месте не нужно.) 3. В секции Speed (Скорость движения) введите значения задержки (Delay) и шага (Amount). Задержка определяет интервал в миллисекундах между последовательными перемещениями строки. Шаг задает расстояние в пикселах между последовательными положениями строки. Манипулируя двумя этими значениями, можно заставить "бегать" вашу строку с любой скоростью.

Рис. 6.3. Диалоговое окно Marquee Properties (Свойства бегущей строки). 4. В секции Behavior (Поведение) выберите одну из следующих опций: - Scroll (Прокрутка). В этом случае строка движется по экрану в направлении, указанном в секции Direction. Текст появляется из-за границы области, отведенной бегущей строке, и исчезает за противоположным краем ; - Slide (Сдвиг). Этот вариант отличается от предыдущего тем, что строка, достигнув противоположного края, останавливается, и текст остается на экране; - Alternate (Попеременно). При этом значении параметра Behavior текст бегущей строки движется попеременно то в одну, то в другую сторону.

36

6.

7. 8. 9.

5. В секции Align with Text (Расположение текста) укажите, как должен располагаться текст. Текст можно прижать к верхней границе поля строки (Toр), к нижней границе (Bottom) или разместить посередине (Middle). В секции Size устанавливается размер прямоугольной области, отведенной бегущей строке. Чтобы задать ширину, установите флажок Specify Width. Если вы задаете ширину в пикселах, то введите нужное значение и выберете переключатель In Pixels; если ширина должна быть задана в процентах от ширины экрана, то введите ее значение и выберите переключатель In Percent. Чтобы задать размер области бегущей строки по вертикали, установите флажок Specify Height. Чтобы задать высоту в пикселах, введите число и выберите In Pixels либо, соответственно. In Percent, чтобы задать высоту строки в процентах от высоты окна браузера. Эти значения можно не устанавливать, тогда браузер сам определит их наилучшим образом. В секции Repeat задайте число "пробегов" строки или, если вы хотите, чтобы строка бежала постоянно, установите флажок Continuously (Непрерывно). При желании задайте для бегущей строки цвет фона, выбрав его из раскрывающегося списка Background Color. Если на странице имеется какой-то фон, то лучше оставить значение Automatic, в этом случае в качестве фона будет использоваться фон страницы. Произведя все необходимые установки, нажмите кнопку ОК.

Изменение формата текста бегущей строки Чтобы изменить формат текста бегущей строки, надо в диалоговом окне Marquee Properties (Свойства бегущей строки)(Рис.6.3) щелкнуть по кнопке Style (Стиль) и в появившемся диалоговом окне Modify Style (Модификация стиля) щелкнуть по кнопке Format (Формат) в активизировавшемся меню, выберите пункт Font (Шрифт). Появится знакомое вам окно Font (Шрифт) в котором и можно указать необходимые опции. Примечание: Вызвать окно форматирования текста для бегущей строки, можно также щелкнув правой кнопкой мыши в области бегущей строки и в контекстном меню выбрав команду Font (Шрифт). Изменение параметров бегущей строки Чтобы изменить параметры бегущей строки, щелкните на ней правой кнопкой мыши и выберите в контекстном меню пункт Marquee Properties (Свойства бегущей строки), либо дважды щелкните левой кнопкой; при этом откроется уже знакомое вам диалоговое окно Marquee Properties (Свойства бегущей строки). Сделайте необходимые исправления и нажмите кнопку ОK.

DHTML эффекты FrontPage позволяет создавать для параграфов и рисунков эффекты динамического HTML – DHTML. Для этого применяется панель DHTML Effects (Эффекты DHTML) (Рис.6.4), вызвать которую можно выбрав команду Dynamic HTML Effects (Эффекты динамического HTML) в меню Format (Форматирование) или активизировав ее через меню View (Вид) -> Toolbars (Панели инструментов) -> DHTML Effects (Эффекты DHTML).

Рис.6.4 Панель DHTML Effects (Эффекты DHTML). Использование панели Для того, чтобы применить какой-либо эффект надо вначале в поле выбора с выпадающим списком On (Событие) выбрать событие при совершении которого будет проявляться эффект. Предлагаемых событий 4 (четыре): • Click – щелчок левой кнопкой мышки на рисунке или параграфе. • Double click – двойной щелчок левой кнопкой мышки на рисунке или параграфе. 37

• Mouse over – указатель мышки наведен на рисунок или параграф. • Page load – страница загружена. После выбора события активизируется следующее поле Apply (Применить), в котором надо выбрать применяемый эффект. В зависимости от выбранных события и эффекта может активизироваться следующее поле в котором надо выбрать дополнительную опцию. Примечание: Список возможностей в поле Apply меняется в зависимости от выбранного объекта: рисунок это или параграф. Удаление эффекта Для удаления эффекта нажмите кнопку Remove effect (Удалить эффект). Снятие выделения с области эффекта Для того, чтобы снять цветовое выделение с области эффекта нажмите кнопку Highliht Dynamic HTML Effect (Выделить область динамического эффекта). Внимание: Данные эффекты работают только в Internet Explorer 5 и выше.

Темы Темы (Theme) главным образом предназначены для того, чтобы единым образом оформить весь сайт, но можно применить какую-то тему и к отдельной странице. Для назначения темы надо в меню Format (Формат) выбрать пункт Theme (Темы). Появится диалоговое окно Themes (Темы) (Рис 6.5).

Рис 6.5. Диалоговое окно Themes (Темы) В этом окне можно: • в поле Apply theme to (Применить темы) указать, что выбранную тему надо применить ко всему сайту – переключатель All pages (Все страницы) или только к активной странице - переключатель Selected page(s) (Выбранная страница). • В расположенном ниже списке выбрать определенную тему. • Поставить отметку в полях : o Vivid Colors (Яркие цвета) - будут использованы более яркие цвета. o Active graphics (Активная графика) – навигационные кнопки преобразуются в кнопки hover button. o Background picture (Фоновый рисунок) – в качестве фона страницы будет использован рисунок. o Apply using CSS (Применить CSS) – будут использованы каскадные таблицы стилей (см. Дополнение - Стили). • Видоизменить существующую тему – кнопка Modify (Модифицировать). Модификация существующей темы Кнопка Modify (Модифицировать) выводит дополнительный набор кнопок с помощью которых можно изменить цвет: кнопка Colors (Цвета), рисунки: кнопка Graphics (Графика), текст: кнопка Text (Текст) выбранной темы, а также сохранить эти изменения: кнопки Save (Сохранить) и Save As (Сохранить как). 38

o При нажатии на кнопку Colors (Цвета) появится окно Modify Theme (Изменение темы)(Рис 6.6), с 3 (тремя) вкладками. На первой вкладке Color Schemes (Цветовые схемы) можно выбрать одну из предуготовленных цветовых схем.

Рис 6.6. Окно Modify Theme (Изменение темы). На второй вкладке Color Wheel (Цветовое колесо) (Рис. 6.7) можно изменить цвета темы с помощью перемещения небольшого кружка по цветовой окружности. А также изменить яркость цвета, перемещая бегунок Brightness (Яркость).

Рис. 6.7. Вкладка Color Wheel (Цветовое колесо). На третьей вкладке Custom можно изменить цвета темы выбирая теги из списка Items и назначая им цвета из списка Color. o При нажатии на кнопку Graphics появится окно Modify Theme (Изменение темы)(Рис 6.8), с 2 (двумя) вкладками. Если в поле Items выбрать какой-либо тег, то на первой вкладке Picture (Рисунки) можно указать рисунок (рисунки), который будет применен к этому тегу. На вкладке Font (Шрифт) можно указать шрифт, начертание, размер, горизонтальное и вертикальное выравнивание для выбранного тега (если он позволяет это сделать).

Рис 6.8 Окно Modify Theme (Изменение темы) с возможностью изменения графики. o При нажатии на кнопку Text появится окно изображенное на рис.6.9. В этом окне можно выбрать тег из списка Items и указать для него шрифт в списке Font. Если нажать на кнопку More Text Styles (Другие стили текста), то в следующем окне можно будет осуществить выбор из большего количества тегов. Выбрав один из них, и нажав на кнопку Modify (Модифицировать) вы получите дополнительное окно Modify Style, в котором имеется кнопка Format, при нажатии на которую появится меню, в котором есть 39

пункт Font, щелчок по этому пункту выводит окно Font, где вы и сможете задать параметры текста. После чего необходимо последовательно нажимать на кнопки OK, для того, чтобы вернуться в Themes и в этом окне сохранить свои установки нажав на кнопку Save As и задав имя для измененной темы.

Рис.6.9 Окно Modify Theme (Изменение темы) с возможностью выбора шрифта.

Контрольные вопросы 1. 2. 3. 4. 5.

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

40

Занятие № 7. Публикация сайта Цели По завершении изучения материала занятия вы сможете: • опубликовывать свой сайт.

Публикация на сервере имеющем серверные расширения FrontPage Для публикации созданного вами сайта на каком-либо сервере, имеющем серверные расширения FrontPage, необходимо выбрать в меню File (Файл) команду Publish Web (Опубликовать сайт). Появится диалоговое окно Publish Web (Опубликовать сайт) (Рис.7.1). В этом окне, в поле Specify the location to publish your web to (Укажите адрес вашего сайта) введите URL (интернет - адрес по которому находится ваш сайт). И нажмите на кнопку Publish (Опубликовать).

Рис.7.1.Диалоговое окно Publish Web (Опубликовать сайт). Вам будет предложено ввести свои имя и пароль. После ввода имени и пароля нажмите кнопку OK и FrontPage перепишет ваши данные на сервер (Рис. 7.2) и уведомит вас об успешном окончании (Рис 7.3). В дальнейшем при изменении содержимого сайта (редактировании страниц, добавлении страниц, удалении и т.д.) время от времени нажимайте на кнопку Publish Web (Опубликовать сайт) находящуюся на панели инструментов.

Рис.7.2.Окно показывающее процесс переноса файлов на сервер.

Рис.7.3.Окно завершения копирования.

Публикация на сервере не имеющем серверные расширения FrontPage Если на сервере, на котором вы хотите опубликоваться нет серверных расширений, то публиковаться надо будет используя ftp – доступ. Для этого в окне Publish Web (Опубликовать сайт) (Рис.7.1) нажмите на кнопку Browse (Просмотр). В появившемся диалоговом окне Open Web (Открыть сайт)(Рис.7.4) в поле Look in (Папка) выберите Add/Modify FTP Locations (Добавить/Изменить адреса FTP). После выбора данного пункта появится одноименное 41

диалоговое окно Add/Modify FTP Locations (Добавить/Изменить адреса FTP)(Рис.7.5). В этом окне заполните необходимые поля Name of FTP site (Имя FTP – сайта), User (Пользователь) предварительно щелкнув по радиокнопке User, Password (Пароль) и нажмите на кнопку Add, имя ftp – сайта появится в списке

Рис.7.4. Диалоговое окно Open Web (Открыть сайт). расположенном ниже. После этого нажмите на кнопку OK. Вы вернетесь в окно Open Web (Открыть сайт)(Рис.7.4) в котором должен появиться введенный вами ftp – адрес, выберите его и в поле Folder name укажите путь к вашей папке на сервере (в том случае если он существует). Нажмите на кнопку Open, ваши данные будут проверены и в случае правильного ввода вы получите доступ к серверу. После этого FrontPage вернется к окну Publish Web (Опубликовать сайт) (Рис.7.1) в котором вы наконец-то сможете нажать на кнопку Publish (Опубликовать).

Рис.7.5. Диалоговое окно Add/Modify FTP Locations (Добавить/Изменить адреса FTP).

Контрольные вопросы 1. Какая команда используется для публикации сайта?

42

Дополнение (необязательный раздел) Таблицы Построение таблиц Таблицы являются одним из наиболее удобных и гибких средств организации материала на Web-страницах; в этом качестве они используются практически всеми Web-дизайнерами. Таблицы позволяют во многих случаях упростить задачу форматирования текста и размещения графических изображений; кроме этого, благодаря таблицам легче достичь единообразия в представлении ваших страниц разными браузерами, поскольку большинство браузеров трактуют таблицы более или менее похожим образом. Таблицы Frontpage аналогичны по структуре таблицам Word, и все манипуляции с ними осуществляются точно так же, как в Word. Они состоят из ячеек, содержащих текст, графику, фоновые изображения, формы, компоненты Frontpage или другие таблицы. Построить таблицу в Редакторе Frontpage можно двумя способами: либо непосредственно нарисовать ее на странице, пользуясь инструментами панели таблиц (Tables), либо вставить с помощью меню Table.

Вставка таблицы Процесс вставки таблицы с помощью команд меню Frontpage выполняется следующим образом: 1. Установите курсор в то место, где вы хотите начать таблицу, и выберите в меню Table (Таблица) пункт Insert (Вставить), затем щелкните по команде Table (Таблица). Вы увидите диалоговое окно Insert Table, показанное на рис. 8.1. 2. Введите предполагаемое число строк (Rows (Строки)) и столбцов (Columns (Столбцы)) вашей таблицы. Впоследствии строки и столбцы вы сможете как добавлять, так и удалять. 3. Выберите вариант выравнивания (Aligment (Выравнивание)) в таблице в целом: по левому краю, по центру или по правому краю. 4. Введите ширину рамки таблицы (Border Size) в пикселах. Если рамка не нужна, установите это значение равным нулю. Эта рамка будет окружать всю таблицу в целом. 5. Введите значение Cell Padding (Отступ от границы ячейки) в пикселах. Это число устанавливает минимальное расстояние между рамками таблицы и ее содержимым. Этот параметр относится ко всем ячейкам таблицы и индивидуально для отдельных ячеек не устанавливается.

Рис. 8.1. Диалоговое окно Insert Table 6. Введите значение Cell Spacing (Интервал между ячейками) в пикселах. Этот параметр задает расстояние между ячейками таблицы в виде рамки вокруг каждой ячейки (в том числе вокруг ячеек, находящихся у краев таблицы). 7. Введите значение ширины таблицы (опция Specify Width). Ширину можно задавать как числом пикселов, так и в процентах от ширины страницы. Например, если вы установите 43

ширину таблицы равной 50%, то таблица будет занимать по ширине половину окна браузера. 8. Нажмите кнопку ОК. Редактор создаст таблицу и покажет ее на экране. Frontpage по количеству столбцов и по ширине таблицы сам вычислит ширину всех столбцов. Примечание: (В любом случае точный вид таблицы в браузере в большей степени определяется особенностями самого браузера, нежели этими параметрами).

Редактирование таблиц Ввод текста В ячейке таблицы можно набрать текст точно так же, как и в любом другом месте страницы. Если вы введете больше текста, чем ячейка способна вместить, то ячейка автоматически станет шире настолько, насколько потребуется. Изменение свойств таблицы При необходимости в любой момент можно изменить тип выравнивания таблицы, ширину ее рамки, интервал между ячейками, отступ от границы ячейки и суммарную ширину таблицы. Для этого существует команда Table Properties (Свойства таблицы). Щелкните на таблице правой кнопкой мыши и найдите в контекстном меню пункт Table Properties или установите курсор внутрь таблицы и в строке главного меню выберите: Table -> Properties -> Table. Перед вами откроется окно диалога Table Properties, показанное на рис. 8.2. Чтобы посмотреть, как таблица будет выглядеть при тех или иных значениях различных параметров измените в окне Table Properties какое-нибудь значение и нажмите кнопку Apply (Применить).

Рис. 8.2. Диалоговое окно Table Properties. При необходимости таблице можно присвоить фоновый рисунок или задать цвет ее фона. Однотонный цвет фона задается в поле Color. Чтобы выбрать рисунок для фона вашей таблицы, установите флажок Use Background Image (Использовать фоновое изображение). После этого станет доступным поле под ним. Можно ввести имя файла с изображением прямо в нем, а можно нажать расположенную рядом кнопку Browse; в этом случае откроется окно Select Background Image (Выбрать фоновое изображение), где у вас будет несколько вариантов дальнейших действий: 1 вариант. Если вы собираетесь использовать рисунок, присутствующий в создаваемом сайте, найдите файл в соответствующей папке и нажмите кнопку ОК 2 вариант. Если нужный вам файл находится в другом месте (на дискете, на жестком диске, где-то в локальной сети), найдите его при помощи стандартных средств навигации диалогового окна Select File, вызвав его нажатием на кнопку Select a file on yor computer. Вы можете даже выбрать фоновое изображение во 44

Всемирной Паутине или создать гиперссылку на файл, находящийся на вашем компьютере. Нажмите кнопку ОК во всех окнах. 3 вариант. И, наконец, вы можете воспользоваться коллекцией картинок (Clip Art). Для этого в диалоговом окне нажмите кнопку ClipArt…, выберите понравившееся изображение, нажмите кнопку «Вставить клип» и ОК. Вы можете подобрать цвет для рамки. Если вы хотите установить для рамок однородный цвет, то выберите его в списке Color (Цвет) области Borders (Рамки); если же вы будете выбирать цвета из списков Light Border и Dark Border, то сможете придать своей таблице некоторую трехмерность. Из списка Light Border выберите цвет освещенных плоскостей рамки, а из Dark Border — цвет теневой части.

Выбор строк и столбцов Чтобы выбрать строку или столбец, поместите указатель мыши вблизи верхнего края столбца или левой границы строки, подождите пока он не превратится в маленькую черную стрелку, и нажмите кнопку мыши. Можно сделать иначе: установите курсор в ячейке и затем в меню Table выберите одну из команд подменю Select: Table(Таблица), Column (Столбец), Row (Строка) или Cell (Ячейка). Чтобы отметить ряд ячеек, выделите (выберите) одну из них, затем, держа нажатой клавишу или <Shift>, перемещайте курсор, отмечая следующие ячейки или щелкая по ним.

Редактирование свойств ячейки Можно изменить некоторые свойства отдельных ячеек, такие, как режим выравнивания текста внутри ячейки, ее минимальная ширина, число строк или столбцов, которое она перекрывает, а также фоновый рисунок или цвет фона ячейки. Для этого: 1. Установите курсор в ячейку, свойства которой вы хотите изменить. Чтобы изменить за один раз свойства группы ячеек, следует сначала их отметить. 2. В меню Table (Таблица) выберите Properties (Свойства), а затем Cell (Ячейка) или щелкните правой кнопкой мыши на отмеченной ячейке (ячейках) и выберите Cell Properties во всплывающем меню. Откроется показанное на рис. 8.3. диалоговое окно Cell Properties.

Рис. 8.3. Диалоговое окно Cell Properties 3. Чтобы изменить режим выравнивания текста внутри ячейки, измените значение в секции Layout (Разметка). Чтобы, например, расположить текст точно в центре ячейки, установите для параметра Horizontal Alignment (Выравнивание по горизонтали) значение Center (По центру), а для параметра Vertical Alignment (Выравнивание по вертикали) — значение Middle. 4. Чтобы изменить ширину и высоту ячейки, введите новое значение в полях Specify width (Ширина) и Specify height (Высота) соответственно.

45

6. 7. 8. 9. 10.

5. В секции Rows spanned и Columns spanned укажите, сколько строк или столбцов ваша ячейка должна перекрывать. Задав эти параметры, вы соответствующим образом увеличите размеры ячейки, при этом ячейки справа и/или ниже от нее сдвинутся, освобождая пространство для расширенной ячейки. Необходимость в такой операции может возникнуть, например, для размещения изображения. К примеру: у вас есть таблица из двух строк и двух столбцов и вы хотите заполнить рисунком область под верхними ячейками. Тогда раздвиньте левую нижнюю ячейку так, чтобы она перекрывала оба столбца. При установке флажка Header cell (Титульная ячейка) организуется титульная ячейка (см. ниже). Установка флажка No wrap (Нет переноса) запрещает переносить текст в ячейке на новую строку. В противном случае, если окно браузера узкое, то текст переносится на новую строку. Чтобы сделать цвет рамок ячейки, укажите нужные цвета в секции Borders. Чтобы вставить фоновый рисунок или задать цвет фона ячейки, используйте соответствующие опции в секции Background (Фон). Чтобы немедленно увидеть результат ваших действий, не закрывая диалогового окна, нажмите кнопку Apply. Когда вы сочтете, что достигли желаемого эффекта, нажмите кнопку ОК.

Титульные ячейки Отдельной разновидностью ячеек являются титульные ячейки (header cells), они отличаются тем, что текст внутри них изображается полужирным шрифтом. Чаще всего в качестве титульных выступают ячейки верхней строки или левого столбца; обычно в них располагают названия соответствующих граф таблицы. Однако титульной может быть любая ячейка таблицы, которую вы хотите сделать заметной, для этого: • Выберите ячейку, которую вы хотите превратить в титульную. (Чтобы отметить несколько ячеек, выберите первую ячейку и затем, держа нажатой клавишу или <Shift>, отмечайте остальные.) Вызовите окно свойств ячейки, как описывалось выше и установите флажок Header cells (титульные ячейки), Имейте в виду, что различные браузеры могут воспроизводить титульные ячейки по разному.

Перемещение по таблице Перемещение от символа к символу (или от элемента к элементу) внутри ячейки осуществляется клавишами со стрелками, а для перехода от ячейки к ячейке используйте клавишу <Таb>.

Добавление ячеек Чтобы вставить в таблицу новую ячейку, установите курсор в ячейку слева от того места, где вы планируете ее разместить, и выберите в меню Table (Таблица) пункт Insert (Вставить) и щелкните по команде Cell (Ячейка). Возможен вариант, когда при добавлении ячеек таблица может стать несимметричной, и это обстоятельство иногда можно использовать.

Добавление строк Чтобы добавить в таблицу одну или несколько строк, сделайте следующее: 1. Установите курсор в строке над или под тем местом, где вы хотите вставить новые строки. 2. Выберите в меню Table (Таблица) пункт Insert (Таблица) и щелкните левой кнопкой мыши по команде Rows or Columns (Строки или столбцы). Вы увидите диалоговое окно Insert Rows or Columns, показанное на рис. 8.4.

46

Рис. 8.4. Диалоговое окно Insert Rows or Columns 3. Выберите опцию Rows и введите число строк, которое вы хотите вставить. Затем

укажите, выше (Above Selection) или ниже (Below Selection) текущей строки следует вставить новые строки, и нажмите кнопку ОК. Совет: Один самых простых способов добавления новых строк в таблицу — установить курсор в правую нижнюю ячейку таблицы и нажать клавишу <Таb>.

Добавление столбцов Чтобы вставить в таблицу один или несколько столбцов, установите курсор в любую ячейку столбца, рядом с которым (до или после) вы будете вставлять новые столбцы, а затем выберите в меню Table пункт Insert и в подменю выберите команду Rows or Columns. Дальнейшая процедура в точности повторяет описанную в предыдущем разделе операцию добавления новых строк за тем исключением, что в диалоговом окне вам следует выбрать опцию Columns. Совет: Чтобы вставить после таблицы пустой абзац, установите курсор в конец правой нижней ячейки и нажмите +<Enter>.

Удаление строк или столбцов Чтобы удалить строку или столбец, выберите строку или столбец, которые вы хотите удалить, и нажмите клавишу или в меню Table щелкните по команде Delete Cells (Удалить ячейки).

Заголовок таблицы Заголовок таблицы (table caption) — это строка, располагающаяся над таблицей. Чтобы вставить заголовок таблицы, выберите в меню Table пункт Insert и щелкните по команде Caption, затем введите текст заголовка. Изменить некоторые свойства заголовка можно с помощью команды Caption (Заголовок) пункта Properties (Свойства) меню Table (Таблица) или вызвать контекстно-зависимое меню и выбрать команду Caption Properties (Свойства заголовка). Появится диалоговое окно Caption Properties (Свойства заголовка) (Рис.8.5).

Рис. 8.5.Диалоговое окно Caption Properties (Свойства заголовка). В этом окне можно указать расположение заголовка: над таблицей (Top of table), под таблицей (Bottom of table), а также с помощью кнопки Style (Стиль) отформатировать текст заголовка.

Перемещение строк и столбцов Строки и столбцы можно при необходимости переместить в таблице на другое место. Во Frontpage работает точно такая же процедура перемещения строк и столбцов, как и в MS Word: строка (или столбец) вырезается в буфер обмена и вставляется в новое место. Для того чтобы переместить строку нужно: • Отметить строку, которую вы хотите переместить, и выбрать в меню Edit (Правка) команду Cut (Вырезать) или нажать комбинацию клавиш +<X>. 47

• Выбрать место, в котором будет располагаться эта строка, и в меню Edit (Правка) щелкнуть по команде Paste (Вставить) или нажать комбинацию клавиш +. Строка займет свое новое положение. Перемещение столбцов осуществляется аналогичным образом. Следует заметить, что за один прием можно перемещать по несколько строк или столбцов. Применив соответствующие команды - Copy (Вырезать) и + вы сможете скопировать строки или столбцы.

Разбиение ячеек Чтобы детализировать информацию в таблице или сделать более точным форматирование страницы, вам может потребоваться разделить какие-либо ячейки на более мелкие. Это делается следующим образом: 1. Установите курсор в ячейку, которую вы хотите разбить. 2. Выберите в меню Table команду Split Cells (Разбить ячейки). Откроется диалоговое окно Split Cells, показанное на рис. 8.6.

Рис. 8.6. Диалоговое окно Split Cells 1. Укажите, как вы хотите разбить ячейку - на строки (Split into rows) или столбцы(Split into columns) и введите число, на сколько строк или столбцов ее следует поделить; нажмите кнопку ОК.

Слияние ячеек Иногда бывает необходимо объединить содержимое нескольких соседних ячеек в одной. Эта процедура носит название слияния ячеек и производится следующим образом: 1. Отметьте ячейки, которые вы хотите объединить. Для слияния вы можете отметить любое количество ячеек, но с одним условием: они должны образовывать сплошную прямоугольную область. 2. Выберите в меню Table опцию Merge Cells (Объединить ячейки). Редактор объединит отмеченные ячейки, т. е. общие у отмеченных ячеек границы будут удалены и получится одна ячейка большего размера. Содержимое всех ячеек останется в неприкосновенности и будет оформлено в виде отдельного абзаца.

Вставка изображений в ячейки таблицы Чтобы в ячейку таблицы вставить изображение, установите курсор в ячейку и вставьте рисунок обычным образом (см. Занятие №4. Рисунки).

Таблицы в таблицах Редактор позволяет вставлять таблицы внутрь таблиц. Подобные конструкции иногда бывает удобно использовать для каких-либо специальных случаев организации данных. Но чем проще будет структура ваших таблиц, тем меньше времени вы потратите на поиск и устранение ошибок на своих страницах. Чтобы вставить таблицу внутрь таблицы, установите курсор в ячейку, в которую вы хотите вставить таблицу, и создайте новую таблицу с помощью команды меню Table -> Insert -> Table.

Инструменты панели таблиц Первой на панели таблиц (Рис. 8.7) расположена кнопка Draw Table (Нарисовать таблицу). 48

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

Остальные кнопки панели таблиц Eraser (Ластик). Служит для объединения ячеек (удаления ненужных ячеек). 1. Нажмите на панели таблиц кнопку Erase, при этом ваш курсор примет форму ластика. 2. Поместите курсор-ластик рядом с границей, которую вы собираетесь убрать. 3. Нажмите кнопку мыши и, не отпуская ее, переместите курсор через границу, которую вы стираете. Вы увидите, что она выделена цветом. Когда вы отпустите кнопку мыши, эта граница исчезнет. Вам не удастся удалить границу в том случае, когда это приведет к появлению неполных ячеек. На примере, показанном на рис. 8.8, нельзя стереть перегородку, обведенную кружком, т. к. нижняя ячейка стала бы незавершенной.

Рис. 8.8. Пример таблицы, у которой нельзя удалить границу, обведенную кружком. Insert Rows (Вставить строку). Вставка строки. Insert Columns (Вставить столбец). Вставка столбца. Delete Cells (Удалить ячейки). Ячейки можно удалять еще и таким образом: отметить строку или столбец, в которых содержатся ненужные ячейки, и нажать кнопку Delete Cells. Merge Cells (Объединить ячейки). Чтобы слить воедино несколько смежных ячеек, отметьте их и нажмите кнопку Merge Cells на панели таблиц. Split Cells (Разбить ячейки). Чтобы разбить определенную ячейку, выберите ее и нажмите на панели таблиц кнопку Split Cells. При этом появится диалоговое окно Split Cells. (Это окно подробнее описано ранее, в разделе "Разбиение ячеек"). Align Top (Прижать вверх), Center Vertically (Отцентрировать по вертикали), Align Bottom (Прижать вниз). Эти кнопки соответствующим образом действуют на расположение текста в ячейке таблицы. Distribute Rows Evenly (Равномерно распределить строки), Distribute Columns Evenly (Равномерно распределить столбцы). Если вы хотите, чтобы ряд смежных строк или столбцов были одинакового размера, отметьте их и воспользуйтесь одной из этих кнопок. Background Color (Фоновый цвет). Если вы хотите сделать фон одной или нескольких ячеек или таблицы в целом цветным, выберите нужную область и нажмите кнопку Background Color. Появится диалоговое окно Color (Выбор цвета); выберите в нем понравившийся вам цвет и нажмите ОК. AutoFit (Автоматически подобрать). Устанавливает размеры таблицы по содержимому.

49

Стили Таблицы стилей позволяют определить набор стилей для оформления Web – страницы. Созданную таблицу стилей можно использовать для всех страниц сайта. Существуют два вида таблиц стилей: внутренняя (используется для страницы, на которой была создана) и внешняя, которая может быть связана с несколькими страницами.

Внутренняя таблица стилей Для создания собственного стиля необходимо выбрать команду Style (Стиль) меню Format (Формат), в появившемся диалоговом окне Style (Стиль) (Рис.8.9) следует нажать кнопку New (Создать) для вывода окна New Style (Новый Стиль) (Рис.8.10). После ввода названия стиля в поле Name (selector), создаваемому стилю можно назначить новые характеристики с помощью кнопки Format (Формат). При щелчке по кнопке появится меню в котором можно выбрать пункты: Font (Шрифт), Paragraph (Абзац), Border (Границы), Numbering (Нумерация), Position (Позиционирование).

Рис.8.9. Диалоговое окно Style.

• •

Рис.8.10 Диалоговое окно New Style (Новый Стиль). Если выбрать пункт Font (Шрифт), то появится диалоговое окно Font (Шрифт) (Рис.2.4 Занятие 2. Дизайн страницы). В этом окне можно задать параметры текста для создаваемого стиля. При выборе пункта Paragraph (Абзац) появится диалоговое окно Paragraph (Абзац) (Рис. 8.11).

Рис. 8.11. Диалоговое окно Paragraph (Абзац). В этом окне: 1. В поле Aligment (Выравнивание): задается тип выравнивания: влево, вправо, по центру, по ширине. 50

2. В поле Indentation (Отступ): задаются отступы от края страницы - слева, справа, перед первой строкой абзаца. 3. В области Spacing (Интервал): задаются интервалы перед абзацем, после абзаца, между словами (якобы), интервал между строками. •

При выборе пункта Border (Границы) появится диалоговое окно Border and Shading (Границы и заливка) (Рис. 8.12).

Рис. 8.12. Диалоговое окно Border and Shading (Границы и заливка), вкладка Borders. На первой вкладке этого окна Border (Границы): 1. В области Setting (Оформление) задается тип границы: отсутствует, прямоугольная, пользовательский тип (описанный пользователем). 2. в области Style (Стиль) выбирается вид линии границы, ее цвет, ширина. 3. В области Padding (Поля) задается пустое пространство между границами и текстом сверху, снизу, слева, справа. На второй вкладке этого окна Shading (Заливка) (Рис. 8.13): 1. В области (Заливка) можно указать цвет фона (Backround color) и текста (Foreground color). 2. В области Patterns (Узор) можно задать фоновый рисунок, позиционирование по вертикали и горизонтали, тип размножения фонового рисунка (размножить, размножить только по горизонтали, только по вертикали, не размножать), а также указать, будет ли рисунок фиксированным или будет прокручиваться при скроллинге страницы.

Рис. 8.13. Диалоговое окно Border and Shading (Границы и заливка), вкладка Shading. •

При выборе пункта Numbering (Нумерация) появится диалоговое окно Bullets and Numbering (Список) (Рис. 8.14). 1. На первой вкладке этого окна в области Picture (Рисунок) можно указать рисунок, которым будет служить маркером для маркированного списка. 2. На двух других вкладках можно выбрать вид предопределенного маркера и вид перечня, соответственно для маркированного и нумерованного списков.

51

•

Рис. 8.14 Диалоговое окно Bullets and Numbering (Список). При выборе пункта Position (Позиционирование) появится диалоговое окно Position (Позиционирование) (Рис. 8.15). 1. В этом окне, в области Wrapping style (Стиль обтекания), можно назначить стиль обтекания рисунка текстом: значение None (Нет) – нет обтекания, значение Left (Слева) – текст будет обтекать рисунок справа, значение Right (Справа) – текст будет обтекать рисунок слева. 2. В области Positioning style (Позиционирование), назначается способ расположения рисунка на странице: • None (Нет) – рисунок размещается как обычный страничный элемент (Например: между двумя параграфами.) • Absolute (Абсолютный) – определяет точное расположение рисунка на странице, если рисунок накрывает текст или какой-то другой страничный элемент, то надо указать значение Z-Order для размещения рисунка перед текстом (страничным элементом) или позади. • Relative (Относительный) – позиция рисунка будет определяться текущими размерами браузера.

Рис. 8.15 Диалоговое окно Position (Позиционирование). 3. В области Location and size (Расположение и размеры) указывается положение рисунка относительно левого верхнего угла страницы с учетом полей. После определения всех стилей надо нажать на кнопку OK и затем сохраните страницу. Созданный вами стиль появится в списке стилей на панели Formatting (Форматирование).

Внешняя таблица стилей: создание, присоединение, использование Для создания внешней таблицы стилей надо в меню File (Файл) выбрать команду New (Новый), и в появившемся подменю щелкнуть по команде Page (Страница). Откроется диалоговое окно в котором нужно перейти на вкладку Style Sheets (Таблицы стилей). На вкладке можно выбрать 52

или пустую таблицу стилей - Normal Style Sheets (Нормальная таблица стилей), или одну из подготовленных таблиц стилей. Добавлять или изменять стили можно или вручную (по правилам HTML) или с помощью команды Style (Стиль) меню Format (Формат). После создания таблицы стилей сохраните ее с расширением .css Перед использованием внешней таблицы стилей на создаваемой странице, необходимо эту таблицу присоединить. Для этого в меню Format (Формат) выберите Link Style Sheet (Связать таблицу стилей). Откроется диалоговое окно Link Style Sheet (Рис. 8.16).

Рис. 8.16. Диалоговое окно Link Style Sheet. Выберите тип присоединения: ко всем страницам (опция All Pages) или только к текущей (опция Selected Page(s)). Нажмите на кнопку Add (Добавить) и укажите путь к таблице стилей. После присоединения таблицы стилей, в списке Style (Стиль) меню форматирования появятся все стили из присоединенной таблицы.

53

Приложение A Как получить e-mail Для того, чтобы открыть свой сайт, Вам может понадобиться адрес электронной почты. Его можно получить бесплатно на многих серверах: mail.ru, chat.ru, inbox.ru, zmail.ru, null.ru, usa.net, mail.yahoo.com и т.д. Процедура получения адреса как правило проста или очень проста. Мы опишем эту процедуру на примере mail.ru. Необходимо войти на http://www.mail.ru/ и щелкнуть по круглой кнопке «Новый адрес». Откроется страница с «Соглашением об использовании» с которым надо согласиться нажав кнопку «Я принимаю условия» внизу. После этого собственно и начнется регистрация. Вам предложат ввести имя и пароль, подтвердить пароль, выбрать контрольный вопрос на тот случай, если вы забудете пароль, и ответить на несколько дополнительных вопросов. Затем нажмите кнопку «Дальше» и ответьте на вопросы анкеты, можно также щелкнуть по кнопке «Пропустить», если вы не хотите заполнять анкету. На следующей странице щелкните по кнопке «Продолжить». Откроется страница с еще одной анкетой где также можно щелкнуть по кнопке «Пропустить», в конце концов вы зарегистрируетесь и сможете войти в систему. (Обратите внимание на строку с сообщением о полном адресе вашей электронной почты.) Совет: На всех почтовых серверах есть ссылки с информацией о процессе регистрации. Обычно они так и называются «Помощь». Если вы будете испытывать затруднения с регистрацией, то поищите такую ссылку.

Как получить место под сайт Если Вы хотите разместить сайт в своей локальной сети, то обратитесь к системному администратору и он Вам все объяснит. Кроме этого свой сайт можно разместить в Интернете. Место под сайт также предоставляют многие сервера: www.boom.ru, www.bos.ru, www.chat.ru, www.narod.ru, www.rambler.ru, www.fortunecity.com, www.spree.com, www.tripod.com, www.hotmail.ru, www.zden.com и т.д. В качестве примера опишем открытие сайта на newmail.ru Для того чтобы открыть сайт нажмите ссылку "зарегистрироваться" внизу страницы. Откроется новое окно. Нажмите на кнопку "Регистрация". Появится текст соглашения. Нажмите на кнопку «Я принимаю условия». Откроется окно с первой анкетой. Вам надо будет выбрать логин (регистрационное имя) и пароль. Учтите, что логин не имеет отношения к имени вашего сайта или почтового ящика. Этот логин только для входа. Итак: введите имя и пароль, подтвердите пароль, выберите контрольный вопрос на тот случай, если вы забудете пароль. Нажмите "Зарегистрироваться". Появится страница с анкетой. Введите ответы.

Как опубликовать свой сайт Файлы размещаются по протоколу FTP. Поддержка FTP включена в большинство программ для разработки сайтов, но можно воспользоваться и специальными программами, например, CuteFTP. Для размещения файлов нужно указать адрес FTP-сервера, логин и пароль. Мы опишем как работать с некоторыми программами. FAR Нажмите Alt+F1 и выберите в меню раздел "FTP", перейдите на появившуюся панель (клавиша TAB). Нажмите Shift+F4. Появиться окно с полями: • "ftp://пользователь:пароль@сервер:порт/папка"; 54

• "пароль"; • "Описание FTP"; В поле "ftp://поль ..." напишите имя Вашего ftp-сервера. Остальные поля оставьте пустыми. НЕ ЗАБУДЬТЕ поставить крестик на "Спрашивать пароль непосредственно перед подключением". Потом нажмите "Сохранить". Теперь в панели FTP у вас появилась строка с именем Вашего ftp-сервера. Нажмите на нее , и у вас спросят логин и пароль. Введите логин и пароль; ВНИМАНИЕ! Вы должны быть уже подключены к Интернету, чтобы закачивать файлы. Если все прошло успешно, и вы ввели правильно пароль и логин, то вы окажетесь в вашем личном каталоге на сервере. И дальше работаете как обычно - копируете и удаляете файлы. CuteFTP В программе CuteFTP нажимаете кнопку F4, открывается окно, в котором надо установить: FTP Host Address: адрес сервера. FTP site User Name: ваш логин FTP site Password: ваш пароль В строке Label for site: набираете все, что хотите. Заполнив форму нажмите кнопку Edit. Обязательно поставьте отметку на Use PASV mode. Нажмите кнопку OK, это окно закроется, а в оставшемся окне нажмите кнопку Connect. Связь будет установлена. Перемещаете файлы из левого окна (Ваш компьютер) в правое (каталог на сервере)

Internet Explorer 5 В поле адреса введите Ваше имя, Ваш пароль и адрес сервера, примерно в таком виде: ftp://Ваше_имя:Ваш_пароль@адрес_сервера (ftp://login:[email protected]/mysite). После этого можно перетаскивать файлы и папки прямо в окно браузера. Windows Запустите «Сеанс MS-DOS» (Пуск (Start) -> Выполнить (Run)), в появившемся окне введите «command», и затем нажмите OK. Примечание: Можно вместо command сразу ввести ftp и затем воспользоваться командой open адрес сервера для подсоединения к серверу. Или кнопка Пуск (Start) -> Программы (Program) -> Сеанс MS-DOS(Command Prompt). В появившемся окне введите ftp – адрес сервера например – ftp ftp.esstu.ru и нажмите клавишу <Enter>. (Вы должны быть подсоединены к интернету). Примечание: Можно просто ввести ftp и затем воспользоваться командой open адрес сервера для подсоединения к серверу. В ответ на запрос введите имя и пароль. Для работы используйте следующие команды: binary – переход в двоичный режим. Очень помогает. dir - показывает содержание текущего каталога (папки) с описанием. ls - показывает содержание текущего каталога (папки). mkdir имя каталога - создает новый каталог(папку). cd имя каталога - переход в другой каталог(папку). pwd - напоминает в каком каталоге Вы находитесь. rename старое имя новое имя – переименовывает файл. 55

rmdir имя каталога – удаляет пустой каталог. send файл - посылает указанный файл на сервер в текущий каталог. put файл - посылает указанный файл на сервер в текущий каталог (то же, что и предыдущая). mput список файлов - посылает указанные файлы на сервер в текущий каталог (позволяет использовать маску). get файл - получает указанный файл с сервера. mget список файлов - получает указанные файлы с сервера (позволяет использовать маску). del, dele, delete - удаляет указанный файл на сервере. ? - список возможных команд. help - список возможных команд (то же, что и предыдущая). ? команда – краткое описание команды. help команда – краткое описание команды (то же, что и предыдущая). bye – отсоединиться от сервера, выйти из режима ftp, выход из окна MS-DOS. quit – отсоединиться от сервера, выйти из режима ftp, выход из окна MS-DOS. Кроме того в интернете полно руководств по ftp с подробным описанием возможностей. Примечание: Как правило, на любой ftp-сервер можно войти с минимальными правами под именем anonymous, а в качестве пароля ввести свой e-mail адрес. Если Вы еще не завели почту, то попробуйте вместо почтового адреса вписать в строку пароля любой другой текст, или не вводите ничего. М.б. сработает (я еще не встречал ftp-сервера, кот. проверял бы действительность почтового адреса).

56

Приложение B Немного о JavaScript JavaScript – язык, разработанный фирмой Netscape Communication (не стоит путать с языком Java фирмы Sun Microsystems). Работает в паре с HTML.

Основные понятия (не уголовные) <script>, - теги, обозначающие начало и конец скрипта. Например: <script language ="JavaScript"> -начало скрипта. ……….. - конец скрипта (language – это атрибут скрипта, в данном случае сообщающий броузеру об использовании языка JavaScript, а не VBScript). object – объект, над которым производится какое-либо действие (method) и имеющий свойства (property). Например: есть такой объект document – в общем случае это html-страница, или window – этим объектом чаще всего является окно броузера. Разные объекты обладают своими собственными методами и свойствами. method – действие которое производится над объектом (object), является функцией-членом объекта. Например: write – писать. Пример использования: <script language ="JavaScript"> document. write (“Любой текст”); - данный код напишет на Вашей странице фразу “ Любой текст ”. events – события. Нечто напоминающее приход Нового года в детстве. Например: load – происходит когда броузер закончил загрузку Вашей страницы. event handler – обработчик события. Каждое событие имеет свой обработчик, который отличается добавлением префикса on к имени этого события. Допустим, броузер загрузил Вашу страницу, и произошло событие load, значит, у этого события есть свой обработчик onLoad, который можно вызвать, чтобы описать какие-то действия. (Т.е. обработчик события – это, своего рода, способ распознать, что определенное событие таки произошло и немедленно отреагировать на него, нагрузив броузер дополнительным заданием.) Например: onLoad. property – свойство которым обладает объект (object), является переменной-членом объекта. Свойству можно уверенно присваивать различные значения (при возникновении сомнений – проконсультируйтесь с друзьями, только не сильно). Например: status – строка состояния броузера (находится, как правило, внизу окна). Пример использования event handler и property. Любой текст 57

- в строке состояния будет напечатано «Спасибо!!!». (Если Вы спросите: «А где теги < script > и ?», то будете совершенно правы. Отвечаю: «Их нет». Все обработчики событий просто пишутся внутри тегов HTML, и броузер воспринимает их как своеобразные атрибуты тега.) Обратите внимание на использование двойных и одинарных кавычек, их можно поменять местами, но не путать (т.е. в пару к одинарной кавычке нельзя ставить двойную кавычку). В данном случае кавычки твердо указывают, что когда произошло событие onLoad, надо в строке состояния: "status ", вывести сообщение: 'Спасибо’. function – несколько операторов, объединенных для выполнения общей цели (или нескольких целей, но это горячо не рекомендуется авторами толстых книжек). Например: function pass(){alert("Вы уходите от нас на сайт ВСГТУ.");} – создается функция с именем pass(),между фигурными скобками - тело функции. В круглых скобках могут находиться передаваемые функции параметры (здесь их нет). var – объявляет новую переменную, которой можно присваивать различные, необходимые в данном контексте значения (или не присваивать если удача всегда сопутствует Вам). new – создает новый экземпляр объекта (полную его копию). Например: new window создаст еще одно окно браузера. . – точка, селектор члена класса. Что имеется ввиду? Некоторые объекты, как это ни прискорбно, имеют методы и свойства с одинаковыми именами. И вот, чтобы указать к какому именно объекту относится данный метод или свойство, приходится сначала писать имя этого объекта, затем ставить этот самый селектор члена класса (в виде точки), и только после этого писать метод или свойство. Или, если вы создадите несколько экземпляров (копий) какого-то объекта, то для того, чтобы указать к какому именно экземпляру относится метод или свойство вам тоже придется писать имя этого экземпляра, селектор (т.е. ставить точку) и сам метод или свойство. Иначе отладчик (если он есть) сразу начнет действовать на нервы и достанет своими сообщениями. оператор – символы с помощью которых выполняются определенные действия. Например: символ равенства = (оператор присваивания) присваивает переменной какое-либо значение. тип – определяет характер данных которые представляются в переменных. В JavaScript используются 4 типа данных: Числовой, булев, строковый, нулевой (null). массив – набор данных (переменных, элементов) одного типа под одним именем. Доступ к переменной осуществляется по ее индексу добавленному к имени массива, индекс заключается в квадратные скобки [], перечень индексов начинается с нуля. Например: massive = new Array(3); - будет создан массив с именем massive состоящий из 3 переменных. Затем можно присвоить значения переменным массива: massive[0] = “Первая переменная”; massive[1] = “Вторая переменная”; massive[2] = “Третья переменная”; Примечание: В JavaScript не существует принципиальной разницы между строковыми и числовыми массивами.

58

Несколько простых примеров использования JavaScript: Пример 1 (alert.htm) Переход на сайт ВСГТУ. onClick – обработчик события, вызывается когда посетитель щелкнет (кликнет) по ссылке. alert – встроенная функция которая выводит окно сообщения с произвольным текстом. В данном случае - “Прощайте!!!”. Упоминание функции в теле программы называется вызовом функции или обращением к функции. Такое обращение заставляет функцию активизироваться (сработать). Пример 2 (functionAlert.htm) <script language="JavaScript"> function pass(){alert("Вы уходите от нас на сайт ВСГТУ.");} Переход на сайт ВСГТУ. Определяется функция pass(), затем она вызывается в обработчике события onClick. Функция pass() содержит в себе встроенную функцию alert(). Пример 3 (button.htm)

59

Событие MouseOver происходит когда посетитель навел указатель мыши на ссылку, событие MouseOut происходит когда посетитель уберет указатель мыши с ссылки. Рисунки сохраняются в массиве images дочернем к объекту document (т.е. document. images[]). Атрибут name тэга img задает имя для рисунка, которое позволяет браузеру распознать к какому рисунку (объекту) отнести какое-либо действие. В данном случае равнозначными обращениями являются document.mypicture.src, document. images[”mypicture”].src, document.images[0].src. Пример 4 (twoButtons.htm) <script language = "JavaScript"> img1over = new Image(); img1over.src = "button1over.gif"; img1norm = new Image(); img1norm.src = "button1norm.gif"; img2over = new Image(); img2over.src = "button2over.gif"; img2norm = new Image(); img2norm.src = "button2norm.gif"; function fOver(name) {document.images[name].src = eval(name + "over.src");} function fOut(name) {document.images[name].src = eval(name + "norm.src");}
Для 4-х рисунков button1over.gif, button1norm.gif, button2over.gif, button2norm.gif создаются 4 объекта Image в которые загружаются эти рисунки. Таким образом рисунки содержатся в кэше локального компьютера, что позволяет производить замену рисунков практически мгновенно. Далее создаются 2-е функции fOver(name) и fOut(name), первая из которых производит замену исходного рисунка на другой при наведении указателя мыши на этот рисунок, а вторая возвращает исходный рисунок когда указатель мыши убран с изображения. Какой именно рисунок менять определяется с помощью параметра name. Встроенная функция eval() вычисляет значение строки, т.е. если пользователь наведет указатель мыши на кнопку 1, то значение name станет img1, после добавления over.src параметром функции eval() станет img1over.src, вычислив этот параметр функция вернет значение button1over.gif. Обработчики события onMouseOver и onMouseOut происходят когда посетитель наведет и уберет указатель мыши с кнопки, соответственно. Пример 5 (runstr.htm) <script language = "JavaScript"> 60

window.status = " Да здравствует ЮКОС! Самая нефтяная из всех нефтяных компаний в мире!” + “ Ура, товарищи!!!"; function RunStr() { window.status = window.status.substring(1,window.status.length) + window.status.substring(0,1); window.setTimeout("RunStr()", 250); } Вначале свойству window.status присваивается произвольное значение. Затем создается рекурсивная функция RunStr(), в которой организуется перемещение строки. Метод substring(i, n) возвращает подстроку с i-той позиции по n-ую, свойство length содержит длину строки. Метод setTimeout("RunStr()", 250) вызывает функцию RunStr() через заданное число миллисекунд. Обработчик события onLoad также вызывает функцию RunStr() после окончания загрузки страницы. Браузеры не поддерживающие JavaScript часто просто выводят текст скрипта на страницу. Чтобы этого не было, рекомендуется записывать скрипты внутри тэгов комментариев HTML: <script language ="JavaScript">

61