Prezentacja nowego produktu - Absolwenci na walizkach

Prezentacja nowego produktu - Absolwenci na walizkach

TWORZNIE STRON INTERNETOWYCH OPARTYCH O CMS JOOMLA JOOMLA Joomla! - rozprowadzany na zasadach wolnego oprogramowania system zarzdzania treci napisany w jzyku PHP, wykorzystujcy baz danych MySQL. Joomla! jest pochodn systemu Mambo. CMS System zarzdzania treci (ang. Content Management System, CMS) jest to aplikacja

internetowa lub ich zestaw, pozwalajca na atwe utworzenie serwisu WWW oraz jego pniejsz aktualizacj i rozbudow przez redakcyjny personel nietechniczny. Ksztatowanie treci i sposobu ich prezentacji w serwisie zarzdzanym przez CMS odbywa si za pomoc prostych w obsudze interfejsw uytkownika, zazwyczaj w postaci stron WWW zawierajcych rozbudowane formularze i moduy. Jzyki z jakich jest zbudowana Joomla

HTML- Hyper Text Markup Language CSS Casscade Style Sheet PHP Power Hypertext Preprocessor MySQL- Structural Query Language

Javascript Co potrzebne jest do uywania Joomla lokalnie na komputerze XAMPP- program dziaajcy w rodowisku MAC Windows Linux zawierajcy pakiety PHP Mysql PHPMyAdmin i Apache

Dowolna przegldarka internetowa INSTALACJA PROGRAMU XAMPP XAMPP jest darmowym wieloplatformowym pakietem, skadajcym si gwnie z serwera Apache, bazy danych MySQL i interpreterw dla skryptw napisanych w PHP i Perlu. Nazwa XAMPP

jest akronimem dla X (Cross-platform), Apache, MySQL, PHP, Perl. Program jest wydawany na licencji GNU General Public License jako darmowy serwer WWW do obsugi dynamicznych stron. Obecnie XAMPP jest dostpny na cztery platformy: Microsoft Windows, Linux, Sun Solaris oraz Mac OS X. Joomla w internecie Potrzebny hosting z php i mysql

(czyli udostpnianie czci zasobw komputera, ktry jest stale 24h na dob podczony do internetu i moliwy do zarzdzania przez uytkownika np. poprzez przegldark internetow np. 1and1.pl, nazwa.pl, home.pl, cba.pl Zmiany w Joomla 1.6 Najwaniejsze funkcje w Joomla 1.6 -System kontroli dostpu - daje administratorom witryny i redaktorom moliwo okrelania, kto moe oglda i zarzdza treci. -Nieograniczony model zagniedania - umoliwia administratorom

oraz twrcom treci definiowanie wielopoziomowych kategorii o dowolnie zagniedonej strukturze. -Prosta aktualizacja rozszerze - dostarcza uytkownikowi lepszego sposobu utrzymania bezpieczestwa witryny przez uproszczony proces aktualizacji rozszerze -Szablony zgodne z semantyk XHTML - zapewnia lepsz podstaw do prezentacji treci -Wielojzyczno - pozwala w podstawowy sposb na stworzenie witryny wielojzycznej. Instalowanie Joomla na hostingu CBA.PL 1. Wchodzimy na stron cba.pl i klikamy Zarejestruj

2. Wpisujemy podan nazw subdomeny na domenie cba.pl np. twain83.cba.pl 3. podajemy wszystkie potrzebne informacje jak haso (dwa razy takie samo), email i kod capcha (ten z obrazka) akceptujemy regulamin i klikamy Za konto 4. otwieramy swoj poczt i klikamy na link aktywacyjny 5. logujemy si za pomoc wczeniej podanego loginu i hasa 6. pobieramy program filezilla client (NIE SERVER!) http://filezilla-project.org/download.php?type=client pobieramy wersje dla windows z rozszrzeniem exe (nie zip) 7. instalujemy program filezilla Instalacja joomla na hosting cba.pl

cd.. 8. otwieramy program filezilla i podajemy nazw hosta np.. cba.pl login [email protected] i haso podane przy rejestracji (mona zmieni haso w panelu administracyjnym) 9. wchodzimy na stron http://joomlacode.org/gf/project/joomla/frs/? i pobieramy wersj 1.6.5 o nazwie Joomla_1.6.5Stable-Full_Package.zip action=FrsReleaseBrowse&frs_package_id=5969

Instalacja Joomla na hostingu cba.pl cd. 10. Rozpakowujemy (wyodrbnij wszystkie) pliki Joomla 11. Usuwamy na serwerze plik index.html 12.Wrzucamy pliki Joomla na serwer poprzez Filezilla bezporednio na do gwnego katalogu (zajmie to okoo 15 minut) 12. Tworzymy baz MySQL w panelu administracyjnym bdzie potrzebna do instalacji 13. Wpisujemy do przegldarki adres naszej strony np. twain83.cba.pl (twain83 to nazwa naszej subdomeny) i przystpujemy do instalacji

Instalacja Joomla na hostingu cba.pl cd. 14. Wybieramy wersj jzykow i klikamy dalej 15. Sprawdzanie wersji rodowiska klikamy dalej :) 16. Akceptujemy licencj i klikamy dalej :) 17.Konfugurujemy poczenie z baz danych w polu nazwa bazy danych podajemy mysql.cba.pl podajemy nazw uytkownika nt twain83 w polu nazwa bazy danych np.. twain83_cba_pl i podajemy nasze haso do bazy danych i klikamy dalej 18. Konfiguracja ftp klikamy dalej 19. Konfiguracja gwna wpisujemy nazw wirtyny login superadministratora i jego haso podajemy adres mail

20. Wane! Klikamy zaaduj przykadowe dane in klikamy daje Instalacja joomla cd.. 21.Usuwamy katalog instalacyjny i klikamy Zaplecze 22. Podajemy wczeniej zapisany login i haso i gotowe 23. Jestemy ju w panelu administracyjnym witryny klikajc View site widzimy nasz stron internetow moemy zobaczyc nasz stron rwnie pod adresem nasza_subdonema.cba.pl 24. Na koniec warto te zainstalowa polsk wersj jzykow

KONIEC Pierwsze spojrzenie na panel administracyjny Panel administracyjny jest zawsze dostpny pod adresem http://moja_domena/administrator/ Instalujemy spolszczenie panelu administracyjnego: Pobieramy plik ze strony http://www.joomla.pl/index.php/pobierz-joomla.html (pakiet jzykowy do Joomla 1.6.5) Wchodzimy w zakadk Extensions ->extensions manager Klikamy obok Upload Package File i szukamy na dysku wczesniej pobranego spolszczenia i klikamy Upload and Install

Przechodzimy do zakadki language manager i zaznaczamy polish i klikamy default to samo robimy dla panelu administracyjnego czyli klikamy Filter location administrator i zaznaczamy polish i klikamy panel administracyjny powinien ju by wywietlany po polsku Profil uytkownika Moemy zmieni swoj nazw uytkownika opis uytkownika haso uywany edytor serwis pomocy stref czasow itp

Konfiguracja globalna Moemy zmieni nazw naszej witryny (odpowiednik title w html) Moemy zamkn j przed nieuprawnionymi uytkownikami na

czas prac i poinformowa o tym odpowiednim komunikatem Moemy zmieni domylny edytor (mona to zmieni te na poziomie uytkownika) Moemy wybra ile pozycji bdzie si standardowo pojawia podczas administracji Wpisujemy dane potrzebne do SEO czyli wypozycjonowania strony przez wyszukiwark Google czyli opis witryny i sowa kluczowe (im mniej sw kluczowych tym s bardziej wane dla wyszukiwarki) Moemy te wybra czy tytuy i czy autor ma by w metadanych strony Przyjazne linki

Pobieramy plik htaccess.txt i otwieramy go w jakim edytorze tekstu Usuwamy komentarz rewrite Basa (linia 57) Wrzucamy plik na serwer i zmnieniay jego nazw na .htaccess Moemy te zmieni adresy z /adres/ na adres.html zaznaczajc adresy z przyrostkiem

Konfiguracja globalna system Moemy wczy cachowanie strony w celu odcienia serwera wtedy serwer zapisuje kopie stron w postaci html ktre przechowuje udostpniajc uzytkownikom. Analiza systemu i analiza jzyka pomocne dla zaawansowanych administratorw przy sprawdzaniu bdw MySQl i PHP

Konfiguracja globalna Serwer Moemy edytowa plik configuration.php przez podanie nazwy hosta nazwy uytkownika nazwy bazy danych i hasa i przedrostka tabel Moemy te wczy serwer ftp oraz skonfigurowa serwer pocztowy

Konfiguracja globalna Uprawnienia Moemy zdecydowa jakie uprawnienia dostan poszczeglni uytkownicy Istniej poszczeglne role rnych uytkownikw. Standardowo podczas instalacji tworzony jest uytkownik superadministrator ktrego moe wszystko, w miar prac nad witryn mona utworzy innych uytkownikw z innymi uprawnieniami, mona

te dynamicznie przydziela uytkownikom ich uprawniania niezalenie od ustawie globalnych Moemy te utworzy grup uytkownikw i dla wszystkich osb w grupie zdefiniowa uprawnienia Witryna Konserwacja Jeeli zaznaczylimy opcj cachowania witryny moemy wyczyci plik cache a take usun przestarzae pliki Witryna informacja o systemie

Informacje dla zaawansowanych administratorw mnidzy innymi werjsa Joomla nazwa serwera wersja PHP i MySQL itp.. Uytkownicy utwrz konto uytkownika

Tworzy konto uytkownika z okrelonymi uprawnianiami Utwrz grup uytkownikw tworzy grup uytkownikw z okrelonymi uprawnieniami Korespondencja -umoliwia wysanie wiadomoci do poszczeglnych grup uytkownikw Menu

Kada pojedyncza strona lub zbir stron internetowych aby by widoczna musi by przypisana do jakiego menu Istnieje co najmniej jedno menu podstawowe ktrego nie mona usun Menu to modu umieszczony wewntrz templatki (szablonu) Mona przypisa kilka menu to tego samego miejsca w templatce Menu mona wyaczy poprzed wyaczenie moduu

Najwaniejsze rodzaje menu

Pojedynczy artyku odpowiednik statycznej strony HTML (najczciej uywany) Kategoria przegld artykuw- wywietla linki do oszczeglnych artykuw Kategoria lista artuykuw Lista artykuw w tabelce Kategoria lista kategorii Lista kanaw informacyjnych kanay RSS Pojedynczy kana RSS Zakadki Lista zakadek Artykuy Archiwalne Logowanie Profil uytkownika

WPINACZ- Wrzuca ramke iframe na podany adres http:// Pojedynczy artyku Alias adres strony np. wpisujc adres http://joomla/adres.html Status: opublikowano- link bdzie widoczny Dostp: Publiczny widowczny dla wszystkich Registered- dla zarejestrowanych uytkownikw Special- dostp ograniczony specjalny: kategoria i umieszczone w niej artykuy bd dostpne tylko dla zalogowanych uytkownikw z uprawnieniami specjalnymi

- autorw, redaktorw, wydawcw, operatorw i administratorw. Autorzy bd mogli edytowa swoje artykuy, redaktorzy wszystkie artykuy, a wydawcy redagowa wszystkie artykuy i decydowa o ich publikacji Pojedynczy artyku cd.

Pokaz w menu- wybieramy menu w jakim ma by dany link Pozycja macierzysta kolejno w ktrym ma by opublikowany dany link Otwrz w: opcje jak ma si wywietla dany link Strona domylna otwiera si domylnie po wpisaniu adresu naszej domeny np. po otwarciu twain83.cba.pl (musi by przypita do menu domylnego) Styl szablonu- domylny szablon jaki ma zosta uyty do wywietlania strony Wybierz artyku: wybieramy wczeniej utworzony artyku Opcje artykuu: jeeli wczeniej tego nie zdefiniowalimy

oglnie to wybieramy ustawienia dla konkretnego artykuu albo definiujemy zgodnie z oglnymi ustawieniami dla wszystkich artykuw Pojedynczy akrtyku opcje pozycji menu Opcje pozycji menu: Atrybut title w czu- opcja pod SEO Styl CSS cza definiujemy konkretny styl dla konkretnego cza Grafika w menu dodajemy grafik jako cze do menu Dodaj tytu menu- opcja pod seo domylnie

wczona Pojedynczy artykul opcje wygldu strony Tytu strony dla przegldarki-opcja seo Poka nagwek strony- opcja seo Nagwek strony-mona zdefiniowa

wasny nagwek Klasa CSS strony-page class suffix definiowanie wasnej klasy css w templatce Opcje metadanych i przypisane moduy Opis streszczenie definiowanie opisu pod SEO Sowa kluczowe- pod SEO

Wyszukiwarki definiowanie co maj indeksowa wyszukiwarki Moliwo zdefiniowania przypisanych moduw ktre maj by wywietlane razem z linkiem Artykuy

Wyszukiwanie artykuw wedug kategorii Wyszukiwanie artykuw wyrnionych Utwrz artyku- tworzy artyku, ktry nastpnie trzeba przypisa do menu

Dostosuj- edycja wybranego artykuu Opublikuj/Wycofaj- zmiana widocznoci artykuu na stronie Archiwizuj- przenosi artykuy do archiwum Odblokuj odblokowuje artykuy stworzone przez redaktorw przez osoby do tego uprawnione Filtrowanie i sortowanie artykuw Kosz przeniesienie artykuw do kosza (dopiero w koszu mona je definitywnie usun) Opcje artykuw

Filtrowanie tekstu Czarna lista- lista zabronionych tagw np.. iframe jest standardowo zablokowane Biaa lista- lista dozwolonych tagw Bez HTML -usuwa wszystkie znaczniki HTML Nie filtruj- umoliwia osadzanie wszystkich znacznikw HTML ale nie PHP i Javascript do tego wymagany jest plugin np. Jumi

Rozszerzenia joomla Istniej trzy podstawowe rodzaje rozszerze do Joomla s to moduy, komponenty i dodatki (components, modules, plugins). Komponent instaluje si jako menu w panelu administracyjnym Instaluje si w jako element strony gwnej Plugin jest najczciej osadzany w artykule strony Komponenty wbudowane Doniesienia: kategorie i kanay RSS Kontakty: krtki opis podobny do komponetu sobi2

Mona je porzdkowa w kategorie Powiadomienia: umoliwia wysyanie uytkownikom wiadomoci ktre s odczytywane po zalogowaniu danego uytkownika Przekierowania: umoliwiaj przekierowania ze starych nieuywanych adresw na nowe np. adres twain83.cba.pl/index.php wpisujemy index.php Reklamy umoliwia publikowanie banerw reklamowych i zliczanie klikni a take losowe ich wywietlanie oraz definiowanie specyficzne dla danego uytkownika mona ledzi kliknicia i potem wyeksportowa to do pliku CVS i otworzy np. w excelu czy w notatniku.

Komponenty wbudowane Statystyki wyszukiwania: najpierw trzeba zbiera statystyki nastpnie mona wyniki wyszukiwania wywietli Zakadki: linki do innych stron wraz z opisem ktre mona wywietla cznie wszystkie w danej kategorii

Roszerzenia-> moduy wbudowane Menu tworzenie standardowego menu do ktrego mona przypisywa linki Wasny HTML moliwo osadzenia w kodzie dowolnego kodu HTML Modu cieka powrotu umoliwia

nawigacj na stronie Wpinacz wrzuca za pomoc ramki iframe inn stron lokaln bd zdaln Szukaj prosta wyszukiwarka Dodatki (plugins) Dodatki nieaktywne standardowo: Geshi code highlighter podwietlacz kodu Filtr jzykw dodatek filtruje wywietlanie treci w zalenoci od jzyka, dodatek ma by wczony tylko wtedy, gdy opublikowany jest modu Przecznik jzyka. Pami podrczna umoliwia cachowanie stron w

celu zmniejszenia obcienia serwera i ich szybszego wywietlania Uytkownik profil umoliwia zmuszenie uytkownika do podania wikszej iloci danych o osobie (w praktyce mona wpisywa dowolne dane) Szablony Poprzez szablony moemy zarzdza zainstalowanymi templatkami z katalogu joomla/templates mona przypisywa poszczeglne templatki do konkretnych pozycji menu Opcja edycji kodu templatki z pozycji menu

zostaa wycofana w wersji 1.6, nie ma te moliwoci podejrzenia dostpnych punktw zaczepienia w szablonie graficznych Artyku edycja

Podstawow treci strony internetowej na bazie joomla s zazwyczaj artykuy Artykuy mona edytowa poprzez edytor tekstu JCE JCK TinyMCE CodeMirror lub te bez edytora bezporednio w kodzie witryny. Mona te przecza edytor w tryb wywietlania kodu. Edytory generuj kod HTML i Kaskadowych Arkuszy Stylw CSS Kod generowany przez edytory moe zawiera bldy ponadto mog wystpowa niezgodnoci midzy poszczeglnymi przegldarkami oraz struktura strony moe nie by w peni prawidowa dlatego potrzeba jest znajomo HTML/CSS.

HTML HTML czyli jzyk znacznikw hipertekstowych przy jego pomocy pisze si strony internetowe czyli dokumenty, ktre nastpnie mona przeglda i czyta za pomoc tzn. przegldarki internetowej. HTML cd. Jzyk HTML jest prosty w nauce, skada si z niewielkiej iloci sw tzn. tagw, znacznikw za pomoc ktrych mona dowolnie manipulowa grafik i tekstem na

stronie. Znaczniki Jzyk HTML skada si ze znacznikw (tagw). Kady znacznik ma okrelone znaczenie. Przegldarka po napotkaniu na znacznik odpowiednio go interpretuje. Wszystkie znaczniki objte s nawiasami trjktnymi. Przekadowe znaczniki

Znaczniki cd. Wikszo znacznikw otwiera si i zamyka, obejmujc jak parti tekstu. Zamknicie znacznika polega na umieszczeniu przez jego nazw, ale po otwierajcym nawiasie trjktnym slasha. Oto przykad Ten tekst bdzie pogrubiony Zagniedanie znacznikw Znaczniki mona w sobie zagnieda

np. to jest pogrubione a to jeszcze pokrelone

Lub pierwsza
linia druga linia

Narzdzia webmastera By tworzy strony internetowe wystarczy windowsowy notatnik, oczywicie istniej specjalne programy, ktre ten proces znacznie uatwiaj. Podczas naszych warsztatw uywa bdziemy programu bluefish.

Sposb w jaki przegldarka analizuje tekst Przegldarka analizuje kod od lewej do prawej i od gry do dou, dlatego nie ma znaczenia czy caa strona utworzona jest w jednej linijce czy kade sowo bdzie w osobnej linii. Podczas analizy przegldarka wyapuje kady znacznik i nie wywietla go na stronie, zamiast tego sprawdza jakie kady znacznik ma znaczenie i odpowiednio konfiguruje sposb wywietlania danych. XHTML nastpca HTML

Na co naley zwrci uwag: 1. Zawsze doaczaj znaczniki zamykajce Np.

tekst

2. Puste elementy musz zawiera zamykajcy ukonik np.:
3. Zawsze doczaj do atrybutu jego warto Umieszczaj wszystkie atrybuty w znakach cudzysowia XHTML cd. Zapisuj kod maymi literami Pamitaj aby twoje znaczniki byy

poprawnie zagniedone Np.

tekst

Do kadego dokumentu doczaj deklaracj uywaj CSS dla stylw Zaprzesta uywania niezalecanych elementw i atrybutw Komentarze HTML Dodawanie komentarzy jest proste po prostu

umie komentarz pomidzy znacznikami komentarza Znacznik nowej linii i spacji Przegldarka ignoruje spacje i przejcia do nowej linii aby je utworzy wpisujemy
Oznacza przejcie do nowej linii Np.: To jest przykadowy tekst,
ktry bdzie wywietlany na naszej stronie Znacznik   tworzy tzw. tward spacj czyli normalna spacj w programie typu

word Znacznik akapitu p Oznacza tzw. Akapit (paragraf), kolejne partie tekstu objte tymi znacznikami oddzielone s od siebie dodatkow linia pust np.:

to jest pierwszy akapit

to jest drugi akapit

Encje znaki specjalne Znaki specjalne wywietlaj specyficzne znaki zastrzeone przez przegldark np.:   - twarda spacja lub te

> > lub > < < lub < & & £ (funt) © (ochrona prawem autorskim) Proste formatowanie tekstu za pomoc HTML (niezalecane) Znaczniki: pogrubienie kursywa(teskt pochylony) podkrelenie przekrelenie

indeks grny indeks dolny czcionka powikszona czcionka pomniejszona Argumnety znacznikw Kady znacznik moe mie dodatkowe formy z dodatkowymi atrybutami (argumentami) Np.:

Akapit wyrwnany do rodka

Akapit wyrwnany do prawej strony

Znacznik hr pozioma linia aby wstawi pozioma lini uywamy znacznika


Dodatkowe atrybuty znacznika


to: align wyrwnanie linii width szerokoc linii size grubo linii color kolor linii np.


(cyfr szesnastkowych w zakresie od 1do 9 i od A do F) Kolor jest zapisywany wic trzema liczbami w zakresie od 0 do 255 (szesnastkowo od 00 do FF) Pierwsza liczba oznacza nasycenie kolorem czerwonym druga zielonym a trzecia niebieskim #000000 czarny #FF0000 czerwony #00FF00 zielony #0000FF niebieski #FFFFFF biay #FF00FF - fioletowy Nagowki h1 -h6

Nagwki su do oddzielania partii tekstu w pewien logiczny sposb. Su do tytuowania rozdziaw podrozdziaw itp.. W html mamy do dyspozycji 6 nagwkw

,

,

,

,

,

Znaczniki nie maj okrelonej wielkosci domylnie dla

jest to czcionka 18 Znaczniki h5 i h6 nie zmieniaj formatowania tekstu poniewa s mniejsze od domylnej czcionki 10px. Uwaga! wielko nagowkw w Joomla jest zdefiniowana zazwyczaj w pliku default.css i moe by rna w rnych szablonach

Czcionka (znacznik niezalecany) Znacznik , suy do zmiany: wielkoci czcionki font size (argumenty od 1 do 7) np. koloru czcionki font color np. kroju czcionki -font face np.. i

  • np: Czynnoci ktre musz wykona w tym tygodniu
    1. przeczyta ksik
    2. ic do kina
    3. spotka si z przyjacimi

    Hiperacza Jest to bardzo wane zagadnienie, gdy wanie dziki odnonikom moliwe jest

    czenie ze sob kilku dokumentw, tworzc w ten sposb wasny serwis internetowy. Poprzez odnoniki podrujemy rwnie po pajczynie stron www Typowy adres odnonika Onet Adresowanie bezporrednie

    O mnie Adresowanie porednie Odnoniki lokalne tytu ksiki wr do pocztku Kiedy czytelnik kliknie na odnocikui wr do pocztku przegldarka przesunie stron do miejsca zakotwiczenia start Rysunki i mapy Aby umieci rysunek na stronie wystarczy posuy si znacznikiem

    Znacznika tego nie zamykamy! Jego podstawowe argumenty to: src - cieka rdowa width szeroko (w pikselach) height wysoko (w pikselach) align wyrwnanie (do prawej do rodka do lewej border obramowanie rysunku alt- tekst alternatywny (zamiast obrazka) title - tytu obrazka (dla wyszukiwarki) cieki wzgldne i bezwzgldne

    cieka wzgldna Tabele

    Pozwalaj midzy innymi na zaprojektowanie ukadu strony Znaczniki potrzebne do zrobienia tabellki t:

    znacznik pocztku i koca tabeli

    znacznik rzdu

    znacznik komrki Dodatkowe argumenty zwizane z tabel Dla znacznika

    : border - grubo obramowania (w pikselach) align - wyrwnywanie

    width szeroko tabeli height- wysokoc tabeli np

    umoliwia tworzenie zaawansowanych stron internetowych opartch na ramkach CSS Gdy poznasz kaskadowe arkusze stylw, zdziwisz si jak ktokolwiek mg mie tyle cierpliwoci, aby bez nich tworzy due witryny. Pozwalaj zaoszczdzi mnstwo

    czasu, zapewniaj standard formatowania dla caej strony WWW lub zestawu stron. CSS Arkusz stylw CSS to lista dyrektyw (tzw. regu) ustalajcych w jaki sposb ma zosta wywietlana przez przegldark internetow zawarto wybranego elementu (lub elementw) (X)HTML lub XML. Mona w ten sposb opisa wszystkie pojcia odpowiedzialne za prezentacj elementw dokumentw internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstp

    midzywierszowy lub nawet pozycja danego elementu wzgldem innych elementw bd okna przegldarki. Wykorzystanie arkuszy stylw daje znacznie wiksze moliwoci pozycjonowania elementw na stronie, ni oferuje sam (X)HTML. Co to jest styl? Style to regua formatowania. Mona j zastosowa do: Pojedynczego znacznika Do wszystkich egzemplarzy danego znacznika w danym dokumencie Do wszystkich egzemplarzy w caym

    zestawie dokumentw CSS wprowadzenie Kod CSS mona umiesci w: 1. oddzielnym pliku z rozszerzeniem .css 2. w sekcji poszczeglnych stron. 3. mona te umieci styl bezposrednio w znacznikach Style zagniedone(inline) Np.:

    nagwek strony Zdefiniowalimy styl dla konkretnego egzemplarza znacznika

    . Jeli w dokumencie wystpiby kilka razy znacznik

    tylko w tym miejscu zostaby zastosowany okrelony przez nas styl. selektory Tworzc definicje stylw w naszym dokumencie tworzymy tzw. zbir regu. Kada

    tak regua skada si z selektora wskazujcego element ktry chcemy sformatowa i deklaracji, czyli opisu sposobu formatowania. Pojedyncza regua moe odnosi si do jednego elementu, ale moe rwnie dotyczy pewnego zbioru wyszczeglnionych znacznikw. Skadnia CSS Kada regua skada si z dwch czci. p {color: red;} na czerwono selektor Na niebiesko- deklaracja

    Selektor okrela elementy dokumentu, ktrcyh dana regua ma dotyczy. Deklaracja okrela sposb formatownia wyszeglnionych elementw Skadnia CSS cig dalszy p {color: green;} color- waciwo green- warto Deklaracje umieszczane s zawsze w nawiasach klamrowych i oddzielamy od selektora pojedyncz spacj. Kolejne waciwoci wewntrz deklaracji oddzielamy od siebie rednikiem.

    Kada waciwo powinna posiada pewn warto umieszczamy j po znaku dwukropka Grupowanie selektorw i deklaracji h1 {color: red;} h1 {color: red;}

    h1 {color: red;} h1 {color: red;} h1 {color: red;} h1 {color: red;} To samo moemy zapisa jako h1, h2, h3, h4, h5, h6 {color: red} Selektory klas i identyfikatora (przykad) Selektory klas

    przykadowy tekst

    przykadowy tekst

    Nasz ko HTML skada si z dwch akapitw. Pierwszy wyswietlany jest w sposb tradycyjny, natomiast drugi, poniewa ma zdefiniowan klas specjalny wywietlany jest w zdefiniowany przez nas sposb Selektory identyfikatora

    Z selektorw identyfikatora korzystamy niemale w identyczny sposb jak z selektorw klas. Ich budowa rni si od tych pierwszych znakiem # zamiast .. Natomiast wewntrz znacznikw odnosimy si do identyfikatorw atrybutem id zamiast class. Warto atrybutu id w kadym dokumencie powinna by unikalna (w praktyce nie jest to sprawdzane). Przykad uycia identyfikatora #podsumowanie {text align: center;}

    przykladowy tekst

    Pseudoklasy i pseudoelementy

    Pozwalaj na nadawanie stylw strukturom, ktrych w dokumencie w ogle nie musi by czy te nadawanie rnych stylw elementom w zalenoci od pewnych zdarze, stanu tych elementw czy te stanu samego dokumentu. Pseudoklasy rozpoznajemy po znaku dwukropka Rodzaje pseudoklas

    link- linki ktre nie s aktywne, ani nie byy jeszcze odwiedzane visited- linki odwiedzone active- linki aktualnie aktywne (kliknite) hover- linki wskazane a nie klikniete focus- formatowani linkw ktre staj si aktywne Text i czcionki- manipulowanie tekstem(przykad) text-align- umoliwia wyrwnywanie tekstw, podobnie jak atrybut align Moe przyj jedn z czterech wartoci:

    left- wyrwnanie do lewej strony right- wyrwnanie do prawej strony center- wyrwnanie do rodka strony justify- wyrwnanie do obu stron (rozcignicie wewntrz tekstu) text-indent Tworzy wcicia bloku tekstu(akapitu). Moemy wskaza wartoci bezgldne, wzgldne jak i procentowe.(zastepuje biay pixel) np.

    text-decoration text-decoration wykorzystywana jest niezwykle czsto. Pozwala na dekorowanie tekstu w rny sposb Ma 5 sw kluczowych - none brak dekoracji (przydatne podczas formatowania linkw) - underline podkrelenie dolne - overline podkrelenie grne

    - line-throught- przekrelenie - blink- tekst migajcy (trust me) Rodziny czcionek(przykad) Z czcionkami wie si pewnie problem. Na rnych komputerach pod rnymi systemami operacyjnymi wystpuj rne czcionki, a te same mog mie rne nazwy. Czciowo problem ten rozwizuje tzw. Rodziny

    gatunkowe, ktre wprowadza CSS Wyrniamy 5 rodzin czcionek Rodziny czcionek cig dalszy Wyrniamy 5 rodzin czcionek

    serif czcionki proporcjonalne np: Times sans-serif czcionki bez szeryfw(dekoracji) np. arial, verdana cursive- wygldem przypominaj pismo czowieka np. comic sans monospace nieproporcjonalne np. courier fantasy nieklasyfikowane d zadnej innej grupy font-size Dziki tej waciwoci moemy dowolnie wpywa na wielko uytej czcionki Dostpne s wielkoci bewzgldne, wzgldne, procentowe.

    np p {font-size: 12px} p {font-size: 12pt} p {font-size: 2cm} Dostpne sowa kluczowe: xx-small,x-small,small, medium, x-large, xx-large, smaller, larger, font-style font-style pozwala na okrelenie stylu czcionki czyli czy ma by normalna czy pochylona. Dostpne opcje to: oblique (dziaa jak italic na wikszoci

    czcionek) italic Normal np: p {font-style: italic} TO background-color background-color waciwo pozwala na definiowanie koloru ta okrelonego dokumentu. Oto przykady: p {background-color :red} background-image background-image pozwala na okrelenie

    obrazu ta czyli pewnego rysunku, ktry zostanie wykorzystany do rysowania podkadu pod danym elementem. Posugujemy si elementem url(uniform resource locator) Np. Body {backgroung-image: url(obrazek_tla.jpg);} (midzy url a ( nie moe by spacji) Pudeka i obramowanie

    Kady element umieszczony na stronie znajduje si tak naprawd wewntrz niewidocznego pudeka. Wymiary tego pudeka s domylnie ustawiane maksymalnie tj. tak jak pozwalana to pudeko rodzina czyli to w ktrym si ono znajduje. Kiedy wyrwnujemy akapit czy to do lewej strony czy do prawej zawsze chodzi o strony pudeka. Pozioma linia to take pudeko. Rysunek tabela komrka w tabeli to wszystko s prostoktne pudeka CSS pozawala na manipulowanie tymi elementami. Pozwala na okrelanie ich szerokoci i wysokoci, okrelanie wielkoci marginesw, dopenie a nawet manipulowanie sposobem obramowania.

    width Moliwo okrelania samodzielnie szerokoci pudeka, jako warto moemy nada dowolna liczb, warto procentow lub sowo kluczowe auto height Pozwala na okrelenie wysokoci pudeka. Domylnie wysoko ta jest zalena od

    wysokoci elementw, ktre si w nim znajduj. Marginesy Okrelaj wielko przerwy odstpu midzy pocztkiem pudeka a ramk elementu, ktry si w nim znajduje, Moemy mwi o marginesie lewym prawym, grnym i dolnym Odpowiednio polecenia margin-top margin-bottom, margin-left, margin-right

    Skrcony zapis marginesw margin: 20px 30px 40px 50px Odpowiednio grny lewy dolny i prawy margines Dopenienia Podobnie jak margines okrela wielkoc przestrzeni midzy pocztkiem pudeka a ramk, tak dopenienie okreslan wielko midzy ramk a wewntrznymi elementami danego pudeka

    Obramowania (przykad6) Border-style pozwala na okrelenie stylu wywietlania obramowania dostpnych mammy 11 styli: None, hidden, dashed, dotted, solid, double, groove, ridge, inset, outset Np.: p {border-style: double;} visibility Waciwo za pomoc ktrej momy wpywa na widoczno danego elementu.

    Mamy nastpujce wartoci: Visible- wwczas element zostanie wywietlony Lub hidden powoduje ukrycie danego elementu Np.: p {visibility: hidden} display Wasciwoc ta pozwala na okreslenie sposobu w jaki zostanie wywietlonuy dany element. Przyjmuje wartoci: Block element bdzie wywietlany w bloku

    Inline- element bdzie wywitlany w linii None- element nie bdzie wyswietlany Rnica miedzy hidden a visibility W przypadku visibility miejsce po ukrytym elemencie pozostaje puste, a w przypadku display wykorzystywane jest przez inne elementy Z-index

    Umozliwia nakadanie si elementw Dzieki wasciwoci z-index mamy moliwo okrellenia kolejnosci tego nakdania. Jako warto tej waciwoci podajemy liczb cakowit. Im liczba ta jest mniejsza, tym niej znajduje si dany element. Np.: p {z-index: 2;} (przykad z ksiaki)

    Rozszerzenia uyte podczas szkolenia Phoca gallery galeria zdj

    Akeeba Backup kopie zapasowe Xmap mapa strony pod SEO Google Gcalendar Dynamiczny kalendarz Kunena forum Forum internetowe Easy Embed Videos atwe dodawanie filmw z Youtube i itp.. Edytor JoomlaCK edytor stron HTML/CSS?JS/PHP Jumi- osadzanie kodu Javascript i PHP FlowPlayer Reloaded osadzanie filmw na stronie Phoca gallery

    Komponent oraz zestaw moduw i dodatkw umoliwiajcy publikacj galerii Umoliwia hotlinkowanie zdj z picassa i youtube a take tworzenie nieograniczonej iloci katalogw Podczas wywietlania wykorzystuje skrypty javascript jak lightbox czy hihgslide

    Jest to najpopularniejsza galeria do joomla dziaajca na wersji 1.5 jak i 1.6 Akeeba Backup Najpopularniejszy dodatek do joomla umoliwiajcy tworzenie kopii zapasowych Umoliwia szybkie tworzenie kopii w

    formacie zip a nastpnie zainstalowanie ich poprzez kreator na dowolnych hostingu take lokalnie Mona kopiowa sam baz danych lub tylko pliki z natywnej joomli Mona zdefiniowa transfer kopii na dowolny serwer X MAP Rozszerzenie tworzce XML-ow albo HTML-ow map witryny ktra jest

    nastpnie wykorzystywana przez roboty Google Gcalendar Kalendarz wywietlany na stronie w postaci moduu lub w artykule, podkrela zdefiniowane wczeniej wydarzenia Moliwo integracji z kalendarzem google

    Easy Embed Video Umoliwia proste linkowanie do youtube bez koniecznoci osadzania ramek iframe lub znacznikw object Edytory JCE i JCK Oba edytory s bardzo rozbudowane i

    umoliwiaj pisanie zaawansowanego kodu HTML i CSS Do przykadu zastosowany zostanie edytor JCK poniewa JCE jest niekompatybilny z pewnymi rozszerzeniami Jumi Jumi to zaawansowany edytor umoliwiajcy osadzanie kodu php javascript apletw java na stronie internetowej Podstawowa skadnia to {jumi [images/codes/js.js]}

    {jumi [images/codes/fb.txt]} Strony pomocne w nauce joomla Joomla.pl

    Joomla.org (j. Ang) wiki.joomla.pl/ docs.joomla.org help.joomla.org forum.joomla.pl joomlapl.com/ DZIKUJ ZA UWAG W razie potrzeby prosz pisa na adres [email protected] Marek Woniak tworzenie stron www

    Recently Viewed Presentations

    • Presentación de PowerPoint

      Presentación de PowerPoint

      MAN THE TOOL MAKER? "We must now redefine man, redefine tool, or accept chimpanzees as human!" Louis Leakey. ... Jojo'sgentlytouching a finger to Jane'swrist, therattling of cages, theviolentsway of bodiesbeatingthebars, Jane'stears and Jim'swords.
    • Of Mice and Men Review

      Of Mice and Men Review

      What is the name of the town at which George and Lennie arrive at the beginning of the book? a. Soledad. b. Salinas. c. Solitude. d. San Diego
    • CS211 - Cornell University

      CS211 - Cornell University

      OLH155: netids starting aa to dh. ... by representing sentences in the language as trees: Abstract Syntax Trees (ASTs) ASTs are easier to optimize, generate code from, etc. than textual representation. A parser converts textual representations to AST.
    • Introducing Unit 3

      Introducing Unit 3

      Unpacking Embedded Assessment #1 Unit 3 Changing Perspectives. Embedded Assessment 1: Researching and Debating a Controversy. Provide evidence of research (gathering evidence, forming questions, refocusing inquiry, and evaluating sources).
    • 1 Copyright  2011, Oracle and/or its affiliates. All

      1 Copyright 2011, Oracle and/or its affiliates. All

      Oracle Online Training Materials - Usage Agreement. Use of the information, documents and online training courses (collectively, "Materials") found on this area of the Site constitutes agreement with the following terms and conditions (as well as those set forth in...
    • 1 Corinthians - an introduction

      1 Corinthians - an introduction

      After Paul & Apollos, false teachers (the 'super-apostles') caused problems in the church. False apostles (2 Cor. 11:13), working for personal gain. Taught false doctrine - a 'different gospel' (2 Cor. 11:3-4) Sought to discredit Paul's ministry in order to...
    • Literary and Rhetorical Terms - Thomas County School District

      Literary and Rhetorical Terms - Thomas County School District

      Implied metaphor does not state explicitly the two terms of the comparison "I like to see it lap the miles" is an implied metaphor in which the verb lap implies a comparison between "it" and some animal that "laps" up...
    • Overview of Infrastructure Trials

      Overview of Infrastructure Trials

      Purpose of an Infrastructure Trial: An opportunity for districts, schools, and students to prepare for the computer-based tests by simulating test day network utilization. It is recommended that any schools conducting computer-based tests administer an infrastructure trial, especially schools who...