wtorek, 4 Sierpień 2009
Stosowany w widoku projektu jest w większości wypadków wystarczający, ale
czasami pojawia się konieczność edycji całego bloku tekstu lub zestawu znaczników. Nieustanne
wywoływanie tego edytora byłoby w takiej sytuacji dokuczliwe i spowalniałoby pracę. Podobnie,
jeśli jesteś nowicjuszem w świecie znaczników HTML i nie bardzo wiesz do czego ?to? w
rzeczywistości służy, to analiza kodu źródłowego HTML może być pomocna, aby nauczyć się
czytać i analizować kod. Niestety nieustanne przełączanie się między widokami projektu i kodu
jest czasochłonne i nużące.
Aby z tym skończyć, w wersji 4 programu pojawił się jako novum łączony widok
kodu i projektu. Umożliwia on bezpośrednią kontrolę nad projektem i kodem HTML prezentując
stronę WWW zarówno w postaci WYSIWIG, jak i kodu źródłowego. Aby przełączyć się do
widoku kodu i projektu, wybierz w menu View pozycję Code and Design lub kliknij ikonę
Show Code and Design View na pasku narzędzi. Obszar roboczy okna zostanie wówczas
podzielony na dwa panele. Domyślnie, kod HTML wyświetlany jest w górnym panelu, a widok
projektu w dolnym.
Aby przełączać się między panelami, możesz korzystać ze skrótu klawiaturowego Ctrl+Tab, lub
pozycji Switch Views menu View (pomocna jest także myszka ? wystarczy kliknąć w żądanym
panelu ? przypis tłum.). Istnieje także możliwość zamiany miejscami obu paneli ? innymi słowy
panel projektu można przerzucić na górę. W tym celu wybierz z menu View pozycję Design View
on Top lub z rozwijanego menu Options dostępnego na pasku narzędzi.
Dostosować można także wzajemne proporcje obszarów zajmowanych przez panele widoków.
Wystarczy za pomocą myszki przeciągnąć pasek je oddzielający (jest to linia pozioma
wyświetlana bezpośrednio pod paskiem przewijania (o ile on jest) w panelu widoku kodu). Nad
paskiem wskaźnik myszki zmienia swą postać, co jest wskazówką, że można dostosować
wysokość okna. Kliknij więc i przeciągnij pasek w odpowiednie miejsce.
Nawet jeżeli dokonujesz edycji strony w widoku projektu, wszelkie zmiany są natychmiast
odzwierciedlane w kodzie prezentowanym w panelu widoku kodu. Jedną z największych zalet
tego widoku, a szczególnie dla tych, którzy dopiero rozpoczynają swe zmagania z językiem
HTML, jest to, że po wstawieniu obrazu, zastosowaniu do tekstu pogrubienia, czy też po
jakiejkolwiek innej operacji, widok kodu aktualizuje się natychmiast, co pozwala zobaczyć
fragmenty kodu wstawione w każdym z kroków tworzenia strony. Niewątpliwie jest to pomocne
przy nauce języka HTML.
Modyfikacje kodu HTML w panelu widoku kodu nie są już tak natychmiastowo przenoszone do
panelu widoku projektu. Możesz wprowadzać w kodzie zmiany, ale na efekty zaczekasz. Aby je
zobaczyć, musisz odświeżyć panel widoku projektu w taki sam sposób , w jaki to robiłeś w
widoku kodu.
Tagi: kod, widok
Kategoria: Tworzenie stron | Komentarze są wyłączone
poniedziałek, 3 Sierpień 2009
Coraz więcej projektantów zaczęło korzystać przy projektowaniu stron WWW z dwóch
monitorów. Jeden monitor pokazuje stronę w widoku projektu, natomiast drugi służy jako pulpit
prezentujący palety i inne narzędzia. Tu mogłoby się znaleźć miejsce dla okna Code Inspector.
Rosnąca popularność pracy na dwóch monitorach w pewnym, aczkolwiek mniejszym, stopniu jest
wynikiem pojawienia się w programie nowej opcji ? widoku kodu i projektu. Tym
widokiem zajmiemy się w następnym punkcie.
Aby przełączyć się do widoku kodu, kliknij ikonę Show Code View na pasku narzędzi lub
wybierz pozycję Code w menu View. Bezpośrednie przełączenie między widokami projektu i
kodu jest możliwe także przy pomocy skrótu Ctrl+Tab (pamiętaj jednak, że ta metoda jest
skuteczna tylko wtedy, gdy jesteś w jednym z widoków). Aby otworzyć okno Code Inspector,
naciśnij klawisz F10 lub wybierz pozycję Code Inspector w menu Window. Do dyspozycji masz
także ikonę na mini-pasku szybkiego uruchamiania.
W widoku kodu (lub w oknie Code Inspector ? te terminy mogą być stosowane wymiennie, a
rozróżnienie wprowadzono jedynie w celu wyjaśnienia), można wstawiać obrazy i inne elementy
HTML w taki sam sposób jak w widoku projektu. Jednak zamiast obrazu w postaci graficznej,
widzisz go w postaci kodu HTML. Zmiany wprowadzane w widoku kodu nie są natychmiast
implementowane.
Aby zobaczyć ich efekt, musisz skorzystać z jednej z metod:
Nacisnąć F5.
Zastosować skrót Ctrl+Spacja.
Kliknąć ikonę Refresh na pasku narzędzi lub w oknie właściwości Property Inspector.
Przełączyć się do widoku projektu klikając ikonę Show Design View na pasku narzędzi
lub stosując skrót Ctrl+Tab.
Menu otwierane ikoną View Options na pasku narzędzi udostępnia najczęściej stosowane w
widoku kodu polecenia. Polecenia te są dostępne również w menu View jako menu podrzędne
Code View Options. Oto wyjaśnienia funkcji poszczególnych pozycji:
- Word Wrap ? określa czy kod HTML ma być obłamywany do nowego wiersza, gdy
osiągnięty zostanie brzeg ekranu. Ta opcja jest używana jedynie jako narzędzie
ułatwiające zrozumienie kodu w trakcie jego edycji lub przy prezentacji postaci
źródłowej strony WWW z przeglądarki sieciowej. Obłamywanie kodu nie wpływa na
sposób wyświetlania strony.
- Line Numbers ? powoduje wyświetlenie numerów wierszy na lewym marginesie okna. Opcja jest użyteczna przy rozwiązywaniu problemów z kodem.
- Highlight Invalid HTML ? powoduje zaznaczenie kodu uznanego przez program za
błędny.
- Syntax Coloring ? powoduje zastosowanie do elementów kodu kolorów zdefiniowanych
w kategorii Code Colors okna dialogowego Preferences.
- Auto Indent ? automatycznie wprowadza do kodu wcięcia zdefiniowane w kategorii
Code Format okna dialogowego Preferences.
Tagi: html, kod
Kategoria: Tworzenie stron | Komentarze są wyłączone
czwartek, 16 Lipiec 2009
Open in Code View
Pole tekstowe Open in Code View umożliwia definiowanie typów plików (określanych poprzez
rozszerzenia nazwy), które chcesz wyświetlać w postaci kodu źródłowego. Umieszczenie tutaj
rozszerzenia nazwy pliku spowoduje, że przy otwieraniu danego typu pliku otrzyma
instrukcje, aby wyświetlić dokument w widoku kodu, co natychmiast umożliwi udostępni kod do
edycji.
External Code Editor
To pole umożliwia wskazanie ulokowania zewnętrznego edytora stosowanego do wprowadzania
zmian w kodzie źródłowym. Jeśli nie pamiętasz ścieżki dostępu do pliku, możesz kliknąć przycisk
Browse i odszukać plik. Twoja wersja programu jest najprawdopodobniej
wyposażona w HomeSite (w przypadku komputerów PC) lub BBEdit (w przypadku komputerów
Mac) ? oba edytory są odpowiednimi kandydatami do pełnienia tej roli.
Reload Modified Files
Jeśli w zewnętrznej aplikacji dokonasz modyfikacji kodu źródłowego dokumentu otwartego w
programie , musi istnieć mechanizm, który poinformuje program, w jaki sposób ma
się zachować, gdy do niego powrócisz. To menu rozwijane umożliwia wybranie jednej z trzech
możliwych reakcji. Opcja domyślna, Prompt, spowoduje, że odświeżenie zawartości strony
zmodyfikowanej poza programem będzie poprzedzone komunikatem
pozostawiającym użytkownikowi decyzję odnośnie odświeżania. Opcja Always pozwala
programowi automatycznie aktualizować dokument w oknie dokumentu, bez konsultacji z
użytkownikiem. Wybór opcji Never oznacza brak zgody użytkownika na automatyczne
odświeżanie dokumentu w przypadku jego zmiany.
Save on Launch
Ta opcja umożliwia uaktywnienie automatycznego zapisywania plików przy uruchamianiu edytora
zewnętrznego. Do wyboru są trzy możliwości: Prompt (pytaj), Always (zawsze), Never (nigdy).
Extensions/Editors
W dolnej części okna znajdziesz dwa panele. Umieszczając rozszerzenie w lewym panelu i
stowarzyszając je z edytorem z prawego panelu, możesz określić sposób zachowania programu
w przypadku, gdy w zewnętrznym edytorze będzie otwierany plik określonego typu.
Aby dokonać takich ustawień, kliknij znak plus (+) nad lewym panelem. Wyświetlone zostanie
pole edycji. Wpisz nazwę rozszerzenia (.XXX) pamiętając o kropce, która ją poprzedza. Dla
danego edytora możesz jednocześnie podać wiele rozszerzeń ? rozdzielaj po prostu nazwy
spacjami. Zawsze możesz powrócić do wprowadzonych rozszerzeń i dokonać ich modyfikacji. W
tym celu zaznacz rozszerzenia, a potem kliknij je raz jeszcze. Aby usunąć rozszerzenia z listy,
zaznacz te, których już nie chcesz, i naciśnij przycisk ze znakiem minus (-).
Aby stowarzyszyć dodane rozszerzenie z aplikacją, zaznacz je i kliknij przycisk plus (+) nad
prawym panelem. Umożliwia to wskazanie aplikacji, którą chcesz stowarzyszyć z tym
rozszerzeniem. Pamiętaj, aby wskazać plik wykonywalny (.exe)dla żądanego programu (kliknij
przycisk Browse, jeśli nie pamiętasz ulokowania pliku). Wybierz plik i naciśnij Open ?
powinieneś zobaczyć aplikację prawidłowo stowarzyszoną z rozszerzeniem.
Invisible Elements
Ponieważ każdy element układu strony przekłada się na niezwykle istotny kod źródłowy,
wyposażony jest w środki informowania o miejscu występowania tych elementów.
Są to małe żółte symbole, które można bez trudu zauważyć w widoku projektu. Ustawienia
kategorii Invisible Elements przedstawione na rysunku 2.6 umożliwiają włączanie lub
wyłączanie wyświetlania oznaczeń niewidzialnych obiektów na stronie. Zaznacz po prostu pola
wyboru odpowiadające obiektom, które chcesz uwidocznić w widoku projektu, a wyczyść pola dla
oznaczeń obiektów, które chcesz ukryć.
Layers
W przypadku warstw należy rozważyć wiele ustawień. Warstwy stosowane są już od dłuższego
czasu, lecz nadal większość przeglądarek nie obsługuje ich poprawnie. Różne znaczniki, atrybuty,
różnice w sposobach pozycjonowania, a nawet błąd w Netscape, który powoduje, że prosta zmiana
rozmiarów okna zaburza poprawne działanie, wszystko to odstręcza od stosowania warstw. Należy
tu dodać, że w pewnych sytuacjach warstwy są użyteczne ? przede wszystkim chodzi tu o menu
nawigacyjne. Korzystając z ustawień kategorii Layers (patrz rysunek 2.7) możesz określić sposób
wstawiania warstw na stronie. Możesz nawet włączyć opcję automatycznej korekty błędu
Netscape za pomocą skryptu wstawianego przez Tag.
Wstawienie warstwy umożliwiają cztery różne znaczniki. Domyślnie, stosuje
znacznik. Nie jest to jednak ani dobry, ani zły znacznik domyślny, bowiem to przeglądarka, w której strona zostanie wyświetlona, wyznacza stosowany znacznik. Rodzaj użytego znacznika zależy od sytuacji i efektu, jaki chcesz osiągnąć. Dopóki jednak skupiasz się na utworzeniu strony, która będzie oglądana jednym typem przeglądarki, lub decydujesz się na obie przeglądarki dołączając skrypt detekcji typu, najlepszym rozwiązaniem jest zastosowanie znacznika, bowiem zarówno Internet Explorer, jak i Netscape Navigator rozpoznają go.
Tagi: kod
Kategoria: Tworzenie stron | Komentarze są wyłączone
środa, 15 Lipiec 2009
Automatic Wrapping
Pole wyboru Automatic Wrapping określa, czy do dokumentu ma być stosowana automatyczna
opcja zawijania, a w polu tekstowym After Column podawana jest liczba nadmiarowych znaków
w wierszu, poprzedzających twarde łamanie wiersza. Twarde łamania wierszy mogą być
użyteczne w przypadku wyświetlania kodu w różnych aplikacjach. Zwróć także uwagę, że
wstawi łamania wierszy tylko wówczas, jeśli nie wpłynie to na postać strony
WWW.
Line Breaks
Kolejne ustawienie określa format łamań wierszy w Twoich dokumentach. Musi on być bowiem
dostosowany do systemu, do którego plik zostanie wysłany, a więc inny dla systemu UNIX, inny
dla komputerów Mac, a jeszcze inny dla Windows.
Case for Tags i Case for Attributes
Listy rozwijane Case for Tags i Case for Attributes mają te same elementy: uppercase i
lowercase. Wybór opcji zależy od Twoich preferencji i przyzwyczajeń oraz wymogów
określonych przez protokoły pracy grupowej.
Case of Tags i Case of Attributes
Pola wyboru Case of Tags i Case of Attributes pozwalają narzucać formatowanie zdefiniowane
dla znaczników i atrybutów na wszystkie otwierane, tworzone i modyfikowane dokumenty.
zrobi to automatycznie, zanim więc uaktywnisz tę opcję, musisz mieć pewność, że
tego rzeczywiście chcesz.
Centering
Możesz wreszcie skorzystać z przycisków opcji sekcji Centering i wybrać znacznik stosowany
przy centrowaniu obiektów. Do wyboru masz znacznik DIV, co skutkuje utworzeniem kodu <DIV
ALIGN=?center?>, lub znacznik <CENTER>.
Code Rewriting
Kolejna kategoria, której ustawienia odnoszą się do kodu źródłowego HTML.
Fix Invalidly Nested and Unclosed Tags
Zaznaczenie tego pola wyboru włącza w programie system aktywnej analizy kodu.
Program sprawdza, czy znaczniki nie pokrywają się i czy są poprawnie zamknięte. W przypadku
stwierdzenia nieprawidłowości, przystępuje automatycznie do ich usuwania. Oto przykład
niepoprawnego kodu: <H1><I>Te znaczniki są niepoprawnie
zagnieżdżone</H1></I>. Ingerencja programu spowoduje przekształcenie kodu do
następującej postaci: <H1><I>Te znaczniki są niepoprawnie zagnieżdżone</I></H1>.
Remove Extra Closing Tags
Jeśli napotka znaczniki zamykające, którym nie będzie w stanie przyporządkować
znaczników otwierających, znaczniki te zostaną usunięte.
Warn When Fixing or Removing Tags
Jeśli to pole wyboru zostanie zaznaczone, wyświetli ostrzeżenie przed
przystąpieniem do naprawy lub usuwania znaczników.
Never Rewrite Code: In Files with Extensions
Ta opcja pozwala wskazać wyjątki w zdefiniowanych procedurach autokorekty. Jest ona
użyteczna w przypadku pewnych typów plików, gdy nie chcesz, by ingerował w
kod.
Special Characters
Ustawienia tej sekcji najlepiej pozostawić bez zmian. Wartości domyślne są najodpowiedniejsze,
chyba że masz konkretne powody, by je zmienić.
File Types/Editors
ma wiele mocnych stron, ale nie jest pomyślany jako samodzielna aplikacja
tworzenia stron WWW. Stworzenie nowoczesnej witryny sieciowej wymaga stosowania
najróżniejszych plików multimedialnych, języków programowania i skryptów.
potrafi jednak dobrać program odpowiedni do edycji danego typu danych, aby uzyskać wysoką
efektywność pracy.
Za pomocą ustawień sekcji File Types/Editors okna Preferences można
określić reakcję programu na różne języki programowania oraz sposób obsługi plików
graficznych, dźwiękowych i multimedialnych.
Tagi: kod, tagi
Kategoria: Tworzenie stron | Komentarze są wyłączone