Мой офис Состав и возможности ms Office

Выполнить следующие действия:

• В начало тела web-страницы (сразу после открывающей части тэга BODY) добавить нужный текст, заключить блок из двух строк в тэг P. Разбить текст на две строки, вставив между ними тэг BR.

• Установить логическое выделение абзаца с заголовком, добавив в тэг P параметр CLASS со значением zagolovok. Логическое выделение пока никак не отразится на внешнем виде текста заголовка.

<p class=”zagolovok”>Мой офис<br>

Состав и возможности MS Office</p>

Задание 2. Добавить на web-страницу графические изображения, позиционировать рисунки с помощью таблицы.

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

26. Скопировать в папку images графические файлы из папки C:\Program Files\Microsoft Office\OFFICE12\ BITMAPS\DBWIZ.

ВНИМАНИЕ! В целях дальнейшей корректной работы компьютера проверьте, что файлы не удалены из исходной папки!

ПРИМЕЧАНИЕ: Можно использовать другие графические файлы формата GIF или JPEG (имеющие расширения .GIF, .JPG, .JPEG). Стандартная папка C:\Program Files\Microsoft Office\CLIPART\PUB60COR содержит много различных графических файлов. Для правильного выбора файла и корректного указания его имени в коде HTML следует отобразить в окне Проводника Windows (Мой компьютер) полные имена файлов с расширениями. Для этого выполнить команду Сервис/Свойства папки/Вид и снять флажок Скрывать расширения для зарегистрированных типов файлов. Для облегчения выбора файлов с нужным расширением рекомендуется упорядочить значки по типу в окне Проводника Windows (Мой компьютер).

27. В начало страницы «Мой офис» добавить эмблему, хранящуюся в графическом файле evtmgmt.gif. Для этого перед абзацем заголовка, вставить непарный тэг IMG с указанием в качестве значения параметра SRC имени графического файла и пути к нему:

<img src=”images/evtmgmt.gif”>

28. Расположить текст заголовка рядом с эмблемой, для чего задать обтекание изображения текстом с помощью параметра ALIGN тэга IMG. Задать для параметра ALIGN значение right, чтобы изображение находилось справа от текста. Просмотреть результат.

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

• Заключить блок с текстом из четырех строк в тэг маркированного списка UL. Тэги BR из текста не удалять.

• Скопировать в папку images из папки C:\Program Files\Microsoft Office\CLIPART\PUB60COR файл изображения, который будет служить графическим маркером (например, файл с изображением бабочки AG00130_.GIF).

• Добавить в начало первой строки тэг IMG с указанием в параметре SRC адреса графического файла-маркера. Уменьшить размер изображения-маркера, чтобы он не вы по высоте ходил за пределы строки: добавить в тэг IMG параметр HEIGHT со значением 20. Например,

<img src=”images/AG00130_.GIF” height=”20”>

• Скопировать тэг вставки рисунка в начало каждой их строк списка (рис.5)

Рис.5. Список с графическим маркером

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

• Перед закрывающей частью тэга BODY добавить код, задающий таблицу из одной строки и четырех столбцов:

<table>

<tr>

<td></td> <td></td> <td></td> <td></td>

</tr>

</table>

TABLE – тэг, описывающий таблицу целиком, TR – тэг строки таблицы, TD – тэг ячейки таблицы.

• Для того, чтобы границы ячеек таблицы были видны на экране, задать для таблицы рамку – добавить в тэг таблицы TABLE параметр BORDER со значением 1.

31. В ячейки второй строки занести соответственно текст «текстовый редактор Word», «табличный процессор Excel», «СУБД Access», «редактор web-страниц FrontPage».

32. Добавить заголовок таблицы, для этого:

• В начало таблицы добавить еще одну строку (тэг TR) с одной ячейкой TH.

• В ячейку TH (после открывающей и перед закрывающей частью соответствующего тэга) добавить текст заголовка таблицы «Подробнее о приложениях MS Office».

• Убедиться, что заголовок таблицы размещается лишь в первом столбце таблицы.

• Распространить заголовок на все четыре столбца таблицы, для чего для тэга TH задать параметр COLSPAN со значением 4 (ячейка охватывает 4 столбца).

• Установить логическое выделение ячейки с заголовком, добавив в тэг TH параметр CLASS со значением zagolovok. Логическое выделение пока никак не отразится на внешнем виде текста заголовка.

33. В каждую ячейку второй строки перед текстом с помощью тэга IMG вставить по одному рисунку из папки images (рисунки должны быть разными, подходящими на ваш взгляд для соответствующего приложения), например:

<td><img src=”images/contacts.gif”> текстовый редактор Word 2003</td>

34. Вставить в каждой ячейке между рисунком и текстом тэг перевода строки BR.

35. Для таблицы задать отступы по 10 точек от границ ячеек до текста с помощью параметра CELLPADDING тэга TABLE.

36. Просмотреть реальный размер изображений, для этого щелкнуть правой кнопкой мыши на рисунке в окне браузера и выполнить команду Свойства. Уменьшить размер изображений в таблице, указав в тэге IMG значение 103 для параметра WIDTH (ширина изображения) и значение 92 для параметра HEIGHT (высота изображения). Например:

<img src=”images/contacts.gif” width=”103”

height=”92”>

Просмотреть изменения в браузере.

• Задать вертикальные отступы вокруг изображений по 10 точек с помощью параметра VSPACE тэга IMG.

• Просмотреть результат в браузере (рис.6). Уменьшить ширину окна браузера и пронаблюдать, как изменится расположение текста и изображений в таблице.

37. Отключить отображение границ таблицы, для чего изменить значение параметра BORDER тэга TABLE на ноль (0).

38. Выровнять таблицу по центру страницы, задав для тэга TABLE параметр ALIGN со значением center.

Рис.6. Позиционирование графики с помощью таблицы

Задание 3. С помощью гиперссылок связать страницу «Мой офис» с другими web-страницами, создать переход внутри самой страницы.

39. Создать текстовую ссылку на страницу с подробным описанием MS Office 2003. Страница расположена на диске компьютера в папке C:\Program Files\Microsoft Office\Office11\1049, файл носит название ofreadme.htm. В качестве указателя ссылки будет использован выделенный курсивом текст «Предполагаемое действие», находящийся в верхней части страницы «Мой офис». Создать ссылку:

• Скопировать страницу ofreadme.htm в свою рабочую папку (проверить, что она сохранилась и в исходном местоположении).

• Найти в HTML-коде страницы «Мой офис» фрагмент кода, описывающий строку «Предполагаемое действие». Для того, чтобы визуально отделить строку от остального текста, вставить перед ней еще один тэг BR.

• Заключить текст строки, выделенный тэгом форматирования шрифта EM в тэг гиперссылки A. Для открывающей части тэга A задать параметр HREF, значением которого является адрес страницы, на которую указывает ссылка. Поскольку файл страницы ofreadme.htm расположен в той же папке, что и файл страницы «Мой офис», содержащей ссылку, в качестве адреса гиперссылки указывается только имя ofreadme.htm.

<br><br>

<a href=”ofreadme.htm”>

<em> Предполагаемое действие</em>

</a>

<br>

40. Аналогично предыдущему пункту сделать графический значок в последнем столбце таблицы ссылкой на страницу с описанием приложения FrontPage. Файл страницы с описанием FrontPage находится в папке C:\Program Files\Microsoft Office\Office11\1049 и носит названия fpreadme.htm:

• Скопировать файл fpreadme.htm в свою рабочую папку.

• В коде HTML найти тэг ячейки таблицы с описанием FrontPage.

• Заключить тэг IMG, находящийся в ячейке, в тэг гиперссылки А.

• Проверить работу ссылки.

• При использовании рисунка в качестве указателя гиперссылки он автоматически выделяется рамкой.

41. Создать ссылку на сайт Инжэкона, доступный из Интранет-сети университета (не требующий подключения к Интернет):

• В коде HTML найти фрагмент с описанием рисунка, расположенного в начале страницы.

• Заключить тэг IMG, описывающий рисунок, в тэг гиперссылки А. В качестве значения параметра HREF тэга А задать URL-адрес сайта Инжэкона: http://www.engec.ru

• Указать, что ссылка на внешний сайт открываются в новом окне браузера. Для этого добавить в тэг A параметр TARGET со значением _blank (Внимание! Значение _blank начинается со знака подчеркивания).

• Проверить работу ссылки.

42. В конце страницы создать ссылку на ее начало:

• В начале страницы внутри абзаца с текстом заголовка создать метку. Для этого вставить тэг A с параметром NAME и именем метки. Назвать метку topstr. Тело тэга A оставить пустым:

<a name=”topstr”></a>

• В коде страницы содержатся три строки с текстом «К началу страницы». Найти одну из этик строк. Заключить текст в тэг A, в качестве значения параметра HREF указать имя метки, предваренное знаком #:

<a href=”#topstr”>К началу страницы</a>

• Проверить действие гиперссылки в браузере.

• Оформить остальные строки с текстом «К началу страницы» в виде ссылок на метку topstr.

Задание 4. Задать стилевое оформление страницы «Мой офис».

43. Задать для абзацев основного текста выравнивания текста «по ширине страницы»:

• Найти в коде HTML тэг BLOCKQUOTE, содержащий основной текст.

• В тэг BLOCKQUOTE добавить параметр STYLE с описанием стиля, содержащим название свойства стиля – выравнивание (text-align) и его значение – по ширине (justify), в описании стиля свойство и значение указываются через двоеточие:

<blockquote style=”text-align:justify”>

44. Задать для абзаца «Microsoft Office Word 2007 с новым интерфейсом …» выравнивание по ширине и красную строку с отступом 30 пикселей (точек):

• Найти в коде HTML тэг P, содержащий текст нужного абзаца.

• Задать для тэга P параметр STYLE с тем же описанием стиля, что и для тэга BLOCKQUOTE (параметр можно скопировать).

• Добавить описание в стиль абзаца описание красной строки (свойство text-indent, значение – размер отступа): в описании стиля перед закрывающей двойной кавычкой поставить точку с запятой, а затем записать новое свойство стиля:

<p style=”text-align:justify;text-indent:30”>

45. Для всех ячеек таблицы задать горизонтальное выравнивание по центру ячейки:

• В раздел страницы HEAD (после открывающего, но перед закрывающим тэгом HEAD) добавить описание внедренной таблицы стилей:

<style type=”text/css”>

<!--

-->

</style>

• Внутри таблицы стилей (после <!--, но перед -->) вставить описание стиля выравнивания для селектора TD (тэг ячейки таблицы). Название свойства выравнивания – text-align, значение – по центру (center):

TD {text-align:center}

46. Задать выравнивание по центру, увеличенный размер шрифта (свойство font-size) и выделением цветом (свойство color) для всех логических элементов страницы «Мой офис», выделенных как заголовки (абзац заголовка страницы и заголовок таблицы). Для таких элементов был задан класс с именем zagolovok. Поэтому в качестве селектора стиля будет указано имя класса в ведущей точкой. Различные свойства стиля разделяются точкой с запятой. Добавить в таблицу стиля описание:

.zagolovok {text-align:center;

font-size:150%;

color:red}

47. Изменить регистр главного заголовка страницы – задать написание текста заглавными буквами (свойство text-transform, значение uppercase). Поскольку это свойство будет относиться только к абзацу заголовка, но не к заголовку таблицы, в качестве селектора стиля следует указать и название тэга и имя класса:

p.zagolovok {text-transform:uppercase}

48. Самостоятельно добавить в описание стиля абзаца заголовка определение жирного написания (свойство font-weight, значение bold).

49. Отключить рамку у рисунков (тэг IMG), служащих гиперссылками (тэг A). Поскольку для задания таких объектов тэги A и IMG используются совместно, в качестве селектора используется их перечисление через пробел в порядке использования в коде HTML. Название свойства – толщина рамки (border-width), значение – ноль (0). Добавить в таблицу стилей описание:

a img {border-width:0}

50. Задать выделение цветом текста всех ссылок на странице. Используется селектор A (тэг гиперссылки), свойство color, значение цвета. В таблицу стилей будет добавлено описание вида:

a {color:red}

51. Выделить другим цветом уже просмотренные ссылки. Для указания состояния ссылки используются так называемые псевдоклассы (link – еще не просмотренная ссылка, visited – просмотренная ссылка). Псевдокласс указывается в таблице стилей после имени тэга через двоеточие. Описание стиля будет выглядеть следующим образом:

a:visited {color:green}

Самостоятельное задание:

52. Создать текстовую ссылку на сайт, расположенный в интра-сети Инжэкона (например, ivc.engec.ru, cs.engec.ru либо иной). Ссылка должна открывать в новом окне.

53. Задать для одной из страниц с описанием приложений (которые скопированы в рабочую папку) фоновый рисунок средставами HTML. Для этого отредактировать указанную страницу, задав для тэга BODY параметр BACKGROUND, значением которого служит адрес графического файла (аналогично параметру SRC тэга IMG). Фоновый рисунок можно скопировать в папку images из папки C:\Program Files\Microsoft Office\CLIPART\Publisher\Backgrounds.

54. C помощью таблицы стилей задать курсивное написание всех текстовых ссылок страницы (селектор A, свойство font-style, значение italic).

55. С помощью таблицы стилей или с помощью указания параметра STYLE задать фоновый цвет для тэга TH заголовка таблицы (свойство background-color, значение – название или код цвета).

56. С помощью таблицы стилей или с помощью указания параметра STYLE задать фоновый цвет для второй из страниц с описанием приложений, скопированных в рабочую папку (тэг BODY, свойство background-color, значение – название или код цвета).

57. Продемонстрировать страницу «Мой офис» преподавателю.