Лабораторная работа № 4. Создание простой Web-страницы в SharePoint Designer.

Цель работы: Изучить возможности программы Microsoft SharePoint Designer по созданию web-страниц и получить практические навыки создания web-страниц в этой программе.

Краткие теоретические сведения.

Для разработки web-сайтов (web-страниц) используются средства проектирования сайтов, которые реализуют режим WYSIWYG (What You See Is What You Get, что видишь – то получишь). Для этой задачи широко применяется Microsoft SharePoint Designer.

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

Запуск приложения SharePoint Designer выполняется с помощью кнопки «Пуск», далее выбрать Все программы – Microsoft Office - SharePoint Designer

После запуска приложения SharePoint Designer раскроется окно, которое содержит меню и две панели инструментов: «Стандартная», для быстрого вызова часто используемых команд и «Форматирование», для работы с текстом. Отображать или скрывать определенные панели инструментов можно с помощью команды «Вид» - «Панели инструментов».

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

Редактор SharePoint Designer позволяет работать с web-страницей в трех режимах:

• Конструктор (Designer)- режим по умолчанию, позволяет разрабатывать и редактировать Web - страницу в режиме WYSIWYG;

• С разделением (Split) – предоставляет одновременный доступ к режимам «Код» и «Конструктор»

• Код (Code)– позволяет редактировать страницу в текстовом представлении;

Для переключения режимов редактора служат вкладки (Конструктор, С разделением, Код), которые находятся в нижней строке окна редактирования.

Для получения подсказки об использовании редактора следует вызвать справку, нажав F1 или выбрав нужный вариант справки в пункте меню Помощь(Help).

Создание и сохранение страницы выполняется через меню «Файл».

Для завершения работы нужно выполнить команду ФайлВыход (FileExit).

Основные приемы работы с текстом.

Ввод текста и установка для него различных параметров при создании web-страницы в SharePoint Designer осуществляется также как в любом текстовом редакторе.

При создании списка следует выполнить команду ФорматСписок (Format Bullets and Numbering). В окне диалога выбрать тип списка, маркер или тип нумерации.

Для вставки картинок в текст документа необходимо:

1. Выполнить команду InsertPictureFrom File(ВставкаРисунокИз файла).

2. В появившемся окне Picture(Рисунок) нужно выбрать файл, из которого будет загружен рисунок. Кнопка Scan позволяет вставить изображение, полученное с помощью цифровой видеокамеры, совместимой со стандартом TWAIN, или со сканера.

Для вставки видеофрагмента нужно:

1. Выполнить команду InsertPictureVideo(ВставкаРисунокВидеофрагмент).

2. В появившемся окне указать папку и файл для вставки. Такими файлами являются AVI-файлы, то есть файлы с расширениями avi, ram и ra.

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

1. Выполнить команду FileProperties(ФайлСвойства).

2. В появившемся диалоговом окне на вкладке General в группе элементов управления Background Sound в поле Location указать адрес аудиофрагмента, который будет звучать при открытии страницы. Включенный переключатель Forever означает, что фрагмент будет повторяться постоянно, пока страница является активной. В поле Loop указывается количество воспроизведений данного аудиофрагмента.

Для вставки и редактирования таблицы предназначен команда меню «Таблица». Для размещения новой таблицы следует выполнить команду «Таблица» »Вставить таблицу» и задать параметры таблицы.

Закладка (ссылка внутри одного документа) используется для организации перехода по ссылке в пределах одного документа, например, в начало или в конец документа.

Для создания закладки следует:

• Выделить группу символов, слово или фразу, на которую будет осуществляться переход и выполнить команду «Вставка» - «Закладка» (Insert – Bookmark) и определить имя закладки - Ok

• Выделить группу символов, слово или фразу, по которой будет осуществляться переход и выполнить команду «Вставка» - «Закладка» ( Insert – Bookmark) - определить имя закладки - Ok

• Выделить текст ссылки и выполнить команду «Вставка» - «Гиперссылка» (Insert — Hyperlinks) - открыть окно Bookmark — выбрать имя ссылки – Ok

Для вставки гиперссылки используется пункт меню (ВставкаГиперссылка) InsertHyperlink или кнопка на основной панели инструментов Create or Edit Hyperlink. На экране появляется диалоговое окно Создание гиперссылки. В основной таблице окна находится содержимое сайта, адрес которого указан в поле списка выбора Look in. Ссылка на внешний сайт пишется в строке URL. Поиск адреса нужного сайта обеспечивает кнопка с изображение земного шара и лупы, по нажатию на которую запускается браузер. Для установки локальной гиперссылки, то есть ссылки на файл, находящийся на локальном компьютере нужно нажать кнопку с изображением папки и лупы. Кнопка с изображением конверта позволяет вставить в качестве гиперссылки адрес электронной почты. Кнопка с изображением чистого листа предназначена для создания новой пустой страницы и вставки в исходную страницу гиперссылки на нее. В поле Target Frame указывается окно, в которое будет помещена страница, открываемая по гиперссылке. Кнопка выбора позволяет выбрать один из следующих вариантов:

• Page Default-новое окно открываться не будет;

• Same Frame – в текущее окно;

• Whole Page –загрузка документа произойдет в окно самого верхнего уровня, которое будет занимать все окно просмотра браузера;

• New Window – откроется в новом окне без названия;

• Parent Frame – документ загрузится в родительское (по отношению к текущему) окно.

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

• Folder List – включает и выключает двухоконный режим отображения для основного окна.

• Кнопка с изображением лупы – запускается основной браузер для просмотра текущей страницы.

• Insert Component – вставка компонентов. Эта же операция может быть выполнена командой InsertComponent(ВставкаКомпонент).

• Insert Table – вставка таблицы.

• Insert Picture From File – вставка рисунка из файла.

Кнопки панели Pictures.

• Select – перевод изображения в режим выделения.

• Rectangular Hotspot, Circular Hotspot, Polygonal Hotspot – позволяют начертить прямоугольник, овал и многоугольник с активной областью для гиперссылки.

• Highlight Hotspots – убирает содержимое рисунка и высвечивает «горячие области» гиперссылок, внедренных в этот рисунок.

• Text – вставка прямоугольника с текстом.

• Set Transparent Color – Каждая точка рисунка, имеющая тот же цвет, что и та, на которую указывает указатель мыши, примет цвет фона, то есть станет прозрачной.

• Crop – предназначена для изменения границ рисунка.

• Washout – выделенный рисунок делается очень низкоконтрастным (для фона страниц и встроенных таблиц).

• Rotate Left, Rotate Right, Reverse, Flip – предназначены для разворота выделенного изображения.

• Level – создает объемную границу справа и снизу изображения.

• Resample – выполняется перерасчет изображения после изменения его размеров.

Задание. Создать в Microsoft SharePoint Designer простую Web-страницу произвольной темы. Например, «Мой колледж», «Мои увлечения».

Для этого выполнить следующее:

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

2. Загрузить Microsoft SharePoint Designer. Изучить внешний вид и компоненты.

3. Разместить на странице текст, текст в виде списка, рисунки.

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

5. Создать на странице внутреннюю ссылку (закладку).

6. Сохранить документ, просмотреть в браузере, проверить работу закладки.

7. Создать две – три новые страницы.

8. Соединить страницы гиперссылками разного типа (текстовыми, графическими).

9. Сохранить документы, просмотреть в браузере.

10. Завершить работу с Microsoft SharePoint Designer.

11. Открыть первую страницу в браузере и проверить работу ссылок.

Контрольные вопросы.

1. Как создать и отредактировать гиперссылку?

2. Как вставить видеофрагмент, аудиофрагмент?

3. Что такое локальная гиперссылка?

4. Опишите инструментальные панели FrontPage.

5. Что такое закладка и как она создается?

6. Как разместить на странице фоновый рисунок?