\n Dreamweaver jest matk\u0105 wszystkich dzia\u0142a\u0144 internetowych w Internecie. Dla wi\u0119kszo\u015bci ludzi Dreamweaver to tylko narz\u0119dzie do tworzenia stron internetowych, ale tylko profesjonali\u015bci wiedz\u0105, \u017ce Dreamweaver to pot\u0119ga.\n<\/p>\n
\n Dreamweaver ma wiele funkcji i opcji, kt\u00f3re czyni\u0105 go najbardziej ulubionym narz\u0119dziem tw\u00f3rc\u00f3w stron internetowych. Bez w\u0105tpienia to oprogramowanie ma najbardziej znane IDE (zintegrowane \u015brodowisko programistyczne), kt\u00f3rego nie ma \u017cadne inne oprogramowanie do tworzenia stron internetowych na obecnym rynku. Niezale\u017cnie od tego, czy s\u0105 to narz\u0119dzia programistyczne, do wsp\u00f3\u0142pracy i kodowania, Dreamweaver zapewnia przyzwoit\u0105 gam\u0119 narz\u0119dzi do zabawy dla tw\u00f3rc\u00f3w stron internetowych. Dlatego dla pocz\u0105tkuj\u0105cych tw\u00f3rc\u00f3w stron internetowych wa\u017cne jest, aby wiedzie\u0107, w jaki spos\u00f3b mog\u0105 zmaksymalizowa\u0107 wykorzystanie programu Dreamweaver.\n<\/p>\n
\n Wszystkie aspekty, kt\u00f3re odr\u00f3\u017cniaj\u0105 do\u015bwiadczonych programist\u00f3w internetowych od zwyk\u0142ych programist\u00f3w internetowych, s\u0105 ukryte pod warstwami godnych ubolewania intuicyjnych menu, dlatego nowi tw\u00f3rcy stron internetowych maj\u0105 trudno\u015bci z doskonaleniem swoich umiej\u0119tno\u015bci. Jednak w tym artykule poka\u017c\u0119 ci te ukryte i pot\u0119\u017cne funkcje programu Dreamweaver, o kt\u00f3rych trzeba wiedzie\u0107, aby sprosta\u0107 wymaganiom dzisiejszego rynku. Ten artyku\u0142 pomo\u017ce ci szybko uzyska\u0107 dost\u0119p do tych funkcji i dostarczy ci dziesi\u0119ciu najlepszych pomocnych hack\u00f3w, kt\u00f3re poprawi\u0105 jako\u015b\u0107 twojej pracy i znacznie poprawi\u0105 twoje kodowanie.\n<\/p>\n
\n Ka\u017cdy wie, \u017ce Dreamweaver oferuje widok statyczny lub nasze otwarte pliki. Jednak pytanie pozostaje bez odpowiedzi na temat dynamicznych widok\u00f3w aplikacji, takich jak WordPress. Aby ustawi\u0107 widok dynamiczny, musimy poinformowa\u0107 tkacza sn\u00f3w o ustawieniach, kt\u00f3re maj\u0105 by\u0107 u\u017cywane dla widok\u00f3w dynamicznych. Aby to ustawi\u0107, przejd\u017a do ustawie\u0144 \u017c\u0105da\u0144 HTTP, klikaj\u0105c menu widok > Widok na \u017cywo > opcje, a nast\u0119pnie wprowad\u017a GET lub POST, kt\u00f3re s\u0105 wymagane do prawid\u0142owego wy\u015bwietlenia aplikacji.\n<\/p>\n
\n Nast\u0119pnie prze\u0142\u0105cz widok na \u017cywo w programie Dreamweaver, kt\u00f3ry zast\u0105pi panel Widok projektu, na dzia\u0142aj\u0105cy na \u017cywo, renderowany z perfekcyjnym pikselem WebKit Twojej strony. Nast\u0119pnie uzupe\u0142nij go \u017cywym JavaScript, manipulacjami DOM, zapytaniami do bazy danych, kodem po stronie serwera i renderowanym CSS zamiast zast\u0119pczej ikony z interfejsu Design View.\n<\/p>\n
\n Nawigacja to jeden element strony w responsywnej witrynie, kt\u00f3ry powinien mie\u0107 zdolno\u015b\u0107 adaptacji do potrzeb mniejszych ekran\u00f3w, w przypadku kt\u00f3rych Bootstrap mo\u017ce bardzo pom\u00f3c. Bootstrap pozwala \u0142atwo skonfigurowa\u0107 pasek nawigacyjny i prze\u0142\u0105cza\u0107 si\u0119 z poziomego paska na pionowy panel. Powodem jest to, \u017ce Dreamweaver obs\u0142uguje ca\u0142\u0105 elastyczno\u015b\u0107 nawigacji Bootstrap i jest \u0142atwy w u\u017cyciu, je\u015bli chodzi o tworzenie skutecznej, responsywnej strony internetowej.\n<\/p>\n
\n Aby szybko to zobaczy\u0107, poni\u017cej znajduje si\u0119 kr\u00f3tkie demo, jak u\u017cywa\u0107 Bootstrap w swoim rozwoju.\n<\/p>\n
\n Przyspieszenie nawigacji za pomoc\u0105 Bootstrap rozpoczyna si\u0119 od nowego okna dialogowego dokumentu programu Dreamweaver. Po prostu kliknij przycisk Bootstrap Framework w oknie dialogowym nowego dokumentu, a tak\u017ce zaznacz pole wyboru opcji uk\u0142adu przed kompilacj\u0105, aby korzysta\u0107 z w pe\u0142ni funkcjonalnych opcji nawigacji, takich jak;\n<\/p>\n
\n Je\u015bli oka\u017ce si\u0119 to trudne, istnieje inna opcja. Dreamweaver umo\u017cliwia utworzenie dostosowanego paska nawigacyjnego. Je\u015bli wolisz ciemn\u0105 palet\u0119, po prostu dodaj klas\u0119 .navbar-inverse do swojej\n<\/p>\n
\n etykietka. Mo\u017cesz nawet si\u0119 nim bawi\u0107. Je\u015bli chcesz wy\u015bwietla\u0107 nawigacj\u0119 zawsze nad stron\u0105, wpisz .navbar-fixe-top. Je\u015bli chcesz pokaza\u0107 go poni\u017cej, wpisz .navbar-fixed-bottom. Wszystkie te klasy Bootstrap s\u0105 standardowe, a wskaz\u00f3wki do kodu Dreamweaver r\u00f3wnie\u017c obs\u0142uguj\u0105 te kodowanie, wi\u0119c nie musisz pami\u0119ta\u0107 o ca\u0142ym kodowaniu. Wystarczy wpisa\u0107 .navbar na wy\u015bwietlaczu elementu, a pojawi si\u0119 wyskakuj\u0105ca lista, w kt\u00f3rej mo\u017cesz wybra\u0107 \u017c\u0105dan\u0105 opcj\u0119.\n<\/p>\n
\n Ajax ma bardzo dynamiczn\u0105 natur\u0119. Dlatego cz\u0119sto musimy wchodzi\u0107 w interakcj\u0119 ze stron\u0105 z niedost\u0119pnymi lub niewyrenderowanymi elementami podczas \u0142adowania pierwszej strony. Te elementy mog\u0105 zosta\u0107 wstrzykni\u0119te na stron\u0119 po pewnym czasie \u0142adowania, dlatego nie wy\u015bwietlaj\u0105 si\u0119 przy pierwszym \u0142adowaniu. Na przyk\u0142ad, gdy chcesz zmieni\u0107 styl podpowiedzi, kt\u00f3ry zosta\u0142 ca\u0142kowicie zaimplementowany w JavaScript, zwykle metodycznie przeszukiwa\u0142e\u015b swoje skrypty, aby znale\u017a\u0107, gdzie zosta\u0142 utworzony element. Zamiast przeszukiwa\u0107 skrypty, spr\u00f3buj wykona\u0107 nast\u0119puj\u0105ce czynno\u015bci.\n<\/p>\n
\n Umie\u015b\u0107 program Dreamweaver w widoku na \u017cywo i wyrenderuj swoj\u0105 stron\u0119. Nast\u0119pnie naci\u015bnij klawisz F6, aby w dowolnym momencie zatrzyma\u0107 JavaScript, co pozwoli ci przeanalizowa\u0107 i ukierunkowa\u0107 dowolny kod dowolnego elementu dynamicznego na stronie. Pomo\u017ce to nie tylko w dok\u0142adnym ukierunkowaniu kodu elementu dynamicznego, ale tak\u017ce przyspieszy rozw\u00f3j, skracaj\u0105c czas wyszukiwania dowolnego kodu w dynamicznej witrynie.\n<\/p>\n
\n Skrypt kodowania mo\u017ce by\u0107 bardzo myl\u0105cy, je\u015bli nie jeste\u015b przyzwyczajony do ogl\u0105dania z\u0142o\u017conego kodowania ka\u017cdego dnia i nocy. W tym miejscu pod\u015bwietlanie kod\u00f3w pomaga tworzy\u0107 separacje w ca\u0142ym skrypcie. Zamiast porusza\u0107 oczami za krwawi\u0105c\u0105 kraw\u0119dzi\u0105, Dreamweaver ma funkcj\u0119, kt\u00f3ra podkre\u015bla kodowanie, kt\u00f3re pomaga ci go przeczyta\u0107. W tym celu otw\u00f3rz preferencje programu Dreamweaver i w\u0142\u0105cz sekcj\u0119 podgl\u0105du technologii. Nast\u0119pnie kliknij opcj\u0119 w\u0142\u0105czania pod\u015bwietlania kodu i pozw\u00f3l Dreamweaverowi zrobi\u0107 swoje. Jednak mo\u017ce by\u0107 konieczne zaktualizowanie wersji programu Dreamweaver, poniewa\u017c ta funkcja jest dost\u0119pna tylko w najnowszej wersji.\n<\/p>\n
\n Po w\u0142\u0105czeniu opcji pod\u015bwietlania kliknij dwukrotnie dowolny tag, a pod\u015bwietli on wszystkie wyst\u0105pienia tagu na bie\u017c\u0105cej stronie. Nale\u017cy jednak okre\u015bli\u0107 parametry. To narz\u0119dzie doskonale nadaje si\u0119 do szybkiego identyfikowania i przechodzenia do podobnych element\u00f3w. Po pod\u015bwietleniu dowolnego elementu u\u017cyj skr\u00f3tu klawiaturowego f3 na komputerze PC, CMD-G na komputerze Mac), aby przeskoczy\u0107 z jednego pod\u015bwietlonego elementu do nast\u0119pnego. Ponadto modyfikator shift mo\u017ce cofn\u0105\u0107 si\u0119 do poprzedniej sekcji. Co wi\u0119cej, wyr\u00f3\u017cnianie kodu dzia\u0142a r\u00f3wnie\u017c z atrybutami i warto\u015bciami znacznik\u00f3w HTML, dzi\u0119ki czemu mo\u017cna \u0142atwo rozpozna\u0107 okre\u015blone klasy.\n<\/p>\n
\n Dreamweaver to \u015bwietna platforma zawieraj\u0105ca inteligentne i kompletne kody HTML i CSS. Chocia\u017c niekt\u00f3rzy uwa\u017caj\u0105, \u017ce JavaScript nie jest kompletny. W przypadku jQuery lub Prototype w Dreamweaver powiniene\u015b wiedzie\u0107, \u017ce istniej\u0105 rozszerzenia API, kt\u00f3re dostarczaj\u0105 kody uzupe\u0142niania Javascript. Kody te przyspieszaj\u0105 proces programowania, poniewa\u017c przy u\u017cyciu tych kod\u00f3w nie ma potrzeby wpisywania ca\u0142ych skrypt\u00f3w i s\u0105 bardzo przydatne dla szybkich programist\u00f3w.\n<\/p>\n
\n Dreamweaver to jedyne oprogramowanie do tworzenia stron internetowych, kt\u00f3re umo\u017cliwia korzystanie z tego typu kod\u00f3w uzupe\u0142niania jQuery i Prototype, kt\u00f3re pomagaj\u0105 ka\u017cdemu tw\u00f3rcy stron internetowych przyspieszy\u0107 swoje zadanie i stworzy\u0107 mo\u017cliwie najlepszy produkt przy minimalnym wysi\u0142ku.\n<\/p>\n
\n CSS i JavaScript to nazwy niezale\u017cnych plik\u00f3w, kt\u00f3re widzisz po otwarciu plik\u00f3w HTML i PHP. Podczas otwierania pliku PHP mo\u017cesz go zobaczy\u0107 w g\u00f3rnej cz\u0119\u015bci okna. Poniewa\u017c wszystkie te opcje s\u0105 umieszczone z przodu, mo\u017cesz \u0142atwo prze\u0142\u0105cza\u0107 si\u0119 do tych plik\u00f3w i wprowadza\u0107 zmiany, kt\u00f3re mo\u017cna zapisa\u0107, nawet bez ich otwierania. Po klikni\u0119ciu dowolnego pliku na pasku powi\u0105zanych plik\u00f3w, kt\u00f3ry poka\u017ce jego \u017ar\u00f3d\u0142o w widoku kodu i stron\u0119 nadrz\u0119dn\u0105 w widoku projektu.\n<\/p>\n
\n Co wi\u0119cej, mo\u017cesz tak\u017ce u\u017cy\u0107 dowolnego nawigatora kodu, aby szybko uzyska\u0107 dost\u0119p do kodu \u017ar\u00f3d\u0142owego CSS, kt\u00f3ry b\u0119dzie mia\u0142 wp\u0142yw na Twoje obecne rozwi\u0105zanie. Ten szybki dost\u0119p do kodu \u017ar\u00f3d\u0142owego CSS skraca czas kodowania i pozwala tw\u00f3rcom stron internetowych skupi\u0107 si\u0119 na r\u00f3\u017cnych aspektach procesu ich tworzenia.\n<\/p>\n
\n Niezorganizowane i niechlujne wiersze kod\u00f3w pokazuj\u0105, \u017ce tw\u00f3rca tego kodowania nie by\u0142 wystarczaj\u0105co profesjonalny i wykwalifikowany, aby napisa\u0107 kody w kolejno\u015bci. Jest to r\u00f3wnie\u017c co\u015b, co bardzo si\u0119 liczy podczas optymalizacji witryny pod k\u0105tem wyszukiwarek. Jednak porz\u0105dkowanie kod\u00f3w i upi\u0119kszanie ich nie jest tak trudne, jak ludzie s\u0105dz\u0105. Dzi\u0119ki odpowiedniej znajomo\u015bci opcji programu Dreamweaver mo\u017cesz organizowa\u0107 swoje kody w locie. Wystarczy skorzysta\u0107 z opcji \u201eZastosuj formatowanie \u017ar\u00f3d\u0142a” i dostosowa\u0107 je dok\u0142adnie do swoich preferencji. Aby kodowanie by\u0142o przejrzyste i uporz\u0105dkowane, kliknij \u201eFormatuj kod \u017ar\u00f3d\u0142owy” na dole paska narz\u0119dzi kodowania, a nast\u0119pnie przejd\u017a do \u201eedycja > paski narz\u0119dzi > kodowanie” a nast\u0119pnie wybierz \u201eustawienia formatu kodu”, aby ustawi\u0107 preferowane ustawienie.\n<\/p>\n
\n Innym sposobem uporz\u0105dkowania skryptu jest uzyskanie dost\u0119pu do opcji formatowania z Polecenia > Zastosuj formatowanie \u017ar\u00f3d\u0142a lub zastosowanie jej tylko do bloku kodu, wybieraj\u0105c opcj\u0119 Zastosuj formatowanie \u017ar\u00f3d\u0142a do zaznaczenia.\n<\/p>\n
\n Bez wzgl\u0119du na to, jak bardzo Adobe wyposa\u017ca program Dreamweaver w zaawansowane narz\u0119dzia i funkcje, im wi\u0119cej pracujesz nad witrynami, tym wi\u0119cej pracy musisz wykona\u0107 po stronie kodowania. Ta rzecz mo\u017ce zwi\u0119kszy\u0107 twoje umiej\u0119tno\u015bci, ale otworzy r\u00f3wnie\u017c drzwi do nieko\u0144cz\u0105cych si\u0119 b\u0142\u0119d\u00f3w, poniewa\u017c zbyt wiele pisania kodu nie jest \u0142atwym zadaniem. Dreamweaver o tym wie i dlatego w najnowszej wersji Dreamweavera czyli Creative Cloud (CC) pojawi\u0142a si\u0119 funkcja o nazwie Linting support. Linting to podstawowe, programistyczne narz\u0119dzie do sprawdzania sk\u0142adni, kt\u00f3re jest dost\u0119pne dla CSS, HTML i JavaScript. Dzi\u0119ki temu za ka\u017cdym razem, gdy program Dreamweaver zidentyfikuje jaki\u015b problem lub b\u0142\u0105d, wysy\u0142a szereg sygna\u0142\u00f3w ostrzegawczych, zar\u00f3wno og\u00f3lnych, jak i szczeg\u00f3\u0142owych.\n<\/p>\n
\n Aby uruchomi\u0107 test, otw\u00f3rz stron\u0119 pe\u0142n\u0105 kod\u00f3w w programie Dreamweaver, a zobaczysz ma\u0142y zielony znacznik wyboru w k\u00f3\u0142ku po prawej stronie paska stanu. Je\u015bli otoczony jest tylko ma\u0142y zielony znacznik wyboru, wszystko jest w porz\u0105dku z twoim kodem. Je\u015bli czerwony krzy\u017cyk jest otoczony czerwonym k\u00f3\u0142kiem, oznacza to, \u017ce wyst\u0105pi\u0142y problemy z kodowaniem i musisz je poprawi\u0107, aby witryna dzia\u0142a\u0142a poprawnie. Ponadto, klikaj\u0105c znak b\u0142\u0119du, mo\u017ce przenie\u015b\u0107 Ci\u0119 do kolumny i wiersza, w kt\u00f3rych pope\u0142ni\u0142e\u015b b\u0142\u0105d z opisem b\u0142\u0119du. Najlepsze jest to, \u017ce ta funkcja jest nieograniczona i mo\u017cesz z niej korzysta\u0107, dop\u00f3ki nie uzyskasz zielonego znaku.\n<\/p>\n
\n Mo\u017cliwo\u015b\u0107 przegl\u0105dania jest jedn\u0105 z najbardziej podstawowych rzeczy w ka\u017cdym procesie tworzenia stron internetowych. W\u0142a\u015bnie dlatego Dreamweaver u\u0142atwi\u0142 ci prac\u0119, aby\u015b nigdy nie przegapi\u0142 tych podstawowych rzeczy przed rozpocz\u0119ciem tworzenia sieci. Otw\u00f3rz dokument w programie Dreamweaver, dla kt\u00f3rego chcesz sprawdzi\u0107 zgodno\u015b\u0107. Z paska menu, w kt\u00f3rym umieszczone s\u0105 ikony opcji widoku kodu, podzia\u0142u i projektu, znajduje si\u0119 kolejna opcja, kt\u00f3ra nazywa si\u0119 przyciskiem \u201eSprawd\u017a stron\u0119”.\n<\/p>\n
\n Po klikni\u0119ciu otworzy si\u0119 rozwijane menu, wybierz w nim sprawd\u017a zgodno\u015b\u0107 przegl\u0105darki i zobacz wynik swojej zgodno\u015bci w osobnym oknie.\n<\/p>\n
\n Podczas kodowania du\u017cej witryny cz\u0119sto zdarza si\u0119, \u017ce fragment kodu zaczyna Ci\u0119 irytowa\u0107 na ekranie. Niewiele os\u00f3b wie, \u017ce mo\u017cna zminimalizowa\u0107 ten fragment kodu, naciskaj\u0105c tylko jeden przycisk na klawiaturze. Kiedy jeste\u015b pewien, \u017ce nie ma potrzeby dokonywania \u017cadnych zmian w fragmencie kodu, po prostu wybierz ten blok i kliknij \u201e-” obok numeru linii kodu. Ten fragment zminimalizuje si\u0119 i nie b\u0119dzie ci przeszkadza\u0142, dop\u00f3ki go nie rozwiniesz.\n<\/p>\n<\/p>\n