Część 3 – wstawianie grafiki i hiperłączy

W kolejnej, trzeciej już części kursu zajmiemy się wreszcie bardziej wyglądem tworzonej strony. W poprzedniej części stworzyliśmy strukturę naszej witryny.
Aby dobrze wykonywać dalsze operacje na stronie , należy posiadać oba pliki stworzone w poprzedniej części kursu.

Na początek coś na rozgrzewkę. Nasza witryna ma już strukturę, a dzięki temu iż pokolorowaliśmy tła poszczególnych bloków, widzimy dokładnie jak to wszystko wygląda. Pierwsze co rzuca się w oczy to to iż wszystkie bloki witryny są przysunięte do lewej części okna przeglądarki. Większość witryn jest
jednak zawsze wyśrodkowana, tak iż po obu stronach konkretnej strony jest zachowany jednakowy odstęp. Zróbmy to teraz w naszym serwisie. Otwieramy KED-a,  a  następnie pliki index i styl. Ponieważ chcemy zmienić wygląd strony, zmiany musimy przeprowadzić… oczywiście w pliku css.

W naszym pliku styl.css odnajdujemy część odpowiedzialną za całość witryny. Jak pamiętamy wszystkie bloki witryny umieściliśmy w jednym bloku ogólnym i
nazwaliśmy go glowny. W pliku css, przy części odpowiedzialnej za wygląd tego bloku zdefiniowaliśmy szerokość strony. Pisząc stronę mam na myśli nie całą
stronę w przeglądarce a jej funkcjonalne części czyli nagłówek, menu, treść i stopkę. Reszta to tylko tło. Szerokość tych elementów mamy ustalona na 780
px. Jeśli ktoś ma rozdzielczość 800 na 600, to bloki witryny wypełnią całe okno przeglądarki (na szerokość). Jednak przy większej rozdzielczości jak widać
bloki zajmują tylko część ekranu i są przysunięte na lewo. Naszym zadaniem jest stworzenie równych odstępów od lewej i prawej strony ekranu. Jak to zrobić?

Ktoś powie, użyć marginesów. Owszem trzeba użyć marginesów ale jak je prawidłowo ustawić? Możemy wyliczyć odległości i wpisać dla lewego i prawego
marginesu np po 30 px ale wtedy przy innej rozdzielczości ekranu wszystko się rozjedzie. Nasze rozwiązanie musi być uniwersalne. Dlatego użyjemy specjalnej wartości marginesu – auto. To znaczy że margines będzie tworzony automatycznie w zależności od potrzeb (czyli defacto zależnie od rozdzielczości).
Oczywiście aby to zadziałało musimy ustawić auto zarówno dla prawego jak i lewego marginesu. Odnajdujemy zatem blok glowny w pliku css i dopisujemy dwie linijki:

Dzięki temu nasza strona w przeglądarce będzie teraz idealnie wyśrodkowana (sprawdźcie). Warto tu zauważyć, że gdybyśmy nie mieli bloku glowny , margines musielibyśmy ustalac dla wszystkich części witryny (nagłówek, stopka itd.). Efekt oczywiście byłby taki sam ale należałoby wprowadzać zmiany w conajmniej 4 różnych miejscach, co nie tylko wydłuzyłoby niepotrzebnie kod witryny, ale i stanowiłoby pewną komplikację gdy strona będzie bardziej rozbudowana. Dzięki ogólnemu blokowi głównemu, wszystko mozemy robić w jednym miejscu, a wpływamy na całą stronę.

Jeszcze jedna uwaga. W niektórych kursach do tej pory wyśrodkowanie elementów uzyskuje się za pomocą dwóch znaczników<center></center>. Owszem cokolwiek będzie miedzy tymi znacznikami zostanie wyśrodkowane. Jednak po pierwszeten znacznik należy wstawiać już w kodzie html czyli naszym pliku index.html. Gdy strona będzie bardziej rozbudowana , ten znacznik musiałby być powtórzony w każdym pliku. I znów przy jakiś zmianach trzeba edytować mnóstwo plików. Po drugie dążymy do tego aby wszelkie zmiany wyglądu strony odbywały się z pliku css. A po trzecie znacznik <center> nie jest już wspierany przez nowsze wersję html-a i niedługo zostanie wycofany całkowicie, dlatego stosowanie go nie jest już mile widziane.

Mamy wyśrodkowaną stronę czas zrobić coś z poszczególnymi blokami naszego bloga. Na początek zajmijmy się częścią – naglowek czyli logo strony. W większości stron mamy tutaj tytuł strony plus jakiś obrazek. Zajmijmy się tym teraz. Na początek musimy sobie przygotować taki obrazek. Oczywiście w programie graficznym. Tutaj mamy już dowolność. Można korzysać z Gimpa, Photoshopa itp. Byle nie Paint :). Osobiście kozystam z Gimpa albo Photoshopa.

Nie będe tu pokazywał  jak coś robić w tych programach gdyż nie jest to kurs grafiki. Powiem tylko co musimy uzyskać.
Przede wszystkim wymiary naszego obrazka muszą być ustalone. Jak pamiętamy szerokość naszego bloku głównego (a wiec i bloku-logo) to 780px. Taką szerokość musi też mieć nasz obrazek. Wysokość to już raczej sprawa dowolna jednak nie możemy przesadzić. 200 pikseli powinno być w sam raz. Na takim obrazku mniej więcej pośrodku dajemy tytuł strony a z boku jakieś logo, element graficzny. To już wedle fantazji:) Jako logo możemy wstawić też np zdjęcie. Grunt aby nasz obrazek miał wymiary takie jak podałem. Zapisujemy go w formacie jpg! O tym trzeba pamiętać.

Internet to nie dysk twardy, gdzie zdjęcia mają i ponad 5 Mb. Tutaj liczy się każdy kB. Im większy rozmiar elementów graficznych na stronie tym dłużej
ładuje się dana strona. Należy więc dążyć do tego aby pliki graficzne były jak najmniejsze (wagowo). Już 100kB dla pliku graficznego to za dużo. 100 kB
powinny ważyć w sumie wszystkie pliki graficzne strony (mówię tu o plikach tła, logo itp.). Co do grafik wstawianych potem w treści strony jak np. zdjęcia,
nie ma już takich ograniczeń. Oczywiście nie można wstawiać zdjęć które mają kilka mega bo zanim się wczytają internauta dawno opuści stronę. Dobrym
zwyczajem jest robienie miniatur zdjęć, które po kliknięciu otwierają dopiero zdjęcie w pełnym rozmiarze.

Wróćmy jednak do naszego logo. Jest to zazwyczaj największy wagowo element strony dlatego wielkość około 40-70 kB jest tu do zaakceptowania. W moim wypadku plik ten waży około 55 kB. Ostatecznie może być :). Tak więc zpaisujemy logo w formacie jpg i staramy się go skompresować do odpowiedniej wagi. Oczywiście Paint np. też zapisuje jpg ale nie ma w nim mozliwości wybrania stopnia kompresji obrazka, a tym samym nie mamy wpływu na jego końcową wagę. Dlatego trzeba użyć programu bardziej zaawansowanego. Jakiego to już Wasz wybór.

Zrobiłem przykładowy plik  z którego będę korzystał. Możecie go dowolnie edytować lub stworzyć swój własny. 🙂

Nasz plik nazywamy logo.jpg . Jednak nie umieszczamy go tam gdzie pliki index i styl. Lepiej oddzielić pliki graficzne od plików strony. Tworzymy więc w
naszym folderze, tam gdzie mamy pliki index i styl, katalog – grafika, i tam umieszczamy nasz plik logo.jpg .

Teraz musimy go umieścić na naszej stronie. Robi się o inaczej niż np. wstawianie obrazków typu zdjęcia itp. w treści witryny. Ponieważ nasz plik to logo,
a więc część niezmienna naszej strony, należy go na stałe zdefiniować w pliku css.
W pliku styl.css odnajdujemy część  odpowiedzialną za nagłówek naszej strony:

Mamy tu część odpowiedzialną za kolor tła naszego bloku naglowek. Jednak teraz zamiast tła będziemy chcieli mieć obrazek a więc usuwamy linijkę
background-color. Aby zdefiniować tło bloku jako obrazek  musimy zmienić definicje naszego nagłówka na następującą:

Tak więc po kolei. Obrazek, tło danego bloku definiujemy za pomocą słowa background po którym wpisujemy url czyli po prostu ścieżkę dostępu do danej
grafiki. Po prostu musimy powiedzieć przeglądarce gdzie ma szukać naszego loga. Jak widać nasza ścieżka prowadzi do katalogu grafika, a potem wskazuje plik logo.jpg czyli to o co nam chodizło. Warto zauważyć,  że scieżke podajemy nie w pełnej postaci (C:/moja_strona/grafika/logo.jpg). Podajemy ścieżke począwszy od katalogu w którym znajduje się nasz plik styl.css . Gdyby logo.jpg znajdowało się nie w katalogu grafika ale tam gdzie nasz plik index i styl, to po url podalibyśmy tylko nazwe pliku czyli: url(logo.jpg) . To wszystko jest bardzo sprytnie ułożone, gdyż nawet gdy zmienimy lokalizację naszych plików np.
przeniesiemy na inny dysk czy wyślemy na serwer, to nasz url zawsze będzie prawidłowy, gdyż wskazuje ścieżkę względną do naszego pliku. Po adresie url
naszego pliku z grafiką podajemy jeszcze słowo no-repeat . Zakazuje ono przeglądarce powielać obrazek. Normalnie gdy każemy jakiś obszar wypełnić
tłem to zostaje on powielony tak aby wypełnić cały obszar. Gdy naszą grafiką jest np. jakiś deseń, to powtarzanie takie jest nawet wskazane. Jednak
zazwyczaj chcemy aby nasza grafika nie była ucięta czy powielona i zajmowała dokładnie tyle miejsca ile chcemy. Słowo no-repeat zapewnia nam iż nawet
jeśli miejsce do wypełnienia będzie większe, to nasza grafika zostanie wyświetlona tylko raz.

W naszym przypadku podajemy jeszcze w definicji nagłówka dokładny jego rozmiar. Chodzi o to aby nasza grafika była wyświetlona w całości. Przeglądarka jest cwana. Jeśli definiujemy jakiś blok o szerokości 780 pikseli to nam taki blok zrobi ale wyskość jego ustali tylko na jedną linijkę. Dopiero po wpisaniu
czegoś do tego bloku, wydłuża się on aby pomieścić wszystko co trzeba. W niektórych sytuacjach jest to bardzo przydatne – strona sama dopasowuje sie do
ilości tekstu – ogólnie do zawartości. Jednak w przypadku naszego loga chcemy aby było ono jednakowe przez cały czas. Niekiedy widziałem strony , gdzie
autor radził sobie wstawiając do danego bloku….nowe linie. Nową linię wymuszamy w przeglądarce znacznikiem <br />. Podając po sobie kilka takich
znaczników sprawimy iż otrzymamy kilka pustych linii jedna pod drugą. Oczywiście jest to jakiś sposób na to aby sztucznie zwiększyć wysokość danego bloku,
jednak jest to rozwiązanie nieestetyczne i nie powinno sie tego stosować. Zamiast tego podajemy po prostu wymiary naszego pudełka na sztywno. Wystarczą dwie linijki width i height tak jak to zrobiliśmy. Dzięki temu nasz blok będzie miał szerokość dokładnie 780 px, a wysokosć 200 px. Tak naprawdę ważna jest
tylko wysokość , gdyż szerokość ustaliliśmy już jak pamiętacie w bloku głównym. A wszystkie inne bloki po nim dziedziczą tą szerokość. Jednak dla
bezpieczeństwa warto podać raz jeszcze szerokość. Nawet jeśli kiedyś zmienimy szerokość bloku głównego (np. jeśli zechcemy poszerzyć naszą stronę) to nasz nagłówek utrzyma swój rozmiar.

Oczywiście wysokość bloku podajemy dokładnie taką, jaką wysokość posiada nasz obrazek który służy za tło.

Zapisujemy plik styl.css i możemy sprawdzić efekt otwierając index.html . Jak widać nasze logo wygląda już jak trzeba. Jedyne co szpeci jeszcze naszą prace
to tekst – "nagłówek strony" na tle naszego logo w lewym górnym rogu. Jak pamiętamy tekst ten służyć miał nam tylko jako pomoc w zorientowaniu sie gdzie
znajdują się poszczególne bloki. W tej chwili jest on nam zbędny wiec otwieramy plik index.html w KED i usuwamy z linijki: <div id="NAGLOWEK">Nagłówek strony</div> – tekst Nagłówek strony. Pozostanie nam tylko pusty w środku blok:

I o to nam chodziło:) Nasze logo jest póki co gotowe.

Każdy inny blok na naszej stronie możemy wypełnić dowolnym tłem dokładnie w ten sam sposób. Przygotowujemy obrazek o odpowiednich wymiarach, podajemy w definicji bloku jego adres oraz określamy wymiary i gotowe. W praktyce takie coś warto zastosować jeszcze dla stopki naszej strony. Menu i treść wymaga trochę innego podejścia. Zajmiemy się tym jednak kiedy indziej.

Teraz czas połączyć naszą stronę z innymi.
Odnośniki na stronach widział każdy. Klikamy i strona wysyła nas na inną podstronę lub do zupełnie innego serwisu. W praktyce stworzenie hiperłącza jest
bardzo proste. Zacznijmy jednak od stworzenia podstrony w naszym serwisie. W KED klikamy Plik -> Nowy plik . Teraz przechodzimy do pliku index.html i
zaznaczamy cały stworzony przez nasz kod. Następnie klikamy prawym na zaznaczenie i z menu wybieramy kopiuj. Przechodzimy do nowego pliku, klikamy prawym i wklej. Tym sposobem stworzyliśmy dokładną kopię naszej pierwszej strony. Oczywiscie chcemy aby się różniła od strony głównej. Jednak najpierw klikamy Plik -> Zapisz plik jako.. i nazywamy zapisywany plik… no właśnie jak?

O ile pierwsza strona serwisu, strona główna zawsze musi się nazywać index.html o tyle do pozostałych podstron naszego serwisu nie ma już takiej reguły. Możemy więc nazywać pliki jak chcemy. W praktyce dobrze jest powiązać nazwe pliku z faktyczną jego zawartością. Powiedzmy że nasza podstrona będzie zawierała krótkie informacje o autorze strony. Zapisujemy więc plik jako omnie.html a jako miejsce zapisu wskazujemy katalog w którym jest już nasz index.html i styl.css . To bardzo ważne aby wszystkie pliki zapisywać w tym samym katalogu co index i styl . Bez tego nie stworzymy odpowiedniej nawigacji,a nasza grafika nie wyświetli się.

Po zapisaniu pliku czas go zmodyfikować. W pliku omnie.html zmieniamy linijki które są odpowiedzialne za treść:

Chcemy napisać coś o sobie, a więc zmieniamy na np. coś takiego:

Oczywiście to tylko przykład. Tak naprawdę treść w tej chwili nie ma takiego znaczenia. W przyszłości dokładniej zajmiemy sie każdą podstroną serwisu i
wtedy pokażę jak sformatować nasz tekst, dodać nasze zdjęcie itd. Póki co chcemy tylko aby podstrona się jakoś odróżniała. Możemy jeszcze zmienić tytuł
naszej podstrony – <title>Strona domowa</title> – na:

Jak pamiętacie tytuł wyświetla się na pasku górnym przeglądarki. Stosowanie takiej struktury tytułu czyli – TYTUŁSTRONY -> TYTUL PODSTRONY ułatwia
orientację w serwisie gdy ktoś wejdzie nie na stronę główną, tylko od razu na podstronę (zdarza się to często gdy ktoś znajdzie naszą stronę np. w
wyszukiwarce).

Zapisujemy nasz plik omnie.html . Podstrona naszego serwisu jest już gotowa i teraz czas ja połączyć ze stroną główną. Przechodzimy do pliku index.html .
Interesuje nas blok menu :

Zamiast słowa Menu wpisujemy coś takiego :

Gotowe. Nasze hiperłącze zostało stworzone. Jak to działa? Do definicji hiperłączy służy znacznik <a></a>. Znacznika tego nigdy nie używamy bez parametru
href. To on służy do wskazywania dokąd ma prowadzić hiperłącze. Parametr podajemy wewnątrz znacznika <a>. A wartością naszego href jest po prostu nazwa
naszego pliku, do którego chcemy stworzyć odnośnik. Pamiętajcie aby nie używać w nazwach plików dużych liter!! To jeden z najczęstszych błędów
początkujących twórców stron. Konsekwentnie używajcie małych liter. Nie wolno też używać spacji. Zamiast tego można się posłużyć podkreśleniem _ np.
o_mnie.html . Nasz plik jednak nazywa się już omnie.html i tak wpisujemy w href.

Pomiędzy znacznikami <a> i </a> znajduje się treść którą chcemy zrobić odnośnikiem. Może to być wyraz, kilka wyrazów a nawet zdanie czy cały blok tekstu.
Wszystko co zamkniemy pomiędzy znacznikiem <a> </a> będzie odnośnikiem (Tak, nawet obrazek !!).

Po końcu znacznika <a> warto wpisać jeszcze znak nowej linii. Domyślnie przeglądarka traktuje wszystko jak jedną linię i bez tego znacznika, każdy inny
tekst czy hiperłącze zostałyby ustawione w linii za naszym odnośnikiem. Dzięki nowej linii mamy pewność iż nasze menu będzie wyglądać jak trzeba. Nową linię tworzymy wpisując znacznik <br />. Tak wiec cały nasz blok wygląda tak:

Jak widzicie zastosowałem w kodzie wcięcia i rozbiłem go na kilka linijek aby był bardziej czytelny. Html nie interpretuje tego jak kod jest ułożony więc mamy tu pełną dowolność. Ważne aby było to dla nas czytelne.

Nasze menu jest już w sumie gotowe ale… Jeszcze dwie rzeczy. Po pierwsze gdy ktoś już przejdzie na naszą podstronę chciałby zapewne też wrócić z powrotem na stronę główną. Zmuszanie kogoś do korzystania z przycisku wstecz na przeglądarce nie jest dobrym pomysłem tym bardziej, że to nie zawsze zadziała. Nasze menu powinno być tak stworzone aby pozwalało na łatwą nawigację w dowolne miejsce naszej witryny. Stwórzmy więc jeszcze na początku menu odnośnik do strony głównej. Zmieniamy nasz blok MENU tak:

Jak widać dodaliśmy tylko jedną linijkę. Odnośnik wygląda tak samo. Różni się tylko wskazywanym plikiem. To nie szkodzi że wskazujemy z pliku index.html na stronę główną index.html. Odnośnik zadziała. Efektem tego będzie po prostu przeładowanie naszej strony głównej. Należy pamiętać aby zawsze dawać komplet odnośników do każdego miejsca w serwisie i to na każdej podstronie.

I właśnie to jest druga rzecz którą musimy jeszcze zrobić. Kopiujemy nasz blok MENU i przechodzimy do pliku omnie.html . Na miejsce starego bloku MENU wklejamy ten nowy. W ten sposób mamy pełne powiązanie pomiędzy plikiem index i omnie.html. Zapiszmy oba pliki i zobaczmy efekt naszej pracy w przeglądarce.

Jak widać efekt jest zadowalający. Możemy klikać na oba łącza a zmieniać się będzie tylko treść i tytuł stronki. Grafika, menu i struktura się nie zmienia. I o to chodzi.

Rozwiązanie to ma jednak pewne minusy. Za każdym razem gdy zmienimy menu dodając nowy odnośnik itp., musimy te zmiany wprowadzić we wszystkich plikach naszego serwisu. Przy naszej witrynie, gdzie będziemy mieć tylko kilka podstron, nie będzie to póki co zbyt uciążliwe. Przy większych serwisach jest to jednak nie do pomyślenia i wtedy stosuje się tu PHP. W przyszłości nauczymy się i tego.

Póki co na tym zakończę ten odcinek kursu. W następnym zagłębimy się bardziej w tajniki hiperłączy i nauczymy się wstawiać obrazki w dowolnym miejscu strony. Zajmiemy się też bardziej zaawansowanym formatowaniem tekstu i dostosowywaniem serwisu do naszych potrzeb.