Как создается веб страница в Ворде? Как создать web-страницу Как создать web страницу в word

ТЕМА 8. СОЗДАНИЕWEB-СТРАНИЦ С ПОМОЩЬЮ WORD

В качестве редакторов, упрощающих создание Web-сайтов, можно использовать приложения Microsoft Office – Word, Excel, PowerPoint и др. При этом пользователь может не знать язык HTML и иметь привычную среду для оформления документа – WYSIWYG (что вижу, то и получаю). Огромное количество людей, использующих Word в своей повседневной работе, становятся потенциальными разработчиками HTML-документов.

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

Первый способ созданияHTML-документов достаточно прост – надо начать создание документа "с нуля" и только следовать советам Мастера и использовать те средства, которые имеются в меню программы.

Второй способ – преобразование существующего документаWord в тэги HTML при сохранении файла Word в формате HTML. Преобразование естественно приводит к тому, что какие-то элементы оформления документа будут утрачены или изменены.

Одной из отличительных особенностей HTML-документов является то, что сам документ содержит только текст, а все остальные объекты встраиваются в документ в момент его отображения Браузером с помощью специальных тэгов и хранятся отдельно. При сохранении HTML-файла в месте размещения документа Word создает на диске папку, в которую помещает сопутствующие ему графические элементы оформления. Например, при сохранении файла с рисунками frieds. htm Word создает папку frieds. files , в которой и разместит все рисунки.

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

При подготовке публикации в Интернет материалов, созданных в Word, полезно знать особенности преобразования в формат HTML. Некоторые из них приводятся ниже (табл. 8.1).

Таблица 8.1

Конвертирование элементов оформления вHTML

Элемент документаWord	ПреобразованиеWord ® HTML
Размеры шрифтов	ВWord изображаются шрифты от 9 до 36 пунктов. Размеры шрифтов HTML изменяются от 1 до 7 и служат Браузеру указанием на размер шрифта
Текстовые эффекты: приподнятый, с тенью, уплотненный и т. д.	Текстовые эффекты не сохраняются, но сам текст остается
Начертания: полужирный, курсив, подчеркивание	Начертания шрифта остаются, но некоторые виды подчеркивания преобразуются в сплошную линию
Анимация текста	Анимация не сохраняется, но текст остается. Для придания тексту анимационного эффекта можно использовать бегущую строку (панель "Web-компоненты")
	Изображения преобразуются в форматGIF или JPEG, если они не были сохранены до этого в таких форматах. Линии преобразуются в горизонтальные линии
Графические объекты: автофигуры, фигурный текст, надписи и тени	Объекты преобразуются в файлы форматаGIF. В среде редактирования Web-страницы можно вставить графические средства "Вставка" – "Рисунок"
	Таблицы преобразуются, однако параметры, не поддерживаемыеHTML, не сохраняются (например, цветные границы и границы переменой ширины)
Нумерация страниц и колонтитулы	Так как документHTML считается одной Web-страницей, то понятие колонтитулов отсутствует и нумерация страниц не сохраняется
Поля страниц и многоколонный текст
	Определенные пользователем стили преобразуются в прямое форматирование, если оно поддерживаетсяHTML

При необходимости вставить на HTML-страницу собственные тэги, в Word предусмотрено непосредственное редактирование HTML-кода . Это можно сделать, вызвав окно редактора через меню "Вид" – "Источник HTML". До того как перейти в этот режим, следует сделать сохранение файла. После завершения редактирования перед закрытием окна, файл также нужно сохранить.

Другая возможность перехода в режим редактирования НТМL – это открыть документ в Браузере и вызвать меню "Вид" – "В виде HTML". По умолчанию редактирование выполняется в Блокноте.

Хотя Word отображает документ практически в том же виде, в каком он в дальнейшем будет находиться в Браузере, предварительный просмотр Web-документа можно выполнить, не покидая Word.

В меню "Вид" установлены способы отображения документа Word (рис.8.1). При выборе "Web-документ" файл отображается так, как будет выглядеть в Браузере, установленном на компьютере. Через меню "Вид" можно вернуться к обычному режиму работы с документом.

https://pandia.ru/text/78/284/images/image002_81.gif" width="32" height="32 src=">Автобиография" href="/text/category/avtobiografiya/" rel="bookmark">автобиография).

Мои увлечения

Мои друзья

4. Создать документ Word, посвященный Вашим увлечениям. Сохранить документ под именем hobby. doc в своей папке. Документ должен быть оформлен, иметь нижний колонтитул и кроме текста содержать рисунки.

5. Создать книгу Excel с таблицей по приведенному ниже образцу, сохранить под именем friends. xls

https://pandia.ru/text/78/284/images/image004_38.jpg" width="464" height="164 src=">

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

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

5.2. Подготовить лист к печати: настроить параметры вкладки "Страница…" в режиме Предварительный просмотр, создать колонтитулы.

6. Установить связи между документами с помощью гиперссылок.

6.1. Открыть главный документ main. doc и последовательно выделяя заголовки разделов, закрепить за ними гиперссылки ("Меню – Вставить") на соответствующие документы.

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

8.1. Подготовить рисунок для обеспечения возврата из вспомогательных документов в главный. Например, рисунок Буфер" href="/text/category/bufer/" rel="bookmark">буфере (Alt+PrintScreen) и дальнейшего редактирования рисунка в редакторе Paint.

8.2. Вставить в конец каждого из документов рисунок и закрепить за ним гиперссылку на документ main. doc. В файле hobby. doc гиперссылка должна обеспечивать переход на закладку "Хобби".

10. Создать группу связанных Web-страниц методом преобразования подготовленных документов.

10.1. Подготовить папку для Web-документов с именем My_Web.

10.2. Последовательно раскрывая подготовленные ранее документы, сохранить их в папке My_Web , указав:

Тип файла : Web-страница (*.htm; *.html)

10.3. Закрыть все документы, проанализировать изменения, произошедшие в структуре папок.

11. Просмотреть Web-документы, начиная с main. htm . Проанализировать, какие элементы документов изменились или вовсе исчезли. Попытаться сделать переход по гиперссылке. Убедиться в том, что связи между Web-страницами нуждаются в редактировании.

12. Отредактировать Web-документы, изменить гиперссылки, выполнить дополнительное оформление.

Внимание! Для перехода из Браузера в режим редактирования нужно воспользоваться меню "Файл" – "Править вMicrosoft Word for Windows" или кнопкой на панели инструментов.

II. Создание новых Web-документов с помощью приложенийMS Office

1. Познакомиться со структурой и составом многостраничного гипертекстового документа, объединяющего четыре страницы (см. прил. 8.1).

2. Создать папку с именем Presentation , а в ней – папку для Ваших рисунков Gallery .

3. Подготовить рисунки для включения их в соответствующие страницы. Сохранить их в папке Gallery в виде отдельных файлов форматов bmp, gif или любого другого формата, используемого в Интернет. Обратить внимание на размер рисунков и объем файлов. Объем файлов не должен превышать 3–10 кбайт.

4. Создать отдельный файл для каждой страницы с помощью текстового процессора Word (Страницы 1, 2, 4). Для Страницы 3 использовать готовый файл friends. htm . Сохранять файлы в формате htm или html в папке Presentation .

4.1. Запустить текстовый процессор Word и с его помощью создать главную страницу, сохранить файл в формате html под именем index. htm

4.1.1. При создании структурированного документа рекомендуется использовать таблицу. После размещения объектов снять обрамление таблицы.

4.1.2. Выполнить оформление документа. Для главного заголовка использовать объект WordArt, для прочих – стиль Заголовок.

4.1.3. Для оформления фона использовать один из текстурных способов заливки (меню "Формат " – "Фон " – "Способы заливки ") или тематическое оформление (меню "Формат " – "Тема ").

4.1.4. Просмотреть в Браузере изменения в структуре папок, произошедшие при сохранении Web-страницы. Открыть созданную страницу, при необходимости отредактировать ее.

4.2. Создать вторую страницу сайта с помощью редактораWord.

4.2.1. Для создания документа воспользоваться пунктом меню "Файл "-"Создать ", в открывшемся диалоговом окне "Создание документа " выбрать вкладку "Web-страницы " и пиктограмму "Новая Web-страница ". Сохранить чистую Web-страницу в папке Presentation , дав странице имя на английском языке childhood. htm

4.2.2. В качестве заголовка "Мое детство" использовать Бегущую строку , отобразив предварительно панель Web-компонентов. Познакомиться с параметрами Бегущей строки, настроить ее так, чтобы она появлялась не более 2 раз.

4.2.3. Разметку для размещения объектов сделать с помощью таблицы. Рисунок вставить из папки Gallery .

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

4.3. Создать третью страницу на основе созданного в частиI файла friends. htm

4.3.1. Скопировать файл и сопутствующую ему папку в папку Presentation .

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

4.4. Создать четвертую страницу сайта с помощью редактораWord.

4.4.1. Подготовить рисунок – вид здания СПбГУТ. Сохранить рисунок в папке Gallery .

4.4.2. Создать файл в папке Presentation с именем university. htm

4.4.3. Вставить в файл рисунок – вид здания СПбГУТ, предварительно сохраненный в папке Gallery . Скопировать или ввести электронный адрес университета. Написать несколько фраз о Вашем факультете и вставить гиперссылку на сайт факультета.

5. Установить связи между документами сайта.

5.1. Открыть в Word документ index. htm и, последовательно выделяя пункты "Содержания", вставить гиперссылки на соответствующие документы.

6..gif" width="32" height="32 src=">MsoNormalTable">

Приветствие

Представление –

краткое резюме

Рисунок или

фотография

Пишите мне
(адресe-mail)

Страница 2 (Мое детство)

Страница 3 (Мои друзья) .Использовать ранее созданный Web-документ friends. htm, созданный с помощью Excel.

Страница 4 (Мои университеты) .Привести полное название Университета, адрес сайта СПбГУТ, картинку с фотографией главного здания СПбГУТ. Написать несколько слов о Вашем факультете, дать ссылку на сайт Вашего факультета.

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

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

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

Присвойте файлу имя.

В списке Тип файла выберите пункт веб-страница с фильтром .

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

Чтобы просмотреть HTML-код веб-страницы, найдите его в проводнике, щелкните его правой кнопкой мыши, наведите указатель на пункт Открыть с помощью и выберите Internet Explorer . Щелкните правой кнопкой мыши страницу в Internet Explorer и выберите пункт Просмотр исходного кода .

Другие способы предоставления общего доступа к документу через Интернет

Сохранение документа в виде записи в блоге

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

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

Сохранение на OneDrive и общий доступ

Выберите расположение в OneDrive папках.

Затем пригласить других пользователей для просмотра вашего документа. Если у пользователей нет Word, документ автоматически откроется в Веб-приложение Word.

Откройте вкладку Файл и выберите пункты Общий доступ > Пригласить пользователей .

Добавьте свои адреса электронной почты.

Выберите команду Общий доступ .

Дополнительные сведения можно найти в разделе предоставление общего доступа к документу с помощью SharePoint или OneDrive .

Сохранение в виде PDF-файла

Чтобы преобразовать документ в PDF- файл , вы можете опубликовать его на сайте, а затем выбрать команду > Сохранить как . В списке Тип файла выберите PDF .

Примечание: Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Была ли информация полезной? Для удобства также (на английском языке).

ТЕМА 8
СОЗДАНИЕ WEB -СТРАНИЦ С ПОМОЩЬЮ WORD

В качестве редакторов, упрощающих создание Web -сайтов, можно использовать приложения Microsoft Office – Word , Excel , PowerPoint и другие. При этом пользователь может не знать язык HTML и иметь привычную среду для оформления документа – WYSIWYG (что вижу, то и получаю). Огромное количество людей, использующих Word в своей повседневной работе становятся потенциальными разработчиками HTML -документов.

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

Первый способ создания HTML -документов достаточно прост – надо начать создание документа «с нуля» и только следовать советам Мастера и использовать те средства, которые имеются в меню программы.

Второй способ - преобразование существующего документа Word в тэги HTML при сохранении файла- Word в формате HTML . Преобразование естественно приводит к тому, что какие-то элементы оформления документа будут утрачены или изменены.

Одной из отличительных особенностей HTML -документов является то, что сам документ содержит только текст, а все остальные объекты встраиваются в документ в момент его отображения Браузером с помощью специальных тэгов и хранятся отдельно. При сохранении HTML -файла в месте размещения документа Word создает на диске папку, в которую помещает сопутствующие ему графические элементы оформления. Например, при сохранении файла с рисунками - frieds . htm , Word создает папку frieds .files , в которой и разместит все рисунки.

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

При подготовке публикации в Интернет материалов, созданных в Word , полезно знать особенности преобразования в формат HTML . Некоторые из них приводятся ниже (табл. 8.1).

Таблица 8.1

Элемент документа Word	Преобразование Word ® HTML
Размеры шрифтов	В Word изображаются шрифты от 9 до 36 пунктов. Размеры шрифтов HTML изменяются от 1 до 7 и служат Браузеру указанием на размер шрифта
Текстовые эффекты: приподнятый, с тенью, уплотненный и т.д.	Текстовые эффекты не сохраняются, но сам текст остается
Начертания: полужирный, курсив, подчеркивание	Остаются, но некоторые виды подчеркивания преобразуются в сплошную линию
Анимация текста	Анимация не сохраняется, но текст остается. Для придания тексту анимационного эффекта можно использовать бегущую строку (панель « Web -компоненты»)
Графика	Изображения преобразуются в формат GIF или JPEG , если они не были сохранены до этого в таких форматах. Линии преобразуются в горизонтальные линии.
Графические объекты: автофигуры, фигурный текст, надписи и тени	Объекты преобразуются в файлы формата GIF . В среде редактирования Web -страницы можно вставить графические средства «Вставка» - «Рисунок»
Таблицы	Таблицы преобразуются, однако параметры, не поддерживаемые HTML , не сохраняются. Например, цветные границы и границы переменой ширины
Нумерация страниц и колонтитулы	Так как документ HTML считается одной Web -страницей, то понятие колонтитулов отсутствует и нумерация не сохраняется
Поля страниц и многоколонный текст
Стили	Определенные пользователем стили преобразуются в прямое форматирование, если оно поддерживается HTML

При необходимости вставить на HTML -страницу собственные тэги, в Word предусмотрено непосредственное редактирование HTML -кода . Это можно сделать, вызвав окно редактора через меню «Вид» - «Источник HTML ». До того, как перейти в этот режим следует сделать сохранение файла. После завершения редактирования перед закрытием окна, файл также нужно сохранить.

Другая возможность – открыть документ в Браузере и вызвать меню «Вид» - «В виде HTML ». По умолчанию редактирование выполняется в Блокноте.

Хотя Word отображает документ практически в том же виде, как он в дальнейшем будет выглядеть в Браузере, предварительный просмотр Web -документа можно выполнить, не покидая Word .

ОСНОВНЫЕ ТЕРМИНЫ

ASCII ( American Standard Code for information Interchange – Американский стандартный код для обмена информацией) – семиразрядный код для представления текстовой информации.

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

HTML ( Hyper Text Markup Language ) – язык разметки гипертекстов.

JPEG ( Joint Photography Experts Group – объединенная группа экспертов по машиной обработке фотоизображений) – распространенный формат растровой графики, который идеально подходит для сканируемых фотографий.

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

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

Web server (Web -сервер) – сервер, предназначенный для размещения Web -сайтов в Интернет, и предоставляющий услуги по запросам клиентов.

WYSIWYG ( What You See Is What You Get – что вижу, то и имею) – тип редакторов, в которых документ отображается так, как он будет напечатан или представлен в Интернет.

ЗАДАНИЕ № 8
Тема: Создание Web -сайта на основе программных приложений
MS Office ( Word и Excel )

Часть 1. Создание группы Web -страниц методом преобразования
документов MS Office

1. На рабочем диске подготовить папку для размещения Ваших документов.

2. Создать документ Word следующего содержания.

Главный заголовок, например Объект WordArt:

Затем разместить текст:

И создать оглавление, состоящее, например, из 2-х пунктов.

Мои увлечения

Мои друзья

3. Оформить документ и сохранить в своей папке на жестком диске под именем main.doc .

4. Создать документ Word, посвященный Вашим увлечениям. Сохранить документ под именем hobby .doc в своей папке. Документ должен быть оформлен, иметь нижний колонтитул и кроме текста содержать рисунки.

5. Создать книгу Excel с таблицей по приведенному образцу (рис. 8.2), сохранить под именем friends .xls.
Для вычисления средних значений должны быть использованы формулы .

Мои друзья
Имя	Возраст	Рост	Вес
Вася
Зина
Коля
Лена
Среднее значение	27,5	176	71,75

Рис. 8.2. Пример таблицы для файла friends .xls

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

5.2. Подготовить лист к печати:

5.2.1. Настроить параметры вкладки «Страница…» в режиме Предварительного просмотра , создать колонтитулы.

6. Установить связи между документами с помощью гиперссылок.

6.1. Открыть главный документ main.doc и последовательно выделяя заголовки разделов, закрепить за ними гиперссылки («Меню - Вставить») на соответствующие документы.

7. В главном документе установить закладку на заголовок Мои увлечения . Дать ей название «Хобби». Сохранить документ.

8.1. Подготовить рисунок для обеспечения возврата из вспомогательных документов в главный. Например, рисунок можно получить с помощью создания графической копии активного окна в буфере (Alt+PrintScreen) и дальнейшего редактирования рисунка в редакторе Paint.

8.2. Вставить в конец каждого из документов рисунок и закрепить за ним гиперссылку на документ main.doc. В файле hobby .doc гиперссылка должна обеспечивать переход на закладку «Хобби».

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

10.1. Подготовить папку для Web -документов с именем My _ Web .

10.2. Последовательно раскрывая подготовленные ранее документы, сохранить их в папке My _ Web , указав
Тип файла: Web -страница (*. htm ; *. html )

10.3. Закрыть все документы, проанализировать изменения, произошедшие в структуре папок.

11. Просмотреть Web -документы, начиная с main . htm . Проанализировать, какие элементы документов изменились или вовсе исчезли. Сделать попытку сделать переход по гиперссылке. Убедиться в том, что связи между Web -страницами нуждаются в редактировании.

12. Отредактировать Web -документы, изменить гиперссылки, выполнить дополнительное оформление.

Внимание: Для перехода из Браузере в режим редактирования нужно воспользоваться меню «Файл» - «Править в Microsoft Word for Windows » или кнопкой на панели инструментов .

13. Сохранить и закрыть все документы, скопировать папку My _ Web на диск A : . Предъявить работу Web -страниц преподавателю.

Часть 2. Создание новых Web -документов с помощью
приложений MS Office

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

2. Создать папку с именем Presentation , а в ней папку для Ваших рисунков - Gallery .

3. Подготовить рисунки для включения их в соответствующие страницы. Сохранить их в папке Gallery в виде отдельных файлов формата bmp , gif или любого другого формата, используемого в Интернет. Обратить внимание на размер рисунков и объем файлов. Объем файлов не должен превышать 3 - 10 КБ.

4. Создать отдельный файл для каждой страницы с помощью текстового процессоа Word (стр.1,2,4). Для Страницы 3 использовать готовый файл friends . htm . Сохранять файлы в формате htm или html в папке Presentation .

4.1. Запустить текстовый процессор Word и с его помощью создать главную страницу, сохранить файл в формате html под именем index . htm .

4.1.2. Выполнить оформление документа. Для главного заголовков использовать объект WordArt , для прочих – стиль Заголовок

4.1.3. Для оформления фона использовать один из текстурных способов заливки (меню « Формат» – «Фон» – «Способы заливки» ) или тематическое оформление (меню «Формат» – «Тема» ).

4.1.4. Просмотреть в броузере изменения в структуре папок, произошедшие при сохранении Web -странички. Открыть созданную страницу, при необходимости отредактировать ее.

4.2. Создать вторую страницу сайта с помощью редактора Word .

4.2.1. Для создания документа воспользоваться пунктом меню «Файл»-«Создать» , в открывшемся диалоговом окне «Создание документа» выбрать вкладку « WEB -станицы» и пиктограмму « Новая WEB -страница» . Сохранить чистую WEB -страницу в папке Presentation , дав странице имя на английском языке childhood . htm

4.2.2. В качестве заголовка "Мое детство" использовать Бегущую строку , отобразив предварительно панель Web -компонентов. Познакомиться с параметрами Бегущей строки, настроить ее так, чтобы она появлялась не более 2-х раз.

4.2.3. Разметку для размещения объектов сделать с помощью таблицы.
Рисунок вставить из папки Gallery .

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

4.3. Создать третью страницу на основе созданного в Части 1 файла friends . htm .

4.3.1. Скопировать файл и сопутствующую ему папку в папку Presentation .

4.4. Создать четвертую страницу сайта с помощью редактора Word .

4.4.1. Подготовить рисунок – вид здания ГУТ со стороны Мойки (найти старый сайт ГУТ). Сохранить рисунок в папке Gallery .

4.4.2. Создать файл в папке Presentation , с именем university . htm .

4.4.3. Вставить в файл рисунок – вид здания ГУТ, предварительно сохраненный в папке Gallery . Скопировать или ввести электронный адрес университета. Написать несколько фраз о Вашем факультете и вставить гиперссылку на сайт факультета.

5. Установить связи между документами сайта.

5.1. Открыть в Word документ index . htm , и последовательно выделяя пункты "Содержания", вставить гиперссылки на соответствующие документы.

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

Внимание! Рисунок для переходов на главную страницу также должен находиться в папке Gallery .

8. Просмотреть содержание каждого из вновь созданных файлов в формате HTML .

8.1. Найти тэги, обеспечивающие вставку гиперссылок, рисунков.

9. Скопировать папку Presentation со всем ее содержимым на диска А: или на диск C : в папку Temp . Протестировать работу сайта, запустив его просмотр из нового места размещения.

10. Предъявить преподавателю Ваш сайт, начать его просмотр с главной страницы.

Приложение

Структура сайта

Страница 1 (главная страница)

Приветствие

Мое детство

Мои увлечения

Мои университеты

Представление – краткое резюме

Текст

(комментарии к фотографии)

Текст

(несколько строк на заданную тему)

Страница3 (Мои друзья) – использовать ранее созданный Web -документ friends . htm , созданный с помощью Excel .

Страница 4 (Мои университеты)

Полное название Университета, адрес сайта ГУТ, картинка с фотографией главного здания ГУТ

Слайд 2

Мы познакомимся с простыми инструментами и методами разработки веб-страниц. На примере рассмотрим, как создать фрагмент сайта, содержащего репертуар кинотеатра. Прежде всего необходимо: разработать проект сайта; уяснить его структуру и предполагаемое содержание. Т.е. построить информационную модель сайта. Структура сайта. Кинотеатр «Октябрь» предлагает Драмы Комедии Детективы ДРАМЫ КОМЕДИИ ДЕТЕКТИВЫ ФОТО Первая (главная) веб-страница Вторая веб-страница Третья веб-страница Четвертая веб-страница

Слайд 3

На первом (верхнем уровне) находится первая (главная) страница. На ней размещается общая информация о кинотеатре и гиперссылки, позволяющие открыть страницы второго уровня. На втором (нижнем) уровне размещают страницы, посвящённые определённым жанрам фильмов. Жанр фильма Фото сюжета Название, страна Режиссёр Актёры: Краткое содержание Сеансы: Цена билета: Страницы второго уровня.

Слайд 4

Конечно, структура сайта в дальнейшем может быть усложнена добавлением страниц последующих уровней. Например страниц, посвящённых режиссёрам, актёрам и т.д. Все страницы одного уровня часто оформляют в едином стиле. Однако их оформление может и отличаться. Основными элементами веб-страниц являются: текстовые блоки графические объекты К текстовым блокам относят: К графическим объектам относят: основной текст, заголовки списки текстовые гиперссылки и т.д. изображения (рисунки, фото, анимация) , «обои» - фоновые рисунки, изображения-гиперссылки, разделительные линии.

Слайд 5

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

Слайд 6

Темы предлагаются во всех офисных программах. Создание сайта начинается с выбора готовой Темы или разработки своего шаблона оформления. После этого создаются отдельные страницы. Затем оформляются гиперссылки, которые определяют навигацию по сайту. Файлы всех страниц веб-сайта помещаются в отдельную папку. Это упращает размещение сайта на веб-сервере. Файлу главной веб-страницы принято давать имя indexили mainс расширением htm или html. Тема «Бомбёжка» Тема «Магистраль»

Слайд 7

Запустить программу WORD. Исполнить команду Файл Создать. В области задач выбрать Веб – страница. Выберем Тему оформления: Формат Тема. Например: «Перетекание». Для размещения на странице фотографии и текстовых областей будем использовать таблицу с 6 строками и 2 столбцами. Нужные ячейки объединим. Разместим необходимую информацию. Созданную таким образом веб-страницу сохраним на диске под именем DRAMA.HTML. Начнём создание веб-сайта с оформления страниц второго уровня. При сохранении документа WORD в виде веб-страницы все используемые в документе изображения будут помещены в отдальную папку с именем веб-страницы и расширением.files.

Слайд 8

Результат выполнения пунктов 1 – 4.

Слайд 9

Результат выполнения остальных пунктов и просмотра созданной веб-страницы в браузере.

Слайд 10

Важный этап разработки веб-страницы – создание гиперссылок. Для этого необходимо: 1. выделить текст, который станет текстовой гиперссылкой; 2. команда Вставка Гиперссылка или значок 3. Связать с файлом, веб-страницей 4. выделить нужный файл, содержимое которого должно открыться по гиперссылке и подтвердить выбор. По окончании работы необходимо просмотреть созданные страницы в браузере и проверить работы ссылок.

Слайд 11

Повысить привлекательность веб-страницы можно, разместив на ней динамические и интерактивные элементы. «Оживим» нашу главную страницу сайта размещением на ней бегущей строки. Порядок выполнения задания: Вид Панели инструментов Веб-компоненты Вызовем окно «Бегущая строка» Наберём текст «Предлагает», выполним нужные установки и подтвердим выбор.

Слайд 12

Редактор WORD позволяет подключать к веб-странице видео- и звуковые файлы. Для этого необходимо нажатием значка Звук или Фильм открыть диалоговое окно, нажать кнопку Обзор, найти требуемый видео- или звуковой файл, установить параметры проигрывания.

Посмотреть все слайды

Вступление

В ходе прохождения вычислительной практики:

· разработали педагогический сценарий на тему индивидуального задания;

· разработали Web-страничку,которая реализует розработанный педагогический сценарий;

· настроить и протестировать розработанную Web-страничку с помощью программы Internet Explorer;

· подготовить отчет по вычислительной практике;

Использование Word для создания веб-страниц

Во время прохождения практики мы научились:

· сохранять документы Word как веб-страницы;

· просматривать веб-страницы в режиме разметки Web;

· сохранять веб-страницы в папке Web;

· создавать веб-страницы с помощью Мастера веб-страниц.

и World Wide Web

World Wide Web -- это система документов, связанных между собой гиперссылками. Гиперссылки позволяют переходить от одного документа к другому. Документы могут включать текст, рисунки, аудио- и видеофайлы. Для форматирования документов в формате HTML (основной формат файлов World Wide Web) существуют некоторые ограничения. Например, в этих документах без специальных ухищрений обычно не удается разместить текст в нескольких колонках, а также не удается выравнять его по обоим краям страницы.

Каждая веб-страница представляет собой обычный текстовый файл с указанными в виде команд параметрами форматирования для текста, графики и гиперссылок. Этот файл называется источником HTML, поскольку соответствующие команды записаны в формате языка разметки гипертекста (Hypertext Markup Language, HTML). Браузер (программа, позволяющая читать информацию в документах World Wide Web) распознает веб-страницу и отображает ее на экране так же, как в режиме веб-страницы это делает Word.

Увидим, что в режиме просмотра Web текста удобно читать, так как он отображается крупными буквами и строки автоматически переносятся, адаптируясь к ширине страницы. В этом режиме просмотра текст молено редактировать и форматировать.

Сохранение документа Word как веб-страницы

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

1. Откройте файл Книжное обозрение.doc, который мы создали на одном из предыдущих занятий.

2. Выберите команду Вид > Разметка страницы.

Вы увидите документ, оформленный в несколько колонок (рис.1)

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

Рис.1.

Рис. 2

Кроме того, вы можете указать имя файла и его формат. Для задания заголовков веб-страниц служит кнопка Изменить заголовок. Давайте сохраним веб-страницу в нашей рабочей папке.

Заголовок -- это имя документа, под которым он будет опубликован в Интернете. Различные поисковые системы используют содержание таких заголовков для первоочередного поиска. Если вы хотите, чтобы ваши документы легко можно было найти в огромном количестве опубликованных в Интернете материалов, старайтесь давать им содержательные заголовки.

4. Щелкните на кнопке Мои документы. На экране отобразится содержимое этой папки.

5. Дважды щелкните на значке Работа.

6. Выделите имя файла в поле Имя файла.

7. Введите имя Мой веб-документ.

Word преобразует документ в формат HTML, чтобы его. можно было просматривать в Интернете (рис.3).

Рис. 3.

Обратите внимание, что теперь документ отображается на экране без колонок. Они могут выводиться на экран в режиме разметки страницы, но при просмотре в окне браузера они отображаться не будут (рис. 4).

Рис. 4

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