instalacja XAMPP i silnika JOOMLA prezentacja ze szkolenia

Report
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

similar documents