Pagsulat HTML Code sa Dreamweaver

Dili Kinahanglan Ka nga Gamiton WYSIWYG

Ang Dreamweaver usa ka talagsaon nga editor sa WYSIWYG , apan kung dili ka interesado sa pagsulat sa mga web page sa usa ka "unsay imong nakita mao ang imong makuha" nga palibot, mahimo pa nimo gamiton ang Dreamweaver tungod kay kini usa usab ka talagsaong editor sa text. Apan adunay daghan nga mga bahin nga dili mapadpad sa daplin sa daplin sa Dreamweaver code editor tungod kay ang pangunang tumong mao ang "design view" o bahin sa editor sa WYSIWYG.

Unsaon Pag-adto sa Dreamweaver Code View

Kon wala ka magamit sa Dreamweaver isip usa ka editor sa HTML sa wala ka pa gani nakamatikod sa tulo ka mga butang sa ibabaw sa panid: "Code," "Split," ug "Design." Ang Dreamweaver nagsugod pinaagi sa default sa "Design view" o WYSIWYG mode. Apan sayon ​​ang pagbalhin sa pagtan-aw ug pag-edit sa HTML code. I-klik lang ang "Code" button. O, pag-adto sa View menu ug pilia ang "Code."

Kon nahibal-an mo lang kung unsaon pagsulat ang HTML o gusto nimo nga masabtan kung unsa ang epekto sa imong mga pagbag-o sa imong dokumento, mahimo nimo mabuksan ang pagtan-aw sa code ug pagtan-aw sa disenyo sa samang higayon. Ang katahum sa kini nga pamaagi mao nga mahimo ka usab mag-edit sa duha ka mga bintana. Busa mahimo ka magsulat sa code alang sa imong tag sa imahen sa HTML ug dayon gamiton ang pagtan-aw sa disenyo aron ibalhin kini sa laing lugar sa panid nga may drag and drop.

Sa pagtan-aw sa duha ka higayon, bisan:

Sa higayon nga komportable ka sa paggamit sa Dreamweaver aron ma-edit ang imong HTML code, mahimo nimong usbon ang imong mga gusto sa pag-abli sa Dreamweaver sa pagtan-aw sa code pinaagi sa default. Ang labing sayon ​​nga paagi mao ang pagluwas sa pagtan-aw sa code isip workspace. Ang Dreamweaver magbukas sa katapusang workspace nga imong gigamit. Kung dili, moadto lamang sa menu sa Window, ug pilia ang workspace nga gusto nimo.

Code View Options

Ang Dreamweaver maayo kaayo tungod kay kini adunay daghan nga mga paagi sa pagpahiangay niini ug paghimo niini nga trabaho sa paagi nga gusto nimo niini. Diha sa bintana sa mga kapilian, adunay mga kolor sa code, pag-format sa kodigo, mga pahibalo sa code, ug mga pagsulat sa pagsulat sa mga code nga mahimo nimong i-adjust. Apan mahimo usab nimo usbon ang pipila ka mga espesyal nga mga kapilian sulod sa pagtan-aw sa code mismo.

Sa higayon nga anaa ka sa code view, adunay "View Options" button sa toolbar. Mahimo usab nimo nga makita ang mga kapilian pinaagi sa pagsulod sa View menu ug pagpili sa "Code View Options." Ang mga kapilian mao ang:

Pag-edit sa HTML Code sa Dreamweaver Code View

Sayon nga pag-edit sa code sa HTML sa pagtan-aw sa code sa Dreamweaver. Pagsugod lang sa pag-type sa imong HTML. Apan ang Dreamweaver naghatag kaninyo og pipila ka mga ekstra nga nagpalapad niini labaw pa sa usa ka batid nga editor sa HTML. Sa diha nga magsugod ka sa pagsulat sa usa ka tag sa HTML, ikaw nag-type <. Kon mohunong ka pagkahuman human niana nga kinaiya, ang Dreamweaver magpakita kanimo og listahan sa mga tag sa HTML . Gitawag kini nga code hints. Aron makunhuran ang pagpili, sugdi ang pag-type sa mga letra - Ang Dreamweaver magapamenos sa lista sa drop-down sa tag nga haum sa imong pag-type.

Kon bag-o ka sa HTML, mahimo ka nga mag-scroll sa listahan sa mga tag sa HTML ug mopili sa nagkalain-lain aron makita kung unsa ang ilang gibuhat. Ang Dreamweaver magpadayon sa pag-aghat kanimo sa mga hiyas sa higayon nga imong gi-type ang tag. Pananglitan, kon imong i-type ang " HTML tag, uban sa ubang mga tag nagsugod sa akong pagsunod. Kon magpadayon ka pinaagi sa pag-type sa letra nga "m", ang Dreamweaver magapugong niini ngadto sa tag .

Apan ang mga pahibalo sa code dili matapos diha sa mga tag. Mahimo nimong gamiton ang code hints aron ipasulod:

Kung ang mga pahayag sa code dili makita, mahimo nimo nga maigo ang Ctrl-spacebar (Windows) o Cmd-spacebar (Macintosh) aron ipakita kini. Ang labing komon nga rason nganong ang usa ka code hint dili makita kung ikaw mag-usab sa lain nga bintana sa dili pa matapos ang imong tag. Tungod kay ang Dreamweaver nagpasiugda sa pag-type sa kinaiya <, kung ikaw mobiya sa bintana ug mobalik, kinahanglang ipalupad pag-usab ang code hints.

Mahimo nimo mapalong ang code code hints pinaagi sa pag-igo sa escape key.

Sa higayon nga imong gi-type ang imong opening tag sa HTML, kinahanglan nimo nga tapuson kini. Ang Dreamweaver naghimo niini sa natural nga paagi. Kon imong i-type ang "Close Tags option nga labing angay sa imong mga panginahanglan.

Kon dili ka pa andam sa pagbalhin sa pag-edit sa imong mga panid sa HTML apan gusto nimo nga tan-awon ang code ingon nga kini nahisulat, imong sulayan ang code inspector. Kini nagbukas sa HTML code sa laing window. Nagbuhat kini sama sa paglantaw sa code, ug, sa pagkatinuod, mao ang batakan nga usa ka window sa panglantaw sa detachable alang sa kasamtangan nga dokumento. Sa pagbukas sa code inspector, adto sa Window nga menu ug pagpili sa "Code Inspector" o pag-hit sa F10 key sa imong keyboard.

Ang Dreamweaver mag-format sa HTML code bisan gusto nimo nga gipakita kini. Pananglitan, kon mogamit ka ug tulo ka mga luna aron sa indent, apan dili gayud mag-indent sa mga tag sa IMG, mahimo nimo mahibal-an nga ang format nga impormasyon sa code nga mga opsiyon sa pagsulat pag-usab. Dayon moadto ka sa Commands menu ug pilia ang "Apply Source Formatting." Kini usa ka maayo nga paagi sa pagkuha code nga gisulat sa usa ka tawo sa usa ka format nga pamilyar kanimo.

Ang usa ka bahin nga daghang mga coder sa HTML nga wala mahibal-an o wala magamit mao ang abilidad sa pagkawala sa code sa HTML. Dili kini magwagtang sa mga tag gikan sa dokumento, apan kuhaa kini gikan sa panglantaw aron kini dili makabalda sa imong ginabuhat. Aron mapukan ang imong code:

  1. Pilia ang seksyon sa code nga gusto nimong itago
  2. Sa Edit nga menu, pagpili sa "Collapse Selection" gikan sa "Code Collapse" sub-menu

Ang usa ka mas sayon ​​nga paagi mao ang pagpili sa code ug dayon i-klik ang code collapse icons nga makita sa kanal. Mahimo usab nimo pag-klik ang saktong code ug pilia ang "Collapse Selection".

Kon gusto nimong itago ang tanan gawas sa gipasiugda, pilia ang "Collapse Outside Selection" sa bisan unsang mga pamaagi sa ibabaw.

Aron mapalapad ang nahugno nga code, kaduha i-klik kini. Nag-abli kini sa code ug gipili kini. Dayon mahimo nimo kining lihokon o kuhaa kini o pagdugang og mga tag sa palibot niini.

Mahimo nimong gamiton ang pagkahugno ug pagpalapad nga bahin sa tanan nga mga panahon sa mga panid diin dili nimo gusto nga usbon ang eksternal nga template. Gipili mo lang ang sulod nga dapit nga gusto nimo i-edit ug mahugno sa gawas. Dayon isulat ang imong HTML. Mahimo mo pa tan-awon ang pahina sa Disenyo sa pagtan-aw o i-preview kini sa usa ka browser. Ang nahugno nga code wala gikuha gikan sa dokumento, nga gitago lamang sa panglantaw. Mahimo usab nimo kini gamiton samtang nagtrabaho ka sa usa ka serye sa mga butang. Kon nahuman ka na, lumpag kini. Nahibal-an nimo nga nahuman ka kung walay code nga nagpakita.