Instrukcja obsługi edicralite

Transkrypt

1 Instrukcja obsługi edicralite Pełna kompatybilność z popularnymi przeglądarkami 1

2 Spis treści 1. Wprowadzenie 3 2. Informacje o systemie edicra lite Logowanie 5 4. Tryb edycji 7 5. Okno edycji treści Edycja treści Tworzenie hiperłącz Praca z plikami graficznymi Dodawanie powiększeń obrazków (pop-up) Dodawanie plików do pobrania (np. PDF, doc) Praca z tabelami Menu kontekstowe Edytor kodu HTML Galeria zdjęć edicra System aktualności Wylogowanie 29 Objaśnienie symboli: Przydatna wskazówka Informacje dla zaawansowanych Często zadawane pytanie 2

3 01. Wprowadzenie edicra jest systemem edycji treści, który dzięki swej prostocie i elastyczności znajduje zastosowanie w coraz większej liczbie przedsięwzięć internetowych. Zasada działania edicra jest prosta: po zalogowaniu się w specjalnym panelu zobaczysz swoją stronę w trybie edycji. Obok każdego tekstu pojawi się ikona edycji, a po kliknięciu w nią otworzy się nowe okienko (pop-up), w którym można dowolnie modyfikować zawarty tekst za pomocą specjalnego edytora typu WYSIWYG. Podobnie wygląda kwestia dodawania, edycji i usuwania zdjęć. Gdy w trybie edycji klikniesz w obrazek, otworzy się nowe okienko, które umożliwi Ci upload z dysku lokalnego dowolnego zdjęcia, które automatycznie zostanie odpowiednio zeskalowane. System sam przygotuje zarówno miniaturkę jak i powiększenie. Na nową wersję systemu edicra składają się dwie jego odmiany: lite i pro. Wersja lite umożliwia edycję już istniejących podstron Twojego serwisu, zarządzanie wersjami językowymi oraz galeriami zdjęć. Jest on idealnym rozwiązaniem dla większości projektów internetowych. Wersja pro jest nowatorskim systemem CMS (system zarządzania treścią) i przeznaczony jest do obsługi bardzo zaawansowanych serwisów internetowych. Niniejsza instrukcja obsługi ma na celu zapoznanie Cię z obsługą systemu. Zawiera ona również kilka bardziej zaawansowanych informacji, dzięki którym będziesz mógł w większym stopniu ingerować w wizualizację treści na Twojej stronie. Edytor TinyMCE: TinyMCE jest bardzo zaawansowanym edytorem WYSIWYG pracującym w środowisku przeglądarek Internet Explorer, Mozilla oraz Opera. Umożliwia edycję kodu HTML w bardzo przyjazny dla użytkownika sposób. Jest bardzo intuicyjny, a układem i grafiką nawiązuje do najpopularniejszych edytorów HTML takich jak Microsoft FrontPage. System jest w pełni kompatybilny z przeglądarkami: Internet Explorer 5+, FireFox, Opera. System wymaga obsługi przez serwer PHP 4+ System wymaga włączonej obsługi JavaScript w opcjach przeglądarki. Strona www systemu edicra: // Strona www producenta: 3

4 02. Informacje o odmianie lite Edicra w odmianie lite przeznaczone jest dla użytkowników, który chcą mieć możliwość pełnej edycji treści zawartej na ich stronach. Dzięki zastosowaniu zaawansowanego edytora on-line można bardzo szybko i sprawnie dodawać/edytować dosłownie wszystkie treści zawarte na stronie (łącznie z wyborem czcionek, dodawaniem zdjęć itp). edicralite posiada olbrzymią ilość przydatnych funkcji: pełne formatowanie tekstu, opcje kopiuj, wytnij, wklej, wklej z MS Word, punktowanie i numeracja podpunktów, opcje "wstecz" i "ponów", dodawanie, edycja, usuwanie hiperłącz oraz tzw. kotwic, dodawanie zdjęć oraz ich upload na serwer (wraz ze skalowaniem), usuwanie błędów kodu, edytor kodu HTML, wybór kolorów czcionek i tła, tworzenie i zaawansowana edycja tabel, wstawianie elementów niestandardowych (linie, znaki, itp.) opcja podglądu Rys. 1 - Widok okna edycji systemu edicra lite. 4

5 03. Logowanie Korzystanie z systemu jest możliwe tylko i wyłącznie po zalogowaniu w specjalnym Panelu logowania. Dzięki temu nikt niepowołany nie będzie miał dostępu do trybu edycji, a co za tym idzie nikt poza Tobą nie będzie miał możliwości zmiany treści na Twojej stronie. 1. Panel logowania. Tutaj wpisujesz swój login (pierwsze pole) oraz hasło (drugie pole tekstowe). Po kliknięciu przycisku zaloguj przechodzisz do trybu edycji. W celu wylogowania po dokonaniu edycji należy kliknąć wyloguj (więcej na temat wylogowania w rozdziale 8). Dostęp do panelu logowania możliwy jest po wpisaniu adresu: 2. Komunikaty tekstowe. W tym polu wyświetlane są komunikaty dotyczące procesu logowania: - zostałeś wylogowany - zalogowałeś się poprawnie - jesteś już zalogowany - zły login 5

6 Komunikaty występujące w Panelu logowania: 1. Zły login! Podany login/hasło są niepoprawne. Należy ponownie wprowadzić te dane. Przy logowaniu znaczenie mają również wielkości liter! 2. Jesteś już zalogowany! Logowanie nie było potrzebne, ponieważ byłeś już zalogowany. Wpisz adres swojej strony www w pasku, w celu przejścia do trybu edycji. Samodzielna zmiana loginu i hasła. W celu samodzielnego zmienienia loginu i hasła należy mieć dostęp do serwera FTP. Plik edc_password.php, zawierający definicję loginu i hasła znajduje się w katalogu edc_main. Należy edytować 3 i 4 linię kodu (może do tego posłużyć Notatnik systemu Windows ): define( "_ADMIN_LOGIN_", "login" ); define( "_ADMIN_PASSWORD_", "haslo" ); Gdzie odpowiednio login jest Twoim loginem, haslo jest Twoim hasłem. Przed zapisaniem zmian należy ustawić kodowanie pliku na UTF no-boom. W przeciwnym wypadku mogą wystąpić problemy z zalogowaniem. Nie wiem jak samodzielnie zmienić hasło. Co robić? Jeśli nie jesteś w stanie samodzielnie zmienić loginu/hasła logowania skontaktuj się z Biurem Obsługi Klienta Internet Arts. Dane kontaktowe dostępne są na stronie Konsultant sam dokona edycji tych danych. Pamiętaj, że musisz dysponować trzema ważnymi informacjami: 1. Adres serwera FTP. 2. Login do serwera FTP. 3. Hasło do serwera FTP. 6

7 04. Tryb edycji Jako tryb edycji rozumiemy widok strony www dostępny po zalogowaniu się w systemie. Jego charakterystyczną cechą jest występowanie małych ikonek z napisem edycja (widoczne na zrzucie ekranu poniżej). W trybie edycji można wybierać teksty oraz zdjęcia, które mają być edytowane (lub usuwane). Poniższy zrzut ekranu pokazuje tryb edycji na oficjalnej stronie edicra ( Rys. 3 - Widok okna edycji systemu edicra lite. 1. Ikona edycji treści. Ikona edycja. Po kliknięciu w nią otworzy się nowe okienko (pop-up), w którym można dokonywać edycji treści (więcej w rozdziale 4 Okno edycji treści ). Obszar, który podlega edycji otoczony jest przerywaną linią (Rys. 1). 2. Edytowalne zdjęcia/grafiki. Edytowalne zdjęcia lub grafiki są również aktywne w trybie edycji. Po kliknięciu w edytowalny obiekt otworzy się nowe okienko (pop-up) za pomocą którego można dokonać zmiany zdjęcia, można je również trwale usunąć (więcej w rozdziale 6 Okno edycji grafiki ). 7

8 05. Okno edycji treści Okno edycji jest bezpośrednim narzędziem służącym do zmiany tekstów wyświetlanych na stronie www. Dzięki niemu można implementować w kodzie strony www nowe treści (może to być zwykły tekst, może to również być kod HTML). Rys. 4 - Widok okna edycji systemu edicra lite. 1. Pole tekstowe W polu tym można swobodnie modyfikować treści. W razie potrzeby aktywuje się suwak po prawej stronie tego pola. 2. Menu narzędziowe Zawiera narzędzia, dzięki którym można edytować treść. Szczegółowy opis w kolejnym rozdziale Edycja treści. 3. Przycisk zapisz Używany po dopisaniu zmian treści. Powoduje zapisanie dokonanych zmian. 4. Przycisk zastosuj Używany po wykonaniu wszystkich zmian. Powoduje ich zapisanie, zamyka okno edycji i odświeża aktualizowaną stronę. 4. Przycisk anuluj Powoduje zamknięcie okna edycji bez zapisywania zmian. 8

9 06. Edycja treści System edicra umożliwia użytkownikom komfortową pracę z tekstem, tabelami, hiperłączami. Możliwe jest dodawanie, usuwaniem skalowanie plików graficznych oraz ich upload na serwer. System zapewnia możliwość wstawiania znaków specjalnych oraz wklejania tekstów bezpośrednio z Microsoft Word (z zachowaniem formatowania). Dodatkowo, możliwa jest bezpośrednia edycja kodu HTML za pomocą edytora tekstowego. Po najechaniu kursorem na narzędzie wyświetli się jego opis. Narzędzia, które są niedostępne w danym momencie prac są niepodświetlone. Rys. 5 - Widok paska narzędziowego w oknie edycji. Omówienie poszczególnych narzędzi z paska narzędziowego. Umożliwia formatowanie tekstu: pogrubienie, pochylenie, podkreślenie. Umożliwia wyrównanie tekstu: do lewej, centralnie, do prawej oraz wyjustowanie. Punktowanie i numeracja. Umożliwia tworzenie list. Tworzenie i usuwanie hiperłącz. Więcej informacji w kolejnym rozdziale. Dodawanie, edycja plików graficznych. Ustalanie koloru czcionki oraz koloru podświetlenia tekstu. Więcej informacji w kolejnym rozdziale. Praca z tabelami. Dodawanie tabel, edycja właściwości wiersza i komórki. Praca z tabelami. Wstaw wiersz przed, wstaw wiersz za, usuń wiersz. Praca z tabelami. Wstaw kolumnę przed, wstaw kolumnę za, usuń kolumnę Praca z tabelami. Podziel komórki, scal komórki. Opcje dodatkowe. Wklejanie tekstu bez formatowania, wklejanie tekstu bezpośrednio z MS Word (z zachowaniem formatowania), włączenie/wyłączenie widoku linii tabel, usuwanie formatowania, usuwanie zbędnego kodu, włączenie edytora HTML. Nadpisanie i podpisanie tekstu. Wstawienie symbolu specjalnego, podgląd widoku strony w oknie przeglądarki, uruchamianie trybu pełno-ekranowego. 9

10 07. Tworzenie hiperłącz edicralite umożliwia dodawanie, edycję oraz usuwanie hiperłącz. Daje również możliwość otwierania łącza w nowym oknie oraz definiowania parametru title (ang. tytuł). 1. Aby dodać hiperłącze należy zaznaczyć fragment tekstu lub grafikę, które mają stanowić łącze. 2. Następnie z paska narzędziowego należy kliknąć ikonę Wstaw/edytuj link : 3. Spowoduje to otworzenie nowego okna, które umożliwi dodanie łącza. Rys. 6 Okno definiowania hiperłącza. 4. W polu URL linku należy wpisać pełną ścieżkę do pliku, do którego chcemy stworzyć łącze. (jeśli chcemy stworzyć łącze do innej strony należy pamiętać o poprzedzeniu adresu - przykładowo: 5. Pole Cel daje możliwość otwarcia łącza w nowym oknie przeglądarki (domyślnie ustawiona jest opcja Otwórz link w tym samym oknie ). 6. W polu Tytuł można dodać opis łącza, który w kodzie HTML będzie widoczny w znaczniku title. Jest to opcjonalne i nie konieczne do poprawnego zdefiniowania hiperłącza. 7. Po uzupełnieniu w/w pól należy kliknąć Wstaw co spowoduje dodanie hiperłącza. Nie otwiera się okno z właściwościami hiperłącza. Nowe przeglądarki blokują pojawiające się nowe okienka (tzw. pop-up). Rozwiązanie tego problemu w rozdziale Rozwiązywanie częstych problemów strona

11 08. Praca z plikami graficznymi Edicra umożliwia zarządzanie plikami graficznymi na Twojej stronie www. Dzięki edytorowi można dodawać oraz usuwać pliki graficzne we wszystkich popularnych formatach: jpg, gif, bmp, png. Możliwe jest skalowanie zdjęć, dodawanie obrysu, definiowanie odstępów i marginesów. Nasz system zapewnia również możliwość ładowania zdjęć z dysku lokalnego na serwer oraz proporcjonalne skalowanie tych plików podczas przesyłania na serwer. W rozdziale tym pokażemy jak wykonywać podstawowych operacji na plikach graficznych. Dodawanie pliku graficznego na stronę. 1. Aby dodać plik graficzny na stronę należy kliknąć ikonę: Spowoduje to pojawienie się nowego okna dialogowego (Rys. 7). Rys. 7 Okno definiowania obrazka. URL obrazka: ścieżka do obrazka. Opis obrazka: alternatywny opis wyświetlany jako parametr alt. Otaczanie: wybór układu obrazka względem tekstu. Wymiary: opcja definiowania wysokości i szerokości obrazka (w pikselach). Ramka: ustalenie grubości ramki wokół obrazka (w pikselach). Pionowy odstęp: odstęp w pionie obrazka od treści (w pikselach). Poziomy odstęp: odstęp w poziomie obrazka od treści (w pikselach). 11

12 2. W okienku tym należy kliknąć ikonę przeglądania zdjęć (oznaczona jako 1 na rys. 7). Spowoduje to pojawianie się okienka służącego do ładowania pliku graficznego z dysku komputera prosto na serwer FTP. 1. Przycisk Przeglądaj : powoduje otworzenie okna z widokiem dysku Twojego komputera oraz umożliwia wyszukanie zdjęcia, które chcesz dodać. 2. Przycisk Upload : powoduje przesłanie danego zdjęcia na serwer. Rys. 8 Okno ładowania obrazka na serwer. 3. W oknie tym należy kliknąć przycisk Przeglądaj (oznaczony jako 1 na rys. 8). W otwartym okienku należy odszukać na dysku lokalnym zdjęcie, które chcemy wysłać na serwer. Należy pamiętać, że wysyłane zdjęcie nie może przekraczać 850 kb. 4. Po odnalezieniu zdjęcia na dysku należy kliknąć przycisk Upload (oznaczony jako 2 na rys. 8). 5. W kolejnym etapie można opcjonalnie dokonać zmiany wielkości załączanego obrazka poprzez podanie szerokości lub wysokości, którą chce się otrzymać (wielkości wyrażane w pikselach). Szerokość: definiowanie szerokości obrazka w pixelach. Wysokość: definiowanie wysokości obrazka w pixelach. Opcja Przytnij : powoduje przycinanie zdjęcia do wpisanych rozmiarów wysokości i szerokości. Rys. 9 Okno skalowania obrazka. 12

13 Wymiarowanie plików graficznych: Pozostawienie któregokolwiek z wymiarów jako "auto" oznacza docinanie w trybie automatycznym, Można podać wysokość i szerokość jako "auto". Wtedy obrazek będzie zapisywany w oryginalnej wielkości, Podanie tylko jednego z wymiarów jako "auto" oznacza, ze obrazek zostanie dostosowany do drugiego wymiaru tak aby zostały zachowane proporcje wymiarów, Opcja Przytnij : Zaznaczenie opcji przytnij przy jednoczesnym podaniu wymiarów w pikselach oznacza kadr o podanej wielkości. Oznacza to również, że zdjęcie zostanie pomniejszone tak aby jak najwięcej z obrazka zmieściło się w podanym kadrze. Boki obrazka które nie zmieszczą sie w kadrze po jego pomniejszeniu zostaną obcięte. Niezaznaczenie opcji przytnij oznacza, że zdjęcie zostanie pomniejszone tak, aby w całości zmieściło się w kadrze. Należy pamiętać, że zostaje zachowana skala obrazka. Nadmiarowość zostanie wypełniona tłem. 6. Po przesłaniu pliku na serwer należy zamknąć okno definiowania obrazka (rys. 7). Należy pamiętać, że system nie przetwarza zdjęć, których wielkość przekracza 1 MB. Jeśli Twoje zdjęcia są większe należy je przeskalować za pomocą dowolnego programu graficznego. Szybkość wysyłania obrazków na serwer jest determinowana przez ich wielkość oraz szybkość łącza. Jest to niezależne od systemu. Należy pamiętać, że maksymalna rozdzielczość zdjęcia wynosi 640x480 px. Wszystkie obrazki większe od tej wartości zostaną automatycznie pomniejszone niezależnie od innych opcji. 13

14 09. Dodawanie powiększeń obrazków (pop-up) Nasz system umożliwia uproszczone dodawanie powiększeń zdjęć wstawianych na stronę. Często zdarza się tak, że chcemy w artykule zamieścić zdjęcia. Aby zachować poprawny układ strony zalecamy wstawianie do artykułu miniatur zdjęć. Następnie dodanie do niego powiększenia, które będzie pojawiało się w nowym okienku (pop-up) po kliknięciu w miniaturkę. Poniżej opiszemy jak wstawić miniaturkę i jej powiększenie. 1. Aby dodać miniaturę naszego zdjęcia na stronę należy kliknąć ikonę: Spowoduje to pojawienie się nowego okna dialogowego (Rys. 7). Pełny opis tego okna znajduje się w poprzednim rozdziale. Rys. 7 Okno definiowania obrazka. 2. W oknie tym należy kliknąć przycisk Przeglądaj (oznaczony na czerwono na poniższym rysunku). W otwartym okienku należy odszukać na dysku lokalnym zdjęcie, które chcemy zamieścić w artykule jako miniaturkę. Należy pamiętać, że wysyłane zdjęcie nie może przekraczać 1 MB. Rys. 10 Okno ładowania obrazka na serwer. 14

15 3. Po odnalezieniu zdjęcia na dysku należy kliknąć przycisk Upload. 4. W kolejnym etapie można opcjonalnie dokonać zmiany wielkości załączanego obrazka poprzez podanie szerokości lub wysokości, którą chce się otrzymać (wielkości wyrażane w pikselach). Szczegółowy opis skalowania obrazka opisany jest w rozdziale Praca z plikami graficznymi na stronie Po przesłaniu pliku na serwer należy zamknąć okno definiowania obrazka (Rys. 7) poprzez kliknięcie przycisku Wstaw. 6. Na tym etapie mamy już wstawioną do artykułu miniaturkę naszego zdjęcia. 7. Kolejnym etapem jest dodanie powiększenia. Proces ten polega na stworzeniu hiperłącza do zdjęcia, które wcześniej (w punktach 1 6) dodawaliśmy do naszego artykułu jako miniaturkę. Operacja ta jest zbliżona do wstawiania zwykłego hiperłącza (rozdział 7). 8. Aby dodać powiększenie miniaturki należy ją zaznaczyć poprzez jednokrotne kliknięcie na nie. 9. Następnie z paska narzędziowego należy kliknąć ikonę Wstaw/edytuj link : 10. Spowoduje to otworzenie nowego okna, które umożliwi dodanie łącza. Rys. 6 Okno definiowania hiperłącza. 11. Po prawej stronie pola URL linku znajduje się ikona ładowania nowego zdjęcia. Po jej kliknięciu pojawi się okienko systemu edicra, które umożliwi załadowanie zdjęcia rys. 10 (zdjęcie to będzie automatycznie załadowane przez system jako powiększenie miniaturki). 15

16 12. W okienku tym należy zaznaczyć opcję obrazek popup (oznaczona na czerwono na rysunku poniżej), a następnie kliknąć przycisk Dalej. Spowoduje to pojawianie się okienka służącego do ładowania pliku graficznego z dysku komputera prosto na serwer FTP. Rys. 11 Okno wyboru typu ładowanego pliku. 13. W oknie tym należy kliknąć przycisk Przeglądaj (oznaczony na czerwono na poniższym rysunku). W otwartym okienku należy odszukać na dysku lokalnym zdjęcie, które chcemy zamieścić w artykule jako miniaturkę. Należy pamiętać, że wysyłane zdjęcie nie może przekraczać 1 MB. Rys. 12 Okno ładowania obrazka na serwer. 14. Po odnalezieniu zdjęcia na dysku należy kliknąć przycisk Upload. 15. W kolejnym etapie można opcjonalnie dokonać zmiany wielkości załączanego obrazka poprzez podanie szerokości lub wysokości, którą chce się otrzymać (wielkości wyrażane w pikselach). Szczegółowy opis skalowania obrazka opisany jest w rozdziale Praca z plikami graficznymi na stronie Ostatnim krokiem jest kliknięcie przycisku Wstaw co spowoduje dodanie powiększenia do miniaturki zdjęcia w naszym artykule. 16

17 Szybkość wysyłania obrazków na serwer jest determinowana przez ich wielkość oraz szybkość łącza. Jest to niezależne od systemu. Należy pamiętać, że system nie przetwarza zdjęć, których wielkość przekracza 1 MB. Jeśli Twoje zdjęcia są większe należy je przeskalować za pomocą dowolnego programu graficznego. Preferowana rozdzielczość wysyłanych zdjęć to 640x480 pixeli. System samodzielnie generuje powiększenia za pomocą skryptu JavaScript. Skrypt ten jest powszechnie wykorzystywany w sieci i jest kompatybilny z popularnymi przeglądarkami.wykorzystuje on wyskakujące okienka pop-up. 17

18 10. Dodawanie plików do pobrania (np. PDF, doc) Często zdarza się, że ważne jest dodanie na stronie pliku PDF czy Word do pobrania. Edicra zapewnia taką możliwość. Dzięki specjalnemu modułowi uploadu plików można teraz w kilku prostych krokach to wykonać. Poniżej opiszemy jak wstawić plik PDF do pobrania. 1. Pierwszym krokiem jest zaznaczenie tekstu lub obrazka, który ma być łączem do naszego pliku PDF, który chcemy załączyć do strony: Rys. 13 Zaznaczenie tekstu, który będzie łączem do pliku. 2. Następnie z paska narzędziowego należy kliknąć ikonę Wstaw/edytuj link : 3. W nowo-otwartym oknie należy kliknąć w ikonę zaznaczoną poniżej na czerwono: Rys. 6 Okno definiowania hiperłącza. 18

19 4. Pojawia się nowe okno wyboru typu ładowanego na serwer pliku. Z racji tego, że zamieszczamy plik typu PDF zaznaczamy opcję standardowy plik i klikamy przycisk Dalej. Rys. 14 Okno wyboru typu ładowanego pliku. 5. Kolejnym krokiem jest wybranie naszego pliku z dysku. W oknie ładowania pliku (rysunek poniżej) klikamy przycisk Przeglądaj i wybieramy plik z naszego komputera. Rys. 15 Okno ładowania pliku na serwer. 6. Po wybraniu pliku klikamy przycisk Upload. System ładuje plik na serwer co może zająć nawet do kilku minut w zależności od wielkości pliku oraz szybkości łącza. Finalnie otrzymujemy link do nowego pliku, który samodzielnie załadowaliśmy na nasz serwer. 19

20 11. Praca z tabelami Nasz system zapewnia zaawansowaną pracę z tabelami. W tym rozdziale przedstawimy jak wykonywać podstawowe operacje takie jak: tworzenie tabel o określonej liczbie wierszy i kolumn, dodawanie wierszy, dodawanie kolumn, łączenie i dzielenie komórek lub kolumn. Rys Ikony z menu narzędziowego potrzebne podczas pracy z tabelami Tworzenie tabeli na stronie. 1. W celu wstawienia na stronę nowej tabeli (w naszym przykładzie wstawimy tabelę o dwóch wierszach i dwóch kolumnach) należy ustawić kursor w miejscu, w którym chcemy utworzyć tabelkę i kliknąć ikonę: 2. Naszym oczom ukaże się nowe okienko (Rys. 17). Rys. 17 Menu wstawiania/edycji tabeli. Kolumn: ilość kolumn tworzonej tabeli. Wierszy: ilość wierszy tworzonej tabeli. Margines wewnątrz komórek: wyrażany w pikselach. Odstępy między komórkami: wyrażany w pikselach. 20

21 Wyrównanie: do wyboru środek, lewo lub prawo. Ramka: szerokość ramki wyrażona w pikselach. Szerokość: szerokość tabeli wyrażona w pikselach lub procentach. Wysokość: Wysokość tabeli wyrażona w pikselach. Klasa: wybór klasy stylu CSS. 3. W oknie wstawiania tabeli (Rys. 17) w polach Kolumn i Wierszy wpisujemy 2. W polach Szerokość i Wysokość możemy zdefiniować wymiary tworzonej tabeli (w pikselach lub procentowo). Następnie akceptujemy przyciskiem Wstaw. Tabela została utworzona. Rys. 18 Menu wstawiania/edycji tabeli zakładka Zaawansowane Id: możliwość definiowania identyfikatora. Podsumowanie: możliwość zdefiniowania podsumowania. Styl: dodawanie opisu stylu tabeli (CSS). Kierunek tekstu: do wyboru Lewy do prawego, Prawy do lewego Obrazek tła: Możliwość ustawienia tła tabeli w postaci pliku graficznego. Kolor ramki: wybierany z palety kolorów. Kolor tła: wybierany z palety kolorów. 21

22 Wstawianie/usuwanie wierszy Operacje te wykonujemy za pomocą ikon w menu narzędziowym: Od lewej: wstawienie wiersza powyżej, wstawienie wiersza poniżej, usunięcie wiersza. Wstawianie/usuwanie kolumn Operacje te wykonujemy za pomocą ikon w menu narzędziowym: Od lewej: wstawienie kolumny przed, wstawienie kolumny za, usunięcie kolumny. Edycja właściwości komórki Zmiana parametrów komórki (zaznaczonej lub wszystkich komórek tabeli) możliwe jest po kliknięciu prawym przyciskiem myszy w obszarze komórki i wybranie z menu kontekstowego pozycji Właściwości komórki Rys. 19. Rys. 19 Menu narzędziowe właściwości komórki. Właściwości komórki definiuje się w specjalnym okienku. Zmiany mogą dotyczyć tylko aktualnie wybranej komórki lub mogą zostać przypisane wszystkim komórką w danym wierszu lub tabeli Rys. 20. Rys. 20 Okno edycji parametrów komórki. 22

23 12. Menu kontekstowe Menu kontekstowe pojawia się po kliknięciu prawym przyciskiem myszy w oknie edycji treści. W zależności od tego, w jakim miejscu wykona się kliknięcie menu będzie miało inną zawartość. Po kliknięciu prawym przyciskiem poza tabelą menu będzie miało następujący wygląd: Rys. 21 Menu kontekstowe Po kliknięciu prawym przyciskiem poza w tabeli menu będzie miało następujący wygląd: Rys. 22 Menu kontekstowe Menu kontekstowe zawiera najczęściej wykorzystywane w danym miejscu opcje, co sprawia, że praca z systemem jest jeszcze bardziej intuicyjna i komfortowa. 23

24 13. Edytor kodu HTML System umożliwia bezpośrednią edycję kodu HTML. Zapewnia to możliwość pisania treści za pomocą języka HTML lub wklejanie gotowego kodu. Otwarcie okna edytora HTML odbywa się po kliknięciu przycisku: Okno edycji HTML wygląda następująco: Rys. 23 Okno edycji HTML Po wprowadzeniu zmian w kodzie należy zapisać zmiany poprzez kliknięcie przycisku Aktualizuj. Można również nie wprowadzać zmian wystarczy zamknąć okno lub kliknąć przycisk Anuluj. Istnieje możliwość wklejania kodu HTML wygenerowanego wcześniej za pomocą edytorów HTML typu Microsoft FrontPage czy Macromedia Dreamweaver. 24

25 14. Galeria zdjęć edicra System edicra zapewnia możliwość umieszczania zdjęć (miniatur i powiększeń) na stałe w zdefiniowanych miejscach strony (takich jak galerie zdjęć). Sprawia to, że dodawanie, aktualizacja zdjęć jest jeszcze łatwiejsza niż w przypadku standardowego dodawania zdjęć za pomocą edytora. Rozwiązanie takie ma jeszcze jedną zaletę system sam generuje miniaturę i powiększenie zdjęcia w z góry zdefiniowanych rozmiarach. Dzięki oknu edycji grafiki można sprawnie dodawać, usuwać lub podmieniać zdjęcia na stronach www. Po wysłaniu nowego obrazka na serwer system sam stworzy jego miniaturkę (która wyświetli się na stronie) oraz jego powiększenie (wyświetlane po kliknięciu w miniaturkę). Wielkość miniaturki i powiększenia jest definiowana wcześniej w kodzie strony. Wymiana/usuwanie/dodawanie zdjęć Zamiana lub dodawanie obrazka za pomocą systemu edicra jest dziecinnie proste. Po kliknięciu przycisku Przeglądaj otworzy się standardowe okienko systemu, które umożliwi wybranie pliku graficznego. Po jego odnalezieniu na dysku i zaakceptowaniu w polu tekstowym obok przycisku Przeglądaj pojawi się dokładna ścieżka dostępu do tego pliku. Po kliknięciu w przycisk Wyślij obrazek zostanie wysłany na serwer i przeskalowany przez system. Usuwanie obrazka ze strony wymaga zaznaczenia checkbox a przy napisie Potwierdzam, a następnie kliknięcie przycisku Usuń. Do systemu edicra można dodawać obrazki o rozmiarze nie przekraczającym 1 MB. Szybkość wysyłania obrazków na serwer jest determinowana przez ich wielkość oraz szybkość łącza. Jest to niezależne od systemu. 25

26 15. System aktualności System edicra zapewnia w swojej najnowszej wersji zawiera system aktualności, dzięki któremu można w bardzo prosty sposób zamieszczać na swojej stronie aktualne informacje. Każdy wpis do bazy aktualności składa się z następujących elementów: Tytuł wiadomości Data dodania Wstęp do wiadomości Miniaturka zdjęcia Pełna wiadomość ( po kliknięciu na link czytaj więcej ) System zapewnia dwie możliwości sortowania wpisów do bazy aktualności: manualnie (za pomocą specjalnych strzałek do ustawiania kolejności) oraz po dacie (wyświetlanie od najnowszego do najstarszego). System newsów automatycznie generuje archiwum newsów. Poniżej przedstawiamy okno zarządzania newsami: Rys. 24 Okno zarządzania aktualnościami 26

27 Kolumna nazwa: Wyświetla nazwę systemową aktualności (identyfikacja wiadomości w systemie) Kolumna tytuł: Prezentuje tytuły kolejnych wiadomości wyświetlanych na stronie www. Kolumna kolej: Gdy aktywne jest ręczne sortowanie wiadomości daje możliwość zmiany kolejności wpisów za pomocą specjalnych niebieskich strzałek. Kolumna data: Prezentuje daty przypisane do kolejnych wiadomości. Ikony zarządzania wiadomościami: - umożliwia dodanie nowej wiadomości - umożliwia edytowanie wiadomości - usuwa wiadomość Poniżej prezentujemy okno dodawania/edytowania wstępu do wiadomości: Rys. 25 Okno dodawania/edytowania wiadomości 27

28 Na rysunku 25 przedstawiliśmy okno za pomocą którego definiujemy podstawowe informacje o wiadomości takie jak: tytuł, data wpisu, wstępniak, obrazek do wstępniaka. Po dodaniu tych danych na stronie ze spisem aktualności zobaczymy wpis, którego struktura jest następująca: Rys. 26 Przykładowe zajawki wiadomości Każda wiadomość może posiadać pełne rozwinięcie czyli specjalną podstronę z pełnymi informacjami, zdjęciami i plikami do pobrania. W celu dodania pełnej wiadomości należy kliknąć na zakładkę o nazwie ciało artykułu. Pojawi się wówczas klasyczny edytor edicra za pomocą którego można dodać pełny artykuł. Rys. 27 Okno dodawania/edytowania pełnej wiadomości 28

29 16. Wylogowanie Po zakończeniu edycji należy się bezpiecznie wylogować z systemu dzięki temu nikt niepowołany nie będzie miał dostępu do strony, a nam nie będą się wyświetlały ikony edycji przy tekstach. Aby się wylogować należy przejść do Panelu logowania (rozdział 1. Logowanie ). W celu wylogowania należy kliknąć przycisk Wyloguj. Po kliknięciu zostaniesz bezpiecznie przeniesiony na stronę główną swojego serwisu. 29