Как установить сайт на word

В Word для Интернета можно быстро вставлять веб-контент, например видео, формы, слайды и другие, из нескольких поддерживаемых источников, просто вставлять URL-адрес веб-контента в документ. Когда поддерживаемый URL-адрес вируется и обнаруживается как гиперссылка, он автоматически отображает соответствующий веб-контент в документе. Вы можете работать с содержимым (например, просмотреть видео), оставаясь в документе.

Все изменения в контенте источника автоматически обновляются в документе.

Поддерживаемые источники

Word для Интернета в настоящее время поддерживается встраив контент со следующих сайтов и служб. Число поддерживаемых источников растет. проверьте здесь, чтобы посмотреть обновленный список.

Youtube

• Условия использования

• Конфиденциальности

Microsoft Stream

• Условия использования

• Конфиденциальности

Microsoft Forms

• Условия использования

• Конфиденциальности

Microsoft Sway

• Условия использования

• Конфиденциальности

Vimeo

• Условия использования

• Конфиденциальности

Slideshare

• Условия использования

• Конфиденциальности

TED Talks

• Условия использования

• Конфиденциальности

Flipgrid Шорты

• Условия использования

• Конфиденциальности

Genially

• Условия использования

• Конфиденциальности

Wakelet

• Условия использования

• Конфиденциальности

Buncee

• Условия использования

• Конфиденциальности

«Вейзер»

• Условия использования

• Конфиденциальности

Pinterest (общедоступные пин-коды)

• Условия использования

• Конфиденциальности

Как это работает

Ниже кратко описано, как работает эта функция.

Встраить содержимое

При подклеивке к Интернету в документ в Word для Интернета URL Word для Интернета URL-адрес.

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

Совет: Если URL-адрес не будет автоматически показываться как гиперссылка, нажмите пробел или введите его, а затем дождийтесь, пока Word обнаружит его как гиперссылки. 

Отмена и повторное встраение

Если отменить действие в вставки (CTRL+Z), внедренное содержимое будет вставлено в гиперссылки.

Если вы повторить действие (CTRL+Y), гиперссылка снова станет внедренной веб-частью.

Вырезание и копирование внедренного содержимого

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

Поведение в Word для настольных компьютеров

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

Когда вы откроете документ в Word для Интернета, внедренное веб-содержимое будет отображаться как ожидалось.

Примечания: 

1. В некоторых местах документа не работает встраивка. Word для Интернета не разрешается вклеить веб-содержимое в списки, в headers and footers, comments, footnotes и концевые сноски.

2. Внедренное содержимое всегда отображается в новом абзаце Word для Интернета и не может быть больше.

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

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

1. Подготовьте, то есть скопируйте в буфер обмена ссылку, которую требуется вставить в текстовый файл.



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

   Обратите внимание! Ссылкой в документе Word может быть не только обычный текст, но и рисунок, изображение, фигура, текстовое поле, WordArt, SmartArt и некоторые другие объекты. Алгоритм действий, которые требуется выполнить в подобных случаях, ничем не отличается от рассмотренного далее.

   

   Далее можно пойти по одному из трех путей:

   Читайте также: Полезные сочетания клавиш для удобной работы в Microsoft Word

3. Какое бы из трех предложенных выше действий вы не выполнили, будет открыто окно «Вставка ссылки«. Вставьте в расположенную внизу строку «Адрес» скопированный на первом шаге текущей инструкции URL. Нажмите «ОК» для подтверждения и закрытия окна.
   

   Примечание: В строке «Текст», расположенной вверху этого окна, можно задать свое название для ссылки – текст, внутри которого она будет содержаться. Это полезно в тех случаях, когда изначально адрес добавлялся в пустое место документа, что тоже возможно. Справа же расположена кнопка, нажатие на которую позволяет добавить «Подсказку» — небольшое описание, демонстрируемое при наведении указателя курсора на ссылку в тексте.



Ссылка будет добавлена в указанное вами место документа, будь то текст, изображение или какой-либо другой элемент. Для перехода по ней необходимо зажать клавишу «Ctrl» и кликнуть по объекту левой кнопкой мышки (ЛКМ).

Если добавлялась подсказка, она будет показана вместо адреса во всплывающем окошке около текста-гиперссылки.

Из контекстного меню, вызываемого нажатием ПКМ по указанному месту, тоже можно открыть ссылку. Там же доступна возможность ее изменения, копирования и удаления.

Читайте также: Как удалить ссылки в документе Ворд

Еще статьи по данной теме:

Помогла ли Вам статья?

Содержание

• 1 Шаги
• 2 Советы
• 3 Предупреждения
• 4 Что вам понадобится
  • 4.1 Что нужно делать, чтобы создать сайт
    • 4.1.1 Рекомендации
• 5 Первые шаги по созданию сайта в Ворде
• 6 Продвинутые инструменты Ворда для украшения веб-страницы
• 7 Делаем полноценный веб-сайт
• 8 Окончательное сохранение документа в качестве веб-страницы
• 9 Подведём итоги

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

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

Шаги

1. 

   Загрузите Word.

2. 

   Напечатайте на странице «Homepage» (Домашняя страница).

3. 

   Нажмите «Файл» (File) > «Сохранить как веб-страницу» (Save as Webpage). В Office 2007 кликните по кнопке «Офис» (Office) > «Сохранить как» (Save As) > «Другие форматы» (Other Formats).

4. 

   Сохраните вашу страницу как index.html. Для Office 2007 поменяйте тип файла в меню «Сохранить как» (Save as type) на «Веб-страница» (Web Page).

5. 

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

6. 

   Добавьте немного дополнительного текста; попробуйте ввести, например, «Это моя домашняя страница».

7. 

   Почаще сохраняйте свою работу (просто нажмите на значок сохранения – Word запомнит документ как веб-страницу).

8. 

   Делайте то же самое при создании других страниц (прочитайте ниже, как сделать гиперссылку).

9. 

   Введите «Link to homepage» (Ссылка на домашнюю страницу) под текстом.

10. 

    Выделите текст.
11. 

    Кликните «Вставка» (Insert) > «Гиперссылка» (Hyperlink) (для всех версий)

12. 

    Поищите файл index.html.

13. 

    Найдя файл, выберите его и нажмите на кнопку «ОК».

14. 

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

15. 

    Вы можете добавить гиперссылку на другой сайт – в диалоговом окне «Вставить ссылку» (Insert Hyperlink) введите адрес веб-страницы в текстовом поле «Адрес» (Address).

16. 

    Продолжайте делать так, пока ваш сайт не будет готов!

17. 

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

Советы

• Сделайте свой сайт привлекательным с помощью разнообразных фотографий, ссылок и информации.
• Назовите страницы (за исключением главной) так, чтобы легче было запомнить.
• Изучите HTML.
• Получите хостинг. Никто не может увидеть ваш сайт, пока он не появится в интернете. Существуют бесплатные хостинговые сайты (это на самом деле простые ресурсы), а также профессиональные платные сервисы.
• Присмотритесь в сети к некоторым простым веб-сайтам, которые соответствуют тому, что вы пытаетесь сделать. Хотя вы не можете сделать динамический сайт как WikiHow или MSN.com в Word или Publisher – нужны слишком расширенные настройки (PHP, Client-Site Includes, ASP.NET и многие другие).
• Гораздо проще сделать сайт в Publisher, где представлены специальные веб-страницы дизайнеров.

Предупреждения

• Если вы планируете разместит свой сайт в интернете, будьте осторожны, чтобы не включить каких-нибудь личных данных, которые не намерены обнародовать в информации документа.
• Как отмечено в заголовке статьи, создание HTML с помощью любого продукта Microsoft Office, кроме Expression Web, по большей части плохая идея. Тот факт, что программа может сохранять файл как HTML, не делает ее программным обеспечением для веб-дизайна.

Что вам понадобится

• Компьютер
• Microsoft Office Word (все версии)

Информация о статье

Эту страницу просматривали 29 229 раза.

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

Рубрика Word

Также статьи о работе со страницами в Ворде:

• Как настроить поля страницы в Word?
• Как в Word отображать на экране сразу две страницы?
• Как в Word выделить страницу?
• Как делается зебра в Ворде?

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

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

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

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

При сохранения документа Ворд как веб страницы будет создан файл с расширением *.htm, и папка с таким же названием и добавлением *.files в конце. В htm файле хранится вся текстовая информация и html разметка документа, а в папке будут сохранены все вставляемые в документ объекты и другие вспомогательные файлы.

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

Курсы работы в Корде

Как сделать сайт в ворде

Как сделать сайт в ворде (Word)

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

Что нужно делать, чтобы создать сайт

1. Запускам Word.

2. Создаем меню.
Можно сделать так: Главная | Моя музыка | О сайте

Для этого, нажимаем «Вставка» — «Гиперссылка»
В появившемся окне в поле «Текст» пишем текст нашей ссылки – например «О сайте», в поле «Адрес» пишем текстом index1.htm,

Добавив текст, мы вставляем гиперссылки на старницу сайта

(рисунок 1)

Для других страниц пишем другие имена страниц — index2.htm, index3.htm, index4.htm или o-saite.htm, moia-musika.htm.

3. Ниже меню печатаем основной текст.

4. Вставляем рисунки.

5. Сохраняем полученную страницу, нажимаем «Файл» — «Сохранить как», а далее очень важно, выбираем имя файла index, а тип файла htm – НЕ ОДНИМ ФАЙЛОМ!!!

Сохраняем полученную страницу сайта

(рисунок 2)

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

Обратите внимание, если вы добавляли картинки, то вместе с веб страницей появится еще и папка images – в ней все вставленные вами рисунки.

Рекомендации

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

Спасибо за внимание.
Автор: Титов Сергей

Не все догадываются, насколько мощные инструменты по работе с текстом нам предлагает 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.

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

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

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

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

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

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

.

Цель работы: освоение приемов создания 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. Вернуться к «Папиной странице». Создать в ней внешнюю гиперссылку на сайт Московского университета. Для этого:

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

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

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

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

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

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

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

В конце статьи вы найдете видеоинструкцию по созданию сайта на WordPress.

Почему WordPress и Timeweb?

Это не просто реклама, а обоснованный выбор в пользу наиболее удачных продуктов. WordPress – популярная и бесплатная CMS, покрывающая задачи большинства веб-мастеров. Timeweb – недорогой, быстрый и надежный хостинг.

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

С базовым инструментарием определились, теперь к делу.

Настраиваем хостинг и домен

Для начала подготовим хостинг, выбрав тарифный план, установив на сервере CMS и купив свободный домен.

Регистрируем хостинг

Для начала надо обзавестись хостингом. Это вечно функционирующий сервер (компьютер), на котором будет располагаться ваш сайт. Благодаря хорошему хостингу, такому как Timeweb, ваша страница будет доступна тысячам пользователей круглосуточно.

• Заходим на официальный сайт Timeweb.
• Затем кликаем по кнопке «Хостинг» в левом верхнем углу.

• Выбираем пункт «Виртуальный хостинг». 

• Знакомимся с тарифами, выбираем подходящий и нажимаем на кнопку «Заказать».

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

• Потом регистрируем новую учетную запись. Указываем имя и адрес электронной почты.

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

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

Оплачиваем услуги хостинга

Несмотря на действующий тестовый период, сразу разберем процедуру пополнения баланса.

• Кликаем по иконке в виде кошелька в верхней части экрана.

• Затем указываем переиод аренды и выбираем дополнительные опции (если нужны).

• После этого выбираем удобный способ оплаты. Выбрав удобный способ, жмем на кнопку «Перейти к оплате».

• В случае с картой просто указываем свои данные…

• В случае с Apple Pay или Google Pay жмем на соответствующую клавишу и ждем инструкций от используемых браузеров.

После этого система приема платежей предложит вернуться в панель управления Timeweb, а деньги моментально поступят на счет.

Забираем бесплатный домен

Как я уже сказал ранее, при оплате сразу за год Timeweb дарит домен в зонах .ru или .рф в подарок. Правда, этот бонус нужно активировать.

• В боковой панели админки находим и открываем раздел «Бонусы и промокоды»

• Затем кликаем на кнопку «Активировать» напротив надписи «Бесплатный домен в зоне .рф…»

Тут же будет плашка для ввода промокодов со стороны.

Добавляем администратора домена

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

• Открываем меню «Домены и поддомены» в боковом меню.

• Жмем по ссылке «Администраторы доменов».

• Потом нажимаем на кнопку «Добавить администратора».

• Вводим свои данные (либо данные заказчика, который будет владеть сайтом).

• Потом нажимаем на кнопку «Создать».

Должно получиться вот так. Я вводил данные лишь для примера.

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

Регистрируем домен

Теперь нам нужно заиметь собственный домен. Это будет адрес, по которому люди будут заходить на наш ресурс.

• Опять открываем меню «Домены и поддомены».

• Кликаем по кнопке «Зарегистрировать домен».

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

• Потом нажимаем на ссылку «…к основному сайту».

• Выбираем вариант «Не привязывать».

• И сохраняем эту настройку. Полдела сделано.

• Убираем галочку с платного сертификата. Нам он пока не нужен.

Должно быть так.

• Потом нажимаем на фразу «Сумма к оплате», чтобы указать вариант оплаты бонусами (появится соответствующее всплывающее меню).

• Перед нами появится список доменов. Кликаем по вновь созданному.

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

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

Устанавливаем WordPress

Платформа для нашего сайта готова, осталось только установить систему управления WordPress.

• Сначала открываем вкладку «Каталог CMS» в боковом меню.

• Выбираем там WordPress.

• Потом нажимаем на кнопку «Установить приложение».

• В появившемся окошке выбираем домен, на который хотим установить WordPress (в моем случае будет тестовый).

• Затем жмем по кнопке «Начать установку». Процесс займет несколько секунд.

• Фиксируем логин и пароль.

Их, если что, отправят на указанный при регистрации адрес.

• Потом открываем меню «Сайты» в боковой панели.

• Ищем там вновь созданный ресурс на базе WordPress и заходим в него.

Собственно, вот и сайт. Совсем простенький и не самый красивый, но рабочий. Теперь переходим к творческому процессу. Будем превращать безликий WordPress-ресурс во что-то свое.
 

Настраиваем сайт на WordPress

Теперь из административной панели Timeweb мы переползаем в админку WordPress и начинаем работать с ней.

Как зайти в админку WordPress

Тут все просто. Чтобы попасть в админку:

• Надо в адресную строку браузера ввести *название сайта без домена*/wp-admin. Такого рода ссылка приведет в админку WordPress.

• Потом вводим реквизиты админки, которые нам отправили по почте.

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

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

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

• Потом открываем настройки экрана.

• Убираем галочки везде, кроме пункта «На виду». Он пригодится.

Будет как-то так. Чистенько и не слишком пугающе.

Устанавливаем свежую версию WordPress

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

• Нажимаем на ссылку «Пожалуйста, обновитесь» в верхней части экрана.

• Потом ищем большую синюю кнопку «Обновить сейчас» и кликаем по ней.

• Через несколько секунд, когда на экране загорится стартовая страница WP, переходим в меню «Консоль» в левом верхнем углу.

• Наведя на него курсор, мы увидим, что рядом со словом «Обновления» висит красный кружок с цифрой. Это количество доступных обновлений. Переходим в это подменю.

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

• Выбираем плагины и темы, которые хотим обновить, поставив напротив них галочки.

• Потом нажимаем на кнопку «Обновить…»

Больше никакие обновления не нужны. Теперь вы знаете, как установить свежие версии дополнений в свою CMS.

Удаляем ненужные темы

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

• Сначала наводим курсор на меню «Внешний вид».

• Потом переходим в подменю «Темы».

• Кликаем по теме, которую хотим стереть.

• Нажимаем на кнопку «Удалить» в правом нижнем углу.

• И еще раз подтверждаем, что хотим это сделать, но уже в браузере.

Повторяем это, пока не сотрем все ненужные темы (по сути, все, кроме одной).

Заказываем SSL-сертификат

Не совсем по пути, но надо сразу заказать SSL-сертификат. Это необходимо, чтобы обеспечить безопасное соединение между нашим сайтом и пользователями, решившими его посетить. Сейчас запускать сайт без сертификата безопасности – опасный моветон. 

• Возвращаемся в панель управления Timeweb и открываем меню «SSL-сертификаты».

• Затем кликаем по ссылке «Заказать».

• Выбираем бесплатный сертификат.

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

• А потом выбираем домен, которому он достанется.

Уже через несколько часов сертификат будет готов и начнет действовать. А мы в это время продолжим заниматься доработкой сайта. Работы еще полно.

Устанавливаем тему 

Раз уж мы удалили ранее все темы, надо их чем-то заменить. Тем очень много, вы сами это увидите. Исключительно для примера я буду использовать Astra. Она минималистичная и приятная в целом.

• Переходим в раздел с темами, как мы это уже делали ранее.

• Кликаем по кнопке «Добавить».

• Оказавшись в библиотеке тем, ищем поисковую строку.

• Вводим в нее слово Astra.

• Ищем ту самую тему и нажимаем на кнопку «Установить».

• А потом еще и активируем.

• Ну и нажимаем на ссылку «Перейти на сайт», чтобы убедиться, что тема установилась и активировалась.

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

Устанавливаем плагин Really Simple SSL

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

• Жмем на кнопку WordPress в панели управления CMS.

• Переходим в консоль.

• Выбираем подпункт «Добавить новый» в меню «Плагины».

• Ищем в открывшемся окне поисковое поле и вводим туда название плагина Really Simple SSL.

Вот так он называется.

• Потом нажимаем на кнопку «Установить».

• Активируем.

После этого у вас на экране появится предложение установить текущий SSL-сертификат. Соглашаемся с этим и ждем. Система попросит заново ввести логин и пароль администратора. Уже после этого сертификат вступит в свои права и начнет работать. С этой минуты соединение между клиентом и вашим сайтом будет безопасным. В глазах поисковых систем ваш сайт тоже станет более подходящим для продвижения и выдачи на высоких позициях.

Как работать с сайтом

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

Добавляем статью в свой блог

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

• Сначала наводим курсор на кнопку «Добавить» в верхней части экрана и выбираем опцию «Запись».

• Закрываем обучалку с основной информацией о редакторе WordPress (мы все сейчас будем подробно разбирать).

• Тут все интуитивно понятно, прописываем заголовок вверху и основной текст внизу.

Вот как это может выглядеть.

В редакторе всегда светится значок в виде плюсика. Это кнопка для добавления дополнительных материалов и разметки. Разрывы страницы, абзацы, разные типы заголовков, изображения… Список элементов огромный. Только не пугайтесь обильного количества опций. Все проще, чем кажется.

Все опции можно посмотреть, нажав на вот эту стрелочку.

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

Добавляем фото на сайт

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

• Снова нажимаем на плюсик.

• Среди предложенных вариантов выбираем «Изображение».

• В появившемся окошке нажимаем на кнопку «Загрузить».

• Выделяем картинку и нажимаем «Выбрать» (ОК).

Готово. Теперь справа появится блок с настройками изображения. Можно поменять разрешение, например. Или подписать альтернативный текст с ключевыми словами и пояснениями.

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

Когда мы добавляли картинку, там было еще две опции. Вторая позволяет загрузить сразу несколько картинок на сервер, а потом добавлять их в статью по ходу дела. Третья позволяет добавить картинку, которая уже хранится на другом сервере.

Добавляем другие виды контента

Процедура почти такая же. Я просто пробегусь по некоторым типам контента.

Галерея

Галерея – серия картинок, объединенных в один блок.

• Выбираем соответствующий пункт в меню.

• Потом выбираем изображения, которые нужно объединить в галерею.

Обложка

Обложка – это фон для текста. 

• Выбираем пункт «Обложка», прежде нажав на плюсик.

• Нажимаем кнопку «Загрузить», чтобы сделать обложку уникальной.

• Выбираем картинку, которая станет обложкой.

Цитата

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

• Кликаем по плюсу и добавляем блок «Цитата».

• Вписываем текст, который будет выделен цитатой.

Заглавное изображение

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

• Открываем пункт меню «Изображение записи» в правой части экрана.

• Потом нажимаем на кнопку «Установить изображение записи».

• Загружаем подходящую картинку.

• Потом выбираем ее в библиотеке WordPress и устанавливаем в качестве основной.

При желании ее можно отредактировать. Уменьшить размер или перевернуть прямо в CMS.

• Снова открываем то же меню и кликаем по нашей обложке.

• Выбираем пункт «Редактировать».

• Редактируем картинку с помощью инструментов, доступных выше.

• А потом сохраняем.

Это все, что я хочу сказать по контенту. Понятное дело, типов контента десятки, а с плагинами их становится еще больше, но эта тема тянет на отдельную статью. Так что разберем ее как-нибудь в другой раз. 

Публикуем нашу статью

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

• В редакторе статьи нажимаем на кнопку «Опубликовать».

• Потом кликаем по ссылку «Посмотреть запись».

И на этом все. Статья опубликована. Теперь ее смогут увидеть все посетители сайта.

А вот так она будет выглядеть на главной странице сайта. В одном списке со всеми остальными материалами.

Редактируем разметку

Теперь покажу, как можно изменить внешний вид сайта. Покажу это на примере изменения разметки.

• Для начала нажимаем на кнопку «Настроить» в верхнем левом углу. Она отправит нас в режим редактирования внешнего вида страницы.

• Выбираем вкладку «Общие» в боковой панели.

• Потом вкладку «Контейнер».

• Затем кликаем по блоку под словом «Разметка».

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

Так сайт будет выглядеть более симпатично.

Ищем и обрабатываем изображения

Мы уже работали с изображениями и знаем, как загрузить их на сайт, но не знаем, где их взять и как обрабатывать. Дело в том, что далеко не все из нас фотографы, а просто так тащить фотки из Гугла опасно. Это чревато реальным наказанием в виде большого штрафа. Поэтому нужен легальный способ добывать красивые изображения. Например, использовать бесплатный фотосток Unsplash.

• Заходим на сайт Unsplash.

• Вводим в поиск любой запрос. В моем случае было слово «cats», просто потому что мне захотелось на них полюбоваться. В вашем случае запрос будет соответствовать тематике статьи.

• Находим понравившееся изображение, наводим на него курсор и жмем по специальной кнопке для загрузки.

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

• Заходим на сайт Tinypng и на главную страницу перетаскиваем картинки, которые хотим использовать в статье.

• Ждем, пока завершится процесс компрессии, и нажимаем на кнопку Download All.

Теперь у нас есть то же изображение, но уже вдвое легче. И все это без видимой потери качества. Никаких компромиссов.

Настраиваем рубрики, страницы и меню WP

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

Создаем статичные страницы

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

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

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

• Придумываем заголовок и пишем текст.

• И потом жмем «Опубликовать».

После этого мы получим ссылку на новую страницу. 

Она появится в списке страниц в правом верхнем углу. Там уже будет пример по умолчанию и добавится вновь созданная страница. Можно переключаться между ними.

Если вернуться назад и в меню «Страницы» выбрать «Все страницы», то перед вами появятся все доступные на сайте страницы. Тут можно их редактировать, отключать, удалять. Интерфейс интуитивно понятный, не отличается от интерфейса управления записями.

Создаем рубрики

Рубрики – это категории статей, созданные для ориентирования на сайте. Объясню на примере: представьте, что ваш блог посвящен разного рода электронике. Вы пишете буквально обо всем. Но люди к вам приходят читать не обо всем, а, например, только об Айфонах. Тогда можно создать рубрику Apple. А внутри нее еще и рубрику «Айфон». Получится, что человек, посетивший страницу, сможет сразу перейти к статьям, посвященным этому гаджету. 

• Наводим курсор на пункт «Записи», потом выбираем подпункт «Рубрики».

Далее надо задать параметры для рубрики.

1. Даем любое имя (зависит от того, о чем пишете у себя в блоге).

2. Указываем ярлык (это текст для ссылок).

3. Выбираем родительскую рубрику (это пригодится, когда будем создавать подрубрики).

4. Коротенькое описание, чтобы понимать, о чем тут вообще идет речь.

5. Пишем описание и нажимаем на кнопку «Добавить новую рубрику».

Все рубрики появятся справа.

Их можно менять и удалять так же, как статьи и другие материалы. Интерфейс в WordPress вообще мало где меняется.

Давайте сделаем подрубрику iPhone, чтобы было понятно, как это работает.

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

Затем можно изменить ярлык и название.

Теперь давайте укажем, к каким рубрикам относятся уже опубликованные статьи. Это, конечно же, можно сделать во время написания статьи, но и такой вариант подходит.

• Открываем список записей.

• Кликаем по кнопке «Свойства» под статьей, рубрику которой хотим поменять.

• Ставим галочку напротив нужной рубрики.

• Потом нажимаем «Обновить».

Проверяем, сменились ли рубрики, и радуемся, если все получилось.

Теперь надо дать пользователям доступ к рубрикам.

Создаем меню

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

• Наводим курсор на пункт «Внешний вид» и выбираем подпункт «Меню».

• Вводим название будущего меню и создаем его.

• Ставим галочку напротив страниц, которые хотим добавить в меню, и напротив пункта «Основное меню».

• Потом то же самое делаем с рубриками.

• Не забываем это все добавить во вновь созданное меню.

• А потом нажимаем «Сохранить меню».

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

• Снова идем в настройки нашего меню и слегка сдвигаем рубрику iPhone под рубрику Apple (тянем мышью). 

Логично и красиво. А еще куча свободного места появилась на главной странице.

Итак, на этом этапе мы разобрались со структурой. С тем, как ее можно менять, и с тем, какой примерно она должна быть. Теперь серьезнее поработаем над визуальной составляющей. Сделаем сайт еще красивее, чем он есть сейчас. А также скорректируем основные настройки CMS.

Меняем параметры WordPress

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

Сначала открываем основные параметры WordPress, зайдя в соответствующее меню.

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

1. Поменять название.
2. Сделать уникальное описание.
3. Указать корректный адрес электронной почты.
4. Указать язык.
5. Выставить часовой пояс.
6. Настроить формат времени.

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

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

Сохраняем изменения и переходим к теме.

Настраиваем тему Astra

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

Переходим к настройкам.

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

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

Общие настройки

Сначала откроем общие настройки. Внутри есть еще четыре вкладки, в которые можно зайти. Рассмотрим все. 

Типографика

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

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

На скриншоте видны «Подзаголовок 2» и «Подзаголовок 4».

Цвета

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

Если что, WordPress предупредит, когда вы переборщите и текст на вашем сайте станет откровенно нечитаемым (а люди придут его читать). Ориентируйтесь на мнение WP, если хотите, чтобы посетителям было приятно находиться на странице.

Можно сделать так, если хотите погубить визитеров.

Контейнер

В контейнере уже были. Там можно изменить тип разметки страницы. Лучшее мы уже не сделаем. Другие варианты только ухудшают внешний вид страницы.

Кнопки

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

Шапка

Выходим из подраздела и возвращаемся на уровень выше. Теперь нам нужна категория «Шапка». Мы будем править тут только основную. Тут есть пара важных вещей, на которые стоит обратить внимание.

Айдентика сайта

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

• Просто нажимаем «Выбрать логотип» и загружаем подходящую картинку.

• Нажимаем «Загрузить файлы».

• А потом «Выберите файлы».

И все. Потом можно подкрутить ширину.

Кошка с копибарой тоже подойдут, если их красиво нарисовать.

Во-вторых, фавиконка. Это значок сайта, который видно в поисковике и на вкладках браузера.

• Создаем себе фавиконку.
• Потом нажимаем на кнопку «Выберите иконку сайта».

• Нажимаем «Загрузить файлы».

• Потом «Выберите файлы».

У меня будет вот такой смайлик. Ясное дело, вам лучше подумать над чем-то более привлекательным и креативным. Она все же должна ассоциироваться с вашим блогом.

Основные шапка и меню

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

У меня параметров побольше. Можно тонко настроить визуальную репрезентацию меню, так сказать.

Хлебные крошки

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

Блог

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

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

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

Аналогичные настройки есть и для тела статьи. Причем находятся они в том же разделе. Вы легко их найдете.

Сайдбар

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

Можно вставить туда любое меню (мы уже создавали одно, можете повторить или создать новое и встроить его в боковую панель).

Футер

Это противоположность шапки, то есть нижняя часть страницы. Ее еще частенько кличут подвалом. Туда попадает много интересной информации и полезных ссылок.

Но чаще там оказывается какая-то юридическая информация, на которую 99% посетителей даже не обращает внимания, что неудивительно – нудятина же.

Вы можете поступить иначе и встроить туда виджеты. Причем виджетом может выступать что угодно: контент с других сайтов, картинки, видео, песни, мини-приложения, ссылки, куски других страниц. Если ввести в Google что-то вроде «Виджеты для WordPress», то получите выдачу с сотнями сторонних виджетов. Многие могут оказаться действительно полезными, но настраиваются они не здесь. Тут только включаются.

Для этого надо сделать следующее:

• Выбрать разметку справа.

И внизу тут же появится намек на виджеты. Пока без них, правда.

Еще там есть нижний колонтитул. Туда можно вписать любой текст. Ну или как раз вставить ссылку на свою политику конфиденциальности.

А можно просто написать «Привет».

Меню

Есть такой пункт, но он повторяет тот, в котором мы уже побывали. Мы с вами уже настроили меню и знаем, как его отредактировать. Я не вижу смысла повторяться на эту тему.

Виджеты

Вот и виджеты. Мы только что о них говорили. Сейчас быстро разберемся, как их добавлять.

• Выбираем область для виджетов. Можно любую.

• Потом нажимаем на кнопку «Добавить виджет».

• Выбираем виджет, который хотим добавить.

Наслаждаемся добавленными виджетами. У меня тут календарь и картинка, причем в одной области. То есть в одну область можно закинуть несколько виджетов, но перебарщивать не стоит. Пусть виджеты приносят пользу, а не дисбалансируют дизайн страницы.

Настройки главной страницы

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

Такие варианты становятся доступны, если все-таки надумаете что-то поменять.

Дополнительные стили

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

Настройки страниц с помощью плагина Elementor

Собственно, вся возня выше была для установки базиса. Это такой стандартный сайт, на котором можно размещать статьи и другие материалы. Вполне рабочий вариант, даже приятный визуально. Но можно пойти дальше и без знаний кода наворотить себе сайт гораздо красивее. Для этого есть отличный плагин Elementor.

• Открываем меню плагинов в боковой панели и выбираем пункт «Добавить новый».

• Ищем плагин Elementor, устанавливаем и активируем.

• Потом нажимаем на кнопку «Добавить» и выбираем вариант «Страницу».

• Ищем вверху синюю кнопку «Редактировать в Elementor» и нажимаем на нее.

• Кликаем на «Начать».

• Пропускаем обучение и переходим к регистрации в сервисе Elementor, чтобы подключить свой WordPress к нему.

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

• Кликаем по иконке в виде папки в правой части окна.

• Выбираем шаблон. Можно любой доступный в бесплатной версии.

• Потом нажимаем на кнопку «Вставить».

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

Можно добавить не целую страницу, а отдельные куски. Допустим, если вам нужна FAQ-секция или кусок с информацией о команде, работающей над сайтом.

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

На этом все. Так работает Elementor. При желании можно купить Pro-подписку и получить доступ к сотням профессиональных, красиво оформленных тем. Это в разы упростит создание сайта и сделает его довольно серьезным на вид.

Подключаем к своему сайту рекламу

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

Многим кажется, что это техническая магия, что это сложно и долго, но на деле все не так. Подключить рекламу и начать получать копеечку можно в кратчайшие сроки.

Находим партнерскую программу

Это первая и, на самом деле, самая сложная часть подключения рекламы. Нужно найти партнерскую программу. Для этого придется зарегистрироваться в сервисе наподобие AdSense или Admitad. Второй вариант вполне ничего. Там есть партнерские программы от М-Видео, Wargaming, Связного и Timeweb. Можно подключить их баннеры. Главное, пройти модерацию. Ваш сайт проверят и дадут возможность сотрудничать с компаниями. Вы начнете приводить к ним новых посетителей, а они вам за это предложат небольшое (или очень большое) вознаграждение.

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

Устанавливаем Ad Inserter

Чтобы встроить код в свой блог, скачаем специальный плагин для WordPress.

• Открываем меню плагины и выбираем пункт «Добавить новый».

• Вписываем в поисковое поле слово Ad Inserter.
• Потом нажимаем «Установить» рядом с названием плагина.

• Потом нажимаем на кнопку «Активировать».

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

Подключаем рекламу к сайту

Начинаем встраивание баннеров.

• Открываем настройки WordPress и выбираем там Ad Inserter.

• Выбираем один из доступных 16 блоков с будущей рекламой.

Вот как можно выглядеть код с рекламой.

• Ставим галочки на тех секциях сайта, в которые мы хотим встроить рекламу.

• Сохраняем настройки, нажав на соответствующую кнопку.
• Возвращаемся в консоль, выбираем пункт «Внешний вид» и переходим в подпункт «Виджеты».

Здесь будет три секции:

1. Установленные виджеты.
2. Элементы сайдбара.
3. Виджеты в футере.

• Мы перетаскиваем виджет Ad Inserter в панель «Основной сайдбар».

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

Вот так будет выглядеть баннер. В моем случае – это выдуманная акция. У большинства компаний реклама сейчас более привлекательная.

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

Не используйте такую гигантскую рекламу никогда. Это кошмар.

• Еще закинем рекламу в футер. Пусть будет.

• Укажем расположение рекламы в других участках сайта.

• Привяжем рекламный баннер к потолку сайта, чтобы он не исчезал при скроллинге. Поставим для этого галочку Sticky.

Вот как это выглядит в динамике.

Чтобы было удобнее настраивать расположение рекламы, можно нажать на кнопку Ad Inserter. Она сразу же проявит все возможные позиции и предложит установить там рекламу.

Вот одна из возможных позиций.

Оно настраивается вот в этом меню.

Вот какие варианты доступны при настройке в Ad Inserter

Реклама не просто готова, мы еще и распихали ее по всему сайту. Можно спокойно наполнять сайт и получать деньги. 

Разыскиваем контент для сайта

Чтобы зарабатывать деньги с партнерских программ, нужно привлекать большую аудиторию. А чтобы привлечь аудиторию, нужно сделать сайт, который ее заинтересует. Для этого нужен контент. Хороший во всех смыслах, грамотный. Тот, который интересно читать. И тот, который соответствует техническим требованиям поисковиков.

Такой можно писать самому. Или можно воспользоваться услугами копирайтеров.

Где искать статьи для блога WordPress?

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

Text.ru – относительно популярная площадка. Тут много людей и бесплатные инструменты для проверки текстов.

Вот как выглядит список востребованных авторов на Text.ru.

Advego – мене известная площадка, но очень строгая. Обычно авторы тут посильнее, но и подороже.

eTXT – наверное, самая масштабная площадка в РФ. Можно найти сотрудников по самым разным критериям. Пользовательская база реально очень большая.

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

Настраиваем аналитику

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

Подключаем Яндекс.Метрику

Нам понадобится очередной плагин.

• Открываем меню «Плагины» и нажимаем на «Добавить новый».

• Ищем Яндекс.Метрику и скачиваем соответствующий счетчик.

• Потом открываем настройки установленного плагина.

• Видим пустое поле. Заходим на сайт Яндекс.Метрики, регистрируем аккаунт.

Где взять счетчик Метрики?

Теперь нам нужен код для сбора информации о посетителях.

• Затем нажимаем на кнопку «Добавить счетчик».

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

• Потом создаем счетчик.

• Копируем код со страницы Яндекс.Метрики.
• Вставляем его в пустое окно плагина и сохраняем.

Готово. Теперь на сайте Яндекс.Метрики можно посмотреть всю информацию о вашей аудитории. Очень полезно для внесения изменений в работу сайта и адаптации под нужды клиентов. Это позволит нарастить прибыль.

Заключение

На этом, пожалуй, все. Мы сделали сайт на Worpress, оформили его. Все проверили. Сделали безопасным. Настроили аналитику. Подключили рекламу, чтобы получать деньги. Что еще нужно? Получше разобраться в SEO и нанять хороших копирайтеров. Тогда успех обеспечен. 

Видеоинструкция