Как создать сайт в ворде пошаговая инструкция

Была ли эта статья полезной?

Is this article up to date?

Практическая работа

Microsoft Word
2010

Работа с автофигурами и рисунками

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

1. Создавать объекты в Microsoft Word
   с помощью автофигур;
2. Редактировать фигуры и рисунки.

Задание на выполнение:

С
помощью автофигур и рисунков в Microsoft Word необходимо создать сайт
туристической фирмы «Панда».

Методика выполнения задания:

1.      Запустите Microsoft Word (Пуск – Все программы – Microsoft office — Microsoft
Word 2010).

2.      Шаг 1. Необходимо изменить Параметры страницы:
вкладка Разметка страницы → Параметры страницы → Ориентация альбомная → ОК.

3.      Шаг 2. Меняем цвет фона листа: вкладка Разметка
страницы → Фон страницы → Цвет страницы → Другие цвета → Спектр (красный — 52,
зеленый — 170, синий — 212) → ОК:

4.      Шаг 3. Создание «шапки» нашего сайта
(Наименования и меню):

Из
предложенных рисунков выбираем N 14. Вкладка Вставка → Рисунок → Вставить:

Для того
чтобы изменить размер рисунка необходимо:

— Щелкнуть
правой кнопкой мыши по рисунку (вызвать контекстное меню)

— Под
основным меню (в дополнительном) изменяем размеры рисунка: по вертикале – 2,51;
по горизонтали – 2,54.

Чтобы
рисунок можно было двигать в любом направлении необходимо:

— Выделить
его;

— Перейти
на вкладку Работа с рисунком;

— В меню
Упорядочить щелкаем по функции Обтекание текстом → За текстом.

 

— В той
же вкладке (Работа с рисунками) переходим к меню Стили рисунков → Наклонная, белая (стиль рамки).

— Изменяем
местоположение рисунка соответственно картинке:

Создание
наименование туристической фирмы:

— Вставка
→ Текст → WordArt → Градиентная заливка – черная, контур – белый, тень –
снаружи.

В
появившемся объекте впишите наиенование туристической фирмы – Панда.

Измените
размер шрифта – на 48, и сам шрифт – SchoolBook.

Измените
местоположение объекта согласно рисунку:

Теперь необходимо
вставить надпись «Туристическая фирма»:

— Вкладка
Вставить;

— В меню
Текст выбираем – Надпись → Простая надпись.

— В
появившемся объекте впишите надпись – Туристическая фирма;

— Измените
размер шрифта – на 12, полужирный и сам шрифт – SchoolBook.

—
Уменьшите объект по размеру текста;

— Во
вкладке Средства рисования выбираем Стиль фигуры → Заливка фигуры (нет заливки) → Контур фигуры (нет контура);

—
Располагаем надпись соответственно рисунку:

Вставка
номера происходит аналогично предыдущему действию – с помощью объекта Надпись:

— Вкладка
Вставить;

— В меню
Текст выбираем – Надпись → Простая надпись.

— В появившемся объекте впишите надпись –
«8 (4012) 51-46-13, 51-46-12»;

— Измените
размер шрифта – на 26, полужирный и сам шрифт – Calibri, .

—
Уменьшите объект по размеру текста;

— Во
вкладке Средства рисования выбираем Стиль фигуры → Заливка фигуры (нет заливки) → Контур фигуры (нет контура); Стили WordArt → Экспресс-стили → «Заливка темно-бирюзовый, прозрачная,
акцент 5, очистить, рельеф».

—
Располагаем надпись соответственно рисунку:

Вставка
«кнопок-переключателей»:

— Из
списка предложенных картинок выбираем N 7, 8, 9;

— Вставка
→ Рисунок (на панели Иллюстрации) → место расположение рисунков → Вставить;

— Изменяем
размер (по вертикали и горизонтали = 1,39 см):

— Выделяем
кнопочки, затем во вкладке Работа с рисунками в меню Упорядочить щелкаем по
функции Обтекание текстом → За текстом.

—
Располагаем кнопочки соответственно рисунку:

Создание
основного меню:

— На
вкладке Вставка, в меню Иллюстрации выбираем Фигуры → Скругленный прямоугольник (вместо
курсора на экране появился крестик, щелкаем им по листу).

— Нажимаем
правой кнопкой мыши по объекту (вызываем контекстное меню) → Добавить текст. В объекте
появился курсор. Вписываем текст – «Главная»;

—
Вызываем контекстное меню нашей фигуры, выбираем Дополнительные параметры
разметки;

— В
открывшемся окне Разметка переходим на вкладку Размер (Высота — 1 см, Ширина –
2,92 см)

— На
вкладке Средства рисования → Стили фигур → «Сильный эффект, темно-бирюзовый, Акцент
5»;

— Измените
размер шрифта – на 11, полужирный и сам шрифт – SchoolBook

Таким же
образом создаем следующие надписи:

— «О
компании» (Высота — 1 см, Ширина – 2,92 см)

—
«Консультанты по отдыху» (Высота — 1 см, Ширина – 5,7 см)

— «Туры» (Высота
— 1 см, Ширина – 2,92 см)

—
«Телефоны» (Высота — 1 см, Ширина – 2,92 см)

Расположить
объекты меню согласно рисунку:

5.      Шаг 4. Создание плаката под меню.

Для
начала необходимо вставить в документ картинки, которые в последствие образуют
плакат:

— Вкладка
Вставка → Иллюстрации → Рисунок (N 1, 2 и 3) по очереди;

— Меняем
размер рисунков: Высота – 5,41; Ширина – 9,89;

—
Изменяем положение рисунков – Обтекание за текстом (вкладка Работа с
рисунками);

—
Располагаем три рисунка на одной линии (согласно рисунку):

6.      Шаг 5. Создание блоков идентификации и
новостей.

— На
вкладке Вставка, в меню Иллюстрации выбираем Фигуры → Скругленный прямоугольник (вместо
курсора на экране появился крестик, щелкаем им по листу).

—
Вызываем контекстное меню нашей фигуры, выбираем Дополнительные параметры
разметки;

— В
открывшемся окне Разметка переходим на вкладку Размер (Высота – 5,58 см, Ширина
– 6 см);

— На
вкладке Средства рисования → Стили фигур → «Сильный эффект, темно-бирюзовый, Акцент
5»;

—
Выделяем наш прямоугольник, правой кнопкой мыши вызываем контекстное меню → Копировать;
затем на вкладке Главная щелкаем по кнопке Вставить.

—
Располагаем прямоугольники друг под другом:

— Аналогично
вставляем еще 1 прямоугольник:

—
Изменяем его стиль (вкладка Средства рисования → Стили фигур → «Светлый контур 1, цветная заливка –
Темно-бирюзовый, Акцент 5) и размер фигуры (Высота – 4,46 см, Ширина – 6 см);

—
Накладываем данную фигуру поверх первой:

— Ту же
процедуру выполняем и с нижним прямоугольником:

— Используя
объект надпись (Новая надпись), заполняем 1 блок;

— В
объекте Надпись вписываем слово – Логин;

— Измените
размер шрифта – на 11, сам шрифт – SchoolBook.

—
Уменьшите объект по размеру текста;

— Во
вкладке Средства рисования выбираем Стиль фигуры → Заливка фигуры (нет заливки) → Контур фигуры (нет контура);

— Таким
же образом создаем Надпись – Пароль;

—
Располагаем надпись соответственно рисунку:

— Создаем
поля для Логина и Пароля;

— На
вкладке Вставка → Иллюстрации → Фигуры выбираем фигуру – Прямоугольник
(растягиваем по листу документа);

—
Изменяем его размер (Высота – 0,65 см, Ширина – 3,25 см) и стиль (заливка –
белая, контур – «Темно-бирюзовый, Акцент 5, более темный оттенок, 25%»);

—
Аналогично поле для Пароля.

—
Располагаем надпись соответственно рисунку:

Для
завершенности данного блока осталось добавить три надписи: «ВОЙТИ», «Забыли
пароль?», «Регистрация»:

Первый
блок заполнен. Таким же образом заполняем второй блок:

7.      Шаг 6. Создание внутреннего меню:

— С
помощью все той же Надписи, создаем заголовок меню «Наши туры: автобусные
туры, горячие туры, новогодние туры…»:

— Вставка
картинок. Из предложенных картинок вставляем N 10.

—
Изменяем размер (высота – 3,19; Ширина – 5,46), Стиль рисунка (с отражением,
белая);

— Используя
Надпись, над рисунком создаем заголовок «Автобусные туры»:

—
Аналогично добавляем еще 4 рисунка:

— В
правый нижний угол нашего документа вставляем рисунок N 11.

—
Изменяем положение рисунка – Обтекание за текстом (вкладка Работа с рисунками);

—
Выделяем рисунок, переходим на вкладку Работа с рисунками, выбираем инструмент
Обрезка и соответственно обрезаем лишние белые края картинки;

—
Изменяем стиль нашего рисунка – «Прямоугольник с размытыми краями»:

— Затем
создаем выноску для наших панд в правом углу (Вставка → Иллюстрации → Фигуры → Выноски → Скругленная прямоугольная выноска);

— Добавляем в выноску текст
(правой кнопкой по выноске вызываем контекстное меню → Добавить текст) – «Отдых требует подготовки. И это
мы берем на себя!»;

— Изменяем стиль текста. Выделите
выноску → на вкладке Средства рисования в
Стилях WordArt выбираем – «Заливка 0
светло-коричневый, текст 2, контур – фон 2»;

— С помощью желтого ромбика на
выноске, направляем ее на рисунок с пандами:

8.      Шаг 7. Заключительное оформление.

В
заключение нам осталось оформить наш сайт красивыми бабочками. Вставляем
рисунок N 12 в наш документ.

—
Изменяем положение – Обтекание за тестом;

—
Изменяем размер (Высота – 2,68, Ширина – 3,35);

—
Размножим наших бабочек (Копировать, Вставить);

—
Располагаем их хаотично;

—
Некоторых бабочек обрезаем, некоторых переворачиваем (с помощью зеленого
маркера при выделении рисунка).

Работа
готова!

Если у вас есть программное обеспечение Microsoft Word и вы хотите создать свой собственный сайт, чтобы поделиться информацией и идеями с другими людьми, то вы по адресу! В этой статье мы предоставим вам пошаговую инструкцию по созданию сайта в программе Word.

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

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

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

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

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

1. Выберите тему и цель сайта. Определитесь, о чем будет ваш сайт и какая цель у него будет. Тема сайта определяет его содержание, а цель помогает сосредоточиться на главной задаче, которую сайт должен выполнять.
2. Создайте план структуры сайта. Разделите содержание вашего сайта на разные категории и подразделы. Это поможет вам создать систематическую структуру и облегчит навигацию для посетителей.
3. Соберите материалы для сайта. Определите, какие материалы вам понадобятся для создания сайта. Включите в список тексты, изображения, видео и другие ресурсы, которые вы хотите использовать.
4. Подготовьте тексты и изображения. При необходимости отредактируйте тексты, чтобы они были лаконичными и информативными. Также убедитесь, что изображения имеют подходящее разрешение и оптимальный размер для использования на веб-страницах.
5. Создайте таблицу для макета страницы. Используйте таблицу в Word, чтобы создать макет страницы. Разделите страницу на секции и задайте им нужные размеры. Это поможет вам расположить тексты и изображения в нужном порядке.

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

Выбор шаблона и цветовой гаммы

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

Шаблон

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

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

Цветовая гамма

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

1. Определите цветовую палитру, которая будет использоваться на вашем сайте. Возможно, у вас уже есть логотип или фирменный стиль, в котором используются определенные цвета. В таком случае, цвета логотипа можно использовать и для создания цветовой гаммы сайта.
2. Постарайтесь создать гармоничную комбинацию цветов, которая будет приятно смотреться и не будет вызывать дискомфорта у пользователей. В программе Word можно использовать готовые цветовые схемы или создать свою собственную.
3. Учтите, что выбранные цвета должны хорошо контрастировать между собой, чтобы было удобно читать текст на фоне выбранных цветов.
4. Также обратите внимание на сочетание цветов с изображениями и графическими элементами, которые вы планируете использовать на сайте.

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

Создание основного содержимого сайта

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

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

Для создания списка разделов и подразделов вам понадобятся теги <ul> и <li>.

Пример организации разделов:

• Введение
• Основная часть
  • Пункт 1
  • Пункт 2
  • Пункт 3
• Заключение

Если вам нужно упорядочить информацию, например, перечислить шаги инструкции или пронумеровать список, вы можете использовать теги <ol> и <li>.

Пример упорядоченного списка:

1. Шаг 1: подготовка материалов
2. Шаг 2: создание дизайна страницы
3. Шаг 3: добавление текста и изображений
4. Шаг 4: проведение тестирования и оптимизации

Кроме того, вы можете использовать теги <table> и <tr> для создания таблиц на странице.

Пример таблицы:

Название	Цена	Количество
Яблоки	50 рублей	10 штук
Груши	30 рублей	5 штук

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

Настройка внешнего вида сайта

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

Каждый элемент вашего сайта может быть настроен в отдельности. Например, вы можете изменить шрифт и размер заголовков, задать цвет фона, установить отступы между блоками текста и многое другое.

Чтобы настроить внешний вид вашего сайта, воспользуйтесь возможностями программы Word:

1. Шрифты и размеры текста: Выделите текст, который вы хотите изменить, и выберите нужный шрифт и размер из панели инструментов «Форматирование».
2. Цвета: Чтобы изменить цвет текста или фона, выделите нужный элемент и выберите нужный цвет из панели инструментов «Цвета».
3. Фон: Вы можете задать фоновое изображение или цвет для страницы сайта. Для этого откройте вкладку «Дизайн» на панели инструментов и выберите соответствующие параметры.
4. Расположение элементов: Чтобы задать отступы или выравнивание текста, выделите блок текста и выберите нужные параметры в панели инструментов «Разметка страницы».
5. Изображения: Для добавления изображений на свой сайт, выберите пункт меню «Вставка» и следуйте инструкциям, чтобы добавить изображение из файловой системы.

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

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

Не бойтесь экспериментировать и настраивать внешний вид своего сайта, чтобы он выглядел так, как вы хотите!

Вопрос-ответ

Какой программой можно создать сайт?

Вы можете создать сайт в программе Word.

Как начать создавать сайт в программе Word?

Для начала создания сайта в программе Word, откройте новый документ.

Что нужно сделать после открытия нового документа в Word?

После открытия нового документа в Word, выберите шаблон сайта или создайте свой дизайн.

Как добавить контент на сайт, созданный в Word?

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

Можно ли сохранять сайт, созданный в Word, в виде готового HTML-файла?

Да, вы можете сохранять сайт, созданный в Word, в виде готового HTML-файла. Для этого выберите в меню «Файл» пункт «Сохранить как» и выберите формат HTML.

Практическая работа

Microsoft Word
2010

Работа с автофигурами и рисунками

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

1. Создавать объекты в Microsoft Word
   с помощью автофигур;
2. Редактировать фигуры и рисунки.

Задание на выполнение:

С
помощью автофигур и рисунков в Microsoft Word необходимо создать сайт
туристической фирмы «Панда».

Методика выполнения задания:

1.      Запустите Microsoft Word (Пуск – Все программы – Microsoft office — Microsoft
Word 2010).

2.      Шаг 1. Необходимо изменить Параметры страницы:
вкладка Разметка страницы → Параметры страницы → Ориентация альбомная → ОК.

3.      Шаг 2. Меняем цвет фона листа: вкладка Разметка
страницы → Фон страницы → Цвет страницы → Другие цвета → Спектр (красный — 52,
зеленый — 170, синий — 212) → ОК:

4.      Шаг 3. Создание «шапки» нашего сайта
(Наименования и меню):

Из
предложенных рисунков выбираем N 14. Вкладка Вставка → Рисунок → Вставить:

Для того
чтобы изменить размер рисунка необходимо:

— Щелкнуть
правой кнопкой мыши по рисунку (вызвать контекстное меню)

— Под
основным меню (в дополнительном) изменяем размеры рисунка: по вертикале – 2,51;
по горизонтали – 2,54.

Чтобы
рисунок можно было двигать в любом направлении необходимо:

— Выделить
его;

— Перейти
на вкладку Работа с рисунком;

— В меню
Упорядочить щелкаем по функции Обтекание текстом → За текстом.

 

— В той
же вкладке (Работа с рисунками) переходим к меню Стили рисунков → Наклонная, белая (стиль рамки).

— Изменяем
местоположение рисунка соответственно картинке:

Создание
наименование туристической фирмы:

— Вставка
→ Текст → WordArt → Градиентная заливка – черная, контур – белый, тень –
снаружи.

В
появившемся объекте впишите наиенование туристической фирмы – Панда.

Измените
размер шрифта – на 48, и сам шрифт – SchoolBook.

Измените
местоположение объекта согласно рисунку:

Теперь необходимо
вставить надпись «Туристическая фирма»:

— Вкладка
Вставить;

— В меню
Текст выбираем – Надпись → Простая надпись.

— В
появившемся объекте впишите надпись – Туристическая фирма;

— Измените
размер шрифта – на 12, полужирный и сам шрифт – SchoolBook.

—
Уменьшите объект по размеру текста;

— Во
вкладке Средства рисования выбираем Стиль фигуры → Заливка фигуры (нет заливки) → Контур фигуры (нет контура);

—
Располагаем надпись соответственно рисунку:

Вставка
номера происходит аналогично предыдущему действию – с помощью объекта Надпись:

— Вкладка
Вставить;

— В меню
Текст выбираем – Надпись → Простая надпись.

— В появившемся объекте впишите надпись –
«8 (4012) 51-46-13, 51-46-12»;

— Измените
размер шрифта – на 26, полужирный и сам шрифт – Calibri, .

—
Уменьшите объект по размеру текста;

— Во
вкладке Средства рисования выбираем Стиль фигуры → Заливка фигуры (нет заливки) → Контур фигуры (нет контура); Стили WordArt → Экспресс-стили → «Заливка темно-бирюзовый, прозрачная,
акцент 5, очистить, рельеф».

—
Располагаем надпись соответственно рисунку:

Вставка
«кнопок-переключателей»:

— Из
списка предложенных картинок выбираем N 7, 8, 9;

— Вставка
→ Рисунок (на панели Иллюстрации) → место расположение рисунков → Вставить;

— Изменяем
размер (по вертикали и горизонтали = 1,39 см):

— Выделяем
кнопочки, затем во вкладке Работа с рисунками в меню Упорядочить щелкаем по
функции Обтекание текстом → За текстом.

—
Располагаем кнопочки соответственно рисунку:

Создание
основного меню:

— На
вкладке Вставка, в меню Иллюстрации выбираем Фигуры → Скругленный прямоугольник (вместо
курсора на экране появился крестик, щелкаем им по листу).

— Нажимаем
правой кнопкой мыши по объекту (вызываем контекстное меню) → Добавить текст. В объекте
появился курсор. Вписываем текст – «Главная»;

—
Вызываем контекстное меню нашей фигуры, выбираем Дополнительные параметры
разметки;

— В
открывшемся окне Разметка переходим на вкладку Размер (Высота — 1 см, Ширина –
2,92 см)

— На
вкладке Средства рисования → Стили фигур → «Сильный эффект, темно-бирюзовый, Акцент
5»;

— Измените
размер шрифта – на 11, полужирный и сам шрифт – SchoolBook

Таким же
образом создаем следующие надписи:

— «О
компании» (Высота — 1 см, Ширина – 2,92 см)

—
«Консультанты по отдыху» (Высота — 1 см, Ширина – 5,7 см)

— «Туры» (Высота
— 1 см, Ширина – 2,92 см)

—
«Телефоны» (Высота — 1 см, Ширина – 2,92 см)

Расположить
объекты меню согласно рисунку:

5.      Шаг 4. Создание плаката под меню.

Для
начала необходимо вставить в документ картинки, которые в последствие образуют
плакат:

— Вкладка
Вставка → Иллюстрации → Рисунок (N 1, 2 и 3) по очереди;

— Меняем
размер рисунков: Высота – 5,41; Ширина – 9,89;

—
Изменяем положение рисунков – Обтекание за текстом (вкладка Работа с
рисунками);

—
Располагаем три рисунка на одной линии (согласно рисунку):

6.      Шаг 5. Создание блоков идентификации и
новостей.

— На
вкладке Вставка, в меню Иллюстрации выбираем Фигуры → Скругленный прямоугольник (вместо
курсора на экране появился крестик, щелкаем им по листу).

—
Вызываем контекстное меню нашей фигуры, выбираем Дополнительные параметры
разметки;

— В
открывшемся окне Разметка переходим на вкладку Размер (Высота – 5,58 см, Ширина
– 6 см);

— На
вкладке Средства рисования → Стили фигур → «Сильный эффект, темно-бирюзовый, Акцент
5»;

—
Выделяем наш прямоугольник, правой кнопкой мыши вызываем контекстное меню → Копировать;
затем на вкладке Главная щелкаем по кнопке Вставить.

—
Располагаем прямоугольники друг под другом:

— Аналогично
вставляем еще 1 прямоугольник:

—
Изменяем его стиль (вкладка Средства рисования → Стили фигур → «Светлый контур 1, цветная заливка –
Темно-бирюзовый, Акцент 5) и размер фигуры (Высота – 4,46 см, Ширина – 6 см);

—
Накладываем данную фигуру поверх первой:

— Ту же
процедуру выполняем и с нижним прямоугольником:

— Используя
объект надпись (Новая надпись), заполняем 1 блок;

— В
объекте Надпись вписываем слово – Логин;

— Измените
размер шрифта – на 11, сам шрифт – SchoolBook.

—
Уменьшите объект по размеру текста;

— Во
вкладке Средства рисования выбираем Стиль фигуры → Заливка фигуры (нет заливки) → Контур фигуры (нет контура);

— Таким
же образом создаем Надпись – Пароль;

—
Располагаем надпись соответственно рисунку:

— Создаем
поля для Логина и Пароля;

— На
вкладке Вставка → Иллюстрации → Фигуры выбираем фигуру – Прямоугольник
(растягиваем по листу документа);

—
Изменяем его размер (Высота – 0,65 см, Ширина – 3,25 см) и стиль (заливка –
белая, контур – «Темно-бирюзовый, Акцент 5, более темный оттенок, 25%»);

—
Аналогично поле для Пароля.

—
Располагаем надпись соответственно рисунку:

Для
завершенности данного блока осталось добавить три надписи: «ВОЙТИ», «Забыли
пароль?», «Регистрация»:

Первый
блок заполнен. Таким же образом заполняем второй блок:

7.      Шаг 6. Создание внутреннего меню:

— С
помощью все той же Надписи, создаем заголовок меню «Наши туры: автобусные
туры, горячие туры, новогодние туры…»:

— Вставка
картинок. Из предложенных картинок вставляем N 10.

—
Изменяем размер (высота – 3,19; Ширина – 5,46), Стиль рисунка (с отражением,
белая);

— Используя
Надпись, над рисунком создаем заголовок «Автобусные туры»:

—
Аналогично добавляем еще 4 рисунка:

— В
правый нижний угол нашего документа вставляем рисунок N 11.

—
Изменяем положение рисунка – Обтекание за текстом (вкладка Работа с рисунками);

—
Выделяем рисунок, переходим на вкладку Работа с рисунками, выбираем инструмент
Обрезка и соответственно обрезаем лишние белые края картинки;

—
Изменяем стиль нашего рисунка – «Прямоугольник с размытыми краями»:

— Затем
создаем выноску для наших панд в правом углу (Вставка → Иллюстрации → Фигуры → Выноски → Скругленная прямоугольная выноска);

— Добавляем в выноску текст
(правой кнопкой по выноске вызываем контекстное меню → Добавить текст) – «Отдых требует подготовки. И это
мы берем на себя!»;

— Изменяем стиль текста. Выделите
выноску → на вкладке Средства рисования в
Стилях WordArt выбираем – «Заливка 0
светло-коричневый, текст 2, контур – фон 2»;

— С помощью желтого ромбика на
выноске, направляем ее на рисунок с пандами:

8.      Шаг 7. Заключительное оформление.

В
заключение нам осталось оформить наш сайт красивыми бабочками. Вставляем
рисунок N 12 в наш документ.

—
Изменяем положение – Обтекание за тестом;

—
Изменяем размер (Высота – 2,68, Ширина – 3,35);

—
Размножим наших бабочек (Копировать, Вставить);

—
Располагаем их хаотично;

—
Некоторых бабочек обрезаем, некоторых переворачиваем (с помощью зеленого
маркера при выделении рисунка).

Работа
готова!

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

Первые шаги по созданию сайта в Ворде

Продвинутые инструменты Ворда для украшения веб-страницы

Делаем полноценный веб-сайт

Окончательное сохранение документа в качестве веб-страницы

Подведём итоги

Первые шаги по созданию сайта в Ворде

Создаём свой сайт в Ворде (здесь и далее имеется в виду Microsoft Word), как говорится, с чистого листа. Можно начать со ставшей уже классикой фразы «Hello world», что в русском переводе: «Здравствуй мир». Хотя я бы написал на своей первой страничке в интернете так «Это моя первая страница в интернете. Ура!».

Пишем эту (или любую другую) фразу в Ворде на вновь созданной страничке, выбираем в меню «Файл» (в Word 2003), или после нажатия на кнопку «Office» (вверху слева в Word 2007), команду «Сохранить как» и сохраняем документ как «Веб-страница (*.htm; *.html)». Название придумайте сами, но оно должно быть на латинице, например «stranitsa», рекомендую назвать её «index» – дальше нам это очень пригодится при размещении сайта в интернете.
Веб-страницы называют ещё html-страницами (от названия языка html — языка гипертекстовой разметки, на базе которого основаны все сайты в интернете).

Таким образом, вы создали свою первую страницу: index.htm. Кликните по файлу (два раза конечно ), и вы увидите свою веб-страницу в просмотрщике веб-страниц или браузере (от английского «browser» – обозреватель), установленном на вашем компьютере по умолчанию.

На сегодняшний день существует несколько популярных браузеров. Это Internet Explorer, Firefox, Opera, Chrome и другие. Каким браузером пользоваться – зависит только от ваших предпочтений.

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

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

На самом деле не всё так безоблачно, так как не все браузеры совместимы между собой на 100% (та же ситуация с поддержкой интернет стандартов отображения страниц) и бывает, что отображение страницы в браузере и в Ворде не полностью совпадают. Есть, к счастью, очень простой и универсальный способ решения данной проблемы – после сохранения нашей странички, мы просмотрим её в паре браузеров от разных производителей, например в Internet Explorer’е (установлен у вас по умолчанию) и в Firefox’е. Благо все браузеры бесплатны.

Таким образом, мы будем уверены, что любой пользователь в интернете увидит тоже, что и мы.
Любые несоответствия в браузере и в Вордовском документе мы тут же подкорректируем (например, выравнивание), обычно это делается изменением свойств элемента страницы Ворда (строки, слова, таблицы). После сохранения документа убеждаемся, что у нас всё хорошо и продолжаем работать дальше.

Немаловажно, что Ворд может проверить наш текст на наличие орфографических и грамматических ошибок, что является большим плюсом. Наличие ошибок на вашем сайте является дурным тоном.

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

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

Всё дело в том, что одним из популярных способов создания веб-страниц в интернете является размещение сложной таблицы на странице, и расстановка различных элементов (картинок, меню, любого текста) происходит в ячейках таблицы. Мы пойдём по этому же пути и убедимся в чрезвычайной простоте работы с таблицами в Ворде.

Проделайте следующее. Нарисуйте в Ворде любым удобным вам способом таблицу 6×6 ячеек. Закрасьте ячейки в шахматном порядке красным цветом. Для простоты вы можете указать в свойствах ячейки красный цвет и на каждой ячейке, которую необходимо окрасить, нажать «F4» (копирование формата). Пример таблицы на рисунке внизу.

Вы можете воспользоваться для практики уже готовыми файлами с примерами в ворде. Загрузите zip-архив с этим и другими примерами.

Выделите таблицу, кликнув левой кнопкой мыши на квадратике с крестиком в левом верхнем углу таблице и по правому клику мышки выберите «Границы и заливка». В открывшейся вкладке «Граница» установите «Тип»: Нет.

Ваша таблица будет иметь невидимую окантовку (бордюр) и другие линии. Далее сохраняйте ваш документ в виде веб-странички и просматривайте её в браузере.

На этом примере был показан основной принцип работы со страницами при помощи таблиц, т.е. мы заполняем ячейки необходимой информацией и потом делаем все линии таблицы невидимыми.

Когда мы начнём работать с основным материалом на странице, то настойчиво рекомендую вам сохранять Вордовский файл в качестве веб-странички В ОТДЕЛЬНЫЙ ФАЙЛ!!!, тот же index.htm, к примеру. Т.е. у вас будет 2 рабочих файла. Один Вордовский, с расширением .doc (или .docx, в зависимости от версии Ворда) – основной файл, который вы будете редактировать, и другой – файл веб-страницы с расширением .htm. Веб-страницу мы будем открывать в браузере и сравнивать её дизайн с исходным дизайном в Ворде на случай возможных несоответствий.

Почему лучше делать именно так? Потому что при сохранении Вордом документа в веб-страницу, часть объектов может быть преобразована в картинку, которую уже нельзя будет подредактировать.

Продвинутые инструменты Ворда для украшения веб-страницы

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

Вы можете выбрать любую автофигуру из множества доступных в меню «Автофигуры» панели инструментов «Рисование».

Любые инструменты, входящие в панель инструментов «Рисование», можно найти разными способами. Первый способ вам уже известен, а второй способ — в главном меню выбрать «Вставка» и перейти к подменю «Рисунок» (для Word 2003). В Ворде следующих версий ( Word 2007 и далее) интерфейс отличается большей интеллектуальностью и работать там уже значительно легче и быстрее, здесь при выборе меню «Вставка» на верхней панели все значки инструментов уже присутствуют.

Покажем небольшой пример интеллектуальности ворда, начиная с 2007 версии и старше. Например, мы рисуем любую автофигуру в Ворде 2007 и сразу же открывается дополнительная вкладка Средства рисованияФормат, где есть возможнотсь применить к фигуре любой доступный эффект. Причем результаты применения эффекта можно увидеть мгновенно, в отличии от Ворда 2003. Но, тем не менее, конечный результат будет один и тот же. Поэкспериментируйте сами.

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

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

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

Пожалуй, самый интересный инструмент – это объект WordArt. С его помощью можно сделать, буквально, что угодно, с любой надписью. Примеры объектов WordArt ниже.

Делаем полноценный веб-сайт

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

Этот пример вы можете скачать и подредактировать, дополнив вашим текстом. Для удобства на страницу уже добавлены картинки актуальной на сегодняшний день линейки продуктов Москомприватбанка (Приватбанк в России). В последствии вы можете их заменить на другие (поиск вам в помощь).

Что нового в данном примере сайта для нас:

1) В первой строке таблицы файла agentbankanew.doc присутствуют 3 гиперссылки.

Гиперссылка – это основа любого взаимодействия в интернете. Она может ссылаться на любой объект (веб-страницу, файл для загрузки, рисунок для просмотра), к которому вы можете перейти, нажав на неё.

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

Вставить гиперссылку элементарно. Выделяем любой текст, или объект и, нажав на правую кнопку мышки, выбираем «Гиперссылка». Кнопочку «Гиперссылка» можно найти также на панели инструментов «Стандартная», которая всегда на виду (Word 2003), или в верхнем меню «Вставка» (Word 2007).
В правом верхнем углу нажимаем «Подсказка» и вводим текст, который будет отображаться в виде подсказки при наведении указателя мыши на ссылку. Убедитесь в этом сами.

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

В продающей ссылке http://agent.privatbank.ru/branches/product/21/XXXX/ самые последние XXXX заменяются на ваш идентификационный номер (ID). Как получить идентификационный номер подробно описано в статье ШАГ 2. Создание собственного сайта и размещение его в интернете из цикла статей «Руководство по получению дополнительного дохода в Москомприватбанке в трёх шагах».

Чтобы добавить новую ссылку вы выделяете текст или объект левой кнопкой мышки, затем по нажатию правой кнопки мышки выбираете «Гиперссылка».
Чтобы изменить или посмотреть адрес существующей гиперссылки вы наводите на неё указатель мышки, не нажимая левой кнопки, и СРАЗУ ЖМЁТЕ ПРАВУЮ КНОПКУ МЫШКИ и выбираете «Изменить гиперссылку…».

Адрес ссылки можно увидеть также в самом низу Ворда или браузера при наведении на ссылку курсора мыши или около самой ссылки в виде подсказки (если отсутствует текстовая подсказка).

2) Вверху страницы мы создаём меню, где ссылаемся на все банковские продукты на страничке. Это делается для упрощения навигации по страничке и дополнительного удобства посетителя вашей странички. Для удобства навигации в редакторе Ворд (внутри страницы, а также между разными документами или веб-страницами) предусмотрена панель навигации «Веб-узел», на которой можно пользоваться стрелками для быстрого перехода, как в браузере при работе в интернете.

Чтобы сослаться на место внутри документа, мы делаем закладку, выделив любое место документа (слово, строку, картинку и т.д.).

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

3) Мы добавляем дополнительные страницы с более подробным описанием продукта, т.к. краткого описания на главной странице явно не достаточно, а писать большой текст описания сразу для всех продуктов – это дурной тон. Дизайн страниц с подробным описанием можно оставить похожим на главную страницу – всё по вашему усмотрению. Вы можете использовать готовую страницу из статьи ШАГ 2. Создание собственного сайта и размещение его в интернете цикла статей «Руководства по получению дополнительного дохода в Москомприватбанке в трёх шагах» с описанием флагманского продукта Приватбанка — кредитной карты «Универсальной», только в данном случае необходимо переименовать веб-страницу с описанием кредитки (с index.htm на kreditka.htm), т.к. мы ссылаемся на подробное описание кредитки с названем файла kreditka.htm. Подробные описания остальных продуктов сделаете сами, благо информации по ним достаточно.

4) Необходимо обратить внимание на информационное наполнение страницы (контент). Здесь стоит придерживаться общепринятых стандартов, а если проще, то правил хорошего тона. Пусть это будет приветствие в начале страницы, краткое описание организации (в нашем случае — банка). Вы можете, кстати, для информации о банке сделать отдельную страницу.

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

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

Окончательное сохранение документа в качестве веб-страницы

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

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

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

Для того, чтобы картинки из Ворда сохранялись в наилучшем качестве, в параметрах веб-документа перед окончательным сохранением выбираем во вкладке «Обозреватели» самую последнюю версию браузера Internet Explorer.

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

У вас уже есть готовая веб-страница, которую можно размещать в интернете, но есть один нюанс. Ворд не вставляет в веб-страницу один специфический элемент (так называемый, <!DOCTYPE>). На первый взгляд это не критично, но всё же у браузеров может возникнуть проблемы при интерпретации нашей веб-страницы (проблемы могут возникнуть и с поисковиками — без данного элемента поисковик может считать вашу страницу небезопасной, проверено на собственном опыте). Прочитайте выдержку из справочника:

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Таким образом, на основании этой информации, мы вставляем недостающую строчку в самый верх нашей веб-страницу (html-документа) в любом текстовом редакторе. Строчка следующая: <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>. На рисунке показано её место нахождения (в самом верху). На этом же рисунке можно увидеть основные элементы любой веб-страницы на примере пустого html-документа.

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

Не забывайте данную строчку вставлять в начало каждой веб-страницы.

На этом всё!

Подведём итоги

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

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