Ang Dreamweaver ay isang mahusay na editor ng WYSIWYG, ngunit kung hindi ka interesado sa pagsulat ng mga web page sa isang "kung ano ang nakikita mo ay kung ano ang iyong nakukuha" sa kapaligiran, maaari mo pa ring gamitin ang Dreamweaver dahil ito rin ay isang mahusay na editor ng teksto. Ngunit mayroong maraming mga tampok na slip sa gilid ng daan sa loob ng Dreamweaver code editor dahil ang pangunahing focus ay sa "view ng disenyo" o WYSIWYG editor bahagi ng produkto.
Paano Kumuha Sa Dreamweaver Code View
Kung hindi mo pa ginamit ang Dreamweaver bilang isang editor ng HTML bago mo pa napansin ang tatlong mga pindutan sa tuktok ng pahina: "Code," "Split," at "Disenyo." Nagsisimula ang Dreamweaver bilang default sa "Disenyo ng pagtingin" o mode ng WYSIWYG. Ngunit madaling lumipat sa pagtingin at pag-edit ng HTML code. I-click lamang ang Code na pindutan. O, pumunta sa Tingnan menu at piliin Code.
Kung natututunan mo lamang kung paano sumulat ng HTML o nais mong makakuha ng pakiramdam kung paano maapektuhan ng iyong mga pagbabago ang iyong dokumento, maaari mong buksan ang view ng code at pagtingin sa disenyo sa parehong oras. Ang kagandahan ng pamamaraang ito ay maaari mong i-edit sa parehong bintana pati na rin. Kaya maaari mong isulat ang code para sa iyong imaheng tag sa HTML at pagkatapos ay gamitin ang view ng disenyo upang ilipat ito sa ibang lokasyon sa pahina na may drag and drop.
Upang tingnan ang parehong nang sabay-sabay, alinman sa:
- Mag-click sa Hatiin pindutan (sa pagitan Code at Disenyo).
- Nasa Tingnan menu, piliin Code at Disenyo.
Sa sandaling kumportable ka sa paggamit ng Dreamweaver upang i-edit ang iyong HTML code, maaari mong baguhin ang iyong mga kagustuhan upang buksan ang Dreamweaver sa view ng code bilang default. Ang pinakamadaling paraan ay ang i-save ang view ng code bilang isang workspace. Magbubukas ang Dreamweaver sa huling workspace na iyong ginagamit. Kung hindi, pumunta lamang sa menu ng Window, at piliin ang workspace na gusto mo.
Mga Opsyon sa Pagtingin sa Code
Ang Dreamweaver ay kaya kakayahang umangkop dahil mayroon itong maraming mga paraan upang i-customize ito at gawin itong gumagana sa paraang nais mo. Sa window ng mga pagpipilian, may mga kulay ng code, pag-format ng code, mga pahiwatig ng code, at mga pagpipilian sa muling pagsusulat ng code na maaari mong ayusin. Ngunit maaari mo ring baguhin ang ilang mga espesyal na pagpipilian sa loob ng pagtingin ng code mismo.
Sa sandaling nasa view ng code, mayroong isang Tingnan ang Opsyon na pindutan sa toolbar. Maaari mo ring tingnan ang mga pagpipilian sa pamamagitan ng pagpunta sa Tingnan menu at pagpili Mga Opsyon sa Pagtingin sa Code. Ang mga pagpipilian ay:
- Word wrap - Binabalot ang HTML code upang maaari mong tingnan ito nang hindi mag-scroll nang pahalang. Tandaan na ang pagpipiliang ito ay hindi magpasok ng anumang pagbalik ng carriage sa iyong code, ipinapakita lamang nito ang code upang mas madaling basahin.
- Mga Numero ng Linya - Nagpapakita ng mga numero ng linya kasama ang panig ng code. Nagpapakita ito ng isang simbolo ng pambalot ng linya para sa mga linya na nagbabalot ng mas mahaba kaysa sa window ng pagtingin.
- Mga Nakatagong Karakter - Nagpapakita ng mga espesyal na character sa halip na whitespace na ipapakita sa isang web page. Tulad ng isang tuldok na pumapalit ng isang puwang, isang double chevron ay pumapalit sa bawat tab, at ang isang piloto o pamagat na pamagat ay pumapalit sa bawat linya ng pahinga.
- I-highlight ang Di-wastong Code - Nagtatampok ng HTML na hindi tama sa dilaw. Kung pinili mo ang dilaw na tag, ang Property Inspector ay magbibigay sa iyo ng mga pahiwatig kung paano ayusin ito.
- Pangkulay ng Syntax - Ino-on o i-off ang color coding ng iyong code. Binago mo ang mga kulay ng iyong kulay na coding sa seksyon ng pangkulay ng code ng mga kagustuhan.
- Auto Indent - Ginagawa ang iyong code indent awtomatikong pagkatapos ng isang karwahe bumalik kung ang code sa itaas ito ay naka-indent. Maaari mong baguhin ang laki ng indent sa pamamagitan ng pagbabago ng laki ng tab sa seksyon ng pag-format ng code ng mga kagustuhan.
Pag-edit ng HTML Code sa Dreamweaver Code View
Madaling i-edit ang HTML code sa view ng code ng Dreamweaver. Lamang simulan ang pag-type ng iyong HTML. Ngunit ang Dreamweaver ay nagbibigay sa iyo ng ilang mga extra na pahabain ito nang higit sa isang pangunahing editor ng HTML. Kapag nagsimula ka magsulat ng HTML na tag, nagta-type ka <. Kung mag-pause ka pagkatapos ng character na iyon, ipapakita sa iyo ng Dreamweaver ang isang listahan ng mga tag na HTML. Ang mga ito ay tinatawag na pahiwatig ng code. Upang paliitin ang pagpili, simulan ang pag-type ng mga titik - Ang Dreamweaver ay paliitin ang drop-down na listahan sa tag na akma sa kung ano ang iyong nai-type.
Kung bago ka sa HTML, maaari kang mag-scroll sa listahan ng mga tag na HTML at pumili ng iba't ibang mga bago upang makita kung ano ang ginagawa nila. Ang Dreamweaver ay patuloy na mag-prompt sa iyo para sa mga katangian sa sandaling na-type mo ang isang tag. Halimbawa, kung nagta-type ka <>, Dreamweaver ay bumaba sa HTML tag, kasama ang iba pang mga tag na nagsisimula sa sinusubaybayan ko. Kung magpapatuloy ka sa pamamagitan ng pag-type ng sulat m, Dreamweaver ay paliitin ito pababa sa tag.
Ngunit ang mga pahiwatig ng code ay hindi nagtatapos sa mga tag. Maaari mong gamitin ang mga pahiwatig ng code upang maipasok ang:
- Mga katangian ng HTML
- Mga pangalan ng Class at ID
- Mga katangian ng CSS
Kung ang mga pahiwatig ng code ay hindi lilitaw, maaari mong pindutin Ctrl-spacebar (Windows) o Cmd-spacebar (Macintosh) upang maipakita sa kanila. Ang pinaka-karaniwang dahilan kung bakit ang isang pahiwatig ng code ay maaaring hindi lumitaw ay kung inilipat ka sa ibang window bago pagtatapos ng iyong tag. Dahil ang Dreamweaver ay nag-aalis ng pag-type ng character <, kung umalis ka sa window at bumalik, kailangan mong muling ilunsad ang mga pahiwatig ng code.
Maaari mong i-off ang menu ng mga pahiwatig ng code sa pamamagitan ng pagpindot sa escape key.
Sa sandaling nai-type mo ang iyong HTML tag ng pagbubukas, kakailanganin mong isara ito. Ginagawa ito ng Dreamweaver sa natural na paraan. Kung na-type mo ang Isara ang Mga Tag pagpipilian na pinakamahusay na nababagay sa iyong mga pangangailangan.
Kung hindi ka pa handa na lumipat sa pag-edit ng iyong mga pahina sa HTML ngunit nais mong panoorin ang code na nakasulat na, dapat mong subukan ang code inspector. Binubuksan nito ang HTML code sa isang hiwalay na window. Gumagana ito tulad ng pagtingin sa code, at, sa katunayan, ay karaniwang isang detachable code view window para sa kasalukuyang dokumento.Upang buksan ang inspector ng code, pumunta sa Window menu at piliin Inspektor ng Code o pindutin ang F10 susi sa iyong keyboard.
Ang Dreamweaver ay mag-format ng HTML code gayunpaman nais mong ipakita ito. Halimbawa, kung gumamit ka ng 3 mga puwang upang indent, ngunit hindi indent tag ng IMG, maaari mong tukuyin ang impormasyon sa pag-format sa mga pagpipilian sa muling pagsusulat ng code. Pagkatapos ay pupunta ka sa Mga utos menu at piliin Ilapat ang Formatting ng Pinagmulan. Ito ay isang mahusay na paraan upang makakuha ng code na isinulat ng isang tao sa isang format na pamilyar sa iyo.
Ang isang tampok na maraming mga coder ng HTML na hindi alam tungkol sa o hindi gumagamit ay ang kakayahang tiklupin ang HTML code. Hindi nito inaalis ang mga tag mula sa dokumento, ngunit alisin lamang ang mga ito mula sa pagtingin upang hindi sila nakakagambala sa kung ano ang iyong pinagtatrabahuhan. Upang bawiin ang iyong code:
- Piliin ang seksyon ng code na nais mong itago.
- Nasa I-edit menu, pumili I-collapse ang Pinili galing sa I-collapse ang Code sub-menu
Ang isang mas madaling paraan ay upang piliin ang code at pagkatapos ay mag-click sa mga code ng pagbagsak ng code na lumilitaw sa kanal. Maaari ka ring mag-right click sa napiling code at pumili I-collapse ang Pinili.
Kung nais mong itago ang lahat maliban kung ano ang naka-highlight, pumili Tiklupin ang Outside Selection sa alinman sa mga pamamaraan sa itaas.
Upang mapalawak ang na-collapse na code, i-double click lang ito. Binubuksan nito ang code at pinipili ito. Pagkatapos ay maaari mong ilipat ang pagpili na iyon o tanggalin ito o magdagdag ng mga karagdagang tag sa paligid nito.
Maaari mong gamitin ang pagbagsak at palawakin ang tampok sa lahat ng oras sa mga pahina kung saan hindi mo nais na i-edit ang panlabas na template. Piliin mo lamang ang lugar ng nilalaman na gusto mong i-edit at tiklupin sa labas. Pagkatapos isulat ang iyong HTML. Maaari mo pa ring tingnan ang pahina Disenyo tingnan o i-preview ito sa isang browser. Ang natanggal na code ay hindi inalis mula sa dokumento, nakatago lamang mula sa view. Maaari mo ring gamitin ito kapag nagtatrabaho ka sa isang serye ng mga item. Kapag natapos mo na ang isa, tiklupin ito. Alam mo tapos ka na kapag walang nagpapakita ng code.
