Главная » Вебмастеру » Создание одностраничного сайта в программе Microsoft Office FrontPage

Создание одностраничного сайта в программе Microsoft Office FrontPage

2013-12-02 / Вр:20:19 / просмотров: 14258

О том, для чего нужен одностраничный сайт вы можете почитать тут. Если об этом сказать в двух словах, то одностраничный сайт используют для продаж товаров и услуг (электронные книги, одежда, шаблоны сайтов, скрипты, видео уроки и т.д.).
В этой статье я расскажу, как создать простейший одностраничный сайт в программе FrontPage.

Ну что, приступим.

1. Подготовка текста.
Текст для одностраничного сайта должен быть лаконичный, понятный и грамотный. Пишите текст в Microsoft Office Word, который сразу показывает (подчеркивает) допущенные стилистические, пунктуационные и орфографические ошибки. Если же вы не уверенны в том, грамотно ли написан ваш текст, воспользуйтесь услугами корректора – человека, который за определенную плату проверит и исправит все ошибки (кстати, могу порекомендовать такого человека, если нужно). Помните – ошибки могут повлиять на продажи, ваш сайт не воспримут серьезно.

2. Создание сайта.
Теперь приступим непосредственно к созданию сайта. Для этого понадобится программа Microsoft Office FrontPage . Скачать программу вы можете по этой ссылке. Скачайте файл и раскройте архив программой WinRar. Нажмите файл «SETUP.EXE».

Создайте папку для вашего сайта в любом удобном для вас месте на компьютере. Назовите папку, например, «Мой сайт».

Откройте папку «Мой сайт» и создайте еще одну папку под названием «images». В этой папке будут храниться все ваши картинки, которые будут использоваться для сайта.

Запустите программу FrontPage.

изображение можно увеличить

Выберем готовый макет для сайта. Для этого в меню перейдите по вкладке «Таблица» => «Макетные таблицы и ячейки…».

Создание одностраничного сайта в программе Microsoft Office FrontPage

изображение можно увеличить

С правой стороны найдите «Макет страницы» и выберите подходящий макет. Я выбрал десятый макет.

Создание одностраничного сайта в программе Microsoft Office FrontPage

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

Теперь отцентрируйте заголовок. Для этого нажмите на кнопочку «по центру» – (1).
Выделите заголовок и выберите шрифт «Times New Roman» с размером 7(36пт) – (2).
Выберите цвет – (3).
Выделите заголовок и нажмите «Центрировать по вертикали» – (4).

изображение можно увеличить

Если у вас нет этой кнопки «Центрировать по вертикали», тогда перейдите в меню «Сервис» => «Настройки» => «Таблицы». Таким способом вы включите дополнительную панель.

изображение можно увеличить

Теперь нужно вставить привлекательную картинку и форму для заказчика «заказать звонок».
Итак, перекиньте в папку «images» картинку с небольшими размерами от «300 х 300px» до «400 х 300px». Имя картинки должно быть на англ. языке.
Дальше, нужно нарисовать дополнительную ячейку и разбить ее на две части, для картинки и для кнопки.
Для этого перейдите в меню «Таблица» => «Нарисовать таблицу». Нарисуйте таблицу, как карандашом по бумаге.

FrontPage-6

Создание одностраничного сайта в программе Microsoft Office FrontPage

Теперь кликните правой кнопкой мышки по первой ячейке и нажмите на кнопку «Добавить рисунок из файла» – (5) и выберите рисунок из папки «images».

Теперь кликните правой кнопкой мышки на вторую ячейку и напишите текст «Заказать звонок». Установите шрифт «Times New Roman» с размером 6(24пт). Выберите цвет красный и выделите его жирным. Установите текст по правому краю и нажмите «Центрировать по вертикали».

В этой же ячейке установим форму заказа (красивую форму можно посмотреть здесь). Для этого перейдите в меню «Вставка» => «Форма» => «Поле». Нажмите на клавиатуре «Enter». Повторите этот процесс три раза.

Кликните перед первым полем и напишите слово «Имя», дайте размер 4(14пт).
Кликните перед вторым полем и напишите слово «Ваш email», дайте размер 4(14пт).

Кликните перед третьим полем и напишите слово «Ваш телефон», дайте размер 4(14пт).

Вот что-то похожее должно получиться у вас на данном этапе:

изображение можно увеличить

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

Еще хочу сказать, что для удобства в конструкторе FrontPage есть предварительный просмотр и код веб-страницы. То есть, вы сможете легко залезть в HTML код, если вы его знаете, и поменять его так, как вам хочется.

конструкторе FrontPage

Теперь, чтобы письма доходили вам на почту, нужно сделать обработчик. Для этого откройте блокнот «Пуск» => «Все программы» => «Стандартные» => «Блокнот» и вставьте вот такой код:

<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", тогда сохраните и закройте файл. Теперь откройте его через блокнот и замените вручную .

В итоге, в папке «Мой сайт» у вас должно быть два файла и одна папка с картинками:

Создание одностраничного сайта в программе Microsoft Office FrontPage

Вот такой получился конечный результат простого одностраничного сайта.

Создание одностраничного сайта в программе Microsoft Office FrontPage

Если хорошо постараться, то можно сделать намного лучше. Ну, моей целью было научить вас простейшему, и, думаю, я с этой задачей справился. Если у вас нет желания самостоятельно создавать одностраничный сайт для бизнеса или для каких-нибудь других целей, могу предложить свои услуги по созданию простейших и сложных одностраничных сайтов. За работу возьму не дорого. Для заказа вы можете воспользоваться обратной связью или формой заказа.

У меня на сегодня все. Оставайтесь на моем блоге и читайте интересные темы. Если у вас есть желание, подписывайтесь на обновление моего блога или добавляйте его в закладки. Рекомендуйте, пожалуйста, эту статью своим друзьям через социальные сети, если считаете, что статья была полезной.

[Скачать исходник] & [посмотреть результат]