Hindi Mo Magagamit Lamang WYSIWYG
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. Mag-click lang sa pindutan ng "Code". O, pumunta sa View menu at piliin ang "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 pindutan ng "Split" (sa pagitan ng "Code" at "Disenyo")
- Sa View menu, piliin ang "Code and Design"
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, may isang pindutang "Tingnan ang Mga Pagpipilian" sa toolbar. Maaari mo ring tingnan ang mga pagpipilian sa pamamagitan ng pagpunta sa menu ng View at pagpili sa "Mga Opsyon sa Pagtingin sa Code." Ang mga pagpipilian ay:
- Word Wrap - wrap 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 sa tabi 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.
- Nakatagong Character - 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 - nagha-highlight 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.
- Kulay ng Syntax - lumiliko o nag-off ang coding ng kulay ng iyong code. Binago mo ang mga kulay ng iyong kulay na coding sa seksyon ng pangkulay ng code ng mga kagustuhan.
- Auto Indent - awtomatikong gagawa ang iyong code indent matapos ang isang carriage return kung ang code sa itaas 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 ng ".
Ngunit ang mga pahiwatig ng code ay hindi nagtatapos sa mga tag. Maaari mong gamitin ang mga pahiwatig ng code upang maipasok ang:
Kung ang mga pahiwatig ng code ay hindi lilitaw, maaari mong pindutin ang Ctrl-spacebar (Windows) o Cmd-spacebar (Macintosh) upang maipakita ang mga ito. 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 nagtatakda ng pag-type ng character na <, kung iniwan mo ang 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 nag-type ka ng pagpipiliang "Mga Pagpipilian sa Close 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 menu ng Window at piliin ang "Inspector ng Code" o pindutin ang F10 key 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 menu ng Mga utos at piliin ang "Ilapat ang Pag-format 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
- Sa menu na I-edit, piliin ang "I-collapse ang Pinili" mula sa sub-menu na "I-collapse ang Code."
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 mo ring i-right click ang napiling code at piliin ang "I-collapse ang Pinili".
Kung nais mong itago ang lahat maliban sa kung ano ang naka-highlight, piliin ang "I-collapse 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 sa view ng Disenyo 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.