Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Stosowanie stylów i elementów programowania stron WWW

No description
by

Natalia Kopera

on 3 January 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Stosowanie stylów i elementów programowania stron WWW

Stosowanie stylów i elementów programowania do tworzenia stron WWW
Elementy (formularze)
form {}
Styl dla elementu <form>. Formatuje obszar formularza
.inputbox {}
Klasa stylu dla elementu <input>. Formatuje wygląd pól w formularzach, np. pól Nazwa użytkownika, Hasło, Nazwa użytkownika, Szukaj
.text_area {}
Klasa stylu dla elementu <input>. Formatuje wygląd wielowierszowych pól tekstowych.
label {}
Styl dla elementu <label>. Formatuje etykiety pól tekstowych.
fieldset {}
Styl dla elementu <fieldset>. Formatuje obszar zgrupowanych elementów.
legend {}
Styl dla elementu <legend>. Formatuje tytuł zgrupowanych elementów.
.search Klasa stylu dla elementu <div>. Formatuje wygląd obszaru wyszukiwarki (z polem tekstowym, przyciskiem Szukaj)
button {}
Klasa stylu dla elementu <input>. Formatuje wygląd przycisków (Wyślij, Głosuj itp.)
.adminform {} Klasa stylu dla elementu <table>. Formatuje tabele obejmujące interfejs edytora na stronie frontowej
Elementy i ich zastosowanie cd.
th {}, td {}
Style dla elementów <th> i <td>. Formatują komórki w tabelach: <th> tytułowe, <td> - pozostałe.
caption {}
Styl dla elementu <caption>. Formatuje podpis tabeli.
ul {}, ol {}, li {}
Style dla elementów <ul>, <ol> i <li>, <ul>. Formatują listy (wykazy): <ul> punktowane, <ol> uporządkowane, np. numerowane.
dl {}, dt {}, dd {}
Style dla elementów <dl>, &dt;ol> i <dd >. Formatują elementy definicji.
a:link {}, a:visited {}, a:hover {}, a:active
Style dla elementów <a>. Formatują odnośniki: <a:link> - nieodwiedzone, <a:visited> - odwiedzone, <a:hover> - wskazywane, <a:active> - aktywne.
Elementy i ich zastosowanie cd.
strong{}, em{}
, Style dla elementów <strong> i <em>. Formatują wyróżnienia w tekście. Uwaga: znaczniki fizyczne <b>, <i> nie występują w specyfikacji XHTML 2.0, a znacznika <u> nie ma już w specyfikacji XHTML 1.0 Strict.
hr {}
Styl dla element <hr>. Formatuje linię poziomą. W starszych szablonach można spotkać styl hr.separator {} zaproponowany swego czasu przez Peekmambo. Propozycja ta nie znalazła jednak szerszego zastosowania.
.clr {}
Klasa stylu dla elementów pływających <div>. Wymusza oczyszczenie obszaru wokół elementu, zwykle w postaci .clr {clear: both;}
Elementy i ich zastosowanie

body {}
div {}
p {}
table {}
tr {}


Style CSS
Reguły CSS
selektor
Definiowanie nowego stylu strony
1.
Wybierz polecenie Format - Style i formatowanie'.'
2.
Kliknij ikonę Style strony.
3.
Kliknij prawym przyciskiem myszy element na liście stylów, a następnie wybierz pozycję Nowy.
4.
W zakładce Organizator wprowadź nazwę stylu w polu Nazwa.
5.
Wykonaj jedną z następujących czynności:
Style CSS
CSS (Cascading Style Sheets) to zbiór reguł formatowania, które sterują wyglądem zawartości na stronie WWW. Sformatowanie strony za pomocą stylów CSS umożliwia rozdzielenie zawartości od prezentacji. Zawartość strony, kod HTML, znajduje się w pliku HTML. Natomiast reguły CSS, które definiują prezentację tego kodu, znajdują się w innym pliku (zewnętrznym arkuszu stylów), albo w innej części dokumentu HTML (zazwyczaj w sekcji nagłówka). Rozdzielenie zawartości i prezentacji znacznie ułatwia scentralizowaną obsługę wyglądu serwisu. Gdy chce się wprowadzić zmiany, nie trzeba modyfikować każdej właściwości na każdej stronie z osobna.
Stosowanie stylów strony
1.
Kliknij obszar na stronie, na której ma zostać zastosowany styl.
2.
Wybierz Format, a następnie kliknij ikonę Style strony.
3.
Kliknij dwukrotnie nazwę na liście.

Stosowanie stylu strony do nowej strony
1.
Kliknij dokument w miejscu, w którym zaczyna się nowa strona.
2.
Wybierz Wstaw - Ręczny podział.
3.
Wybierz Podział strony.
4.
W polu Styl wybierz styl, który ma zostać zastosowany do strony za miejscem ręcznego podziału.
5.
Kliknij OK.
deklaracja
W poniższym przykładzie, h1 to selektor, a cały tekst w klamrach ({}) to blok deklaracji:
h1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; }
Styl (który pochodzi z reguły lub zbioru reguł) jest przechowywany w innym miejscu, niż tekst, który formatuje. Zazwyczaj jest to zewnętrzny arkusz stylów albo sekcja nagłówka w dokumencie HTML. Zatem jedna reguła dla znaczników h1 może dotyczyć wielu znaczników na raz (a w przypadku zewnętrznego arkusza stylów, reguła może dotyczyć jednocześnie wielu znaczników na wielu różnych stronach). Dzięki temu standard CSS ogromnie ułatwia modyfikowanie wyglądu. Uaktualnienie reguły CSS w jednym miejscu powoduje, że formatowanie wszystkich używających jej elementów automatycznie przyjmuje nowy styl.
W programie Dreamweaver można tworzyć następujące rodzaje stylów:
Style klasy umożliwiają stosowanie właściwości stylu do dowolnych elementów na stronie.
Style znaczników HTML zmieniają definicję formatowania poszczególnych znaczników, np. h1. Gdy utworzysz lub zmienisz styl CSS dla znacznika h1, zmieni się automatycznie cały tekst sformatowany znacznikiem h1.
Style zaawansowane zmieniają definicję formatowania pewnych kombinacji elementów albo innych form selektorów, dozwolonych w standardzie CSS (np. selektor td h2 obowiązuje wtedy, gdy nagłówek h2 występuje w komórce tabeli). Style zaawansowane zmieniają także formatowanie znaczników, które zawierają określony atrybut id (np. style definiowane przez #mojStyl obowiązują dla wszystkich znaczników, które zawierają parę atrybut wartość: id="mojStyl").
Style kaskadowe
Za style wyświetlane na stronie internetowej odpowiedzialne są trzy różne źródła: arkusz stylów utworzony przez autora strony, zaznaczenia stylów dostosowane przez użytkownika (jeśli są) i domyślne style przeglądarki.. Końcowe wyświetlanie strony internetowej jest wynikiem reguły wszystkich trzech źródeł razem wziętych (“kaskadowanie”), co ma na celu renderowanie strony internetowej w optymalny sposób.
Dziedziczenie

Można, jednak określać reguły bardziej dokładnie i tworzyć style nadpisujące standardową formułę dla dziedziczenia. Na przykład jeśli w swoim arkuszu stylów utworzysz następującą regułę:

body { font-family: Arial; font-style: italic; } p { font-family: Courier; font-s
Skrócone właściwosci
Przykładowe reguły
Jako autor strony internetowej, można utworzyć arkusz stylów nadpisujący domyślny styl czcionki i rozmiar czcionki akapitu. Na przykład w swoim arkuszu stylów możesz utworzyć następującą regułę:


p { font-family:
Arial; font-size: small; }
Właściwości dla większości elementów na stronie internetowej są dziedziczone — na przykład znaczniki akapitu dziedziczą określone właściwości ze znaczników treści (body), znaczniki zakresu dziedziczą określone właściwości znaczników akapitowych itd. Zatem, jeśli w swoim arkuszu stylów utworzysz następującą regułę:

body { font-family: Arial; font-style: italic; }
Specyfikacja CSS umożliwia tworzenie stylów w krótszej notacji. Nazywa się to skróconą składnią CSS. Skrócona składnia CSS umożliwia podanie wartości kilku właściwości w jednej deklaracji. Na przykład właściwość font umożliwia ustawienie w jednym wierszu właściwości font-style, font-variant, font-weight, font-size, line-height oraz font-family.
Przykład

h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none }

Ta sama reguła w postaci pojedynczej właściwości o składni skróconej wygląda następująco:

h1 { font: bold 16pt/18pt Arial }
Elementy (nawigacja
i moduły menu)
mainlevel{}, a.mainlevel:link {}, a.mainlevel:visited {}, a.mainlevel:hover {}, #active_menu {}
Klasa stylu dla elementu <a>. Formatuje główne, nadrzędne pozycje menu
sublevel{}, a.sublevel:link {}, a.sublevel:visited {}, a.sublevel:hover {}
Klasa stylu dla elementu <a>. Formatuje podrzędne - potomne pozycji menu
ul#mainlevel-nav {}
Styl dla elementu niepowtarzalnego <ul> (z identyfikatorem). Formatuje poziome menu nawigacyjne. Identyfikator menu nadrzędnego rozszerzony o przyrostek -nav.
ul#mainlevel-nav li{}
Styl dla elementów - <li>. Formatuje pozycje niepowtarzalnej listy w poziomym menu nawigacyjnym.
#mainlevel-nav a:link {}, #mainlevel-nav a:visited{}, #mainlevel-nav a:hover {}
: Klasa stylu dla elementu <a>. Formatuje główne, nadrzędne pozycje menu w dodatkowym poziomym menu nawigacyjnym.
Styl dla elementu <body>. Formatuje całą stronę, kontroluje rodzinę czcionek, tło strony, itp.
Styl dla elementu <div>. Formatuje wszystkie bloki,
w tym bloki tekstu, jeśli nie zostały ujęte w inne znaczniki.
Styl dla elementu <p>. Formatuje akapity.
Styl dla elementu <table>. Formatuje wygląd
tabel
Styl dla elementu <tr>. Formatuje wygląd wierszy
w tabelach.
#pathway
Styl dla niepowtarzalnego elementu
<pathway>
(z identyfikatorem). Formatuje obszar ścieżki powrotu.
.pathway Klasa stylu dla elementu <a>. Formatuje właściwości odnośników w ścieżce powrotu.
a.readon:link {}, a.readon:hover {}, a.readon:visited {}
Klasa stylu dla elementu <a>. Formatuje wygląd odnośnika Czytaj całość
.pagenav_prev {}, .pagenav_next
Klasy stylów dla elementu <th>. Formatują przyciski Poprzedni artykuł - Następny artykuł.
.pagenav_prev {}
Klasa stylu dla elementu <th>. Formatuje komórkę tabeli z odnośnikiem Poprzedni artykuł
.pagenav_next {}
Klasa stylu dla elementu <th>. Formatuje komórkę tabeli z odnośnikiem Następny artykuł
.pagenav {}, a.pagenav:link {}, a.pagenav:visited {}, a.pagenav:hover {}
Klasa stylu dla elementów <span> oraz <a>. Formatuje przyciski paska nawigacyjnego: Start «« Poprz. |1|2|3| ...| n | Nast. »» Koniec w blogach.
.back_button {}
Klasa stylu dla elementu <input>. Formatuje przycisk (odnośnik) Wstecz
Elementy (materiały)
.contentpaneopen {}
Klasa stylu dla elementu <table>. Formatuje tabele obejmujące artykuły, materiały statyczne, tabele w blogach obejmujące wstępy artykułów oraz tabelę w oknie wydruku.
.contentpane {}
Klasa stylu dla elementu <table>. Formatuje tabele obejmujące pozycje inne niż artykuły, a więc np. pozycje w komponentach, listy kategorii, formularze kontaktowe, itp.
.contentheading {}
Klasa stylu dla elementu <td> lub <th> formatuje komórkę tabeli z tytułem artykułu, pozycji w komponencie.
.small {}
Klasa stylu dla elementu <span>. Formatuje nazwę autora pozycji.
.createdate {}
Klasa stylu dla elementu <td>. Formatuje komórkę z datą utworzenia artykułu i materiału statycznego.
.modifydate {}
Klasa stylu dla elementu <td>. Formatuje komórkę z datą ostatniej modyfikacji artykułu i materiału statycznego.
.content_rating {}
Klasa stylu dla elementu <span>. Formatuje tekst zawierający wyniki oceny publikowanych artykułów - obok gwiazdek wyrażających ocenę.
.content_vote {}
Klasa stylu dla elementu <span>. Formatuje tekst przy przyciskach wyboru oceny artykułów (przyciskach radiowych)
.mosimage{}
Klasa stylu dla elementu <div>. Formatuje obszar obrazka wprowadzonego botem {mosimage} i podpisu pod obrazkiem (tylko, gdy obrazek jest opatrzony podpisem).
.mosimage_caption{}
Klasa stylu dla elementu <div>. Formatuje podpis obrazka.
.searchintro {}
Klasa stylu dla elementu <table>. Formatuje tabelę z komunikatami o ilości wystąpień wyszukiwanego tekstu (z komunikatem:
Znaleziono pozycji:...).
.smalldark {}
Klasa stylu dla elementu <td>. Stosowana na stronach sond do formatowania komórek tabeli z ilością oddanych głosów, datą ostatniego głosowania.
.moscode{}
Klasa stylu dla elementu <code>. Formatuje cytowane fragmenty kodu programów
code {}
Stylu dla elementu <code>. Formatuje kod komputerowy.
.buttonheading {}
Klasa stylu dla elementu <td>. Formatuje komórkę z przyciskami: Drukuj, PDF, Poleć znajomemu

Elementy (Wykazy treści w sekcji, w kategorii,
w komponencie
.componentheading {}
Klasa stylu dla elementu <div>. Formatuje tytuły (nazwy) komponentów, nadawane im przez administratorów w parametrach pozycji menu.
.contentdescription {}
Klasa stylu dla elementu <td>. Formatuje komórkę tabeli zawierającą opis sekcji lub kategorii.
.sectiontableheader {}
Klasa stylu dla elementu <td>. Formatuje komórki tabel w wykazach, np.
w wykazie artykułów słowa: >Tytuł, Data, Autor, Odsłony..
.sectiontableentry1 {}
Klasa stylu dla elementu <tr>. Formatuje nieparzyste wiersze w tabelach zawierających wykazy (kolor pierwszego,
trzeciego itd. wiersza)
.sectiontableentry2 {}
Klasa stylu dla elementu <tr>. Formatuje parzyste wiersze w tabelach zawierających wykazy (kolor drugiego, czwartego itd. wiersza)
.sectiontablefooter {}
Klasa stylu dla elementu <tr>. W tabelkach wykazów zawierających większą ilość formatuje wiersz stopki pozycji z paskiem nawigacyjnym.
a.category:link {}, a.category:hover {}, a.category:visited {}
Klasa stylu dla elementu <a>. Formatuje odnośnik do kategorii na stronach z wykazem zawartości sekcji)
.highlight{}
Klasa stylu dla elementu <span>. Formatuje wyszukiwane słowa lub frazy w wynikach wyszukiwan
Elementy (blogi)
.blog {}
Klasa stylu dla elementu <table>. Formatuje tabelę obejmującą obszar bloga
.contentpagetitle {
}, a.contentpagetitle:link {}, a.contentpagetitle:visited {}, a.contentpagetitle:hover {} Klasa stylu dla elementu <a>. Formatuje tytuły artykułów, gdy w ustawieniach pozycji menu włączona jest opcja Tytuły łączami
.blogsection {}
, a.blogsection:link {}, a.blogsection:link {}, a.blogsection:hover {} Klasa stylu dla elementu <a>. Formatuje odnośniki do blogów w wykazie Zobacz też na stronach typu magazynowego
.blog_more {}
Klasa stylu dla elementu <div>. Formatuje tytuł sekcji odnośników w blogu (Zobacz także...; tytuł jest ponadto objęty elementem <strong>).
.article_seperator {}
Klasa stylu dla elementu <span>. Formatuje obszar rozdzielający pozycje bloga
Elementy
(spis treści)
.contenttoc {}
Klasa stylu dla elementu <table>. Formatuje tabelę spisu treści artykułu wielostronicowego
.contenttoc th {}
Klasa stylu dla elementu <th>. Formatuje wiersz z tytułem w tabeli ze spisem treści artykułu wielostronicowego
.contenttoc td {}
Klasa stylu dla elementu <td>. Formatuje komórkę ze spisem treści artykułu wielostronicowego
.toclink, a.toclink:link {}, a.toclink:visited {}, a.toclink:hover {
} Klasa stylu dla elementu <a>. Ustawia styl łączom w tabeli ze spisem treści artykułu wielostronicowego
.pagenavcounter {}
Klasa stylu dla elementu <div>. Formatuje informację o ilości stron artykułu (X stron z X
.pagenavbar {}
Klasa stylu dla elementu <div>. Formatuje przyciski Poprzednia strona - Następna strona.
Elementy (moduły)
.moduletable {}
Klasa stylu dla elementów <div> oraz <table>. Formatuje zarówno tabele, a więc elementy table, tr, td, jak i elementy div, w których umieszczono moduły.
.moduletable th {}
Klasa stylu dla elementu <th>. Formatuje komórkę z tytułem modułu i tytuł modułu.
.moduletable h3 {}
Klasa stylu dla elementu <h3>. Formatuje tytuł modułu umieszczonego w bloku <div class="moduletable">
.moduletable td {}
Klasa stylu dla elementu <td>. Formatuje komórkę tabeli zawierającą treści modułu, w tym właściwości tekstu.
.moduletable ul li {}
Klasa stylu dla elementu <li>. Formatuje elementy listy w modułach
.latestnews {}, .latestnews ul {}
Klasa stylu dla elementu <ul>. Formatuje wygląd listy i elementów listy - odnośników w module Nowości [LatestNews].
.mostread {}, .mostread ul {}
Klasa stylu dla elementu <ul>. Formatuje wygląd listy i elementów listy - odnośników w module Popularne [MostRead].
.module {}
Klasa stylu dla elementu <div>. Formatuje moduły, gdy dla pozycji modułu włączono styl -2 lub -3, np. <?php mosLoadModules ( 'nazwa_pozycji_modulu',-3); ?>
.module h3 {}
Klasa stylu dla elementu <div>. Formatuje tytuł modułu
.syndicate
Klasa stylu dla elementu <div>. Formatuje w module Kolporter RSS [RSSFeed] obszar z przyciskami - odnośnikami do kanałów RSS.
.syndicate_text
Klasa stylu dla elementu <div>. Formatuje w module Kolporter RSS tekst opisu nad przyciskami.
.pollstableborder {}
Klasa stylu dla elementu <div>. Formatuje krawędzie tabeli, wierszy i komórek zawierających pytania sondy; zdefiniowany we własnym arkuszu stylów komponentu Sondy!
.pool {}
Klasa stylu dla elementu <table>. Formatuje tabelę z tekstem ankiety. Użyta w module mod_pool.php
.wrapper
Klasa stylu dla elementu <iframe>. Formatuje ramkę obejmujacą obszar wyświetlanej strony w komponencie i module Wraper
Full transcript