Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00269 010987 7496695 na godz. na dobę w sumie
Adobe Dreamweaver CC/CC PL. Oficjalny podręcznik - ebook/pdf
Adobe Dreamweaver CC/CC PL. Oficjalny podręcznik - ebook/pdf
Autor: Liczba stron: 448
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-2513-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> dreamweaver
Porównaj ceny (książka, ebook (-20%), audiobook).
Adobe Dreamweaver CC jest jednym z najbardziej uznanych programów do tworzenia nowoczesnych serwisów internetowych, ich publikowania i zarządzania nimi. Znakomicie sprawdza się do tworzenia nawet dość złożonych aplikacji, przy czym nie wymaga wpisywania dużej ilości własnego kodu. Ułatwia wzbogacanie stron w grafikę i animacje oraz publikowanie i rozbudowywanie serwisu. Aby jednak osiągać założone cele przy korzystaniu z Dreamweavera, trzeba dobrze opanować ten program.

Książka, którą trzymasz w dłoni, należy do cyklu najlepszych podręczników opracowywanych przez ekspertów firmy Adobe. Ta niezastąpiona dla wszystkich użytkowników Dreamweavera książka składa się z 14 lekcji. Można tu znaleźć informacje o podstawowych narzędziach i sposobach ich wykorzystania, jak również o zaawansowanych funkcjach programu. Szczególnie cenne są liczne wskazówki i porady dotyczące najnowszych narzędzi i rozwiązań w Adobe Dreamweaver.

Najważniejsze zagadnienia ujęte w podręczniku:

Przekonaj się, jak szybko opanujesz Dreamweavera!


James J. Maivald jest artystą grafikiem z co najmniej dwudziestoletnim doświadczeniem. Jest również cenionym autorem materiałów szkoleniowych do nauki Adobe Photoshop i CorelDRAW, napisał dziesiątki artykułów dotyczących tworzenia i publikowania dokumentów elektronicznych. Prowadzi liczne seminaria i szkolenia z zakresu obsługi Adobe InDesign i z XML. Ponadto Maivald, jako Adobe Certified Expert (ACE) w zakresie oprogramowania InDesign i Dreamweaver, koordynuje Grupę Użytkowników InDesign w Chicago.
Znajdź podobne książki

Darmowy fragment publikacji:

• Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność spis treŚci wstęp 1 O książce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Skrócone adresy TinyURL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Wymagania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Konwencje stosowane w tej książce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Polecenia w systemie Windows i OS X. . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Instalowanie programu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Uaktualnianie programu Dreamweaver do najnowszej wersji . . . . . 6 Gdzie są materiały do ćwiczeń? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Zalecana kolejność wykonywania ćwiczeń . . . . . . . . . . . . . . . . . . . . . . . 7 Defi niowanie serwisu w programie Dreamweaver . . . . . . . . . . . . . . . . 8 Konfi gurowanie przestrzeni roboczej . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Sprawdzanie dostępności aktualizacji . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Dodatkowe materiały . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 1 dostosowaNie przestrzeNi roBoczeJ 16 Rzut oka na przestrzeń roboczą. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Obsługa ekranu powitalnego Obsługa ekranu powitalnego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Wyświetlanie przewodników po nowych funkcjach Wyświetlanie przewodników po nowych funkcjach . . . . . . . . . . . . . 22 Przełączanie trybu i podział widoku . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Praca z panelami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Wybór układu przestrzeni roboczej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Narzędzie Extract . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Dostosowywanie pasków narzędziowych . . . . . . . . . . . . . . . . . . . . . . . 37 Dostosowywanie ustawień Dreamweavera . . . . . . . . . . . . . . . . . . . . . 37 Tworzenie własnych skrótów klawiszowych . . . . . . . . . . . . . . . . . . . . . 40 Obsługa panelu Properties (Właściwości) . . . . . . . . . . . . . . . . . . . . . . . 41 Korzystanie z interfejsu Related Files (Pliki powiązane) . . . . . . . . . . 42 Korzystanie z selektorów znaczników . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Korzystanie z panelu CSS Designer (Projektant CSS) . . . . . . . . . . . . . 44 iv sPIs tREŚCI Poleć książkęKup książkę Korzystanie z interfejsu wizualnych zapytań o media . . . . . . . . . . . . 49 Korzystanie z panelu DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Korzystanie z szybkich inspektorów właściwości . . . . . . . . . . . . . . . . 50 Wprowadzenie do funkcji Emmet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Odkrywanie, eksperymentowanie i nauka . . . . . . . . . . . . . . . . . . . . . . 54 2 PODSTAWY JĘZYKA HTML 56 Czym jest HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Początki HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Najczęściej używane znaczniki kodu HTML . . . . . . . . . . . . . . . . . . . . . 60 Co nowego w HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 3 PODSTAWY CSS 66 Czym są kaskadowe arkusze stylów CSS? . . . . . . . . . . . . . . . . . . . . . . . 68 Formatowanie za pomocą HTML a CSS . . . . . . . . . . . . . . . . . . . . . . . . . 69 Domyślne ustawienia HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Model blokowy CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Podgląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Formatowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 No i wreszcie grupowanie, klasy oraz ID! . . . . . . . . . . . . . . . . . . . . . . . . 96 Omówienie CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 4 PODSTAWY PROJEKTOWANIA INTERAKTYWNYCH STRON WWW 102 Projektowanie nowego serwisu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Scenariusz Scenariusz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Tworzenie miniatur i schematów Tworzenie miniatur i schematów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Tworzenie zasobów za pomocą funkcji Tworzenie zasobów za pomocą funkcji Adobe Generator (opcjonalnie) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 5 PROJEKTOWANIE MAKIET 120 Ocena opcji projektu strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Korzystanie z prede(cid:25) niowanych układów . . . . . . . . . . . . . . . . . . . . . . 124 ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK v Poleć książkęKup książkę 6 KorzystaNie z pLatFormy www 144 Tworzenie zawartości nagłówka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Tworzenie nawigacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Tworzenie treści semantycznych. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Zarządzanie szerokością komponentu Bootstrap . . . . . . . . . . . . . . . 189 Wstawianie encji HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Tworzenie globalnych stylów tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 7 proJeKtowaNie Na potrzeBy Urządzeń moBiLNycH 204 Projektowanie responsywne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Projektowanie responsywne Dostosowywanie układów Bootstrapa Dostosowywanie układów Bootstrapa do różnych rozmiarów ekranu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Korzystanie z zapytań o media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Korzystanie z zapytań o media 8 tworzeNie szaBLoNÓw 234 Tworzenie szablonów na podstawie gotowych układów strony . . . .236 Tworzenie szablonów na podstawie gotowych układów strony Tworzenie regionów edytowalnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Tworzenie regionów edytowalnych Wstawianie metadanych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Wstawianie metadanych Tworzenie stron potomnych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Tworzenie stron potomnych 9 praca z teKstem, Listami i taBeLami 256 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Tworzenie i formatowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Tworzenie i formatowanie tekstu Tworzenie list . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 Tworzenie list Tworzenie tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Tworzenie tabel Sprawdzanie pisowni w dokumencie . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Wyszukiwanie i zastępowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Opcjonalne samodzielne ćwiczenie. . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 10 eLemeNty GraFiczNe 310 Podstawy grafi ki WWW. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 Wstawianie zdjęć . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 Wstawianie zdjęć Dostosowanie położenia obrazu za pomocą klas CSS . . . . . . . . . . . 320 Praca z panelem Insert (Wstaw) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 Praca z menu Insert (Wstaw) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 Wstawianie plików o niezgodnych formatach . . . . . . . . . . . . . . . . . . 325 Inteligentne obiekty programu Photoshop (opcjonalnie) . . . . . . . 328 Kopiowanie i wklejanie grafi ki z programu Photoshop (opcjonalnie) . . . . . . . . . . . . . . . . . . . . . . 331 vi sPIs tREŚCI Poleć książkęKup książkę Wstawianie obrazów metodą przeciągnij i upuść . . . . . . . . . . . . . . . 335 Korzystanie z panelu Properties (Właściwości) do pracy z grafi ką . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 11 NawiGacJa 342 Podstawy łączy hipertekstowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 Łącza do stron należących do tego samego serwisu . . . . . . . . . . . . 348 Łącza do stron należących do tego samego serwisu Tworzenie łączy do stron zewnętrznych . . . . . . . . . . . . . . . . . . . . . . . . 355 Tworzenie łączy do stron zewnętrznych Tworzenie łączy e-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 Tworzenie łączy w postaci elementu grafi cznego . . . . . . . . . . . . . . 360 Łącza w obrębie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363 Sprawdzanie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369 Dodawanie łączy skierowanych do tej samej strony (opcjonalnie) . . . . . . . . . . . . . . . . . . . . . . . . . . 370 12 proJeKtowaNie iNteraKtywNycH stroN www 372 Kilka informacji o zachowaniach programu Dreamweaver . . . . . . 374 Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 Stosowanie zachowań programu Dreamweaver . . . . . . . . . . . . . . . . 377 Tworzenie paneli harmonijkowych Bootstrapa . . . . . . . . . . . . . . . . . 387 Tworzenie paneli harmonijkowych Bootstrapa 13 wyKorzystaNie aNimacJi i wideo 400 Zrozumieć animacje i wideo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Zrozumieć animacje i wideo Przegląd ukończonego projektu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Umieszczanie animacji na stronie WWW . . . . . . . . . . . . . . . . . . . . . . . 405 Wyświetlanie fi lmów wideo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 Wyświetlanie fi lmów wideo Wybieranie opcji wideo HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415 14 pUBLiKowaNie stroNy w iNterNecie 418 Konfi gurowanie zdalnego serwisu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 Konfi gurowanie zdalnego serwisu Maskowanie folderów i plików . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 Maskowanie folderów i plików Czynności końcowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 Czynności końcowe Publikowanie strony w internecie (opcjonalnie) . . . . . . . . . . . . . . . . 432 Publikowanie strony w internecie (opcjonalnie) Synchronizacja serwisów lokalnych i zdalnych . . . . . . . . . . . . . . . . . 436 Synchronizacja serwisów lokalnych i zdalnych dodateK. sKrÓcoNe adresy tiNyUrL sKorowidz 440 441 ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK vii Poleć książkęKup książkę 12 Projektowanie interaktywnych stron www tematyka lekcji W trakcie tej lekcji zapoznasz się z narzędziami pozwalającymi tworzyć interak- tywne elementy stron WWW. Nauczysz się między innymi: • Wykorzystać zachowania programu Dreamweaver do utworzenia obrazka z efektem rollover. • Tworzyć panele harmonijkowe Bootstrapa. Ukończenie ćwiczeń opisanych w tej lekcji powinno zająć około 2 godzin. Zanim zaczniesz, pobierz z serwera przykłady dotyczące lekcji 12., zapisz je w dogodnym miejscu na dysku twardym i zdefiniuj nowy serwis na podstawie foldera lesson12, tak jak opisano we „Wstępie”. 372 Poleć książkęKup książkę Program Dreamweaver pozwala utworzyć zaawansowane efekty interaktywne w postaci zachowań oraz paneli harmonijkowych dzięki platformom Bootstrap i jQuery. 373 Poleć książkęKup książkę  Uwaga: Jeśli nie pobrałeś jeszcze plików przykłado- wych dotyczących tej lekcji, zrób to teraz, zgodnie z opisem we „Wstępie”.  Uwaga: Zacho- wania programu Dreamweaver nie są dostępne, jeśli w programie nie jest otwarty żaden plik. kilka informacji o zachowaniach programu Dreamweaver Termin Web 2.0 służy do opisu znaczącej zmiany, jaka zaszła w sposobie wykorzysty- wania zasobów internetowych przez użytkownika. Wcześniej mieliśmy do dyspozy- cji przeważnie strony statyczne, zawierające tekst, grafikę i proste łącza, a obecnie możemy przeglądać strony dynamiczne, zawierające filmy wideo, animacje i ele- menty interaktywne. Dreamweaver zawsze był liderem w branży, dostarczając wielu narzędzi umożliwiających wykorzystanie najnowszych technik, począwszy od nieza- wodnej kolekcji zachowań JavaScript, jQuery i widżetów Bootstrapa, a skończywszy na wsparciu najnowszej techniki jQuery Mobile. W tej lekcji zajmiemy się dwiema z tych technik: zachowaniami programu Dreamweaver i widżetami Bootstrapa. Zachowania w programie Dreamweaver to skrypty w języku JavaScript, które po- dejmują określone działania — na przykład powodują otwarcie okna przeglądarki po wystąpieniu określonego zdarzenia, takiego jak kliknięcie lewym przyciskiem myszy. Proces projektowania zachowań można podzielić na trzy etapy: 1 Wskazanie elementu strony, który ma wywoływać określone zachowanie. 2 Wybranie określonego zachowania. 3 Konfigurowanie ustawień lub parametrów zachowania. Zdarzenie wywołujące określone zachowanie najczęściej opiera się na istnieniu pewnego łącza, zarówno tekstowego, jak i graficznego. Do generowania zacho- wań wykorzystuje się zwykle „puste” łącza, które nie powodują wczytania innej strony internetowej; takie łącza mogą zawierać adres w postaci krzyżyka (#). Z „pustych” łączy korzystaliśmy już w lekcji 11., „Nawigacja”. Zachowanie Swap Image (Zamień obraz), które zastosujemy w bieżącej lekcji, nie wymaga obecno- ści „pustych” łączy, jednak nie należy zapominać o ich utworzeniu w przypadku innych zachowań. Dreamweaver zwykle automatycznie tworzy odpowiedni kod, jednakże niekiedy konieczne jest samodzielne utworzenie „pustych” łączy, aby aktywować niektóre zachowania. Program Dreamweaver oferuje ponad 16 różnych zachowań; wszystkie można skonfigurować przy użyciu panelu Behaviors (Zachowania). Aby go wyświetlić, wydaj polecenie Window/Behaviors (Okno/Zachowania). Jeśli ta liczba Cię nie satysfakcjo- nuje, możesz za darmo, lub za niewielką opłatą, pobrać z internetu setki dodatkowych zachowań. Duży wybór zachowań oferuje serwis Adobe Add-ons, dostępny po klik- w panelu Tag Inspector (Inspektor nięciu ikony Add Behavior (Dodaj zachowanie) znaczników) i wybraniu opcji Get More Behaviors (Pobierz więcej zachowań) lub wydaniu polecenia Window/Browse Add-ons (Okno/Przeglądaj dodatki). Kiedy otworzy się serwis Adobe Add-ons, kliknij łącze służące do pobrania dodatku lub rozszerzenia. Zwykle wystarczy dwukrotnie kliknąć dodatek, aby go zainstalować. Oto wybrane funkcje, jakie można zrealizować przy użyciu zachowań programu Dreamweaver: • Otwarcie okna przeglądarki. • Zmiana wyświetlanego obrazu na inny i z powrotem, czyli tzw. „efekt rollover”. 374 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę • Wytłumienie obrazu lub części strony. • Zwiększenie lub zmniejszenie elementu grafi cznego. • Wyświetlenie komunikatu. • Zmiana tekstu lub innego elementu HTML w obrębie danego obszaru strony. • Wyświetlanie i ukrywanie fragmentów strony. • Wywołanie niestandardowej funkcji w języku JavaScript. Nie wszystkie zachowania są dostępne przez cały czas. Niektórych można użyć dopiero wtedy, gdy na stronie będą obecne lub zaznaczone określone elementy, takie jak obrazy czy łącza. Na przykład zachowanie Swap Image (Zamień obraz) wymaga umieszczenia na stronie przynajmniej jednego elementu grafi cznego — w przeciwnym razie będzie ono niedostępne. Każde zachowanie można skonfi gurować przy użyciu odrębnego okna dialogo- wego, oferującego wszystkie niezbędne opcje i ustawienia. I tak na przykład okno dialogowe zachowania Open Browser Window (Otwórz okno przeglądarki) umożli- wia wpisanie adresu strony internetowej lub nazwy pliku, który ma zostać otwarty w nowym oknie, oraz określenie wysokości, szerokości i innych atrybutów tego okna. Po zdefi niowaniu parametrów wybranego zachowania zostaje ono dodane do listy zachowań w panelu Behaviors (Zachowania) wraz z domyślnym zdarzeniem, które je uaktywni. Wybrane parametry można zmienić w dowolnym momencie. Zachowania programu Dreamweaver są bardzo elastyczne. Jedno zdarzenie może wyzwalać wiele różnych zachowań, co pozwala na przykład zastąpić jeden obrazek innym, zmieniając jednocześnie tekst podpisu pod tym obrazkiem — a wszystko to po jednym kliknięciu przycisku myszy. Choć użytkownikowi strony może się wydawać, że zmiany te zaszły jednocześnie, to jednak w rzeczywistości zachowania następują jedno po drugim. Po zdefi niowaniu zdarzenia, które ma wywołać kilka różnych zachowań, możesz ustawić kolejność ich realizacji. Serwis Adobe Add-ons oferuje mnóstwo zasobów dla wielu aplikacji z pakietu Creative Cloud. Dodatki są zarówno płatne, jak i darmowe. Więcej informacji na temat serwisu Adobe Add-ons znajduje się na stronie creative. adobe.com/addons. ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 375 Poleć książkęKup książkę Przegląd ukończonego projektu W pierwszej części lekcji będziemy pracować nad nową stroną oferującą wycieczki organizowane przez GreenStart. Przed przystąpieniem do realizacji ćwiczeń warto zapoznać się z wyglądem ukończonego projektu w przeglądarce internetowej. 1 Uruchom program Adobe Dreamweaver CC (wydanie 2015.1) lub w wersji późniejszej. Jeśli to konieczne, zdefi niuj serwis na podstawie foldera lesson12. Nazwij serwis lesson12. 2 Otwórz plik travel_fi nished.html i wyświetl stronę w domyślnej przeglądarce. 3 Przykładowa strona zawiera zachowania programu Dreamweaver. Jeśli domyślną przeglądarką w Twoim systemie operacyjnym jest program Microsoft Internet Explorer, a w górnej części okna tej przeglądarki wyświet- lony został komunikat o zablokowaniu skryptu i kontrolek ActiveX ze wzglę- du na ustawiony poziom zabezpieczeń, kliknij pasek z tym komunikatem i wy- daj polecenie Allow Blocked Content (Zezwalaj na zablokowaną zawartość). Ten komunikat pojawi się tylko wtedy, gdy przeglądany plik znajduje się na dysku twardym. Jeśli plik jest hostowany w internecie, komunikat nie zostanie wyświetlony. 4 Umieść kursor nad nagłówkiem Tour Eiff el. Zwróć uwagę na zdjęcie umieszczone z prawej strony tekstu. Dotychczasowe zdjęcie zostaje zastąpione widokiem wieży Eiffl a. 5 Przesuń kursor nad nagłówkiem Paris Underground. Ponownie sprawdź zdjęcie umieszczone z prawej strony tekstu. Po przesunięciu kursora poza nagłówek na miejscu zdjęcia pojawiła się ponow- nie reklama Eco-Tour. Nie na długo jednak — po umieszczeniu kursora nad na- główkiem Paris Underground, wyświetli się zdjęcie podziemi paryskiego metra. 6 Sprawdź zachowanie obrazków po przesunięciu kursora nad każdym z na- główków h3 . Na stronie są wyświetlane na przemian reklama Eco-Tour oraz zdjęcia z po- szczególnych miejsc. Jest to tak zwane zachowanie Swap Image (Zamień obraz). 7 Gdy skończysz, zamknij wszystkie okna przeglądarki i wróć do programu Dreamweaver. 8 Zamknij plik travel-fi nished.html. W kolejnym ćwiczeniu nauczysz się stosować zachowania programu Dreamweaver. 376 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę stosowanie zachowań programu Dreamweaver Dodanie zachowania do obiektu w programie Dreamweaver jest niezwykle prostą czynnością, wymagającą jedynie kilku kliknięć w odpowiednich miejscach. Zanim jednak będziesz mógł dodać zachowania, musisz utworzyć stronę dotyczącą podróży. 1 Utwórz nową stronę na podstawie szablonu mygreen_temp. 2 Zapisz nowy dokument pod nazwą travel.html i umieść go w głównym folderze serwisu. Jeśli to konieczne, włącz tryb Design (Podgląd). 3 W trybie Design (Podgląd) otwórz plik sidebars12.html znajdujący się w folde- rze lesson12/resources. Umieść kursor w pierwszym akapicie. Przyjrzyj się selektorom znaczników. Akapit jest elementem potomnym elementu blocquote , który znajduje się w elemencie aside. Klasy i struktura nowego pliku są identyczne jak w ele- mencie Sidebar 1 w szablonie serwisu. 4 Zaznacz selektor znacznika aside. 5 Skopiuj element aside z pliku sidebars12.html. 6 Przejdź do pliku travel.html. Umieść kursor w pierwszym cytacie. Zaznacz selektor znacznika aside. 7 Wklej nowy element. Element tymczasowy został zastąpiony nowym. 8 Zamknij plik sidebars12.html. ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 377 Poleć książkęKup książkę 9 Otwórz plik travel-text.html w trybie Design (Podgląd). Plik ten znajduje się w folderze lesson12/resources. Dokument travel-text.html zawiera tabelę i treść przeznaczoną dla strony o podróżach. Zwróć uwagę na brak formatowania zarówno tabeli, jak i tekstu. 10 Naciśnij Ctrl+A (Cmd+A w Mac OS), aby zaznaczyć cały tekst. Następnie naciś- nij Ctrl+C (Cmd+C w Mac OS), aby skopiować zawartość pliku travel-text.html. Zamknij plik. 11 Umieść kursor w tymczasowym nagłówku dokumentu travel.html o następu- jącej treści: Add main heading here. Wpisz Green Travel. 12 Zaznacz tymczasowy nagłówek Add subheading here. Wpisz Eco-Touring, aby go zastąpić. 13 Zaznacz selektor znacznika p frazy Add content here. Naciśnij Ctrl+V (Cmd+V w Mac OS), aby wkleić tekst ze schowka. Na stronie pojawi się zawartość pliku travel-text.html. Nowa treść przyjmuje formatowanie tekstu i tabel zdefiniowane w arkuszu stylów, który utworzyłeś w lekcji 9., „Praca z tekstem, listami i tabelami”. 378 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę Umieścimy teraz na stronie reklamę Eco-Tour. Będzie to wyjściowy obraz dla zachowania Swap Image (Zamień obraz). 14 Kliknij dwukrotnie obraz zastępczy SideAd. Przejdź do domyślnego foldera obrazów serwisu i zaznacz obraz ecotour.jpg. Kliknij przycisk OK (Open [Otwórz] w Mac OS). Obraz tymczasowy został zastąpiony reklamą Eco-Tour. Jednak zanim będziesz mógł zastosować zachowanie Swap Image (Zamień obraz), musisz jednoznacznie zdefi niować obraz, który chcesz zamienić. W tym celu nadasz mu atrybut ID. 15 Zaznacz na stronie obraz ecotour.jpg. W panelu Properties (Właściwości) zaznacz bieżącą treść SideAd znajdującą się w polu ID. Wpisz ecotour i naciśnij Enter (Return w Mac OS). Wpisz Eco-Tour of Paris w polu Alt (Tekst zastępczy). E Wskazówka: Nawet jeśli zajmuje to trochę więcej cza- su, warto nadawać wszystkim obrazkom unikalne ID. 16 Zapisz plik. W kolejnym ćwiczeniu utworzysz zachowanie Swap Image (Zamień obraz) na bazie obrazka ecotour.jpg. Dodawanie zachowań Wspomniano już wcześniej, że możliwość zastosowania wielu z zachowań zależy od zaznaczonego w danej chwili obiektu czy struktury. Zachowanie Swap Image (Zamień obraz) może zostać wywołane przez dowolny element w dokumencie, lecz dotyczy ono tylko obrazów znajdujących się na stronie. 1 Wydaj polecenie Window/Behaviors (Okno/Zachowania), aby wyświetlić panel Behaviors (Zachowania). ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 379 Poleć książkęKup książkę  Uwaga: W razie potrzeby możesz zadokować panel Behaviors (Zachowa- nia) z pozostałymi panelami znajdujący- mi się w interfejsie. 2 Umieść kursor wewnątrz frazy Tour Eiffel i zaznacz selektor znacznika h3 . 3 Kliknij ikonę Add Behavior (Dodaj zachowanie) . Wybierz z listy zachowanie Swap Image (Zamień obraz).  Uwaga: Elementy wyświetlone w po- staci nienazwanych elementów img to obrazy bez atrybu- tów ID. Jeśli chcesz je zastąpić, musisz im najpierw nadać atrybut ID. Na ekranie wyświetlone zostanie okno dialogowe Swap Image (Zamień obraz). Zawiera ono listę obrazów znajdujących się na stronie, którym można przypisać to zachowanie. Możesz zdefiniować zastępowanie jednego lub kilku obrazów jednocześnie. 4 Zaznacz opcję Image „ecotour” (Obraz „ecotour”) i kliknij przycisk Browse (Przeglądaj). 5 W oknie dialogowym Select Image Source (Wybierz źródło obrazu) wybierz plik tower.jpg, znajdujący się w folderze images. Kliknij przycisk OK (Open [Otwórz] w Mac OS).  Uwaga: Opcja Preload Images (Wczytaj wstępnie obrazy) gwarantuje wczytanie wszystkich obrazów potrzeb- nych do prawid- łowego działania zachowania, zanim wczytana zostanie sama strona. Dzięki temu, po kliknięciu przez użytkownika obiektu wyzwalają- cego zachowanie, zamiana obrazów będzie przebie- gać płynnie, bez opóźnień czy innych zakłóceń. 6 Jeśli to konieczne, w oknie dialogowym Swap Image (Zamień obraz) zaznacz opcję Preload Images (Wczytaj wstępnie obrazy), po czym kliknij OK. 380 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę W panelu Behaviors (Zachowania) pojawiła się etykieta zachowania Swap Image (Zamień obraz), do której przypisany jest atrybut onMouseOver. Atry- buty zachowania mogą być w miarę potrzeby zmieniane za pomocą panelu Behaviors (Zachowania). 7 Kliknij atrybut onMouseOver, aby sprawdzić listę dostępnych opcji. Lista zawiera zdarzenia, które mogą wyzwalać zachowania. Większość nazw jest na tyle opisowa, że pozwala odgadnąć, na czym polega zdarzenie. Jednak na razie pozostaw opcję onMouseOver. 8 Zapisz plik. Kliknij przycisk Live (Aktywny), aby sprawdzić działanie zachowania. Przesuń kursorem nad frazą Tour Eiff el. Kiedy przesuniesz kursor nad tekstem, reklama Eco-Tour jest zastępowana zdję- ciem wieży Eiffl a. Jest tylko jedno drobne niedociągnięcie. Otóż po przesunięciu kursora poza tekst, obraz pierwotny nie wraca na swoje miejsce. Dzieje się tak dlatego, że mu tego nie nakazałeś. Aby zapewnić powrót pierwszego obrazka, musisz dodać do tego samego obiektu jeszcze jedno zachowanie — Swap Image Restore (Przywróć zamieniony obraz). Dodawanie zachowania swap image restore (Przywróć zamieniony obraz) W niektórych przypadkach określona operacja wymaga zdefi niowania więcej niż jednego zachowania. Aby przywrócić wyświetlanie reklamy Eco-Tour po odsunię- ciu kursora od nagłówka, musisz zdefi niować funkcję, która tego dokona. 1 Powróć do trybu Design (Projekt). Umieść kursor wewnątrz frazy Tour Eiff el i sprawdź, co jest wyświetlone w pa- nelu Behaviors (Zachowania). Panel wyświetla zachowanie, które zostało do tej pory przypisane. Nie musisz nawet zaznaczać całego elementu wyzwalającego; Dreamweaver zakłada, że chcesz dokonać zmian w całym tym elemencie. ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 381 Poleć książkęKup książkę 2 Kliknij ikonę Add Behavior (Dodaj zachowanie) . Wybierz z listy opcję Swap Image Restore (Przywróć zamieniony obraz). W oknie dialogowym Swap Image Restore (Przywróć zamieniony obraz) kliknij przycisk OK. W panelu Behaviors (Zachowania) wyświetlone zostało zachowanie Swap Image Restore (Przywróć zamieniony obraz) wraz z atrybutem onMouseOut. 3 Włącz tryb Code (Kod) i zobacz, jak wygląda kod opisujący tekst Tour Eiff el. Zdarzenia wyzwalające zachowania — onMouseOver i onMouseOut — zostały dodane jako atrybuty do znacznika h3 . Pozostała część kodu JavaScript została umieszczona w sekcji head dokumentu. 4 Zapisz plik i kliknij przycisk Live (Aktywny), aby sprawdzić działanie zachowania. Sprawdź działanie wyzwalacza tekstowego Tour Eiff el. Kiedy kursor znajdzie się nad wspomnianą frazą, obraz Eco-Tour jest zastępo- wany zdjęciem wieży Eiffl a, a następnie, po przesunięciu kursora poza tekst, powraca na swoje miejsce. Zachowanie działa poprawnie, przy czym sam tekst nie zmienia się w widoczny sposób i nic nie wskazuje na to, że po umieszczeniu nad nim kursora stanie się coś magicznego. Nasz wysiłek może pójść na marne, ponieważ wielu użytkowników nie zauważy efektu zastępowania zdjęcia. Czasem należy zachęcić użytkowników lub nakierować ich na tego typu efekty. Wielu projektantów stosuje do tego celu łącza, ponieważ większość użytkowni- ków internetu przywykła do interaktywnych właściwości łączy. Zastąpisz teraz bieżący efekt nowym, wykorzystującym łącze. Usuwanie zachowań Zanim nadasz fragmentowi tekstu właściwości łącza, musisz usunąć przypisane do niego zachowania Swap Image (Zamień obraz) i Swap Image Restore (Przywróć zamieniony obraz). 1 Włącz podgląd Design (Projekt). Jeśli to konieczne, wyświetl panel Behaviors (Zachowania). Umieść kursor wewnątrz tekstu Tour Eiff el. 382 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę W panelu Behaviors (Zachowania) wyświetlone są dwa zachowania dodane do tekstu. Nie ma znaczenia, które usuniesz jako pierwsze. 2 Zaznacz etykietę Swap Image (Zamień obraz). Kliknij ikonę Remove Event (Usuń zdarzenie) . 3 Zaznacz teraz etykietę Swap Image Restore (Przywróć zamieniony obraz). Ponownie kliknij ikonę Remove Event (Usuń zdarzenie). Obydwa zachowania zostały usunięte. To samo stało się ze związanym z nimi kodem JavaScript. 4 Zapisz plik i ponownie wyświetl stronę w trybie aktywnym, aby sprawdzić zachowanie tekstu. Tekst nie wyzwala już zachowania Swap Image (Zamień obraz). Aby przypisać zachowanie do łącza, należy najpierw zdefiniować dla nagłówka łącze lub łącze tymczasowe. Dodawanie zachowań do łączy Nawet jeśli łącze nie prowadzi do innego dokumentu, możemy dodać do niego zachowanie. W tym ćwiczeniu dodasz łącze tymczasowe (#) do nagłówka, aby zapewnić wsparcie dla pożądanego zachowania. 1 Zaznacz sam tekst Tour Eiffel w elemencie h3 . Wpisz # w polu Link (Łącze) znajdującym się w panelu Properties (Właściwości). Naciśnij Enter (Return w Mac OS), aby utworzyć łącze zastępcze. Tekst zostanie sformatowany zgodnie z domyślnym stylem łącza. Pojawi się też selektor znacznika a. 2 Umieść kursor wewnątrz łącza Tour Eiffel. Kliknij ikonę Add Behavior (Dodaj zachowanie) Wybierz z listy opcję Swap Image (Zamień obraz). Jeśli kursor pozostanie w dowolnym miejscu łącza, zachowanie zostanie przy- pisane do całej zawartości znacznika. . ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 383 Poleć książkęKup książkę 3 W oknie dialogowym Swap Image (Zamień obraz) zaznacz opcję image „eco- tour” (Obraz „ecotour”). Kliknij przycisk Browse (Przeglądaj) i wybierz plik tower.jpg, znajdujący się w folderze images. Kliknij przycisk OK (Open [Otwórz] w Mac OS). 4 W oknie dialogowym Swap Image (Zamień obraz) zaznacz obie opcje Preload Images (Wczytaj wstępnie obrazy) oraz Restore Images onMouseOut (Przywracaj obrazy przy zdarzeniu onMouseOut), po czym kliknij OK. W panelu Behaviors (Zachowania) wyświetlone zostały zdarzenia Swap Image (Zamień obraz) oraz Swap Image Restore (Przywróć zamieniony obraz). Jako że zachowanie przywracające obraz zostało zdefiniowane od razu, Dreamwea- ver, w ramach zwiększania efektywności, sam zadbał o przywrócenie stanu pierwotnego. 5 Zaznacz tekst Paris Underground i nadaj mu właściwości łącza (wpisując #). Przypisz do niego zachowanie Swap Image (Zamień obraz). Wybierz z foldera images obraz underground.jpg. 6 Powtórz punkt 5. w przypadku tekstu Seine Dinner Cruise. Tym razem wybierz obraz cruise.jpg. 7 Powtórz punkt 5. dla tekstu Champs Élysées. Wybierz obraz champs.jpg. Zachowania Swap Image (Zamień obraz) są już gotowe, lecz wygląd łączy nie pasuje do kolorystyki serwisu. Utworzymy teraz dwie własne reguły CSS, aby poprawić formatowanie. Jedna z tych reguł będzie dotyczyć elementu nagłówka, a druga samego łącza. 8 Wybierz arkusz green_styles.css w panelu CSS Designer (Projektant CSS), a następnie wybierz opcję GLOBAL (GLOBALNIE). Utwórz nowy selektor: article table h3 9 Zdefiniuj w nowej regule następujące właściwości: margin-top: 0px margin-bottom: 5px font-size: 130 font-family: Arial Narrow , Verdana, Trebuchet MS , sans-serif 384 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę 10 Wybierz arkusz green_styles.css, a następnie wybierz opcję GLOBAL (GLOBALNIE). Utwórz nowy selektor: table h3 a:link, table h3 a:visited 11 Zdefi niuj w nowej regule następujące właściwości: color: #090 font-weight: bold Nagłówki są teraz lepiej widoczne i pasują wyglądem do reszty serwisu. 12 Zapisz wszystkie pliki. Przetestuj zachowania w trybie aktywnym. Zwróć uwagę na podkreślenie, które pojawia się pod łączem, gdy umieścisz nad nim kursor myszy. Zachowanie Swap Image (Zamień obraz) działa poprawnie w przypadku wszystkich łączy. Jeśli dowolne łącze nie działa, sprawdź, czy zacho- wanie zostało do niego poprawnie dodane. komponenty responsywne Po uzyskaniu satysfakcjonujących efektów rollover należy sprawdzić, czy nowe komponenty poprawnie dostosowują się do responsywnego projektu strony. Weryfi kację można przeprowadzić w programie Dreamweaver lub w innej nowo- czesnej przeglądarce zainstalowanej na komputerze. 1 Jeśli to konieczne, otwórz plik travel.html. Włącz tryb Live (Aktywny). 2 Przeciągnij Scrubber w lewo, aby sprawdzić, jak nowa tabela reaguje na istnie- jące zapytania o media. Tabela dostosowuje swój wygląd do zmiennej szerokości ekranu w podobny sposób jak tabele utworzone i sformatowane w lekcji 9. Wszystko wygląda poprawnie, z jednym wyjątkiem. Otóż reklama Eco-Tour nie zmienia wcale rozmiaru. ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 385 Poleć książkęKup książkę Przy szerokości ekranu wynoszącej 426 piksele dwie kolumny ulegają scaleniu, a komórki układają się jedna nad drugą. Dotyczy to także komórki zawierają- cej reklamę. Obraz nie pojawia się obok tekstu opisującego wycieczki. W tej sytuacji efekt rollover stracił zupełnie sens, podobnie jak obecność samej reklamy. Najprostsze rozwiązanie polega na ukryciu reklamy na mniejszych ekranach i pozostawieniu samego tekstu. Obecnie do obrazu reklamy przypisany jest atrybut ID, lecz taki atrybut nie jest przypisany do komórki zawierającej obraz. CSS może ukryć obraz, ale nadal pozostanie pusta komórka. Zamiast tego utworzymy własną klasę, która posłuży do ukrycia komórki wraz z zawartością. 3 Przeciągnij Scrubber w prawo, aby przywrócić dwukolumnowy układ tabeli. 4 Zaznacz obraz Eco-Tour. 5 Zaznacz selektor znacznika td. Wokół elementu td pojawi się monitor elementu. 6 Kliknij ikonę Add Class/ID (Dod. klasę/ID) 7 Wpisz .hide_ad w polu tekstowym. Jeśli na ekranie pojawi się szybki inspek- . tor źródła CSS, naciśnij klawisz ESC, aby go zamknąć. 386 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę 8 Jeżeli to konieczne, otwórz panel CSS Designer (Projektant CSS). Wybierz arkusz stylów green_styles.css, a następnie zapytanie o media (max -width: 426px). Utwórz nowy selektor: table .hide_ad Ta reguła dotyczy jedynie elementów znajdujących się w tabeli i zostanie zastosowana tylko wtedy, gdy szerokość ekranu będzie odpowiadać zapytaniu o media dla najwęższego ekranu. 9 Zdefi niuj następującą właściwość: display: none. Kiedy ekran będzie miał szerokość wynoszącą 426 pikseli lub mniejszą, komórka tabeli i reklama zostaną ukryte. 10 Przeciągnij Scrubber w lewo, aż ekran będzie węższy niż 426 pikseli. Zwróć uwagę na zmiany zachodzące w tabeli i jej zawartości. Gdy ekran będzie miał szerokość wynosząca 426 pikseli lub mniejszą, reklama Eco-Tours zostanie ukryta. Zostanie wyświetlona ponownie, gdy ekran będzie szerszy niż 426 pikseli. 11 Zapisz wszystkie pliki. 12 Zamknij dokument travel.html. Dreamweaver umożliwia nie tylko stosowanie przyciągających wzrok efektów, takich jak utworzone przed chwilą dynamiczne zachowania, ale również pozwala na tworzenie elementów strukturalnych — na przykład widżetów jQuery i Boot- strap — dzięki którym możesz zaoszczędzić sporo miejsca na stronie i nadać jej bardziej interaktywny styl. tworzenie paneli harmonijkowych Bootstrapa Panele harmonijkowe Bootstrapa porządkują znaczną ilość informacji wyświet- lanej za pomocą kilku zwartych paneli. Poszczególne zakładki są zwykle umiesz- czone jedna nad drugą. Najpierw obejrzymy gotową stronę. 1 W panelu Files (Pliki) zaznacz plik tips_fi nished.html znajdujący się w folderze lesson12 i wyświetl jego podgląd w domyślnej przeglądarce. Informacje zawarte na stronie znalazły się w trzech panelach harmonijkowych Bootstrapa. 2 Otwórz i zamknij kolejne panele, klikając ich paski tytułowe. ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 387 Poleć książkęKup książkę Po kliknięciu zakładki panel płynnie się otwiera. Panele mają określoną wysokość; jeśli zawartość panelu przekracza tę wysokość, panel automatycz- nie się wydłuża. Po otwarciu panelu na ekranie pojawia się wypunktowana lista wskazówek. Panel harmonijkowy umożliwia wyświetlenie większej ilości treści na mniejszym obszarze. 3 Zamknij okno przeglądarki, aby powrócić do programu Dreamweaver. Zamknij plik tips_finished.html. wstawianie paneli harmonijkowych Bootstrapa Kolejne ćwiczenie polegało będzie na umieszczeniu na stronie paneli harmonij- kowych. 1 Otwórz plik tips.html w podglądzie aktywnym. Na stronie znajdują się trzy listy wypunktowane, rozdzielone nagłówkami h2 . Listy te zajmują na stronie mnóstwo miejsca w pionie. Użytkownik, który chce je przeczytać, musi przewijać stronę. Gdyby udało się zmieścić treść na obsza- rze jednego ekranu, użytkownik miałby ułatwione zadanie. Jedna z technik zwiększających efektywny obszar zajmowany przez treść po- lega na użyciu paneli z zakładkami lub paneli harmonijkowych. Dreamweaver oferuje obydwa rodzaje tych komponentów wykorzystujących jQuery i Boot- strap. Ponieważ nasza strona opiera się na układzie Bootstrapa, skorzystamy z paneli harmonijkowych Bootstrapa. 2 Umieść kursor w nagłówku At Home i zaznacz selektor znacznika h2 . 3 Otwórz panel Insert (Wstaw). Wybierz kategorię Bootstrap (Składniki Bootstrap). Kliknij element Accordion. 388 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę Na ekranie pojawi się asystent pozycjonowania. 4 Kliknij Before (Przed). Dreamweaver umieści na stronie panel harmonijkowy Bootstrap nad nagłów- kiem, lecz wewnątrz elementu article . Domyślnie wstawiony zostanie trójpanelowy widżet harmonijkowy, w którym otwarty jest górny panel (Collapsible Group 1). Nad nowym obiektem pojawia się monitor elementu div, do którego przypisana jest klasa .panel-group oraz ID #accordion1. Teraz umieścisz istniejące listy w panelach. Ponieważ dwa panele są domyślnie ukryte, najłatwiej będzie przenosić treść w trybie Code (Kod). 5 Włącz tryb Code (Kod). 6 Przewiń kod strony w dół i umieść kursor w pierwszym elemencie listy: li Wash clothes in cold water. /li (mniej więcej w 87. wierszu). 7 Zaznacz selektor znacznika ul. Naciśnij Ctrl+X (Cmd+X w Mac OS), aby wyciąć całą listę. E Wskazówka: Pod- czas pracy w trybie Code (Kod) od czasu do czasu możesz klik- nąć przycisk Refresh (Odśwież) w panelu Properties (Właściwo- ści), aby odświeżyć listę selektorów znaczników. ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 389 Poleć książkęKup książkę 8 Usuń kod h2 At Home /h2 . 9 Przewiń kod w górę i zaznacz nagłówek Collapsible Group 1 (mniej więcej w 63. wierszu). Zastąp tekst w nagłówku, wpisując At Home Nowa struktura nagłówków jest oparta na elementach h4 . 10 Zaznacz i usuń tekst zastępczy Content for Accordion Panel 1 (mniej więcej w 66. wierszu). Tekst znajduje się wewnątrz znacznika div i nie jest ujęty w żadną inną strukturę. Upewnij się, że nie usunąłeś elementu div . 11 Naciśnij Ctrl+V (Cmd+V w Mac OS), aby wkleić listę. Lista pojawi się w elemencie div class= panel-body . Pierwszy panel jest gotowy. Należy powtórzyć te czynności dla pozostałych dwóch list. 12 Przewiń kod w dół i zaznacz listę At Work (mniej więcej w 112. wierszu). 13 Zaznacz selektor znacznika jak w punkcie 7. i naciśnij Ctrl+X (Cmd+X w Mac OS), aby wyciąć listę. 14 Kliknij selektor znacznika article . Naciśnij Delete. 390 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę Element article i nagłówek At Work zostaną usunięte. 15 Zaznacz nagłówek Collapsible Group 2 i zastąp tekst, wpisując At Work (mniej więcej w 93. wierszu). 16 Usuń tekst zastępczy Content for Accordion Panel 2 i wklej listę wyciętą w punkcie 13. (mniej więcej w 96. wierszu). 17 Powtórz czynności opisane w punktach 12. – 16., aby utworzyć sekcję dla listy In the Community. Gdy skończysz, wszystkie trzy listy będą się już znajdować w elemencie Accor- dion 1, a wszystkie puste elementy article będą usunięte. 18 Włącz tryb Live (Aktywny). Na stronie widoczny jest panel harmonijkowy Bootstrapa, zawierający wsta- wiony tekst. 19 Sprawdź działanie paneli, klikając każdy nagłówek. ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 391 Poleć książkęKup książkę Po kliknięciu panel powinien się otworzyć, odsłaniając swoją zawartość. Gdy klikniesz inny nagłówek, otworzy się nowy panel, a dotychczasowy zostanie zamknięty. 20 Zapisz wszystkie pliki. W kolejnym ćwiczeniu zastosujesz w panelu motyw kolorystyczny serwisu. Dostosowywanie paneli harmonijkowych Bootstrap Podobnie jak podstawowy układ strony, a także inne obiekty platformy Boot- strap utworzone w programie Dreamweaver, również panele harmonijkowe są połączone z arkuszem CSS Bootstrapa i plikami JavaScript. Powinieneś unikać bezpośredniej edycji tych plików, chyba że dobrze wiesz, co robisz. Zamiast tego, podobnie jak we wcześniejszych ćwiczeniach, zastosujesz motyw kolorystyczny w elemencie Accordion 1 za pomocą własnego stylu CSS. Zacznij od zakładek. 1 Kliknij zakładkę At Home. Sprawdź, jakie znaczniki wyświetlone są w dolnej części okna dokumentu. Zakładka składa się z trzech głównych elementów: div.panel-heading , h4.panel-title i a . To jednak fasada, za którą kryją się funkcje CSS i JavaScript platformy Bootstrap. Funkcje te przetwarzają kody HTML i CSS, tworząc w efekcie różne zachowania sterujące panelami harmonijkowymi. Podczas przesuwania kursorem nad zakładkami atrybuty klas zmieniają się w locie, tworząc efekt przypominający rollover. To samo dotyczy kliknięcia zakładki, które wywołuje efekt paneli animowanych. Jak zapewne pamiętasz, łącza mogą mieć cztery podstawowe stany: link, visited, hover i active. Platforma Bootstrap wykorzystuje te stany w celu utworzenia różnorodnych efektów, widocznych podczas interakcji z panelem Accordion 1 zawierającym listę At Home. Twoim zadaniem będzie utworzenie kilku nowych reguł, które przesłonią do- myślne style i zastosują stylistykę szablonu GreenStart. Najpierw sformatujesz domyślny stan zakładek. Ponieważ w danym czasie może być otwarta tylko jedna zakładka, domyślnym stanem jest stan zamknięty. 392 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę 2 Kliknij nagłówek zakładki At Home, aby ją zamknąć. Zakładki są obecnie jasnoszare. Należy teraz odszukać reguły służące do formatowania tła w zakładce. Pamiętaj, że za tę właściwość może odpowiadać kilka reguł. Łatwiej nam będzie zidentyfi kować reguły, jeśli sprawdzimy sposób wyświet- lania zaznaczonego elementu w oknie dokumentu. Na przykład pierwsze kliknięcie nagłówka spowoduje zaznaczenie tylko elementu a , jak na poniż- szym rysunku. Można to rozpoznać po monitorze elementu otaczającym tekst nagłówka. 3 Kliknij selektor znacznika h4 zamkniętej zakładki. Po kliknięciu znacznika zakładki h4 wokół elementu h4 pojawi się monitor elementu, który jednak nie będzie otaczać całej zakładki. Obwódka ta dokładnie pokazuje, jak daleko sięga formatowanie nagłówka. Oznacza to, że jeśli chcesz sformatować tło całej zakładki, możesz zignorować reguły formatujące elementy a i h4. 4 Kliknij kolejny element w interfejsie selektora znaczników. Zaznaczony zostanie element div.panel-heading . Zwróć uwagę na to, że monitor elementu otacza całą zakładkę. 5 Kliknij przycisk Current (Bieżące) w panelu CSS Designer (Projektant CSS). Zwróć uwagę na reguły i właściwości stosowane w tym elemencie. Pierwsza reguła wyświetlona w oknie Selectors (Selektory), czyli .panel-de- fault .panel-heading, defi niuje kolor tła. Aby zastosować kolorystykę serwisu, należy przesłonić tę regułę. ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 393 Poleć książkęKup książkę 6 Kliknij przycisk All (Wszystkie). Wybierz arkusz stylów green_styles.css, a następnie GLOBAL (GLOBALNIE). Utwórz nowy selektor: article .panel-default .panel-heading Ponieważ niektóre elementy są już sformatowane zgodnie z kolorystyką ser- wisu, wystarczy skopiować odpowiednie właściwości za pomocą panelu CSS Designer (Projektant CSS). Sformatujesz teraz zakładki zgodnie ze stopką. 7 Zaznacz regułę footer w oknie Selectores (Selektory). Reguła ta znajduje się w arkuszu green_styles.css. 8 Kliknij regułę footer prawym przyciskiem myszy. Wybierz polecenie Copy Styles/Copy Background Styles (Kopiuj style/Kopiuj style tła) z menu kontekstowego. 394 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę 9 Kliknij prawym przyciskiem myszy regułę article .panel-default .panel-heading i wybierz Paste Styles (Wklej style) z menu kontekstowego. Dodałeś do nowej reguły kolor tła i gradient. 10 Zdefiniuj następującą właściwość: color: #FFC Ten styl dotyczy domyślnego stanu zakładek panelu harmonijkowego. Później zajmiesz się też nieco bardziej interaktywnym formatowaniem, ale najpierw trochę ulepszysz formatowanie paneli. 11 Wybierz arkusz stylów green_styles.css, a następnie opcję GLOBAL (GLOBALNIE). Utwórz nowy selektor: article #accordion1 ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 395 Poleć książkęKup książkę 12 Zdefi niuj następujące właściwości: border: solid 1px #060 border-radius: 5px Ta nowa reguła defi niuje krawędź wokół całego panelu. 13 Utwórz nowy selektor: article .panel-body Zdefi niuj następującą właściwość: background-color: #CFC Ta reguła dodaje kolor tła do zawartości paneli. Wreszcie zwiększymy nieco atrakcyjność paneli za pomocą zachowania rollover przypisanego do zakładek. Chociaż zwykle pseudoklasa :hover jest stosowana w łączach, to jednak można ją wykorzystywać do tworzenia róż- nych efektów interaktywnych. 14 Kliknij prawym przyciskiem myszy regułę article .panel-default .panel-heading. Wybierz opcję Duplicate (Powiel). W oknie Selectors (Selektory) pojawi się powielona reguła o identycznej defi nicji. 15 Zmodyfi kuj nowy selektor, dodając zaznaczony fragment: article .panel-default .panel-heading:hover Nowa reguła zostanie uaktywniona, gdy kursor znajdzie się nad zakładką. W tym momencie jednak formatowanie jest identyczne jak w pierwowzorze. 396 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę 16 Zmodyfikuj właściwość dotyczącą gradientu. Zmień kąt na 180 17 Zmień właściwość color na #FFF 18 Zapisz wszystkie pliki. 19 Umieść kursor nad każdą zakładką, aby przetestować nowe zachowanie. Gdy kursor znajdzie się nad zakładką lub się od niej odsunie, tło gradientowe odwraca się. Cały efekt psuje jednak domyślne formatowanie łącza, czyli pod- kreślenie tekstu nagłówka w momencie przesuwania nad nim kursorem. Chociaż w przypadku zwykłego łącza tekstowego jest to akceptowalne, to jed- nak w przypadku zakładki panelu harmonijkowego nie wygląda najlepiej. Aby wyłączyć ten efekt, najpierw należy znaleźć regułę, która jest odpowiedzialna za jego utworzenie. 20 Zaznacz przycisk Current (Bieżące) w panelu CSS Designer (Projektant CSS). 21 Kliknij nagłówek At Home w pierwszej zakładce. Przyjrzyj się regułom w ok- nie Selectors (Selektory). Spróbuj zidentyfikować reguły, które mogą tworzyć efekt podkreślenia. Za efekt ten odpowiada reguła a:hover, a:focus. Nie chcemy jej wyłączać dla wszystkich łączy, tylko dla łączy w zakładkach panelu harmonijkowego. 22 Utwórz nowy selektor w arkuszu green_styles.css w zapytaniu o media GLOBAL (GLOBALNIE). W oknie pojawi się nazwa .panel-heading .panel-title a 23 Naciśnij klawisz strzałki w górę, aby zmniejszyć swoistość selektora. ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 397 Poleć książkęKup książkę 24 Dodaj do nazwy pogrubione fragmenty: .panel-title a:hover, .panel-title a:focus Ta reguła formatuje stan hover nagłówka zakładki. 25 Zdefi niuj następującą właściwość: text-decoration: none 26 Przetestuj efekt rollover. W zakładkach nie pojawia się już podkreślenie tekstu. 27 Zapisz wszystkie pliki. Panele harmonijkowe są tylko jednym z ponad 100 komponentów Bootstrapa i jQuery dostępnych w programie Dreamweaver. Umożliwiają stosowanie na stronie zaawansowanych funkcji przez osoby, które posiadają niewielkie umiejęt- ności programistyczne lub nie posiadają ich wcale. Wszystkie te komponenty są dostępne z poziomu panelu lub menu Insert (Wstaw). Interaktywne komponenty na stronie wzbudzają zainteresowanie i zwiększają zaangażowanie użytkowników. Bardzo łatwo wpaść w pułapkę nadużywania tego typu funkcji, lecz rozważne ich wykorzystanie pomoże przyciągnąć nowych użyt- kowników, a istniejących zachęcić do powrotu. 398 LEKCJA 12 Projektowanie interaktywnych stron WWW Poleć książkęKup książkę Pytania kontrolne 1 2 Opisz trzy czynności, jakie należy wykonać, aby utworzyć zachowanie programu Jakie korzyści wynikają ze stosowania zachowań programu Dreamweaver? Dreamweaver. 3 Dlaczego każdy obrazek powinien otrzymać atrybut ID, zanim przypiszemy do niego zachowanie? 4 Co to są „panele harmonijkowe” Bootstrapa? 5 Które narzędzia programu Dreamweaver ułatwiają rozwiązywanie problemów ze stylami CSS przypisanymi do elementów dynamicznych? odpowiedzi 1 Zachowania programu Dreamweaver umożliwiają szybkie i łatwe umieszczenie na stronie interaktywnej funkcjonalności. 2 Aby zdefiniować zachowanie programu Dreamweaver, należy utworzyć lub za- znaczyć obiekt wyzwalający, wybrać interesujące nas zachowanie i określić jego parametry. 3 Atrybut ID ułatwia wybór właściwego obrazka podczas definiowania określonego zachowania. 4 Panele harmonijkowe Bootstrapa to zestawy kilku paneli, które można elastycznie ukrywać i wyświetlać wraz z zawartością. 5 Tryb Current (Bieżące) w panelu CSS Designer (Projektant CSS) uławia identyfika- cję istniejących stylów CSS i tworzenie nowych. ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 399 Poleć książkęKup książkę skorowiDz a c Adobe Dreamweaver, Patrz: Dreamweaver Adobe Edge Animate, 404, 410 Adobe Edge Web Fonts, 193, 195, Adobe Flash, 107, 402 Adobe Generator, 112, 113, 114, 196, 198 115, 116 Adobe Omniture, 105 Adobe Typekit, 113, 195, 198 animacja, 402 umieszczanie na stronie, 405 uproszczona wersja sceny, 410 arkusz stylu, 77 asystent pozycjonowania, 50 atrybut class, 87, 97, 123 id, 87, 97, 98, 363 jako element docelowy, 365 łącze, 368 autouzupełnianie, 49 b Berners-Lee Tim, 58, 59 błąd kod niezgodny, 165 Bootstrap, 131, 132, 136 arkusz stylów, 189, 208 dodawanie elementu HTML5, 139 panel harmonijkowy, Patrz: panel harmonijkowy pasek nawigacyjny, 168, 174, 180 przenoszenie elementów, 213 rozmiar ekranu, 208 siatka, 189, 217 ukrywanie elementów, 210, 213 widżet, 374 CGI, 422 cień, 157 CMS, 213 CSS, 68, 69 model blokowy, 74 kaskadowy, 79, 89 reguła, Patrz: reguła CSS selektor, Patrz: selektor zakładka, 42 CSS3, 98, 99 cudzysłowów wiszący, 185 cytat, 182, 183 formatowanie, 266, 267 wcięcie, 183, 184 źródło, 184 czcionka, 193 internetowa, 193, 198 stos, 198 licencja, 195 rozmiar, 200 stos, 194, 198 D degradacja elegancka, 194 dithering, 314 Dreamweaver instalowanie, 5 pomoc, 14, 15 preferencje, Patrz: preferencje uaktualnianie, 6, 14 zachowanie, Patrz: zachowanie dziedziczenie, 82, 83, 84, 85, 89, 177 ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 441 Poleć książkęKup książkę e Edge Web Fonts, Patrz: Adobe Edge Web Fonts edytor HTML, 18 ekran orientacja, 130, 207 powitalny, 19 Create, 19 Getting Started, 21 New Features, 20 Tips Techniques, 21 rozdzielczość, 106, 107, 130, 207, 217 elegancka degradacja, Patrz: degradacja elegancka element, 59, 77, Patrz też: znacznik a, 158, 169, 171, 344 active, 175, 178 focus, 175, 178 hover, 175, 178, 179 link, 175, 178, 179 visited, 175, 178, 179 article, 182, 263, 270 aside, 184 blockquote, 183, 184, 267 blokowy, 60 caption, 294 cite, 184 div, 60, 72, 85, 123, 139, 158 grupa, 96 header, 153, 163 img, 319, 320 monitor, Patrz: monitor elementu nav, 175 navbar, 167, Patrz też: pasek menu picture, 328 semantyczny, 182, 263 title, 59, 61, 237 video, 415 wierszowy, 60 zastępczy, 186 e-mail, 358 442 SKOROWIDZ encja liczbowa, 191 nazwana, 191 znakowa, 61 F Flash, Patrz: Adobe Flash Flash Player, 402 folder domyślny, 9 główny serwisu, 9 Font Squirrel, 195, 198 format .dwt, 237 AI, 312 EPS, 312 FLV, 402, 414 GIF, 316, 325, 331 JPEG, 316, 325, 331 MP4, 416 PICT, 312 PNG, 316, 317, 32, 3315 SVG, 312 SWF, 402, 414 WMF, 312 formularz, 24 FTP, 420, 421, 424, 425 pasywny, 423 funkcja Emmet, 52, 53, 54 sprawdzania błędów, Patrz: linting G głębia koloru, 314, 315 Google Analytics, 105 Google Maps, 346, 347 Google Web Fonts, 198 gradient, 163, 164, 177 grafika rastrowa, 312, 313, Patrz też: obraz edycja, 340 Poleć książkęKup książkę kompresja, Patrz: kompresja rozdzielczość, 313, 314, 328 wektorowa, 312 H HTML, 18, 58, 59, 69 struktura, 59, 74 ustawienia domyślne, 70 zakładka, 41 HTML5, 62, 63, 64, 123, 124 Bootstrap, 139 ustawienia domyślne, 71, 72 i iDisk, 421 interfejs kompresja bezstratna, 317 stratna, 316 kontrolka jQuery, 24 kotwica, 344 nazwana, 363 krój, 193 l linting, 52 lista, 269 nieuporządkowana, 272 uporządkowana, 271, 272 ł łącze Pliki powiązane, Patrz: interfejs e-mail, 358, 361 Related Files Related Files, 42 selektorów znaczników, 42 VMQ, Patrz: VMQ wizualnych zapytań o media, Patrz: VMQ JavaScript, 206 skrypt, 374 j k klasa, 77, 87, 97 nav, 175 tworzenie, 158 tworzenie stylu, 187 kolor głębia, Patrz: głębia koloru paleta 16-bitowa, 315 bezpieczna www, 315 przezroczystość alpha, 315, 316, 317 rozpraszanie, 314 ochrona przed spamem, 362 hipertekstowe, 344 bezwzględne, 344, 345, 355 do atrybutu ID, 368 do strony domowej, 352 pseudoklasa, 175 skierowane do tej samej strony, 370 uaktualnianie, 353 w postaci elementu graficznego, 360 wewnętrzne, 344 wewnętrzne skierowane, 363 względne, 344, 345, 348 zewnętrzne, 344, 355 M Marcotte Ethan, 107 menu Insert, 50, 323 Wstaw, Patrz: menu Insert metadane, 237, 239 miniatura, 108 monitor elementu, 51, 367 MyFonts.com, 198 ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 443 Poleć książkęKup książkę nagłówek, 264 narzędzie strony, Patrz: strona nagłówek Code Navigator, 90, 93 Extract, 36 Nawigator kodu, Patrz: narzędzie Code Navigator Scrubber, 27 n o obraz, 164, 379, 380, Patrz też: grafika rastrowa dodawanie, 160, 166, 318, 319 metodą przeciągnij i upuść, 335 niezgodny format, 325 z Photoshopa, 331, 332 optymalizacja, 337, 338 dla mniejszych ekranów, 334 położenie, 320 rastrowy, Patrz: grafika rastrowa responsywny, 328, 385, 386 tekst alternatywny, 319 wektorowy, Patrz: grafika wektorowa wklejanie z Photoshopa, 331, 332 właściwości, 42, 319, 320, 328, 337, 338 P panel, 18, 19, 29 Assets, 261 Behaviors, 374, Patrz też: Biblioteki CC, Patrz: panel CC zachowanie Libraries CC Libraries, 34 CSS Designer, 25, 28, 34, 44, 45, 93, 148 @Media, 44, 45, 149, 152 Properties, 44, 46, 47, 95, 150, Standard, 37 Photoshop, 35, 36, 331 151, 154 Adobe Generator, Patrz: Adobe Generator 444 SKOROWIDZ Selectors, 44, 46, 149, 152 Sources, 44, 45, 150, 151, 152 DOM, 50 harmonijkowy, 387, 388, 392 Insert, 34, 50, 322 minimalizowanie, 29, 30 pływający, 30, 31 Projektant CSS, Patrz: panel CSS Designer @Media Selektory, Patrz: panel CSS Designer Selectors Właściwości, Patrz: panel CSS Designer Properties Źródła, Patrz: panel CSS Designer Sources Properties, 41, 42, 337, 338, 340, 367, 415 Snippets, 34 stos, 32 Urywki, Patrz: panel Snippets Właściwości, Patrz: panel Properties Wstaw, Patrz: panel Insert Zachowania, Patrz: panel Behaviors zadokowany, 30, 32 zamykanie, 30 Zasoby, Patrz: panel Assets zgrupowany, 30, 31, 32 pasek Coding, 37 Document, 24, 37 Dokument, Patrz: pasek Document Kodowanie, Patrz: pasek Coding menu, 167 dodawanie elementów, 170 stan rollover, 175 stan statyczny, 175 środkowanie, 180 tworzenie stylu, 175 Poleć książkęKup książkę obiekt inteligentny, 328, 329, 330, s przestrzeń robocza, 12, 18, 33, 130 folder główny, Patrz: folder główny 340 piksel, 312 plik format, Patrz: format konfiguracyjny serwera, 8 wideo, Patrz: wideo potomek, 85, 89 preferencje, 38, 39 protokół FTP, Patrz: FTP IPv6, 423 przeglądarka, 73, 105 kod niezgodny, 165 Beginner, 33 Code, 33, 34 Default, 33 Design, 12, 33, 34, 35, 149 Domyślny, Patrz: przestrzeń robocza Default Extract, 33, 35 Kod, Patrz: przestrzeń robocza Code Początkujący, Patrz: przestrzeń robocza Beginner Projekt, Patrz: przestrzeń robocza Design własna, 37 r raster, Patrz: grafika rastrowa RDS, 421 reguła CSS, 77, 79, 82 dodawanie do zapytania o media, 224 dziedziczenie, Patrz: dziedziczenie kolizja, 89 przesłanianie, 230, 297, 298, 334 składnia, 78 znak większości, 177 responsive web design, 107 Scrubber, 208, 209, 216, 217 selektor, 77, 85 potomny, 88, 266 waga, 89 znacznika, 18, 42, 43, 44, 366 serwer ISP, 422 lokalny, 426 sieciowy, 426 testowy, 426, 427 zdalny, 428 serwis serwisu konfiguracja, 7 lokalny, 420, 432, 436 tworzenie, 8 zdalny, 420, 426, 432, 433, 436 SFTP, 420 skrót klawiszowy, 40 SSL/TLS, 420 strona adaptacyjna, 107 cel, 104, 108 makieta, 122, 133 menu, 109, 110, 167 nagłówek, 109, 122, 123 tworzenie, 146 nawigacja, 108, 122, 123, 167 optymalizacja pod kątem urządzeń mobilnych, 213 pasek boczny, 122, 123 potomna, 241, 353 aktualizacja, 249, 353 edytowanie, 243, 247 tworzenie, 242 projektowanie, 109, 110, 111 mobile-first, 206, 213, 214 responsywne, Patrz: strona responsywna publikowanie, 420, 426, 427, 432 responsywna, 107, 206, 385 ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 445 Poleć książkęKup książkę strona semantyczna, 63 stopka, 109, 122, 123 szablon, Patrz: szablon szkielet, 111 układ predefiniowany, 124, 131 tworzenie, 133 użytkownik, 104 struktura DOM, Patrz: DOM, panel DOM szablon aktualizacja, 249 region edytowalny, 237, 243 formatowanie zawartości, 247 nazwa, 238 tworzenie, 236 szybki edytor znaczników, Patrz: znacznik szybki edytor szybki inspektor właściwości, 50 obrazów, 51, 319, 320, 360 tekstu, 50, 51, 361 szyfrowanie, 420 t tabela, 279 formatowanie, 285 importowanie, 291 kolumna, 289 komórka, 287 kopiowanie, 284 responsywna, 296, 385 tworzenie, 279 tytuł, 294 wklejanie, 284 właściwości, 42 technologia Bootstrap, Patrz: Bootstrap tekst formatowanie, 77, 153, 261, 273 importowanie, 261, 262 sprawdzanie pisowni, 302 styl globalny, 193 wcięcia, 273 446 SKOROWIDZ wyszukiwanie, 304, 305, 306, 307 zastępowanie, 304, 305, 306, 307 dziedziczenia, Patrz: dziedziczenie potomków, Patrz: potomek swoistości, 89 teoria tryb Aktywny, Patrz: tryb Live All, 48 Bieżące, Patrz: tryb Current Code, 24, 26, 37, 49, 237 Current, 48 Design, 24, 26, 35, 135, 237 inspekcji, 28 Kod, Patrz: tryb Code Live, 24, 25, 26, 35, 237, 270 Live Source Code, 27 Podziel, Patrz: tryb Split Projekt, Patrz: tryb Design Split, 26 Wszystkie, Patrz: tryb All Źródło widoku aktywnego, Patrz: tryb Live Source Code typ mediów, 206, 207 Typekit, Patrz: Adobe Typekit użytkownik, 104 u V VMQ, 49, 128, 129, 130 w Web Folders, 421 WebDav, 421 wektor, Patrz: grafika wektorowa wideo, 402, 410 opcje, 415 umieszczanie na stronie, 410, 411, 412 właściwość all, 207 aural, 207 Poleć książkęKup książkę background-color, 163, 177 background-gradient, 163 background-image, 177 background-position, 163, 165 background-repeat, 162 background-size, 162, 165 braille, 207 CSS, 46 CSS3, 24 definiowanie, 156 embossed, 207 handheld, 207 kopiowanie między regułami, 226 padding, 161 print, 207 projection, 207 text-shadow, 157 tty, 207 tv, 207 typu mediów, 207 wskazówka, 22 z zachowanie, 374, 375, 377, Patrz też: panel Behaviors CSS, Patrz: CSS zakładka HTML, Patrz: HTML zakładka zapytanie o media, 128, 136, 206, 207, 216, 217, 221, 231, 296, 334 dodawanie reguł, 224 identyfikacja, 221 składnia, 208 wizualne interfejs, Patrz: VMQ zdjęcie, Patrz: obraz znacznik, 59, 60, 61, 62, 64, Patrz też: dodawanie, 379, 381 do łączy, 383 parametry, 375 usuwanie, 382, 383 zakładka element br, 262 h1, 264, 265 li, 272 ol, 272 p, 265 span, 158 szybki edytor, 158, 266, 268 table, 294 td, 287 th, 287 ADOBE DREAMWEAVER CC/CC PL. OFICJALNY PODRĘCZNIK 447 Poleć książkęKup książkę 448 NOTATKI Poleć książkęKup książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Adobe Dreamweaver CC/CC PL. Oficjalny podręcznik
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: