ALMAMER Wyższa Szkoła Ekonomiczna

ALMAMER Wyższa Szkoła Ekonomiczna Wydział Ekonomiczny Piotr Maziarz Nr albumu 22925 Projektowanie witryny internetowej firmy Capital-Advisers Praca magisterska napisana pod kierunkiem prof. dr hab. Krzysztofa Murawskiego Warszawa 2008

Składam serdeczne podziękowania Panu prof. dr hab. Krzysztofowi Murawskiemu za życzliwą pomoc i cenne uwag udzielone mi podczas pisania niniejszej pracy. 2

Spis treści Wstęp.... 4 Cel i zakres pracy......6 Rozdział I Krótka charakterystyka języków HTML i CSS...8 1.1 Opis języka HTML....8 1.2 Opis języka CSS.......13 Rozdział II Prezentacja programów użytych do realizacji witryny internetowej.....20 2.1Opis programu Adobe Photoshop CS.......20 2.2 Opis programu Macromedia Dreamweaver CS3.........26 2.3 Opis programu Total Commander............31 Rozdział III Realizacja projektu własnego witryny internetowej firmy Capital-Advisers.............34 3.1. Główne założenia i cel projektu własnego........34 3.2. Projektowanie elementów graficznych i nawigacyjnych........41 3.3. Optymalizacja i cięcie grafiki na mniejsze elementy...... 48 Rozdział IV Faza końcowa projektu własnego.......53 4.1. Testowanie gotowej witryny internetowej........53 4.2. Publikacja gotowej witryny internetowej. 58 4.3. Promocja strony WWW w sieci....62 Podsumowanie...69 Bibliografia.... 70 Spis rysunków....71 3

Wstęp Tematem mojej pracy jest zaprojektowanie witryny internetowej, która stanowi wizytówkę każdej poważnej, szanowanej firmy. Na wstępie wyjaśnię może, dlaczego użyłem programu Macromedia Dreamweaver CS oraz Adobe Photoshop CS do wykonania witryny internetowej, a nie innych programów do projektowania witryn internetowych dostępnych w tak szerokiej gamie na rynku. Otóż przez wiele lat Photoshop, tak samo jak Dreamweaver wypracował sobie dość solidną pozycję w rankingu. Photoshop stał się wzorem dla innych programów do obróbki grafiki bitmapowej. Pomimo powstania wielu dobrych programów graficznych żaden, z nich nie przewyższa Photoshopa. Trzeba przyznać, że firma Adobe, jakby nie dostrzegła ostatnio silnie rozwijającego się Internetu i dopiero od wersji 5.5, i wyżej, jest narzędziem w 100% przystosowanym do robienia grafiki na stronach WWW. Najnowsza wersja programu, pozwala na profesjonalne przygotowanie witryny WWW w krótkim czasie, oczywiście jeśli dysponujemy odpowiednimi umiejętnościami. Macromedia Dreamweaver to wyjątkowy program, od dawna cieszy się zasłużoną opinią jednego z najlepszych edytorów stron WWW. Pozwala na edycję strony w trybie graficznym i na samodzielne modyfikowanie jej kodu źródłowego. Ogromne możliwości programu sprawiają, że korzystają z niego zarówno początkujący, jak i zaawansowani projektanci. Interfejs Dreamweavera jest prosty, intuicyjny i w pełni konfigurowalny, poprzez zastosowanie palet i pasków narzędzi. Świetne narzędzie zarówno dla zielonych w HTML, jak i profesjonalistów. Dreamweaver doczekał się ostatnio kolejnej już wersji CS 9. Najszybszym i najwygodniejszym i coraz bardziej popularnym z każdym rokiem sposobem dotarcia do informacji jest Internet. Nadchodzące lata będą przebiegać pod znakiem nieustannego rozwoju komunikacji i mediów, a przede wszystkim latami, kiedy to przepływ informacji w oparciu o Internet zdominuje wszystkie dziedziny naszego życia. 4

Strona WWW to coraz częściej okno na świat, czyli okno na rynek. Dzięki stronie WWW można teraz zdobyć nowych klientów, dzięki czemu firma zwiększy swoje dochody. Dobry wizerunek to ogromna szansa firmy dla zbudowania trwałego kontaktu z klientem. Strona internetowa to wizytówka firmy, z którą odwiedzający internauci będą firmę identyfikować. Dlatego należy zwrócić uwagę na fakt, iż sposób przedstawienia witryny internetowej firmy w Internecie wpływa również bezpośrednio na to, jak postrzegana jest firma poza globalną siecią. Budowanie wizerunku firmy w Internecie powinno być nie tylko spójne z istniejącym już wizerunkiem, ale także ściśle się z nim uzupełniać. Zalety stron internetowych można by było wymieniać w nieskończoność, dlatego każda szanująca się firma powinna zadbać o to, by posiadać stronę internetową. W niniejszej pracy będę opisywał kolejne etapy powstawania serwisu, począwszy od omówienia technik i narzędzi z jakimi na co dzień mają do czynienia profesjonaliści, projektujący witryny internetowe. 5

Cel i zakres pracy Celem mojej pracy jest zaprojektowanie witryny internetowej firmy Capital-Advisers firmy prowadzącej usługi w zakresie doradztwa finansowego. Strona internetowa ma za zadanie ułatwić kontakt z firmą, przedstawić ofertę firmy, wykreować nowoczesny, pozytywny wizerunek firmy, i markę na rynku w sposób atrakcyjna dla odbiorcy. Capital-Advisers to grupa doświadczonych profesjonalistów których wiedza oparta jest na wieloletnim doświadczeniu które zdobywali w wiodących firmach doradczych, inwestycyjnych oraz rachunkowych. Capital-Advisers jest obecna na rynku usług finansowych od 1985 roku, starając się udoskonalać i promować nowe rozwiązania w zarządzaniu finansami i doradztwie finansowym. Głównym celem firmy Capital-Advisers jest dostarczanie bardzo zaawansowanych produktów finansowych oraz doradztwa finansowego o najwyższej jakości. Duży nacisk firma położyła na opracowanie profesjonalnych i kompleksowych rozwiązań dla firm, w każdej z następujących dziedzin: - zarządzanie ryzykiem, - zarządzanie finansami, - doradztwo finansowe. Specjaliści z Capital-Advisers swoim wieloletnim doświadczeniu realizowali finalizując wiele projektów - mamy własne pomysły oraz oferujemy pomoc specjalistów, którzy rozpatrują problemy w praktyczny sposób. Ponieważ większością odwiedzających będą ludzie zainteresowani pomnażaniem swoich dochodów, dołożyłem wszelkich starań żeby strona miała profesjonalny wygląd, nadając poważnego charakteru witrynie firmy. Istotną rolę odgrywa, interaktywność strony i niebanalna kreacja graficzna oraz jakość informacji zawartej na stronie firmy. To one bowiem powodują, że potencjalni klienci wracają ponownie stronę, budując w ten sposób trwałą relację z firmą. 6

Dokumentacja pracy przebiega dokładnie według spisu treści. Część opisowa pracy dotyczyć będzie wybranych języków programowania, czyli języków HTML i CSS (kaskadowe arkusze stylów). W dalszej części pracy są opisane narzędzia, których użyłem podczas projektowania witryny, a chodzi mi tu przede wszystkim o aplikacje takie jak Adobe Photoshop CS2 którym zaprojektowałem grafikę, Macromedia Dreamweaver który posłużył mi do zaprojektowaniu całej witryny, wraz z elementami graficznymi i stylistycznymi oraz program Total Commander za pomocą którego przesłałem gotowe elementy witryny na wirtualny serwer w Internecie. W kolejnych punktach pracy opisana jest realizacja projektu witryny własnej, czyli: projektowanie elementów graficznych i nawigacyjnych oraz ich optymalizacja. Natomiast w ostatnim rozdziale przedstawiłem ostatnie już kroki projektu czyli publikacje oraz promocje gotowej witryny internetowej. Cała praca kończy się podsumowaniem wszystkich czynności, jakie miały miejsce podczas realizacji projektu własnego witryny internetowej. 7

Rozdział I Krótka charakterystyka języków HTML i CSS 1.1 Opis języka HTML Język HTML składa się z szeregu znaczników, których forma jest ściśle określona przez specyfikację. Każdy znacznik posiada tak zwany znacznik otwierający i niemal każdy występuje w parze ze znacznikiem zamykającym. Poniżej zamieszczam schemat zapisu znacznika: <znacznik_otwierający atrybut> </znacznik zamykający> W praktyce wygląda to mnie więcej tak: <p id = "identyfikator"></p> Znacznik otwierający <P></P> zawiera atrybut, którym w tym przypadku jest id = "identyfikator" oraz jak większość znaczników znacznik zamykający. Niemal w każdym przypadku atrybut znajdujący się wewnątrz nawiasu kątowego jest opcjonalny, dlatego bardzo często znacznik z przykładu powyżej może mieć następującą postać: <P> </P> Specyfikacja dopuszcza do niezamykania niektórych znaczników, jednak działanie takie może prowadzić do powstania błędów i problemów zwłaszcza, gdy do oglądania strony użyjemy starszej przeglądarki. Pierwszym obowiązkowym elementem języka HTML jest znacznik: <html> </html> Określa on ramy naszego dokumentu. Należy więc uściślić, że to co, znajduje się miedzy znacznikami, jest naszym dokumentem HTML. Znacznik nigdy nie posiada dodatkowych atrybutów. Brak tych znaczników może wpływać na poprawność wyświetlania strony przez większość przeglądarek. Bezpośrednio po otwierającym <HTML> powinien się znaleźć znacznik <HEAD></HEAD>. 8

Element ten również nie zawiera żadnych atrybutów i występuje w parze ze znacznikiem zamykającym. <html> <head> </head> </html> Miedzy znacznikami <HEAD></HEAD> znajduje się kilka ważnych elementów dla konstrukcji całej strony. Następnym znacznikiem, który zalicza się do grona elementów strony WWW, jest <TITLE></TITLE>. Odpowiada on za ustawienie tytułu strony widocznego na belce tytułowej w oknie przeglądarki. Znacznik ten powinien znajdować się pomiędzy <HEAD></HEAD>. <html> <head> <meta http-equiv = "Content- Type" content = "text/html; charset = iso-8859-2" > <title> Capital-Advisers </title> </head> </html> Znacznik <BODY></BODY> występuje bezpośrednio po <HEAD></HEAD> i jest ostatnim z obowiązkowych znaczników języka HTML, tworzących strukturę strony. Znacznik ten aż do poprzedniej specyfikacji zawierał wiele dodatkowych atrybutów, takich jak: kolor tła strony, kolor odnośników, marginesy, graficzne tło naszej strony, ale ogłoszenie specyfikacji HTML 4 zmieniło ten stan rzeczy. Teraz wszystkie te elementy określamy za pomocą kaskadowych arkuszy stylów. Znacznik <BODY></BODY> jest bezwzględnie konieczny do poprawnego funkcjonowania strony, a jedynym wyjątkiem jest strona wykorzystująca ramki, gdzie zastąpiono go innym znacznikiem. 1 1 Bartosz Danowski, ABC tworzenia stron WWW, wydawnictwo Helion, Gliwice 2003, s.17-23 9

Elementy blokowe Do elementów blokowych w języku HTML możemy zaliczyć: nagłówki, akapity, znaczniki łamania wiersza, poziomie linie oraz znacznik <DIV></DIV>. Pamiętać należy że elementy blokowe muszą się znajdować wewnątrz znacznika <BODY></BODY>. Zgodnie z specyfikacją HTML 4.01 elementy blokowe służą jedynie do nadania poszczególnym elementom określonej formy. Natomiast dokładne określenia struktury takiego elementu koloru, wyrównania, czcionki zostały oddzielone od języka HTML i weszły w skład kaskadowych arkuszy stylów. agłówki Specyfikacja języka HTML przewiduje możliwość utworzenia nagłówków o szczęściu zróżnicowanych rozmiarach. Ogólny przepis na nagłówek znajduje się poniżej. <hx> Nagłówek stopnia X </hx> Za pomocą litery X oznacza się stopień nagłówka. W praktyce w to miejsce wstawiamy cyfry z przedziału od 1 do 6. Praktyczny przykład użycia nagłówków: <body> <h1> Nagłówek stopnia pierwszego </h1> <h1> Nagłówek stopnia pierwszego </h2> <h1> Nagłówek stopnia pierwszego </h3> <h1> Nagłówek stopnia pierwszego </h4> <h1> Nagłówek stopnia pierwszego </h5> <h1> Nagłówek stopnia pierwszego </h6> </body> Akapity Kolejnym sposobem prezentacji tekstu jest jego grupowanie w akapity. Tekst znajdujący się w akapicie automatycznie dopasowuje się do szerokości okna przeglądarki lub jak kto woli rozdzielczości. Dlatego na jednym komputerze akapit może mieć trzy wiersze tekstu, a na innym wiersze mogą być zaledwie dwa. Jest to rzecz jak najzupełniej normalna i niestety bardzo często przy źle zaprojektowanej 10

stronie może prowadzić do powstania problemu popularnego rozjeżdżania się zawartości okna przeglądarki. Za definicję akapitu odpowiada znacznik <P></P>, który zawsze występuje z elementem domykającym. <body> <p> Przykład prostego akapitu. <p> </body> Strona może zawierać dowolną liczbę akapitów, a każdy z nich jest oddzielonych od pozostałych pustym wierszem. Przerwa ta jest domyślnie wstawiana przez przeglądarki, a do jej kontroli musisz użyć kaskadowych arkuszy stylów. 2 Tabele Wprowadzenie obsługi tabel w języku HTML spowodowało prawdziwą rewolucję. To właśnie dzięki tabelom strony nabrały ciekawego wyglądu i stały się bardziej przestrzenne niż dotychczas. Współczesne strony w większości są zbudowane na tabelach lub bardziej skomplikowanych układach tabel. W ich wnętrzu znajdują się: tekst, grafika, formularze, a nawet inne tabele. Zaryzykuję stwierdzenie, że dopiero wprowadzenie warstw możliwości nakładania na siebie kilku elementów oraz wzajemnego ich pozycjonowania, było porównywalnym osiągnięciem do tabel. Oczywiście warstwy swoimi możliwościami znacznie wykraczają poza to, co oferuje tabela. Każda tabela składa się z odpowiedniej kombinacji znaczników <TABLE></TABLE>, <TR></TR> oraz <TD></TD>. Znacznik <TABLE></TABLE> określa ogólne ramy tabeli. Natomiast za pomocą <TR></TR> wstawiamy wiersze tabeli. Każdy wiersz to jedna para znaczników, co oznacza, że tabela ma dwa wiersze. Wewnątrz wiersza znajdują się komórki, które są stworzone za pomocą znacznika <TD></TD>. Jedna para znaczników odpowiada jednej komórce tabeli. 3 2 Bartosz Danowski, ABC tworzenia stron WWW, wydawnictwo Helion, Gliwice 2003, s.24-25 3 Bartosz Danowski, ABC tworzenia stron WWW, wydawnictwo Helion, Gliwice 2003, s.48-51 11

Tabele są bardzo wydajnym narzędziem do prezentacji danych oraz rozmieszczania tekstu i grafik na stronie HTML. Tabela składa się z jednego lub kilku wierszy, z którego każdy posiada jedną lub kilka komórek. Kolumny nie są określane w kodzie HTML, ale program Dreamweaver umożliwia opracowywanie kolumn podobnie jak wierszy i komórek. Program Dreamweaver dysponuje dwoma sposobami wyświetlania i opracowywania tabel: Tryb standardowy, w którym tabele są prezentowane w postaci siatki wierszy i kolumn oraz tryb Układu, który umożliwia rysowanie, zmianę wielkości oraz przenoszenie pól na stronie przy zachowaniu tabel struktury. Program Dreamweaver wyświetla szerokość tabeli i kolumny dla każdej kolumny po zaznaczeniu tabeli lub umieszczeniu kursora w tabeli. Obok szerokości wyświetlane są strzałki dla menu nagłówka tabeli i menu nagłówka kolumny. Menu te ułatwiają dostęp do poleceń dotyczących tabeli. Funkcje szerokości i menu mogą być włączane i wyłączane. Jeśli szerokość tabeli lub kolumny nie jest widoczna, to znaczy, że dana tabela lub kolumna nie posiadają szerokości określonej w kodzie HTML. Jeśli wyświetlane są dwie wartości, to znaczy, że szerokość wizualna wyświetlona w widoku Projekt nie pokrywa się z szerokością określoną w kodzie HTML. Sytuacja taka jest możliwa po zmianie wielkości tabeli przy pomocy przeciągania jej prawego dolnego rogu lub dodaniu zawartości przekraczającej określoną szerokość komórki. Na przykład, jeśli szerokość kolumny określono na 200 pikseli i dodano zawartość wielkości 250 pikseli, to dla danej kolumny będą wyświetlane obie wartości. 200 (szerokość określona w kodzie) oraz (250) w nawiasach (wizualna szerokość kolumny renderowanej na ekranie). 4 4 Adobe Systems Incorporated, Podręcznik użytkownika programu Adobe Dreamweaver CS3, 2007, s.179 12

1.2 Opis języka CSS Kolejnym i zarazem bardzo ważnym językiem, którego użyje przy projektowaniu witryny internetowej jest język CSS - Cascading Style Sheets - Kaskadowe Arkusze Stylów. W Paryżu lub Nowym Jorku określenie mieć styl oznacza, że chodzisz w butach od Gucciego, marynarkach od Armaniego i dżinsach od Marca Jacobsa. Na szczęście w wirtualnym świecie styl kosztuje dużo mniej. Aby mieć styl, wystarczy się zapoznać ze specyfikacją kaskadowych arkuszy stylów i stosować tę technologię do budowy tworzonych stron. Kaskadowe arkusze stylów (ang. Cascading style sheets CSS) są stosowane do formatowania stron i pozwalają uzyskać doskonałą kontrolę nad wyglądem całego dokumentu. Sensowność korzystania z kaskadowych arkuszy stylów nietrudno udowodnić wyobraź sobie witrynę składającą się z dużej liczby stron WWW, nad którą pracuje cała grupa programistów. Mając już wyobrażenie o stopniu skomplikowania zadania polegającego na stworzeniu kilku stron, na których używana będzie ta sama stylistyka krój, kolor, wielkość czcionki, kolorystyka elementów czy wygląd tabel, wyobraź sobie, jak trudno jest zapanować nad tymi wszystkimi elementami, gdy masz do ogarnięcia kilkaset stron projektowanych przez kilka różnych osób. Korzystanie z kaskadowych arkuszy stylów oznacza również oszczędność miejsca, ponieważ styl każdego elementu jest definiowany jednokrotnie w pliku definicji stylów, a nie przy każdym wystąpieniu elementu na stronie, czyli w przypadku takich elementów jak na przykład akapit czy nagłówek kilkadziesiąt razy na każdej stronie. 5 Kaskadowe arkusze stylów nieprzypadkowo noszą taką nazwę, bo style można wprowadzać na trzech różnych poziomach: za pomocą atrybutu style - styl definiowany kolejno dla poszczególnych elementów na stronie; za pomocą elementu STYLE - styl elementu jest określany dla całej strony; 5 Aleksandra Tomaszewska-Adamarek, Tworzenie stron WWW. Ilustrowany przewodnik, wydawnictwo Helion, Gliwice 2007, s.90 13

za pomocą zewnętrznego arkusza stylów styl jest definiowany dla danego typu elementu dla wszystkich stron powiązanych z arkuszem. Filozofia kaskadowych arkuszy stylów łączy w sobie elastyczny sposób kontroli stylów stron WWW i poszczególnych elementów na stronach z odpowiednią hierarchią stylów, która pozwala unikać konfliktów, jeśli style elementów są definiowane na kilku poziomach. Element STYLE ma wyższą rangę niż styl definiowany przez zewnętrzny arkusz stylów, ale niższą niż atrybut style. Jak łatwo się domyślić, najniższą rangę ma styl przypisywany przez zewnętrzny arkusz stylów. Takie rozwiązanie pozwala uniknąć konfliktów, które mogłyby wyniknąć, jeśli na stronie użylibyśmy wszystkich trzech metod definiowania stylów. Hierarchia - struktura stylów - przypomina stopnie wodospadu, stąd bierze się w nazwie określenie kaskadowy. Hierarchizacja stylów obejmuje nie tylko różne sposoby definiowania stylów, ale również sytuację, gdy do jednej strony podłączonych jest kilka różnych zewnętrznych arkuszy stylów. Przeglądarka uwzględnia w takim wypadku kolejność wprowadzania stylów. Zewnętrzny arkusz wprowadzony jako pierwszy dominuje nad arkuszem, który jest wprowadzony jako następny w kolejności. Problem polega na tym, że jeśli w zewnętrznych arkuszach stylów występują wzajemne konflikty, trudno przewidzieć efekt graficzny, dopóki strona nie zostanie wyświetlona w przeglądarce. 6 Sformatowanie strony za pomocą stylów CSS umożliwia rozdzielenie zawartości od prezentacji. Zawartość strony kod HTML - znajduje się w pliku HTML. Natomiast reguły CSS, które definiują prezentację tego kodu, znajdują się w innym pliku (zewnętrznym arkuszu stylów), albo w innej części dokumentu HTML (zazwyczaj w sekcji HEAD). Rozdzielenie zawartości i prezentacji znacznie ułatwia scentralizowaną obsługę wyglądu serwisu. Gdy chce się wprowadzić zmiany, nie trzeba modyfikować każdej właściwości na każdej stronie z osobna. Ponadto oddzielenie zawartości od prezentacji pozwala uzyskać prostszy i bardziej przejrzysty kod HTML, co skraca czas wczytywania się stron w przeglądarce 6 Aleksandra Tomaszewska-Adamarek, Tworzenie stron WWW. Ilustrowany przewodnik, wydawnictwo Helion, Gliwice 2007, s.93 14

i upraszcza nawigację osobom niepełnosprawnym (np. korzystającym z czytników ekranu). CSS zapewnia elastyczność i kontrolę nad precyzyjnym wyglądem strony. Za pomocą stylów CSS można sterować wieloma właściwościami tekstu, np. czcionkami i ich rozmiarami; pogrubieniem, kursywą, podkreśleniem i cieniem tekstu; kolorem tekstu i kolorem tła; kolorem i podkreśleniem łączy; a także wieloma innymi właściwościami. Sterując czcionkami za pomocą stylu CSS można również zagwarantować bardziej spójną obsługę układu i wyglądu strony w wielu różnych przeglądarkach. Obok formatowania tekstu, za pomocą stylów CSS można sterować formatem i położeniem elementów blokowych na stronie WWW. Element blokowy to samodzielny fragment zawartości, na ogół oddzielony nowym wierszem na stronie HTML i sformatowany graficznie w postaci bloku. Na przykład, znaczniki h1 (nagłówek 1. rzędu), p (akapit) oraz div (rozdział) generują elementy blokowe na stronach WWW. Dla elementów blokowych można ustawiać marginesy i krawędzie, umieszczać je w określonym miejscu, dodawać kolor tła, oblewać je tekstem, itd. Manipulowanie elementami blokowymi to podstawowa metoda tworzenia układu strony za pomocą stylów CSS. Reguła formatowania CSS składa się dwóch części: selektora i deklaracji (lub, w większości przypadków, bloku deklaracji). Selektor to termin (taki jak p, h1,nazwa klasy albo identyfikator), który identyfikuje formatowany element. Natomiast blok deklaracji definiuje właściwości stylu. W poniższym przykładzie, h1 to selektor, a cały tekst w klamrach ({}) to blok deklaracji: h1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; } Pojedyncza deklaracja składa się z dwóch części: właściwości, np. font-family (rodzina czcionek) oraz wartości, np. Helvetica. 15

W poprzedniej regule CSS, utworzono styl dla znaczników h1: tekst wszystkich znaczników h1 powiązanych z tym stylem będzie miał rozmiar 16 punktów, czcionkę Helvetica i będzie pogrubiony. Styl (który pochodzi z reguły lub zbioru reguł) jest przechowywany w innym miejscu, niż tekst, który formatuje. Zazwyczaj jest to zewnętrzny arkusz stylów albo sekcja HEAD w dokumencie HTML. Zatem jedna reguła dla znaczników h1 może dotyczyć wielu znaczników na raz (a w przypadku zewnętrznego arkusza stylów, reguła może dotyczyć jednocześnie wielu znaczników na wielu różnych stronach). Dzięki temu standard CSS ogromnie ułatwia modyfikowanie wyglądu. Uaktualnienie reguły CSS w jednym miejscu powoduje, że formatowanie wszystkich używających jej elementów automatycznie przyjmuje nowy styl. W programie Dreamweaver można tworzyć następujące rodzaje stylów: Style klasy umożliwiają stosowanie właściwości stylu do dowolnych elementów na stronie. Style znaczników HTML zmieniają definicję formatowania poszczególnych znaczników, np. h1. Style zaawansowane zmieniają definicję formatowania pewnych kombinacji elementów albo innych form selektorów, dozwolonych w standardzie CSS (np. selektor td h2 obowiązuje wtedy, gdy nagłówek h2 występuje w komórce tabeli). Style zaawansowane zmieniają także formatowanie znaczników, które zawierają określony atrybut id (np. style definiowane przez #mojstyl obowiązują dla wszystkich znaczników, które zawierają parę atrybut wartość:id="mojstyl"). Reguły CSS mogą być przechowywane w następujących miejscach: Zbiory reguł CSS, przechowywane w oddzielnym, zewnętrznym pliku CSS (.css), a nie w pliku HTML. Taki plik jest połączony z jedną lub wieloma stronami w serwisie WWW za pomocą łącza albo reguły @import, umieszczanej w sekcji HEAD dokumentu. Dreamweaver rozpoznaje style zdefiniowane w istniejących dokumentach, jeżeli spełniają one wytyczne CSS. Dreamweaver renderuje również większość zastosowanych stylów bezpośrednio w oknie dokumentu. (Jednak wyświetlenie podglądu dokumentu w przeglądarce zapewnia najbardziej precyzyjny rendering 16

strony na żywo ). Niektóre style CSS są różnie renderowane w przeglądarkach Microsoft Internet Explorer, Netscape, Opera, Apple Safari i innych. Niektórych stylów nie obsługuje jak dotąd żadna przeglądarka. Termin kaskadowy odnosi się do sposobu, w jaki przeglądarka ostatecznie wyświetla style dla określonych elementów na stronie internetowej. Za style wyświetlane na stronie internetowej odpowiedzialne są trzy różne źródła: arkusz stylów utworzony przez autora strony, zaznaczenia stylów dostosowane przez użytkownika (jeśli są) i domyślne style przeglądarki. Przeglądarki posiadają też swoje własne domyślne arkusze stylów dyktujące rendering stron internetowych, dodatkowo użytkownicy mogą dostosować swoje przeglądarki tworząc zaznaczenia określające wyświetlanie stron internetowych. Końcowe wyświetlanie strony internetowej jest wynikiem reguły wszystkich trzech źródeł razem wziętych ( kaskadowanie ), co ma na celu renderowanie strony internetowej w optymalny sposób. Często stosowany znacznik - znacznik akapitu, lub znacznik <p> - ilustruje koncepcję. Domyślnie, przeglądarki posiadają arkusze stylów definiujące czcionkę i rozmiar czcionki dla tekstu akapitu (tzn. tekstu umieszczonego między znacznikami <p> w kodzie HTML). W przeglądarce Internet Explorer, na przykład, cały tekst główny łącznie z tekstem akapitu, domyślnie wyświetlany jest czcionką Times New Roman, Medium. Jednak, jako autor strony internetowej, możesz utworzyć arkusz stylów nadpisujący domyślny styl czcionki i rozmiar czcionki akapitu. Na przykład, w swoim arkuszu stylów możesz utworzyć następującą regułę: p { font-family: Arial; font-size: small; } Gdy użytkownik wczytuje stronę, ustawienia czcionki akapitu i rozmiaru czcionki ustawione przez autora strony nadpiszą domyślne ustawienia przeglądarki. Użytkownicy mogą tworzyć zaznaczenia, aby dostosować wyświetlanie strony w przeglądarce w optymalny sposób do ich własnego używania. 17

Na przykład, w przeglądarce Internet Explorer, użytkownik może wybrać polecenie z menu Widok >Rozmiar tekstu > Największy, aby powiększyć czcionkę do bardziej czytelnego rozmiaru, jeśli czcionka jest zbyt mała. Ostatecznie (przynajmniej w tym przypadku), wybór użytkownika nadpisuje domyślne style przeglądarki dla czcionki akapitu i rozmiaru czcionki oraz style akapitowe utworzone przez autora strony. Kolejną ważną częścią stylów kaskadowych jest dziedziczenie. Właściwości dla większości elementów na stronie internetowej są dziedziczone na przykład, znaczniki akapitu dziedziczą określone właściwości ze znaczników treści (body), znaczniki listy wypunktowanej dziedziczą określone właściwości znaczników akapitowych, itd. Zatem, jeśli w swoim arkuszu stylów utworzysz następującą regułę: body { font-family: Arial; font-style: italic; } Cały tekst akapitowy na stornie internetowej (także tekst dziedziczący właściwości ze znaczników akapitowych) będzie pisany czcionką Arial, kursywą ponieważ znacznik akapitowy dziedziczy te właściwości ze znaczników body. Możesz, jednak określać reguły bardziej dokładnie i tworzyć style nadpisujące standardową formułę dla dziedziczenia. Na przykład, jeśli w swoim arkuszu stylów utworzysz następującą regułę: body { font-family: Arial; font-style: italic; } p { font-family: Courier; font-style: normal; } Cały tekst treści (body) będzie pisany czcionką Arial, kursywą z wyjątkiem tekstu akapitowego (i jego dziedziczenia), który będzie wyświetlany za pomocą czcionki 18

Courier (nie-kursywa). Technicznie, znacznik akapitu najpierw dziedziczy właściwości ustawione dla znacznika body, ale następnie je ignoruje, ponieważ ma własne zdefiniowane właściwości. Inaczej mówiąc, podczas gdy zwykle elementy strony dziedziczą właściwości z powyższych, bezpośrednia aplikacja właściwości znaczników zawsze powoduje nadpisanie formuły standardowej dla dziedziczenia. 7 7 Adobe Systems Incorporated, Podręcznik użytkownika programu Adobe Dreamweaver CS3, 2007, s.122-125 19

Rozdział II Prezentacja programów użytych do realizacji witryny internetowej 2.1 Opis programu Adobe Photoshop CS Programem, którego zaprezentuje jako pierwszego będzie znany już na całym świecie program Adobe Photoshop CS. Przy użyciu tego właśnie programu zostały zaprojektowane w większości elementów graficznych, oraz zoptymalizowana została grafika w taki sposób aby witryna otwierała się możliwie jak najszybciej. W dalszej części tego rozdziału zaprezentuje najważniejsze i zarazem najciekawsze funkcje programu Photoshop ukazane pod kątem projektowania elementów graficznych witryny. Adobe Photoshop CS (Rys. 1.) powstał z myślą o profesjonalnych projektantach, którzy chcą tworzyć wyrafinowaną grafikę na potrzeby publikacji drukowanych i internetowych; dostarcza on efektownych, zgodnych ze standardami branżowymi narzędzi do edycji obrazów. Zintegrowany z Photoshopem program Imane Ready zawiera wszechstronny zestaw narzędzi do optymalizacji i podglądu obrazów tworzonych dla sieci, do ich przetwarzania wsadowego, do automatyzacji najczęściej wykonywanych sekwencji poleceń dzięki tzw. Dropletom, do tworzenia rollorwerów i animowanych GIF-ów. Photoshop w połączeniu z Image Ready to wszechstronne środowisko za pomocą, którego możemy projektować grafikę na potrzeby WWW. 8 8 Adobe Photoshop CS/CS PL. Oficjalny podręcznik, Wydawnictwo Helion, Gliwice 2005, s.9 20

Rys.1 Program Adobe Photoshop Grafika tworzona na użytek Internetu jest grafiką rastrową, co oznacza, że przy jej modyfikacji pracujemy nad poszczególnymi pikselami lub ich grupami. O ile w programie obsługującym grafikę wektorową można dowolnie przemieszczać wszystkie obiekty, bez straty ich jakości, o tyle pliki z grafiką rastrową mogą dużo stracić, jeżeli zaczniemy przesuwać niektóre fragmenty, szczególnie gdy, mają one nieostre krawędzie. Z tej właśnie przyczyny najlepiej jest tworzyć każdą część ilustracji na osobnej warstwie. Pozwala to nam na niezależne manipulowanie fragmentami ilustracji: zmienianie ich wielkości, stopnia nachylenia, korekcję barw czy dodanie cienia. Oto co możemy dodatkowo dzięki temu osiągnąć: gdy narysujemy koło, na nim kwadrat, a następnie wymażemy kwadrat będziemy mieli dziurę w kole, ponieważ te dwie figury nałożyły się na siebie. Jeżeli każdą z tych figur narysujemy na osobnej warstwie, to po usunięciu kwadratu koło pozostanie całe. Kolejność warstw może być w każdej chwili zmieniana i dzięki temu dowolny element grafiki możemy przesunąć na wierzch lub pod spód w zależności od potrzeb. Możemy również ustawić stopień krycia danej warstwy (opacity). Na poniższym przykładzie warstwa, na której znajduje się czerwone koło ma stopień krycia 70%, dzięki czemu prześwituje spod niej granatowy prostokąt (Rys. 2.). 21

Rys.2 Mieszanie warstw Warstwy mogą być kopiowane w obrębie danego dokumentu lub do innego pliku. Wybieramy menu Layer/Duplicate Layer oraz wpisujemy nazwę dokumentu, do którego ma być skopiowana domyślnie ustawiony jest aktywny dokument. Możemy kopiować warstwę przeciągając ją z palety warstw na inny dokument. Praca w warstwach (Rys. 3.) 1. Wyświetlanie/ukrywanie warstwy. 2. Łączenie warstw. Wyświetlony symbol pędzla w tym miejscu oraz niebieskie okienko z nazwą oznacza, że warstwa jest aktywna, a jej nazwa jest wyświetlana obok nazwy ilustracji na górnym pasku jego okna. 3. Miniaturka warstwy. 4. Nazwa warstwy, poprzez podwójne kliknięcie możemy przejść do edycji opcji warstwy. 5. Menu operacji na warstwach. 6. Litera T oznacza, że warstwa zawiera tekst, poprzez podwójne kliknięcie możemy przejść do edycji tekstu. 7. Litera f oznacza, że do warstwy zastosowane są specjalne efekty, poprzez podwójne kliknięcie możemy przejść do edycji efektów. ALT + podwójne kliknięcie usuwa ostatni efekt. 8. Dodanie maski warstwy. 9. Dodanie nowej warstwy (użycie narzędzia tekstu automatycznie tworzy nową warstwę). 10. Usunięcie warstwy. 9 9 http://www.kaila.biz/design/htm/article/layers.htm 22