Figero System
Figero System Strona Główna FAQ i Wyszukiarka Mapa Serwisu Kontakt Panel Użytkownika
Witamy na stronie Systemu Figero - Panel Użytkownika
Wdrażanie szablonów photoshopa

        W tym przykładzie pokażę jak wdrożyć szablon graficzny photoshopa do systemu Figero. Mam tu na myśli gotowy pocięty szablon wraz z zestawem plików graficznych i formatującym kodem w pliku HTML.
        Logujemy się do systemu i z lewego menu wybieramy zakładkę "Zarządzanie stroną WWW". Wybieramy opcję "szkielety stron". Wyświetla nam się lista dostępnych szkieletów. Zanim jednak dodamy nowy szkielet musimy załadować na serwer wszystkie potrzebne pliki graficzne. Klikamy na przycisk "Załaduj Pliki". Po chwili otwiera się okno "Menadżera Plików". Ponieważ program Photoshop zapisał pliki graficzne szablonu w osobnym folderze to również my tworzymy taki sam osobny folder na serwerze. Wpisujemy nazwę folderu w okienku "Create folder" i klikamy przycisk "OK". Utworzył nam się nowy folder. Wchodzimy do niego klikając na jego nazwę. Na górnej listwie menadżera plików widzimy aktualną ścieżkę do folderu aby upewnić się, że jesteśmy we właściwym miejscu. W tym momencie możemy już załadować pliki na serwer do nowego folderu. W okienku "Upload files" menadżera plików klikamy na przycisk "Browse". Otworzy nam się nowe okno w którym pojedynczo będziemy dodawać pliki do kolejki. Gdy dodamy wszystkie wymagane pliki klikamy na przycisk "Upload". Po chwili nasze pliki zostaną załadowane na serwer. Zamykamy okno menadżera plików. Pod spodem mamy okno z listą dostępnych szkieletów. Klikamy na ikonkę z lewej strony listy aby dodać nowy szkielet. W formularzu który się pojawił musimy wpisać jedynie nazwę nowego szkieletu i zaznaczyć status na aktywny. Kikamy na przycisk "Wstaw nowy". System utworzył nowy szkielet i powrócił do listy dostępnych szkieletów. Aby wyedytować nowo utworzony szkielet klikamy na ostatnią ikonkę po prawej stronie "Edytor graficzny WYSIWYG".            

 


       Otworzyło się nam okno edytora graficznego. Jest to pusta strona do której będziemy teraz dodawać kod HTML utworzony przez Photoshop'a.
       Otwieramy katalog na dysku lokalnym gdzie mamy zapisane pliki szablonu graficznego. Otwieramy plik HTML jakimkolwiek edytorem tekstowym, najlepiej systemowym notatnikiem. Po otworzeniu w kodzie HTML widzimy, że szablon Photoshopa mieści się między dwoma komentarzami "ImageReady Slices". Zaznaczamy kod znajdujący się poiędzy komentarzami i kopiujemy go do schowka. Zamykamy program notatnik. W oknie Edytora Graficznego WYSIWYG gdzie w górnym menu znajduje się ikonka "HTML". Klikamy w nią aby wyedytować źródło HTML naszego nowego szkieletu. W tym momencie nie ma żadnego kodu. Wklejamy szablon photoshopa ze schowka. Pojawił nam się kod HTML z względnymi ścieżkami do plików graficznych ale po kliknięciu przycisku "aktualizuj" zostaną one zamienione na bezwzględne. Klikamy więc na przycisk "aktualizuj". Pojawił nam się szkielet, nad którym będziemy jednak musieli jeszcze trochę popracować. Szkielet jest podzielony przerywanymi liniami. Są to niewidzialne linie komórek tabeli która formatuje nam całość. Możemy oczywiście wyłączyć je ikonką "Toggle Guidelines/Niewidzialne Elementy" znajdującą się na prawo od ikonki "HTML" i zobaczyć jak nasz szkielet wygląda w rzeczywistości.
       Następnie musimy zwrócić uwagę na te komórki tabeli w które będziemy wprowadzać treść, czyli menu, newsy, główną treść strony, elementy interaktywne itd... Zacznijmy od największego elementu czyli tego gdzie będzie się znajdować główna treść strony. Pozostałe elementy będziemy zmieniać analogicznie.
       Jeśli chodzi o treść główną strony nie będzie to tylko ten jeden największy element ale także dwa paski po jego bokach gdyż one również będą się rozciągać gdy będzie się nam zwiększać objętość tekstu na stronie.
      Zacznijmy jednak od największego elementu. Po kliknięciu na niego widać że jest tam jakaś grafika o jakiś rozmiarach. Nie znamy dokładnie rozmiarów więc najlepiej kliknąć na ikonkę "Edytuj obraz". Otworzy się nowe okienko w którym pojawią się parametry obrazka. Zaznaczamy ścieżkę do obrazka "Image URL" i kopiujemy ją do schowka. Następnie w zakładce "prezentacja" odczytujemy szerokość i wysokość naszego obrazka. Zapamiętujemy je i naciskamy "Anuluj". Okienko edycji obrazka zostało zamknięte. Klikamy ponownie na obrazek i aby go usunąć naciskamy przycisk "DEL" na klawiaturze. Zamiast obrazka w jego miejscu pojawił się kursor. Przechodzimy do edycji komórki tabeli klikając na ikonkę z górnego menu. Otworzyło się okienko. Wpisujemy w nim szerokośc komórki taką samą jak szerokość skasowanego obrazka. Wysokości nie wpisujemy bo będzie się ona zmieniać dynamicznie w zależności od ilości tekstu na stronie. Wybieramy wyrównanie tekstu w poziomie np.: "Lewy" oraz pionowe wyrównanie "Góra". W zakładce "Zaawansowane" musimy wstawić jako tło ścieżkę bezwzględną do naszego obrazka. Mamy ją w schowku więc wystarczy wkleić ją do pola "Background Image". Gdy skończymy naciskamy przycisk "Aktualizuj". W tym momencie kursor znalazł się na właściwej pozycji (Lewy górny róg komórki tabeli). Analogicznie będziemy zmieniać wszystkie pozostałe elementy z tą różnicą jednak, że w większości z nich będziemy podawać zarówno szerokość jak i wysokość komórki tabeli.

       Gdy skończymy poprawiać wybrane elementy tabeli, musimy wskazać systemowi Figero gdzie ma umieszczać treść poszczególnych kontenerów. W tym celu użyjemy "magicznego słowa" pisanego w nawiasach klamrowych np.: {container0}
       W przypadku głównej treści strony użyjemy słowa container z cyfrą "0". Następnie jadąc np.: od góry wpisujemy w wybrane komórki kolejne elementy container, np.: {container1} {container2} itd... a następnie zapisujemy szkielet klikając na ikonkę dyskietki "Zachowaj". Do miejsc wskazanych przez wyrażenie  {container} będziemy mogli  później przydzielić wybrane kontenery i w ten sposób uzyskać kompletne szablony graficzne naszego serwisu www.





Jesteś w: Opis systemuSzablony graficzne-» Wdrażanie szablonów Photoshopa