Как сделать подписную страницу в программе Nvu (Kompozer)

книга6

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

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

Подготовка

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

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

У меня это папка называется my_first_blog — мой первый блог. Как сделать подписную страницу

Важно! имя папки пишем маленькими латинскими буквами с нижним подчёркиванием.

Во — первых, мы эту папку будем размещать  в корневом каталоге блога, а там это соблюдается строго.

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

Поделюсь опытом. Я, в названии папки my_first_blog, нечаянно перед словом blog после подчёркивания поставила пробел. Визуально это практически незаметно, но при  воспроизведении страницы через браузер вместо русского алфавита выдавались иероглифы. Я потеряла кучу времени, пока нашла эту ошибку. Так что будьте внимательны.

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

Как сделать подписную страницу

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

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

Как создать новую рассылку можно прочитать здесь.

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

Программа Nvu

Программа Nvu (Kompozer — новое название этой программы) — это бесплатный Html — редактор. Он позволяет делать Web — документы как обычном, привычном для обычного человека режиме, так и в Html — режиме. Это очень удобно, так как всегда можно подправить цвет или выравнивание объекта с помощью кода.

Как сделать подписную страницу

Интерфейс редактора очень напоминает интерфейс  знакомого многим текстового редактора MS Word. Практически то же основное меню и та же панель инструментов.

Как сделать подписную страницу

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

Создание подписной страницы

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

Как сделать подписную страницу

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

Как сделать подписную страницу

Прежде чем заполнять страницу, мы её сохраним в папку, которую мы создали, с именем Index.html — Файл → Сохранить как

Как сделать подписную страницу

Теперь можем воплощать  свой макет в электронный документ.

Как сделать подписную страницуПодписная страница обязательно должна содержать:

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

Нам необходимо научиться вставлять изображение, Html — код и ссылки. Так же поработать с цветовым оформлением.

Изображение вставляется Вставка → Изображение → Выбираем файл → Устанавливаем галочку в окно Относительный URL→Вписываем Альтернативный текст → Если нужно, корректируем размеры → ОК

Как сделать подписную страницу

Изображение вставится туда, где был установлен курсор.

Чтобы сделать изображение инфопродукта и подписной страницы на одном уровне, выполняем следующее: курсор устанавливаем в нужное место и вставляем таблицу,

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

В левую ячейку устанавливаем курсор и вставляем изображение нашей 3D — обложки. Все изображения заранее сохраняем в папку images.

Затем перемещаем курсор в левую ячейку таблицы. Вставляем Html — код подписной формы.

Как сделать подписную страницу

Таким образом в левой ячейке должна появиться подписная форма. Лучше проверить, как будет отображаться всё это в браузере.

Для этого необходимо сохранить документ, нажав на дискету на панели инструментов. Затем заходим в папку и открываем файл Index.html в любом браузере. если всё нормально, возвращаемся в программу Nvu и продолжаем работу над страницей.

У меня на подписной странице верхний блок сделан в фотошоп заранее и вставлен, как изображение.

Как сделать подписную страницу

Далее просто написан текст в редакторе. Затем в таблице, как я писала выше вставлена обложка и форма подписки.

Затем прописаны выгоды для клиента.

Как сделать подписную страницу

Галочки приготовлены заранее в папке images и вставлены, как картинки.

Ниже можно вставить кнопки социальных сетей.

Где брать Html — код можно прочитать здесь. Далее вставляем этот код в нужное нам место точно так же, как вставляли код формы подписки.

Как сделать подписную страницу

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

Давайте сохраним документ, нажав на дискетку в панели инструментов посмотрим, что у нас получилось.

Для этого заходим в папку и открываем файл Index.html в любом браузере.

Как сделать подписную страницу

Если страница отображается нормально и мы довольны её дизайном, нам необходимо её разместить на своём блоге, то есть «закачать на сервер.

Как «закачать» подписную страницу на сервер

Это можно делать несколькими способами, но я эту процедуру делала с помощью программы Total Commander через FTP — сервер (File Transfer Protocol — протокол передачи файлов).

Для этого открываем программу Total Commander, устанавливаем соединение с сервером выбираем вкладку FTP в строке основного меню программы. Появляется окно Соединение с FTP — сервером.  Если у вас есть созданные соединения, просто выделяем одно из них и нажимаем кнопку Соединиться. Если нет соединений, необходимо нажать кнопку Добавить и создать соединение. Информацию можно прочитать здесь.

Как сделать подписную страницу

После того, как соединение установлено, мы видим следующую картинку: две панели. Правая — это жёсткий диск вашего компьютера, а справа диска сервера, где мы видим корневой каталог Вашего блога.

Как сделать подписную страницу

Далее в левой панели находим папку, куда сохранена Ваша подписная страница, выделяем её и нажимаем Кнопку F5

Как сделать подписную страницу

Всё, процесс завершён.Подписная страница установлена на Вашем блоге.

Проверить, как страница отображается очень просто. Достаточно ввести в командную строку её адрес: http://sorokinairina.ru/my_first_blog/index.html, где http://sorokinairina.ru — это имя Вашего  блога, my_first_blog — имя папки, куда сохранена подписная страница, а index.html — сама подписная страница.

Как сделать подписную страницу

Как видим всё отображается корректно.

Итак, процесс завершён. Подписная страница сделана и установлена на блоге.

Тема непростая. Если будут вопросы, пишите в комментариях или на почту.

С уважением к вашим успехам, Ирина.

Новости блога

Это Вы ещё не читали!

10 comments

  1. Ирина, здравствуйте! Большое спасибо за полезную статью! Она помогла мне создать мою подписную страницу.
    С уважением, Алина Таранец, автор блога ПУТИ К ЗДОРОВЬЮ

    • Алина, добрый день. Очень приятно, что Вам оказалась полезной моя статья. Обязательно посмотрю Вашу подписную страницу. С уважением,Ирина.

  2. Ирина, большое спасибо за подробную информацию. Для тех, кто не знаком с основами HTML и CSS этот вариант просто идеальный

  3. Ирина, всё здорово написано, по шагам.

  4. Спасибо за такую нужную статью, у Вас много полезной информации,буду заходить к вам почаще, подписался на получение новостей от Вас. Хотел подсказать, у Вас ошибка в разделе «мой видеоканал» отсутствует буква о в фамилии. С уважением, Александр!

    • Александр, программа Kompozer действительно очень полезна. Спасибо за подсказку. С уважением, Ирина.
      У Вас очень интересный блог, только без карты сложно ориентироваться.

  5. Спасибо за информацию. Для меня оказалось очень своевременно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика