wtorek, 24 Listopad 2009
Podstawowe informacje na temat warstw
Aby efektywnie posługiwać się warstwami, musisz znać podstawy. Musisz wiedzieć, jak rysować warstwy, jak je organizować, jak wstawiać zawartość i jak pozycjonować warstwy na stronie. Te właśnie informacje znajdziesz tutaj. Ponadto, będziesz mógł je sprawdzić w praktyce, wykonując ćwiczenie po przeczytaniu tekstu.
Rysowanie warstw
Warstwę można narysować na istniejącej zawartości, która nie znajduje się na innej warstwie. Można też utworzyć stronę składającą się wyłącznie z warstw. Nie istnieje ograniczenie liczby stosowanych warstw, jednak nie należy zbyt przesadzać z ich mnożeniem, a szczególnie wówczas, gdy się nakładają.
Warto wstawianym warstwom nadawać nazwy, bowiem ułatwia identyfikację.
Kod HTML i warstwy
Domyślnie, tworzy warstwę stosując znacznik <DIV>. Przełącz się do widoku kodu, aby zobaczyć kod źródłowy definiujący warstwę. Będzie on przypominał przykładowy kod, zaprezentowany poniżej. Kod ten umieszczany jest w sekcji BODY:
<div id=?Layer1? style=?position:absolute; width:200px; height:115px?>Zawartość warstwy</div>
Inne znaczniki HTML także umożliwiają definiowanie warstw. Oto one: <SPAN>, <ILAYER> i
<LAYER>. Znaczniki <DIV> i <SPAN> są interpretowane przez wersje 4 obu przeglądarek:
Netscape i Internet Explorer. Znaczniki <ILAYER> i <LAYER> pozwalają zdefiniować warstwy
wyświetlane tylko przez przeglądarki Netscape.
Chociaż czasami istnieją powody, aby definiować warstwy niewidzialne, na razie zakładamy, że będziemy umieszczać na warstwie jakąś zawartość, której nie zamierzasz ukrywać przed odbiorcami strony.
Umieszczanie zawartości na warstwie to prosta operacja.
Tagi: css, div, warstwy
Kategoria: Tworzenie stron | Komentarze są wyłączone
poniedziałek, 23 Listopad 2009
Warstwy umożliwiają uzyskanie interesujących efektów, takich jak behawiory typu show-hide oraz animacje z wykorzystaniem linii czasowych. I w przeciwieństwie do tabel, warstwy można pozycjonować w dowolnym miejscu strony (a tabele domyślnie
ustawiają się przy górnym lewym rogu strony).
Behawiory typu show-hide, animacje i specjalne możliwości dotyczące określania pozycji są trudne do uzyskania w przypadku opierania układu strony na tabelach.
Coraz częściej warstwy są powszechniej wykorzystywane do tworzenia stron internetowych i wypierają starodawne tabele. Dzisiejsza technologia potrafi warstwami całkowicie zastąpić tabele, choćbywa to trudniejsze w programowaniu.
Czy warstwy powinny się nakładać?
W programach do obsługi grafiki warstwy umieszczane są na sobie (stąd termin warstwy). Jednak w przypadku warstw DHTML do nakładania się warstw należy podchodzić z ostrożnością.
Dokument zawierający warstwy jest tak wyświetlany, jak pozwala przeglądarka.
Jeśli korzystasz z nakładania się warstw, weź pod uwagę następujące ostrzeżenia:
Przetestuj nakładające się warstwy w różnych przeglądarkach i na różnych platformach sprzętowych.
Zredukuj do minimum liczbę nałożeń warstw. Jeśli jest ona większa niż 10, sam prosisz o kłopoty.
Jeśli na nakładających się warstwach umieszczasz tabele, zadbaj o zastosowanie wyrównania do zawartości poszczególnych komórek (na przykład: w pionie ? top, lub w poziomie ? left). Stosowanie ustawień domyślnych może spowodować poprzesuwanie się warstw.
Kategoria: Tworzenie stron | Komentarze są wyłączone
niedziela, 22 Listopad 2009
Jeśli tylko poświęcisz parę chwil na zastanowienie się nad zasadami funkcjonowania warstw, natychmiast zauważysz, jak niesamowity wpływ mogą mieć warstwy na
powiększenie interaktywności i wygląd strony. Zanim jednak poniesie Cię wyobraźnia, przeczytaj uważnie. Aby efektywnie korzystać z warstw, musisz wiedzieć czym są, jak działają i
jakie kwestie natury technicznej wiążą się z ich stosowaniem.
O tym trzeba wiedzieć:
W świecie grafiki komputerowej termin ?warstwa? określa zazwyczaj technikę układania na sobie obiektów graficznych i tekstowych, w celu uzyskania efektu collage?u lub głębi zdjęcia czy też ilustracji. Po wyeksportowaniu pliku z programu do obróbki grafiki, spreparowany za pomocą
warstw obraz zostaje spłaszczony, aby pomniejszyć rozmiar pliku. Dokument oryginalny pozostaje natomiast na dysku twardym projektanta i jest wykorzystywany w przypadku konieczności wprowadzania zmian.
Jeśli takie właśnie miałeś pojęcie o warstwach, czas abyś poznał nowe znaczenie terminu ?warstwa?. W warstwy ? stanowiące technikę języka DHTML (Dynamic Hypertext Markup Language) ? służą wielu innym celom, nie tylko tym, o których wspomnieliśmy wcześniej. Są pomocne w rozwiązywaniu kwestii technicznych, mogą być stosowane jako narzędzie definiowania układu strony, pozwalają na tworzenie animacji ? a nie są
to wszystkie z możliwych zastosowań.
Tagi: dhtml, div, warstwy
Kategoria: Tworzenie stron | Komentarze są wyłączone
piątek, 6 Listopad 2009
Pierwszym elementem rzucającym się w oczy w przypadku układu ramek są obramowania. Można jednak zmieniać ich wygląd, a nawet całkowicie je usuwać. Szerokość obramowania układu ramek definiuje się w pikselach w polu Border Width inspektora Property. Aby całkowicie usunąć obramowanie, wystarczy wpisać w tym polu wartość 0. W końcu, można także zmienić kolor i sposób prezentacji obramowania. Aby zmienić kolor, wpisz szesnastkowy kod koloru w polu Border Color lub kliknij próbkę koloru obok tego pola i wybierz próbnikiem kolor z palety. Aby zastąpić pseudo-trójwymiarowe obramowania zwykłymi, rozwiń listę Borders i wybierz pozycję Yes lub No. Opcja Default pozostawia wybór przeglądarce.
Inne atrybuty znacznika <FRAME> dostępne to Name, Scroll, Borders, Color, Resize, Margin Width i Margin Height. Przyjrzyjmy się ich funkcjom i sposobowi konfiguracji.
Name
Nie myl tego atrybutu z nazwą pliku dokumentu. Atrybut Name jest bardzo użyteczny, aczkolwiek niedoceniany. Przede wszystkim identyfikacja ramki za pomocą jednoznacznej i opisowej nazwy pozwala skierowywać połączenia na tę ramkę. Gdyby ramka nie mała nazwy, nie można byłoby definiować połączeń, a to z kolei oznaczałoby znaczne ograniczenie możliwości wymiany zawartości ramki. Po drugie, stosowanie nazw zawsze ułatwia odwoływanie się do ramek z poziomu skryptów. Pamiętaj, aby zawsze definiować nazwy ramek.
Scroll
Atrybut Scroll umożliwia wyświetlenie w ramce pasków przewijania. Opcja ta jest szczególnie
użyteczna, jeśli chcesz umieścić w ramce zawartość przekraczającą jej rozmiary. Atrybut Scroll
ma cztery wartości, które dostępne są:
Borders i Border Color
Atrybuty te pozwalają zdefiniować obramowanie i jego kolor. Ustawienia te są niezależne od ustawień dla elementu FRAMESET. Przypisując atrybutom określone wartości czynisz próbę zdominowania ustawień wprowadzonych w elemencie FRAMESET. ?Czynić próbę? jest tu właściwym określeniem, bowiem jeśli obramowania nie są od siebie niezależne, tak jak na przykład w dokumencie składającym się z wielu zestawów ramek, wszystkie będą dzieliły ten sam typ i atrybuty.
Resize
Domyślnie, użytkownik ma możliwość zmiany rozmiarów ramek za pomocą myszki. Nie jest to to, o co chodzi projektantom. Dlatego masz do dyspozycji atrybut, który pozwala wyłączyć zachowanie domyślne. Uniemożliwi to użytkownikowi przeciąganie krawędzi ramek i zmianę rozmiarów ramek w oknie przeglądarki . Pamiętaj, że to ustawienie musisz definiować osobno dla każdej ramki, której rozmiary chcesz zablokować.
Margin Width i Margin Height
Domyślnie, wszystkie dokumenty układu ramek mają marginesy. Jest to obszar wokół obramowania, w którym nie można umieścić zawartości. Aby go zlikwidować i wykorzystać całą przestrzeń ramki, skorzystaj z atrybutów Margin Width i Margin Height, i przypisz im wartość 0. Dzięki temu zawartość ramki można dosunąć do obramowania.
Obecnie bardzo rzadko wykorzystuje się ramki <FRAME> jednak nie jest to całkowicie wykluczone, jako że tworzenie stron internetowych jest dość rozbudowaną dziedziną i mogą zdarzyć się sytuacje, kiedy właśnie ten atrybut będzie doskonale nadawał się do naszej strony.
Tagi: frameset, ramki
Kategoria: Tworzenie stron | Komentarze są wyłączone