О том, для чего нужен одностраничный сайт вы можете почитать тут. Если об этом сказать в двух словах, то одностраничный сайт используют для продаж товаров и услуг (электронные книги, одежда, шаблоны сайтов, скрипты, видео уроки и т.д.).
В этой статье я расскажу, как создать простейший одностраничный сайт в программе FrontPage.
Ну что, приступим.
1. Подготовка текста.
Текст для одностраничного сайта должен быть лаконичный, понятный и грамотный. Пишите текст в Microsoft Office Word, который сразу показывает (подчеркивает) допущенные стилистические, пунктуационные и орфографические ошибки. Если же вы не уверенны в том, грамотно ли написан ваш текст, воспользуйтесь услугами корректора – человека, который за определенную плату проверит и исправит все ошибки (кстати, могу порекомендовать такого человека, если нужно). Помните – ошибки могут повлиять на продажи, ваш сайт не воспримут серьезно.
2. Создание сайта.
Теперь приступим непосредственно к созданию сайта. Для этого понадобится программа Microsoft Office FrontPage . Скачать программу вы можете по этой ссылке. Скачайте файл и раскройте архив программой WinRar. Нажмите файл «SETUP.EXE».
Создайте папку для вашего сайта в любом удобном для вас месте на компьютере. Назовите папку, например, «Мой сайт».
Откройте папку «Мой сайт» и создайте еще одну папку под названием «images». В этой папке будут храниться все ваши картинки, которые будут использоваться для сайта.
Запустите программу FrontPage.
Выберем готовый макет для сайта. Для этого в меню перейдите по вкладке «Таблица» => «Макетные таблицы и ячейки…».
С правой стороны найдите «Макет страницы» и выберите подходящий макет. Я выбрал десятый макет.
В первой ячейки напишите заголовок для вашего сайта. Он должен быть красивым, например «Крутейшие шаблоны сайтов для ВАС».
Теперь отцентрируйте заголовок. Для этого нажмите на кнопочку «по центру» – (1).
Выделите заголовок и выберите шрифт «Times New Roman» с размером 7(36пт) – (2).
Выберите цвет – (3).
Выделите заголовок и нажмите «Центрировать по вертикали» – (4).
Если у вас нет этой кнопки «Центрировать по вертикали», тогда перейдите в меню «Сервис» => «Настройки» => «Таблицы». Таким способом вы включите дополнительную панель.
Теперь нужно вставить привлекательную картинку и форму для заказчика «заказать звонок».
Итак, перекиньте в папку «images» картинку с небольшими размерами от «300 х 300px» до «400 х 300px». Имя картинки должно быть на англ. языке.
Дальше, нужно нарисовать дополнительную ячейку и разбить ее на две части, для картинки и для кнопки.
Для этого перейдите в меню «Таблица» => «Нарисовать таблицу». Нарисуйте таблицу, как карандашом по бумаге.
Теперь кликните правой кнопкой мышки по первой ячейке и нажмите на кнопку «Добавить рисунок из файла» – (5) и выберите рисунок из папки «images».
Теперь кликните правой кнопкой мышки на вторую ячейку и напишите текст «Заказать звонок». Установите шрифт «Times New Roman» с размером 6(24пт). Выберите цвет красный и выделите его жирным. Установите текст по правому краю и нажмите «Центрировать по вертикали».
В этой же ячейке установим форму заказа (красивую форму можно посмотреть здесь). Для этого перейдите в меню «Вставка» => «Форма» => «Поле». Нажмите на клавиатуре «Enter». Повторите этот процесс три раза.
Кликните перед первым полем и напишите слово «Имя», дайте размер 4(14пт).
Кликните перед вторым полем и напишите слово «Ваш email», дайте размер 4(14пт).
Кликните перед третьим полем и напишите слово «Ваш телефон», дайте размер 4(14пт).
Вот что-то похожее должно получиться у вас на данном этапе:
В самую последнюю ячейку вставьте подготовленный текст. Желательно, чтобы в тексте присутствовали картинки. Как вставить картинку вы уже знаете. Чтобы текст обтекал картинку с левого или правого края, вам нужно нажать на изображение двойным щелчком мыши и в открывшемся окне выбрать «слева» или «справа».
Еще хочу сказать, что для удобства в конструкторе FrontPage есть предварительный просмотр и код веб-страницы. То есть, вы сможете легко залезть в HTML код, если вы его знаете, и поменять его так, как вам хочется.
Теперь, чтобы письма доходили вам на почту, нужно сделать обработчик. Для этого откройте блокнот «Пуск» => «Все программы» => «Стандартные» => «Блокнот» и вставьте вот такой код:
<meta http-equiv='refresh' content='6; url=index.html'> <?php if (isset($_POST['T1'])) {$T1 = $_POST['T1'];} if (isset($_POST['T2'])) {$T2 = $_POST['T2'];} if (isset($_POST['T3'])) {$T3 = $_POST['T3'];} $address = 'test-bloggood@rambler.ru'; $sub = "Вам сообщение из одностраничного сайта"; $mes = "Имя: $T1\nemail: $T2\nтелефон: $T3"; $verify = mail ($address,$sub,$mes,"Content-type:text/plain; charset = windows-1251\r\nFrom:$T2"); if ($verify == 'true') { echo "Сообщение отправлено успешно! Через 6 секунд Вы будете направлены на главную страницу"; } else { echo "Сообщение не отправлено"; } ?>
В строке №7 замените адрес электронной почты на ваш.
$address = 'test-bloggood@rambler.ru';
Сохраните файл как «mail.php».
Теперь вернемся к самому сайту. Нажмите внизу слева на кнопку «с разделением» - (6). В нижнем поле выделите слово «Заказать звонок», так будет легче найти вот эту строку:
<form method="POST" action="--WEBBOT-SELF--">
она чуть ниже
Вместо --WEBBOT-SELF-- напишите «mail.php». Это будет выглядеть вот так:
<form method="POST" action="mail.php">
Сохраните документ в папку «Мой сайт». Для этого нажмите в меню «Файл» => «Сохранить как…» => «Сохранить». Дайте название файлу «index.html».
Внимание: если при сохранении в форме отправки action="--WEBBOT-SELF--" не меняется на action="mail.php", тогда сохраните и закройте файл. Теперь откройте его через блокнот и замените вручную .
В итоге, в папке «Мой сайт» у вас должно быть два файла и одна папка с картинками:
Вот такой получился конечный результат простого одностраничного сайта.
Если хорошо постараться, то можно сделать намного лучше. Ну, моей целью было научить вас простейшему, и, думаю, я с этой задачей справился. Если у вас нет желания самостоятельно создавать одностраничный сайт для бизнеса или для каких-нибудь других целей, могу предложить свои услуги по созданию простейших и сложных одностраничных сайтов. За работу возьму не дорого. Для заказа вы можете воспользоваться обратной связью или формой заказа.
У меня на сегодня все. Оставайтесь на моем блоге и читайте интересные темы. Если у вас есть желание, подписывайтесь на обновление моего блога или добавляйте его в закладки. Рекомендуйте, пожалуйста, эту статью своим друзьям через социальные сети, если считаете, что статья была полезной.
[Скачать исходник] & [посмотреть результат]
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330379 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274712 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222617 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187978 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186569
4 Ответов на комментарий - Создание одностраничного сайта в программе Microsoft Office FrontPage
Добавить комментарий
Метки: Вебмастеру
Добрый день)Подскажите, почему при нажатии “Отправить” скачивается файл mail.php???
Браузер Chrome
А через Mozila не работает(
Спасибо
Здравствуйте, Дарья! Все файлы должны находиться на хостинге, а не на домашнем компьютере!
Степан, добрый день. Не получается сделать кнопку “Заказать”. Не приходит мне на почту. Код у меня получается не такой как у вас в примере. И стоит перед кодом кнопки “Заказать”. И еще подскажите, как опубликовать сайт в интернете. Как он попадет в интернет? Заранее спасибо, Светлана.
Здравствуйте, Светлана! Письма не приходят на почту по причине того, что файлы должны находиться на хостинге (в интернете).
Чтобы сайт появился в интернете, нужно купить домен и хостинг.