Podsumowanie nowych funkcji (maj 2015 r.)

Wizualne zapytania o media

Obsługa lintingu

Nowa wersja programu Dreamweaver umożliwia debugowanie kodu w poszukiwaniu typowych błędów przez zastosowanie procesu lintingu. Linting to proces polegający na uruchomieniu programu, który wykrywa w kodzie potencjalne błędy. Program Dreamweaver może przeprowadzać linting plików HTML, CSS i JavaScript w czasie ich wczytywania, zapisywania lub edytowania. Wykryte błędy i ostrzeżenia są wyświetlane w panelu Wyjście.

Więcej informacji: Linting kodu.

Obsługa skrótów Emmet

Czy często zdarza Ci się wpisywać choć kilka wierszy kodu w programie Dreamweaver? Jeśli tak, skorzystaj ze skrótów Emmet, aby przyspieszyć kodowanie. Skróty te można łatwo zapamiętać i szybko się je wpisuje, a po naciśnięciu klawisza Tab w widoku Kod są rozwijane do postaci pełnego kodu.

Szczegółowe informacje: Wstawianie kodu za pomocą skrótów Emmet.

Preprocesory CSS

Podgląd obrazów i kolorów w widoku Kod

Podgląd obrazów

Program Dreamweaver umożliwia wyświetlanie podglądu obrazów w widoku Kod po zatrzymaniu kursora myszy nad adresem URL danego obrazu.

Obsługiwane są również podglądy obrazów w ścieżkach zdalnych, takich jak <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />.

Jeśli program Dreamweaver nie może wyświetlić podglądu dla ścieżki zdalnej, pojawi się komunikat „Nie można wczytać obrazu”.

Podgląd można wyświetlić dla następujących typów plików graficznych:

JPEG
JPG
PNG
GIF
BMP
SVG

Podgląd obrazu jest wyświetlany po zatrzymaniu kursora myszy nad adresem URL w następujących kontekstach:

• url( );
• data-uri( )
• Wartość atrybutu Src znacznika IMG

Podgląd kolorów

Podgląd zasobów w widoku Kod został udoskonalony. Program Dreamweaver umożliwia teraz wyświetlanie podglądu kolorów w widoku Kod po zatrzymaniu kursora myszy nad ich wartościami. Obsługiwane są następujące formaty:

3- i 6-cyfrowe wartości szesnastkowe koloru: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Predefiniowane nazwy kolorów: np. olive (oliwkowy), teal (morski), red (czerwony) itp.;

Nowe urywki kodu

Urywki to fragmenty kodu, które można wielokrotnie wykorzystywać w projektach. W tej wersji programu Dreamweaver udostępniono nowe i uaktualnione urywki kodu:

• Urywki Boostrap
• Urywki CSS — animacje i przejścia
• Urywki CSS — efekty
• Urywki CSS
• Urywki HTML
• Urywki JavaScript (uaktualnione)
• Urywki PHP
• Urywki preprocesorów
• Urywki projektów reagujących

Informacje o korzystaniu z urywków kodu: Praca z urywkami kodu.

Integracja ze składnikami Bootstrap

Serwisy utworzone z użyciem struktury Bootstrap (w wersji 3 i nowszych) można teraz otwierać w programie Dreamweaver i edytować za pomocą funkcji służących do modyfikacji kodu oraz projektowania wizualnego. Dreamweaver rozpoznaje pliki CSS powiązane z takimi serwisami, jeśli ich nazwy zawierają frazę „bootstrap”. 

Ponadto można dodawać składniki Bootstrap bezpośrednio w programie Dreamweaver (wybierając je z panelu Wstaw), a także modyfikować projekty okienek ekranowych, szybko i łatwo edytując ich siatki.

Szczegółowe informacje: Praca z plikami Bootstrap.

Szablony początkowe Bootstrap

Program Dreamweaver zawiera teraz szablony Bootstrap, które ułatwiają szybkie rozpoczęcie pracy nad układami reagującymi. W oknie dialogowym Nowy dokument dostępne są następujące szablony Bootstrap:

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

Zwijanie kodu

Zwijanie kodu jest dostępne w plikach HTML, CSS, LESS, SASS, SCSS, JS, PHP, XML i SVG opartych na blokach znaczników. Po zatrzymaniu wskaźnika myszy nad kolumną z numerami wierszy w widoku Kod obok numeru pojawia się niewielki trójkąt. Kliknięcie tego trójkącika umożliwia zwinięcie lub rozwinięcie bloku kodu. Ta nowa funkcja zwijania kodu zastępuje wcześniejszą funkcję opartą na zaznaczeniu.

Ikony zwijania kodu (odwrócone trójkąciki) są wyświetlane dla każdego bloku znaczników w widoku Kod, który zawiera więcej niż dwa wiersze.

Operacje kopiowania, wycinania i wklejania oraz przeciągania zawartości zapamiętują stan zwinięcia kodu. Jeśli na przykład skopiuje się zwinięty blok kodu, a następnie wybierze operację Wklej, to skopiowany tekst zostanie wklejony również w postaci zwiniętego bloku.

Zwijanie kodu w plikach HTML

W przeciwieństwie do wcześniejszej funkcji zwijania kodu, zwinięta zawartość będzie teraz obejmować znacznik zamykający i będzie renderowana w inny sposób niż poprzednio.

Zwiększono liczbę znaków wyświetlanych w zwiniętym bloku kodu. Ułatwia to podgląd początkowych atrybutów zwiniętego bloku znaczników. Na przykład jeśli zwijany znacznik DIV ma atrybuty id oraz class, to zwinięty blok kodu będzie wyglądać następująco:

W systemie Windows można wyświetlić podgląd kodu w zwiniętym bloku, zatrzymując nad nim kursor myszy. Zwinięty blok jest automatycznie rozwijany, jeśli kod zawarty w tym bloku zostanie uaktywniony za pośrednictwem selektora znaczników, widoku aktywnego albo funkcji Znajdź i zastąp, Przejdź do wiersza, Przegląd elementu, Cofnij lub Ponów. Gdy punkt aktywności opuści taki blok, zostanie on automatycznie zwinięty.

Zwijanie kodu w plikach CSS, LESS, SASS, SCSS oraz JS

Bloki kodu otoczone klamrami w plikach CSS, Less, Sass, SCSS i JS mogą teraz być zwijane.

Zatrzymaj kursor nad regionem zwijania kodu lub nad dowolnym wierszem zawierającym klamry otwierające „{”.

Kliknięcie opcji Zwiń spowoduje zwinięcie zawartości pomiędzy parą odpowiadających sobie klamer. Podgląd tej zawartości jest wyświetlany w formacie „{…}”.

Zwijanie kodu w plikach PHP

W plikach PHP można zwijać nie tylko bloki kodu PHP, ale także elementy HTML oraz kod CSS i JS.

Zwinięty może zostać każdy blok PHP rozpoczynający się od znacznika „<?php”, a kończący znacznikiem „?>”.

Zatrzymaj kursor na regionie zwijania kodu, nad dowolnym wierszem zawierającym znacznik „<?php”. Kliknij ikonę Zwiń, aby zwinąć blok kodu.