Создание сайтов средствами MS Office

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

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

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

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

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

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

Задание. Создание Web с помощью средств MS Office
Пример структуры создаваемого сайта
© ЮНИИ ИТ 2010
Страница 1
ссылки
Стр. 2
Стр. 3
Стр. 4
Страница 2
ссылки
Стр. 1
Страница 3
ссылки
Стр. 1
Страница 4

Задание. Создание Web с помощью средств MS Office
Страница 1 (Главная страница)
Пример страниц создаваемого сайта
Страница 3 (Фотоальбом)
© ЮНИИ ИТ 2010
Заголовок
Меню сайта информация рисунки
(ссылки на о сайте фотографии
другие ресурсы
Страницы,
новости)
контакты
Фотоальбом
Меню сайта
(ссылки на
другие фотографии и
Страницы, текст
новости)

Порядок выполнения задания
1. Создать папку с именем «Presentation», а в ней – папку для Ваших рисунков «image».
© ЮНИИ ИТ 2010
2. Подготовить рисунки для соответствующих страницы. Сохранить их в папке «image».
3. Создать отдельные файлы для каждой страницы с помощью текстового процессора MS Word (Страницы 1, 2, 4).

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

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

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

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

Порядок выполнения задания
© ЮНИИ ИТ 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. Открыть файл в Браузере, убедиться, что документ отображается правильно. При необходимости отредактировать.