Microsoft office создание сайтов

Обновлено: 07.07.2024

Описание слайда:

Занятие 4. Создание сайтов средствами MS Office
© ЮНИИ ИТ 2010

Описание слайда:

2
Цель занятия
Познакомиться с понятием Web-сайта и со средствами создания Web-страниц.
Научиться использовать средства MS Word для создания простейших Web-страниц.
© ЮНИИ ИТ 2010

Описание слайда:

3
Содержание
Понятие языка разметки HTML
Обзор средств и технологий создания Web-сайтов
Аудиторное задание. Создание Web – страницы…
Создание и сохранение Web-страниц с помощью Word
Работа с текстом и рисунками на Web-страницах
Создание ссылок на Web-страницах
Порядок выполнение аудиторного задания

Описание слайда:

Понятие языка разметки HTML
4
HTML (Hyper Text Markup Languare) переводится как язык разметки гипертекста. Данный язык является основным языком программирования при создании Web-страниц и применяется для размещения различных элементов страницы (текста, графики, таблиц и т.д) с помощью определенных команд. Язык HTML читается только браузерами и графическими HTML-редакторами (специальными программами для составления страниц Web в визуальном режиме).
Команды языка HTML называются тегами. Полный набор таких команд в пределах всей страницы принято называть HTML-кодом.
В HTML-коде тег в основном показывает только способ изменения того или иного элемента страницы. Все параметры форматирования объектов несет в себе атрибут со своим значением.

Описание слайда:

Пример html-кода и результат его выполнения
5

Описание слайда:

Средства создания Web-сайтов
6
Текстовые редакторы для работы
с "чистым" HTML-кодом
Программные средства (MS Office)
Web-редакторы
© ЮНИИ ИТ 2010
Визуальные редакторы
Невизуальные редакторы

Описание слайда:

7
Технологии создания Web-сайтов
© ЮНИИ ИТ 2010
технологии
HTML
Стптичные страницы
CSS
Таблицы стилей
Скрипты
Сценарии
Апплеты
GIF
анимация
Flash
фильмы

Описание слайда:

Порядок выполнения задания
11
3.1. Запустить текстовый процессор Word и с его помощью создать главную страницу, сохранить файл в формате html под именем Main.htm
© ЮНИИ ИТ 2010
3.1.1. При создании структурированного документа рекомендуется использовать таблицу.
Обратите внимание: в папке «Presentation» появятся несколько папок, в которых будут храниться элементы страниц сайта (появляются автоматически).

Описание слайда:

Порядок выполнения задания
12
© ЮНИИ ИТ 2010
После размещения объектов снять обрамление таблицы.

Описание слайда:

Порядок выполнения задания
13
© ЮНИИ ИТ 2010
3.1.2. Выполнить оформление документа. Для главного заголовка использовать объект WordArt, для других – стиль Заголовок.
WordArt
Стили заголовков

Описание слайда:

Порядок выполнения задания
14
© ЮНИИ ИТ 2010
3.1.3. Для оформления фона использовать один из текстурных способов заливки.
заливка
3.1.4. Просмотреть в Браузере изменения в структуре папок, произошедшие при сохранении Web-страницы. Открыть созданную страницу, при необходимости отредактировать ее.

Описание слайда:

Порядок выполнения задания
15
© ЮНИИ ИТ 2010
3.2. Создать вторую страницу сайта с помощью редактора Word.

3.2.1. Для создания документа воспользоваться пунктом меню "Файл"-"Создать". Сохранить новую страницу в папке Presentation, дав странице имя на английском языке

3.2.2. Рисунок вставить из папки Image.
3.2.3. Оформить фон страницы, используя двухцветную градиентную заливку (как в пункте 3.1.3).
3.2.4. Сохранить документ и просмотреть его в Internet Explorer. При необходимости отредактировать.
3.3. Создать третью страницу - photo.htm

3.3.1. Сохранить файл в папку «Presentation».

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

Описание слайда:

Порядок выполнения задания
16
© ЮНИИ ИТ 2010
4. Установить связи между документами сайта.

4.1. Открыть в Word документ Main.htm и, последовательно выделяя пункты "Содержания", вставить гиперссылки на соответствующие документы.
4.2. Сохранить файл и обновить его просмотр в Браузере. Проверить правильность выполнения переходов по гиперссылкам.
5. Сохранить изменения в файлах и обновить просмотр сайта в Internet Explorer.

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

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

Программа Microsoft Frontpage как способ создания сайта
Как выбрать бесплатную программу для создания сайта
Как создать сайт при помощи программы

Данная программа была постоянно включена в пакет Microsoft Office, включая версию 2003, с выходом новых версий (2007 и 2010) она была заменена на Microsoft Expression Web и Microsoft Office SharePoint Designer соответственно. Если у вас нет FrontPage, вам необходимо запустить установочный диск или его дистрибутив с жесткого диска. В опциях выберите пункт Microsoft FrontPage и нажмите кнопку «Установить».

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

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

Но кроме уже имеющихся шаблонов у вас есть возможность использовать сохраненные копии страниц. Для этого сохраните интернет-страницу на жесткий диск через программу Internet Explorer, т.к. FrontPage работает на движке этого браузера. А в редакторе нажмите «Создать из имеющейся веб-страницы», укажите путь и продолжите редактирование элементов.

Чтобы создать еще несколько вложенных страниц необходимо нажать верхнее меню «Файл» и выбрать пункт «Создать». Затем перейдите к разделу «Другие шаблоны веб-узлов» и нажмите на элемент «Пустой веб-узел». В открывшемся окне нажмите кнопку «Новая страница». Для редактирования новой страницы достаточно дважды щелкнуть по ее названию.

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

Цель работы: освоение приемов создания Web-страниц и Web-сайтов с помощью текстового процессора Microsoft Word: оформление дизайна страницы; организация внутренних гиперссылок; организация внешних гиперссылок.

Используемое программноее обеспечение: текстовый процессор Microsoft Word.

Замечание . Чтобы проверить, работает ли Web-мастер, выполните команду Файл —> Создать. Если в открывшемся окне имеется вкладка Web-страницы, значит, можно работать дальше. Если такой вкладки нет, то необходима переустановка Microsoft Office с включением режима создания HTML.

Задание

В данной работе вы реализуете проект семейного сайта. Ниже вы видите макет главной страницы и макет «Папиной страницы». Макеты остальных страниц вы можете по аналогии создать сами.

1. Открыть текстовый процессор Word.

2. Выполнить команду Файл -> Создать. В появившемся окне выбрать вкладку Web-страницы. Щелкнуть на значке Новая Web-страница.

3. Оформить внешний вид страницы в соответствии с приведенным образцом, используя обычные средства Word (управление форматированием, шрифтами; можно сделать цветной фон, подобрать текстуру, заливки и пр.). При наборе текста страницы не подчеркивать слова (Папа, Мама, Сережа, Тимка, биография). Подчеркивания появятся автоматически после вставки гиперссылок.

Вставить рисунок можно либо из файла со сканированной фотографией (если у вас такой имеется), либо выбрав любой рисунок из Microsoft Clip Gallery.

4. Вставить внутренние гиперссылки. Для этого:

=> установить курсор перед абзацем, начинающимся словами: «Моего папу зовут . »;
=> выполнить команду Вставка —> Закладка;
=> в открывшемся окне в строке Имя закладки ввести какое-нибудь имя, например «М1»; щелкнуть на кнопке Добавить;
=> в списке, расположенном выше, выделить слово «Папа»;
=> выполнить команду Вставка —> Гиперссылка;
=> в появившемся окне щелкнуть на кнопке Обзор напротив строки «Имя объекта в документе»;
=> выбрать имя созданной закладки (M1); щелкнуть на кнопке ОК, затем еще раз на ОК. Гиперссылка готова.

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

6. Сохранить полученную страницу в файле с именем family.htm (расширение установится автоматически) в папке Мои документы (окно с данной страницей не закрывать).

7. Создать «Папину страницу» (см. п. 1-2); гиперссылок в ней пока создавать не нужно. Сохранить страницу в файле father.htm в папке Мои документы.

8. Вернуться к главной странице. Создать в ней внешнюю гиперссылку на «Папину страницу». Для этого:

=> выделить первое в тексте слово «Биография»;
=> выполнить команду Вставка -> Гиперссылка;
=> в появившемся окне щелкнуть на кнопке Обзор напротив строки Связь с файлом/URL;
=> найти и выбрать ранее созданный файл father.htm; щелкнуть на кнопке ОК, затем еще раз на ОК. Гиперссылка готова.

9. Вернуться к «Папиной странице». Создать в ней внешнюю гиперссылку на сайт Московского университета. Для этого:

10. Создать остальные страницы семейного сайта, согласно плану, представленному на схеме. Организовать связи между страницами и внешние связи. Не забудьте сохранить все созданные файлы. (Мои документы/11 класс/Ф.И.О)

11. Установите автономный режим работы браузера.

12. Открыть с помощью браузера главную страницу семейного сайта (для этого достаточно дважды щелкнуть на значке файла с главной страницей в папке Мои документы). Проверить работу всех внутренних гиперссылок (внутри главной страницы, а также между страницами вашего сайта).

Читайте также: