Создание веб-страниц в WORD

Содержание

Слайд 2

Часть первая

Проектирование веб-сайта

Часть первая Проектирование веб-сайта

Слайд 3

Мы познакомимся с простыми инструментами и методами разработки веб-страниц.
На примере рассмотрим,

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

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

Кинотеатр «Октябрь»
предлагает
Драмы Комедии Детективы

ДРАМЫ

КОМЕДИИ

ДЕТЕКТИВЫ

ФОТО

Первая ( главная ) веб-страница

Вторая веб-страница Третья веб-страница Четвертая веб-страница

Слайд 4

На первом ( верхнем уровне ) находится первая ( главная ) страница.

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

Жанр фильма

Фото
сюжета

Название, страна
Режиссёр
Актёры:

Краткое содержание

Сеансы: Цена билета:

Страницы второго уровня.

Слайд 5

Конечно, структура сайта в дальнейшем может быть усложнена добавлением страниц последующих уровней.

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

текстовые блоки графические объекты

К текстовым блокам относят:
К графическим объектам относят:

основной текст,
заголовки
списки
текстовые гиперссылки и т.д.

изображения ( рисунки, фото, анимация ) ,
«обои» - фоновые рисунки,
изображения-гиперссылки,
разделительные линии.

Слайд 6

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

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

Тема -

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

Тема задаёт стиль оформления каждой страницы и всего сайта: стиль основного текста, заголовков, гиперссылок и т.п.

Слайд 7

Темы предлагаются во всех офисных программах.

Создание сайта начинается с выбора готовой Темы

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

Тема «Бомбёжка» Тема «Магистраль»

Слайд 8

Часть вторая

Создание веб-страниц

Часть вторая Создание веб-страниц

Слайд 9

Начнём создание веб-сайта с оформления страниц второго уровня.

При сохранении документа WORD в

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

Слайд 10

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

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

Слайд 11

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

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

Слайд 12

Аналогичный образом создаются страницы «Комедии» и «Детективы».
Если для создания новых страниц использовали

Аналогичный образом создаются страницы «Комедии» и «Детективы». Если для создания новых страниц
уже созданную, не забывайте только сохранять их под своими именами KOMEDY.HTM

Слайд 13

и DETEKTIV.HTM

и DETEKTIV.HTM

Слайд 14

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

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

Слайд 15

Важный этап разработки веб-страницы – создание гиперссылок. Для этого необходимо:
1. выделить

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

По окончании работы необходимо просмотреть созданные страницы в браузере и проверить работы ссылок.

Слайд 16

Повысить привлекательность веб-страницы можно, разместив на ней динамические и интерактивные элементы.
«Оживим» нашу

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

Слайд 17

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

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