Podręcznik użytkownika Anuluj

Korzystanie z preprocesorów CSS w programie Dreamweaver

  1. Podręcznik użytkownika programu Dreamweaver
  2. Wprowadzenie
    1. Podstawy projektowania serwisów WWW o elastycznym układzie
    2. Dreamweaver — co nowego
    3. Programowanie zawartości WWW za pomocą programu Dreamweaver — przegląd
    4. Dreamweaver / Popularne pytania
    5. Skróty klawiszowe
    6. Wymagania systemowe programu Dreamweaver
    7. Podsumowanie funkcji
  3. Program Dreamweaver a platforma Creative Cloud
    1. Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
    2. Biblioteki Creative Cloud w programie Dreamweaver
    3. Używanie plików programu Photoshop w programie Dreamweaver
    4. Praca z programami Adobe Animate oraz Dreamweaver
    5. Wydzielanie przygotowanych do wyświetlania w Internecie plików SVG z bibliotek
  4. Przestrzenie robocze i widoki w programie Dreamweaver
    1. Przestrzeń robocza programu Dreamweaver
    2. Optymalizacja przestrzeni roboczej programu Dreamweaver do programowania wizualnego
    3. Wyszukiwanie plików według nazwy lub zawartości | Mac OS
  5. Konfigurowanie serwisów
    1. Informacje o serwisach programu Dreamweaver
    2. Konfigurowanie lokalnej wersji serwisu
    3. Nawiązywanie połączenia z serwerem publikacji
    4. Konfigurowanie serwera testowego
    5. Importowanie i eksportowanie ustawień serwisu programu Dreamweaver
    6. Przenoszenie istniejących serwisów z serwera zdalnego do lokalnego katalogu głównego serwisu
    7. Funkcje ułatwień dostępu w programie Dreamweaver
    8. Ustawienia zaawansowane
    9. Ustawianie preferencji serwisu dotyczących transferu plików
    10. Określanie ustawień serwera proxy w programie Dreamweaver
    11. Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
    12. Korzystanie z systemu Git w programie Dreamweaver
  6. Zarządzanie plikami
    1. Tworzenie i otwieranie plików
    2. Zarządzanie plikami i folderami
    3. Odbieranie plików i wysyłanie ich na serwer
    4. Pobieranie plików do edycji i odkładanie ich na serwer
    5. Synchronizacja plików
    6. Porównywanie plików w poszukiwaniu różnic
    7. Maskowanie plików i folderów w serwisie programu Dreamweaver
    8. Włączanie funkcji Uwagi do projektu w serwisach programu Dreamweaver
    9. Zapobieganie potencjalnemu obejściu funkcji Gatekeeper
  7. Układ i projekt
    1. Korzystanie z wizualnych pomocy do układu
    2. Informacje o tworzeniu układu strony za pomocą stylów CSS
    3. Projektowanie elastycznych serwisów WWW z użyciem struktury Bootstrap
    4. Tworzenie i używanie zapytań o media w programie Dreamweaver
    5. Prezentacja zawartości za pomocą tabel
    6. Kolory
    7. Tworzenie reagujących projektów za pomocą układów elastycznej siatki
    8. Narzędzie Extract w programie Dreamweaver
  8. CSS
    1. Podstawowe informacje o stylach CSS
    2. Tworzenie układu strony za pomocą panelu Projektant CSS
    3. Korzystanie z preprocesorów CSS w programie Dreamweaver
    4. Ustawianie preferencji stylów CSS w programie Dreamweaver
    5. Przenoszenie reguł CSS w programie Dreamweaver
    6. Konwertowanie stylu CSS wewnątrz znacznika na regułę CSS w programie Dreamweaver
    7. Posługiwanie się znacznikami DIV
    8. Stosowanie gradientów na tło
    9. Tworzenie i edytowanie efektów przejść CSS3 w programie Dreamweaver
    10. Formatowanie kodu
  9. Zawartość strony i zasoby
    1. Ustawianie właściwości strony
    2. Ustawianie właściwości CSS dla nagłówków i łączy
    3. Praca z tekstem
    4. Znajdowanie i zastępowanie tekstu, znaczników i atrybutów
    5. Panel DOM
    6. Edytowanie w widoku aktywnym
    7. Kodowanie znaków dokumentu w programie Dreamweaver
    8. Zaznaczanie i wyświetlanie elementów w oknie Dokument
    9. Ustawianie właściwości tekstu na panelu Inspektor właściwości
    10. Sprawdzanie pisowni na stronie internetowej
    11. Używanie linii poziomych w programie Dreamweaver
    12. Dodawanie i modyfikowanie kombinacji czcionek w programie Dreamweaver
    13. Praca z zasobami
    14. Wstawianie i aktualizowanie dat w programie Dreamweaver
    15. Tworzenie list ulubionych zasobów w programie Dreamweaver i zarządzanie nimi
    16. Wstawianie i edytowanie obrazów w programie Dreamweaver
    17. Dodawanie obiektów multimedialnych
    18. Dodawanie zawartości wideo w programie Dreamweaver
    19. Wstawianie wideo HTML5
    20. Wstawianie plików SWF
    21. Dodawanie efektów dźwiękowych
    22. Wstawianie obiektów audio HTML5 w programie Dreamweaver
    23. Praca z elementami bibliotek
    24. Stosowanie pisma arabskiego i hebrajskiego w programie Dreamweaver
  10. Łączenie i przeglądanie
    1. Informacje o łączeniu i przeglądaniu stron
    2. Tworzenie łączy
    3. Mapy obrazu
    4. Rozwiązywanie problemów dotyczących łączy
  11. Efekty i widgety jQuery
    1. Używanie widgetów jQuery interfejsu użytkownika i elementów mobilnych w programie Dreamweaver
    2. Używanie efektów jQuery w programie Dreamweaver
  12. Tworzenie kodu serwisów WWW
    1. Informacje o tworzeniu kodu w programie Dreamweaver
    2. Środowisko programistyczne w programie Dreamweaver
    3. Ustawianie preferencji kodowania
    4. Dostosowywanie ustawień kolorowania kodu
    5. Pisanie i edytowanie kodu
    6. Podpowiedzi i uzupełnianie kodu
    7. Zwijanie i rozwijanie kodu
    8. Ponowne wykorzystywanie fragmentów kodu za pomocą funkcji Urywki
    9. Linting: oczyszczanie kodu z błędów
    10. Optymalizacja kodu
    11. Edytowanie kodu w widoku Projekt
    12. Praca z zawartością znacznika HEAD strony
    13. Wstawianie dołączeń po stronie serwera w programie Dreamweaver
    14. Korzystanie z bibliotek znaczników w programie Dreamweaver
    15. Importowanie własnych znaczników do programu Dreamweaver
    16. Używanie zachowań JavaScript (instrukcje ogólne)
    17. Stosowanie wbudowanych zachowań JavaScript
    18. Omówienie języków XML i XSLT
    19. Wykonywanie transformacji XSL po stronie serwera w programie Dreamweaver
    20. Wykonywanie przekształceń XSL po stronie klienta w programie Dreamweaver
    21. Dodawanie encji znaków w kodzie XSLT w programie Dreamweaver
    22. Formatowanie kodu
  13. Obiegi pracy związane z wieloma produktami
    1. Instalowanie i używanie rozszerzeń programu Dreamweaver
    2. Aktualizacje w aplikacji w programie Dreamweaver
    3. Wstawianie dokumentów Microsoft Office w programie Dreamweaver (tylko Windows)
    4. Praca z programami Fireworks i Dreamweaver
    5. Edycja zawartości w stronach programu Dreamweaver za pomocą aplikacji Contribute
    6. Integracja programu Dreamweaver z aplikacją Business Catalyst
    7. Tworzenie spersonalizowanych kampanii rozsyłanych pocztą elektroniczną
  14. Szablony
    1. Informacje o szablonach programu Dreamweaver
    2. Rozpoznawanie szablonów oraz dokumentów opartych na szablonach
    3. Tworzenie szablonu programu Dreamweaver
    4. Tworzenie edytowalnych regionów w szablonach
    5. Tworzenie powtarzalnych regionów i tabel w programie Dreamweaver
    6. Używanie regionów opcjonalnych w szablonach
    7. Definiowanie edytowalnych atrybutów znacznika w programie Dreamweaver
    8. Tworzenie zagnieżdżonych szablonów w programie Dreamweaver
    9. Edytowanie, aktualizowanie i usuwanie szablonów
    10. Eksportowanie i importowanie zawartości XML w programie Dreamweaver
    11. Stosowanie szablonu lub usuwanie go z istniejącego dokumentu
    12. Edycja zawartości w szablonach programu Dreamweaver
    13. Reguły składni dla znaczników szablonu w programie Dreamweaver
    14. Ustawianie preferencji podświetlenia dla regionów szablonów
    15. Korzyści wynikające z używania szablonów w programie Dreamweaver
  15. Urządzenia mobilne i obsługa wielu ekranów
    1. Tworzenie zapytań o media
    2. Zmiana orientacji strony na urządzeniach mobilnych
    3. Tworzenie aplikacji internetowych przeznaczonych na urządzenia mobilne za pomocą programu Dreamweaver
  16. Dynamiczne serwisy, strony i formularze WWW
    1. Podstawowe informacje o aplikacjach internetowych
    2. Konfigurowanie komputera do programowania aplikacji
    3. Rozwiązywanie problemów z połączeniami z bazą danych
    4. Usuwanie skryptów połączenia w programie Dreamweaver
    5. Projektowanie stron dynamicznych
    6. Omówienie źródeł zawartości dynamicznej
    7. Definiowanie źródeł zawartości dynamicznej
    8. Dodawanie dynamicznej zawartości do stron
    9. Modyfikowanie dynamicznej zawartości w programie Dreamweaver
    10. Wyświetlanie rekordów z bazy danych
    11. Udostępnianie aktywnych danych w programie Dreamweaver oraz rozwiązywanie problemów z takimi danymi
    12. Dodawanie własnych zachowań serwerowych w programie Dreamweaver
    13. Tworzenie formularzy w programie Dreamweaver
    14. Zbieranie informacji od użytkowników za pomocą formularzy
    15. Tworzenie oraz włączanie formularzy ColdFusion w programie Dreamweaver
    16. Tworzenie formularzy WWW
    17. Rozszerzona obsługa elementów formularza w języku HTML5
    18. Tworzenie formularzy za pomocą programu Dreamweaver
  17. Tworzenie aplikacji metodą graficzną
    1. Tworzenie stron wzorca i szczegółów w programie Dreamweaver
    2. Tworzenie stron wyszukiwania i wyników
    3. Tworzenie strony wstawiania rekordów
    4. Tworzenie strony uaktualniania rekordów w programie Dreamweaver
    5. Tworzenie stron usuwania rekordów w programie Dreamweaver
    6. Używanie poleceń ASP do modyfikacji bazy danych w programie Dreamweaver
    7. Tworzenie strony rejestracji
    8. Tworzenie strony logowania
    9. Tworzenie strony, do której dostęp będą mieli tylko uwierzytelnieni użytkownicy
    10. Zabezpieczanie folderów w aplikacji ColdFusion za pomocą programu Dreamweaver
    11. Korzystanie ze składników ColdFusion w programie Dreamweaver
  18. Testowanie, podgląd i publikacja serwisów WWW
    1. Podgląd stron
    2. Podgląd stron WWW programu Dreamweaver na wielu urządzeniach
    3. Testowanie serwisu programu Dreamweaver
  19. Rozwiązywanie problemów
    1. Rozwiązane problemy
    2. Znane problemy

 

 

Informacje o używaniu i kompilowaniu plików preprocesorów CSS w programie Dreamweaver.

CSS to język, który służy do opisu stylu dokumentu HTML. Preprocesory CSS kompilują kod napisany w języku preprocesorowym, przekształcając go w typowy kod CSS. Dzięki temu procedura tworzenia stylów CSS przebiega w sposób podobny do języków programowania,

co umożliwia stosowanie zmiennych, kombinacji, funkcji i wielu innych technik niedostępnych w zwykłym kodzie CSS.
Za pomocą preprocesorów CSS można zdefiniować potrzebne elementy jednokrotnie, a następnie używać ich wiele razy, uzyskując łatwy w utrzymaniu i rozbudowie kod CSS.

Ponadto użycie preprocesora pozwala tworzyć bardziej przejrzysty i łatwiejszy w utrzymaniu kod CSS. W przypadku serwisów, które odwołują się do wielu plików CSS, użycie preprocesora takiego jak Sass lub Compass redukuje nakłady pracy przy ręcznym tworzeniu kodu oraz kopiowaniu i wklejaniu.

Program Dreamweaver kompiluje pliki SCSS/LESS za pomocą wbudowanego kompilatora Ruby-Saas. Ponadto obsługiwane są struktury Compass i Bourbon do kompilowania plików Sass.

LESS to język oparty na języku JavaScript, natomiast Sass jest oparty na języku Ruby. Jakakolwiek znajomość tych języków programowania nie jest jednak konieczna. Nie trzeba także używać wiersza poleceń w celu kompilacji plików do postaci kodu CSS. Program Dreamweaver automatycznie kompiluje te pliki do kodu CSS, stosując bibliotekę JavaScript o nazwie less.js podczas wczytywania, modyfikacji lub zapisywania pliku.

Obsługiwane wersje:

  • Sass: 3.4.25
  • LESS: 2.7.2
  • Compass: 1.0.3
  • Bourbon: 4.2.6
  • Bourbon Neat: 1.7.3
  • Bourbon Bitters: 1.2.0

Sposób obsługi preprocesorów CSS w programie Dreamweaver

Sposób obsługi preprocesorów przez program Dreamweaver zależy od tego, czy został zdefiniowany serwis. Jeśli zdefiniujesz serwis, będzie można skonfigurować preferencje preprocesorów CSS oraz korzystać ze struktur Compass i Bourbon bezpośrednio w programie Dreamweaver.

Definiując serwis, możesz dostosować sposób działania preprocesorów CSS w programie Dreamweaver, ustawiając ich właściwości w kontekście tego serwisu. Ustawienie preferencji preprocesorów CSS właściwych dla serwisu umożliwia określenie opcji kompilacji dla tego serwisu. Można również dostosować położenie plików Sass i CSS oraz skonfigurować opcje preprocesorów na potrzeby każdego serwisu.

Poniżej opisano sposób używania programu Dreamweaver w połączeniu z preprocesorami CSS:

Dreamweaver 2017 a preprocesory CSS

Wersja Dreamweaver 2017 oferuje wbudowaną obsługę preprocesorów CSS. Oznacza to możliwość pracy z plikami Sass/LESS/SCSS bezpośrednio w programie Dreamweaver. Wystarczy nacisnąć klawisze Ctrl+S lub Cmd+S, aby automatycznie skompilować kod CSS. Można również przeprowadzić ręczną kompilację poszczególnych plików, wybierając polecenie Narzędzia > Kompiluj (lub naciskając klawisz F9). Wprowadzone zmiany zostaną uwzględnione także we wszystkich otwartych plikach HTML, które wykorzystują kompilowany kod CSS.

Oto ogólny obieg pracy związany z korzystaniem z preprocesorów CSS:

  • Zainstaluj odpowiedni kompilator, jeśli chcesz używać preprocesora Compass lub Bourbon w programie Dreamweaver. Instaluje się go jednym kliknięciem. Skonfiguruj ustawienia preprocesora CSS.

Kompilator należy zainstalować tylko w sytuacji, gdy chcesz skopiować pliki struktury (Bourbon) lub wygenerować domyślne pliki scss i pliki konfiguracyjne Ruby (Compass). Zaleca się zachowanie kopii plików struktury. Pozwoli to na dostęp do plików preprocesora w serwisie nawet wtedy, gdy w przyszłych wersjach ze struktury zostaną usunięte niektóre funkcje lub klasy domieszkowe.

  • Sprawdź, czy funkcja automatycznej kompilacji jest włączona. Następnie kliknij przycisk Zapisz, aby zaktualizować pliki CSS.
  • (Opcjonalnie) Obejrzyj zmiany odzwierciedlone w widoku aktywnym albo w podglądzie w czasie rzeczywistym na wszystkich stronach HTML, które używają wygenerowanego kodu CSS.

Dreamweaver 2015 a preprocesory CSS

W wersji Dreamweaver 2015 oraz wcześniejszych wersjach programu Dreamweaver CC można było używać plików Sass, LESS i SCSS. Konieczne jednak było kompilowanie tych plików poza programem Dreamweaver.
Procedura ta wyglądała następująco:

  1. Pobierz i zainstaluj kompilator.
  2. Skonfiguruj zadanie Grunt (Gruntfile.js), za pomocą którego kompilator będzie odczytywać plik Sass/LESS/SCSS.
  3. Skonfiguruj inne zadanie Grunt służące do kompilowania tego pliku do postaci kodu CSS, który można wykorzystać w programie Dreamweaver.

Czynności te trzeba wykonać po każdej modyfikacji pliku Sass/LESS/SCSS.

Uwaga:

Ten samouczek wideo prezentuje sposoby rozbudowy stylów CSS za pomocą preprocesorów.

Jeśli serwis nie został zdefiniowany, można ręcznie skompilować pliki Sass i LESS. Jednak struktury Compass i Bourbon nie będą obsługiwane.

Jak korzystać z preprocesorów CSS w programie Adobe Dreamweaver

Oto ogólny obieg pracy związany z korzystaniem z preprocesorów CSS:

  1. Definiowanie serwisu w programie Dreamweaver. Sprawdź, czy pliki Sass lub LESS, które chcesz skompilować, znajdują się w katalogu głównym serwisu. Jeśli masz już zdefiniowany serwis, a plik Sass/LESS umieszczony jest w katalogu głównym, przejdź do kolejnego kroku. Instrukcje konfigurowania serwisu programu Dreamweaver: Informacje o serwisach programu Dreamweaver.
  2. Ustaw preferencje preprocesorów CSS (takie jak położenie wygenerowanych plików CSS). Są to preferencje obowiązujące w kontekście określonego serwisu. Więcej informacji: Ustawianie preferencji preprocesorów CSS właściwych dla serwisu.
  3. Jeśli chcesz używać konkretnych struktur, takich jak Compass lub Bourbon, możesz określić ich ustawienia. Więcej informacji: Używanie struktury Compass oraz Używanie struktury Bourbon.
  4. Skonfiguruj kompilację automatyczną lub ręcznie skompiluj pliki Sass i LESS. Więcej informacji: Kompilowanie plików preprocesora CSS.

Ustawianie preferencji preprocesorów CSS

Preferencje preprocesorów CSS dla danego serwisu ustawia się w oknie dialogowym Serwisy > Zarządzaj serwisami.

Ustawianie preferencji preprocesorów CSS właściwych dla serwisu umożliwia zarządzanie tymi preprocesorami w różny sposób w różnych serwisach. Zapewnia to także kontrolę nad preprocesorem CSS używanym w konkretnym serwisie bez konieczności zmiany ogólnych ustawień.

Uwaga:

Ustawienia w sekcjach Ogólne oraz Źródło i wyjście dotyczą domyślnie struktury Ruby-Saas.

Aby ustawić preferencje struktury Compass, należy zaznaczyć pole wyboru Użyj struktury Compass w sekcji Compass.

Konfigurowanie ogólnych ustawień preprocesorów CSS

W oknie dialogowym Serwisy > Zarządzaj serwisami > Preprocesory CSS można konfigurować następujące ustawienia ogólne preprocesorów CSS. Ustawienia te mają domyślnie zastosowanie do struktury Saas.

Ogólne ustawienia preprocesorów CSS
Ogólne ustawienia preprocesorów CSS

Włącz automatyczną kompilację przy zapisie pliku

Zaznacz to pole wyboru, aby włączyć automatyczną kompilację dla preprocesorów CSS. Jeśli ta opcja jest zaznaczona, program Dreamweaver automatycznie generuje plik CSS z chwilą zapisania przez użytkownika pliku Sass, LESS lub SCSS. Jeśli ta opcja jest wyłączona, należy ręcznie skompilować pliki po każdym wprowadzeniu zmian.

Opcje LESS

Włącz ścisłe zasady mat. (Strict Math)

Przetwarza tylko operacje matematyczne, które znajdują się w nawiasach. Na przykład zapis (100px/25px) zostanie przetworzony prawidłowo, natomiast zapis 20% + 10% (bez nawiasów) nie jest obsługiwany. Gdy ta opcja jest wyłączona, przetwarzane są wszystkie operacje matematyczne w pliku.

Włącz ścisłe jednostki

Bez tej opcji preprocesor LESS podejmuje próbę odgadnięcia jednostki wyjściowej przy wykonywaniu działań matematycznych. Na przykład:

.class {
  property: 1px * 2px;
}

W tym przypadku długość przemnożona przez długość daje pole powierzchni, ale kod CSS nie obsługuje takiej jednostki miary. Program Dreamweaver przyjmuje zatem, że użytkownik podał jedną z wartości jako liczbę, a nie jednostkę długości.

Jeśli opcja obsługi ścisłych jednostek jest włączona, program Dreamweaver uzna to za błąd w obliczeniach i zakomunikuje niepowodzenie.

Zmień adresy URL na względne

Dzięki tej opcji program przebudowuje adresy URL w generowanym pliku CSS w taki sposób, aby zawsze były względne w odniesieniu do tego pliku.

Generuj mapę źródła

Tworzy mapę źródła. Mapa źródła to plik, który pośredniczy między językami wysokiego poziomu, takimi jak Sass i LESS, a językiem niskiego poziomu, do którego te preprocesory kompilują kod, np. CSS.

Opcje Sass/SCSS

Styl pliku wyjściowego

Określa styl wynikowego pliku CSS:

  • Zagnieżdżony: formatuje skompilowany kod CSS w znanej strukturze modułowej.
  • Zwarty: formatuje skompilowany plik CSS w taki sposób, że jego struktura zajmuje mniej miejsca niż w przypadku opcji Zagnieżdżony lub Rozwinięty.
  • Skompresowany: generuje kod CSS w postaci struktury płaskiej.
  • Rozwinięty: generuje plik CSS w takiej postaci, że każda właściwość i reguła znajduje się w osobnym wierszu. Właściwości w obrębie reguł są formatowane wcięciem, jednak reguły nie mają żadnego wcięcia.

Utwórz komentarze do źródła

Tworzy komentarze w wynikowym pliku CSS, która łączą kod CSS z wierszem, na podstawie którego ten kod został wygenerowany.

Generuj mapę źródła

Tworzy mapę źródła (plik, który pośredniczy między językami wysokiego poziomu, takimi jak Sass i LESS, a językiem niskiego poziomu, do którego te preprocesory kompilują kod, np. CSS).

Ustawianie preferencji źródła i wyjścia CSS

Można zdefiniować zarówno ścieżkę, pod którą mają być zapisywane wygenerowane pliki CSS, jak i ścieżkę, którą program Dreamweaver powinien obserwować w celu wyzwalania automatycznej kompilacji, gdy zapisany tam plik Sass/LESS zostanie zmodyfikowany w edytorze zewnętrznym.

Uwaga:

Opcje w sekcji Źródło i wyjście dotyczą domyślnie struktury Saas. Aby włączyć te opcje w odniesieniu do struktury Compass, należy zaznaczyć pole wyboru Użyj struktury Compass w sekcji Compass.

Po zmodyfikowaniu tych ustawień i zainstalowaniu struktury Compass wszystkie te ustawienia zostaną przeniesione do pliku config.rb. Ustawienia będzie można później modyfikować, edytując bezpośrednio plik config.rb. Ponadto zmiany wprowadzone w oknie dialogowym Ustawienia serwisu nie mają wpływu na kompilację.

Ustawianie opcji w sekcji Źródło i wyjście w odniesieniu do struktury Compass
Ustawianie opcji w sekcji Źródło i wyjście w odniesieniu do struktury Compass

W oknie dialogowym Serwisy > Zarządzaj serwisami można konfigurować następujące ustawienia źródła i wyjścia preprocesorów CSS.

Ustawienia źródła i wyjścia dla preprocesorów CSS
Ustawienia źródła i wyjścia dla preprocesorów CSS

Wyjście CSS

Określa lokalizację generowanego pliku wyjściowego CSS.

W tym samym folderze, co źródło

Zaznacz tę opcję, jeśli chcesz, aby generowane pliki CSS były zapisywane w tym samym folderze, co źródłowe pliki Sass i LESS.

Zdefiniuj folder wyjściowy

Zaznacz tę opcję, jeśli chcesz określić folder, w którym mają być zapisywane wygenerowane pliki CSS.

Zastąp segment ścieżki wejściowej

Ta opcja umożliwia zastąpienie fragmentu ścieżki z użyciem łańcuchów podawanych w polach „Z” i „Na”. Na przykład ustawienie wartości „Z” na scss, a wartości „Na” na css spowoduje, że plik wyjściowy zostanie umieszczony w tej samej strukturze katalogu po zastąpieniu frazy SCSS w ścieżce frazą CSS.

Folder źródłowy

Określ podfolder katalogu głównego serwisu, który ma być obserwowany. Zazwyczaj podfolder taki zawiera wszystkie pliki SCSS lub LESS. 

Jeśli w sekcji Ustawienia ogólne włączono opcję Kompilacja, program Dreamweaver automatycznie uruchomi preprocesor CSS. Automatyczna kompilacja będzie wyzwalana w wyniku modyfikacji dowolnego pliku w folderze — czy to zewnętrznie, czy też w programie Dreamweaver.

Korzystanie ze struktury Compass

Compass to struktura o otwartym dostępie do kodu źródłowego, umożliwiająca tworzenie arkuszy stylów CSS3 z użyciem preprocesora Sass.

Program Dreamweaver udostępnia obsługę struktury Compass. Jeśli tworzysz arkusze stylów w strukturze Compass, możesz je skompilować i wygenerować z nich pliki CSS w programie Dreamweaver.

  1. Użycie plików Compass

    Jeśli struktura Compass nie jest jeszcze zainstalowana w systemie, można ją zainstalować za pomocą programu Dreamweaver.

    W oknie dialogowym Konfiguracja serwisu wybierz opcje Preprocesory CSS > Compass. Zaznacz opcję Użyj struktury Compass i kliknij pozycję Zainstaluj pliki.

    Instalowanie plików Compass
    Instalowanie plików Compass

    Wszystkie pliki struktury Compass oraz plik konfiguracyjny *.rb są instalowane w folderze serwisu i można je wyświetlić na panelu Pliki.

    Zainstalowane pliki Compass
    Zainstalowane pliki Compass

  2. Wybieranie istniejącego pliku konfiguracyjnego w języku Ruby

    Jeśli na komputerze jest już zainstalowana struktura Compass i istnieje jej plik konfiguracyjny *.rb, to należy podać ścieżkę do tego pliku w oknie dialogowym Konfiguracja serwisu w programie Dreamweaver. Plik konfiguracyjny struktury Compass musi być zlokalizowany wewnątrz katalogu głównego bieżącego serwisu.

    1. W oknie dialogowym Konfiguracja serwisu wybierz opcje Preprocesory CSS > Compass.
    2. Zaznacz pole wyboru Użyj struktury Compass.
    3. Kliknij opcję Podaj plik konfiguracyjny Ruby i przejdź do lokalizacji tego pliku.
    4. Po zakończeniu kliknij przycisk Zapisz.
    Wybieranie istniejącego pliku konfiguracyjnego w języku Ruby
    Wybieranie istniejącego pliku konfiguracyjnego w języku Ruby

    Uwaga:

    Musi to być plik znajdujący się w katalogu głównym serwisu.

  3. Ręczne określanie opcji konfiguracji

    Jeśli nie masz istniejącego pliku konfiguracyjnego, możesz określić opcje konfiguracyjne ręcznie.

    1. W oknie dialogowym Konfiguracja serwisu wybierz opcje Preprocesory CSS > Compass.
    2. Zaznacz pole wyboru Użyj struktury Compass.
    3. Kliknij opcję Ręczne określanie opcji konfiguracji. Określ dowolne spośród następujących opcji konfiguracyjnych i kliknij przycisk Zapisz.

    Następujące pola są wypełniane automatycznie, ale można je zmodyfikować stosownie do potrzeb:

    Uwaga:

    Wszystkie ścieżki wybrane w tych opcjach muszą się znajdować w katalogu głównym serwisu.

    Ścieżka HTTP

    Ścieżka do projektu uruchamianego na serwerze WWW. Wartość domyślna to „/”.

    Katalog obrazów

    Katalog, w którym są przechowywane obrazy. Określa się go względem ścieżki projektu (project_path).

    Katalog generowanych obrazów

    Katalog, w którym są przechowywane wygenerowane obrazy. Określa się go względem ścieżki project_path, a jego domyślna wartość to images_dir.

    Katalog czcionek

    Katalog, w którym są przechowywane pliki czcionek.

    Zasoby względne

    Określa, czy funkcje pomocnicze Compass mają generować względne adresy URL, prowadzące z wygenerowanego kodu CSS do zasobów, czy też bezwzględne adresy URL z użyciem ścieżki HTTP danego typu zasobu.

  4. Jeśli w oknie dialogowym Serwisy > Zarządzaj serwisami > Preprocesory CSS została zaznaczona opcja Włącz automatyczną kompilację przy zapisie pliku, to program Dreamweaver będzie generować plik CSS za każdym razem, gdy użytkownik zapisze zmiany w plikach Sass.

    Można także wyświetlić podgląd tych zmian w czasie rzeczywistym w oknie przeglądarki. Więcej informacji o podglądzie zmian w przeglądarce można znaleźć w sekcji Podgląd w czasie rzeczywistym.

    Jeśli nie chcesz korzystać z automatycznej kompilacji, możesz ręcznie skompilować plik CSS, wykonując jedną z następujących czynności:

    • Kliknij prawym przyciskiem myszy plik Sass, LESS lub SCSS na panelu Pliki, a następnie wybierz opcję Kompiluj.
    • Wybierz polecenie Narzędzia > Kompiluj, aby skompilować bieżący plik.
  5. Skompilowany plik CSS można następnie dołączyć do plików HTML w serwisie. Więcej informacji: Łączenie z zewnętrznym arkuszem stylów CSS.

Korzystanie ze struktury Bourbon

Program Dreamweaver obsługuje serię produktów Bourbon. Jeśli tworzysz arkusze stylów w strukturze Bourbon, możesz je skompilować i wygenerować z nich pliki CSS w programie Dreamweaver.

Obsługiwane są następujące odmiany produktów Bourbon:

  • Bourbon — prosta, lekka biblioteka mieszania na potrzeby struktury Sass.
  • Bourbon Neat — lekka, semantyczna struktura siatki na potrzeby Sass i Bourbon.
  • Bourbon Bitters — style, zmienne i struktury konstrukcyjne do tworzenia projektów Bourbon.

Strukturę Bourbon importuje się, dodając w kodzie jedną z następujących reguł:

  • @import "bourbon" — aby zaimportować Bourbon;
  • @import "neat" — aby zaimportować Bourbon Neat;
  • @import "base" — aby zaimportować Bourbon Bitters.

Program Dreamweaver będzie wówczas używać pakietowej wersji struktury Bourbon, kompilując pliki preprocesora.

Można również zainstalować pliki struktury Bourbon w serwisie, tak aby kolejne aktualizacje programu Dreamweaver nie wpływały na obieg pracy kompilacji. Pliki struktury Bourbon zostaną skopiowane do serwisu. Będą one używane podczas kompilacji wyzwalanej dla dowolnego z plików, w których zaimportowano tę strukturę.

Instalowanie plików Bourbon, Bourbon Neat lub Bourbon Bitters

Aby zainstalować strukturę Bourbon lub dowolną z jej odmian:

  1. W oknie dialogowym Konfiguracja serwisu wybierz opcję Preprocesory CSS > Bourbon, Bourbon Neat lub Bourbon Bitters.

  2. Kliknij przycisk Zainstaluj pliki, aby zainstalować pliki w podanej lokalizacji wewnątrz katalogu głównego serwisu.

    Instalowanie plików Bourbon
    Instalowanie plików Bourbon

    Wszystkie pliki Bourbon zostaną zainstalowane w folderze serwisu i będą widoczne na panelu Pliki.

    Zainstalowane pliki Bourbon
    Zainstalowane pliki Bourbon

    W przypadku błędu na panelu Wyjście (Okno > Wyniki > Wyjście) zostaną wyświetlone informacje o tych błędach, a ikona na pasku stanu zmieni kolor na czerwony.

Kompilowanie plików preprocesora CSS

Pliki preprocesora CSS można kompilować jedną z następujących metod:

Konfigurowanie automatycznej kompilacji plików preprocesora CSS

W programie Dreamweaver można skonfigurować ustawienia automatycznej kompilacji zmian wprowadzonych w pliku Sass lub LESS do postaci kodu CSS. Można także określić położenie (wewnątrz katalogu głównego serwisu), w którym mają być zapisywane tak wygenerowane pliki CSS.

  1. W oknie dialogowym Konfiguracja serwisu wybierz pozycję Preprocesory CSS > Ogólne > Włącz automatyczną kompilację przy zapisie pliku.

    Włączanie automatycznej kompilacji
    Włączanie automatycznej kompilacji

  2. Kliknij opcję Preprocesory CSS > Źródło i wyjście.

  3. Określ lokalizacje, w których chcesz zapisywać wygenerowane pliki CSS. Można wybrać jedną z następujących opcji:

    W tym samym folderze, co źródło

    Zaznacz tę opcję, jeśli chcesz, aby generowane pliki CSS były zapisywane w tym samym folderze, co źródłowe pliki Sass i LESS.

    Zdefiniuj folder wyjściowy

    Zaznacz tę opcję, jeśli chcesz określić folder, w którym mają być zapisywane wygenerowane pliki CSS.

    Zastąp segment ścieżki wejściowej

    Ta opcja umożliwia zastąpienie fragmentu ścieżki z użyciem łańcuchów podawanych w polach „Z” i „Na”.

  4. Określ folder z plikami Sass lub LESS, który ma być obserwowany przez program Dreamweaver.

    Jeśli wprowadzisz jakiekolwiek zmiany w plikach w tym obserwowanym folderze, program Dreamweaver automatycznie skompiluje te pliki, gdy zostaną zapisane.

    Ustawienia źródła i wyjścia dla preprocesorów CSS
    Ustawienia źródła i wyjścia dla preprocesorów CSS

    Uwaga:

    Program Dreamweaver obserwuje i kompiluje te pliki także wtedy, gdy zmiany zostały wprowadzone w innym programie (na przykład w edytorze tekstu).

Po pomyślnym zakończeniu kompilacji w panelu Wyjście (Okno > Wyniki > Wyjście) zostanie wyświetlony odpowiedni komunikat, a ikona na pasku stanu będzie mieć kolor zielony. Aby otworzyć skompilowany plik CSS, można kliknąć prawym przyciskiem myszy komunikat o powodzeniu operacji w panelu.

Pojawienie się błędów lub ostrzeżeń sugeruje, że kompilacja kodu CSS nie została zakończona pomyślnie. W takiej sytuacji ikona stanu będzie mieć kolor czerwony, a w panelu Wyjście zostanie wyświetlona lista błędów i ostrzeżeń. Klikając dwukrotnie komunikat o błędzie w tym panelu można szybko przejść do odpowiedniego wiersza w kodzie. Plik CSS nie zostanie pomyślnie skompilowany, dopóki nie usunie się wszystkich błędów.

Uwaga:

Panel Wyjście jest zadokowany w dolnej części przestrzeni roboczej. Jeśli przypadkowo go zamkniesz, możesz go otworzyć za pomocą polecenia Okno > Wyjście.

Panel Wyjście można również przełączać (otwierać lub zamykać) za pomocą ikony stanu, gdy jest czerwona.

Po uzyskaniu skompilowanego pliku CSS można połączyć stronę WWW z tym arkuszem stylów. Jeśli wprowadzi się zmiany w preprocesorach CSS, odpowiadające im skompilowane pliki CSS zostaną automatycznie uaktualnione. Strona WWW również zostanie automatycznie odświeżona w widoku aktywnym.

Więcej informacji: Łączenie z zewnętrznym arkuszem stylów CSS.

Ręczne kompilowanie plików preprocesora CSS

W niektórych sytuacjach (np. jeśli nie zdefiniowano jeszcze serwisu programu Dreamweaver) można skorzystać z opcji ręcznego kompilowania plików preprocesora CSS.

W takim przypadku należy wyłączyć opcję Włącz automatyczną kompilację przy zapisie pliku w panelu Preprocesory CSS > Ogólne okna dialogowego Konfiguracja serwisu.

Aby ręcznie skompilować kod preprocesora CSS, kliknij odpowiedni plik w panelu Pliki prawym przyciskiem myszy i wybierz polecenie Kompiluj.

Ręczne kompilowanie plików preprocesora CSS za pomocą panelu Pliki
Ręczne kompilowanie plików preprocesora CSS za pomocą panelu Pliki

Można również wybrać polecenie Narzędzia > Kompiluj, aby skompilować bieżący plik.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?