10 хаків про Dreamweaver – найкращий редактор коду для веб-розробників
Dreamweaver є основоположником усіх веб-дій в Інтернеті. Для більшості людей Dreamweaver — це просто інструмент для створення веб-сайтів, але лише професіонали знають, що Dreamweaver — це потужний інструмент.
Dreamweaver має багато функцій і параметрів, які роблять його найулюбленішим інструментом веб-розробників. Безсумнівно, це програмне забезпечення має найвідомішу IDE (інтегроване середовище розробки), якої не має жодне інше програмне забезпечення для веб-розробки на сучасному ринку. Як інструменти для розробки, співпраці та програмування, Dreamweaver надає веб-розробникам пристойний діапазон для гри. Ось чому веб-розробникам-початківцям важливо знати, як вони можуть максимально використати Dreamweaver.
Усі аспекти, які відрізняють досвідчених веб-розробників від звичайних веб-розробників, приховані під шарами прикро інтуїтивно зрозумілих меню, тому новим веб-розробникам важко вдосконалювати свої навички. Однак у цій статті я збираюся показати вам ті приховані та потужні функції Dreamweaver, які дуже важливо знати, щоб задовольнити вимоги сучасного ринку. Ця стаття допоможе вам отримати швидкий доступ до цих функцій і надасть вам десять найкращих корисних хаків, які покращать якість вашої роботи та значно покращать кодування.
1 Динамічний перегляд і Live View:
Всі знають, що Dreamweaver пропонує статичний перегляд або наші відкриті файли. Однак залишається без відповіді питання про динамічні перегляди таких програм, як WordPress. Щоб установити динамічний вигляд, нам потрібно повідомити Dreamweaver про параметри, які слід використовувати для динамічного перегляду. Щоб налаштувати це, перейдіть до налаштувань запиту HTTP, натиснувши «Перегляд» > «Живий перегляд» > меню параметрів, а потім введіть команду GET або POST, яка потрібна для правильного перегляду програми.
Після цього перемкніть Live View у Dreamweaver, який замінить панель Design View на живу, ідеально відтворену WebKit вашої сторінки. Потім доповніть його живим Javascript, маніпуляціями з DOM, запитами до бази даних, кодом на стороні сервера та відтвореним CSS замість піктограми-заповнювача з інтерфейсу Design View.
Навігація — це односторінковий компонент адаптивного веб-сайту, який повинен мати можливість адаптації, щоб задовольнити потреби невеликих екранів, у яких Bootstrap може дуже допомогти. Bootstrap дозволяє легко налаштувати панель навігації та переключитися з горизонтальної смуги на вертикальну панель. Причина полягає в тому, що Dreamweaver підтримує всю гнучкість навігації Bootstrap, і це проста у використанні функція, коли мова заходить про розробку ефективного, адаптивного веб-сайту.
Щоб дати вам короткий огляд, нижче наведено коротку демонстрацію того, як використовувати Bootstrap у вашій розробці.
Покращення навігації за допомогою Bootstrap починається з діалогового вікна нового документа Dreamweaver. Просто клацніть кнопку Bootstrap Framework у діалоговому вікні нового документа, а також поставте прапорець біля опції макета попередньої збірки, щоб використовувати повнофункціональні параметри навігації, наприклад;
- Стандартний, невпорядкований і семантично правильний список посилань.
- Область для розміщення логотипу для розміщення образу бренду.
- Готовий активувати кнопку надсилання та поле пошуку.
- Попередні налаштування для спадних меню для елементів піднавігації та доповніть їх роздільниками.
- Лівий і правий розділи, які можна вирівняти за потреби.
- Вбудована швидкість реагування.
Якщо вам важко, є інший варіант. Dreamweaver дозволяє створювати налаштовану панель навігації. Якщо ви віддаєте перевагу темній палітрі, просто додайте клас .navbar-inverse до свого
тег. Ви навіть можете грати з ним. Якщо ви хочете, щоб навігація завжди відображалася над сторінкою, тоді введіть .navbar-fixe-top. Якщо ви хочете показати його нижче, введіть .navbar-fixed-bottom. Усі ці класи Bootstrap є стандартними, і підказка коду Dreamweaver також підтримує ці кодування, тож вам не потрібно пам’ятати про весь код. Вам просто потрібно ввести .navbar на екрані елемента, і ви отримаєте спливаючий список, у якому ви можете вибрати бажаний параметр.
3 Заморожування JavaScript:
Аякс має дуже динамічний характер. Ось чому часто, коли нам потрібно взаємодіяти зі сторінкою з недоступними або невідтвореними елементами під час завантаження першої сторінки. Ці елементи можуть бути вставлені на сторінку після деякого часу завантаження, тому вони не відображаються під час першого завантаження. Наприклад, коли ви можете змінити стиль підказки, яка повністю реалізована на JavaScript, ви використовували методичний пошук у ваших сценаріях, щоб знайти, який елемент де було створено. Замість того, щоб шукати в сценаріях, спробуйте наступне.
Розмістіть свій Dreamweaver у Live View і відтворіть свою сторінку. Потім натисніть клавішу F6, щоб будь-коли заморозити JavaScript, що дозволить вам аналізувати та націлювати будь-який код будь-якого динамічного елемента на сторінці. Це не тільки допоможе вам визначити точний код динамічного елемента, але й пришвидшить вашу розробку, зменшивши час на пошук будь-якого коду на динамічному веб-сайті.
4 Виділення коду:
Сценарій кодування може бути дуже заплутаним, якщо ви не звикли бачити складне кодування кожен день і ніч. Саме тут підсвічування кодів допомагає створити розділення у всьому сценарії. Замість того, щоб рухати очима, у Dreamweaver є функція, яка виділяє кодування, яке допомагає його прочитати. Для цього відкрийте налаштування Dreamweaver і ввімкніть розділ попередніх переглядів технологій. Потім клацніть параметр увімкнути підсвічування коду та дозвольте Dreamweaver зробити свою справу. Однак вам може знадобитися оновити версію Dreamweaver, оскільки ця функція доступна лише в останній версії.
Увімкнувши опцію підсвічування, просто двічі клацніть будь-який тег, і буде виділено всі екземпляри тегу на поточній сторінці. Однак параметри слід визначити. Цей інструмент чудово підходить для швидкої ідентифікації та переходу до схожих елементів. Виділивши будь-який елемент, використовуйте комбінацію клавіш f3 на ПК, CMD-G на Mac), щоб переходити від одного виділеного елемента до наступного. Крім того, модифікатор shift може повернутися до попереднього розділу. Крім того, підсвічування коду також працює з атрибутами та значеннями тегів HTML, щоб ви могли легко визначити конкретні класи.
5 Автоматичне завершення JavaScript:
Dreamweaver — це чудова платформа, де розумні та повні коди HTML і CSS. Хоча деякі люди вважають, що JavaScript не є повним. У випадку jQuery або Prototype у Dreamweaver ви повинні знати, що існують розширення API, які надають коди завершення Javascript. Ці коди прискорюють процес розробки, тому що за допомогою цих кодів немає потреби вводити цілі сценарії, і вони дуже зручні для швидких програмістів.
Dreamweaver — це єдине програмне забезпечення для веб-розробки, яке дозволяє використовувати такі типи кодів завершення jQuery та Prototype, які допомагають кожному веб-розробнику пришвидшити виконання завдань і створювати найкращий продукт із мінімальними зусиллями.
6 Простий доступ до пов’язаних файлів:
CSS і JavaScript — це імена незалежних файлів, які ви бачите, коли відкриваєте файли HTML і PHP. Відкриваючи файл PHP, ви можете побачити його у верхній частині вікна. Оскільки всі параметри розміщено на передній панелі, ви можете легко перейти до цих файлів і внести зміни, які можна зберегти, навіть не відкриваючи їх. Якщо клацнути будь-який файл на панелі пов’язаних файлів, ви побачите його джерело в режимі перегляду коду та батьківську сторінку в режимі перегляду дизайну.
Крім того, ви також можете використовувати будь-який інструмент навігації коду для швидкого доступу до вихідного коду CSS, який вплине на ваше поточне рішення. Цей швидкий доступ до вихідного коду CSS скорочує час кодування та дозволяє веб-розробнику зосередитися на різних аспектах процесу розробки.
7 Прикрашайте коди на льоту:
Невпорядковані та безладні рядки коду показують, що розробник цього коду не був професіоналом і не мав достатньої кваліфікації, щоб написати коди в порядку. Це також те, що має велике значення під час пошукової оптимізації веб-сайту. Однак організувати ваші коди та прикрасити їх не так складно, як думають люди. Правильно знаючи параметри Dreamweaver, ви зможете впорядковувати свої коди на льоту. Просто скористайтеся опцією «Застосувати вихідне форматування» та змініть його відповідно до своїх уподобань. Щоб зробити кодування чистим і охайним, натисніть «Форматувати вихідний код» у нижній частині панелі інструментів кодування, а потім перейдіть до «редагування > панелі інструментів > кодування». а потім виберіть «налаштування формату коду», щоб встановити бажане налаштування.
Ще один спосіб упорядкувати свій сценарій — отримати доступ до опції форматування в меню «Команди» > «Застосувати вихідне форматування» або застосувати його лише до блоку кодування, вибравши опцію «Застосувати вихідне форматування до виділеного».
8 Безворсове кодування:
Незалежно від того, скільки Adobe обладнає Dreamweaver потужними інструментами та функціями, чим більше ви працюєте на веб-сайтах, тим більше вам доведеться працювати над програмуванням. Ця річ може підвищити ваші навички, але вона також відкриє двері для нескінченних помилок, тому що надто багато написання коду є нелегкою роботою. Dreamweaver це знає, і саме тому в останній версії Dreamweaver, тобто Creative Cloud (CC), є функція під назвою Linting support. Linting — це базовий інструмент перевірки синтаксису програмування, який доступний для CSS, HTML і JavaScript. Завдяки цьому, коли Dreamweaver виявляє будь-яку проблему чи помилку, він надсилає низку спалахів як загальних, так і конкретних.
Щоб запустити тест, відкрийте сторінку, повну кодів у Dreamweaver, і ви побачите невелику зелену позначку в колі праворуч у рядку стану. Якщо є лише маленька зелена галочка, це означає, що з вашим кодом усе в порядку. Якщо є червоний хрестик, обведений червоним, це означає, що у вашому коді виникли проблеми, і вам потрібно переглянути його, щоб веб-сайт працював належним чином. Крім того, клацнувши позначку помилки, ви можете перейти до стовпця та рядка, де ви зробили помилку, з описом помилки. Найкраще в цьому те, що ця функція не обмежена, і ви можете використовувати її, доки не отримаєте зелену позначку.
9 Перевірка сумісності браузерів:
Можливість веб-перегляду є однією з найпростіших речей кожного процесу веб-розробки. Ось чому Dreamweaver полегшив вам роботу, щоб ви ніколи не пропустили ці основні речі, перш ніж розпочати веб-розробку. Відкрийте в Dreamweaver документ, сумісність якого потрібно перевірити. На панелі меню, на якій розташовано піктограми параметрів перегляду коду, розділення та дизайну, є ще один параметр, який називається кнопкою «Перевірити сторінку».
Після натискання відкриється спадне меню, виберіть у ньому перевірку сумісності браузера та подивіться результат вашої сумісності в окремому вікні.
10 Мінімізація коду:
Під час кодування для великого веб-сайту часто трапляється, що шматок коду починає дратувати вас на екрані. Дуже мало людей знають, що вони можуть мінімізувати цю частину кодування, просто натиснувши одну кнопку на клавіатурі. Коли ви впевнені, що немає потреби вносити будь-які зміни у фрагмент кодування, просто виберіть цей блок і натисніть «-» поруч із номером рядка коду. Цей фрагмент буде зведено до мінімуму та не турбуватиме вас, доки ви його не розширите.