Дреамвеавер Туториал


Дреамвеавер Туториал креирање веб страницеКао што знате, овај сајт говори о томе како направити веб страницу. Можете научити различите начине користећи ВордПресс, Јоомла или Друпал. Чак имамо и водич о коришћењу чистог ХТМЛ-а, као што је било некада (очигледно са ХТМЛ5-ом, најновијом верзијом). У овом Водичу за Дреамвеавер за почетнике ћете научити још један.


За оне који не знају, Дреамвеавер је апликација која вам омогућује дизајн, код и управљање веб локацијама. Оно што је занимљиво за Дреамвеавер је да нуди и могућност писања кода као и прављење веб странице помоћу визуелног интерфејса.

У овом Водичу за Дреамвеавер научит ћете све што требате знати да бисте започели креирање веб страница с Дреамвеавер-ом. Упознаћете програм и шта он може да ради, истакнуте детаље и како да га подесите. Након тога пронаћи ћете детаљни водич о томе како креирати једноставну веб страницу са Дреамвеавер-ом, учинити је мобилном прилагођеном и потом је отпремити на свој сервер.

Ово ће бити дуга вожња. Међутим, бићете запрепаштени колико брзо ћете ући у овај врло интуитиван програм.

Contents

Шта је Дреамвеавер и шта то може учинити?

На површини, Дреамвеавер је ИДЕ (интегрисано развојно окружење). То значи да је то део софтвера који комбинује различите алате за олакшавање веб дизајна и развоја.

Оно што га чини посебним јесте то што се налази негде између ЦМС-а (где преко визуелног интерфејса контролишете све о својој веб локацији) и чистог уређивача кода. Ево како различити делови функционишу.

Креирајте веб странице помоћу визуелног интерфејса

Пакет алата за визуелни дизајн у основи омогућава израду веб локација мишем. Омогућује вам постављање елемената веб локације на начин на који сте креирали изглед у Ворду. У основи, вашу веб локацију видите онако како бисте видели у претраживачу, али такође имате и могућност да њоме манипулишете.

Ово је веома корисно јер вам омогућава да брзо направите скелет веб странице и без потребе да пишете један ред кода. Уместо тога, Дреамвеавер ће аутоматски креирати потребни код за вас. На тај начин, теоретски, можете саставити читаву веб страницу ручно и учитати је на свој сервер.

С друге стране, ако можете да кодирате, Дреамвеавер има и све потребне алате за то.

Ради као пуноправни уређивач кода

Други део Дреамвеавера је потпуно опремљени уређивач кода. Опремљен је свим стандардним функцијама, укључујући:

  • Истакнуће синтаксе – То значи да Дреамвеавер наглашава различите елементе (као што су оператори, променљиве итд.) У различитим бојама како би код био лакши за читање и исправљање.
  • Попуњавање кода – Попуњавање кода функционише на сличан начин као и аутоматско довршавање на телефону. Почните да куцате и уредник ће вам дати предлоге за оно што покушавате да напишете. На тај начин не морате све откуцавати у потпуности.
  • Код се урушава – Урушавање кода је још једна функција која олакшава читање кода. Омогућује вам да визуелно смањите делове кода када вам нису потребни. На тај начин не морате да се крећете кроз целокупну датотеку већ можете да се бавите само деловима на којима треба да радите.

Дреамвеавер подржава најважније језике за веб дизајн (ХТМЛ5, ЦСС), ЈаваСцрипт, ПХП) и још много тога.

Најбољи део: ако нешто промените у коду, Дреамвеавер ће га аутоматски приказати и на визуелној страни. На тај начин то можете видети без потребе за учитавањем датотека на сервер или покретањем претраживача.

Постоји много више функција и многи од њих ћете видети на делу у надолазећем туториалу Дреамвеавер за почетнике.

Поступак подешавања Дреамвеавер-а и дизајнирања веб локација (корак по корак)

Као први корак, потребно је да набавите Дреамвеавер са званичног Адобе вебсајта.

Овде можете добити бесплатну пробну верзију или од вашег Цреативе Цлоуд клијента.

туториал Дреамвеавер за почетнике

Корак 1. Преузмите и инсталирајте

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

Ако већ користите Цреативе Цлоуд (као што смо ми), једноставно можете да кликнете Покушати унутар клијента. Затим, када се програм заврши инсталација, кликните на Старт суђења.

Корак 2. Прво покретање

Када први пут покренете Дреамвеавер, видећете овај екран.

Дреамвеавер прво покретање

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

дреамвеавер онбоардинг водич за одабир радног простора

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

Дреамвеавер бродски водич одабире шему боја

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

последњи корак водич за укрцавање снова

Изаберите да започнете са новом или постојећом мапом и завршили сте са поступком подешавања. Добар посао!

Сада покренимо пројекат и научимо како да креирамо веб локацију помоћу Дреамвеавера.

Корак 3. Покрените нову страницу

Први корак је креирање нове странице. За то, идите на Сајт> Нови сајт. Прећи ће вас на овај екран:

направите нову страницу у Дреамвеавер-у

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

Такође имате могућност да свој нови пројекат повежете са Гит спремиштем. Ово може бити добра идеја пошто вам пружа контрола верзије али за сада то можете прескочити.

Ми ћемо се позабавити свиме испод Сервери на левој страни касније. Исто је и са ЦСС Препроцесори, што је важно само када користите такве ствари.

Оно што је за нас важно јесте Локални подаци испод Напредна подешавања.

омогућите подразумевану мапу слика у сну

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

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

Корак 4. Креирајте датотеку своје почетне странице

Сада када сте направили веб локацију пројекта, време је за прву датотеку. Почећемо са почетном страницом.

Ако вам Дреамвеавер не нуди саму опцију, идите на Датотека> Нова. Можете или креирати потпуно нову датотеку или користити постојећи предложак. Програм долази с неколико таквих (види Предлошци за почетнике). Управо сада ћемо створити нови.

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

ХТМЛ је постављен подразумевано и можете га оставити онаквим какав јесте. За наслов документа, унос индек.хтмл и одлучите Креирај. Ово ће вас видети на следећем екрану.

свеж пројекат у сну

Ово је капа коју смо поменули у почетку: приказ уживо како изгледа ваша веб локација (тренутно празна) и код који стоји иза ње. Такођер ћете примијетити да је Дреамвеавер аутоматски створио неке основне ХТМЛ ознаке на којима можете надоградити. Идемо сада, зар не??

Корак 5. Креирајте заглавље

Да бисте додали елемент у страницу, прво морате одабрати његову локацију. Кликните на празну страницу (Дреамвеавер ће аутоматски одабрати елемент ако то учините) или смјестите курсор на исти елемент у дијелу кода екрана.

Након тога треба да одете до Уметни картицу у горњем десном углу. Ово вам даје листу уобичајених ХТМЛ и елемената веб локације које можете додати на своју страницу. Помичите се према доле док не видите Хеадер као опција.

уметните заглавни елемент у дреамвеавер

Једноставним кликом се убацује у страницу. Такође је приказан унутар ХТМЛ документа.

заглавље видљиво у визуелном интерфејсу и уређивачу кода

Једноставно, тачно?

Сада ћете променити текст у заглављу и претворити га у наслов. За оба – прво означите текст у уређивачу кода на дну.

обележи текст заглавља у сну

Након тога, вратите се Уметни, кликните на стрелицу поред Хеадинг и изабери Х1. Ово повезује наслов странице у Х1 ХТМЛ ознаку. За више информација о ознакама наслова прочитајте Овај чланак.

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

променио заглавље у Дреамвеавер-у

У реду, управо сте креирали заглавље странице! У овом тренутку то изгледа мало сирово, па хајде да следеће променимо путем ЦСС-а.

Корак 6. Креирајте ЦСС датотеку

У случају да нисте упознати са њим, ЦСС је део који пружа све стилове на веб страници. Омогућује вам дефинисање боја, димензија елемената, врста и величина фонта и пуно више. Желимо да користимо ознаку за откривање наслова наше странице и такође научимо како да променимо ЦСС у Дреамвеавер-у.

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

Први корак је да новом заглављу дате ЦСС класу или ид. Током тог процеса, Дреамвеавер ће вас такође затражити да креирате датотеку са стиловима стилова. Идите на мени ДОМ у доњем десном делу екрана који приказује целокупну структуру веб локације. Уверите се да је изабрано ваше заглавље.

У приказу уживо, сада ћете га видети означено плавим с мало етикетом и знаком плус на дну.

додајте цсс датотеку у дреамвеавер

Кликните на знак плус и упишите #хеадер у пољу које се отвори. Хасхтаг значи да вам додељују ан ид за разлику од класе. Притисните ентер. У менију за отварање, уместо Дефинишите на страници одаберите Креирајте нову ЦСС датотеку. У скочном прозору изаберите Претражите и померите се до мапе веб локације. Затим откуцајте стиле.цсс (што је стандардни назив за стилске таблице) у Назив документа поље и погоди сачувати.

створите листу стилова у сну

Кад сада изаберете У реду, нова датотека ће се појавити на врху вашег приказа уживо. Одатле га можете прегледати и уредити. Такође ће бити повезан са одељак ХТМЛ дела ваше странице.

стилска листа додата на веб страницу

Авесоме поссум! Сада сте спремни да промените стил странице.

Корак 7. Креирајте ЦСС Селектор за наслов странице

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

Означите свој наслов Х1 у приказу ДОМ у доњем десном углу (као што сте раније радили са заглављем). Затим, изнад тога, бирајте ЦСС Десигнер.

припремите стајлинг за елемент заглавља

Да бисте креирали ЦСС селектор, кликните на линију на којој пише Сбирачи а затим кликните на симбол плус. Ово би аутоматски требало да предложи селектор који сте именовали #хеадер х1.

креирајте цсс селектор у сну

Притисните Ентер да бисте је креирали. Готово!

Брза напомена: за све оне који су нови у ЦСС-у, овај селектор значи да циљате елемент који се зове х1 у елемент који се зове #хеадер. На тај начин, све што унесете као ЦСС се примењује само на писани текст, а не на заглавни елемент у целини.

Корак 8. Промените Фонт наслова

Сада када имате селектор, можете му доделити својства. Ако знате свој пут око ЦСС-а, можете једноставно унети маркирање у стиле.цсс и програм ће се аутоматски побринути за њега.

За мање искусне кориснике, Дреамвеавер такође олакшава посао. Останите у ЦСС Десигнер менија и поништите потврдни оквир тамо где пише Прикажи скуп. Када то учините, откључаће пуно додатних опција.

омогући цсс опције у дреамвеавер-у

Помоћу нових тастера можете изабрати много ЦСС својстава из подручја изгледа, текста, обруба и позадине. Тхе Више дугме вам даје опције за унос сопствених правила.

Да бисте променили врсту фонта, кликните на Текст опција на врху (алтернативно, помичите се према доле). У надолазећим опцијама задржите показивач миша изнад породица фонтова и кликните на подразумевани фонт.

промените породицу фонтова у сну

Ово ће вам дати низ опција за уобичајене фонтове, укључујући њихове резервне слике (у случају да прегледач корисника не може приказати примарни фонт). Можда желите да кликнете на Управљање фонтовима при дну да бисте дошли до овог менија:

Адобе фонт фонтови

Овде можете изабрати бесплатне фонтове од Адобе-ових Услуга Едге Веб Фонтс. Потражите фонт по имену или користите бројне опције филтера на левој страни да бисте сузили своје изборе док не пронађете нешто.

Клик на било који од врсте знакова означава га за укључивање у Дреамвеавер. Након што то учините, можете их директно користити или отићи на њих Прилагођени низови фонтова да бисте дефинисали сопствене резервне фонтове.

створите прилагођене хрпе фонтова у дреамвеаверу

За сада, једноставно погодите Готово а затим кликните на подразумевани фонтови опет. Овог пута одаберите свој одабрани прилагођени фонт и воила – промена се врши укључујући сву потребну шифру.

промењен фонт у Дреамвеавер-у

Ако кликнете на стиле.цсс Датотека на врху, видећете да су додате и све марке.

ажурирана листа стилова у сну

Корак 9. Центрирајте наслов и промените његову величину

Текст би и даље могао изгледати боље. Следећи задатак је да га центрирате и повећате величину фонта. За то можете користити и другу функцију која се зове Брзо уређивање.

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

носач.

отворите брзи мени за уређивање у сну

Ево, бирај Брзо уређивање на врху. Ово ће отворити ЦСС повезан са овим елементом испод њега. Сада можете уносити додатне особине без потребе да претражујете читаву датотеку са стиловима (што може бити јако дуго). Да бисте текст центрирали и повећали, додајте му следећи код.

фонт-сизе: 42пк;
поравнавање текста: центар;

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

Када завршите, изгледаће овако:

промените цсс путем брзе измене у дреамвеавер-у

Имајте на уму да се текст већ променио у приказу уживо. Сада притисните изаћи да брзо одете, измените и пређите на листу стилова. Открићете да је нови ЦСС додан на одговарајућем месту.

Прилично цоол, зар не?

Успут, ако никада нисте сигурни шта значи ЦСС својство, једноставно кликните десним тастером миша и одаберите Брзи документи (или притисните Цтрл + К). Дреамвеавер ће вам тада објаснити.

дреамвеавер брзи документи

Корак 10. Додајте још садржаја

Уз оно што сте до сада научили, сада можете да изградите рудиментарно веб место. Ради овог Водича за Дреамвеавер урадили смо следеће:

  • Дефинисани задани фонтови за наслове и одломке
  • Додали сте навигациону траку и створили везу до почетне странице у њој
  • Додана је кутија за садржај са још две кутије унутра
  • Померио се један од њих лево и један удесно пловак својство
  • Ограничите њихову ширину на проценте како би се могли хоризонтално поравнати
  • Додата је примера заглавља и образац текста са леве стране, укључујући неоригровану листу
  • Направио је образац (користите падајући мени испод Уметни), два текстуална поља и дугме за слање
  • Додани су размаци око елемената преко ЦСС маргина и подлога
  • Обезбедјене боје позадине и обруби
  • Направио је подножје и поруку о ауторским правима

Ево резултата:

веб страница са напредним дизајном

Код за пример:

Пошто је ово мало напредно и неће сви знати како то учинити, ХТМЛ и ЦСС можете пронаћи у наставку, тако да можете сами реконструисати. Прво ХТМЛ:





индек.хтмл

 



Кућа

Пример узорка за главни садржај

Лорем ипсум долор сит амет, посвећење адиписцинг елит. Пеллентескуе сцелерискуе ид ест сит амет орнаре. Суспендиссе егет елит ми. Ин импердиет ауцтор лео витае бландит.

  • Етиам темпус урна цондиментум либеро вариус
  • Ут цоммодо рисус финибус
  • Дуис одио лацус, елементум егет сем финибус
  • Моллис дигниссим еним.
  • Куискуе молестие сусципит одио вел фацилисис

Цурабитур вестибулум, лорем а тинцидунт дапибус, ерат сем рхонцус нисл, нон дапибус куам ми ац лигула. Вестибулум ид ауцтор ерос, нец порттитор одио. Нунц еффицитур турпис сед нулла вестибулум виверра. Маеценас иацулис ми орнаре, дапибус лецтус ин, фацилисис нисл.

Узорак позива на акцију!

Лорем ипсум долор сит амет, посвећење адиписцинг елит. Пеллентескуе сцелерискуе ид ест сит амет орнаре. Суспендиссе егет елит ми.

Цопиригхт © 2017 Моја замишљена веб локација

А онда ЦСС:

@цхарсет "утф-8";

тело {
позадинска боја: # Ф5Ф5Ф5;
маргин-топ: 0пк;
маргин-десно: 0пк;
маргин-боттом: 0пк;
маргин-лефт: 0пк;
}

п,
а,
ул,
ол,
ли,
ознака,
улазни{
породица фонтова: мули, санс-сериф;
фонт фонта: нормал;
фонт-веигхт: 300;
фонт-сизе: 17пк;
}

х1, х2, х3, х4, х5 {
породица фонтова: карла, санс-сериф;
фонт фонта: нормал;
фонт-веигхт: 400;
трансформација текста: велика слова;
}

#хеадер {
паддинг-топ: 25пк;
доњи део: 25пк;
позадинска боја: #ФФФФФФ;
обруб-дно: 4пк чврсто # ЕБ232Ф;
}

#хеадер х1 {
породица фонтова: агуафина-сцрипт;
фонт фонта: нормал;
фонт-веигхт: 400;
фонт-сизе: 42пк;
поравнавање текста: центар;
маргин-топ: 0пк;
маргин-боттом: 0пк;
трансформација текста: нема;
}

#навигатион {
маргин-ригхт: ауто;
маргин-лево: ауто;
мак-видтх: 1140пк;
маргин-топ: 10пк;
маржа-дно: 10пк;
}

#навигатион а {
боја: # ЕБ232Ф;
}

.главни {
дисплеј блок;
маргин-топ: 15пк;
маргин-ригхт: ауто;
маргин-лево: ауто;
маржа-дно: 15пк;
јасно: обоје;
преливање: ауто;
мак-видтх: 1140пк;
}

.главни # главни-десни {
флоат: ригхт;
ширина: 37,5%;
дисплеј блок;
}

.главни # главни-леви {
плута: лево;
ширина: 57%;
дисплеј блок;
паддинг-ригхт: 20пк;
}

.главна # главна-десна .цта {
поравнавање текста: центар;
}

.главни # главни-десни .форм {
ширина: 92%;
маргин-ригхт: ауто;
маргин-лево: ауто;
}

# главни-десни .форм див {
маржа-дно: 10пк;
}

# главни-десни .форм.

}

# главни-десни .форм .тектфиелд {
ширина: 100%;

}

.главна # главна-десна # типка {
поравнавање текста: центар;
паддинг-топ: 7пк;
паддинг-боттом: 7пк;
маргин-лево: ауто;
маргин-ригхт: ауто;
позиција: релативна;
дисплеј блок;
паддинг-ригхт: 36пк;
паддинг-лефт: 36пк;
граница: ниједна;
позадинска боја: # ЕБ232Ф;
боја: #ФФФФФФ;
показивач: показивач;
}

.фоотер {
дисплеј блок;
паддинг-топ: 25пк;
доњи део: 25пк;
поравнавање текста: центар;
}

Желимо да искористимо ово као пример да вам покажемо следеће кораке. Чак и ако се чини компликованим, то смо саставили на исти начин као што смо вам показали и раније.

Корак 11. Прегледајте у прегледачу и на мобилном уређају

Како смо све то урадили? Прво, мало смо искуснији у прављењу веб локација него што вероватно јесте. Стога већ имамо кораке у мислима о томе како направити одговарајућу веб страницу.

Друго, користимо врло корисну функцију која ми помаже да убрзам поступак: Преглед прегледача. Дреамвеавер вам омогућава да прегледате своје веб странице у реалном времену у прегледачу, па чак и на мобилним уређајима.

Да бисте започели, кликните дугме за преглед у стварном времену у доњем десном углу.

омогућите мени за преглед у сну

Ово ће отворити могућности прегледа.

опције прегледа у стварном времену у Дреамвеавер-у

Клик на једно од имена прегледача отвориће пројекат ваше веб странице у њему. КР код можете и скенирати телефоном или таблетом (на пример, помоћу Фирефок Куантум) или унесите приказану адресу у прегледач да бисте започели преглед уживо на свом уређају.

Само будите свесни да је за то потребно да унесете свој Адобе ИД и лозинку. То бисте требали добити од пријаве на Дреамвеавер.

Најбољи део: Све промјене које унесете у Дреамвеавер аутоматски ће се приказати у претраживачу у исто вријеме када их извршите.

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

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

алатке за програмере у прегледачу

Веома су сличне ономе што видите у Дреамвеавер-у. Они су нам познатији тако да можемо брже радити са њима и само копирати и залепити код у нашу листу стилова.

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

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

Ово нас води право на следећу тачку.

Корак 12. Додајте медијске упите

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

До сада сте дефинисали само глобалне стилове. То значи стилове који се примењују на целој веб локацији. Сада ћете научити како да додате условне стилове за мање екране.

Прво идите на ЦСС Десигнер. Уверите се да је датотека под коју желите додати код одабрана Извори. Притисните знак плус испод @медиа.

То вам даје ову опцију:

мени за медијске упите у сну

Можете дефинирати увјете за медијске упите, нпр. Уређаје на које се односе, оријентацију, резолуцију и још много тога. Такође можете додати више услова са знаком плус.

Оно што је важније за наш пример је мак-видтх подешавање. С тим сте у могућности да дефинишете прилагођени ЦСС који ће се односити само на одређену максималну величину екрана.

Рецимо да прво желите да поправите ствари на телефону, па откуцајте мак-видтх од 375 пиксела. Када то учините, на дну можете видети ЦСС код.

створите медијске упите у сну

Шта ће се такође догодити када кликнете У реду је да се у врху екрана појављује зелена линија. Ово визуелно представља медијски упит. Кликните на њу и екран ће аутоматски прескочити на ту величину.

креирати медијске упите у сну

Корак 13. Додајте условни ЦСС

Да бисмо исправили дизајн за мобилне уређаје, прво што морамо да урадимо је уклањање кода због којег се два елемента на веб локацији поредавају један поред другог. Јасно нема довољно простора за то.

То можете учинити на исти начин као што сте раније манипулирали ЦСС-ом, само што је овај пут активиран медијски упит док то радите.

Пре свега – дођите до елемента у вашем ДОМ приказу. Одатле направите нови ЦСС селектор за то. Затим је поставите ширина до ауто, пловак до ниједан (да спречите да не иде лево) и додајте мало облога на стране тако да се садржај не налази на ивици екрана.

исправљен мобилни дизајн

Изгледа много боље, зар не? На исти начин можете да промените ЦСС свих осталих елемената на страници како би сви изгледали исправно.

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

Про врх: Не оптимизујте за одређене уређаје и њихове величине, уместо тога креирајте медијске упите у зависности од изгледа. То значи да се играте са величином екрана и додајете упите у оним тачкама када изглед више не изгледа добро.

Још једна ствар: Такође можете да креирате медијске упите мало једноставније користећи унапред постављене величине уређаја у доњем углу и кликом на симбол плус на врху када пронађете тачку где желите да додате један.

креирајте медијске упите путем пречица у сну сањарења

Корак 14. Пошаљите своју локацију на сервер

Препоручујемо употребу Блуехост (партнерска веза) да угостите вашу Дреамвеавер страницу.

Једном када завршите са дизајнерским делом, прилично сте спремни да сајт пошаљете на свој сервер. Као што је споменуто на самом почетку, Дреамвеавер такође то чини врло лако.

Прво идите на Веб локација> Управљање веб локацијама. Изаберите вашу тренутну веб локацију из менија и изаберите Уредити у доњем левом углу. У следећем прозору кликните на Сервери.

конфигурација удаљеног сервера у сну

Унесите све важне податке за повезивање са вашим ФТП сервером. Име зависи од вас, остатак (ФТП адреса, корисничко име, лозинка) потиче од вашег пружатеља услуга хостинга. Не заборавите да наведете у који директоријум да ставите датотеке и веб адресу вашег активног веб сајта! Последњи део је важан како би Дреамвеавер могао да креира интерне везе у вези са веб локацијама.

Испод Напредно имате још неке опције (да ли аутоматски преузимати датотеке након снимања). Обично можете да задржите ствари такве какве јесу. Хит сачувати два пута и готови сте.

Сада идите на Фајлови плочу (било на горњој десној страни или преко Прозор> Датотеке) и кликните на крајњи леви симбол да бисте се повезали са сервером:

отпремите сајт на удаљени сервер у дреамвеавер-у

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

Добро урађено! Управо сте направили и поставили једноставну веб локацију са Дреамвеавер-ом!

Водич за Дреамвеавер – завршне речи

Дреамвеавер је фантастичан програм за израду веб локација. Комбинује интуитивно корисничко сучеље и пуноправни уређивач кода. Кроз овај микс почетницима, посредницима и напредним корисницима олакшава се израда висококвалитетних веб локација.

У овом Дреамвеавер водичу за почетнике упознали смо вас са Дреамвеавер-ом и његовим могућностима. Показали смо вам како да подесите програм и започнете са првом веб страницом. Научили сте како да креирате основну ХТМЛ структуру и стилски је прилагодите ЦСС-у. Такође смо објаснили како да веб веб локацију учинимо мобилном и да је пошаљемо на свој сервер.

До сада сте чврсто разумели како Дреамвеавер ради и како га можете користити за прављење веб странице. Сада је на вама да зароните дубље и смислите следеће кораке.

Не заборавите: Дреамвеавер је само један начин израде веб странице. Има их много више и овде можете пронаћи пуно информација. Срећно!

Да ли сте раније користили Дреамвеавер? Какво је ваше мишљење? Имате ли шта додати на горе наведено? Јавите нам у одељку коментара!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map