Как быстро создать страницу подписки?


Игорь Козлов | 2011-05-01 | 34 комментария

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

На это я скажу, что было бы неплохо, если бы вы понимали язык гипертекстовой разметки. Это знание пригодится вам ещё не раз. Тем не менее, у нас сейчас не курс по изучению html, задача перед нами следующая:

Как быстро создать страницу подписки?

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

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

Для того, чтобы сделать нечто подобное и вам, скачайте вот этот архив на свой компьютер. Распакуйте его. В нем вы увидите два файла: index.html, style.css. и папку img. Для того, чтобы сделать на основе этого шаблона свою подписную страницу, вам нужно будет:

  • В файле index.html заменить мой текст на свой.
  • В этом же файле заменить код формы подписки.
  • Заменить мои картинки в папке img на свои.
  • Если есть необходимость изменить фон страницы, размер шрифтов, сделать это в файле style.css

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

Самое первое, давайте уясним, роль документов архива. Файл index.html – это сама страница с текстом и кодом html. Папка img – папка для хранения картинок. Файл style.css – это таблица стилей. Назначение её в том, чтобы управлять кодом html.

Например, мне нужно изменить размер шрифта страницы. Как это можно сделать? Можно сделать в странице index.html, изменяя атрибуты каждой строки. А можно одним кликом в файле style.css.

Читайте также:  Как создать первый сайт

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

Qwertypay-Заработок в партнёрках!
Qwertypay – Агрегатор партнерских программ. Регистрируйся и зарабатывай!

Итак, с чего начинаем создание страницы подписки?

Открываем страницу index.html – с помощью веб редактора FrontPage, Dreamweaver или бесплатного kompozer. Поскольку дистрибутив FrontPage, Dreamweaver сравнительно большой, я думаю, что и для наших целей вполне хватит программы kompozer.

Поэтому скачиваем kompozer. (6.0 мб), русскую версию и инсталлируем.

Как создать страницу подписки с помощью kompozer

Далее через пункт меню (File – open File) открываете файл index.html из скачанного архива subscribe.rar. Итак, страница загружена в программу и готова к редактированию. Но давайте прежде познакомимся с вкладками, которые стандартны для многих визуальных вебредакторов.

редактирование страницы подписки

Первая вкладка Normal – здесь мы можем редактировать страницу, просто переписывая текст, изменяя размеры объектов (таблиц, картинок). Для этого нужно выделить нужный объект и, взявшись за его границы, изменить размер. До кода — доступ в этой вкладке мы не имеем. Однако нам этого пока и не надо. Вписываете свой текст,  абзац за абзацем. Таким образом, у вас должна появится уже страница со своим текстом.

В общем, редактирование во вкладке Normal очень схоже с редактированием текста в Worde или с редактированием в визуальном редакторе блога. Думаю, что проблем у вас с этим не будет.

Во вкладке Normal вы можете также изменить цвет текста, размер шрифта и т.д. Замечу, однако, что в таком случае, вы не затрагиваете редактирование файла style.css. Но это вполне допустимо, так как вы имеете дело всего лишь с одной страницей, а не с многостраничным сайтом.

Тем не менее, кто знаком с каскадными таблицами стилей, вы можете изменить гиперстекстовую разметку с помощью файла style.css. Используем для этого кнопку Cascades

Читайте также:  Eмейл маркетинг, 41 совет!

использование css при создании страницы подписки

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

Итак, в принципе всю работу по подгонке шаблона под себя можно сделать во вкладке Normal

Как изменить и подставить нужные картинки? Если вас устраивает их место расположения в шаблоне, то все что вам нужно сделать это:

  • вставить свою картинку в папку img.
  • удалить мою картинку из шаблона.
  • вставить своё изображение через пункт меню open.

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

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

Вторая вкладка HTML TAGS – вряд ли вам пригодится на данном этапе знакомства с редактированием шаблона. Здесь вы визуально увидите имеющиеся в шаблоне теги, которым можно прописывать свои атрибуты.

Третья вкладка Source – нам понадобится для изменения кода формы подписки. Находим код начинающийся строкой <!-- SmartResponder.ru subscribe form code (begin) -->  и заканчивающийся <!-- SmartResponder.ru subscribe form code (end) -->

Начало этого кода на 85 строке и окончание на 165. Вместо него вбиваете код своей формы подписки, который можно получить в своем аккаунте сервиса Смартреспондер.

Здесь же в Source меняем внешние ссылки, а также значения description, keywords. Прописываете новый title для своей страницы. Это строки 4,9 и 11.

Читайте также:  Как создать первый сайт

Скажу, что просмотр кода в этой вкладке несколько неудобен, мал размером (издержки бесплатности). Поэтому для просмотра кода можете воспользоваться обыкновенным блокнотом или Notepad++. Тем не менее, все можно сделать и в komposer.

Как изменить фон цвет фона страницы? Открываете Cascades – вкладку background , кликаете на тег body, изменяете цвет, кликаете ok!.

Изменение фона страницы подписки в программе kompozer

Здесь же можно изменить размеры заголовков и т.д. Одним словом – экспериментируйте и изучайте. Все ваши действия будут отображаться в окне Normal.

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

Если вы обратили внимание, подписка на аудио курс «Прибыльный блог» сделана точно также, как и эта, о которой шла только что речь. (P.S. Когда-то была... Сейчас другая.)

Итак, когда вы подогнали шаблон под себя, у вас должны быть все те же: файлы index.html, style.css и папка img.

Теперь вам нужно создать ещё одну папку, например, subscribe и перенести все свои три документа в эту папку. Затем закачать папку subscribe на сервер.

Ваша страница подписки должна открываться по ссылке https://vashsite/subscribe/ или https://vashsite/subscribe/index.html

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

Ещё один вариант создания сногсшибательных страниц подписки — это приобрести так называемый "УДАРНЫЙ ПАКЕТ ГРАФИКИ". В вашем распоряжении будут десятки шаблонов-страниц, с великолепным дизайном, готовые элементы, графика.

Ну а саму рассылку можно создать на сервисе Смартреспондер

Как быстро создать страницу подписки?

Бесплатная регистрация. Бесплатный аккаунт до 1000 подписчиков!

Автор: Игорь Козлов
Чистый звук в мире инфобизнеса

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

Не знаете, что делать дальше? - Вам нужна мотивация, за ней придет и творческое решение



Комментарии (34)

  1. Али:

    Игорь, расскажите, пожалуйста, как работать с сервисом Смартреспондер!!!

    Ответить
    • Игорь Козлов:

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

      Ответить
  2. Виктория:

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

    Ответить
  3. Василий Пандорин:

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

    Ответить
    • Игорь Козлов:

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

      Ответить
  4. Лена:

    Отличная статья. Все просто и подробно.

    Ответить
  5. Галина:

    Спасибо за подробности.Очень полезная статья.

    Ответить
  6. Валентина:

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

    Ответить
    • Игорь Козлов:

      Для blogspot.com, вряд ли подойдут мои рекомендации, нужен автономный движок.

      Ответить
  7. Маргарита:

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

    Ответить
  8. Avi:

    Спасибо... идеально

    всё что нужно в данный момент...

    Ещё раз огромное спасибо

    Радости и успехов Вам......

    С уважением.Ави.

    Ответить
  9. Анна:

    Спасибо Вам огромное!

    Именно то, что нужно.

    Доступно и понятно. Отличная статья!

    Примите мою благодарность!

    Ответить
  10. Александр:

    Как в kompozer вставить видео, не используя код HTML (.flv)?

    Ответить
    • Игорь Козлов:

      Не получится без кода. Любое видео — это код плеера и ссылки на местопребывание файла.

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

      Я бы рекомендовал бы вставить код видео из You Tube или из другого видео сервиса, чем подгружать видео из своего хостинга.

      Ответить
  11. Alina:

    Здравствуйте! Подскажите пожалуйста,как готовую страницу из kompozer вывести в интернет (залить на хостинг),какие следующие действия,что нужно для этого,только хостинг или обязательно программа Ftp?Уже копаюсь неделю никто конкретных ответов не дает,отвечают коротко и не понятно.

    Ответить
    • Игорь Козлов:

      Её нужно сохранить отдельным файлом на компьютере. Затем через ftp-клиент (программу) закачать на хостинг. ftp-клиент открывает доступ к хостингу через протокол ftp. То есть вы можете зайти на хостинг и увидеть его изнутри, как на компьютере видите свои папки и файлы.

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

      Процедура простая, нужно просто ftp-клиенту дать доступ на хостинг, указав свой пароль, логин и домен.

      Ответить
  12. Ольга:

    Теперь вам нужно создать ещё одну папку и перенести все свои три документа(файлы index.html, style.css и папка img) в эту папку.

    Вопрос — какую папку создать. Как для текстовых документов или zip. Уточните, пожалуйста.

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

    Ответить
    • Игорь Козлов:

      Можно и не создавать, если правки были в папке subscribe. Её закачиваете на сервер. Тогда ваша подписная страница будет ваш сайт/subscribe

      Или переименовываете её. Не суть. Важно, чтобы ваши отредактированные файлы index.html, папка img и style. css были в одной этой папке, которая будет закачана на хостинг в корневую папку. Дорогу прописывать не надо. Как только вы в адресной строке наберете ваш сайт/subscribe (если папка subscribe) вы должны попасть на страницу index.html

      Ответить
  13. Виктор:

    Здравствуй Игорь.

    ПОдскажите с проблемой. Окно выпрыгивает, когда надо.

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

    Как побороть сию проблему?

    Ответить
    • Игорь Козлов:

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

      Ответить
  14. Ирина:

    Игорь, я вижу анонсы твоих статей теперь не через Фитбернер? Понимаю, что всех подписчиков надо собрать на Смартреспондер.Эта возможность доступна только платно? Голову ломаю... подписчики и Фит-ре и в Смарт-ре. Как навести порядок в списках? Как управлять? Тупик какой-то наступил. Может подскажешь что-то дельное.

    Ответить
    • Игорь Козлов:

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

      Ответить
  15. Светлана Колосова:

    😳 Игорь, хельпь!!! НЕ открывается у меня по ссылке для проверки ничего(( страница не найдена 😎 Делал всё кропотливо и внимательно! Хельпь!!!

    Ответить
    • Игорь Козлов:

      Что именно не открывается? У меня открывается ваша страница подписки. «Умная хозяйка», красиво сделано. Уберите пробел в адресе страницы. И немножко форму подписки можно подправить. Но для первого раза, хорошо.

      Ответить
  16. Галина:

    Игорь, захотелось создать свою подписную страницу, а программа kompozer не скачивается: закончился срок хранения. 😥

    Подскажете ссылочку, где взять? Или почтой архив пришлете? 😀

    Ответить
    • Игорь Козлов:

      kompozer.net — официальный сайт. Там есть русская версия.

      Ответить
  17. Галина:

    К моему огорчению не нашла русской версии.

    Но спасибо и за английскую, Игорь. Немножко понимаю. 😀

    Ответить
    • Игорь Козлов:

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

      Ответить
  18. Галина:

    Игорь, Вы пишете: «...Думаю, что проблем у вас с этим не будет. Если же есть, тогда вам нужен курс Античайник, чтобы ликвидировать свою компьютерную безграмотность...» 😮

    Если можно, поясните, пожалуйста, как курс Дмитрия Комарова по заработку на YouTube сможет ликвидировать мою компьютерную неграмотность?

    Дмитрий, сменил курс, а ссылка у Вас на предыдущий? 😀

    Ответить
    • Игорь Козлов:

      Никак не может курс Дмитрия Комарова ликвидировать компьютерную безграмотность. Это я ошибся. Раньше у меня стояла ссылка на Античайник, но я с этой партнеркой уже не работаю. Решил изменить, а вместо переадресации на курс «с компьютером за 1 день», поставил не ту ссылку, получилось что на Комарова. Сейчас изменил. Спасибо, Галина, что обнаружили это. А то, действительно, казус получается.

      Ответить
      • Галина:

        Да уж, еще какой казус. 😛 Но Вы же в этом не виноваты.

        Пожалуйста, Игорь, люди же должны помогать друг другу?

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

        Кстати, спасибо Вам за статью.

        Благодаря ей я поняла, что могу взять подписную страничку ЛЮБОГО автора и переделать под себя. Есть такие форматы, что очень нравятся.

        А Автор не будет претензии предъявлять, если свой экслюзив узнает в чужой подписке?

        Ответить
        • Игорь Козлов:

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

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

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

          Ответить
  19. Лора:

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

    Ответить
    • Игорь Козлов:

      Через форму обратной связи ))

      Ответить

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

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

WordPress: 43.36MB | MySQL:70 | 0,905sec