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