Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00526 009865 10436354 na godz. na dobę w sumie
Dreamweaver MX - książka
Dreamweaver MX - książka
Autor: Liczba stron: 220
Wydawca: Helion Język publikacji: polski
ISBN: 83-7197-997-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> dreamweaver
Porównaj ceny (książka, ebook, audiobook).
Dreamweaver MX, narzędzie do graficznego projektowania stron internetowych, powstał niewątpliwie z myślą o ułatwieniu pracy twórcom stron WWW. Nowy, zintegrowany interfejs programu daje użytkownikom pełną swobodę ruchu. Pozwala manipulować paletami i jest bardzo elastyczny w dostosowywaniu do własnych potrzeb. Predefiniowane projekty stron oraz fragmenty kodu HTML i JavaScript pozwalają z łatwością budować własne strony. Poprawiono obsługę kaskadowych arkuszy stylów i rozbudowano możliwości szablonów. Zadowoleni powinni być wszyscy zwolennicy ręcznego tworzenia kodu stron WWW: pracę z kodem ułatwiają narzędzia, takie jak na przykład edytor znaczników, Tag Inspector czy narzędzie kontroli poprawności kodu. Usprawniono także proces tworzenia nowego dokumentu: program proponuje bogaty zestaw kategorii nowego dokumentu, od prostych stron HTML aż po bardziej zaawansowane projekty. Dreamweaver MX umożliwia także tworzenie stron korzystających z baz danych.

Co znajdziesz w tym opracowaniu? Są tu podstawowe pojęcia dotyczące języka HTML, najważniejsze informacje na temat planowania i projektowania witryn WWW, opis środowiska pracy programu Dreamweaver MX i narzędzi pracy z kodem źródłowym. Z książką w ręku bez trudu utworzysz witrynę WWW, jej stronę główną, ustawisz kodowanie, zdefiniujesz układ strony przy użyciu tabel lub warstw oraz nauczysz się korzystać z szablonów i bibliotek. Wiele uwagi poświęcono obrazom -- nauczysz się definiować właściwości obrazów, korzystać z palety Assets oraz ze stylów CSS. Poznasz możliwości tabel, list, linii czasowych i behawiorów. Dowiesz się, jak planować nawigację i połączenia oraz jak nimi zarządzać. Będziesz wiedział, jak zarządzać witrynami: lokalną i odległą, a także jak korzystać z ramek.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREĎCI SPIS TREĎCI Dreamweaver MX KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOĎCIACH O NOWOĎCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl Autor: Maria Sokó³ ISBN: 83-7197-997-5 Format: B5, stron: 216 Dreamweaver MX, narzêdzie do graficznego projektowania stron internetowych, powsta³ niew¹tpliwie z myġl¹ o u³atwieniu pracy twórcom stron WWW. Nowy, zintegrowany interfejs programu daje u¿ytkownikom pe³n¹ swobodê ruchu. Pozwala manipulowaæ paletami i jest bardzo elastyczny w dostosowywaniu do w³asnych potrzeb. Predefiniowane projekty stron oraz fragmenty kodu HTML i JavaScript pozwalaj¹ z ³atwoġci¹ budowaæ w³asne strony. Poprawiono obs³ugê kaskadowych arkuszy stylów i rozbudowano mo¿liwoġci szablonów. Zadowoleni powinni byæ wszyscy zwolennicy rêcznego tworzenia kodu stron WWW: pracê z kodem u³atwiaj¹ narzêdzia, takie jak na przyk³ad edytor znaczników, Tag Inspector czy narzêdzie kontroli poprawnoġci kodu. Usprawniono tak¿e proces tworzenia nowego dokumentu: program proponuje bogaty zestaw kategorii nowego dokumentu, od prostych stron HTML a¿ po bardziej zaawansowane projekty. Dreamweaver MX umo¿liwia tak¿e tworzenie stron korzystaj¹cych z baz danych. Co znajdziesz w tym opracowaniu? S¹ tu podstawowe pojêcia dotycz¹ce jêzyka HTML, najwa¿niejsze informacje na temat planowania i projektowania witryn WWW, opis ġrodowiska pracy programu Dreamweaver MX i narzêdzi pracy z kodem ĥród³owym. Z ksi¹¿k¹ w rêku bez trudu utworzysz witrynê WWW, jej stronê g³ówn¹, ustawisz kodowanie, zdefiniujesz uk³ad strony przy u¿yciu tabel lub warstw oraz nauczysz siê korzystaæ z szablonów i bibliotek. Wiele uwagi poġwiêcono obrazom — nauczysz siê definiowaæ w³aġciwoġci obrazów, korzystaæ z palety Assets oraz ze stylów CSS. Poznasz mo¿liwoġci tabel, list, linii czasowych i behawiorów. Dowiesz siê, jak planowaæ nawigacjê i po³¹czenia oraz jak nimi zarz¹dzaæ. Bêdziesz wiedzia³, jak zarz¹dzaæ witrynami: lokaln¹ i odleg³¹, a tak¿e jak korzystaæ z ramek. Spis treści Wstęp...................................................z...................................................z.................... .................................... 9 Rozdział 1. Informacje podstawowe ...................................................z.................................................................. 11 HTML...................................................o...................................................o...................................11 Strona WWW i witryna WWW ...................................................o..............................................12 Znaczniki...................................................o...................................................o..............................13 Elementy dokumentu HTML ...................................................o..................................................13 Rozdział 2. Projektujemy witrynę WWW...................................................z........................................................... 15 Planowanie witryny...................................................o...................................................o..............15 Projektowanie witryny ...................................................o...................................................o.........16 Projektowanie systemu nawigacji ...................................................o...........................................17 Zasoby ...................................................o...................................................o..................................17 Projektowanie witryny — podsumowanie ...................................................o.................................17 Praktyka...................................................o...................................................o................................18 Zadania do samodzielnego wykonania ...................................................o...................................20 Analiza problemu...................................................o...................................................o...........20 Rozdział 3. Praca w środowisku Dreamweaver MX...................................................z....................................23 Uruchamianie programu...................................................o...................................................o.......23 Środowisko pracy...................................................o...................................................o.................24 Powrót do pulpitu programu Dreamweaver 4 ...................................................o.........................26 .......28 Okno dokumentu ...................................................o...................................................o........... Przełączanie się między widokami ...................................................o...................................28 Wyświetlanie kodu źródłowego dokumentu w samodzielnym oknie..................................29 Wyświetlanie dokumentu w oknie przeglądarki...................................................o...............30 Pasek narzędzi Insert...................................................o...................................................o............31 Narzędzia paska Insert ...................................................o...................................................o...31 Ukrywanie i wyświetlanie paska Insert ...................................................o............................35 Wstawianie obiektu z poziomu paska Insert...................................................o.....................35 Wybór sposobu prezentacji narzędzi na pasku Insert ...................................................o.......36 Pasek narzędzi Standard...................................................o...................................................o.......36 Pasek Launcher ...................................................o...................................................o....................38 Definiowanie ustawień palet ...................................................o...................................................40 Pasek stanu ...................................................o...................................................o...........................40 4 Dreamweaver MX Narzędzia pracy z kodem źródłowym...................................................o.....................................42 Dostosowywanie widoku Code View...................................................o...............................42 Opcja wspomagania tworzenia kodu ...................................................o................................44 Narzędzie Tag Chooser...................................................o...................................................o..45 Narzędzie Quick Tag Editor ...................................................o.............................................46 Narzędzia kontroli poprawności kodu ...................................................o..............................47 Edycja kodu za pomocą narzędzia Tag Inspector...................................................o.............48 Okno New Document...................................................o...................................................o...........49 Rozdział 4. Tworzenie witryny...................................................z.............................................................................. 53 Definiowanie witryny lokalnej........................o...................................................o........................53 ..............55 Okno Site...................................................o...................................................o................ Przeglądarka plików...................................................o...................................................o.......56 Widoki Local View i Remote View...................................................o..................................56 Tworzenie folderu...................................................o...................................................o..........58 Tworzenie pliku ...................................................o...................................................o.............58 Strona główna witryny ...................................................o...................................................o.........60 Mapa witryny ...................................................o...................................................o.......................61 Definiowanie tytułu strony...................................................o......................................................64 Ustawienia kodowania ...................................................o...................................................o.........65 Definiowanie układu strony ...................................................o....................................................66 Podgląd układu strony w przeglądarce ...................................................o.............................66 Definiowanie układu strony przy użyciu tabeli ...................................................o................67 Rysowanie komórek tabeli układu strony...................................................o.........................67 Zagnieżdżanie tabel układu strony...................................................o....................................70 Wstawianie zawartości w komórkach tabeli układu strony ...................................................o71 Definiowanie szerokości kolumn...................................................o......................................72 Dopasowywanie wysokości komórki do zawartości ...................................................o........74 Definiowanie układu strony przy użyciu warstw...................................................o..............75 Tworzenie warstwy...................................................o...................................................o........76 Paleta Layers...................................................o...................................................o..................77 Definiowanie nazw warstw...................................................o...............................................79 Zagnieżdżanie warstw...................................................o...................................................o....80 Przesuwanie warstw i zmiana ich rozmiarów...................................................o...................81 Zapobieganie nakładaniu się warstw ...................................................o................................82 Wstawianie obrazu na warstwę...................................................o.........................................83 Umieszczanie na warstwie tekstu ...................................................o.....................................84 Definiowanie tła warstwy ...................................................o.................................................84 Definiowanie warstw przezroczystych ...................................................o.............................85 Pozycjonowanie i zmiana rozmiarów warstw...................................................o...................86 Konwersja warstw na tabele...................................................o....................................................87 Konwersja tabel na warstwy ...................................................o...................................................89 ..............90 Tło strony ...................................................o...................................................o............... Szablony ...................................................o...................................................o................. ..............92 Tworzenie szablonu ...................................................o...................................................o.......92 Modyfikacja szablonu...................................................o...................................................o....92 Stosowanie szablonu...................................................o...................................................o......93 Biblioteki...................................................o...................................................o..............................95 Tworzenie i stosowanie elementów bibliotecznych............................................o.................95 Zadania do samodzielnego wykonania ...................................................o...................................96 Tworzenie układu strony przy użyciu predefiniowanych fragmentów kodu.......................96 Rozdział 5. Praca z obrazami...................................................z................................................................................. 99 Właściwości obrazów...................................................o...................................................o.........100 Nadawanie obrazom nazw ...................................................o..............................................100 Definiowanie rozmiarów obrazów...................................................o..................................100 Dodawanie tekstu alternatywnego ...................................................o..................................101 Dodawanie obramowania do obrazu...................................................o...............................102 Dodawanie wolnej przestrzeni wokół obrazu ...................................................o.................102 Wyrównanie obrazu ...................................................o...................................................o.....104 Przekształcanie obrazów w połączenia ...................................................o.................................105 Obrazy aktywne...................................................o...................................................o..................106 Jak przypisać obrazowi behawior? ...................................................o.................................108 Paleta Assets i obrazy...................................................o...................................................o.........110 Wstawianie obrazów z poziomu palety Assets...................................................o...............112 Ulubione obrazy...................................................o...................................................o...........112 Definiowanie układu strony na podstawie obrazu ...................................................o................113 Internetowy album fotograficzny ...................................................o..........................................114 Zadania do samodzielnego wykonania ...................................................o.................................117 Umieszczanie obrazów na serwerze ...................................................o...............................117 Rozdział 6. Formatowanie tekstu ...................................................z...................................................................... 119 Wstępne formatowanie tekstu ...................................................o...............................................119 Formatowanie stylu akapitu ...................................................o..................................................120 Formatowanie czcionki ...................................................o...................................................o......121 Definiowanie wyrównania i wcięć...................................................o........................................124 ........125 Style HTML ...................................................o...................................................o............... Tworzenie stylu HTML na podstawie istniejącego tekstu ...................................................o..126 Kaskadowe arkusze stylów (CSS)...................................................o.........................................127 Grupowanie stylów ...................................................o...................................................o......128 Dziedziczenie stylu ...................................................o...................................................o......128 Kaskadowość ...................................................o...................................................o...............128 Atrybuty stylu ...................................................o...................................................o........... ...129 CSS a HTML ...................................................o...................................................o...............130 Klasy ...................................................o...................................................o............................131 Paleta CSS Styles...................................................o...................................................o.........131 Proces definiowania stylu CSS ...................................................o.......................................132 Eksportowanie arkusza CSS ...................................................o...........................................140 Korzystanie z zewnętrznych arkuszy CSS...................................................o......................141 Edycja arkusza CSS ...................................................o...................................................o.....142 Tworzenie arkusza CSS na bazie istniejącego...................................................o................143 Zmiana definicji znacznika HTML przy pomocy arkusza CSS...........................................143 Przypisywanie klasy lub selektora ID określonym elementomo Rozdział 7. przy wykorzystaniu menu kontekstowego...................................................o...................144 Zadania do samodzielnego wykonania ...................................................o.................................145 Prosty kaskadowy arkusz stylów formatowania tekstu ...................................................o..145 Styl połączeń...................................................o...................................................o................146 Kontrola poprawności ortograficznej tekstu...................................................o...................146 Zaawansowana edycja stron WWW ...................................................z........................................ 147 ................147 Listy...................................................o...................................................o.................... Przekształcanie tekstu w listę...................................................o..........................................147 Wstawianie nowej listy ...................................................o...................................................o148 Tworzenie listy zagnieżdżonej...................................................o........................................149 6 Dreamweaver MX Tabele ...................................................o...................................................o.................................149 Wstawianie tabeli w widoku Standard...................................................o............................149 Zaznaczanie tabeli lub jej elementów ...................................................o.............................151 Wprowadzanie danych do tabeli...................................................o.....................................152 Wyrównanie danych w tabeli...................................................o..........................................152 Wyrównywanie tabel i definiowanie obramowań ...................................................o..........153 Obramowanie tabeli ...................................................o...................................................o.....153 Rozpinanie komórek tabeli na wierszach i kolumnach...................................................o...153 Wstawianie wierszy i kolumn...................................................o.........................................156 Usuwanie wierszy i kolumn...................................................o............................................157 Zmiana rozmiarów komórki ...................................................o...........................................157 Zamiana pikseli na procenty i odwrotnie...................................................o........................158 Podział obrazu na wycinki a tabele...................................................o.................................158 Tworzenie animacji ...................................................o...................................................o............160 Okno Timelines...................................................o...................................................o............160 Definiowanie linii czasowej...................................................o............................................161 Przypisywanie liniom czasowym behawiorów...................................................o...............164 Przyciski Flash ...................................................o...................................................o.......... .........164 Menu rozwijane...................................................o...................................................o..................165 Rozbudowa menu rozwijanego...................................................o.......................................167 Zadania do samodzielnego wykonania ...................................................o.................................168 Pasek nawigacji...................................................o...................................................o............168 Rozdział 8. Połączenia na stronach WWW ...................................................z.................................................. 169 Ulokowanie dokumentu a ścieżka dostępu ...................................................o...........................169 Adres bezwzględny...................................................o...................................................o......170 Adresy względne definiowane względem dokumentu..................................................o.....170 Adresy względne definiowane względem folderu nadrzędnego........................................171 Uwagi na temat połączeń ...................................................o...................................................o...171 Konwersja tekstu w połączenie ...................................................o.............................................172 System nawigacji w obrębie strony...................................................o.......................................174 Tworzenie połączenia z innym plikiem ...................................................o................................176 Mapy odnośników ...................................................o...................................................o..............176 Połączenia e-mail ...................................................o...................................................o........ .......179 Zarządzanie połączeniami ...................................................o...................................................o..179 Przekierowanie połączeń do innego pliku ...................................................o................................180 Analiza połączeń między dokumentami ...................................................o...............................181 Naprawa połączeń ...................................................o...................................................o..............182 Dodatkowe opcje połączeń...................................................o...................................................o.183 Testowanie połączeń ...................................................o...................................................o..........184 Zadania do samodzielnego wykonania ...................................................o.................................184 Otwieranie połączenia w nowym oknie...................................................o..........................184 Połączenia do strony głównej ...................................................o.........................................185 Rozdział 9. Zarządzanie witryną ...................................................z......................................................................... 187 Przeglądanie struktury witryny ...................................................o.............................................187 Przesuwanie pliku między folderami ...................................................o....................................190 Tworzenie połączenia z poziomu okna Site...................................................o............................190 Usuwanie pliku lub folderu ...................................................o...................................................191 Usuwanie witryny z listy...................................................o...................................................o....191 Stowarzyszanie serwera odległego z witryną lokalną...................................................o...........192 Umieszczanie plików witryny na serwerze ...................................................o..............................193 Synchronizacja plików witryny lokalnej i odległej...................................................o...............194 Zadania do samodzielnego wykonania ...................................................o.................................195 Testowanie witryny przed umieszczeniem na serwerze ...................................................o.195 Rozdział 10. Ramki...................................................z...................................................z........ ............................................ 197 Korzystanie z predefiniowanych układów ramek ...................................................o.................197 Modyfikacja ramek ...................................................o...................................................o............199 Podział ramki ...................................................o...................................................o...............199 Usuwanie ramek i układu ramek...................................................o.....................................200 Zaznaczanie ramek i układów ramek ...................................................o....................................200 Paleta Frames ...................................................o...................................................o.....................201 Wyświetlanie palety Frames ...................................................o...........................................201 Zaznaczanie ramek i układu ramek z poziomu palety Frames ..........................................201 Zapisywanie ramek i układów ramek...................................................o....................................202 Właściwości ramek i układu ramek ...................................................o......................................203 Właściwości ramki...................................................o...................................................o.......203 Właściwości układu ramek ...................................................o.............................................204 Element noframes...................................................o...................................................o...............205 Zadania do samodzielnego wykonania ...................................................o.................................206 Definiowanie nazwy układu ramek ...................................................o................................206 Tło ramki...................................................o...................................................o................ ......206 Przekształcenie strony bez ramek w stronę z ramkami...................................................o...206 Skorowidz ...................................................z...................................................z................ ..........................209 Rozdział 10. Ramki Ramka to wydzielony obszar okna przeglądarki, w którym można wyświetlić inny do- kument HTML niż w pozostałej części okna. Sama ramka niel jest plikiem. Układ ramek to plik HTML, który definiuje układ i właściwości ramek wchodzących w skład układu, w tym ich liczbę, rozmiar i ulokowanie oraz adresy URL stron wy- świetlanych w poszczególnych ramkach. W pliku układu ramek nie ma zawartości do- kumentów w nich prezentowanych. Wyjątkiem jest sekcja noframes dokumentu — określa ona zawartość strony dla przeglądarek nieoblsługujących ramek. Najczęściej ramki wykorzystywane są do wspomagania nawigacji — jedna ramka może zawierać pasek nawigacji, a w drugiej wyświetlana jestl zawartość wybranego dokumentu. Nie wszyscy je kochają. Powiem więcej — ramki są w odwrocie. Wynika to z proble- mów z ich obsługą — są przeglądarki, które sobie z nią nie radzą. Trudniej jest w nich także zapanować nad układem elementów graficznych. Wreszcie wszystko to, co umożli- wiają ramki, można uzyskać także innymi metodami. Mają też jednak swoje zalety. Zawartość ramek nawigacyjnych nie musi być wielokrot- nie ładowana przy kolejnych połączeniach, a ramki zawartości mogą być przewijane niezależnie. Korzystanie z predefiniowanych układów ramek Predefiniowane układy ramek programu Dreamweaver MX pozwalają szybko zdefi- niować odpowiedni układ ramek. Istnieją dwie podstawowe metody definiowania ukła- du ramek: przy użyciu narzędzi Frames paska Insert lub za pomocą predefiniowanych układów dostępnych w oknie New Document. 198 Dreamweaver MX Aby zdefiniować układ ramek w istniejącym dokumencie: 1. 2. Umieść punkt wstawiania w dokumencie. Kliknij zakładkę Frames paska narzędzi Insert i wybierz jeden z proponowanych tu układów (patrz rysunek 10.1) lub wybierz predefiniowanly układ ramek w menu podrzędnym Frames menu Insert. Rysunek 10.1. Definiowanie układu ramek za pomocą paska Insert — wybierz układ, który ci odpowiada, kliknij jego ikonę na pasku Insert i układ zostanie utworzony Aby zdefiniować nowy dokument korzystający z ramek: 1. Wybierz w menu File pozycję New i zaznacz w oknie New Document kategorię Framesets — na liście Framesets znajdziesz wiele układów ramek (patrz rysunek 10.2). 2. Wybierz układ ramek z listy Framesets i kliknij przycisk Create. W istniejącym dokumencie ramki można definiować, kocrzystając z menu podrzędnego Frameset menu Modify. Aby możliwa była praca z ramkami, ich obramowania mucszą być widoczne — jeśli tak nie jest, wybierz w menu View pozycję Visual Aids, a następnie pozycję Frame Borders w menu podrzędnym. Rysunek 10.2. Wybierz w menu File pozycję New, a w oknie New Document kliknij kategorię Frameset — na liście Framesets znajdziesz mnóstwo predefiniowanych układów ramek Modyfikacja ramek Podział ramki Aby podzielić ramkę, skorzystaj z jednej z metod: (cid:1) Umieść punkt wstawiania w dzielonej ramce i wybierz slposób podziału w menu podrzędnym Frameset menu Modify (patrz rysunek 10.3). Rysunek 10.3. Wybierz sposób podziału ramki 200 Dreamweaver MX (cid:1) Przeciągnij krawędź boczną układu ramek w kierunku środkla okna (patrz rysunek 10.4). Rysunek 10.4. Przeciągnij krawędź układu ramek do środka (cid:1) Przeciągnij krawędź, która nie jest krawędzią układu ramelk, wcisnąwszy klawisz Alt (patrz rysunek 10.5). Rysunek 10.5. Przeciągnij krawędź ramki Usuwanie ramek i układu ramek Aby usunąć ramkę: (cid:1) Przeciągnij obramowanie ramki poza stronę lub do obramlowania ramki nadrzędnej. Jeśli w usuwanej ramce znajduje się jakaś zawartość, zosltaniesz poproszony o zapisanie dokumentu. Aby usunąć układ ramek: (cid:1) Zamknij okno dokumentu, w którym wyświetlany jest ukłald ramek, i usuń jego plik, korzystając z okna Site. Zaznaczanie ramek i układów ramek Aby wprowadzać zmiany w ramce lub w układzie ramek, musisz najpierw zaznaczyć odpowiedni element. Aby zaznaczyć ramkę lub układ ramek w oknie dokumentu:l (cid:1) Wciśnij klawisz Alt i kliknij wewnątrz ramki. Zaznaczona ramka zostanie obwiedziona obramowaniem (patrz rysunek 10.6). Rysunek 10.6. Wciśnij klawisz Alt i kliknij wewnątrz ramki, którą chcesz zaznaczyć — wokół niej pojawi się kropkowane obramowanie Aby przenieść zaznaczenie do innej ramki: (cid:1) Wciśnij klawisz Alt i naciśnij klawisz ze strzałką w lewo lub w prawo — zaznaczona zostanie następna z ramek. (cid:1) Wciśnij klawisz Alt i naciśnij klawisz ze strzałką w górę — zaznaczony zosltanie nadrzędny układ ramek. (cid:1) Wciśnij klawisz Alt i naciśnij klawisz ze strzałką w dół — zaznaczona zostlanie ramka podrzędna zaznaczonego wcześniej układu ramek. Aby zaznaczyć układ ramek: (cid:1) W oknie dokumentu kliknij obramowanie układu ramek. Paleta Frames Paleta Frames na bieżąco informuje, jak wygląda podział dokumentu na ramki i jaka jest hierarchia ramek. Umożliwia także zaznaczanie poszczególlnych ramek oraz ich układu. Wyświetlanie palety Frames Aby wyświetlić paletę Frames: (cid:1) Wybierz pozycję Others w menu Window, a następnie kliknij pozycję Frames lub zastosuj skrót klawiszowy Shift+F2 (patrz rysunek 10.7). Zaznaczanie ramek i układu ramek z poziomu palety Frames Aby zaznaczyć ramkę z poziomu palety Frames: (cid:1) W palecie Frames w kliknij obszar ramki, którą chcesz zaznaczyć. Ramka zlostanie zaznaczona także w oknie dokumentu. Aby zaznaczyć układ ramek z poziomu palety Frames: (cid:1) W palecie Frames kliknij obramowanie układu ramek. W oknie dokumentu zaznaczony zostanie układ ramek. 202 Rysunek 10.7. Otwieranie okna palety Frames Dreamweaver MX Zapisywanie ramek i układów ramek Plik układu ramek i stowarzyszone z nim pliki zawartości ramek muszą zostać zapisane, aby możliwe stało się wyświetlenie strony z ramkami lw przeglądarce. Aby zapisać układ ramek: (cid:1) Zaznacz układ ramek w oknie palety Frames lub w oknie dokumentu i wybierz w menu File pozycję Save Frameset lub Save Frameset As, jeśli chcesz zapisać układ pod nową nazwą. Aby zapisać dokument wyświetlany w ramce: (cid:1) Kliknij ramkę zawierającą dokument i wybierz w menu File pozycję Save Frame lub Save Frame As. Nadaj plikowi swoją nazwę, która zastąpi nazwę domyśllną. Aby zapisać wszystkie pliki stowarzyszone z układem ramek: (cid:1) Wybierz w menu File pozycję Save All Frames. Zapisane zostaną wszystkie otwarte dokumenty, w tym dokumenty ramek i układu rlamek. Abyś nie pogubił się w czasie zapisywania kolejnych dokumentów, Dreamwealver wyświetla obramowania wokół aktualnie zapisywanych (patrz rysunelk 10.8). Zdefiniuj własne nazwy i kliknij przycisk zapisywania. Wyświetlolne zostanie kolejne okienko Save As dla następnego pliku ramki. Rysunek 10.8. Aktualnie zapisywana ramka obwiedziona jest w oknie dokumentu szerokim obramowaniem, bez trudu zorientujesz się więc, jaki plik zapisujesz. Podaj jego nazwę i kliknij Zapisz. Pojawi się kolejne okienko Save As dla następnego pliku Właściwości ramek i układu ramek Zarówno ramki, jak i ich układ mają swoje właściwości. Definiowanie tych właściwości odbywa się podobnie jak w przypadku innych elementów sltrony czy samej strony. Właściwości ramki Zdefiniuj właściwości ramek. Aby zdefiniować właściwości ramki: Zaznacz ramkę, której właściwości chcesz skonfigurować. W oknie Properties zdefiniuj w polu Frame Name nazwę ramki (patrz rysunek 10.9). 1. 2. Rysunek 10.9. Okno Properties dla ramki Nazwa ramki musi być pojedynczym wyrazem, zaczynającym się od litery. Znaki podkreślenia (_) są dozwolone, natomiast myślniki, kropki i spacje cnie. Wielkość znaków jest w nazwach ramek istotna. Nie wolno także stosować wyrażeń języcka JavaScript (np. top lub navigator). 204 Dreamweaver MX 3. 4. 5. 6. 7. Możesz wskazać w polu Src plik źródłowy, który ma być ładowany do ramki. Zdefiniuj w polach Margin Width i Height szerokości marginesów w pikselach. Określają one odległość między obramowaniem ramki a zalwartością. Jeśli chcesz, zmień ustawienia przewijania (lista rozwijalna Scroll) i ustawienia dotyczące wyświetlania obramowań (lista rozwijana Border). Możesz także zaznaczyć pole wyboru No Resize, aby uniemożliwić użytkownikowi zmianę rozmiaru ramki. Zdefiniuj kolor obramowania ramki (pole i przycisk Border Color). Ustawienia zdefiniowane dla ramki dominują nad ustacwieniami układu ramek. Jeśli więc zdefiniujesz inny kolor obramowania ramki, a inny dcla układu ramek, to kolor obramowania ramki nie zostanie zmieniony. Pamiętaj o tej zależncości, definiując właściwości. Właściwości układu ramek W ramkach wstępnie zdefiniowanych układów ramek nie ma obramowań, pasków przewijania, a opcja zmiany rozmiarów w oknie przeglądarki jest wyłączona. Zmiana tych ustawień jest możliwa w oknie Properties. Aby skonfigurować właściwości układu ramek: (cid:1) Zaznacz układ ramek i zdefiniuj żądane właściwości w oknile Properties (patrz rysunek 10.10). Okno właściwości układu ramek umożliwia zmialnę rozmiarów ramek (pola Value i Units) oraz zdefiniowanie koloru i szerokości obramowania oddzielającego ramki (pola Borders, Borders Width i Border Color). Rysunek 10.10. Okno Properties dla układu ramek W polach Value i Units okienka właściwości układu ramek definiujesz sposób pcrzydzielania ramkom powierzchni przy zmianie rozmiarów okna przegclądarki. Wartość w pikselach (pozycja Pixels) określa rozmiar kolumny lub wiersza w sposób bezwzględny — w takim przypadku rozmiar ten zawsze cbędzie taki sam. Jest to więc odpowiednie rozwiązanie, jeśli w ramce umieszczasz cstały element, na przykład pasek nawigacji. Jeśli pozostałym ramkom przyporządkujesz rcozmiary w innych jednostkach, przestrzeń zostanie im przydzielona dopiero po zapecwnieniu powierzchni dla ramki, której rozmiar wskazałeś w pikselach. Jest to więc ustawieniec dominujące. Pozycja Percent oznacza, że ramka ma zajmować określony w procentacch obszar układu ramek. Zostanie jej on przydzielony po spełnieniu wymagań ramki, której rozmiar wskazałeś w pikselach. Ustawienie to jest dominujące tylko wzgclędem ustawienia Relative. Wybranie pozycji Relative określa, że bieżącej ramce przydzielony zostanie ocbszar proporcjonalnie względem innych ramek. Ustawienie wskazane na liście Borders okienka właściwości układu ramek określa sposób wyświetlania obramowań ramek. Pozycja Yes jest równoważna wyświetleniu obramowań trójwymiarowych. W przypadku wybrania pozycji No obramowania będą płaskie i szare, a wybranie pozycji Default pozostawi kwestię wyboru wyglądu obramowań przeglącdarce. Element noframes Jeśli decydujesz się na korzystanie z ramek, powinieneś przygotować także dokument alternatywny, który zostanie wyświetlony w przeglądarce nieobsługującej ramek. Za- wartość ta umieszczana jest w elemencie noframes. Aby zdefiniować zawartość elementu noframes: 1. 2. Wybierz w menu Modify pozycję Frameset, a następnie pozycję Edit NoFrames Content. Dreamweaver wyczyści okno dokumentu i wyświetli nagłólwek NoFrames Content u góry okna dokumentu. Zdefiniuj w widoku Design View dokument zastępczy w taki sam sposób jak zwykły dokument. Możesz wpisać zawartość elementu noframes bezpośrednio w kodzie. Naciśnij F10, aby otworzyć okno Code Inspector, umieść punkt wstawiania między znacznikami DQF[ DQF[ umieszczonymi w obrębie elementu noframes i wpisz ręcznie kod HTML (patrz rysunek 10.11). Rysunek 10.11. Wpisz kod HTML zawartości zastępczej, która zostanie wykorzystana w przeglądarkach nieobsługujących ramek 3. Wybierz ponownie pozycję Edit NoFrames Content w menu podrzędnym Frameset menu Modify, aby powrócić do układu ramek. 206 Dreamweaver MX Zadania do samodzielnego wykonania Definiowanie nazwy układu ramek Zdefiniuj tytuł strony zbudowanej z układu ramek. Zaznacz układ ramek, otwórz okno Page Properties i podaj nazwę dokumentu. Tło ramki Zdefiniuj w wybranej ramce inny kolor tła. Kliknij pole ramki, wybierz w menu Modify pozycję Page Properties, a reszta jest oczywista. Przekształcenie strony bez ramek w stronę z ramkami Korzystając ze wstępnie zdefiniowanego układu dwóch ramek (po lewej ramka nawiga- cyjna, po prawej ramka główna) spróbujmy naszą witrynę przekonstruować tak, aby w ramce nawigacyjnej umieścić pasek nawigacji (patrz rozdział 7.), a w ramce central- nej zawartość stron otwieranych kliknięciami przyciskówl paska. Oto kolejne etapy tej procedury: 1. 2. 3. 4. 5. Utwórz nowy dokument, korzystając z predefiniowanego lukładu ramek, lub wybierz w oknie palety obiektów kategorię Frames i kliknij ikonę układu ramek, w którym ramka główna znajduje się z prawej strony (pierwszą na lpasku). Skonfiguruj ramki. W ramce nawigacyjnej wstaw pasek nawigacji (patrz rysunekl 10.12). Definiując jego przyciski pamiętaj, aby wybrać ramkę główną jako milejsce wyświetlenia pliku, do którego prowadzi kliknięcie przycisku (plik wskazujlesz w polu When Clicked Go to URL). Rozwiń więc listę obok pola When Clicked Go to URL i wybierz z niego nazwę ramki głównej (pamiętaj o nadawaniu nazw!).l Jeśli zdefiniujesz układ ramek, nazwy ramek pojawiając się na liście Target w oknie Properties, co pozwala wskazywać ramkę jako miejsce otwarcia cpliku. Jeśli chcesz wstawić pasek nawigacji do pionowej ramki, lwybierz z listy Insert pozycję Vertically. Przygotuj jakąś prostą stronę powitalną i zapisz całośćl. Przetestuj działanie układu ramek w przeglądarce (patrzl rysunek 10.13). Rysunek 10.12. Utwórz pasek nawigacji, którego przyciski otwierają kolejne strony w głównej ramce Rysunek 10.13. Przyciski paska nawigacji prowadzą do stron tematycznych, które przygotowałeś w poprzednich rozdziałach
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Dreamweaver MX
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ą: