У свету креатора веб локација са превлачењем и испуштањем, Адобе Дреамвеавер је успео да остане релевантан усред конкуренције. Препун сјајних функција и мноштва алата који вам олакшавају живот, овај софтвер је одличан избор за веб дизајнере и програмере.
Али како да направите своју прву веб локацију користећи Дреамвеавер?
Почетак рада са Дреамвеавером
Морате да набавите копију Адобе Дреамвеавер-а пре него што почнете да радите са њим, али је доступна бесплатна пробна верзија.
Крените до Адобе веб локацију, пријавите се или региструјте налог и преузмите Адобе Цреативе Цлоуд алат да бисте започели. Одавде можете преузети Адобе Дреамвеавер и почети са комплетним водичем.
Овај водич ће вам показати како да направите основну веб локацију користећи Дреамвеавер датотеке шаблона као основу. Можете пронаћи комплетне датотеке пројекта на ово ГитХуб спремиште.
Корак 1: Направите Дреамвеавер локацију
Отворите Адобе Дреамвеавер и идите на Сајт мени на врху странице. Изаберите Нев Сите, затим изаберите име за своју веб локацију и изаберите локацију датотеке за њу.
Корак 2: Креирајте датотеку шаблона
Затим, време је да креирате датотеку шаблона за вашу нову веб локацију. Датотеке шаблона функционишу слично темама које користе ЦМС системи као што су ВордПресс и Схопифи, само што их сами правите.
Кликните на Створи ново или идите на Филе > Нова и бирај ХТМЛ шаблон од Тип документа листа.
Ово ће креирати основни шаблон са већ постављеним ХТМЛ-ом. Овај ХТМЛ ћете користити за свој пројекат, тако да је вредно да га задржите на месту за следеће кораке.
Корак 3: Направите заглавље у шаблону
Сада је време да направите одељак менија/заглавља на веб локацији у шаблону који сте управо креирали. Иди на Уметните на врху екрана и изаберите Хеадер са листе.
У овом тренутку ће се отворити дијалог. Додајте име за класу новог заглавља и кликните У реду да додате код у свој ХТМЛ. Требало би аутоматски да постави нови код унутар ознаке, али можете га преместити ако је потребно.
Након овога, требало би да додате и див елемент за лого веб локације и навигациони елемент за мени сајта. Иди на Уметните мени и изаберите Див, а затим се вратите на Уметните мени и изаберите Нав. Оба ова елемента требају своје име класе.
Као последњу фазу у овом процесу, додали смо неке опције менија нашем елементу за навигацију. Да бисте то урадили, идите на Уметните и изаберите Хиперлинк. Додали смо пет хипервеза у заглавље нашег сајта: Дом, Лав, Тигар, Јагуар и Кућна мачка.
Странице које ће имати везе у заглављу још не постоје, па оставите хреф својства празна док их не креирате.
Корак 4: Додајте стилове за ЦСС
Као што видите, ова веб локација не изгледа баш добро како стоји. Мало ЦСС-а ће решити овај проблем, а можете са лакоћом додати стилове у Дреамвеавер. Иди на ЦСС Десигнер на десној страни екрана и кликните на Плус икона поред Извори. Само треба да изаберете име за свој стилски лист и можете оставити остала подешавања онаквима какви јесу.
Прва ствар коју треба да урадите је да претворите заглавље у флексбокс. Флекбок је само један од начина постављања веб странице помоћу ЦСС-а. Поред тога, постављен је фонт сајта, постављена је црна позадина и уведено је неколико других промена како би сајт изгледао боље. Комплетан ЦСС код можете видети на крају чланка.
Корак 5: Додајте регионе који се могу уређивати у шаблон
Региони који се могу уређивати стварају одељке ХТМЛ-а који се могу уређивати када користите шаблон за прављење других страница. Садржај наше главне странице савршено се уклапа у регион као што је овај. Иди на Уметните > Темплате > Едитабле Регион да бисте својој страници додали регион који се може уређивати.
Корак 6: Додајте сликовни/текстуални садржај у шаблон
Регион који се може уређивати који сте управо додали је употребљив без икаквог додатног ХТМЛ-а, али и даље можете додати неке за уређивање када правите појединачне странице. За почетак идите на Уметните и изаберите Див да додате нови елемент див на своју веб локацију.
Ово ће функционисати и као контејнер за текстуални садржај на страници, као и као место за додавање позадинске слике. Овај елемент има класу и ИД тако да различите странице имају различита ЦСС својства. Ове јединствени ЦСС обрасци позадине су одлични ако желите да своју Дреамвеавер веб локацију подигнете на виши ниво.
Затим идите на Уметните > Наслови > Х1 да додате наслов унутар елемента див који сте управо додали. Оба ова елемента требају неки ЦСС да би исправно радили. Див има вредности позадинске слике, величине позадине и висине. Иди на Филе > Спаси све да бисте били сигурни да се ваш шаблон ажурира.
Можете да додајете слике са било ког места на вашој локалној мрежи или на интернету, али је најбоље да сачувате слике у оквиру сопствених датотека веб локације ради лакшег приступа.
Корак 7: Додајте странице са шаблоном
Сада када имате шаблон, можете почети да додајете неке странице. Иди на Филе > Нова и изаберите ХТМЛ испод Тип документа. Додајте а Наслов за сваку страницу коју додате пре него што притиснете Креирај.
Нова страница је бела и још увек нема наш шаблон. Када се ваша нова страница отвори у Дреамвеавер-у, идите на Алати > Шаблони и кликните на Примените шаблон на страницу. Изаберите свој шаблон са листе и кликните Изаберите да учитате свој шаблон. Коначно, идите на Филе > Сачувај као и изаберите име за своју нову страницу пре него што је сачувате.
Понављајте овај процес док не будете имали довољно страница да задовољите своје потребе. За ово не морате да се придржавате једног шаблона; можете додати нове за различите изгледе страница.
Корак 8: Додајте везе страница у шаблон
Када додате странице, можете да промените везе за навигацију у свом шаблону тако да повезују на праве странице. Вратите се на свој шаблон и пронађите А ознаке које сте раније додали. Избришите везу чувара места и кликните на знаци навода да отворите Прегледај мени. Одавде можете да изаберете исправну страницу за сваку од својих веза.
Корак 9: Поправите ЦСС/ХТМЛ на новим страницама
Свака од страница ће тренутно изгледати исто. Постоји неколико корака које треба предузети како бисте осигурали да имају сопствени садржај; следите кораке у наставку да бисте завршили своју нову веб локацију.
- Промените ИД елемента див садржаја на свакој страници тако да одражава наслов странице
- Додајте ЦСС код за нови ИД елемента са другом сликом у позадини
- Промените наслов на свакој страници
Корак 10: Тестирајте веб локацију у свом претраживачу
Можете тестирати своју нову веб локацију у свом веб претраживачу по избору директно из Адобе Дреамвеавер-а. Иди на Филе > Преглед у реалном времену и изаберите претраживач по свом избору да бисте видели своју веб локацију. Ово је одлично за тестирање ЦСС-а или другог кода који није компатибилан са сваким прегледачем.
Сада вам само треба негде да угостите своју веб локацију. Хостовање статичне локације са АВС С3 је одлично место за почетак.
ХТМЛ и ЦСС код
<!доцтипе хтмл>
<хтмл>
<глава>
<мета цхарсет="утф-8">
<!-- ТемплатеБегинЕдитабле наме="доктитле" -->
<наслов>Неименован документ</title>
<!-- ТемплатеЕндЕдитабле -->
<линк хреф="../паге-цсс.цсс" рел="стилесхеет" типе="текст/цсс">
</head>
<тело>
<хеадер цласс="главно заглавље">
<див цласс="сајт-лого">МакеУсеОф Пример сајта</div>
<нав цласс="главни мени">
<а хреф="../Хоме.хтмл">Кућа</а><а хреф="../Лион.хтмл">Лав</а><а хреф="../Тигер.хтмл">Тигер</а><а хреф="../Јагуар.хтмл">Јагуар</а><а хреф="../Хоусе Цат.хтмл">Хоусе Цат</а>
</nav>
</header>
<!-- ТемплатеБегинЕдитабле наме="МаинЦонтентРегион" -->
<див цласс="главни садржај" ид="лав">
<х1>Ово је лав!</h1>
</div>
<!-- ТемплатеЕндЕдитабле -->
</body>
</html>
Овај ХТМЛ гради готову веб локацију за наш пројекат. Можете га раставити да бисте видели како функционише, али ми вас охрабрујемо да направите сопствени ХТМЛ за своју веб локацију.
@цхарсет "утф-8";
тело {
маргина: 0;
позадина: црна;
породица фонтова: Готхам, "Хелветица Неуе", Хелветица, Ариал, "Санс Сериф";
}
.маин-хеадер {
дисплеј: флек;
позадина: црна;
паддинг: 20пк;
}
.сите-лого {
ширина: 30%;
бела боја;
фонт-веигхт: болд;
тект-трансформ: велика слова;
}
.главни мени {
ширина: 70%;
тект-алигн: десно;
}
.главни мениа {
паддинг: 10пк;
текст-декорација: нема;
бела боја;
}
.главни садржај {
висина: 100вх;
паддинг: 20пк;
величина позадине: корице;
}
.главни садржајх1 {
бела боја;
фонт-сизе: 10рем;
тект-трансформ: велика слова;
}
#лав {
бацкгроунд-имаге: урл("Слике/ларгелион.пнг");
}
#тигар {
бацкгроунд-имаге: урл("Имагес/тигер.пнг");
}
#јагуар {
бацкгроунд-имаге: урл("Имагес/јагуар.пнг");
}
#хоусецат {
бацкгроунд-имаге: урл("Имагес/хоусецат.пнг");
}
#све мачке {
бацкгроунд-имаге: урл("Имагес/лоадсофцатс.пнг");
}Овај ЦСС је такође део готовог пројекта. Попут ХТМЛ-а који смо покрили, можете се играти са овим кодом да бисте ову веб локацију учинили својом.
Прављење веб локација помоћу Адобе Дреамвеавер-а
Дреамвеавер можда не изгледа тако једноставан за коришћење као алатке попут ВордПресс-а или Скуареспаце-а, али вам даје далеко више снаге. Овај водич је одлична полазна тачка, али има још много тога да се научи и вреди да истражите Дреамвеавер сами.
