ramki - Kurs HTML i CSS
Widżety HTML / Szablon strony bez ramek...stopnia, że po jakimś czasie można się wręcz zniechęcić do robienia jakichkolwiek aktualizacji serwisu 🙁 Rozwiązaniem tego problemu mogłyby być ramki lokalne (<iframe>...</iframe>). W takim przypadku teoretycznie można stworzyć jedną stronę index.html, na której umieszcza się menu i inne stałe elementy, a w miejsce właściwej treści strony wstawia się ramkę lokalną, gdzie wczytuje się zawartość poszczególnych podstron. Taki sposób niestety posiada poważną wadę: na pasku adresu przeglądarki...
Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?...wyświetlany dokument. Szerokość tego elementu była zawsze równa szerokości okna przeglądarki. Marginesy ustalone dla body były ustawiane wewnątrz ramki i suwaków okna. W trybie zgodności ze standardami element body może uzyskać określony rozmiar poprzez jego zawartość albo bezpośrednie ustalenie - zachowuje się analogicznie jak np. element div. W tym trybie to element html reprezentuje ramy dokumentu. Analogicznie to element html a nie body staje się "pojemnikiem" dla elementów...
- Oprawa graficzna / Zamiennik obrazkowy
...stosowana przez webmasterów. Wady: W przeglądarce Firefox zastosowanie tej techniki do odnośników powoduje wyświetlenie rozciągniętej w lewo ramki obrysu; pewnym obejściem może być przypisanie stylu: "outline: 0" Po wyłączeniu wyświetlania grafiki, w przeglądarce nie widać tekstu ani obrazka Jeśli mimo wszystko tekst nadal pojawia się ponad obrazkiem, przypisz do elementu styl: "text-align: left". Przykład Zamiennik obrazkowy Gilder/Levin Czasami zdarza się, że użytkownicy...
- Dobre praktyki / Przykazania webmastera
...rozdzielenia prezentacji od struktury dokumentu). Unikaj stosowania ramek - zarówno tradycyjnych jak i lokalnych Poza nielicznymi przypadkami, ramki nie są dobrym pomysłem. Z wadami takiego rozwiązania możesz zapoznać się w punkcie: "Czy stosowanie ramek jest bezpieczne?". Nie stosuj tabelek do budowania układu strony Zostały one przeznaczone do prezentacji zbioru powtarzających się danych. Jeśli wykorzystasz je do budowy szkieletu strony, mocno ograniczysz sobie możliwości późniejszej...
Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki...treści Wymagana wiedza Skrypt indeksu, wyszukiwarki Wieloznacznik (wildcard) Wymagana wiedza Odsyłacze do podstrony Wczytywanie stron do ramki lokalnej Podstawy stylów CSS (m.in. arkusze stylów) Skrypt indeksu, wyszukiwarki Aby wstawić na swoją stronę indeks z dodatkową funkcją wyszukiwarki, postępują według poniższych instrukcji: Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku indeks.js (koniecznie użyj kodowania utf-8)...
- Menu rozwijane, otwierane, wysuwane / Przykład menu rozwijanego
Kliknij poniższe nagłówki menu myszką: HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno new Menu('menu0');
- Menu rozwijane, otwierane, wysuwane / Menu wysuwane
Normalnie pozycje menu są rozwijane począwszy od pierwszej do ostatniej, a zwijane od ostatniej do pierwszej. Można odwrócić te kolejności, dzięki czemu uzyskamy efekt wysuwania: <script> new Menu('menu0', '', false, true); </script> Przykład HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno new Menu('menu3', '', false, true);
- Komendy HTML 4.01 / IMG
...po prawej top - na górze ALT="tekst" Tekst alternatywny, używany przez przeglądarki, które nie wyświetlają obrazków BORDER="piksele" Szerokość ramki elementu w pikselach (zdeprecjonowane) CLASS="klasa" Przypisuje nazwę klasy (CSS) lub nazwy klas do elementu, które muszą być rozdzielone białymi znakami DIR="kierunek" Kierunek tekstu: ltr - od lewej do prawej rtl - od prawej do lewej HEIGHT="długość" Wysokość w pikselach lub w procentach HSPACE="piksele" Odstęp po lewej i prawej...
- Komendy HTML 4.01 / OBJECT
...archiwów rozdzielonych spacjami, które zawierają zasoby związane z obiektem (podane w atrybutach CLASSID i DATA) BORDER="piksele" Szerokość ramki elementu w pikselach (zdeprecjonowane) CLASS="klasa" Przypisuje nazwę klasy (CSS) lub nazwy klas do elementu, które muszą być rozdzielone białymi znakami CLASSID="adres" Lokalizacja implementacji obiektu CODEBASE="adres" Określa adres bazoway, używany do tworzenia adresów względnych, podawanych w atrybutach CLASSID, DATA i ARCHIVE...
- Obramowanie CSS / Obcięcie obramowania obrazkowego {border-image-slice}
...względem wymiarów grafiki). Dodatkowo na końcu wartości obcięcia po znaku spacji można dopisać słowo kluczowe fill. Oznacza ono, że środek ramki również zostanie wypełniony grafiką - powieloną ze środkowego prostokąta siatki obrazka obramowania. Przykładowo, podając deklarację "border-image-slice: 25% 30% 12% 20%", uzyskamy następującą siatkę obcięć: Źródło: CSS Backgrounds and Borders Module Level 3 Przykład {border-image-slice} border-image-source: url(punkt.gif)...