Писане на HTML кода в Dreamweaver

Вие не трябва да използвате само WYSIWYG

Dreamweaver е страхотен редактор на WYSIWYG , но ако не сте заинтересувани да пишете уеб страници в средата "какво виждате е това, което получавате", все още можете да използвате Dreamweaver, защото е и страхотен текстов редактор. Но има много функции, които се плъзгат от пътя в редактора на кода на Dreamweaver, защото основният фокус е върху "дизайна" или WYSIWYG редактора на продукта.

Как да стигнем до кода на Dreamweaver

Ако никога не сте използвали Dreamweaver като HTML редактор, преди да не сте забелязали трите бутона в горната част на страницата: "Код", "Разделяне" и "Дизайн". Dreamweaver стартира по подразбиране в режим "Проектиране" или режим WYSIWYG. Но е лесно да преминете към преглеждането и редактирането на HTML кода. Просто кликнете върху бутона "Код". Или отидете в менюто "Изглед" и изберете "Код".

Ако просто научавате как да пишете HTML или искате да получите представа как промените ви ще повлияят на вашия документ, можете едновременно да отворите изгледа с код и дизайн. Красотата на този метод е, че можете да редактирате и в двата прозореца. Така че можете да напишете кода на маркера си за изображение в HTML и след това да използвате дизайна, за да го преместите на друго място на страницата с плъзгане и пускане.

За да ги видите едновременно:

Щом се чувствате комфортно, като използвате Dreamweaver, за да редактирате HTML кода си, можете да промените предпочитанията си, за да отворите Dreamweaver по подразбиране. Най-лесният начин е да запазите изгледа с код като работно пространство. Dreamweaver ще се отвори в последното работно пространство, което сте използвали. Ако не го направите, просто отидете в менюто Window и изберете работното пространство, което искате.

Опции за кодовия изглед

Dreamweaver е толкова гъвкав, защото има толкова много начини да го персонализирате и да го направите така, както го искате. В прозореца за опции има оцветяване на код, форматиране на кода, кодови съвети и опции за пренаписване на кодове, които можете да настроите. Но можете също да промените някои специални опции в самия изглед на кода.

След като сте в изглед с код, в лентата с инструменти има бутон "Преглед на опциите". Можете също така да прегледате опциите, като влезете в менюто "Изглед" и изберете "Опции за показване на кода". Опциите са:

Редактиране на HTML кода в изгледа на кода на Dreamweaver

Лесно е да редактирате HTML кода в изгледа на кода на Dreamweaver. Просто започнете да пишете HTML. Но Dreamweaver ви предоставя някои екстри, които го простират отвъд основния HTML редактор. Когато започнете да пишете HTML таг, въведете <. Ако направите пауза точно след този знак, Dreamweaver ще ви покаже списък с HTML маркери . Те се наричат ​​кодови съвети. За да стесните селекцията, започнете да пишете букви - Dreamweaver ще ограничи падащия списък до маркера, който отговаря на това, което пишете.

Ако сте нов в HTML, можете да прегледате списъка с HTML маркери и да изберете различни, за да видите какво правят. Dreamweaver ще продължи да ви подканя за атрибути, след като въведете маркер. Например, ако напишете " HTML маркера, като другите маркери започват с следващия. Ако продължите, като напишете буквата "m", Dreamweaver ще го намали до маркера .

Но кодовите съвети не свършват с етикетите. Можете да използвате съвети за кода, за да вмъкнете:

Ако съветите на кода не се показват, можете да натиснете Ctrl-spacebar (Windows) или Cmd-spacebar (Macintosh), за да ги покажете. Най-често срещаната причина, поради която намекването за код може да не се показва, е, ако преминете към друг прозорец, преди да завършите маркера си. Тъй като Dreamweaver изключва въвеждането на символа <, ако оставите прозореца и се върнете, ще трябва да възобновите съветите на кода.

Можете да изключите менюто за съвети чрез натискане на клавиша за евакуация.

След като въведете отварящия HTML маркер, ще трябва да го затворите. Dreamweaver прави това по естествен начин. Ако въведете опцията "Затваряне на маркери", която най-добре отговаря на вашите нужди.

Ако не сте готови да преминете към редактирането на страниците си в HTML, но искате да гледате кода, както е писано, трябва да опитате инспектора на кода. Това отваря HTML кода в отделен прозорец. Той работи точно като изглед с код, а всъщност е основно разглобяем прозорец за изглед на код за текущия документ. За да отворите кодовия инспектор, отидете в менюто Window и изберете "Code Inspector" или натиснете клавиша F10 на клавиатурата.

Dreamweaver ще форматира HTML кода, но бихте искали да се показва. Например, ако използвате три интервала за отстъпване, но никога не отлагате маркери IMG, можете да посочите тази информация за форматиране в опциите за пренаписване на кода. След това отидете в менюто "Команди" и изберете "Прилагане на форматиране на източника". Това е чудесен начин да получите код, написан от някой друг, във формат, който ви е познат.

Функцията, която много HTML кодери не знаят или не използват, е възможността да се свива HTML кодът. Това не премахва маркерите от документа, а просто ги премахнете от изгледа, така че да не разсейват това, на което работите. За свиване на кода:

  1. Изберете секцията от кода, която искате да скриете
  2. В менюто Редактиране изберете "Collapse Selection" от подменюто "Code Collapse"

По-лесният начин е да изберете кода и след това да кликнете върху иконите за свиване на код, които се появяват в канала. Можете също да кликнете с десния бутон върху избрания код и да изберете "Свиване на селекцията".

Ако искате да скриете всичко с изключение на това, което е подчертано, изберете "Свиване външна селекция" по някой от горните методи.

За да разгънете сгънатия код, просто щракнете двукратно върху него. Това отваря кода и го избира. След това можете да преместите този избор или да го изтриете или да добавите допълнителни маркери около него.

Можете да използвате функцията за свиване и разширение през цялото време на страници, в които не искате да редактирате външния шаблон. Просто изберете областта на съдържанието, която искате да редактирате и свиете навън. След това напишете своя HTML код. Можете да преглеждате страницата в изгледа "Дизайн" или да я прегледате в браузър. Сгъстеният код не се премахва от документа, а просто се скрива. Можете също така да го използвате, когато работите върху серия от елементи. Когато приключите с една, свийте я. Знаете, че сте готови, когато няма код, който да се показва.