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



Для тех людей, кто знаком с технологией создания страниц 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.

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

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

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

Поэтому скачиваем kompozer (http://depositfiles.com/files/3pndhu6p8) (6.0 мб), распаковываем архив, установка не требуется. Программа запускается с помощью файла kompozer.

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

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

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

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

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

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

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

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

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

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

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

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

Третья вкладка Source – нам понадобится для изменения кода формы подписки. Находим код начинающийся строкой и заканчивающийся

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

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

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

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

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

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

Если вы обратили внимание, подписка на аудио курс «Прибыльный блог» сделана точно также, как и эта, о которой шла только что речь. Исключение составляет лишь то, что на странице есть ещё встроенный плеер. Как это сделать, поговорим в следующем уроке.

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

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

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

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Отправить ответ

Оставьте первый комментарий!

avatar
wpDiscuz