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

КАКО БРЗО ДА НАПРАВИТЕ ПРИЛАГОДЛИВА HTML5 Bootstrap ПОЧЕТНА СТРАНИЦА

by
Difficulty:IntermediateLength:MediumLanguages:

Macedonian (Македонски јазик) translation by Stefan Nikolov (you can also view the original English article)

Кога ќе бидете спремни да пуштите во употреба некоја веб-страница, производ, или сервис, ќе ви биде потребно некое специјално прилагодено место на кое ќе ги пратите вашите потенцијални купувачи и клиенти.  Но, вашата веб-страница можеби нема да биде спремна за нови посетители се уште.Во таквите случаеви, најдобриот избор би била почетна страница со ХТМЛ 5 шаблон. 

Шаблонот ХТМЛ5 може брзо и лесно да се инсталира. За разлика од ЦЕ ЕМ ЕС кој можеби употребува јазик за комплексно програмирање, ХтМл шаблонот е лесен за вршање измени, дури и за почетници. 

Во овој водич, ќе ви ги објаснам придобивките од употребувањето ХТМЛ шаблони за почетна страна, и ќе ви покажам како да го направите истиот. Не грижете се: тоа е брзо и безболно.

Придобивките од употреба на ХтМл шаблони за почетна страница 

Како што напоменав, можете брзо да инсталирате и поставите целни страници. Но постојат и некои други придобивки од нивната употреба:

  • 1. Можете брзо да ги прилагодите до вашата содржина и претпочитаните бои. 
  • 2. Вашата почетна страница ќе се вчитува брзо, поради едноставното кодирање со кое таа е направена.
  • Најпосле, ХТМЛ шаблоните не бараат специјално оддржување или ажурирања, па така ќе нема потреба да се грижите од губење на вашето драгоцено време во моментите пред официјалното пуштање во употреба. 

Сега, откако ги објаснив сите придобивки од ХТМл шаблоните, ајде да започнеме со водичов. 

Како да употребите ХТМл шаблон за почетна страница

Во овој водич јас ќе го употребам Pure шаблонот. Тој претставува едноставен шаблон што може да се употреби за различни цели и доаѓа со контакт образец кој функционира и образец за регистрација MailChimp. 

The Pure HTML template

Покрај шаблонот, потребно ќе ви биде да користите и некои други алатки за да го измените шаблонот и да ја активирате страната:

1. Домен и компанија за хостинг 

Потребно е да купите име на домен и да се регистрирате во некој план за хостинг пред да изберете шаблон за вашата почетна страница. Денес можете да купите хостинг план за цени од 300 денари/месец пришто многу од хостинг компаниите бесплатно ќе ви обезбедат име на домен кога ќе се регистрирате за некој од нивните пакети.  Некои хостинг компании ќе понудат неограничено место и опсези, а некои ќе ги ограничат расположливите ресурси.

Не заборавајте да направите истражување и да прочитате независни рецензии за хостинг компаниите кои ви се интересни. Рецензиите на нивните претходни корисници се добар индикатор за квалитетот на услугата и квалитетот на персоналот за грижа за корисници. 

2. Клиент на протокол за пренос на датотеки 

Следно што треба да направите е да обезбедите клиент на протокол за пренос на датотеки.

Постојат многу клиенти за протокол за пренос на датотеки кои функционираат на различни оперативни системи. Инаку, популарниот клиент за протокол за пренос на датотеки наречен FileZilla функционира на сите платформи. Неговото преземање и употреба е бесплатно.

3. Уредувач на код

Ќе ви биде потребен уредувач на код за да го измените шаблонот. Ќе ви се олесни потрагата по кодот кој вие сакате д аго уредите, ако употребувате уредувач за код, затоа што тие употребуваат посебни нагласувачи за синтакса.  Ако сте корисник на Windows, тогаш употребете Notepad++, а ако употребувате Mac, тогаш инсталирајте TextWrangler. Друга опција би била да употребите Sublime Text 3, кој може да се употребува од страна на Windows и Mac корисниците, како и Linux, а впрочем програмот нуди бесплатна период на користење.

4. HTML шаблон и содржина за вашата Bootstrap почетна страница

На крајот, потребно ќе ви биде да купите и да преземете шаблон за почетна страна и да ја подготвите содржината која ќе стои на почетната страница. Можете да пронајдете многу HTML шаблони за почетна страна на Envato Elements кои се специјално дизајнирани за почетни страници.  Откако ќе го пронајдете шаблонот што ви се допаѓа, купете го и преземете го на вашиот компјутер. Не заборавајте да ја отпакувате папката и да го зачувако ате на некое лесно пристапливо место. 

Соберете ги сите слики и текст кои сакате да ги додадете на вашата почетна страница. Ако ги чувате на едно место, тоа ќе ви олесни кога ќе сакате да ги додадете на шаблонот или да ги пренесете сликите на вашиот сервер.

КАКО ДА ГИ ПРИЛАГОДИТЕ ВАШИТЕ HTML ШАБЛОНИ ЗА ПОЧЕТНА СТРАНИЦА

Откако ги извршивте претходните чекори, сега е време да го прилагодите шаблонот и да ги додадете вашите информации. Ајде да започнеме преку разгледување на структурата на шаблонот.

1.      Структурата на шаблонот

Како што веќе напоменав, јас го користам Pure HTML шаблонот за почетна страница.

Откако ќе ја отпакувате папката, можете да видите дека bootstrap шаблонот за почетна страница содржи повеќе потпапки и дузина HTML датотеки. Еве како ќе изгледа структурата: 

  • ·         CSS. Оваа датотека содржи CSS датотеки што контролираат кои фонтови и бои се употребуваат во шаблонот и го контролираат целосниот распоред на страницата. Ќе треба да ја измените оваа датотека ако сакате да ги смените стандардните стилови.
  • ·         Documentation. Овде ќе ја пронајдете документација за шаблонот Pure која објаснува како работи шаблонот и како да го прилагодите.
  • ·         Fonts. Оваа датотека ги има сите икони за фонтови
  • ·         Img. Оваа датотека ги содржи сите употребени позадински слики во шаблонот.
  • ·         Js. Датотеката за Јаваскрипт ги содржи сите Јаваскрипт кодови кои се потребни за шаблонот да може да функционира нормално.  Обезбедува дополнителна функционалност за преклопување на менија, валидирачки обрасци, контролирачки анимации. Најчесто, нема да биде потребно изменување на датотеките во оваа папка. 
  • ·         Php. Оваа папка ги содржи сите PHP кодови кои се потребни за контакт образецот да функционира. За контакт и MailChimp обрасците да можат без проблем да собираат и поднесуваат информации потребно ќе биде да ги измените овие датотеки.
  • ·         Sass. Оваа папка ги содржи сите променливи за образецот кој го одредува изгледот на документот.

Исто така, ќе забележите неколку HTML датотеки, кои прикажуваат различки демо верзии на HTMЛ шаблонот за почетна страница.  Можете да кликнете десен клик или двојно да кликнете на двете HTML датотеки за да ги отворите во вашиот претпочитан пребарувач и да видите како изгледаат. Кога ќе ја пронајдете демо верзијата што ви се допаѓа, исклучете ги сите други табулатори.

Template file structure

Ќе го користам index-normal-scroll-countdown.html шаблонот до крајот на водичов.

1.      Изменете ги HTML датотеките 

Сега отворете го HTML шаблонот за почетна страница во вашиот пребарувач, а потоа внесете ги вашите информации. Најлесен начин да го направите ова е да разберете на кој дел од кодот во шаблонот му е потребна измена. Ајде да започнеме со кликање на десниот клик на првата линија од текстот под бројачот и да кликнеме Inspect.

Ќе се појави нов панел во подножјето на прозорецот од вашиот пребарувач. Прво ќе забележите дека покажува HTML код кој го прави шаблонот на левата страна и CSS кој обезбедува стилови за шаблонот на десната страна.

Finding HTML with Inspector
Како што можете да забележите на сликата, одбраната реченица е помеѓу обележувачи кои претставуваат параграфи. Повеќето обележувачи во HTML се сочинети од еден пар кој содржи обележувач за започнување и обележувач за затворање. Содржината мора да биде поставена помеѓу тие обележувачи за да може да се покаже на страницата:

Before the launch, enjoy a Very Limited Opportunity by subscribing to our newsletter.

Кликнете на копчето next за да добиете повеќе информации за нашиот проект.

За да ги замените информациите кои доаѓаат со шаблонот, треба да знаете кои обележувачи ги содржат информациите кои сакате да ги измените. Потоа, можете да ги пронајдете тие обележувачи во уредувачот за код и да внесете ваш текст.

Сега, кога веќе знаете како да пронајдете код на кој му треба изменување, одете назад во папката со шаблонот, притиснете со десен клик на одбраната HTML датотека и одберете Open with, а потоа одберете го уредувачот за код кој го презедовте на почетокот. Треба да го видите целосниот HTML код од кој е сочинет вашиот шаблон. 

Скролајте низ уредувачот за код се додека не ја најдете истата линија на код која ја обележавме во пребарувачот. Би требало да биде некаде 75-76. Потоа, кликнете помеѓу обележувачите, нагласете го текстот и заменете го со вашиот.

Editing HTML

Ако сакате да внесете уште информации и да го измените остатокот од шаблонот, тогаш едноставно повторете ги чекорите кои ги поминавме погоре. 

Можете и да ги избришете деловите од шаблонот што не сакате да се појавуваат. На ист начин, може и да ги дуплирате деловите ако сакате да внесете повеќе информации.  Едноставно одберете го делот од шаблонот кој почнува со обележувачот за почнување и нагласете се до обележувачот за затворање за тој дел и потоа избришете го или копирајте и пастирајте го тој дел подолу.

После замена на содржината, време е да ги замените дадените слики со ваши. За да го поедноставите овој процес, погледнете ги имињата на сликите во img папката во шаблонот и потоа именувајте ги вашите слики со истите имиња.   Потоа, изберете ги сите места кои се наменети за слики и избришете ги и потоа наместо нив поставете ги вашите слики во img папката.

КАКО ДА ГО ПРИЛАГОДИТЕ ИЗГЛЕДОТ НА ВАШИОТ HTML ШАБЛОН ЗА ПОЧЕТНА СТРАНИЦА

Сега е време да го подобрите изгледот на вашиот шаблон и да ги измените стиловите во CSS. Pure шаблонот стандардно доаѓа со различни стилизатори за темна и светла верзија од шаблонот:

CSS Files

Ако сакате да дознаете кој стилизатор ви е потребен за изменување, тогаш погледнете ја HTML датотеката во уредувачот за код и побарајте ја линијата која е слична на ова: 

<link rel="stylesheet" type="text/css"href

Потоа одете во папката од шаблонот и отворете го кореспондирачкиот стилизатор во уредувачот за код.  

За да погледнете која линија и стил од кодот е потребно да измените, само повторете го истиот процес кој го употребивме за изменување на HTML.  

Со десен клик, во вашиот пребарувач, кликнете на некој елемент кој сакате да го стилизирате и одберете Inspect. Погледнете десно и ќе ги видите стиловите употребени за тој дел од шаблонот.  

Editing CSS

Од сликата се гледа дека Inspector ни ги прикажува стиловите кои се употребени за текстот  од параграфот. Одберете го уредувачот за код и датотеката за стилизирање. Скролајте надолу по кодот додека не пронајдете линија која започнува со p.  

Тука може да ги промените употребениот фонт, големината на фонтот и бојата на текстот.  

Ако сакате да ја промените позадинската боја на шаблонот, тогаш во кодот барајте ја линијата која започнува сo body ставено во виткани загради и потоа внесете го HEX кодот за боја 

по делот кој ја вчитува позадинската боја.  

Не заборавајте да кликнете на Save во вашиот уредувач за код, за да ги зачувате сите промени кои сте ги направиле.  

1.                 Поставете ги вашите датотеки на серверот  

Потребно е да го поставите шаблонот на вашиот хостинг сервер откако ќе завршите со неговото изменување. Вашиот хостинг провајдер ќе ви ги прати по е-порака сите информации што ви требаат  за да пренесувате датотеки со FTP. 

Вклучете FTP програма како FileZilla. Ќе ја забележите најгорната лента каде што можете да го внесете името на серверот, вашето корисничко име и лозинката. Со кликање на QuickConnect поврзете се на серверот откако ги употребивте информациите кои ви ги даде вашиот провајдер.  

На левата страна од FileZilla прозорецот ќе ја пронајдете папката со вашиот шаблон во вашиот компјутер, а потоа ќе кликнете на него и ќе го зголемите. Изберете ги сите датотеки и папки и влечете ги кон десната страна од екранот и ставете ги во папката public_html. 

Отворете го вашиот пребарувач и внесете го вашето доменско име откако ќе ги поставите сите датотеки. Ви честитам, вашата страница сега е официјално пуштена во употреба.

1.                 Направете повеќе со вашиот Bootstrap шаблон за почетна страница 

Почетната страница може да направи чуда за вашиот бизнис или производ додека се подготвувате за официјалната промоција. Еве неколку совети што ќе ви помогнат да добиете повеќе работи од вашата HTML почетна страница и ќе ви помогнат да jа возбудите публиката: 

Погледнете ги овие водичи ако сакате да научите повеќе за HTML шаблоните за почетна страница или bootstrap шаблони за почетна страница: 

КАКО ДА ГО УПОТРЕБИТЕ ШАБЛОНОТ НА ПОЧЕТНА СТРАНИЦА ЗА ДА СОБЕРЕТЕ ПОТЕНЦИЈАЛНИ КЛИЕНТИ

Може  брзо да ја подигнете и пуштите во употреба вашата bootstrap почетна страница со помош на HTML шаблон.  Започнете со одбирање на еден од HTML шаблоните за почетна страница од Envato Elements или еден од bootstrap шаблоните за почетна страница од ThemeForest. Потоа, нашиот водич ќе ве води низ процесот на  инсталирање.

Advertisement
Advertisement
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.