Создать одностраничный сайт бесплатно (Вторая часть)

В первой части статьи «Создать одностраничный сайт бесплатно» я описала, как можно легко и просто построить за пять минут интернет-страничку в программе Mobirise 1.2. Затем я поведала своим читателям, каким образом нужно редактировать код шаблона в программе Microsoft Expressions Web 4. В этой части публикации я продолжу вас знакомить со способами изменения шаблона под собственные нужды и вкусы.

microsoft expressions web

Редактирование шаблона одностраничника

Люди, знающие, как создать сайт одностраничник с формой подписки, в курсе, что при клике мышкой, надписи в окошках должны исчезать. Это упростит рутину для подписчика. Дабы осуществить это, необходимо заменить в файле «index.html», в коде надпись «value» на «placeholder». А в стилях, в файле «style.css» надо прописать:
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}

В результате, в файле «index.html» получится код:
<input class="input1" type="email" placeholder=" Ваш Е-мэйл" name="EMAIL" class="required email" id="mce-EMAIL" style="width: 90%; height: 45px">

<input class="input2" type="text" placeholder=" Ваше имя" name="FNAME" class="required" id="mce-FNAME" style="width: 90%; height: 45px">

Вам следует проверить в различных браузерах одностраничный сайт, который вы смогли бесплатно создать. Вы увидите, что в некоторых браузерах, при нажатии на кнопку подписки появляется оранжевая рамочка. Чтобы она не отображалась, необходимо прописать в стилях кнопки, следующий код:
outline: none;

Получится:
.submit {
border: 2px solid #AB7A00;
margin: 25px;
border-radius: 40px;
background: #FFFFFF;
color: #AB7A00;
font-weight: bold;
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
outline: none;
}

На этом создание одностраничника не заканчивается. Чтобы аккуратно разместить картинки, текст и форму подписки так, чтобы одностраничный сайт, который удалось самостоятельно создать, красиво смотрелся, я задала свой класс каждому диву, в котором размещается контент:
<div class="soc1"></div>
<div class="soc2"></div>
<div class="soc3"></div>
<div class="soc4"></div>
А потом прописала стили для каждого из них. Как, например, для четвертого:
.soc4 {
padding-top: 130px;
padding-left: 5px;
padding-right: 5px;
}

В шаблоне, созданном в программе Mobirise 1.2, шрифт серый. Такой сложно читать, поэтому я его изменила на черный #000000, а также величину шрифта в 16px уменьшила до 14px. Делается это в файле «style.css» в его части:
.content-2 .thumbnail p {
color: #000000;
font-size: 14px;
line-height: 26px;
text-align: left;
}
Код цвета указывается после слова «color». Если одностраничный сайт, который вам удалось бесплатно создать, нравится вам, и вас устраивают цвет и величина шрифта, то проигнорируйте этот пункт.

Если сузить окно браузера, и посмотреть на одностраничный сайт, то можно увидеть, что появляется темный квадратик с тремя белыми полосками. Это меню, которое получилось автоматически создать в программе Mobirise 1.2. Его код в файле «index.html» расположен в самом верху. В нем нужно изменить названия ссылок меню и указать сами ссылки.

<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>

Обращайте внимание на то, что программа Microsoft Expressions Web 4 искажает все ссылки. Поэтому каждую нужно править. Правильно отображаемая ссылка обычно включена в код <a href=http://www.site.ru/ target=_blank> название ссылки</a>. Попытайтесь создать свой одностраничный сайт бесплатно за один день, чтобы не закрывать программу Microsoft Expressions Web 4. В ином случае слова, прописанные кириллицей в шаблоне, станут набором корявых символов. Другой способ создать шаблон за несколько дней, подразумевает сохранение файла «index.html» в папке, созданной программой Microsoft Expressions Web 4, а не в той, что создает программка Mobirise 1.2. Лучший способ избежать ошибок и искажений программой структуры и качества шаблона — это просто переназвать папку с файлами шаблона, используя латинские буквы.

Доработка страницы

Если вы помните, я предложила вам использовать программу, применяющую фреймворк для создания одностраничника. В ней, к сожалению, не прописывается стиль, делающий изображения резиновыми. Чтобы картинки, которые были внедрены в шаблон, уменьшались соответственно разрешению монитора, следует в файле «style.css» прописать следующее:
img {
max-width: 100%; height: auto;
}

Каждый сайт, в том числе и одностраничный, который вы смогли создать, должен обладать своими:
— названием;
— описанием;
— ключевыми словами.
Это необходимо для того, чтобы он полноценно индексировался поисковиками. Дабы прописать все эти данные, следует открыть файл «index.html» в программе Microsoft Expressions Web 4. В режиме визуального редактора нужно нажать на страницу правой кнопкой мыши и выбрать «Page Properties». В окошке, расположенном напротив «Title», укажите название страницы, рядом с «Page description» — описание одностраничника, а напротив «Keywords» надо указать ключевые слова. После этого нужно нажать на кнопку «OK» и затем сохранить изменения в коде.

название и описание сайта

Каждый одностраничный сайт обычно украшается фавиконом. Создать последний можно по этому адресу. Затем готовый фавикон нужно сохранить в папке «images» вашего сайта, а в файле «index.html» до закрывающего тега прописать код <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">

фавикон

Если вы решили создать продающий одностраничник бесплатно или простой landing page, то наверняка на странице нужно будет указать ссылку на главную страницу сайта. Для этого надо прописать специальный код под любой картинкой. Взгляните на мой одностраничный сайт, там ссылка на главную страницу размещена под золотой птичкой со знаком евро. Код со ссылкой и картинкой прописывается следующим образом <a href=site.ru target=_blank><img border="0" src="site.ru/img/kartinka.img" alt=""></a>

Загрузка страницы на хостинг

После того как вам удалось создать одностраничный сайт, следует загрузить его на хостинг. Готовый шаблон должен содержать все файлы, которые вы сохранили, используя программы Mobirise 1.2 и Microsoft Expressions Web 4. Файлы нужно упаковать, используя программу для упаковки файлов. В результате у вас получится архив «nasvanie.papki.rar» или «nasvanie.papki.zip». Затем зайдите в вашу панель управления на хостинге и найдите нужный сайт. Там нужно создать папку, назвав ее так, как будет называться страница, на которой должен отображаться одностраничник.

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

Послесловие

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

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

Чтобы быстрее сообразить, как создать уникальный одностраничный сайт, вам лучше начать использовать программку Microsoft Expressions Web 4. В ней следует в визуальном режиме создать страничку на таблицах. В ячейках последней легко получается разместить любое изображение, текст или форму подписки. После того как вы освоите табличную верстку, вы будете понимать, как верстаются сайты дивами и какие стили следует прописывать, чтобы разместить блоки на странице так, как вам это нужно.

Я начала верстать странички подписки на рассылку, в программе Microsoft Expressions Web 4, в последних числах марта 2015 года. Уже в начале мая я могла похвастать двадцатью правильно и красиво сверстанными страницами для моих сайтов. А узнав 30 мая 2015 года о программе Mobirise 1.2, с ее помощью, и используя Microsoft Expressions Web 4, я смогла за два часа создать одностраничный сайт, который описала в этой статье.

Из всех визуальных редакторов, которые я протестировала, Microsoft Expressions Web 4 оказался наиболее удачным. Он очень удобен для новичков, совершенно не знакомых с версткой сайтов. Я была такой в марте 2015 года. Ранее я копалась в кодах бесплатных шаблонов WordPress, но создать даже примитивный одностраничный сайт не могла. Но с этой универсальной программкой получается все играючи. Однако создать в ней адаптивный шаблон очень сложно, не зная основ html и css. Поэтому я начала использовать программу Mobirise 1.2.

Многие верстальщики не приемлют верстку, при которой используется фреймворк Bootstrap. Они считают, что получается создать быстро и бесплатно более качественный одностраничный сайт, освоив профессию верстальщика. Но продвинутые дизайнеры и вебмастера, желающие быстро сверстать полноценные адаптивные шаблоны, используют этот фреймворк и создают настоящие шедевры, которые нравятся и поисковикам, и читателям. Программа Mobirise 1.2 позволяет это сделать бесплатно и не заморачиваясь. Созданные с ее помощью шаблоны легко проходят проверку от Googl на удобство для людей, использующих мобильные устройства, а также отлично отображаются на мониторах мобильных устройств. Верстая шаблоны, таким образом, получается улучшить поведенческие факторы сайта. Ведь ресурс с адаптивным шаблоном может попасть в ТОП мобильной выдачи поисковиков и удобен для пользователя любого устройства.

Примеры страниц, созданных с использованием двух программ, упомянутых в этой публикации, на основе блока «Features»:

«Скрипт биржи вечных ссылок»

«Скачать книгу «Заработок в интернете»

«Подписаться на рассылку «Интернет. Заработок в сети»

Copyright © kak-sarabotatj.ru

Играть в "Крестики нолики"!

Создать одностраничный сайт бесплатно (Вторая часть)” 2 комментария

  1. Mihail

    Дааа уж. И вправду легко и просто. Да и бесплатно. Потратил около четырех часов времени, но сделал себе одностраничник. Первый свой одностраничник! Кто бы знал, что так все просто бывает. Спасибо автору за полезную инфу. Не прочел бы эту статью, до сих пор бы считал, что одностраничники надо заказывать у профи.

  2. Алексей

    Отличная инструкция! Я вообще не знаком с версткой, но правил коды сайтов. Ваша инструкция помогла мне за день создать посадочную страницу. Отлично еще то, что она адаптивная получилась. Сейчас это важно. В общем, большая благодарность автору статьи!

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

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