Strona główna | InternetJak pociąć i zakodować projekt graficzny strony (1)

Jak pociąć i zakodować projekt graficzny strony (1)

Dwuczęściowy poradnik przedstawiający w prosty sposób metodę cięcia projektu graficznego strony WWW, a następnie zakodowania go w HTML/CSS Layout. W pierwszej części opisujemy poszczególne kroki dotyczące przygotowania elementów graficznych. W kolejnej przybliżymy zasady pisania i kodowania szablonów stron WWW.

Widok 1

W numerze 4/2010 „Informatyki w Budownictwie” poczyniliśmy pierwszy krok do własnej strony internetowej – stworzyliśmy projekt graficzny. Jednak, aby w pełni funkcjonował jako witryna internetowa, musimy go najpierw odpowiednio przygotować. Nie możemy zostawić naszej grafiki jako jeden plik. Oczywiście, jeżeli ktoś jest uparty, to może tak zrobić i w prosty sposób umieścić ją w sieci, jednak będzie to problematyczne zarówno dla użytkownika, jak i wszelkiego rodzaju wyszukiwarek. Użytkownikowi utrudni poruszanie się po niej, sprawi, że strona będzie statyczna, a dla wyszukiwarek (np. Google), będzie to problematyczne z tego względu, że nie odczytają one zawartości witryny, a także jej podstron z informacjami. Pamiętając stwierdzenie, „czego nie można znaleźć w Google, nie istnieje”, może sprawić, że będzie trudniej nas znaleźć, a tego oczywiście nie chcemy.

W tym momencie nie pozostaje nic innego jak skupić się i w kolejnym kroku (po utworzeniu szablonu strony) przystąpić do pocięcia grafiki na części. Pocięta grafika to nic innego jak zbiór obrazków, które w połączeniu z kodem HTML/CSS tworzą spójną całość. Dzięki temu sami możemy określić, czy każdy z elementów przez nas stworzonych jest niezastąpiony, czy niektóre przy samym zakodowywaniu witryny, można pominąć. Nie każda część grafiki musi być potrzebna, np. puste białe pole może być zwykłym kodem HTML. Samym kodowaniem, pisaniem kodu HTML/CSS zajmiemy się w kolejnej części poradnika. Poniżej przedstawiamy kroki, które należy wykonać w programie Adobe Photoshop CS4 w celu odpowiedniego pocięcia szablonu.

Krok 1: Cięcie grafiki
Do tego posłużymy się narzędziem zwanym Slice Tool (skrót klawiszowy C), które dostępne jest w programie Photoshop. Będziemy pracować na wersji CS4, jednak narzędzie to istnieje w każdej wersji programu, więc mając wcześniejsze, czy późniejsze, można je tam znaleźć.

Otwieramy plik w programie [File/Open…(Ctrl+O)] i wybieramy narzędzie do cięcia. Obsługa Slice Tool jest niezwykle prosta, wystarczy ustawić kursor na dowolnym rogu elementu projektu i przytrzymując klawisz, przeciągnąć go do przeciwległego boku.

Przystępując do tej czynności warto zastanowić się, jakie elementy będą nam potrzebne i jak musimy pociąć szablon. Przyjrzyjmy się naszej grafice.

Całość osadzona jest w kwadracie, z cieniowaniem, który daje efekt trójwymiarowości. Musimy tak pociąć nasz projekt, aby wyodrębnić górną, boczne i dolną część kwadratu. Do tego służy format.png. Png jest formatem bezstratnym, to oznacza, że pliki po pocięciu będą więcej ważyć, ale całość zachowa lepszą jakość, a niektóre potrzebne elementy utrzymają przeźroczystość. Zapewne wielu czytelników zastanawia się, co zrobić z „drewnianym” tłem. Otóż można wyłączyć warstwę z tłem, i zapisać ją osobno.

Na podglądzie (1) widać gdzie musimy wyłączyć z pola widoku warstw, warstwę z tłem. Tło jest tutaj spakowane w folderze, więc trzeba odznaczyć cały folder. Widać już (2), że tło zniknęło, a jego miejsce zajęło tło przezroczyste w Photoshopie (tak przezroczystość ukazana jest w programie).


Widok 2

W odwrotnej kolejności można zapisać „drewniane” tło. Aby wyłączanie kolejnych warstw nie trwało długo, można wszystkie, poza tłem, wrzucić do nowego folderu z wszystkimi warstwami, krok 3 – tworzymy folder i zapisujemy, np. jako „całość” (zaznaczyć pierwszą górną warstwę (4) i tą tuż przed folderem z naszym tłem, przytrzymując klawisz shift), a następnie je wyłączyć. Gdy już to zrobimy, włączamy nasz folder z tłem. Mając na widoku samo drewno, musimy zaznaczyć taką jego część, aby fragment, który zaznaczymy, po powieleniu dobrze wyglądał, żadna jego część się nie odznaczała, a obrazek całościowo tak się zlewał w spójną całość. Możemy też posłużyć się naszą wcześniejszą teksturą (o ile mamy taką zapisaną w komputerze).

Spójrzmy znów na widok 1. W naszym kwadracie mamy kolejno, puste pole, które można zaznaczyć, logo, menu (każdy z fragmentów nawigacji tniemy oddzielnie), linię oddzielającą nagłówek od treści. Następnie mamy box z treścią, zaznaczamy cały, aby móc później zakodować go tak, żeby tekst nie był obrazkiem, a można było zawrzeć tam żądaną treść. Oddzielamy także naszą fotografię. Zawsze będzie można ją zmienić, kiedy przyjdzie taka potrzeba. Niżej linia, która oddziela treść od trzech kolejnych boxów z tekstem, kolejna linia i stopka.


Widok 3

Krok 2: Zapisywanie
Kiedy już pocięliśmy grafikę, możemy przejść do jej zapisywania. Dzięki przydatnej funkcji w programie Photoshop – Save for Web&Devices (skrót klawiszowy Alt+Shift+Ctrl+S) możemy zapisać nasz pocięty projekt w formie plików graficznych wraz z prostym kodem HTML i stylem CSS. Dla osób, które zaczynają swoją przygodę z kodowaniem, to w zupełności wystarczy. Dzięki temu skraca się czas tworzenia kodu strony od podstaw i możemy edytować tylko potrzebne nam elementy.

Zaznaczamy cały projekt (krok 5, możemy zmniejszyć widok podglądu, np. do 12%), wybieramy nasz format pliku (6), mając na uwadze zaznaczenie „transparentu” i zapisujemy (7).


Widok 4

Plik możemy zapisać jako „HTML Only” (tylko kod html), „Images Only” (tylko obrazki), „HTML and Images” (obrazki i kod). Wybieramy ostatnią opcję (8). Poniżej mamy ustawienia (Settings – 9), po rozwinięciu wybieramy opcję „Other…”. Dzięki niej możemy sami określić ustawienia (wyświetli się okno – 10). Poszczególne opcje to (11): HTML (wszystko, co związane z kodowaniem ogólnym, jakie kodowanie (Encoding), czy Unicode, czy inny, czy strona ma być w divach (opcja w Indent – None) czy tabelkach – nie zalecane), kolejna to Slices (dla naszych części), Background (tutaj wybieramy uprzednio zapisane „drewniane” tło), i Saving Files (możemy wybrać nazwę naszych plików, nazwę folderu, gdzie zapisane będą nasze obrazki).


Widok 5

Kodować stronę można w różnych programach. Zarówno darmowych, jak i płatnych. Stronę zakodować można nawet w notatniku, jednak jest to ciężka i mozolna praca dla osób, które nie miały z tym zagadnieniem wiele do czynienia. W swoim pakiecie Adobe, oprócz Photoshopa, posiada również program Dreamweaver (będziemy działać na wersji CS3). Również dostępnego do pobrania w wersji testowej. Oprócz tego, że program koloruje składnie, i podpowiada nam kod, co znacznie ułatwia pracę, ma także dostępny tryb podglądu (tryb kodu, podglądu i kodu, i podglądu – 12). Możemy kontrolować zmiany zachodzące po edytowaniu kodu.


Widok 6

O języku HTML i stylach CSS można dowiedzieć się więcej z książek, bądź Internetu. Jest wiele kursów dla początkujących, warto znać chociaż podstawy, jeśli chcemy samodzielnie wykonać własną stronę internetową.

Nasz szablon powoli nabiera właściwych kształtów tak więc przeskakując przez widoki w programie możemy zaznaczyć kolejne części, które wyedytujemy. Na pierwszy ogień pójdzie menu. Resztę możemy zostawić bez zmian.

Poszczególne kwadraty zaznaczamy (13) i dodajemy do nich ścieżkę (aby móc przeskakiwać z jednej treści do drugiej). W polu (14) wpisujemy nasz adres do podstrony.


Widok 7

Następne pola, to pola tekstowe (Serdecznie witamy, Aktualności, Usługi i Kontakt). Kolejno usuwamy adres do tych plików z kodu (15, tylko zaznaczoną ścieżkę).

W zamian za to wpisujemy ręcznie tekst, a w wygenerowanym pliku CSS formatujemy go odpowiednio. „Id” przy pliku, który usunęliśmy ma nazwę u nas „strona-12”, taki styl dla tej ramki jest w pliku CSS, odnajdujemy i możemy formatować, np. dodając krój pisma „font-family”.


Widok 8

W ostatniej części strony, przy stopce, celowo nie została pocięta do końca, aby pokazać jeszcze inną opcję dodawania odnośnika do poszczególnych podstron. Opcja ta nazywa się mapowaniem. Dzięki niej możemy przypisać adres do elementu graficznego, którego nie da się w jakiś sposób zakodować, bądź będzie to dla nas bardzo trudne.

Zaznaczamy naszą część witryny (16) i używamy narzędzia mapowania (17). Może to być kwadrat, kółko, bądź jakiś inny dziwny kształt (np. gwiazdka).


Widok 9


Widok 10


Widok 11

Narzędziem wybranym przez nas, prostokątem, bo inne opcje są dla nas zbędne, zaznaczamy obszar (18) i wpisujemy adres podstrony (19).


Widok 12

I tym sposobem mamy prosto zakodowaną naszą pierwszą stronę internetową. W następnej części poradnika z tej serii, zostaną omówione elementy kodowania strony korzystając już tylko i wyłącznie z prostego edytora, zmuszając nas do opanowania podstaw języka HTML oraz arkusza stylów CSS. Poruszone zostaną również kwestie optymalizacji kodu pod kątem wyszukiwarek, m.in. linkowanie, struktura menu, nagłówki.

(Tekst i rysunki: Szymon Fiecek)

Źródło: Informatyka w Budownictwie, nr 3 (12) 2011
DODAJ KOMENTARZ
Wymagane: Zaloguj się aby dodać komentarz > Zaloguj się
PREZENTACJA FIRM
Astino BKK MTM PWSK
TEMAT MIESIĄCA
Zintegrowane systemy zarządzania firmą budowlaną

W obecnych czasach zarządzanie przedsiębiorstwem bez odpowiedniego systemu informatycznego staje się bardzo trudne. Na rynku oferowanych jest, co prawda, wiele takich systemów, jednak tylko stosunkowo nieduża ich część uwzględnia specyfikę branży budowlanej. Czytaj więcej