Сіз тек WYSIWYG пайдалану керек емес
Dreamweaver - бұл тамаша WYSIWYG редакторы , бірақ веб-беттерді «сіз не көресіз?» Деген ортаға жазуға мүдделі емес болсаңыз, Dreamweaver-ды да пайдалана аласыз, себебі бұл тамаша мәтін өңдегіші. Бірақ, Dreamweaver кодының редакторының жолында жүретін көптеген мүмкіндіктер бар, себебі негізгі фокус өнімнің «дизайн көрінісі» немесе WYSIWYG редакторы бөлігінде болады.
Dreamweaver коды көрінісін қалай алуға болады
Егер Dreamweaver-ты ешқашан HTML-редакторы ретінде пайдаланбаған болсаңыз, беттің жоғарғы жағындағы үш түймені ешқашан байқамаған боларсыз: «Код», «Бөлу» және «Дизайн». Dreamweaver әдепкі бойынша «Дизайн көрінісі» немесе WYSIWYG режимінде іске қосылады. Бірақ HTML-кодты қарауға және редакциялауға оңай. Тек «Код» батырмасын басыңыз. Немесе Көрініс мәзіріне өтіп, «Кодекс» тармағын таңдаңыз.
Егер сіз HTML-ды қалай жазуды үйреніп жатсаңыз немесе өзгертулеріңіз құжатқа қандай әсер ететінін түсінуді қаласаңыз, сіз код көрінісін және дизайн көрінісін бір уақытта ашуға болады. Бұл әдістің сұлулығы, сіз екі терезеде де өңдей аласыз. Осылайша HTML-тегі суреттің тегінің кодын жаза аласыз, содан кейін оны апарып тастау арқылы бетте басқа орынға жылжыту үшін дизайн көрінісін пайдаланыңыз.
Бірден екеуін де көру үшін:
- «Бөлу» батырмасын басыңыз («Код» және «Дизайн» арасындағы)
- Көрініс мәзірінен «Код және дизайн»
HTML кодын өңдеу үшін Dreamweaver пайдалану ыңғайлы болғаннан кейін, әдепкі бойынша Dreamweaver коды көрінісінде ашу үшін теңшелімдерді өзгерте аласыз. Ең оңай жолы - код көрінісін жұмыс кеңістігі ретінде сақтау. Dreamweaver пайдаланып жатқан соңғы жұмыс кеңістігінде ашылады. Егер олай болмаса, терезе мәзіріне өтіп, қалаған жұмыс кеңістігін таңдаңыз.
Кодты қарау параметрлері
Dreamweaver соншалықты икемді, себебі оны реттеудің көптеген жолдары бар және оны өзіңіз қалағандай жұмыс істей аласыз. Параметр терезесінде кодты бояуға, код пішімдеуге, кодтық кеңестерге және реттеуге болатын кодты қайта жазу опцияларына ие болады. Бірақ сіз код көрінісінің өзіндік кейбір арнайы опцияларын өзгерте аласыз.
Сіз код көрінісінде болғаннан кейін, құралдар тақтасындағы «Көрініс параметрлері» түймешігі бар. Сондай-ақ, Көрініс мәзіріне өтіп, «Кодты қарау параметрлері» параметрін таңдап, параметрлерді көруге болады. Опциялар:
- Word Wrap - HTML кодын көлденең жылжытусыз көруге мүмкіндік береді. Бұл опция сіздің кодыңыздағы ешқандай аралық қайтаруды енгізбейтінін ескеріңіз, бұл жай ғана оқуды жеңілдететін кодты көрсетеді.
- Line Numbers - кодтың жағында жолдың нөмірін көрсетеді. Көру терезесінен ұзағырақ оралған сызықтарға арналған жолдың орамының белгісі көрсетіледі.
- Жасырын таңбалар - веб-бетте көрсетілетін бос орынның орнына арнайы таңбаларды көрсетеді. Нүкте сияқты орын бос орынды ауыстырса, қос шеврон әр қойынды алмастырады, ал сынақ немесе абзац маркер әр жол үзілімінің орнын ауыстырады.
- Жарамсыз кодты бөлектеу - сары түспен дұрыс емес HTML түсіндіреді. Егер сіз сары тегті таңдасаңыз, Property Inspector сізге оны қалай түзетуге болатыны туралы кеңестер береді.
- Синтаксис бояу - кодтың түстің кодталуын қосады немесе өшіреді. Түстер кодының түстерін теңшелімдердің код бояу бөлімінде өзгертесіз.
- Auto Indent - кодының шегінісі болса, кодының қайтаруынан кейін кодының шегінісі автоматты түрде жасалады. Параметрлердің код пішімдеу бөліміндегі қойынды өлшемін өзгерту арқылы шегінісінің өлшемін өзгертуге болады.
Dreamweaver коды көрінісінде HTML кодын өзгерту
HTML кодын Dreamweaver кодының көрінісінде өңдеу оңай. Тек HTML-ге теруді бастаңыз. Бірақ Dreamweaver сізге негізгі HTML редакторынан тыс кеңейтетін кейбір қосымша мүмкіндіктер береді. HTML тегті жазуды бастаған кезде <. Егер осы таңбадан кейін бірден кідірсеңіз, Dreamweaver сізге HTML тегтерінің тізімін көрсетеді. Бұл кодтық кеңестер деп аталады. Таңдауды тарылту үшін әріптерді теруді бастаңыз - Dreamweaver түсіретін тізімді енгізген нәрсеге сәйкес келетін тегке тарылтады.
HTML-ға жаңа болсаңыз, HTML тегтерінің тізімін айналдыра аласыз және олар не істеп жатқанын көру үшін түрлі нұсқаларды таңдай аласыз. Dreamweaver сіз тегті тергеннен кейін атрибуттарға сұрайды. Мысалы, егер сіз « тегіне дейін тарылтады.
Бірақ кодтық кеңестер тегтерде аяқталмайды. Кодты енгізу үшін кеңестерді қолдануға болады:
Егер кодтың кеңестері пайда болмаса, оларды көрсету үшін Ctrl-бос орын пернелерін (Windows) немесе Cmd-бос орынды (Macintosh) баса аласыз. Тордың аяқталуына дейін басқа терезеге ауыссаңыз, кодты нақтылаудың пайда болмауы мүмкін. Dreamweaver таңбаны теруді өшіргендіктен, терезені қалдырсаңыз және қайтарылсаңыз, кодтық кеңестерді қайта іске қосыңыз.
Құпия сөз хабары мәзірін құсбелгіні қою арқылы өшіруге болады.
Ашылған HTML тегіңізді енгізгеннен кейін оны жабу керек. Dreamweaver мұны табиғи түрде жасайды. Егер сіз «Жабу тегтері» параметрін сіздің қажеттіліктеріңізге сай келетін опцияны енгізсеңіз.
Егер сіз беттерді HTML-ге редакциялауға ауысуға дайын болмасаңыз, бірақ кодты жазылғандай көргіңіз келсе, код инспекторын көріңіз. Бұл HTML кодын бөлек терезеде ашады. Бұл код көрінісі сияқты жұмыс істейді, және шын мәнінде, ағымдағы құжат үшін алынбалы код көрінісі терезесі болып табылады. Код инспекторын ашу үшін, Терезе мәзіріне өтіп, «Код инспекторын» таңдаңыз немесе пернетақтада F10 пернесін басыңыз.
Dreamweaver HTML кодын пішімдейді, бірақ сіз оны көргіңіз келеді. Мысалы, шегініс үшін 3 бос орынды қолдансаңыз, бірақ ешқашан IMG тегтерін шығармасаңыз, кодты қайта жазу параметрлерінде пішімдеу туралы ақпаратты көрсетуге болады. Содан кейін Командалар мәзіріне өтіп, «Бастапқы пішімдеуді қолдану» пәрменін таңдаңыз. Бұл сіз таныстырылған пішімге басқа біреудің кодын жазудың тамаша тәсілі.
Көптеген HTML кодерлері туралы білмейтін немесе пайдаланбайтын функция - HTML кодын құлату мүмкіндігі. Бұл құжаттың тегтерін алып тастамайды, бірақ олар сіз жұмыс істеп жатқан нәрселерге шатыстырмау үшін оларды тек көзден алып тастайды. Кодты құлату үшін:
- Жасырғыңыз келетін код бөлігін таңдаңыз
- Өңдеу мәзірінде «Кодты кішірейту» ішкі мәзірінен «Таңдауды кішірейту» тармағын таңдаңыз
Оңайырақ әдіс - кодты таңдап, одан кейін өрнекте пайда болатын кодтың құлау белгішесін басыңыз. Сондай-ақ, таңдалған кодты тінтуірдің оң жақ батырмасымен басып, «Таңдауды кішірейту» параметрін таңдаңыз.
Егер сіз бөлектелген нәрсенің бәрін жасырғыңыз келсе, жоғарыда аталған әдістердің кез-келгенінде «Сыртқы іріктеуді кішірейту» параметрін таңдаңыз.
Ұрылған кодты кеңейту үшін оны екі рет басыңыз. Бұл кодты ашады және оны таңдайды. Содан кейін сіз сол таңдауды жылжытуыңызға немесе оны жоюға немесе оған қосымша тегтерді қоса аласыз.
Сыртқы үлгіні өңдегіңіз келмейтін беттерде барлық уақытта тоқтап, кеңейту мүмкіндігін пайдалануға болады. Сіз редакциялауға және сыртқа тастағыңыз келетін мазмұнды таңдаңыз. Содан кейін HTML-ды жазыңыз. Сіз әлі де бетті Құрастырушы көрінісінде көре аласыз немесе оны браузерде қарап алуыңыз мүмкін. Тыйым салынған код құжаттан алынып тасталмаған, көріністен жасырылған. Сондай-ақ, сіз бірқатар элементтерде жұмыс істеп жатқанда оны пайдалануға болады. Біреуін аяқтағанда, оны тасалау керек. Сізде код көрсетілмеген кезде сіз жасағаныңызды білесіз.