Logo GenDocs.ru

Поиск по сайту:  

Загрузка...

Лекции - Основы проектирования web-страниц - файл 1.doc


Лекции - Основы проектирования web-страниц
скачать (205.5 kb.)

Доступные файлы (1):

1.doc206kb.08.12.2011 21:36скачать

содержание

1.doc





Конспект
«Основы проектирования Web-страниц»


I Основы создания Web-документов 2

1. Общие подходы к созданию Web-документов 2

2. Понятия и особенности HTML 2

3. Структура HTML-документа. 2

4. Понятие и общая характеристика тэгов. 3

5. Графика в HTML 4

6. Связывание HTML-документов 4

II Общие сведения о проектировании web- узлов 5

Этапы разработки web- узла 5

III Разработка Web-документов с помощью Microsoft Front Page 6

1 Назначение и функции Front Page (FP). 6

2 Режимы просмотра FP, их особенности и переключение между ними. 6

3 Создание и сохранения web-сайтов и страниц. 7

Порядок создания web-сайта: 7

Шаблоны 7

Мастера 7

Добавление и удаление страницы: 7

4 Оформление и форматирование web-страниц 8

Темы Front Page 8

Стили 8

Компоненты FP 8

Элементы мультимедиа на web-странице 9

Текст 9

Графические изображения 9

Звук 10

Видео 10

Динамические эффеты 10

5 Связывание страниц 10

5.1 Структура гиперссылки 10

5.2 Типы гиперссылок и способы их представления в MS FP 10

5.3 Порядок создания, изменения и удаления гиперссылок 11

5.4 Использование закладок 11

5.5 Создание интерактивных карт-изображений 12

5.6 Оптимизация гиперссылок 12

IV Публикация сайта 13


Литература

  1. Майкл А. Ларсон. Создание Web-страниц с помощью MS Office 97. - М.:БИНОМ, 1998. -480 с.

  2. Холмогоров В. Основы Webмастерства. Учебный курс. -СПб.: Питер, 2001. -352с.

  3. Microsoft FrontPage 2000. Шаг за шагом. Практ. пособие./Пер. с англ. - М: ЭКОМ, 2000.-328с.

  4. Гончаров А. Самоучитель HTML. - СПб.:Питер, 2000. - 239 с.

  5. Паттерсон Л. и др. Использование HTML 4 /3-е изд. - М. : Издательский дом "Вильямс", 2000. - 399 с.

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

  7. Пауэлл Т. Полное руководство по HTML: Новая информ. - включая HTML 4.0, DHTML и XML: Справочник / Пер. с англ. А.В.Качанов.- Мн. : ООО "Попурри", 2001.- 911 с.

  8. Хоумер А., Улмен К. Dynamic HTML: Справочник /Пер. с англ.-СПб.:Питер Ком, 1999.-510 с.

  9. Айзекс С. Dynamic HTML / Пер. с англ.- СПб.: BHV - Санкт-Петербург, 2000.- 488 с.
^

I Основы создания Web-документов


1. Общие подходы к созданию web-документов

2. Понятия и особенности HTML

3. Структура HTML-документа.

4. Понятие и общая характеристика тэгов.

5. Графика в HTML

6. Связывание HTML-документов
^

1. Общие подходы к созданию Web-документов


Основная задача при создании Web-документа – формирование информационного наполнения.

При создании информационного наполнения решаются 2 вопроса:

1. Содержание документа (информация + структура ее организации)

2. Оформление документа

Подходы к созданию Web-документов:

1. Создание вручную.

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

1.2. С использованием специального HTML-редактора.

2. Автоматизированный:

2.1. С использованием прикладных программ, поддерживающих формат HTML

2.2. Использование средств визуального HTML проектирования

При массовом создании web-документов рекомендуется использовать 2-й подход.

^

2. Понятия и особенности HTML


Подготовка Web-документов осуществляется с помощью языка HTML
(Hyper Test MarkUp Language) – языка гипертекстовой разметки документов.

Разметка - наличие в теле документа определенных команд.

Особенности HTML:

1. Возможность вывода HTML документа независимо от платформы АО и ПО.

2. Невозможность абсолютно точного воспроизведения исходного документа.

3. HTML оговаривает функциональные характеристики документа (структура и логические части, но не форматирование).

4. HTML не линеен. HTML – практически завершенный стандарт.

В дополнение к HTML развиваются вспомогательные средства описания Web-документов:

1) Языки списков стиля (для оформления документов)

2) Языки сценариев (для управления страницами)

3) Средства динамического изменения содержимого

^

3. Структура HTML-документа.


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

П
Документ 1
Текст документа 1
ример:

Простейший HTML-документ:

<HTML>

<HEAD>

<TITLE>

Документ 1

< /TITLE>

</HEAD>

<BODY>

Текст документа 1

</BODY>

</HTML>

В элементе <BODY> могут содержаться элементы, описывающие содержание документа:

1. Блочные элементы, которые описывают заголовки и абзацы.

2. Текстовые элементы.

Правила вложения элементов:

1. Элементы не должны пересекаться.

2. Блочные элементы могут содержать вложенные блочные и текстовые элементы.

3. Текстовые элементы могут содержать вложенные текстовые элементы.

4. Текстовые элементы не могут содержать вложенные блочные элементы.

^

4. Понятие и общая характеристика тэгов.


Тэг – специальная инструкция языка HTML.


<ТЭГ>



Одиночные

Атрибуты

Имя

=

Знач-е

<HR>

Открывающий

Закрывающий

Парные
<BODY> </BODY>



^ BGCOLOR = GREY

<BODY BGCOLOR=GREY TEXT=YELLOW>

Тэги бывают блочные и текстовые.

Тэги блочного уровня создают переход к новому абзацу:

1. Заголовки – используются для логичной организации документа, выделяют отличным шрифтом определенный текст.

Существует 6 уровней заголовков, (1-й верхний)

<H1>…</H1>

.……………

…………….

<H6>…</H6>

<H1 ALIGN = CENTER>

2. Абзац

<P>…</P>

3. Предварительно отформатированный текст

<PRE>

……….

</PRE>

4. Конец строки – одиночный тег – позволяет перейти на новую строку без пустой строки между абзацами. <BR>

5. Горизонтальная линия – для отделения разделов <HR>

<HR COLOR=RED>

6. Списки

Списки могут быть:

1. Нумерованные <OL> </OL>

2. Маркированные <UL></UL>

3. Определений <DL></DL>

Эти списки могут быть вложенными. Для описания пункта списка используется тэг <LI>.
Текстовые тэги – используются для манипулирования текстом (начертание шрифта) в пределах блочного элемента (абзаца, заголовка).

<FONT SIZE = 5 FACE = ARIAL COLOR = GREEN> - тег FONT задает шрифт ARIAL, зеленого цвета, размер 5 (можно выбрать от 1 до 7).

<B> полужирный</B> - полужирный

<I> курсив </I> - курсив

<U> подчеркнутый </U> - подчеркнутый

<BIG> большой текст </BIG> - большой текст

<SMALL> маленький текст </SMALL> - маленький

<SUB> нижний индекс </SUB>- нижний индекс

<SUP> верхний индекс </SUP>-

^ Бегущая строка:

<MARQUEE> текст… </MARQUEE>

Определение способа бега строки (атрибуты):

BEHAVIOR = alternate (маятник)

slide (слайд)

WIDTH = ширина/высота строки (количество

HEIGT = пикселей)

BGCOLOR = - фон

Правила интерпретации тэгов:

1. Игнорируется множественность пробелов.

2. Игнорируются отступы перед и после тэгов.

3. Игнорируются пустые строки между тэгами.

4. Игнорируются концы строк в абзаце – для перехода на новую строку используется
тэг <BR>.

^

5. Графика в HTML


Выразительность и наглядность документа в HTML придают графические изображения.

Преимущественно используются 2 формата: GIF, JPEG.

Для размещения изображений используется тэг IMG с атрибутами:

<IMG SRC = ”URL” – статическое изображение (gif, jpeg)

DYNSRC = “URL” – видеоизображение (avi, mpeg)

ALT = “[…]” – альтернативный текст

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

ALIGN = TOP – выравнивание (по верхнему краю)

= MIDDLE (по центру)

= BOTTOM (по нижнему краю)

= LEFT ( по левому краю)

= RIGHT ( по правому краю)

VSPACE = 20 - пустое пространство вокруг

HSPACE = 20 – рисунка (Horisontal, Vertical)

BORDER = 5 – рамка

>

Адресация (URL) бывает абсолютная и относительная. Рекомендуется относительная.

SRC = “top.gif” – относительная адресация

Абсолютная адресация: “html://www.aga.ru/pop.html”
^ Преобразование графиков и диаграмм Excel в формат gif:

Необходимо скопировать диаграмму или график в буфер обмена, вставить в Word – Меню/Правка/Специальная вставка, Сохранить документ Word в html формате.

Изображение можно использовать для построения навигационных карт.

^

6. Связывание HTML-документов


Для создания связи ( гиперссылки ) используется тэг A с атрибутами:

Пример:

<А HREF = “web1.html” – имя документа>текст гиперссылки </A>

Связь с разделами внутри документа:

1. Создать точку привязки в документе (якорь)

<A NAME = “photo”> photo list </A>

2. Создать ссылку на точку привязки

<A HREF = “#photo”> See photo list </A>

^

II Общие сведения о проектировании web- узлов

Этапы разработки web- узла



Цели создания сайта и

критерии их достижения


I. Определение целей и задач, планирование.







При планировании:

1. Проведение маркетинговых исследований.

2. Определение целевого сегмента потребителей.

3. Составление бизнес-плана

4. Источники финансирования

5. Определение исполнителей проекта.



Первоначальная реализация:

  1. Реализация дизайна.

  2. Информационное наполнение.

  3. Интеграция с информационной системой предприятия.

  4. Первоначальное тестирование

  5. Выбор провайдера

  6. Выбор места размещения

  7. Выбор и регистрация доменного имени.

  8. Размещение сайта на сервере.



Поддержка и обновление сайта:

1. Информационное обновление.

2. Применение новых технологий.

3. Проверка работоспособности.


Привлечение и
удержание посетителей


IV. Оценка эффективности сайта


II. Реализация сайта

III. Продвижение сайта



^

III Разработка Web-документов с помощью Microsoft Front Page


I. Назначение и функции Front Page (FP).

II. Режимы просмотра FP, их особенности и переключение между ними.

III. Создание и сохранения web-сайтов и страниц.

IV Оформление и форматирование web-страниц

V Связывание страниц

^

1 Назначение и функции Front Page (FP).


Front Page – среда визуального проектирования.

FP работает по технологии клиент-сервер, он включает ПО клиента (FP Explorer и FP Editor), а серверная часть (FP Personal Web Server или Microsoft Personal Web Server).

FP Explorer позволяет просматривать и администрировать web-сайт разными способами.

FP Editor позволяет создавать и редактировать страницы (включая работу с различными объектами).

Для полноценной работы с FP необходима установка Microsoft Personal Web– ПО, поддерживающее технологию клиент-сервер и расширения Ms FrontPage (FrontPage Server Extensions - для корректной работы некоторых компонентов FrontPage).

MsFP – стандарт офисного проектирования Web-страниц.

DreamWeaver – промышленный стандарт.

Особенности FP:

  1. Стандартный интерфейс MsOffice (оформление, меню, приемы управления).

  2. Поддержка технологии drag and drop.

  3. Поддержка различных форматов, импорт/экспорт данных.

  4. Наличие большого количества мастеров (от мастера создания web-страницы до мастера публикации web-сайта).

  5. Создание и использование шаблонов оформления, тем.

  6. Возможность создания и редактирования собственных таблиц стилей (Format/Style).

  7. Возможность создания различных компонентов (Insert…), таблиц (Table…) и страниц с фреймами (File/New/Pages/Frames Pages).

  8. Возможность добавления динамических эффектов к объектам на странице (Format/Dynamic HTML Effects).

  9. Предварительный просмотр в броузере + возможность выбора броузеров из числа установленных.

  10. Предварительный просмотр страницы перед печатью.

  11. Поддержка многооконного режима работы.

  12. Проверка орфографии, поиск и замена фрагментов текста.



^

2 Режимы просмотра FP, их особенности и переключение между ними.


FP – позволяет выполнять работу в следующих режимах:

  1. Page (можно слева отобразить панели Views и Folder List из меню View) - окно
    web-страницы содержит три вкладки Normal, HTML, Preview.

  2. Folders (Views и Folder List) – позволяет проанализировать подробную информацию о документах сайта.

  3. Reports – список отчетов о состоянии сайта и отдельных страниц (Site Summary, Slow Pages, Publish Status и т.д.). Изменить срез анализа можно из ПИ Reporting.

  4. Navigation – показывает навигационную карту сайта и позволяет формировать иерархическую структуру сайта, чтобы иметь возможность добавлять связи на страницы (Insert/Navigation Bar).

  5. Hyperlinks – отображает существующие ссылки между страницами узла.

  6. Task – показывает список задач, которые необходимо выполнить для web–узла. Список может заполняться при работе некоторых мастеров или вручную.

Переключение между режимами:

1. Views Bar 2. Командное меню/View

^

3 Создание и сохранения web-сайтов и страниц.


В Front Page существует 2 подхода к созданию web-сайтов:

1. Создание нового сайта с последующим добавлением страниц:

1.1. С помощью мастера

1.2. С помощью шаблона

2. Создание сайта на основе существующего (для обновления существующего):

2.1 Импорт существующего сайта

2.2 Импорт web- страницы

При любом способе web-страницы можно добавлять, удалять, перемещать.

^

Порядок создания web-сайта:


  1. Меню File/New/Web – в д/о выбрать мастер или шаблон.

  2. В д/о выбрать местоположение сайта.

Обычно в папке Мои документы создается MyWebs.

При создании каждого нового web-сайта добавляется папка myweb№, в которой формируется структура папок и файлов:

  • _private – в папке размещаются файлы, необходимые для организации и управления web-сайтом. Содержимое папки нельзя удалять и изменять.

  • images – для хранения изображений.

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



^ Шаблоны


Шаблоны – образцы сайтов выполненные в едином стиле и включающие набор страниц с информацией по теме.

One Page Web – сайт содержит одну домашнюю страницу (index.htm).

^ Customer Support – макет сайта поддержки потребителей (готовый набор страниц-заготовок, которые необходимо изменить в соответствии с требованиями пользователя).

^ Empty Web – пустой сайт, не содержит страниц, только структуру папок.

Personal Web – макет личной web-странички.

Project Web – макет сайта для обмена информацией между членами группы, работающей над проектом. Готовые страницы со списком сотрудников, расписанием, статусом проекта и т.п.

^ Мастера


Мастер – специальная программа, позволяющая в пошаговом режиме проектировать сайт со сложной структурой.

Discussion Web – позволяет создать сайт для ведения обсуждений.

^ Corporate Presence - позволяет создать сайт компании, включая страницы с описанием продукции и услуг, для взаимодействия с пользователями и т.д.

Import Wizard – позволяет импортировать готовые web-сайты как из локальной сети, так и из Интернет, с целью последующей модификации.

^

Добавление и удаление страницы:


Добавление и удаление страницы может выполняться в любом режиме (удобнее в режиме Page).

File/New/Page – выбрать в д/о шаблон страницы (на вкладках General, Frames Pages). Можно также создать внешнюю таблицу стилей (на вкладке Style Sheets).

^

4 Оформление и форматирование web-страниц


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

^

Темы Front Page


Тема придает всем страницам единый стиль оформления.

Темы Front Page разработаны профессиональными дизайнерами. Представляют собой поименованный набор элементов оформления, выдержанных в определенной цветовой схеме.

Для применения Темы – меню Format/Theme.

Кнопка Modify позволяет изменить элементы оформления.

Если использовать кнопку Save as, можно создать собственную тему.

Чтобы отменить тему: Format/Theme/All, Selected/No Themes.

Стили


Альтернативным способом оформления web-страниц является использование стилей и стилевых таблиц.

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

3 способа оформления стилей:

1. КЗМ/Properties/Style/Format – создается встроенный стиль.

2. Создание таблицы стилей страницы: Format/Style/New or Modify.

3. Создание внешней таблицы стилей и установка связей между таблицей стилей и web-страницей.

^

Компоненты FP


Это специальные программы, которые выполняются при запуске web-страницы в броузере. Они расширяют функциональные возможности страницы.

С помощью меню Insert на страницу можно добавить:

  • Break – разрыв абзаца

  • Horizontal line – горизонтальная линия

  • Date and Time – дата и время последнего сохранения

  • Symbol

  • Comment – отображается только в режиме Page/Normal

  • (*) Navigation Bar – отображает общие гиперссылки в общих фреймах (shared borders). Иерархическая структура сайта должна быть создана в режиме Navigation.

  • (*) Page Banner – текстовый баннер в верхней части страницы.

Компоненты FP доступны из меню Insert/Component.

  1. Офисные компоненты

    • электронная таблица SpreadSheet,

    • сводная таблица – Pivot Table,

    • диаграмма – Chart.

  2. Banner Ad Manager – менеджер рекламных баннеров - управляет показом баннеров, устанавливает связи между баннерами и web-страницами.

  3. (*) Hit Counter –счетчик посещений

  4. Hover Button – всплывающая кнопка (визуальный эффект при наведении мыши и нажатии)

  5. Marquee – бегущая строка (с текстом)

  6. (*) Confirmation field –поле подтверждения ввода информации в форме на странице

  7. Include Page – включаемая страница (например, инфо об авторских правах)

  8. (*) Scheduled Picture - рисунок отображаемый по расписанию ( в течение определенного промежутка времени, например «Новая»).

  9. (*) Scheduled Page Include – включаемая страница, отображаемая по расписанию (например, инфо о сезонной распродаже, скидках).

  10. Substitution – замещение части текста другим.

  11. Categories – вставляет гиперссылки на страницы по определенным категориям (при составлении оглавлений)

  12. Search Form – форма поиска. При добавлении этого компонента создается индекс сайта, который используется при создании списка гиперссылок с результатами поиска.

  13. (*)Table of Contents – создание оглавления сайта в виде списка гиперссылок.


Дополнительно:

  • Form – элементы управления для создания форм

  • Picture – Clip Art; From File/ Video

  • File: doc, rtf, txt, xls, wk1…4, html

  • Book Mark

  • Hyper link


Свойства каждого компонента настраиваются из КЗМ – properties или Alt+Enter.

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

^

Элементы мультимедиа на web-странице




Текст


Набор и форматирование текста – как в любом приложении Ms Office.

Перенос текста на другую строку без образования абзаца: Shift+Enter, новый абзац: Enter.

Форматирование символов – Format/Font.

Форматирование текста в абзаце: Format/Paragraph, можно задать отступы в пикселях и т.д.

Для текста можно задать границу и заливку: Format/Borders and Sharing.

Чаще всего для оформления текста используются

списки - Format/Bullets and Numbering и

таблицы Table.

^

Графические изображения


Оптимальными являются графические объекты с размером не более 10 кбайт.

Форматы gif, jpg.

Если изображение велико или много картинок, то рекомендуется создавать эскизы:

1. Поместить на страницу рисунок (Insert/Picture)

2. Выделить рисунок

3. На панели инструментов Pictures – “Auto Thumbnail”

4. Настройка свойств – КЗМ Properties

Любое графическое изображение или его часть могут превратиться в гиперссылку.

Позиционирование изображения выполняется: Format/Position + Обтекание текстом и расположение.

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

Звук


Можно добавить фоновое звуковое сопровождение к странице. Для этого в режиме Page выбрать файл, ^ File/Page Properties. На вкладке General указать размещение звукового файла Background Sound Location, кнопка Browse, а также задать параметры воспроизведения (число циклов или постоянно).
Но, если в качестве броузера будет использоваться не Internet Explorer, звук будет отсутствовать, так как будут использоваться другие инструкции HTML для воспроизведения звука.

Видео


Видеоклипы могут быть добавлены на страницу непосредственно или при помощи гиперссылки:

  • Insert/Picture/Video, указать файл, затем настроить параметры воспроизведения (по умолчанию клип будет воспроизведен только один раз при открытии страницы)

  • Insert/Hyperlink (предварительно выделить текст или графический объект на странице), указать файл с видео клипом. При щелчке на гиперссылке активизируется Универсальный проигрыватель (Media Player), в котором воспроизводится клип.



^

Динамические эффеты


Format/Dynamic HTML Effects

Объект – Событие - Эффект и его параметры.

Может быть назначен эффект перехода для всей страницы Format/Page Transition, указать эффект и время.

^

5 Связывание страниц


  1. Структура гиперссылки

  2. Типы гиперссылок и способы их представления в MS FP

  3. Порядок создания, изменения и удаления гиперссылок

  4. Использование закладок

  5. Создание интерактивных карт-изображений

  6. Оптимизация гиперссылок



^

5.1 Структура гиперссылки


Связывание выполняется с помощью гиперссылок.

Гиперссылка – инструкция HTML, включенная в код web-страницы и обеспечивающая связь с другим web-документом

ГС как объект web-страницы имеет структуру:

  • тело гиперссылки (текст, рисунок)

  • адрес назначения (URL)

Синтаксис ГС:

<А HREF = “адрес гиперссылки - URL”> гиперссылка </A>

^

5.2 Типы гиперссылок и способы их представления в MS FP


Классификация ГС:

по объекту назначения

  • внутренними

  • внешними

по способу представления адреса

  • абсолютными

  • относительными

Возможны следующие типы адресов гиперссылок:

    1. внешние ссылки на документы WWW:

http://www.microsoft.com/frontpage

кроме http, м.б. использованы протоколы ftp, news, nntp, telnet

    1. внешние ссылки на адрес электронной почты (в конце страницы, обр связь, не открывают новую страницу, а открывают д/о отправки сообщений):

mailto:address@pochta.by

    1. внутренние ссылки на документы ПК

абсолютные - file:///D:/Student/name.htm или file://D:\Student\name.htm

относительные - файл (в текущей папке)

./Папка/файл (папка с файлом в текущей папке) или

../Папка/файл (папка с файлом имеет тот же уровень)

    1. внутренние ссылки на другие страницы текущего сайта:

name_page.htm

    1. внутренние ссылки на закладки страницы:

#имя закладки (в документе должна быть создана закладка или якорь
<A NAME=”имя закладки”> Текст закладки </A>)

Cсылки на закладки могут быть и внешними:

http://адрес/файл#закладка
Способы представления гиперссылок на странице (тело ГС):

  1. Текст

    1. одиночные (неупорядоченные, непосредственно в тексте, не должно быть много)

    2. списки гиперссылок (могут быть вложенные списки)

  2. Изображения (статические или видео)

  1. Одиночный рисунок

  2. Интерактивные карты-изображения (Image Map)


^

5.3 Порядок создания, изменения и удаления гиперссылок


Существует три способа создания ГС

    1. Режим Page/Normal, выполнить Insert/Hyperlink

В д/о в строке URL – тип ссылки (внешний адрес, внутренний, почтовый, можно создать новую страницу и связать с ней текущую)

Можно выбрать имя закладки для заданной ссылки, а также задать назначение отображения создаваемой гиперссылки (для страницы с фреймами) – та же страница, новая, родительский фрейм.

    1. Режим Page/Normal, выделить текст или рисунок и Insert/Hyperlink или КЗМ/ Hyperlink

    2. методом drag–and-drop в режиме Page/Normal в панели Folder List выделить файл и перетащить на отображаемую страницу. Имя гиперссылки будет представлять заголовок добавленной страницы.


Редактирование ГС – КЗМ/Hyperlink Properties.

Удаление может быть выполнено двумя способами:

    1. Очистить поле URL в д/о Hyperlink Properties

    2. Удалить тело гиперссылки.



^

5.4 Использование закладок


Закладка (якорь) – инструкция HTML, обозначающая метку внутри web-документа. Чаще всего используются для организации переходов внутри страницы, но могут и для внешних ссылок, к определенной части новой страницы.

Работа с закладками состоит из двух этапов:

      1. Создание закладки (2 способа)

        1. Insert/Bookmark, задать имя (в режиме Page/Normal в месте закладки появится флажок)

        2. Выделить фрагмент текста или изображение Insert/Bookmark, задать имя (для текста по умолчанию – сам текст, будет почеркнут штрихом)

      2. ^ Создание гиперссылки на закладку:

Insert/Hyperlink, в д/о выбрать Bookmark из списка. Если используется закладка для внешней страницы – сначала задать URL, потом выбрать закладку.

Удаление закладок аналогично удалению гиперрсылок.

^

5.5 Создание интерактивных карт-изображений


2 вида карт-изображений:

    1. Серверные карты изображения

    2. Клиентские карты-изображения

Серверные:

  • не работают на локальном диске

  • требуют запуска CGI-сценарией, что разрешают далеко не все сервера

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

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

<MAP NAME="FPMap2"> - описание карты

<AREA HREF="status.htm" SHAPE="rect" COORDS="9, 7, 46, 41">

<AREA HREF="members.htm" SHAPE="circle" COORDS="69, 35, 21">

</MAP> “poly”

<IMG SRC="_borders/left.h1.gif" USEMAP="#FPMap2" WIDTH="97" HEIGHT="73">

Для создания карты в FP используется ПИ Рисование:

Кнопки HotSpot – Rectangular, Circular, Polygonal.

При использовании кнопки в д/о необходимо задать: гиперссылку.

Задать альтернативный текст: в коде <area href="status.htm" alt = "всплывающая подсказка" shape="rect"coords="9,7,46,41">.

При создании интерактивных карт придерживаться правил:

      1. Использование д.б. обоснованным

      2. Четкое выделение крупных сегментов

      3. Рекомендуется использовать изображение с низким разрешением (IMG LOWSRC= URL …)

      4. Web-броузер д. поддерживать карты

      5. Протестировать хотя бы в двух броузерах



^

5.6 Оптимизация гиперссылок


  1. Ссылок на странице не д.б. много

  2. Ссылки д.б. упорядочены

  3. Текст ссылок д.б. понятен (не использовать слова Здесь, Щелкнуть и т.п.)

  4. Текст ссылок не должен нарушать стиль изложения материала

  5. Ссылки на большие документы, рисунки, видео должны содержать предупреждение о времени загрузки.

  6. Ссылки должны поддерживаться в актуальном состоянии.



^

IV Публикация сайта


М.б. выполнена из FP или по FTP с сервера.

До публикации необходимо узнать:

  • адрес сервера ( и адрес FTP-сервера, если не поддерживает FrontPage Server Extensions)

  • имя домашней страницы (index.htm или default.htm)

  • имя папки, в которой будет размещен сайт (если не поддерживает FrontPage Server Extensions)

При подготовке сайта к публикации необходимо выполнить следующее:

  1. Проверить орфографию

Для одной страницы – Page/Normal, Tools/Spelling

Для всего сайта – Navigation, Tools/Spelling, Entire Web, можно добавить задачи для страниц с ошибками

  1. Проверить смысловые ошибки

  2. Оценить стиль оформления

  3. Опубликовать резервную копию на локальном ПК:

File/Publish Web, в д/о указать местоположение на диске ПК (кнопка Browse)

  1. Опубликовать на сервере (поддерживающем FrontPage Server Extensions, список по адресу: www.microsoftwpp.com/wpp.search/intlwpp.htm)

- Установить соединение

- File/Publish Web, в д/о указать URL: http://www.prov.dom/folder

- При необходимости в д/о задается имя и пароль (которое задавалось при создании учетной записи в Internet)

  1. Можно опубликовать сайт на сервере общего пользования по протоколу FTP (ftp://ftp.prov.domen) или непосредственно с сервера с помощью файл-менеджера.


Сайт можно открыть непосредственно с сервера и выполнить его изменение.

^ File/Open Web/ в поле Папка набрать URL.

При открытии будет запрошено имя и пароль.

Загрузка отображается в правом нижнем углу СС FP.

После внесения изменений сохранить страницу.

Можно доопубликовать новые страницы: (File/Publish Web Options, Changed Page only).

Переименовать сайт: Tools/Web Settings, General, Web Name…. (при работе на стороне сервера может быть недостаточно прав)



Скачать файл (205.5 kb.)

Поиск по сайту:  

© gendocs.ru
При копировании укажите ссылку.
обратиться к администрации