Урок за Dreamweaver


Dreamweaver Урок за създаване на уебсайтКакто знаете, този сайт е свързан с това как да направите уебсайт. Можете да научите различни начини, използвайки или WordPress, Joomla или Drupal. Ние дори имаме ръководство за използване на чист HTML, както в старите времена (очевидно с HTML5, най-новата версия). В този урок за Dreamweaver за начинаещи ще научите още един.


За тези, които не знаят, Dreamweaver е приложение, което ви позволява да проектирате, кодирате и управлявате уебсайтове. Интересното при Dreamweaver е, че той предлага както възможност да напише код, така и да направи уебсайт, използвайки визуален интерфейс.

В този урок за Dreamweaver ще научите всичко, което трябва да знаете, за да започнете да създавате уебсайтове с Dreamweaver. Ще се запознаете с програмата и какво може да прави, да се отличават акцентите и как да я настроите. След това ще намерите стъпка по стъпка ръководство за това как да създадете прост уебсайт с Dreamweaver, да го направите мобилен приятелски и след това да го качите на вашия сървър.

Това ще бъде дълго пътуване. Въпреки това ще се изумите колко бързо ще влезете в тази много интуитивна програма.

Contents

Какво е Dreamweaver и какво може да направи?

На повърхността, Dreamweaver е IDE (интегрирана среда за развитие). Това означава, че това е софтуер, който комбинира различни инструменти за улесняване на уеб дизайна и разработката.

Това, което го прави особено, е, че той е някъде между CMS (където контролирате всичко за вашия уеб сайт чрез визуален интерфейс) и чист редактор на кодове. Ето как работят различните части.

Създавайте уебсайтове чрез интерфейс за визуален дизайн

Полето за визуален дизайн основно ви позволява да създавате уебсайтове с мишката. Тя ви позволява да поставяте елементи на уебсайта по начина, по който създавате оформление в Word. По принцип виждате уебсайта си както бихте виждали в браузър, но също така имате възможност да го манипулирате.

Това е много полезно, защото ви позволява да изградите скелета на уебсайт бързо и без да е необходимо да пишете един ред код. Вместо това Dreamweaver автоматично ще създаде необходимия код за вас. По този начин теоретично можете да съставите на ръка цял уебсайт и да го качите на вашия сървър.

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

Работи като пълноправен редактор на кодове

Втората част на Dreamweaver е пълнофункционален редактор на кодове. Той се предлага с всички стандартни функции, включително:

  • Открояване на синтаксиса – Това означава, че Dreamweaver подчертава различни елементи (като оператори, променливи и т.н.) в различни цветове, за да направи кода по-лесен за четене и коригиране.
  • Попълване на код – Попълването на код работи по подобен начин като автоматичното довършване на вашия телефон. Започнете да пишете и редакторът ще направи предложения за това, което се опитвате да напишете. По този начин не е нужно да пишете всичко напълно.
  • Кодът се срива – Разпадането на кода е друга функция за улесняване на четенето на кода. Тя ви позволява визуално да свивате части от кода си, когато не ви трябват. По този начин не е нужно да превъртате целия файл, но можете да се справите само с частите, които трябва да работите.

Dreamweaver поддържа най-важните езици за уеб дизайн (HTML5, CSS), JavaScript, PHP) и много повече.

Най-добрата част: ако промените нещо в кода си, Dreamweaver автоматично ще го покаже и на визуална страна. По този начин можете да го видите без да се налага да качвате вашите файлове на сървър или да задействате браузъра.

Има много повече функции и много от тях ще видите в действие в предстоящия урок за Dreamweaver за начинаещи.

Настройка на Dreamweaver и процес на проектиране на уебсайтове (стъпка по стъпка)

Като първа стъпка трябва да придобиете Dreamweaver от официалния уебсайт на Adobe.

Можете да получите безплатна пробна версия тук или от вашия Creative Cloud клиент.

урок за dreamweaver за цените на начинаещите

Стъпка 1. Изтеглете и инсталирайте

Когато получите програмата от официалния уебсайт, просто изтеглете инсталационния файл, изпълнете го и следвайте инструкциите.

Ако вече използвате Creative Cloud (както сме ние), можете просто да щракнете Опитвам вътре в клиента. След това, когато програмата е инсталирана, щракнете Започне съдебен процес.

Стъпка 2. Първо стартиране

Когато стартирате за първи път Dreamweaver, ще видите този екран.

dreamweaver първо стартиране

Ако никога досега не сте използвали програмата, изберете Не, аз съм нов. Когато го направите, Dreamweaver ви води през съветника за настройка. Първата стъпка е да изберете дали да използвате работното пространство за разработчици или стандартно работно пространство.

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

Тъй като това е урок за начинаещи на Dreamweaver, изберете стандартната версия. След това можете да изберете цветна тема за работното си пространство от четири различни опции.

Dreamweaver на борда на водача изберете цветова схема

Последната стъпка е избора дали да започнете с примерен файл, нов или съществуващ проект или да гледате урок.

Dreamweaver на борда на водача последна стъпка

Изберете да започнете с нова или съществуваща папка и сте готови с процеса на настройка. Добра работа!

Сега нека започнем проект и научим как да създадем уебсайт с Dreamweaver.

Стъпка 3. Стартирайте нов сайт

Първата стъпка е да създадете нов сайт. За това отидете на Сайт> Нов сайт. Той ще ви отведе до този екран:

създайте нов сайт в dreamweaver

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

Освен това имате възможност да свържете новия си проект с Git хранилище. Това може да бъде добра идея, тъй като ви дава контрол на версиите но можете да го пропуснете засега.

Ще се занимаваме с всичко под Сървъри от лявата страна по-късно. Същото е и с CSS Preprocessors, което е важно само когато използвате такива неща.

Това, което е важно за нас, е Местна информация при Разширени настройки.

активирайте папката с изображения по подразбиране в dreamweaver

Не забравяйте да кликнете върху иконата на папката вдясно, където пише Папка с изображения по подразбиране. След това отидете на новосъздадената директория на сайта, отворете я, създайте нова папка, наречена снимки и изберете това като папка по подразбиране. По този начин Dreamweaver автоматично ще запазва изображения, свързани с вашия сайт.

Това е сега, щракнете Запази за да се върнете към работното си пространство.

Стъпка 4. Създайте файла на началната си страница

Сега, когато сте създали сайт за проект, е време за първия файл. Ще започнем с началната страница.

Ако Dreamweaver не ви предложи самата опция, отидете на Файл> Нова. Можете да създадете напълно нов файл или да използвате съществуващ шаблон. Програмата идва с няколко от тях (виж Шаблони за начинаещи). В момента вместо това ще създадем нов.

създайте нов файл в dreamweaver

HTML е зададен по подразбиране и можете да оставите това, каквото е. За заглавие на документа, въвеждане index.html и изберете да създавам. Това ще ви изведе на следния екран.

свеж проект в dreamweaver

Това е шапка, за която споменахме в началото: преглед на живо как изглежда вашият сайт (празен в момента) и кода зад него. Ще забележите също, че Dreamweaver автоматично е създал някои основни HTML маркировки, които можете да надградите. Нека сега направим това, нали??

Стъпка 5. Създайте заглавие

За да вмъкнете елемент в страницата, първо трябва да изберете местоположението му. Или кликнете върху празната страница (Dreamweaver автоматично ще избере елемент, ако го направите) или поставете курсора в същия елемент в кодовата част на екрана.

След това трябва да отидете на Insert в горния десен ъгъл. Това ви дава списък с общи HTML и елементи на сайта, които можете да добавите към страницата си. Превъртете надолу, докато можете да видите удар с глава като опция.

вмъкнете заглавен елемент в dreamweaver

Просто щракване го вмъква в страницата. Също така виждате, че се появява в HTML документа.

заглавка, видима във визуален интерфейс и редактор на код

Просто, нали?

Сега ще промените текста вътре в заглавката и също така ще го превърнете в заглавие. И за двете – първо маркирайте текста в редактора на кода в долната част.

маркирайте текста на заглавката в dreamweaver

След това се върнете към Insert, щракнете върху стрелката до Заглавие и изберете H1. Това обръща заглавието на страницата в H1 HTML таг. За повече информация относно маркерите за заглавия, прочетете тази статия.

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

променено заглавие в dreamweaver

Добре, току-що създадохте заглавка на страницата! В момента тя все още изглежда малко груба, така че нека да променим това чрез CSS след това.

Стъпка 6. Създайте CSS файл

В случай, че не сте запознати с него, CSS е онази част, която осигурява цялата стилистика на уеб страница. Тя ви позволява да определите цветовете, размерите на елементите, типовете и размерите на шрифта и адски много повече. Ние искаме да използваме маркирането, за да покажем заглавието на нашата страница, а също така да научим как да променим CSS в Dreamweaver.

Теоретично можете да добавите CSS право в HTML документа. Има много по-малко елегантен вариант това, което ще направим, което е създаване на специален файл за всички CSS стилизации на целия сайт.

Първата стъпка е да дадете на новия си заглавие CSS клас или идентификатор. По време на този процес Dreamweaver също ще ви подкани да създадете файл със стилов лист. Отидете в менюто DOM в долната дясна част на екрана, в което е изброена цялата ви структура на сайта. Уверете се, че е избран заглавката ви.

В изглед на живо вече ще го видите маркиран в синьо с малко етикет и знак плюс в долната част.

добавете css файл в dreamweaver

Кликнете върху знака плюс и въведете #header в полето, което се отваря. Хештегът означава, че присвоявате id за разлика от клас. Натиснете Enter. В менюто за отваряне вместо Определете в страница изберете Създайте нов CSS файл. В изскачащия прозорец изберете Преглед и отворете папката на вашия сайт. След това въведете style.css (което е стандартното име за таблиците със стилове) в Име на файл поле и удари Запази.

създайте лист за стилове в мечтател

Когато сега изберете Добре, нов файл ще се появи в горната част на вашия изглед на живо. Можете да го прегледате и редактирате от там. Той също ще бъде свързан с раздел на HTML частта на вашата страница.

стилов лист е добавен към уебсайта

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

Стъпка 7. Създайте CSS селектор за заглавието на страницата

Първото нещо, което искате да направите, е да промените шрифта на заглавието си и също да го центрирате. За целта първо трябва да създадете нов CSS селектор. Селектор е името на елемент от нашата страница, на който можете да присвоите свойства, например цвят, размер и други.

Маркирайте заглавието си H1 в изгледа DOM в долния десен ъгъл (както сте направили с заглавката преди). След това, над това, изберете CSS дизайнер.

подгответе стайлинг за заглавен елемент

За да създадете CSS селектор, щракнете върху реда, където пише Sелектори и след това кликнете върху символа плюс. Това автоматично трябва да предложи избран от вас селектор #header h1.

създайте css селектор в dreamweaver

Натиснете Enter, за да го създадете. Свършен!

Бърза бележка: за всички нови в CSS този селектор означава, че се насочвате към елемента с име h1 вътре елементът, наречен #header. По този начин, каквото и да въведете като CSS, се прилага само за написания текст, а не като заглавен елемент като цяло.

Стъпка 8. Променете заглавния шрифт

Сега, когато имате селектор, можете да му присвоите свойства. Ако знаете как се движите около CSS, можете просто да въведете маркировка в style.css и програмата автоматично ще се погрижи за него.

За по-малко опитните потребители Dreamweaver също го прави наистина лесно. Останете в CSS дизайнер менюто и премахнете отметката от квадратчето, където пише Показване на набор. Когато го направите, той ще отключи много допълнителни опции.

включете css опции в dreamweaver

С новите бутони можете да изберете много CSS свойства от областите на оформление, текст, рамка и фон. Най- | Повече ▼ Бутон ви дава опции за въвеждане на вашите собствени правила.

За да промените типа на шрифта, щракнете върху Текст опция в горната част (алтернативно, превъртете надолу). В предстоящите опции задръжте курсора на мишката шрифтово семейство и кликнете върху шрифт по подразбиране.

промяна на семейството на шрифта в dreamweaver

Това ще ви даде редица опции за общи шрифтове, включително техните резервни копия (в случай, че потребителският браузър не е в състояние да покаже основния шрифт). Може да искате да кликнете върху Управление на шрифтове в долната част, за да стигнете до това меню:

уеб шрифтове на ръба на Adobe

Тук можете да изберете безплатни шрифтове от Adobe Услуга Edge Web Fonts. Или потърсете шрифт по име или използвайте много опции за филтриране отляво, за да стесните избора си, докато не намерите нещо.

Щракването върху някой от шрифтовете го маркира за включване в Dreamweaver. След като направите това, можете или да ги използвате директно, или да отидете на Персонализирани стекове на шрифтове за да определите вашите собствени резервни шрифтове.

създаване на персонализирани стекове на шрифтове в dreamweaver

Засега просто натиснете Свършен и след това щракнете върху шрифтове по подразбиране отново. Този път изберете избрания от вас персонализиран шрифт и Voila – промяната се извършва, включително всички необходими кодиране.

променен шрифт в dreamweaver

Ако щракнете върху вашия style.css файл в горната част, ще видите, че всички маркировки също са добавени.

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

Стъпка 9. Центрирайте заглавието и променете неговия размер

Текстът все още може да изглежда по-добре. Следващата задача е да го центрирате и да увеличите размера на шрифта. За това можете да използвате и друга функция, наречена Бързо редактиране.

За да го използвате, отидете на кодовия изглед и щракнете с десния бутон върху частта, която искате да редактирате. В този случай е на

скоба.

отворете менюто за бързо редактиране в Dreamweaver

Ето, изберете Бързо редактиране на върха. Това ще отвори CSS, свързан с този елемент, под него. Сега можете да въведете допълнителни свойства, без да е необходимо да търсите целия файл със стилов лист (което може да бъде много дълго). За да центрирате текста и да го увеличите, добавете следния код към него.

размер на шрифта: 42px;
подравняване на текст: център;

Когато пишете, Dreamweaver също ще направи предложения за това, което се опитвате да въведете, което го прави още по-лесно. Това е споменатата по-рано функция за попълване на код.

Когато приключите, ще изглежда така:

променете css чрез бързо редактиране в dreamweaver

Обърнете внимание, че текстът вече е променен в изгледа на живо. Сега натиснете Esc за да напуснете бързо, редактирайте и преминете към стила. Ще откриете, че новият CSS е добавен на подходящото място.

Доста готин, нали?

Между другото, ако някога не сте сигурни какво означава свойство CSS, просто щракнете с десния бутон върху него и изберете Бързи документи (или натиснете Ctrl + K). След това Dreamweaver ще ви даде обяснение.

Dreamweaver бързи документи

Стъпка 10. Добавете още съдържание

С това, което сте научили досега, сега можете да изградите рудиментарен сайт. В името на този урок Dreamweaver, направихме следното:

  • Дефинирани шрифтове по подразбиране за заглавия и абзаци
  • Добавихте лента за навигация и създадохте връзка към началната страница в нея
  • Добавена е кутия div за съдържание с още две кутии вътре
  • Премести един от тях вляво и един вдясно с поплавък Имот
  • Ограничете ширината им до проценти, така че да могат да се подравняват хоризонтално
  • Добавена е примерна заглавие и фиктивен текст вляво, включително списък, който не е поръчан
  • Създаден формуляр (използвайте падащото меню под Insert), две текстови полета и бутон за изпращане
  • Добавено е разстояние около елементите чрез CSS полета и подплънки
  • Осигурени цветове и рамки на фона
  • Създадох долен колонтитул и съобщение за авторски права

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

уебсайт с усъвършенстван дизайн

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

Тъй като това е малко усъвършенствано и не всеки ще знае как да го направи, можете да намерите HTML и CSS по-долу, за да можете да го реконструирате сами. Първо HTML:





index.html

 



У дома

Примерно заглавие за основното съдържание

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi. In imperdiet auctor leo vitae blandit.

  • Etiam tempus urna condimentum libero varius
  • Ut commodo risus finibus
  • Duis odio lacus, elementum eget sem finibus
  • Mollis dignissim enim.
  • Quisque molestie suscipit odio vel facilisis

Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id auctor eros, nec porttitor odio. Nunc efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Примерен призив за действие!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi.

Copyright © 2017 Моят въображаем уебсайт

И тогава CSS:

@charset "utf-8";

тяло {
цвят на фона: # F5F5F5;
марж-отгоре: 0px;
марж-десен: 0px;
марж-дъно: 0px;
марж-ляво: 0px;
}

р,
а,
ул,
ол,
Ли,
етикет,
вход{
семейство шрифтове: muli, sans-serif;
стил на шрифта: нормален;
тегло на шрифта: 300;
размер на шрифта: 17px;
}

h1, h2, h3, h4, h5 {
семейство шрифтове: karla, sans-serif;
стил на шрифта: нормален;
тегло на шрифта: 400;
преобразуване на текст: главни букви;
}

#header {
подложка: 25px;
дъно с подплънки: 25px;
цвят на фона: #FFFFFF;
граница-дъно: 4px твърд # EB232F;
}

#header h1 {
семейство шрифтове: aguafina-script;
стил на шрифта: нормален;
тегло на шрифта: 400;
размер на шрифта: 42px;
подравняване на текст: център;
марж-отгоре: 0px;
марж-дъно: 0px;
преобразуване на текст: няма;
}

#navigation {
марж-десен: автоматично;
margin-left: auto;
максимална ширина: 1140px;
марж-отгоре: 10px;
марж-дъно: 10px;
}

#navigation a {
цвят: # EB232F;
}

.главен {
дисплей: блок;
марж-отгоре: 15px;
марж-десен: автоматично;
margin-left: auto;
марж-дъно: 15px;
ясно: и двете;
препълване: автоматично;
максимална ширина: 1140px;
}

.main # main-right {
плувка: дясно;
ширина: 37,5%;
дисплей: блок;
}

.main # main-left {
плувка: вляво;
ширина: 57%;
дисплей: блок;
подложка-дясно: 20px;
}

.main # main-right .cta {
подравняване на текст: център;
}

.main # main-right .form {
ширина: 92%;
марж-десен: автоматично;
margin-left: auto;
}

# main-right .form div {
марж-дъно: 10px;
}

# main-right .form .label {

}

# main-right .form .textfield {
ширина: 100%;

}

.main # main-right # бутон {
подравняване на текст: център;
подложка: 7px;
подложка за дъно: 7px;
margin-left: auto;
марж-десен: автоматично;
позиция: относителна;
дисплей: блок;
подложка-дясно: 36px;
подложка-ляво: 36px;
граница: няма;
цвят на фона: # EB232F;
цвят: #FFFFFF;
курсор: указател;
}

.footer {
дисплей: блок;
подложка: 25px;
дъно с подплънки: 25px;
подравняване на текст: център;
}

Искаме да използваме това като пример, за да ви покажем следващите стъпки. Дори и да ви се струва сложно, ние сглобяваме това по същия начин, както ви показахме и преди.

Стъпка 11. Визуализация в браузър и на мобилно устройство

Как направихме всичко това? Е, първо, ние сме малко по-опитни в създаването на уебсайтове, отколкото вероятно сте. Ето защо вече имаме стъпките в ума си как да създадете подходяща уеб страница.

Второ, използваме много полезна функция, която ми помага да ускоря процеса: Визуализация на браузъра. Dreamweaver ви позволява да преглеждате уеб страниците си в реално време в браузър и дори на мобилни устройства.

За да започнете, щракнете върху бутона за визуализация в реално време в долния десен ъгъл.

активирайте менюто за визуализация в Dreamweaver

Това ще отвори опциите за визуализация.

опции за визуализация в реално време в dreamweaver

Щракването върху едно от имената на браузъра ще отвори проекта на вашия уебсайт в него. Можете също да сканирате QR кода с вашия телефон или таблет (например с Firefox Quantum) или въведете показания адрес в браузъра си, за да стартирате визуализацията на живо на вашето устройство.

Само не забравяйте, че трябва да въведете своя Adobe ID и парола за това. Трябва да имате това от регистрацията за Dreamweaver.

Най-добрата част: Всички промени, които направите в Dreamweaver, автоматично ще се показват в браузъра по същото време, когато ги направите.

Как това ми помогна да сглобя сайта по-бързо? На първо място, в зависимост от размера на вашия екран, дисплеят в браузъра може да е по-близо до оригинала, отколкото това, което виждате в Dreamweaver.

Второ, проверката на сайта в браузъра ми позволява да използвам инструментите за програмисти за тестване на промените.

инструменти за разработчици в браузър

Те са много подобни на това, което виждате в Dreamweaver. По-познати са ни, за да можем да работим по-бързо с тях и просто да копираме и поставим кода в нашия стилов лист.

Един поглед към телефонната версия показва, че има още много работа.

мобилен преглед в реално време в dreamweaver

Това ни води точно до следващата ни точка.

Стъпка 12. Добавете медийни заявки

За да накарате уебсайта си да работи на всички устройства, трябва да добавите така наречените медийни заявки. Това са условни CSS изрази, които казват на браузърите да се прилагат за стил само над или под определени размери на екраните или на определени устройства. По този начин можете да промените оформлението на по-малки екрани.

Досега сте дефинирали само глобални стилове. Това означава стиловете, които се прилагат към целия сайт. Сега ще научите как да добавяте условни стилове за по-малки екрани.

Първо, отидете на CSS дизайнер. Уверете се, че файлът, към който искате да добавите код, е избран под Източници. Натиснете знака плюс под @media.

Той ви дава този панел с опции:

меню за медийни запитвания в мечтател

Можете да определите условия за медийни заявки, например устройствата, към които се прилагат, ориентация, разделителна способност и много други. Можете също така да добавите множество условия със знака плюс.

Това, което е по-важно за нашия пример, е макс ширина настройка. С това вие сте в състояние да дефинирате персонализиран CSS, който ще се прилага само за определен максимален размер на екрана.

Да речем, че първо искате да поправите нещата по телефона, така че въведете a макс ширина от 375 пиксела. Когато го направите, можете да видите CSS кода в долната част.

създаване на медийно запитване в мечтател

Какво също ще се случи, когато щракнете Добре е, че в горната част на екрана се появява зелена линия. Това визуално представлява медийното запитване. Щракнете върху него и екранът автоматично прескача до този размер.

създавайте медийни заявки в dreamweaver

Стъпка 13. Добавете условен CSS

За да коригираме дизайна за мобилни устройства, първото нещо, което трябва да направим, е премахване на кода, който кара двата елемента в сайта да се подреждат един до друг. Очевидно няма достатъчно място за това.

Можете да направите това по същия начин, както преди да сте манипулирали CSS, само че този път имате активирана медийна заявка, докато го правите.

На първо място – отворете елемента в изгледа си DOM. От там създайте нов CSS селектор за него. След това задайте своето широчина да се Автоматичен, поплавък да се нито един (за да спрете от ляво) и добавете малко подплънки отстрани, така че съдържанието да не се граничи с ръба на екрана.

коригиран мобилен дизайн

Изглежда много по-добре, нали? По същия начин можете да промените CSS на всички останали елементи на страницата, за да изглеждат правилно всички.

Това е основно за заявки в медиите. Можете да използвате същия метод, за да настроите оформлението на таблети и други размери.

Професионален съвет: Не оптимизирайте за определени устройства и техните размери, вместо това създавайте медийни заявки в зависимост от оформлението. Това означава да играете с размера на екрана и да добавяте заявки в онези точки, когато оформлението вече не изглежда добре.

И още нещо: Можете също така да създадете медийни заявки малко по-лесно, като използвате предварително зададените размери на устройството в долния ъгъл и кликнете върху символа плюс отгоре, когато сте намерили точка, в която искате да добавите такава.

създавайте медийни заявки чрез преки пътища в dreamweaver

Стъпка 14. Качете вашия сайт на сървъра

Препоръчваме да използвате Bluehost (партньорска връзка), за да хоствате вашия сайт Dreamweaver.

След като приключите с дизайнерската част, вие сте почти готови да качите сайта на вашия сървър. Както бе споменато в самото начало, Dreamweaver също прави това много лесно.

Първо, отидете на Сайт> Управление на сайтове. Изберете текущия уебсайт от менюто и изберете редактиране долу вляво. В следващия прозорец кликнете върху Сървъри.

конфигурация на отдалечен сървър в dreamweaver

Въведете всички важни данни за свързване към вашия FTP сървър. Името зависи от вас, останалото (FTP адрес, потребителско име, парола) идва от вашия хостинг доставчик. Не забравяйте да посочите в коя директория да поставите файловете и уеб адреса на вашия сайт на живо! Последната част е важна, за да може Dreamweaver да създава относителни към сайта вътрешни връзки.

при напреднал имате още няколко възможности (дали да качвате файлове автоматично при запазване). Обикновено можете да запазите нещата такива, каквито са. Hit Запази два пъти и сте готови.

Сега отидете на файлове панел (или в горната дясна страна, или чрез Прозорец> Файлове) и кликнете върху най-отдалечения ляв символ, за да се свържете с вашия сървър:

качване на сайт на отдалечен сървър в dreamweaver

След като връзката е установена, изберете файловете, които искате да качите и щракнете върху стрелката, насочена нагоре, за да го направите. След като го направите, вашият сайт трябва да е достъпен от вашия уеб адрес.

Много добре! Току-що създадохте и качихте прост сайт с Dreamweaver!

Урок Dreamweaver – Заключителни думи

Dreamweaver е фантастична програма за изграждане на уебсайтове. Той комбинира интуитивен потребителски интерфейс с пълноценен редактор на кодове. Чрез този микс той улеснява начинаещите, междинните и напредналите потребители да създават висококачествени уебсайтове.

В този урок за Dreamweaver за начинаещи ви запознахме с Dreamweaver и неговите възможности. Показахме ви как да настроите програмата и да започнете работа с първия си сайт. Научихте как да създадете основна HTML структура и да я оформите с CSS. Също така разбрахме как да направим уебсайта мобилен отзивчив и да го качим на вашия сървър.

Към момента вече имате стабилно разбиране за това как работи Dreamweaver и как можете да го използвате, за да направите уебсайт. Сега зависи от вас да се потопите по-дълбоко и да измислите следващите стъпки.

Не забравяйте: Dreamweaver е само един начин да направите уебсайт. Има още много и можете да намерите много информация за това тук. Късмет!

Използвали ли сте Dreamweaver преди? Какво е вашето мнение? Нещо за добавяне към горното? Уведомете ни в секцията за коментари по-долу!

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