Unlimited PowerPoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. Templates

Как быстро создать одностраничный сайт на основе резинового шаблона

by
Read Time:11 minsLanguages:

Russian (Pусский) translation by Гульнара Ахметова (you can also view the original English article)

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

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

В этом уроке мы пройдемся по ступеням настройки сайта из одностраничного шаблона HTML. Мы охватим инструменты, которые Вам понадобятся, технические детали персонализации шаблона а также узнаем как загрузить шаблон на сервер. Также мы дадим Вам несколько важных правил как сделать одностраничный сайт эффективным. Давайте начнем! 

Прежде чем Вы начнете

Есть несколько вещей, которые Вам понадобятся в процессе создания Вашего одностраничного сайта. Давайте перейдем к ним. 

1.Доменное имя

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

Также рекомендуется использовать домен .com так как он является самым старым и авторитетным дополнением. Тем не менее, если Вы не можете подобрать подходящее доменное имя с доменом .com, стоит рассмотреть домен  .net.

2. Хостинг

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

3. Шаблон HTML

Следующий шаг -  поиск шаблона для Вашего сайта. Рекомендуем Вам начать свой поиск  в the ThemeForest marketplace. Вы можете выбрать среди сотен профессиональных одностраничных шаблонов, которые обслуживают множество ниш, или просмотреть нашу подборку самых лучших шаблонов:

4. Редактор кода и FTP клиент

Для наполнения шаблона собственной информацией Вам понадобится редактор кода. Он подчеркнет синтаксис кода и сделает легче поиск частей, которые необходимо изменить.

В этом уроке я буду использовать Sublime Text, который может быть использован на Mac, Windows и Linux и имеет бесплатную пробную версию.

Вам также понадобится FTP клиент, например FileZilla для связи с сервером и загрузки файлов на сайт вместо загрузки их по одному. FileZilla бесплатна и доступна для всех операционных систем. 

Теперь давайте взглянем на шаги создания одностраничного сайта, начиная с загрузки и установки шаблона.

Как редактировать содержимое шаблона Вашего сайта

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

Wander website templateWander website templateWander website template
Как создать одностраничный сайт на основе HTML шаблона the Wander

Так как он является многофункциональным шаблоном, он содержит немного файлов внутри. Ваш шаблон может содержать HTML файл и папки, содержащие стилевое оформление, файлы сценария и картинки.

Для того чтобы изменить шаблон по своему вкусу, Вам необходимо изменить HTML файл, который обычно называется index.html.  В случае с Wander, я буду редактировать файл с именем home-one-page.html, так как мы создаем одностраничный сайт. 

Работа с HTML

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

HTML -это язык разметки, который состоит из тегов таких как <h1>, <p>, <li>  и других.  Теги идут парами, каждый из них имеет открытие и закрытие. Они помогают браузеру понять как должно отображаться то, что находится между тегами. 

Параграф в документе будет выглядеть следующим образом : <p> This is my paragraph. </p>  . Заголовок будет окружен тегом h с номером от 1 до 6, который обозначает уровень заголовка 1  по 6 уровневой системе заголовков. 

Когда Вы будете редактировать HTML шаблон, Вам не нужно редактировать теги, только текст между ними. Тем не менее, если Вы хотите скопировать часть кода или удалить его, Вам необходимо выбрать целую часть с тега открытия до тега закрытия, затем скопировать или удалить ее. 

Самый легкий способ редактировать Ваш шаблон-это открыть его в браузере, а затем просмотреть код. Сначала, делаем двойной щелчок по HTML файлу, чтобы открыть его в Вашем браузере по умолчанию. Первым делом, Вы увидите, что Вам необходимо изменить текст в поле Заголовок. Нажмите правой кнопкой мыши на предложении We Make BRENDS Shine и выберите Просмотреть код ( Inspect).

Inspecting HTMLInspecting HTMLInspecting HTML
Просмотр HTML в браузере 

Всплывет панель, отображающая HTML код шаблона. Строка содержащая выбранное предложение, будет с  левой стороны от панели Просмотра.  Вы увидите, что это предложение упаковано в тег  <h1> со значением large mt20

Откройте шаблон в редакторе кода путем клика правой кнопкой мыши по имени шаблона и выбора Открыть в Sublime Text ( Open with Sublime Text). Найдите ту же самую строку кода, которую Вы видели в панели Просмотра, выберите текст между тегами и замените его на слоган Вашей компании. 

Editing HTML codeEditing HTML codeEditing HTML code
Редактирование HTML кода 

Для того чтобы изменить параграф под только что измененным слоганом, вернитесь в браузер, нажмите правой кнопкой мыши на параграф и выберите Просмотреть код. Сейчас предложение упаковано между тегами <p>  со значением white. Вернитесь в редактор кода, найдите соответствующую строку кода, кликните между тегами и вставьте свою информацию. 

Продолжайте эти шаги до тех пор пока не замените  весь демо-материал собственным. Удаляйте нежелательные секции путем выбора всего от тега открытия до тега закрытия определенной секции кода.

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

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

Заметьте, что в большинстве случаев секции кода будут упакованы в теги <div> прежде чем Вы столкнетесь с тегами заголовков и параграфов.Если Вы хотите скопировать или удалить эту секцию, Вам необходимо выбрать все, включая  тег <div> ; в противном случае содержимое тега не будет отображаться правильно. 

После того, как Вы отредактируете содержимое, Вам необходимо заменить изображения. Самый удобный способ заменить их - это взять на заметку названия изображений в папке вашего шаблона и также назвать Ваши изображения. После того как Вы переименуете  Ваши изображения, скопируйте их в папку с изображениями шаблона.

Как оформить шаблон Вашего одностраничного сайта

Прежде чем загружать файлы на сервер необходимо сделать еще одну вещь-оформить шаблон так чтобы он соответствовал Вашему существующему бренду. Стили расположены в папке CSS.  В случае с Wander есть несколько стилей оформления вместе с  папкой под названием Цвета (Colors)

Для того чтобы начать редактирование CSS Вам необходимо проделать те же шаги, которые мы использовали для редактирования HTML файла. Для того чтобы узнать как определенный элемент оформлен, необходимо нажать на нем правой кнопкой мыши в браузере и выбрать Просмотреть код (Inspect). В этой раз взгляните на правую сторону  и Вы заметите соответствующий стиль выбранного элемента. Та же самая панель будет иметь имя оформления, которое Вам необходимо отредактировать вместе со строкой где расположен код. 

Inspecting CSSInspecting CSSInspecting CSS
Просмотр CSS в браузере

Откройте файл в Вашем редакторе кода. В данном случае это theme.css. Так как я хочу изменить цвет фона второй секции мне нужно найти строку 5378 в файле theme.css. Давайте поменяем цвет фона на черный. 

Editing CSSEditing CSSEditing CSS
Быстро настраиваем фоновый цвет в CSS
Если Вы хотите быстро настроить цвет Вам нужно заменить таблицу стилей в начале HTML файла на имя предпочитаемого  файла CSS.

Посмотрите на строку кода

<link href="css/colors/blue.css"id="color-scheme" rel +stylesheet"type="text/css">

Изменение имени на green.css поменяет цвета кнопок, ссылок и иконок:

Changing the CSS fileChanging the CSS fileChanging the CSS file
Изменение цвета кнопок в файле CSS 

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

CSS code for fontsCSS code for fontsCSS code for fonts
Поиск CSS кода шрифта 

Как загрузить шаблон сайта на сервер

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

Чтобы начать процесс загрузки, откройте FileZilla , введите имя сервера, имя пользователя , пароль на верхней панели, затем нажмите Быстрое соединение ( QuickConnect).

Поместите папку с шаблоном в левой части экрана компьютера, откройте ее с помощью клика мыши. Выберите файлы и папки в левой части и протащите их в правую часть экрана в корневую папку Вашего хостинга расположенного в папке public_html.

Transferring your one page website template via FTPTransferring your one page website template via FTPTransferring your one page website template via FTP
Перенос Вашего одностраничного сайта через FTP

5 советов для улучшения сайта 

Теперь когда Ваш сайт функционирует, есть несколько советов, которые нужно иметь ввиду. 

1. Сделайте Ваш посыл кратким

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

2. Используйте эффективные призывы к действию

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

3. Сделайте навигацию понятной и простой 

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

4. Используйте визуальные образы 

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

5. Сохраняйте иерархию

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

Приступаем к созданию собственного сайта

Если Вы следовали за данным уроком, Вы приобрели знания о том, как быстро создать одностраничный сайт на основе адаптивного шаблона. Начните свое путешествие с правильного шаблона сайта и обращайтесь к данному уроку для быстрой установки. 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.