Mamy tym samym dwie warstwy z dwoma zdjęciami, musimy dodać teraz przejście między zdjęciami. Pierwszemu zdjęciu na warstwie pierwsze w klatce 60 ustawiamy przezroczystość alpha 0%, natomiast zdjęciu drugiemu w klatce 50 też alpha 0%. Tym sposobem zdjęcie pierwsze będzie znikać w tym samym czasie gdy zdjęcie drugie będzie się pojawiać. Powstanie w ten sposób efekt płynnego przejścia. Aby był on płynniejszy możemy przyśpieszyć ilość klatek na sekunde np. do 30. (ustawienia dokumentu). Dalsza część kursu już wkrótce! Zapraszamy do czytania pozostałych artykółów w blogu, co umili oczekiwanie na kolejne części tutoriala!

A w między czasie zapraszam do przeczytania krótkiego tutoriala dotyczącego instalacji Lightboxa

1. Pierwszy krok to pobranie skryptu ze strony autora: http://www.huddletogether.com/projects/lightbox2/ oraz wgranie go na serwer w miejsce gdzie znajdują się pliki naszego serwisu.

2. Następnie w headzie strony umieścić należy link do pliku css oraz do skryptu:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src=”js/prototype.js” type=”text/javascript”></script>

<script src=”js/scriptaculous.js?load=effects,builder” type=”text/javascript”></script>

<script src=”js/lightbox.js” type=”text/javascript”></script>

3. Ostatnio etap to dołożenie rel=”lightbox” do linku do obrazka tak aby wyglądał on w ten sposób:

<a rel=”lightbox” href=”images/image-1.jpg”></a>

Więcej informacji na temat projektowania stron w oparciu o dodatki JavaScript, znajdziesz także na blogu projektowanie-stron-www.eu .

Kolejny etap polega na wykorzystaniu twórczej inwencji projektanta. Projektujemy logo, menu oraz wszelkie elementy serwisu. Istotną kwestią jest dobór odpowiednich kolorów tak aby odpowiadały one specyfikacji i przeznaczeniu serwisu. Inna kolorystyka odpowiednia będzie dla serwisów biznesowych – gdzie dominują kolory biały, szary oraz niebieski – generalnie kolory stonowane, a inna dla serwisów rozrywkowych dla dzieci. Dobrym sposobem jest projektowanie stron, których przygotowanie opiera się na cięciu szablonów graficznych. Jest to o tyle wygodne, że jeszcze przez pocięciem szablonu, można przesłać go klientowi w formie obrazka JPG.

Wraz z rozwojem sieci rosły także aspiracje osób tworzących strony WWW, a chęć uzyskania większej kontroli nad ich wyglądem wymuszała zmiany w HTML
i wzrost jego złożoności. Kolejną odpowiedzią programistów na ograniczenia, jakie niósł ze sobą HTML było stworzenie języka skryptowego nadającego stronom internetowym pewną interaktywność. Język ten, o nazwie JavaScript opracowany został w 1996 roku przez firmę Netscape (jednego z wiodących producentów przeglądarek internetowych). Dzięki niemu projektowanie stron internetowych stało się łatwiejsze.

JavaScript umożliwia wprowadzenie do stron elementów interaktywności, poprawiającej percepcję strony przez użytkownika. Język ten daje ogromne możliwości rozbudowania witryny o różne ciekawe elementy. Pozwala między innymi na zmianę wyglądu okna przeglądarki, dodawanie efektów tła, zegarów, kalkulatorów, rozbudowanych formularzach i wielu innych funkcji. JavaScript posiada ponad to możliwość kontrolowania przeglądarki. Pozwala otwierać nowe okna a także wyświetlać różne komunikaty.

Język JavaScript nie należy do najprostszych jednakże jego ogromną zaletą jest fakt, iż nawet mniej zaawansowany programista może uruchomić dany skrypt bez konieczności posiadania szczegółowej wiedzy na temat tego języka. Sieć WWW przechowuje ogromne ilości witryn, z których możliwe jest pobranie tysięcy gotowych skryptów JavaScript. Aby z nich skorzystać na własnej stronie internetowej wystarczy jedynie umieścić dany skrypt w kodzie HTML.

Zadaniem HTML-a nie było prezentowanie zaawansowanej grafiki ani elementów multimedialnych. W rzeczywistości HTML nigdy nie miał być czymkolwiek więcej niż tylko uniwersalnym językiem przetwarzania tekstów rozpowszechnianych za pośrednictwem Internetu, w dodatku językiem o raczej ograniczonych możliwościach. Z czasem do WWW dodane zostały nowe znaczniki i technologie, takie jak tabele, ramki, kontrola nad wyrównywaniem tekstu czy też JavaScript, które umożliwiły lepszą kontrolę nad wyglądem dokumentów HTML-owych. Mimo tego, wiele efektów na stronie WWW projektanci musieli tworzyć w oparciu o programy graficzne, a ściągnięcie rezultatów ich pracy z serwera trwało dosyć długo (przy ówczesnych prędkościach połączeń). W związku z tym twórcy stron WWW zaczęli głośno domagać się od World Wide Web Consorcium udostępnienia większej kontroli nad projektem strony Internetowej. Odpowiedzią W3C na apel programistów było wprowadzenie kaskadowych arkuszy stylów (zwanych CSS – z języka angielskiego – Cascading Style Sheets), których zadaniem było uzupełnienie braków prostego języka HTML^.

Kaskadowe arkusze stylów to lista poleceń (zwanych regułami), które informują przeglądarkę o tym, w jaki sposób ma interpretować i wyświetlać zawartość danego elementu na stronie Internetowej. Umożliwiają one zdefiniowanie wspólnych stylów (cech) dla praktycznie każdego elementu, na przykład rodzaju i koloru czcionki, wysokości i szerokości tabeli, koloru tła czy pozycji danego elementu na stronie. CSS został stworzony, aby oddzielić strukturę strony od formy wyświetlania poszczególnych jej elementów, co zdecydowanie ułatwia pracę programisty, chociażby w przypadku konieczności modyfikacji dużej liczby modułów w serwisie.

Wspaniałą cechą arkuszy stylów jest fakt, iż są one bardzo łatwe do stworzenia. Nie są do tego potrzebne żadne dodatkowe aplikacje – wystarczają jedynie tak zwane reguły. Reguły CSS określają, jak kod HTML-owy ma wyglądać oraz jak ma się zachowywać w oknie przeglądarki. Mogą być one tworzone, aby poinstruować znacznik HTML-owy, jak powinien wyświetlić swoją zawartość. Można dzięki nim również, zdefiniować ogólne reguły i samodzielnie przyporządkować je poszczególnym znacznikom w kodzie. Reguły mogą być umieszczane w trzech różnych miejscach:

1. Reguły wpisane – umieszczone bezpośrednio w znaczniku HTML-owym
i odnoszące się tylko do tego jednego danego znacznika.

2. Reguły osadzone – umieszczone w nagłówku dokumentu, odnoszące się do całej zawartości danego dokumentu.

3. Reguły zewnętrzne – osadzone w zewnętrznym dokumencie, wspólne dla wielu dokumentów.

Kaskadowość arkuszy styków oznacza, że poszczególne reguły mają pewną, hierarchiczną strukturę. Przyjmuje się, że pierwszeństwo w definiowaniu cech danego elementu czy też znacznika mają te reguły, które znajdują się najbliżej danego elementu. W myśl tej zasady najniższą hierarchie mają reguły zewnętrzne. Mogą być one modyfikowane przez reguły osadzone, które to natomiast przestają funkcjonować w momencie pojawienia się reguł wpisanych w dany znacznik.

Tworząc serwis internetowy można posłużyć się kilkoma językami programowania. Każdy z nich ma swoje wady oraz zalety może także być wykorzystany w mniejszym lub większym stopniu. Projektując serwis należy zastanowić się, jakie elementy mają w nim się znajdować oraz jakimi językami posłużyć się, aby wykonać dane elementy w najlepszy sposób. Aktualnie wyróżnić można trzy najpopularniejsze modele stron internetowych:

1. Strony HTML – są to wszelkie strony wykonane w oparciu o język HTML. Zaletą tego języka oraz czynnikiem, który wpływa na jego popularność jest nieskomplikowana składnia.

2. Strony FLASH – wykonane są w całości przy zastosowaniu technologii tworzenia animacji Adobe Flash. Ogromną zaletą tej techniki jest fakt, iż pozwalają ona na tworzenie bardzo dynamicznych, pełnych animacji, przykuwających uwagę Internauty stron internetowych. Wadą natomiast jest to, że wyszukiwarki internetowe nie widzą treści zapisanych wewnątrz animacji, przez co strona nie widnieje na wysokich pozycjach w wynikach wyszukiwania. Ma to ogromne znaczenie w przypadku serwisów internetowych firm gdyż utrudnia im dotarcie do klientów.

3. Strony hybrydowe – wykonane są one w oparciu o język HTML posiadające także elementy stworzone za pomocą Adobe Flash. Dzięki temu łączą prostotę i praktyczność wykonania z przykuwającą uwagę formą.

Aby zaprojektować stronę internetową musisz poznać przede wszystkim strukturę jej kodu, który najprościej mówiąc wygląda następująco:

<HTML>
<BODY>
</BODY>
</HTML>

To co widzimy wyżej to najprosztsza strona WWW, która po zapisaniu działa, ale nie wyświetla niczego, ponieważ jeszcze niczego jej nie podyktowaliśmy. Spróbujemy więc wpisać następujący kod:

<HTML>
<BODY>
To jest tekst tej strony.
</BODY>
</HTML>

Po zapisaniu i uruchomieniu naszej strony, widzimy, że na ekranie pojawia się tekst “To jest tekst tej strony”. Tak więc wiemy już, że informacja zawarta w części BODY pojawia się na ekranie. Poznajmy więc pierwszą komendę HTML, która umożliwia pogrubienie tekstu. Komenda ta to <B> jak Bold. Jeżeli umieścimy jakiś tekst pomiędzy <B> a </B>, to tekst ten będzie pogrubiony:

<HTML>
<BODY>
<B>To jest tekst tej strony.</b>
</BODY>
</HTML>

W efekcie na ekranie zobaczymy: To jest tekst tej strony. Spróbujmy teraz zmienić kolor czcionki. W tym celu używamy polecenia <FONT COLOR=RED>, gdzie RED to nazwa koloru czerwonego po angielsku. Możemy ją zmieniać na dowolną inną typu BLUE, PINK czy GREEN. Podobnie jak pogrubienie czcionki, kolor również musimy zamknąć czyli użyć na końcu </FONT>. Wygląda to w ten sposób:

<HTML>
<BODY>
<FONT COLOR=RED>To jest tekst tej strony.</FONT>
</BODY>
</HTML>

Otrzymujemy: To jest tekst tej strony. Łatwe prawda? Komendy możemy oczywiście łączyć:

<HTML>
<BODY>
<FONT COLOR=BLUE><B>To jest tekst tej strony.</B></FONT>
</BODY>
</HTML>

W tym momencie na ekranie otrzymamy: To jest tekst tej strony.

Jak widać tworzenie stron WWW nie jest niczym trudnym. Trzeba jedynie opanować podstawowe komeny języka HTML i już można tworzyć barwne witryny internetowe. Do tego odrobina znajomości programów graficznych i strony nabierają profesjonalnego kształtu.