Dreamweaver е страхотен редактор на WYSIWYG, но ако не сте заинтересувани да пишете уеб страници в средата "какво виждате е това, което получавате", все още можете да използвате Dreamweaver, защото е и страхотен текстов редактор. Но има много функции, които се плъзгат от пътя в редактора на кода на Dreamweaver, защото основният фокус е върху "дизайна" или WYSIWYG редактора на продукта.
Как да стигнем до кода на Dreamweaver
Ако никога не сте използвали Dreamweaver като HTML редактор, преди да не сте забелязали трите бутона в горната част на страницата: "Код", "Разделяне" и "Дизайн". Dreamweaver стартира по подразбиране в режим "Проектиране" или режим WYSIWYG. Но е лесно да преминете към преглеждането и редактирането на HTML кода. Просто кликнете върху код бутон. Или отидете на изглед и изберете код.
Ако просто научавате как да пишете HTML или искате да получите представа как промените ви ще повлияят на вашия документ, можете едновременно да отворите изгледа с код и дизайн. Красотата на този метод е, че можете да редактирате и в двата прозореца. Така че можете да напишете кода на маркера си за изображение в HTML и след това да използвате дизайна, за да го преместите на друго място на страницата с плъзгане и пускане.
За да ги видите едновременно:
- Кликнете върху разцепване бутон (между код и Дизайн).
- В изглед изберете, изберете Кодекс и дизайн.
Щом се чувствате комфортно, като използвате Dreamweaver, за да редактирате HTML кода си, можете да промените предпочитанията си, за да отворите Dreamweaver по подразбиране. Най-лесният начин е да запазите изгледа с код като работно пространство. Dreamweaver ще се отвори в последното работно пространство, което сте използвали. Ако не го направите, просто отидете в менюто Window и изберете работното пространство, което искате.
Опции за кодовия изглед
Dreamweaver е толкова гъвкав, защото има толкова много начини да го персонализирате и да го направите така, както го искате. В прозореца за опции има оцветяване на код, форматиране на кода, кодови съвети и опции за пренаписване на кодове, които можете да настроите. Но можете също да промените някои специални опции в самия изглед на кода.
След като сте в изглед с код, има a Преглед на опциите бутон в лентата с инструменти. Можете също така да прегледате опциите, като влезете в изглед меню и избор Опции за кодовия изглед. Опциите са:
- Word Wrap - обвива HTML кода, така че да можете да го разглеждате без хоризонтално превъртане. Имайте предвид, че тази опция не вмъква никакви каталожни данни в кода ви, просто показва кода, така че да е по-лесен за четене.
- Номерата на линиите - показва номерата на редовете от страната на кода. Показва символ за обвиване на линиите, които обвиват по-дълго време от прозореца за преглед.
- Скрити герои - показва специални знаци вместо празно пространство, което ще се показва на уеб страница. Такъв като точка замества пространство, двоен шеврон замества всеки раздел, а пилотьор или маркер за параграфи заменя всяко прекъсване на линията.
- Маркирайте невалиден код - подчертава HTML, който е неправилен в жълто. Ако изберете жълтия маркер, Инспекторът на собствеността ще Ви даде съвети как да го коригирате.
- Синтаксис оцветяване - включва или изключва цветовото кодиране на вашия код. Променяте цветовете на цветовото си кодиране в секцията за оцветяване на кода на предпочитанията.
- Автоматично отстъп - прави кода ти автоматично след връщане на карето, ако кодът над него е отместен. Можете да промените размера на тирето, като промените размера на раздела в секцията за форматиране на кода на предпочитанията.
Редактиране на HTML кода в изгледа на кода на Dreamweaver
Лесно е да редактирате HTML кода в изгледа на кода на Dreamweaver. Просто започнете да пишете HTML. Но Dreamweaver ви предоставя някои екстри, които го простират отвъд основния HTML редактор. Когато започнете да пишете HTML маркер, напишете <, Ако направите пауза точно след този знак, Dreamweaver ще ви покаже списък с HTML маркери. Те се наричат кодови съвети. За да стесните селекцията, започнете да пишете букви - Dreamweaver ще ограничи падащия списък до маркера, който отговаря на това, което пишете.
Ако сте нов в HTML, можете да прегледате списъка с HTML маркери и да изберете различни, за да видите какво правят. Dreamweaver ще продължи да ви подканя за атрибути, след като въведете маркер. Например, ако въведете <>, Dreamweaver ще падне на HTML маркер, с другите маркери, започващи с следващия. Ако продължите, въведете буквата mDreamweaver ще го намали до маркер.
Но кодовите съвети не свършват с етикетите. Можете да използвате съвети за кода, за да вмъкнете:
- HTML атрибути
- Клас и идентификационни имена
- CSS свойства
Ако съветите на кода не се показват, можете да ги ударите Ctrl-интервала (Windows) или Cmd-интервала (Macintosh), за да ги покажат. Най-често срещаната причина, поради която намекването за код може да не се показва, е, ако преминете към друг прозорец, преди да завършите маркера си. Тъй като Dreamweaver изключва въвеждането на героя <, ако напуснете прозореца и се върнете, ще трябва да възстановите съветите за кода.
Можете да изключите менюто за съвети чрез натискане на клавиша за евакуация.
След като въведете отварящия HTML маркер, ще трябва да го затворите. Dreamweaver прави това по естествен начин. Ако въведете Затвори етикетите която най-добре отговаря на вашите нужди.
Ако не сте готови да преминете към редактирането на страниците си в HTML, но искате да гледате кода, както е писано, трябва да опитате инспектора на кода. Това отваря HTML кода в отделен прозорец. Той работи точно като изглед с код, а всъщност е основно разглобяем прозорец за изглед на код за текущия документ.За да отворите кодовия инспектор, отидете на прозорец меню и изберете Кодекс инспектор или натиснете клавиша F10 ключ на клавиатурата.
Dreamweaver ще форматира HTML кода, но бихте искали да се показва. Например, ако използвате три интервала за отстъпване, но никога не отлагате маркери IMG, можете да посочите тази информация за форматиране в опциите за пренаписване на кода. След това отидете на команди меню и изберете Прилагане на форматиране на източника, Това е чудесен начин да получите код, написан от някой друг, във формат, който ви е познат.
Функцията, която много HTML кодери не знаят или не използват, е възможността да се свива HTML кодът. Това не премахва маркерите от документа, а просто ги премахнете от изгледа, така че да не разсейват това, на което работите. За свиване на кода:
- Изберете секцията от кода, която искате да скриете.
- В редактиране меню, изберете Сгъване на селекцията от Колационен колапс подменю
По-лесният начин е да изберете кода и след това да кликнете върху иконите за свиване на код, които се появяват в канала. Можете също да кликнете с десния бутон върху избрания код и да изберете Сгъване на селекцията.
Ако искате да скриете всичко с изключение това, което е подчертано, изберете Сгъване на външната селекция в който и да е от горните методи.
За да разширите сгънатия код, просто щракнете двукратно върху него. Това отваря кода и го избира. След това можете да преместите този избор или да го изтриете или да добавите допълнителни маркери около него.
Можете да използвате функцията за свиване и разширение през цялото време на страници, в които не искате да редактирате външния шаблон. Просто изберете областта на съдържанието, която искате да редактирате и свиете навън. След това напишете своя HTML код. Все още можете да видите страницата в Дизайн да го прегледате или да го прегледате в браузър. Сгъстеният код не се премахва от документа, а просто се скрива. Можете също така да го използвате, когато работите върху серия от елементи. Когато приключите с една, свийте я. Знаете, че сте готови, когато няма код, който да се показва.
