Tworznie stron internetowych opartych o cms joomla
Download
1 / 111

TWORZNIE STRON INTERNETOWYCH OPARTYCH O CMS JOOMLA - PowerPoint PPT Presentation


  • 506 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'TWORZNIE STRON INTERNETOWYCH OPARTYCH O CMS JOOMLA' - cargan


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Tworznie stron internetowych opartych o cms joomla
TWORZNIE STRON INTERNETOWYCH OPARTYCH O CMS JOOMLA


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
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
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
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
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
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
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
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&frs_package_id=5969 i pobieramy wersję 1.6.5 o nazwie „Joomla_1.6.5-Stable-Full_Package.zip”


Instalacja joomla na hostingu cba pl cd
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 cd1
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 wbudowane1
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
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 (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
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
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
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
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
Znaczniki cd.

  • Większość znaczników otwiera się i zamyka, obejmując jakąś partię tekstu.

  • Zamknięcieznacznika 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
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
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
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
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
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
Komentarze HTML

  • Dodawanie komentarzy jest proste po prostu umieść komentarz pomiędzy znacznikami komentarza <!-- tutaj dodaj swój komentarz -->


Znacznik nowej linii i spacji
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
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
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
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
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
Znacznik hr pozioma linia

  • abywstawić 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
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ł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
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
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
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
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
Odnośnikilokalne

  • <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
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
Ś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

  • 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
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
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
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
CSS wprowadzenie

  • 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
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
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
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
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
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 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
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
Przykład użycia identyfikatora

#podsumowanie {text align: center;}

<p id=’’podsumowanie”> przykladowy tekst </p>


Pseudoklasy i pseudoelementy
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
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 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
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

  • 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
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
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
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

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
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

  • 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
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
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
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
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
Skrócony zapis marginesów

  • margin: 20px 30px 40px 50px

  • Odpowiednio górny lewy dolny i prawy margines


Dope nienia
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
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
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
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
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
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
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
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
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
X MAP

  • Rozszerzenie tworzące XML-ową albo HTML-ową mapę witryny która jest następnie wykorzystywana przez roboty Google


Gcalendar
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
Easy Embed Video

  • Umożliwia proste linkowanie do youtube bez konieczności osadzania ramek iframe lub znaczników object


Edytory jce i jck
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
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/


W razie potrzeby prosz pisa na adres marekwozniak1@gmail com marek wo niak tworzenie stron www

W razie potrzeby proszę pisać na adres [email protected]

Marek Woźniak tworzenie stron www

DZIĘKUJĘ ZA UWAGĘ


ad