Три лесни начини за создавање на веб-страница: Чекор-по-чекор Почетник Водич

Член напишан од:
  • Хостинг водичи
  • Ажурирано: мај 10, 2019

Креирање на веб-страница е супер лесно во 2019.

Вие не мора да бидете технолог или програмер.

Следете го вистинскиот метод. Изберете ги вистинските платформи. Користете ги соодветните алатки. Вие ќе бидете 100% во ред.

Имав нулта знаење во веб развојот кога првпат го започнав мојот онлајн бизнис во 2004. Јас не ангажирав веб-развивач до единаесет години подоцна. И јас направив добро.

Денес - имаме иновативни алатки за развој и подобри платформи за веб издаваштво.

Три лесни начини да се направи веб-страница:

Брза врска:

  1. Креирање од нула
  2. Користење на систем за управување со содржини (CMS)
  3. Користење на градител на веб-страници

Вие добивате поголема флексибилност во дизајните и функциите на сајтот со методот #1, но бара добро познавање на веб-јазиците.

Процесот на креирање и управување со веб-сајтот е многу полесен со методот #2 и #3. Треба да изберете една од овие методи во зависност од вашата компетентност.

Наскоро ќе ги разгледаме овие три методи.

Но, пред да започнете ...

Пред да започнеме, ни требаат две работи за вашата веб-страница: 1-име на домен и 2-веб-хостинг.

1 - Регистрирајте домен

Доменот е името на вашата веб-страница. Таа мора да биде уникатна и да го пренесе брендот на вашиот бизнис.

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

Регистратор на домен ќе ви овозможи да го регистрирате вашето име на домен или преку годишни договори или со долгорочен договор.

Пребарувајте и регистрирајте го вашето име на домен во NameCheap
Пребарувајте и регистрирајте ги имињата на домените на Име Евтин.

Еве некои реномирани регистратори на домени кои треба да се разгледаат.

РегистраториПочетната цена
. Со . Нет
123 Рег£ 11.99£ 11 .99
Domain.com$ 9.99 / година$ 10.99 / година
Ганди€ 12.54 / година€ 16.50 / година
GoDaddy$ 12.17 / година$ 12.17 / година
Име Евтин$ 10.69 / година$ 12.88 / година
Мрежни решенија$ 34.99 / година$ 32.99 / година

Исто така прочитајте - Име на домен за Dummies.

2- Купи веб-хостинг

A веб-домаќин е голем компјутер (ака, сервер) кој ги чува вашите веб-страници. Некои гигантски компании - како Амазон, IBM и FB, поседуваат и управуваат со нивните веб-сервери; други бизниси едноставно ги изнајмуваат своите сервери од хостинг провајдер (што е многу поевтино и полесно).

Забелешка: Прескокнете го овој чекор ако одлучувате за создавач на веб-страници за креирање на вашиот сајт (видете чекор #3).

Веб хостинг

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

Веб-домаќинРегистрирај сеЗабелешки
A2 Хостинг4.90 $ / месечноБрз веб-домаќин, newbies пријателски.
BlueHost3.95 $ / месечноЕвтини регистрација цена, newbies пријателски.
Hostgator Cloud8.95 $ / месечноРазумна цена, сигурен сервер.
HostPapa3.36 $ / месечноЕко-пријателски веб-домаќин, ексклузивен попуст.
InMotion хостинг3.49 $ / месечноЕвтина цена за регистрација, сигурен сервер.
Siteground5.95 $ / месечноИндустрија #1 во живо разговор поддршка, цврста веб-домаќин.

До денес се регистриравме, тестиравме и разгледувавме повеќе од хостинг компаниите на 60. Види нашата top 10 хостинг селекции or целосна листа на хостинг осврти.

Исто така прочитајте - Колку чини да се изгради веб-страница.


ФТЦ Обелоденување

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


Откако ќе го имате вашиот домен име и веб хостинг во место, време е да се тркалаат вашите ракави и да започнете да создавате!

Метод #1: Креирање на веб-страница од нула

Потребни вештини и алатки

Можете да ја креирате својата единствена и препознатлива веб-страница само ако ги знаете главните веб-јазици и основните на веб-страницата.

Во спротивно, препорачливо е да го прескокнете на методот #2 / 3; или, стапи во контакт со веб-развивач.

Основни веб-јазици / алатки што треба да ги знаете:

  • HTML (јазик за означување на хипертекст)
    HTML е основната структура на веб-страници и веб-апликации што ја прави семантичката содржина на веб-прелистувачот. Се состои од секвенцијални тагови кои имаат отворање и затворање, а структурно клучен збор затворен со Аголни конзоли. На пример: <strong> </ strong>
  • CSS (Cascading Style Sheets)
    CSS е стилски јазик кој се користи за декорирање на HTML означувањето на веб-страница. Без CSS веб-страница ќе изгледа ништо друго освен голема бела страница која има некаков текст и слика на неа. CSS е она што ја прави страница идеално како сакаме.
  • Јазици за скриптирање
    HTML и CSS не се ништо без скриптирање, бидејќи не се интерактивни. За да направите динамична веб-страница која ќе одговори на корисниците, ви се потребни јазици како JavaScript и jQuery. Можеби ќе бидат потребни и јазици од страна на серверот, како што се PHP, Python и Ruby со текот на времето.
  • База на податоци за управување со
    За складирање, управување и пристап до кориснички влезни податоци на веб-страница, се смета голема табела на информации која се нарекува база на податоци. Систем за управување со бази на податоци како MySQL, MongoDB и PostgreSQL се користи на серверот за ефикасно да ја извршувате оваа работа.
  • FTP (Протокол за пренос на датотеки)
    FTP се користи за поедноставно пренесување на изворните датотеки на веб-страниците на неговиот домаќин. Постојат веб-базирани, како и FTP-клиентите базирани на компјутерски софтвер, кои може да се користат за да се постават фајловите на серверот.

Чекор-по-чекор веб-сајтот за создавање на користење IDE

Еве го прегледот на процесот како можете да креирате веб-страница од прва рака, претпоставувајќи дека ги знаете основните веб-јазици и основите на веб-сајтовите споменати погоре.

Чекор 1: Поставете локално работно опкружување

Изработка на веб-страница со Subline Text
Слика од екранот на работната средина на Subline Text.

Со цел да се создадат и организираат изворни датотеки на веб-страница, добра локална работна средина е важна. Можете да креирате веб развојна околина на вашиот компјутерски уред со инсталирање на IDE (Интегрирано развојна околина). IDE во основа се состои од Уредувач на текст, Градежна автоматизација и дебагерот.

Високата Текст и Атом се некои од основните IDE-ови за развој на веб кои поддржуваат HTML, CSS, JS, PHP, Python и слични веб-јазици.

Од друга страна, постојат проширени ИРО Adobe Dreamweaver кој нуди неколку други функции (Ex: Server Connectivity, FTP).

Чекор 2: Планирајте и дизајнирајте ја вашата веб-страница користејќи го Adobe Photoshop

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

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

Дизајн кој го користевме при креирањето на оваа веб-страница
Примери - дизајнираме потсетници што ги правевме кога за време на преработената страница во декември 2016.

Чекор 3: Кодифицирај го дизајнот користејќи HTML и CSS

Откако ќе завршите со прави груби дизајни за вашите веб-страници во Adobe Photoshop, можете да започнете со пишување на изворните кодови.

Ова е најлесниот дел. Направете HTML ознаки за веб-елементи што сакате да ги вклучите и користите CSS за да ги декорирате според дизајните што сте ги направиле.

Чекор 4: Направете го тоа динамично користејќи го JavaScript и jQuery

Само веб-страниците базирани на HTML и CSS не постојат во современи денови, бидејќи предните кориснички интеракции не можат да се контролираат преку HTML или CSS.

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

Чекор 5: Поставете локални датотеки на серверот користејќи FTP клиент

FTP софтвер за креирање на веб-страници

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

Прво, преземете FTP клиент на вашиот компјутерски уред и поврзете го со вашиот веб сервер користејќи FTP-сметка. Откако успешно сте ја поврзале со сметката на FTP, копирајте ги сите ваши локални датотеки во коренот на вашиот веб-директориум. Некои добри FTP клиенти се FileZilla, WinSCP и Cyberduck.


Метод #2: Креирање на веб-страница со CMS

Потребни вештини и алатки

  • Knwoledge: Основно работење на компјутер и интернет; HTML, CSS и PHP (не е задолжително, но подобро ако ги знаете основите)
  • Алатки: WordPress, Joomla, и Друпал

Систем за управување со содржини (CMS) или систем за управување со содржини е изграден на тактички начин што им одговара на почетниците од прва помош на искусни веб-развивачи.

Тоа е софтверска апликација која го олеснува креирањето и управувањето со онлајн содржините. Повеќето од нив се со отворен код и слободни за употреба.

Ако ги знаете основите на HTML, CSS или PHP, тоа е корисно за вас. Тоа не е голем проблем ако не знаете, бидејќи овие платформи се многу интуитивни. Еве ги првите три слободни избори на CMS платформи што можете да ги одберете според вашата потреба.

Брзи споредби

WordPressJoomlaДрупал
ценаслободенслободенслободен
користење311,682 милиони26,474 милиони31,216 милиони
Слободни теми4,000 +1,000 +2,000 +
Бесплатни приклучоци45,000 +7,000 +34,000 +

Исто така прочитајте - Врвна споредба со CMS (2018) - WordPress vs Joomla vs Drupal

WordPress

WordPress, според различни статистички податоци, се користи во максималниот број на блогови и мали и средни веб-страници. Сепак, многу силни големи веб-сајтови го претпочитаат WordPress за неговата едноставност. WYSIWYG Editor е единственото нешто што треба да го научите за да ја следите вашата прва содржина.

Оваа платформа е институционална за почетниците, како и многу развиена од различни класи на веб-развивачи. Има многу бесплатни приклучоци и теми на сопствено складиште. За да биде изборот на #1 CMS, многу од трети лица се достапни на страната.

теми
Избори на WordPress теми.

Добрите

  • Високо флексибилен и индивидуализиран
  • Лесен за користење,
  • Тони ресурси за учење,
  • Одлична заедница и поддршка

Конс

  • Потребен е код за големи визуелни прилагодувања
  • Ажурирањето може да предизвика проблеми со приклучоци

Дознај повеќе

Joomla

Јоомла е слична на WordPress на многу начини. Исто така е лесен за користење, лесен за инсталирање и лесно може да се прошири со помош на модули - еквивалент на додатоци на WordPress. Како резултат на тоа, тоа е втората најдобра опција за почетници.

Сепак, почетниците би можеле да бидат повеќе заплашени да истражуваат Joomla поради бројот на достапни опции. Покрај левото мени, има и мени на горната лента веднаш над логото "Контролна табла". За да се избегне забуна, запомнете дека некои од ставките од левата и горната лента менија се слични, вклучувајќи ги и "Содржина", "Корисници" и "Екстензии".

Исто како и WordPress, Joomla има некои стилови и шаблони кои брзо можат да ви дадат свој посебен изглед. Но, од сите три системи за управување со содржини, Joomla нуди најлесно решение кога станува збор за создавање на социјална мрежа. Со платформи како EasySocial и JomSocial, вие сте само неколку минути од вашата сопствена веб-страница за социјално вмрежување.

цртичка
Во системот Јоомла.

Добрите

  • Повеќе технички напредни
  • Веб-страниците генерално се подобри
  • Безбедност на ниво на претпријатија

Конс

  • Модулите се тешки за одржување
  • Среден CMS - не е толку лесно како WordPress, не толку напреден како Друпал

Повеќе информации

Друпал

Искусни веб програмери потврдуваат дека Друпал е најмоќниот CMS.

Сепак, тоа е исто така најтешко да се користи. Поради својата флексибилност, Друпал е вториот најупотребуван CMS во светот, но не е омилен кај почетниците. За успешно да се изгради "целосна" веб-страница користејќи Друпал, треба да ги вадите рацете валкани и да ги научите основите на кодирањето. Познавањето на вашиот пат околу CMS е исто така предизвик за почетници.

Друпал
Инсталирање на нов Друпал - и покрај комплицираните функции во Друпал, CMS нуди едноставен, минималистички интерфејс.

Добрите

  • Лесно да се научат
  • Голема помош портал
  • Ажурирањата се интегрираат беспрекорно
  • Повеќе вградени опции

Конс

  • Крива крива за учење во почетна фаза - препорачана за напредни корисници

Повеќе информации

Чекор-по-чекор веб-сајтот создавање процес со користење на WordPress

За овој метод, ние ќе го користиме WordPress како наш пример. До сега треба да имате веќе веб-хостинг сметка и регистрирано име на домен.

Чекор 1: Најдете инсталерот на WordPress во вашиот веб-хостинг панел

Веб хостинг услуги обично имаат брз инсталатер за инсталирање на WordPress и други заеднички платформи.

Значи се најавите на вашата веб-хостинг сметка и да дознаете кој инсталерот имате. Популарните имиња што треба да ги пребарувате се Softaculous, QuickInstall или Fantastico.

Некои хостинг провајдери (пример: Siteground) користете интегрирани монтери на нивната корисничка контролна табла (на екранот што го гледате веднаш по најавувањето на cPanel). Во тој случај, само обидете се да го најдете насловот што вклучува "WordPress".

Пример: SiteGround cPanel табла.

Чекор 2: Инсталирајте WordPress преку инсталерот

Softaculous е најпопуларниот автоматско инсталирање и е напишан на cPanel. Јас ќе ве одам преку инсталацијата преку Softculous. Другите монтери се прилично исти.

Кликни Softaculous и потоа кликнете на 'Инсталирај' преку WordPress за да ја започнете инсталацијата.

Инсталирање на WordPress за да креирате своја веб-страница

Еве важен дел.

Конфигурација на сајтот

Конфигурирајте ги опциите како што следи, оставете ги другите полиња на основната конфигурација (ќе се решат подоцна) и кликнете на инсталацијата.

  • Протокол: Мора да одлучите дали сакате да го инсталирате http: // или http: // www. верзија на URL. Што и да изберете, нема да забележите голема разлика. Од техничка гледна точка, http: // www. е подобро во смисла на флексибилност и управување со колачиња. Забележете дека ако имате валиден SSL сертификат и сакате да го инсталирате WordPress на неа, само изберете https, наместо http.
  • Домен: Изберете го доменот на кој сакате да ја инсталирате веб-страницата.
  • Директориум: Наведете каде сакате да ја инсталирате веб-страницата на WordPress. Ако сакате да го инсталирате на вашиот корен URL (пр: http://www.yourwebsite.com/), оставете го празно. Ако го сакате на под-URL (ex: http://www.yourwebsite.com/myblog/), наведете го директориумот во полето.
  • Административна сметка: Поставете го вашето корисничко име, лозинка и е-пошта што ќе ги користите за најавување на вашата WordPress-страница.

Ако сте успеале во последните чекори, добро направено. Вашата веб-страница е во живо!

Сега влезете во вашата веб-страница на WordPress. Страната за најава на вашиот сајт ќе изгледа како wp-login.php заостанувајќи го URL-то на веб-страницата што ја поставивте.

Чекор 3: Инсталирајте тема и некои важни приклучоци

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

Постојат тони бесплатни готови теми достапни во WordPress директориумот.

За да ги пребарувате овие бесплатни теми, одете во 'Изглед'> Теми> Додај нов ', побарајте тема што ги задоволува вашите барања и кликнете на копчето за инсталација.

WordPress теми директориум
WordPress тема директориум.

Можете исто така да инсталирате теми од трети страни од делот "Додај тема". За платени, професионално дизајнирани, WordPress теми, јас препорачувам Елегантен Теми (за нејзиниот ефикасен код и прекрасните дизајни на предниот крај).

За приклучоци, пребарајте "Приклучоци> Додај нов".

Пребарувајте и инсталирајте додатоци кои ви се потребни само. 3rd Партиските додатоци, исто така, може да се инсталираат од делот "Додај приклучок".

Директориум за додатоци на WordPress
Директориум за додатоци на WordPress.

Овде сакам да сугерирам неколку важни бесплатни приклучоци. Пребарувајте по нивните имиња во директориумот на WordPress додатоците за да ги пронајдете. Имајте на ум дека инсталирањето само еден приклучок од секоја категорија е доволно.

  • За оптимизација: Yoast оптимизација, Сите во Еден SEO Пак
  • За безбедност: iThemes безбедност, Wordfence безбедност
  • За статистика на сајтот: Jetpack од WordPress.com, Google Analytics за WordPress со увид во чудовишта
  • За креирање на форми: Контакт форма 7
  • За изведба: W3 Вкупно кеш, WP Super Cache

Исто така прочитајте - 9 Essential WordPress додатоци за нови WP сајтови

Чекор 4: Подготвен сте!

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

  • Под 'Settings> General': Поставете го вашиот наслов на страницата и написот.
  • Под 'Settings' Reading ': Каква почетна страна треба да се прикаже и колку блог постови сакате да ги прикажете на една страница.
  • Под 'Settings' Permalinks ': Поставете она што ќе биде структурата на URL-то на вашиот блог пост.

Основна поставка за нова WP страница
Основни подесувања за новата страница на WordPress.


Метод #3: Креирање на веб-страница со градители на сајтови

Потребни вештини и алатки

  • Knwoledge: Основно работење на компјутер и интернет
  • Алатки: Wix и Weebly

Мапа на градители го направија тоа лесно и веднаш да поставите веб-страница. Без познавање на веб-јазици, може да се стартува неговата целосно опремен веб-сајт во прашање на минути. Тие нудат Drag & Drop веб-страница градители кои бараат нула кодирање знаење.

Постојат многу сајт градители расфрлани преку интернет - Disha покриени 26 бесплатни градители на сајтови во овој блог; но не сите од нив може да ги задоволат потребите.

Следните три се најпогодни и потенцијални веб-градители што можете да ги користите.

Wix

Користење на Wix да се направи веб-сајт

Wix е еден од најлесните градители на сајтови на пазарот со 500 + целосно приспособени-можност шаблони сортирани под различни категории. Значи, тоа е доста сигурно дека ќе најдете оној кој одговара на вас.

Тие нудат флексибилен Drag & Drop за уредувач на веб-страници, кој секогаш е видлив над содржината. Можете да повлечете една ставка од списокот и да ја испуштите насекаде на веб-страницата за да додадете. Секоја видлива ставка на неа може да се премести или да се измени.

Единствениот недостаток е тоа што постојат рекламни пораки на Wix-слободен план. Можете да се ослободите од него со тоа што ќе го надградите до нивниот Комбо план, кој ќе ве врати на минимум $ 12 / месец.

Исто така прочитајте - Нашата детална преглед на Wix.

Weebly

Користење на Weebly да се направи веб-сајт

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

Тие имаат добар број на пред-дизајнирани распореди на страници (на пример: за страница, ценово страница, страница за контакти) кои можат да се користат и модифицираат.

Градителот на Drag & Drop е полесен за користење, но понекогаш сте ограничени на одредени области за прилагодување. Достапноста на екстензии и апликации од трети страни исто така се ограничени.

Исто така прочитајте - Нашата темелна анализа на Weebly.

Чекор-по-чекор веб-процесот на создавање со користење на Wix

Чекор 1: Пријавете се за Wix

Направете сметка на Wix.com.

Постојат планови за 5 премии и бесплатен план 1 (цените се движат од $ 0 - $ 24.50 / mo). По успешното креирање на страницата ќе ги видите опциите за надградба.

Види Викс планови и цените тука.

Регистрирај се
Wix страница за регистрација.

Препорачувам Wix основниот платен план - Комбо. Wix Combo-планот ($ 8.50 / mo) има слободен име на домен, повеќе процесорски ресурси и нема Wix реклами.

Чекор 2: Изберете дефиниција

Wix ќе ве праша како сакате да креирате веб-страница. Најбрзиот начин на кој тие сугерираат е Wix ADI (Artificial Design Intelligence) што на крај не е многу плодно.

Па, јас ќе ве одам низ малку подолго, но подобар начин, градителот на веб-страницата!

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

Откако ќе ја пронајдете темата Wix што сакате, кликнете 'уреди "за да продолжите.

Уредување на веб-страница во Wix
Копчето "Измени" се прикажува кога го движите глувчето на некоја тема.

Чекор 3: Дизајнирајте ја вашата веб-локација користејќи Wix Website Builder

По неколку моменти, директно ќе слеташ на нивниот интуитивен веб-градител.

Дизајнирање на веб-страница е едноставна. Ќе видите различни алатки на левата и десната страна на вашиот екран. Исто така, кликнете било каде на веб-страницата за да го уредите блокот или да го преместите на друго место.

Wix елементи
Изградете ги елементите на вашата веб-страница користејќи го Wix уредувачот за влечење и спуштање.

Чекор 4: Објавете ја веб-страницата

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

Се препорачуваат уште неколку измени.

Одете во вашата "Wix Dashboard> Manage & Edit Site" и конфигурирајте оптимизација, Favicon, Social и надградби по потреба.

Wix конфигурација на страницата
Конфигурирајте го вашиот Wix сајт. Кликнете за да ја зголемите сликата.

И штом еднаш ќе завршите со овие основни поставки - вашата веб-страница е подготвена.

Член од Џери Лоу

Geek тато, оптимизација податоци наркозависник, инвеститор, и основач на веб хостинг тајната Откриени. Џери гради Интернет-ресурси и правеше пари онлајн од 2004. Тој сака безумната бодликава и обидувајќи се нова храна.