Создание Web-документов

Размещено на http://www.allbest.ru

Размещено на http://www.allbest.ru

МИНИСТЕРСТВО ЮСТИЦИИ РОССИЙСКОЙ ФЕДЕРАЦИИ

федеральная служба исполнения наказаний

ФЕДЕРАЛЬНОЕ КАЗЁННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ

ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

ВОРОНЕЖСКИЙ ИНСТИТУТ ФСИН РОССИИ

ЮРИДИЧЕСКИЙ ФАКУЛЬТЕТ

Кафедра управления и информационно-технического обеспечения

КОНТРОЛЬНАЯ РАБОТА

По дисциплине:

«Информационные технологии»

Вариант № 8

«Создание Web-документов»

Выполнил:

Ляхов Павел Вячеславович

Воронеж 2014



Введение

Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах. Действительно, пользователь, который приобрел и установил на своем компьютере Microsoft Office 97, становится обладателем Internet-технологии в готовом виде, независимо от того, подключен его компьютер к Сети или нет.

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

В результате работа многих пользователей стала иметь большее отношение к Сети. Так, одним из способов самовыражения стало размещение личных страничек в Internet.

Многие коммерческие фирмы стали использовать Сеть для рекламы и сбыта своей продукции. Людям, занятым поиском работы, стал доступен и такой сервис: составить резюме в формате Web-страницы и разместить эту информацию в Сети. Важную роль Internet стал играть для научных, учебных и общественных организаций.

Нужно заметить, что раньше подготовка документов для размещения в WWW была довольно сложной технической задачей, к решению которой привлекались высококвалифицированные специалисты по программированию. Только с появлением пакета Office 97, эта проблема была успешно решена.

Любой, кто освоит создание документов в среде Office 97, сможет также готовить документы в Web. Для того, чтобы быстро создать HTML-документ, не нужно специальных редакторов. Уже в Microsoft Word 97 есть встроенный конвертор, позволяющий сохранить документ в формате HTML. При этом будет сохранено большинство параметров форматирования текста. В Office 97 HTML-конвертор по умолчанию не устанавливается, так что при инсталляции пакета приходится указывать соответствующую опцию.

Тема ««Создание Web-документов» является очень актуальной на сегодняшний день, так как сейчас даже не у каждого второго, а у каждого первого (среди лиц молодого возраста) есть компьютер, и им неплохо было бы узнать, как создать Web-документ. Ведь это обязательно пригодиться при изучении такой дисциплины, как информационные технологии

Цель данной контрольной работы заключается в рассмотрении немало важного, на наш взгляд, вопроса: «Создание Web-документов», путем решения определенных задач:

1. Раскрыть содержание понятия «Web-документ»;

2. Определить структуру текста Web-документов;

3. Поэтапно описать ход создания Web-документов;

4. Рассмотреть некоторые Web-редакторы.



Web-документ

Web-документ (или Web-страница) - это гипертекстовый документ, содержащий в себе ссылки на различные информационные ресурсы: другие Web-документы, графические, звуковые и т.п. файла, а также информационные ресурсы других сервисов.

Хотя Web-документ воспринимается пользователем как единое целое, в общем случае он описывается целой совокупностью файлов, включающей в себя:

основной файл, подготовленный с помощью языка HTML, содержащий текст документа и управляющую разметку - специальные "команды" (теги), определяющие внешний вид документа и описывающие состав и структуру Web-документа, а также его связи с другими документами и объектами;

файлы статических графических иллюстраций, представленные в форматах GIF, JPEG и PNG;

файлы анимированных графических изображений, представленные в формате GIF;

звуковые файлы, представленные в форматах WAV, MIDI, RMI;

файлы видеороликов, представленные в формате AVI;

внешние программы-сценарии, представленные как отдельные файлы, а также небольшие программы, написанные на аппаратно-независимом языке программирования Java (Java applets);

таблицы стилей (каскадные таблицы стилей, Cascading Style Sheets, CSS) - файлы, содержащие описание правил форматирования (стили) элементов Web-документа и позволяющие легко создавать множество Web-документов в одном стилистическом решении;

другие типы объектов, требующие установки дополнительных программных модулей - расширений Web-клиента (например, компьютерные анимации, построенные по технологиям Flash или Shockwave, разработанным фирмой Macromedia).

Структура текста Web-документов

Если сравнить исходные тексты различных Web-страниц, можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879: 1986 “Information processing. Text and office systems. Standard Generalized Markup Language (SGML) ” . Правда, существует большое различие между стандартом официальным и стандартом фактическим.

Ниже приведен шаблон типичного Web-документа. На его примере мы рассмотрим общие принципы построения HTML-страниц.

Для того чтобы понять структуру Web-страницы, нам необходимо подробно рассмотреть все элементы, входящие в приведенный листинг.

<COMMENT> Комментарий к документу </comment> <HTML> <HEAD> <TITLE> Структура Web-страницы</title> <STYLE> H2 {font-family: Arbat;} CODE {font-family: Arbat;} </style> <META name=''Author'' content=''Irina''> <META name=''Keywords'' content=''WWW, HTML, document, element''> </head> <BODY bgcolor=#FFFFFF> <A name=''top''></a> Переход в <A href=''#bottom''> конец </a> документа <P> Переход к <A href=''#S001''><B> ссылке 1 </b></a><P> <P> <HR> <H1>Заголовок1<h1> <H2>Заголовок2<h2> <H3>Заголовок3<h3> <H4>Заголовок4<h4> <H5>Заголовок5<h5> <H6>Заголовок6<h6> <HR> Здесь расположена <B>ссылка 1</b><A name=''S001''></a> <HR> <P>Здесь должен располагаться оригинальный текст Web-страницы <HR> <A name=''bottom''></a><P> Переход в <A gref=''top''> начало </a> документа </body> </html>

<COMMENT></comment>

Текст комментария. В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле - не исключение. Текст, помещенный внутри COMMENT, игнорируется браузером. COMMENT может располагаться в любом месте кода Web-страницы. Без конечного тега, здесь, по-видимому, не обойтись: комментарий должен быть отделен от основного текста.

Существует, правда, одно ограничение: внутри комментария не должны располагаться другие элементы. Так должно быть, разумеется, только в том случае, когда необходимо, чтобы все содержимое элемента COMMENT не отображалось на экране монитора. Если в комментарии будет присутствовать другой элемент, то его содержимое будет выведено на экран, отформатированное соответствующим образом. С этой проблемой связана другая: обычный текст не может содержать фрагменты, имеющие вид тегов. Для того чтобы включать в текст подобные конструкции, существует элемент PLAINTEXT, о котором речь пойдет ниже.

Существует и другой способ обозначения комментария. Он заключается в использовании восклицательного знака и обрамлении текста комментария двойным тире. Например:

<! --Строка комментария--> <! --Комментарий- -Не комментарий- -Снова комментарий-->

<HTML></html>

Отличительный признак HTML-документа. Одним из принципов языка является многоуровневое вложение элементов. HTML является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница. В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае мало кто пользуется и допускает вложение элементов HEAD, BODY и PLAINTEXT, определяющих общую структуру Web-страницы. Естественно, что конечным тегом </html> заканчиваются все гипертекстовые документы.

<HEAD></head>

Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir и допускается вложение элементов TITLE, ISINDEX, BASE, META, LINK, NEXTID.

<TITLE></title>

Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри, отображается не в документе, а в заголовке окна браузера. Эта особенность часто используется для организации поиска в WWW. Поэтому авторы, создающие Web-страницы, должны позаботиться о том, чтобы строка внутри TITLE, не будучи слишком длинной, достаточно отображала назначение документа.

<STYLE></style>

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

<META>

Этот элемент содержит служебную информацию, которая не отображается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент META содержит два основных атрибута, первый из которых определяет тип данных, а второй - содержание. Далее приведены несколько примеров meta-данных.

Дата, обозначающая “срок годности” документа:

name=''Expires'' content=''Дата''

Адрес электронной почты:

name=''Reply-to'' content=''Имя@Адрес''

Указание приложения, в котором был создан Web-документ:

name=''Generator'' content=''Название HTML-редактора''

Атрибут name используется приложением-клиентом для получения дополнительной информации о Web-страницах и их упорядочения. Этот атрибут часто заменяют атрибутом http-equiv. Он используется сервером для создания дополнительных полей при выполнении запроса.

Кроме этого, элемент МЕТА может содержать URL. Шаблон соответствующего атрибута таков:

URL=''http: //адрес''

<BODY></body>

Этот элемент заключает в себе гипертекст, который определяет собственно Web-страницу. Эта та часть документа, которую разрабатывает автор страницы и которая отображается браузером. Соответственно, конечный тег этого элемента надо искать в конце HTML-файла. Внутри BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри стартового тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком. Рассмотрим их по порядку.

Один из самых полезных для дизайна - атрибут, определяющий фон страницы. Его появление можно уподобить маленькой революции в WWW, так как одинаковые серые Web-страницы благодаря ему расцвели яркими цветными узорами:

background=''Путь к файлу фона''

Более простое оформление фона сводиться к заданию его цвета:

bgcolor=''#RRGGBB''

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

text=''#RRGGBB''

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

link=''RRGGBB''

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

vlink=''RRGGBB''

Гипертекст, расположенный внутри элемента BODY, может иметь произвольную структуру. Ее определяют в первую очередь назначение Web-страницы и фантазия разработчика.

<A></a>

HTML-документ может быть очень большим, и в этом случае пользователю должна быть предоставлена возможность быстро перемещаться к нужному разделу страницы. Для этого можно использовать механизм гиперссылок. Необходимо также в нужных местах текста расставить соответствующие метки.

<A name=''Метка''></a> В этом случае для перехода внутри документа можно использовать следующую конструкцию:

<P>Переход к <A href=''#Метка''>метке</a></p>

Несколько подобных строк могут образовать своеобразное оглавление Web-страницы, которое можно разместить в начале и в конце документа.

<BASE>

Элемент для установки базового адреса (URL) для ссылок. Это позволяет опускать их начальную часть. Для использования элемента необходима следующая конструкция:

<BASE href=''http: //компьютер/путь1''> Фрагмент путь 1 не является обязательным. При форматировании полного адреса он будет отброшен.

В том случае, когда надо задать базовый адрес для локального диска (например, D:) , должна быть использована такая конструкция:

<BASE href=''file: //D: \путь\''>

Тогда при указании относительной ссылки можно задать не только имя файла, но и имена папок, в которых он находиться. Иными словами, путь к файлам может быть разбит на две части: абсолютную и относительную. Это полезно в том случае, когда для файлов указанных в документе, есть общий начальный фрагмент пути.

В выражении абсолютной ссылки можно также опустить указание на схему доступа (file: //) . В этом случае будут учитываться только левая часть абсолютной ссылки до первого левого символа “\” , то есть имя локального диска

Создание Web-документов

Для создания Web-страниц семейства узлов можно использовать документы Office Word 2007. У данного подхода есть несколько преимуществ.

Быстрое создание. Важные документы Word 2007, например официальные документы или отчеты о состоянии, можно преобразовывать непосредственно в Web-страницы вместо того, чтобы повторно создавать соответствующие Web-документы.

Автономная работа. При создании Web-страницы в Word 2007 не требуется обязательного подключения к Интернету.

Большой ряд возможностей. Word 2007 обеспечивает значительно больше возможностей для работы с текстом, чем предлагается в Office SharePoint Server 2007.

Гибкость документов. Документы Word 2007 можно использовать также и для других целей. Например, можно создать извещение о выпуске новой продукции с использование Word, а затем разослать это извещение по электронной почте и разместить в Интернете.

Для создания Web-документов в Word выполните следующее:

1. Запустите текстовый редактор Word. Выберите в меню «Файл» пункт «Создать» и перейдите во вкладку «Web-страницы». Кликните по пиктограмме «Мастер Web-страниц.wiz». В окне «Создание Web-страницы» отметьте тип документа, который вас устраивает, и нажмите «Далее». В следующем окне выберите стиль оформления страницы и нажмите «Готово».

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

3. Чтобы добавить на страницу графические, звуковые и видеофайлы, используйте команду «Рисунок» из меню «Вставка». Вам на выбор будет предложено три пункта:- картинки - набор готовых рисунков и возможность импортировать на страницу клипы из вашей коллекции или из интернета;- рисунок - вставка изображения из папки на вашем компьютере или из интернета;- диаграмма - вы можете выбрать ее тип из пункта «Диаграмма» главного меню.

4. Чтобы связать вашу страницу с другим Web-документом, выделите в тексте слово, фразу или рисунок, которые станут гиперссылкой. В меню «Вставка» выберите команду «Гиперссылка». Нажмите кнопку «Обзор» рядом с окном «Связать с файлом/URL» и укажите путь к объекту, на который собираетесь ссылаться. Подтвердите выбор, нажав ОК.

5. Если вы хотите сделать ссылку на другую часть этой же страницы, сначала создайте закладку на нужный фрагмент. Выделите часть текста, а затем в меню «Вставка» выберите команду «Закладка» и введите название закладки. Затем используйте опцию «Гиперссылка» и в окне «Имя объекта в документе» введите название закладки.

6. Вы можете преобразовать в Web-документ готовый файл, созданный с помощью Power Point, Word или Excel. Для этого в меню «Файл» выберите команду «Сохранить в формате HTML» или «Сохранить как Документ html». Предварительно добавьте на страницу все нужные объекты, используя средства MS Office, и создайте гиперссылки.

Также можно преобразовать уже готовый документ Word в Web-страницу. Для этого:

1. Откройте библиотеку документов, содержащую документ Word, который необходимо преобразовать в Web-страницу.

2. Щелкните стрелку справа от документа, который необходимо преобразовать, затем выберите команду «Преобразовать документ».

3. Выполните одно из следующих действий: Если документ имеет формат DOCX, выберите команду «Из документа Word в Web-страницу». Если документ имеет формат DOCM, выберите команду «Из документа Word с макросами в Web-страницу». Появится диалоговое окно Web-страницы: «Создание страницы из документа".

4. В диалоговом окне Web-страницы: «Создание страницы из документа» в разделе «Местоположение» нажмите кнопку «обзор для выбора узла», на котором будет создана страница. Для выбранного узла должна быть включена возможность публикации.

5. В разделе «Заголовок и описание страницы» проверьте заголовок и адрес создаваемой страницы и внесите необходимые изменения. В поле «Описание» введите короткое описание страницы (это не обязательно).

6. В разделе «Обработка» выберите вариант создания страницы на переднем плане или в фоновом режиме. Вариант создания страницы уже может быть установлен администратором узла.

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

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

Кроме того, можно настроить отправку уведомления пользователям по электронной почте после создания страницы. Чтобы это сделать, установите флажок «При создании страницы отправить сообщение по следующим адресам эл. Почты», в поле «Пользователи» введите имена пользователей, которым следует отправить уведомления, и нажмите кнопку «Проверить имена». Имена пользователей можно также добавить с помощью кнопки «Обзор». Нажмите кнопку «Создать для преобразования документа». При преобразовании содержимое документа Word не меняется.



Web-редакторы

web документ гипертекстовый

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

Редакторы Web-страниц можно разделить на две группы:

WYSIWYG редакторы. Это графические редакторы, которые позволяют строить макет страницы и задавать стили визуально в хорошо известном текстовом процессоре MS Word. Они являются удобным инструментом для построения дизайна страницы.

Текстовые редакторы. Это инструмент для непосредственного редактирования HTML и CSS кода. Некоторые редакторы имеют общее назначение, и в них нет специальных опций поддержки Web-кода. Другие специализированы для использования Web-языков, таких как HTML, CSS, JavaScript и PHP, имеют встроенные свойства для быстрого ввода HTML тегов, CSS свойств, и так далее. Многие из таких редакторов позволяют просматривать Web-страницу в отдельном окне.

Рассмотрим некоторые редакторы:

KompoZer - это лучший из бесплатных редакторов WYSIWYG, доступных на сегодняшний день. Это редактор с открытым исходным кодом, который является потомком почтенного Netscape Composer. Можно редактировать страницы в трёх режимах:

Режим WYSIWYG. Позволяет визуально редактировать страницу и элементы разметки.

Объединенный режим. Очень удобный режим, когда нужно детально разобраться с разметкой определенного элемента.

Режим кода. Позволяет редактировать исходный код страницы, как в текстовом редакторе. (К сожалению, нет свойства автозавершения тегов HTML или других способов ускорения ввода тегов.)

KompoZer поддерживает все элементы HTML, включая изображения, таблицы и формы. В нем также есть встроенный редактор CSS для модифицирования стилей, менеджер сайта работы с файлами на вашем сайте, и свойство "Опубликовать" для загрузки сайта через FTP.

В отличие от других WYSIWYG редакторов, KompoZer выглядит не так презентабельно, как коммерческие редакторы (например, Dreamweaver), но его очень просто освоить и, если нужно обеспечить визуальное редактирование Web-страниц в условиях урезанного бюджета.

Komodo Edit - это редактор с открытым исходным кодом, основанный на коммерческом продукте Komodo IDE.

Хотя это и редактор общего назначения, он поддерживает HTML и CSS, и имеет свойство контекстного автозаполнения HTML тегов и свойств CSS, а также коллекцию вставок кода для различных элементов HTML.

Komodo Edit позволяет просматривать редактируемые страницы в любом установленном браузере, или использовать встроенный браузер в отдельном окне, так что можно редактировать и видеть результат изменений одновременно.

Редактор имеет встроенную функцию загрузки файлов на сайт (FTP, FTPS, SFTP, или SCP), а также можно группировать файлы с помощью опции менеджера проекта.

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

Aptana Studio - полноценная среда разработки Web-приложений, которая особенно хорошо подходит для работы с Ajax. Она позволяет редактировать HTML, CSS и JavaScript файлы, и много других языков Web-программирования поддерживаются плагинами.

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

Aptana имеет отличную систему управления проектом, которая позволяет хранить все файлы вместе и использовать загрузку на сайт через FTP, SFTP и FTPS.

PSPad - редактор общего назначения для Windows. У него есть опции подсветки синтаксиса и автозавершения, и он хорошо подходит для редактирования HTML и CSS кода. Среди встроенных функций есть:

Переформатирование и проверка кода с помощью HTML Tidy

Предварительный просмотр в браузере

Преобразование форматированного текста в HTML и обратно

Преобразование CSS файла во встроенный код и обратно.

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

PSPad также имеет встроенный FTP клиент и систему записи макро команд.

TextWrangler - разработан компанией Bare Bones Software как простой текстовый редактор общего назначения, и у него нет многих специальных Web-функций. Но, несмотря на это, он отлично подходит для несложного редактирования HTML, CSS, JavaScript и PHP кода.

Некоторые замечательные свойства TextWrangler:

Подсветка синтаксиса HTML, CSS, JavaScript и других языков Web-программирования

Мощная, легкая в использовании функция поиска/замены с поддержкой регулярных выражений

Функция навигации: быстрый переход к любому элементу HTML, селектору CSS, или функции JavaScript в редактируемом файле

Встроенная поддержка работы с файлами по протоколу FTP

Поддержка AppleScript для автоматизации общих задач редактирования



Заключение

В данной контрольной работе мы рассмотрели такой немало важный вопрос, как «Создание Web-документов». В этом и заключалась основная цель.

Также мы раскрыли содержание понятия «Web-документ»; определили структуру текста Web-документов; поэтапно описали ход создания Web-документов, рассмотрели некоторые Web-редакторы.

Как уже было сказано, Web-документ (или Web-страница) - это гипертекстовый документ, содержащий в себе ссылки на различные информационные ресурсы: другие Web-документы, графические, звуковые и т.п. файла, а также информационные ресурсы других сервисов.

Также необходимо отметить, что при сравнивании различных Web-документов можно найти некое сходство. Чем же это можно объяснить? Дело в том, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879: 1986 “Information processing. Text and office systems. Standard Generalized Markup Language (SGML) ” . Правда, существует большое различие между стандартом официальным и стандартом фактическим.

Для создания Web-документа не нужно осваивать абсолютно никаких дополнительных программ - достаточно знать основные приемы работы в Word.

Используя Word, можно создать полноценную и красиво оформленную Web-страницу, при этом добившись эффектов, которые доступны не каждому графическому редактору.

Раньше создавать Web-документы могли только специалисты по программированию, причем высококвалифицированные. Сейчас это под силу каждому.

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



Список использованной литературы

1.Бумфрей Ф., Диренцо О., Даккет Й. и др. XML. Новые перспективы WWW. Пер с англ. - М: ДМК. - 688 с.

2.Ненси Д. Льюнс. Визуальный курс. Microsoft Offise. Пер. с англ. - М: ДМК Пресс. - 326 с.

Размещено на Allbest.ru

...