instalacja XAMPP i silnika JOOMLA prezentacja ze szkolenia
advertisement
TWORZNIE STRON INTERNETOWYCH OPARTYCH O CMS JOOMLA JOOMLA Joomla! - rozprowadzany na zasadach wolnego oprogramowania system zarządzania treścią napisany w języku PHP, wykorzystujący bazę danych MySQL. Joomla! jest pochodną systemu Mambo. CMS System zarządzania treścią (ang. Content Management System, CMS) jest to aplikacja internetowa lub ich zestaw, pozwalająca na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i rozbudowę przez redakcyjny personel nietechniczny. Kształtowanie treści i sposobu ich prezentacji w serwisie zarządzanym przez CMS odbywa się za pomocą prostych w obsłudze interfejsów użytkownika, zazwyczaj w postaci stron WWW zawierających rozbudowane formularze i moduły. Języki 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 używania Joomla lokalnie na komputerze XAMPP- program działający w środowisku MAC Windows Linux zawierający pakiety PHP Mysql PHPMyAdmin i Apache Dowolna przeglądarka internetowa INSTALACJA PROGRAMU XAMPP XAMPP jest darmowym wieloplatformowym pakietem, składającym się głównie z serwera Apache, bazy danych MySQL i interpreterów dla skryptów 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 obsługi dynamicznych stron. Obecnie XAMPP jest dostępny na cztery platformy: Microsoft Windows, Linux, Sun Solaris oraz Mac OS X. Joomla w internecie Potrzebny hosting z php i mysql (czyli udostępnianie części zasobów komputera, który jest stale 24h na dobę podłączony do internetu i możliwy do zarządzania przez użytkownika np. poprzez przeglądarkę internetową np. 1and1.pl, nazwa.pl, home.pl, cba.pl Zmiany w Joomla 1.6 Najważniejsze funkcje w Joomla 1.6 -System kontroli dostępu - daje administratorom witryny i redaktorom możliwość określania, kto może oglądać i zarządzać treścią. -Nieograniczony model zagnieżdżania - umożliwia administratorom oraz twórcom treści definiowanie wielopoziomowych kategorii o dowolnie zagnieżdżonej strukturze. -Prosta aktualizacja rozszerzeń - dostarcza użytkownikowi lepszego sposobu utrzymania bezpieczeństwa witryny przez uproszczony proces aktualizacji rozszerzeń -Szablony zgodne z semantyką XHTML - zapewnia lepszą podstawę do prezentacji treści -Wielojęzyczność - pozwala w podstawowy sposób na stworzenie witryny wielojęzycznej. Instalowanie Joomla na hostingu CBA.PL 1. Wchodzimy na stronę cba.pl i klikamy „Zarejestruj” 2. Wpisujemy pożądaną nazwę subdomeny na domenie cba.pl np. twain83.cba.pl 3. podajemy wszystkie potrzebne informacje jak hasło (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ą wcześniej podanego loginu i hasła 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 hasło podane przy rejestracji (można zmienić hasło w panelu administracyjnym) 9. wchodzimy na stronę http://joomlacode.org/gf/project/joomla/frs/?action=FrsReleaseBrowse i pobieramy wersję 1.6.5 o nazwie „Joomla_1.6.5-StableFull_Package.zip” &frs_package_id=5969 Instalacja Joomla na hostingu cba.pl cd. 10. Rozpakowujemy (wyodrębnij wszystkie) pliki Joomla 11. Usuwamy na serwerze plik index.html 12.Wrzucamy pliki Joomla na serwer poprzez Filezilla bezpośrednio na do głównego katalogu (zajmie to około 15 minut) 12. Tworzymy bazę MySQL w panelu administracyjnym będzie potrzebna do instalacji 13. Wpisujemy do przeglądarki adres naszej strony np. twain83.cba.pl (twain83 to nazwa naszej subdomeny) i przystępujemy do instalacji Instalacja Joomla na hostingu cba.pl cd. 14. Wybieramy wersję językową i klikamy dalej 15. Sprawdzanie wersji środowiska klikamy dalej :) 16. Akceptujemy licencję i klikamy dalej :) 17.Konfugurujemy połączenie z bazą danych w polu nazwa bazy danych podajemy mysql.cba.pl podajemy nazwę użytkownika nt twain83 w polu nazwa bazy danych np.. twain83_cba_pl i podajemy nasze hasło do bazy danych i klikamy dalej 18. Konfiguracja ftp klikamy dalej 19. Konfiguracja główna wpisujemy nazwę wirtyny login superadministratora i jego hasło podajemy adres mail 20. Ważne! Klikamy załaduj przykładowe dane in klikamy daje Instalacja joomla cd.. 21.Usuwamy katalog instalacyjny i klikamy „Zaplecze” 22. Podajemy wcześniej zapisany login i hasło i gotowe 23. Jesteśmy już w panelu administracyjnym witryny klikając „View site” widzimy naszą stronę internetową możemy zobaczyc naszą stronę również pod adresem nasza_subdonema.cba.pl 24. Na koniec warto też zainstalować polską wersję językową KONIEC Pierwsze spojrzenie na panel administracyjny Panel administracyjny jest zawsze dostępny pod adresem http://moja_domena/administrator/ Instalujemy spolszczenie panelu administracyjnego: Pobieramy plik ze strony http://www.joomla.pl/index.php/pobierz-joomla.html (pakiet językowy do Joomla 1.6.5) Wchodzimy w zakładkę Extensions ->extensions manager Klikamy obok Upload Package File i szukamy na dysku wczesniej pobranego spolszczenia i klikamy Upload and Install Przechodzimy do zakładki 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ć wyświetlany po polsku Profil użytkownika Możemy zmienić swoją nazwę użytkownika opis użytkownika hasło używany edytor serwis pomocy strefę czasową itp Konfiguracja globalna Możemy zmienić nazwę naszej witryny (odpowiednik title w html) Możemy zamknąć ją przed nieuprawnionymi użytkownikami na czas prac i poinformować o tym odpowiednim komunikatem Możemy zmienić domyślny edytor (można to zmienić też na poziomie użytkownika) Możemy wybrać ile pozycji będzie się standardowo pojawiać podczas administracji Wpisujemy dane potrzebne do SEO czyli wypozycjonowania strony przez wyszukiwarkę Google czyli opis witryny i słowa kluczowe (im mniej słów kluczowych tym są bardziej ważne dla wyszukiwarki) Możemy też wybrać czy tytuły 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 zmnieniały jego nazwę na .htaccess Możemy też zmienić adresy z /adres/ na adres.html zaznaczając adresy z przyrostkiem Konfiguracja globalna system Możemy włączyć cachowanie strony w celu odciążenia serwera wtedy serwer zapisuje kopie stron w postaci html które przechowuje udostępniając uzytkownikom. Analiza systemu i analiza języka pomocne dla zaawansowanych administratorów przy sprawdzaniu błędów MySQl i PHP Konfiguracja globalna Serwer Możemy edytować plik configuration.php przez podanie nazwy hosta nazwy użytkownika nazwy bazy danych i hasła i przedrostka tabel Możemy też włączyć serwer ftp oraz skonfigurować serwer pocztowy Konfiguracja globalna Uprawnienia Możemy zdecydować jakie uprawnienia dostaną poszczególni użytkownicy Istnieją poszczególne role różnych użytkowników. Standardowo podczas instalacji tworzony jest użytkownik superadministrator którego „może wszystko”, w miarę prac nad witryną można utworzyć innych użytkowników z innymi uprawnieniami, można też dynamicznie przydzielać użytkownikom ich uprawniania niezależnie od ustawień globalnych Możemy też utworzyć grupę użytkowników i dla wszystkich osób w grupie zdefiniować uprawnienia Witryna → Konserwacja Jeżeli zaznaczyliśmy opcję cachowania witryny możemy wyczyścić plik cache a także usunąć przestarzałe pliki Witryna informacja o systemie Informacje dla zaawansowanych administratorów mniędzy innymi werjsa Joomla nazwa serwera wersja PHP i MySQL itp.. Użytkownicy → utwórz konto użytkownika Tworzy konto użytkownika z określonymi uprawnianiami Utwórz grupę użytkowników – tworzy grupę użytkowników z określonymi uprawnieniami Korespondencja -umożliwia wysłanie wiadomości do poszczególnych grup użytkowników Menu Każda pojedyncza strona lub zbiór stron internetowych aby być widoczna musi być przypisana do jakiegoś menu Istnieje co najmniej jedno menu podstawowe którego nie można usunąć Menu to moduł umieszczony wewnątrz templatki (szablonu) Można przypisać kilka menu to tego samego miejsca w templatce Menu można wyłaczyć poprzed wyłaczenie modułu Najważniejsze rodzaje menu Pojedynczy artykuł – odpowiednik statycznej strony HTML (najczęściej używany) Kategoria przegląd artykułów- wyświetla linki do oszczególnych artykułów Kategoria lista artuykułów – Lista artykułów w tabelce Kategoria lista kategorii Lista kanałów informacyjnych kanały RSS Pojedynczy kanał RSS Zakładki Lista zakładek Artykuły Archiwalne Logowanie Profil użytkownika WPINACZ- Wrzuca ramke iframe na podany adres http:// Pojedynczy artykuł Alias – adres strony np. wpisując adres http://joomla/adres.html Status: opublikowano- link będzie widoczny Dostęp: Publiczny – widowczny dla wszystkich Registered- dla zarejestrowanych użytkowników Special- dostęp ograniczony specjalny: kategoria i umieszczone w niej artykuły będą dostępne tylko dla zalogowanych użytkowników z uprawnieniami specjalnymi - autorów, redaktorów, wydawców, operatorów i administratorów. Autorzy będą mogli edytować swoje artykuły, redaktorzy wszystkie artykuły, a wydawcy redagować wszystkie artykuły i decydować o ich publikacji Pojedynczy artykuł cd. Pokaz w menu- wybieramy menu w jakim ma być dany link Pozycja macierzysta kolejność w którym ma być opublikowany dany link Otwórz w: opcje jak ma się wyświetlać dany link Strona domyślna otwiera się domyślnie po wpisaniu adresu naszej domeny np. po otwarciu twain83.cba.pl (musi być przypięta do menu domyślnego) Styl szablonu- domyślny szablon jaki ma zostać użyty do wyświetlania strony Wybierz artykuł: wybieramy wcześniej utworzony artykuł Opcje artykułu: jeżeli wcześniej tego nie zdefiniowaliśmy ogólnie to wybieramy ustawienia dla konkretnego artykułu albo definiujemy zgodnie z ogólnymi ustawieniami dla wszystkich artykułów 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 domyślnie włączona Pojedynczy artykul opcje wyglądu strony Tytuł strony dla przeglądarki-opcja seo Pokaż nagłówek strony- opcja seo Nagłówek strony-można zdefiniować własny nagłówek Klasa CSS strony-page class suffix definiowanie własnej klasy css w templatce Opcje metadanych i przypisane moduły Opis streszczenie – definiowanie opisu pod SEO Słowa kluczowe- pod SEO Wyszukiwarki – definiowanie co mają indeksować wyszukiwarki Możliwość zdefiniowania przypisanych modułów które mają być wyświetlane razem z linkiem Artykuły Wyszukiwanie artykułów według kategorii Wyszukiwanie artykułów wyróżnionych Utwórz artykuł- tworzy artykuł, który następnie trzeba przypisać do menu Dostosuj- edycja wybranego artykułu Opublikuj/Wycofaj- zmiana widoczności artykułu na stronie Archiwizuj- przenosi artykuły do archiwum Odblokuj – odblokowuje artykuły stworzone przez redaktorów przez osoby do tego uprawnione Filtrowanie i sortowanie artykułów Kosz – przeniesienie artykułów do kosza (dopiero w koszu można je definitywnie usunąć) Opcje artykułów Filtrowanie tekstu Czarna lista- lista zabronionych tagów np.. iframe jest standardowo zablokowane Biała lista- lista dozwolonych tagów Bez HTML -usuwa wszystkie znaczniki HTML Nie filtruj- umożliwia osadzanie wszystkich znaczników HTML ale nie PHP i Javascript do tego wymagany jest plugin np. Jumi Rozszerzenia joomla Istnieją trzy podstawowe rodzaje rozszerzeń do Joomla są to moduły, komponenty i dodatki (components, modules, plugins). Komponent – instaluje się jako menu w panelu administracyjnym Instaluje się w jako element strony głównej Plugin jest najczęściej osadzany w artykule strony Komponenty wbudowane Doniesienia: kategorie i kanały RSS Kontakty: krótki opis podobny do komponetu sobi2 Można je porządkować w kategorie Powiadomienia: umożliwia wysyłanie użytkownikom wiadomości które są odczytywane po zalogowaniu danego użytkownika Przekierowania: umożliwiają przekierowania ze starych nieużywanych adresów na nowe np. adres twain83.cba.pl/index.php wpisujemy index.php Reklamy – umożliwia publikowanie banerów reklamowych i zliczanie kliknięć a także losowe ich wyświetlanie oraz definiowanie specyficzne dla danego użytkownika można śledzić kliknięcia i potem wyeksportować to do pliku CVS i otworzyć np. w excelu czy w notatniku. Komponenty wbudowane Statystyki wyszukiwania: najpierw trzeba zbierać statystyki następnie można wyniki wyszukiwania wyświetlić Zakładki: linki do innych stron wraz z opisem które można wyświetlać łącznie wszystkie w danej kategorii Roszerzenia-> moduły wbudowane Menu – tworzenie standardowego menu do którego można przypisywać linki Własny HTML – możliwość osadzenia w kodzie dowolnego kodu HTML Moduł Ścieżka powrotu – umożliwia nawigację na stronie Wpinacz – wrzuca za pomocą ramki iframe inną stronę lokalną bądź zdalną Szukaj – prosta wyszukiwarka Dodatki (plugins) Dodatki nieaktywne standardowo: Geshi – code highlighter – podświetlacz kodu Filtr języków dodatek filtruje wyświetlanie treści w zależności od języka, dodatek ma być włączony tylko wtedy, gdy opublikowany jest moduł Przełącznik języka. Pamięć podręczna – umożliwia cachowanie stron w celu zmniejszenia obciążenia serwera i ich szybszego wyświetlania Użytkownik profil – umożliwia zmuszenie użytkownika do podania większej ilości danych o osobie (w praktyce można wpisywać dowolne dane) Szablony Poprzez szablony możemy zarządzać zainstalowanymi templatkami z katalogu joomla/templates można przypisywać poszczególne templatki do konkretnych pozycji menu Opcja edycji kodu templatki z pozycji menu została wycofana w wersji 1.6, nie ma też możliwości podejrzenia dostępnych punktów zaczepienia w szablonie graficznych Artykuł edycja Podstawową treścią strony internetowej na bazie joomla są zazwyczaj artykuły Artykuły można edytować poprzez edytor tekstu JCE JCK TinyMCE CodeMirror lub też bez edytora bezpośrednio w kodzie witryny. Można też przełączać edytor w tryb wyświetlania kodu. Edytory generują kod HTML i Kaskadowych Arkuszy Stylów CSS Kod generowany przez edytory może zawierać blędy ponadto mogą występować niezgodności między poszczególnymi przeglądarkami oraz struktura strony może nie być w pełni prawidłowa dlatego potrzeba jest znajomość HTML/CSS. HTML HTML czyli język znaczników hipertekstowych przy jego pomocy pisze się strony internetowe czyli dokumenty, które następnie można przeglądać i czytać za pomocą tzn. przeglądarki internetowej. HTML cd. Język HTML jest prosty w nauce, składa się z niewielkiej ilości słów tzn. tagów, znaczników za pomocą których można dowolnie manipulować grafiką i tekstem na stronie. Znaczniki Język HTML składa się ze znaczników (tagów). Każdy znacznik ma określone znaczenie. Przeglądarka po napotkaniu na znacznik odpowiednio go interpretuje. Wszystkie znaczniki objęte są nawiasami trójkątnymi. Przekładowe znaczniki <html> <head> <body> <br> Znaczniki cd. Większość znaczników otwiera się i zamyka, obejmując jakąś partię tekstu. Zamknięcie znacznika polega na umieszczeniu przez jego nazwą, ale po otwierającym nawiasie trójkątnym slasha. Oto przykład </html> <b> Ten tekst będzie pogrubiony</b> Zagnieżdżanie znaczników Znaczniki można w sobie zagnieżdżać np. <b> to jest pogrubione <u> a to jeszcze pokreślone </u> </b> <p> Lub pierwsza <br/> linia druga linia </p> Narzędzia webmastera By tworzyć strony internetowe wystarczy windowsowy notatnik, oczywiście istnieją specjalne programy, które ten proces znacznie ułatwiają. Podczas naszych warsztatów używać będziemy programu bluefish. Sposób w jaki przeglądarka analizuje tekst Przeglądarka analizuje kod od lewej do prawej i od góry do dołu, dlatego nie ma znaczenia czy cała strona utworzona jest w jednej linijce czy każde słowo będzie w osobnej linii. Podczas analizy przeglądarka wyłapuje każdy znacznik i nie wyświetla go na stronie, zamiast tego sprawdza jakie każdy znacznik ma znaczenie i odpowiednio konfiguruje sposób wyświetlania danych. XHTML następca HTML Na co należy zwrócić uwagę: 1. Zawsze dołaczaj znaczniki zamykające Np. <p> tekst </p> 2. Puste elementy muszą zawierać zamykający ukośnik np.: <br/> 3. Zawsze dołączaj do atrybutu jego wartość Umieszczaj wszystkie atrybuty w znakach cudzysłowia XHTML cd. Zapisuj kod małymi literami Pamiętaj aby twoje znaczniki były poprawnie zagnieżdżone Np. <h1><b>tekst</b></h1> Do każdego dokumentu dołączaj deklarację <!DOCTYPE> używaj CSS dla stylów Zaprzestań używania niezalecanych elementów i atrybutów Komentarze HTML Dodawanie komentarzy jest proste po prostu umieść komentarz pomiędzy znacznikami komentarza <!-- tutaj dodaj swój komentarz -> Znacznik nowej linii i spacji Przeglądarka ignoruje spacje i przejścia do nowej linii aby je utworzyć wpisujemy <br/> Oznacza przejście do nowej linii Np.: To jest przykładowy tekst, <br/> który będzie wyświetlany na naszej stronie Znacznik &nbsp tworzy tzw. twardą spację czyli normalna spację w programie typu word Znacznik akapitu p Oznacza tzw. Akapit (paragraf), kolejne partie tekstu objęte tymi znacznikami oddzielone są od siebie dodatkową linia pustą np.: <p> to jest pierwszy akapit </p> <p> to jest drugi akapit </p> Encje znaki specjalne Znaki specjalne wyświetlają specyficzne znaki zastrzeżone przez przeglądarkę np.: &nbsp - twarda spacja lub też &#32 &gt „>” lub &#62 &lt „<” lub &#60 &amp „&” &pound (funt) &copy (ochrona prawem autorskim) Proste formatowanie tekstu za pomocą HTML (niezalecane) Znaczniki: <b> </b> pogrubienie <i> </i> kursywa(teskt pochylony) <u> </u> podkreślenie <strike> </strike> przekreślenie <sup> <strike> indeks górny <sub> </sub> indeks dolny <big> </big> czcionka powiększona <small> </small> czcionka pomniejszona Argumnety znaczników Każdy znacznik może mieć dodatkowe formy z dodatkowymi atrybutami (argumentami) Np.: <p align=“center”> Akapit wyrównany do środka </p> <p align=“right”>Akapit wyrównany do prawej strony </p> Znacznik hr pozioma linia aby wstawić pozioma linię używamy znacznika <hr/> Dodatkowe atrybuty znacznika <hr/> to: align – wyrównanie linii width – szerokośc linii size – grubość linii color – kolor linii np. <hr align=”right” width=”50%” color=‘’blue” Kolory w internecie (html,css,javascript) Rozpoczyna się znakiem ”#”po którym następuje 6 znaków (cyfr szesnastkowych w zakresie od 1do 9 i od A do F) Kolor jest zapisywany więc 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 –biały #FF00FF - fioletowy Nagłowki h1 -h6 Nagłówki służą do oddzielania partii tekstu w pewien logiczny sposób. Służą do tytułowania rozdziałów podrozdziałów itp.. W html mamy do dyspozycji 6 nagłówków <h1>, <h2>, <h3>, <h4>,<h5>, <h6> Znaczniki nie mają określonej wielkosci domyślnie dla <h1> jest to czcionka 18 Znaczniki h5 i h6 nie zmieniają formatowania tekstu ponieważ są mniejsze od domyślnej czcionki 10px. Uwaga! wielkość nagłowków w Joomla jest zdefiniowana zazwyczaj w pliku default.css i może być różna w różnych szablonach Czcionka (znacznik niezalecany) Znacznik <font>,</font> służy do zmiany: wielkości czcionki font size (argumenty od 1 do 7) np. <font size=”4”> koloru czcionki font color np. <font color =”blue”> kroju czcionki -font face np.. <font face=‘’arial” Listy punktowane i numerowane Do stworzenia list punktowanych wykorzystamy dwa znaczniki <ol> i <li> np: Czynności które muszę wykonać w tym tygodniu <ol> <li> przeczytać książkę <li> iśc do kina <li> spotkać się z przyjaciółmi </ol> Hiperłacza Jest to bardzo ważne zagadnienie, gdyż właśnie dzięki odnośnikom możliwe jest łączenie ze sobą kilku dokumentów, tworząc w ten sposób własny serwis internetowy. Poprzez odnośniki podróżujemy również po pajęczynie stron www Typowy adres odnośnika • • • • <a href=”http://www.onet.pl”> Onet </a> Adresowanie bezporśrednie <a href=”omnie.html”> O mnie </a> Adresowanie pośrednie Odnośniki lokalne • <a name=’’start”>tytuł książki </a> • <a href=‘#start”>wróć do początku </a> Kiedy czytelnik kliknie na odnościkui wróć do początku przeglądarka przesunie stronę do miejsca zakotwiczenia ’’start” Rysunki i mapy Aby umieścić rysunek na stronie wystarczy posłużyć się znacznikiem <img/> Znacznika tego nie zamykamy! Jego podstawowe argumenty to: src - ścieżka źródłowa width – szerokość (w pikselach) height – wysokość (w pikselach) align – wyrównanie (do prawej do środka do lewej border – obramowanie rysunku alt- tekst alternatywny (zamiast obrazka) title - tytuł obrazka (dla wyszukiwarki) Ścieżki względne i bezwzględne <img src=’’rysunek.jpg /> ścieżka względna <img scr=’’http://wrkzoch.pl/rysunek.jpg Ścieżka bezwzględna Rysunki jako odnośniki Rysunki jako odnośniki przydają się często Tworząc na stronach graficzne menu • Np.: • <a href=”onet.pl”> <img src=”obrazek.jpg”> </a> Tabele Pozwalają między innymi na zaprojektowanie układu strony Znaczniki potrzebne do zrobienia tabellki t: • <table> znacznik początku i końca tabeli • <tr> znacznik rzędu • <td> znacznik komórki Dodatkowe argumenty związane z tabelą Dla znacznika <table>: • border - grubość obramowania (w pikselach) • align - wyrównywanie • width – szerokość tabeli • height- wysokośc tabeli np<table border=”0”> umożliwia tworzenie zaawansowanych stron internetowych opartch na ramkach CSS Gdy poznasz kaskadowe arkusze stylów, zdziwisz się jak ktokolwiek mógł mieć tyle cierpliwości, aby bez nich tworzyć duże witryny. Pozwalają zaoszczędzić mnóstwo czasu, zapewniają standard formatowania dla całej strony WWW lub zestawu stron. CSS Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML. Co to jest styl? • Style to reguła formatowania. Można ją zastosować do: Pojedynczego znacznika Do wszystkich egzemplarzy danego znacznika w danym dokumencie Do wszystkich egzemplarzy w całym zestawie dokumentów CSS wprowadzenie • 1. 2. 3. Kod CSS można umiescić w: oddzielnym pliku z rozszerzeniem .css w sekcji <head> poszczególnych stron. można też umieścić styl bezposrednio w znacznikach Style zagnieżdżone(inline) Np.: <h1 style=’’text-align: center;”>nagłówek strony</h1> Zdefiniowaliśmy styl dla konkretnego egzemplarza znacznika <h1>. Jeśli w dokumencie wystąpiłby kilka razy znacznik <h1> tylko w tym miejscu zostałby zastosowany określony przez nas styl. selektory Tworząc definicje stylów w naszym dokumencie tworzymy tzw. zbiór reguł. Każda tak reguła składa się z selektora wskazującego element który chcemy sformatować i deklaracji, czyli opisu sposobu formatowania. Pojedyncza reguła może odnosić się do jednego elementu, ale może również dotyczyć pewnego zbioru wyszczególnionych znaczników. Składnia CSS Każda reguła składa się z dwóch części. p {color: red;} na czerwono – selektor Na niebiesko- deklaracja Selektor określa elementy dokumentu, którcyh dana reguła ma dotyczyć. Deklaracja określa sposób formatownia wyszególnionych elementów Składnia CSS ciąg dalszy • p {color: green;} color- właściwość green- wartość Deklaracje umieszczane są zawsze w nawiasach klamrowych i oddzielamy od selektora pojedynczą spacją. Kolejne właściwości wewnątrz deklaracji oddzielamy od siebie średnikiem. Każda właściwość powinna posiadać pewną wartość umieszczamy ją po znaku dwukropka Grupowanie selektorów i deklaracji • • • • • • h1 {color: red;} h1 {color: red;} h1 {color: red;} h1 {color: red;} h1 {color: red;} h1 {color: red;} To samo możemy zapisać jako h1, h2, h3, h4, h5, h6 {color: red} Selektory klas i identyfikatora (przykład) Selektory klas • <style type=’’text/css”> • p.specjalny {text-align: center;} • </style> • <p> przykładowy tekst </p> • <p class=’’specjalny”> przykładowy tekst </p> Nasz ko HTML składa się z dwóch akapitów. Pierwszy wyswietlany jest w sposób tradycyjny, natomiast drugi, ponieważ ma zdefiniowaną klasę ’’specjalny” wyświetlany jest w zdefiniowany przez nas sposób • Selektory identyfikatora Z selektorów identyfikatora korzystamy niemalże w identyczny sposób jak z selektorów klas. Ich budowa różni się od tych pierwszych znakiem „#” zamiast „.”. Natomiast wewnątrz znaczników odnosimy się do identyfikatorów atrybutem id zamiast class. Wartość atrybutu id w każdym dokumencie powinna być unikalna (w praktyce nie jest to sprawdzane). Przykład użycia identyfikatora #podsumowanie {text align: center;} <p id=’’podsumowanie”> przykladowy tekst </p> Pseudoklasy i pseudoelementy Pozwalają na nadawanie stylów strukturom, których w dokumencie w ogóle nie musi być czy też nadawanie różnych stylów elementom w zależności od pewnych zdarzeń, stanu tych elementów czy też stanu samego dokumentu. Pseudoklasy rozpoznajemy po znaku dwukropka Rodzaje pseudoklas • link- linki które nie są aktywne, ani nie były jeszcze odwiedzane • visited- linki odwiedzone • active- linki aktualnie aktywne (kliknięte) • hover- linki wskazane a nie klikniete • focus- formatowani linków które stają się aktywne Text i czcionki- manipulowanie tekstem(przykład) text-align- umożliwia wyrównywanie tekstów, podobnie jak atrybut align Może przyjąć jedną z czterech wartości: • left- wyrównanie do lewej strony • right- wyrównanie do prawej strony • center- wyrównanie do środka strony • justify- wyrównanie do obu stron (rozciągnięcie wewnątrz tekstu) text-indent Tworzy wcięcia bloku tekstu(akapitu). Możemy wskazać wartości bezględne, względne jak i procentowe.(zastepuje biały pixel) np. • <style type=„text/css> p{text-indent: 2em;} <p>przykladowy blok tesktu przykladowy blok tesktu przykladowy blok tesktu </p> </style> text-decoration • text-decoration wykorzystywana jest niezwykle często. Pozwala na dekorowanie tekstu w różny sposób Ma 5 słów kluczowych - none – brak dekoracji (przydatne podczas formatowania linków) - underline – podkreślenie dolne - overline – podkreślenie górne - line-throught- przekreślenie - blink- tekst migający (trust me) Rodziny czcionek(przykład) Z czcionkami wiąże się pewnie problem. Na różnych komputerach pod różnymi systemami operacyjnymi występują różne czcionki, a te same mogą mieć różne nazwy. Częściowo problem ten rozwiązuje tzw. Rodziny gatunkowe, które wprowadza CSS Wyróżniamy 5 rodzin czcionek Rodziny czcionek ciąg dalszy • • • • • Wyróżniamy 5 rodzin czcionek serif – czcionki proporcjonalne np: Times sans-serif – czcionki bez szeryfów(dekoracji) np. arial, verdana cursive- wyglądem przypominają pismo człowieka np. comic sans monospace – nieproporcjonalne np. courier fantasy –nieklasyfikowane d zadnej innej grupy font-size Dzięki tej właściwości możemy dowolnie wpływać na wielkość użytej czcionki Dostępne są wielkości bewzględne, względne, procentowe. np p {font-size: 12px} • p {font-size: 12pt} • p {font-size: 2cm} Dostępne słowa kluczowe: • xx-small,x-small,small, medium, x-large, xx-large, smaller, larger, font-style font-style pozwala na określenie stylu czcionki czyli czy ma być normalna czy pochylona. Dostępne opcje to: • oblique (działa jak italic na większości czcionek) • italic • Normal • np: p {font-style: italic} TŁO background-color • background-color – właściwość pozwala na definiowanie koloru tła określonego dokumentu. Oto przykłady: • p {background-color :red} background-image • background-image – pozwala na określenie obrazu tła czyli pewnego rysunku, który zostanie wykorzystany do rysowania podkładu pod danym elementem. Posługujemy się elementem url(uniform resource locator) Np. Body {backgroung-image: url(obrazek_tla.jpg);} (między url a ( nie może być spacji) Pudełka i obramowanie Każdy element umieszczony na stronie znajduje się tak naprawdę wewnątrz niewidocznego pudełka. Wymiary tego pudełka są domyślnie ustawiane maksymalnie tj. tak jak pozwalana to pudełko rodzina czyli to w którym się ono znajduje. Kiedy wyrównujemy akapit czy to do lewej strony czy do prawej zawsze chodzi o strony pudełka. Pozioma linia to także pudełko. Rysunek tabela komórka w tabeli to wszystko są prostokątne pudełka CSS pozawala na manipulowanie tymi elementami. Pozwala na określanie ich szerokości i wysokości, określanie wielkości marginesów, dopełnień a nawet manipulowanie sposobem obramowania. width Możliwość określania samodzielnie szerokości pudełka, jako wartość możemy nadać dowolna liczbę, wartość procentową lub słowo kluczowe auto height Pozwala na określenie wysokości pudełka. Domyślnie wysokość ta jest zależna od wysokości elementów, które się w nim znajdują. Marginesy Określają wielkość przerwy odstępu między początkiem pudełka a ramką elementu, który się w nim znajduje, Możemy mówić o marginesie lewym prawym, górnym i dolnym Odpowiednio polecenia margin-top margin-bottom, margin-left, margin-right Skrócony zapis marginesów • margin: 20px 30px 40px 50px Odpowiednio górny lewy dolny i prawy margines Dopełnienia Podobnie jak margines określa wielkośc przestrzeni między początkiem pudełka a ramką, tak dopełnienie okreslan wielkość między ramką a wewnętrznymi elementami danego pudełka Obramowania (przykład6) • Border-style pozwala na określenie stylu wyświetlania obramowania dostępnych mammy 11 styli: • None, hidden, dashed, dotted, solid, double, groove, ridge, inset, outset • Np.: p {border-style: double;} visibility Właściwość za pomocą której możmy wpływać na widoczność danego elementu. Mamy następujące wartości: • Visible- wówczas element zostanie wyświetlony Lub hidden – powoduje ukrycie danego elementu Np.: p {visibility: hidden} display Własciwośc ta pozwala na okreslenie sposobu w jaki zostanie wyświetlonuy dany element. Przyjmuje wartości: • Block – element będzie wyświetlany w bloku • Inline- element będzie wyświtlany w linii • None- element nie będzie wyswietlany Różnica 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 nakładanie się elementów Dzieki włałsciwości z-index mamy możliwość okrelślenia kolejnosci tego nakłdania. Jako wartość tej właściwości podajemy liczbę całkowitą. Im liczba ta jest mniejsza, tym niżej znajduje się dany element. Np.: p {z-index: 2;} (przykład z ksiażki) Rozszerzenia użyte 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 filmów z Youtube i itp.. Edytor JoomlaCK edytor stron HTML/CSS?JS/PHP Jumi- osadzanie kodu Javascript i PHP FlowPlayer Reloaded – osadzanie filmów na stronie Phoca gallery Komponent oraz zestaw modułów i dodatków umożliwiający publikację galerii Umożliwia hotlinkowanie zdjęć z picassa i youtube a także tworzenie nieograniczonej ilości katalogów Podczas wyświetlania wykorzystuje skrypty javascript jak lightbox czy hihgslide Jest to najpopularniejsza galeria do joomla działająca na wersji 1.5 jak i 1.6 Akeeba Backup Najpopularniejszy dodatek do joomla umożliwiający tworzenie kopii zapasowych Umożliwia szybkie tworzenie kopii w formacie zip a następnie zainstalowanie ich poprzez kreator na dowolnych hostingu także lokalnie Można kopiować samą bazę danych lub tylko pliki z natywnej joomli Można zdefiniować transfer kopii na dowolny serwer X MAP Rozszerzenie tworzące XML-ową albo HTML-ową mapę witryny która jest następnie wykorzystywana przez roboty Google Gcalendar Kalendarz wyświetlany na stronie w postaci modułu lub w artykule, podkreśla zdefiniowane wcześniej wydarzenia Możliwość integracji z kalendarzem google Easy Embed Video Umożliwia proste linkowanie do youtube bez konieczności osadzania ramek iframe lub znaczników object Edytory JCE i JCK Oba edytory są bardzo rozbudowane i umożliwiają pisanie zaawansowanego kodu HTML i CSS Do przykładu zastosowany zostanie edytor JCK ponieważ JCE jest niekompatybilny z pewnymi rozszerzeniami Jumi Jumi to zaawansowany edytor umożliwiający osadzanie kodu php javascript apletów java na stronie internetowej Podstawowa składnia 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/ DZIĘKUJĘ ZA UWAGĘ W razie potrzeby proszę pisać na adres [email protected] Marek Woźniak tworzenie stron www
