W poniższym dokumencie opisany został ogólny interfejs systemu Imperial, sposób korzystania z niego oraz opis jego funkcjonalności.

1. 1

   Dodatkowe opcje dotyczące katalogu

   

   1. A

      Przejście do widoku listy dodanych elementów w tym przypadku do listy akapitów strony opisowej. Widok aktualnie wyświetlony na obrazku.

   2. B

      Przejście do konfiguracji katalogu.

   3. C

      Przejście do podglądu katalogu od strony klienta.

2. 2

   Dodanie miejsca aktualnie wyświetlanego do skrótów. Wyświetli się okno dialogowe.

   

   1. A

      Przycisk dodawania nowego skrótu, uruchamia okno dialogowe D.

   2. B

      Przycisk po najechaniu pokazuje dodane skróty

   3. C

      Lista dodanych skrótów.

   4. D

      Okno dialogowe dodawania nowego skrótu poprzez podanie nazwy.

3. 3

   Wyszukiwanie w liście wierszy, które pasują do wpisanej frazy i wyświetlenie tylko pasujących. Użycie widoczne na liście aktywnych filtrów.

4. 4

   Przejście do formularza dodawania nowego elementu do treści katalogu. Dla strony opisowej będzie to nowy akapit. W tej części strony mogą występować dodatkowe przyciski dotyczace listy.

5. 5

   Pasek zawierający opcje selekcji elementów z listy. Oznacza to, że zostaną pokazane tylko te, które spełniają warunki selekcji. W przypadku z obrazka będą to tylko elementy, które są opublikowane.

6. 6

   Zaznaczenie wszystkich elementów listy.

7. 7

   Usunięcie wybranych elementów listy.

8. 8

   Pager - nawigacja pomiędzy kolejnymi stronami listy elementów w przypadku, kiedy jest ich więcej niż zadeklarowana wartość polu o znaczniku 9.

9. 9

   Wybór liczby elementów na jednej stronie.

10. 10

    Przycisk sortowania elementów, za pomocą metody złap, przeciąg i upuść. Elementy będą wyświetlane na stronie w kolejności takiej jak znajdują się na liście.

11. 11

    Nagłówek kolumny po kliknięciu możliwe sortowanie elementów według wybranej kolumny w dwóch trybach rosnąco i malejąco.

12. 12

    Kolumna zaznaczania elementów.

13. 13

    Najważniejsze opcje dla elementu listy:

    1. publikacja elementu w treści katalogu.

    2. edycja treści elementu.

    3. usunięcie elementu.

14. 14

    Aktualna pozycja w systemie zarządzania.

1. 1

   Zakładki formularza, nagłówki mówią o zawartości.

2. 2

   Etykieta pola informuje o przeznaczeniu pola. Znak * informujący o wymaganym polu. Nie wypełnienie pola zwraca informacje o błędach wypełnienia formularza.

3. 3

   Krótkie pole tekstowe do wprowadzenia informacji. Może być rozdzielone na wersje językowe o czym świadczą flagi przy pole.

4. 4

   Dłuższe pole tekstowe do wprowadzenia informacji.

5. 5

   Edytor HTML zawiera większość narzędzi znanych z pakietu MS Office Word. Na większą uwagę zasługują funkcje dodawania linków, zdjęć, filmów, opcja wyświetlająca kod źródłowy wprowadzonej treści oraz menu Widok.

   

   1. A

      Wstawianie linku do treści. Po kliknięciu pojawi się okno, w którym należy podać adres URL oraz pod jakim tekstem ma występować link w treści. W opcji Tytuł podajemy infrmacje dotyczące atrybutu title (treść po najechaniu) linku. W opcji Cel ustawia się, czy link ma otworzyć się w nowym oknie.

      

   2. B

      Wstawianie zdjęcia do treści. Po kliknięciu pojawi się okno wstawiania / edycji obrazka.
      Opcje ogólne dotyczą:

      • Źródła zdjęcia - wybieramy ikonę przeglądania obok pola i za pomocąMenadżera plików wstawiamy zdjęcie,

      • Opis obrazka - ustawia wartość ALT zdjęcia, która wykorzystywana jest przy optymalizacji witryny pod kątem wyszukiwarek,

      • Wymiary - pozwalają ustalić szerokość i wysokość obrazka.

      Opcje zaawansowane dotyczą:

      • Pole Styl - pozwala na dodanie wartości dla atrybutu style dla zdjęcia według reguł css3.

      • Pola odstęp pionowy i poziomy - odpowiadają za ustawienie marginesów odpowiednio pionowy - góra i dół poziomy - lewy i prawy.

      • Pole Ramka - ustalamy szerokość ramki w pikselach.

      

   3. C

      Wstawianie filmu do treści. Po kliknięciu pojawi się okno wstawiania / edycji wideo.
      W opcjach ogólnych ustawiamy:

      • Źródło - link do pliku wideo np. https://www.youtube.com/watch?v=SJUkDK5BwB8

      • Wymiary - ustawienie szerokości oraz wysokości wideo.

      W opcjach osadź znajduje się kod html wideo.

      W opcjach zaawansowanych ustawiamy:

      • Źródło alternatywne - link do pliku wideo który będzie wyświetlany w momencie kiedy link poday w źródle będzie niedostępny. np. https://www.youtube.com/watch?v=SJUkDK5BwB8

      • Plakat - ustawia obraz, który jest wyświetlany podczas ładowania filmu.

      

   4. D

      Podgląd kodu źródłowego dodanej treści.

   5. E

      Menu Widok zawiera następujące opcje:

      • Pokaż bloki - wyświetla bloki html w postaci ramek, które pomagają na edycję treści.

      • Podgląd - wyświetla widok treści.

      • Wymiary - ustawienie szerokości oraz wysokości wideo.

      • Pełny ekran - przełącza edytor w tryb pracy na pełnym ekranie.

6. 6

   Pole do wprowadzania liczb całkowitych.

7. 7

   Pole do wprowadzania liczb rzeczywistych.

8. 8

   Pole do wprowadzania ceny.

9. 9

   Pole do wprowadzania NIP.

10. 10

    Pole do wprowadzania Pesel.

11. 11

    Pole podania numeru konta bankowego.

12. 12

    Pole podania kodu pocztowego.

13. 13

    Pole podania numeru telefonu.

14. 14

    Pole podania adresu e-mail.

15. 15

    Pole podania wprowadzania hasła. Ikona służy do generowania losowego prawidłowego hasła. Ikona po przytrzymaniu przycisku myszy pokazuje wprowadzone hasło.

16. 16

    Pole do wprowadzania adresu url.

17. 17

    Pole wyboru koloru po kliknięciu w ikonę koloru pojawia się panel dodawania koloru. Kliknięcie w usuwa wybrany kolor przywracając wartość domyślną.

    

    Panel wyboru koloru pozwala na skorzystanie z dostępnej palety lub wprowadzaniu wartości w postaci RGB lub szesnastkowej.

18. 18

    Pole dodawania ikon zdefiniowanych w systemie.

19. 19

    Pole wyboru wartości liczbowej z paska.

20. 20

    Pole wielokrotnego wyboru z wyszukiwarką.

    

    1. A

       Wyszukiwarka opcji na liście.

    2. B

       Lista opcji do wyboru.

    3. C

       Zaznaczone opcje z listy. Ikoną możemy usuwać wybrane opcje.

    4. D

       Duża liczba opcji dzieli listę na kolejne podstrony.

21. 21

    Pole listy rozwijalnej.

22. 22

    Pole wielokrotnego wyboru.

23. 23

    Pole jednokrotnego wyboru.

24. 24

    Pole wyboru daty i czasu po kliknięciu w ikonę pojawia się kalendarz z wyborem czasu, z którego wybieramy datę i czas. Kliknięcie w usuwa wybraną datę i czas.

    

    Panel wyboru daty i czasu za pomocą przycisków nawigacji pozwala poruszać się po kalendarzu. Wybór daty następuje po kliknięciu w odpowiednią wartość lub zmianie czasu. Opcja Dzisiaj wstawia aktualną datę i czas.

25. 25

    Pole wyboru daty po kliknięciu w ikonę pojawia się kalendarz, z którego wybieramy datę. Kliknięcie w usuwa wybraną datę.

    

    Panel wyboru daty za pomocą przycisków nawigacji pozwala poruszać się po kalendarzu. Wybór daty następuje po kliknięciu w odpowiednią wartość. Opcja Dzisiaj wstawia aktualną datę.

26. 26

    Pole wyboru czasu po kliknięciu w ikonę pojawia się wybór czasu, z którego wybieramy godzinę, minutę i sekundę. Kliknięcie w usuwa wybrany czas.

    

    Wybór czasu następuje po wybraniu odpowiedniej wartości za pomocą suwaków. Opcja Teraz wstawia aktualną datę.

27. 27

    Panel dodawania nowych zdjęć, po wybraniu opcji Przeglądaj wyświetla się systemowe okno wyboru plików. Brak ograniczenia liczby dodawanych zdjęć jednocześnie, ładowanie zdjęć odbywa się w tle strony.

28. 28

    Panel dodawania nowych zdjęć, po wybraniu opcji Przeglądaj wyświetla się systemowe okno wyboru plików. Każdy plik wybieramy osobno.

29. 29

    Panel dodanych zdjęć, zawiera informacje o nazwie pliku, opisie oraz dostępnych miniaturach.

    

    Panel udostępnia następujące opcję:

    • Miniatury - po najechaniu myszą na rozmiarze miniatur wyświetla się opcja Dopasuj pozwala ona na dopasowanie, która część zdjęcia ma mieścić się na miniaturze wybranego rozmiaru. Opcja Utwórz(x) tworzy brakującą miniaturę która nie została wygenerowana podczas dodawania zdjęcia.

    • Pobierz - pozwala na pobranie zdjęcia.

    • Usuń - usuwa zdjęcie.

    • Ustaw opis - ustawia wartość opis oraz atrybut ALT do optymalizacji pod kątem wyszukiwarek.

    • Zamień - pozwala zamienić dodane zdjęcie.

    • Ustaw jako główne - ustawia wybrane zdjęcie jako to, które będzie reprezentować artykuł tam gdzie wyświetlone jest tylko jedno jego zdjęcie.

    • Przytnij - pozwala na przycięcie zdjęcia.

    Panel przycinania / dopasowania zdjęcia:

    

    Na panelu należy wybrać obszar, który pozostanie jako obraz naszego zdjęcia za pomocą rozjaśnionego pola oraz dostępnych punktów transformacji. Modyfikację kończymy klikając Zapisz.

30. 30

    Panel pojedynczego zdjęcia, wyświetla zdjęcie oraz informacje o rozmiarze dodanego zdjęcia. Dostępna jest opcja dopasowania obrazu do odpowiedniego rozmiaru za pomocą Panelu przycinania / dopasowania.

31. 31

    Dodawanie zdjęć z schowka. Polega na skopiowaniu dowolnego zdjęcia skrót CTRL+C lub wybór z dostępnego oprogramowania w którym otwieramy zdjęcie opcji kopiowania. Następnie należy przejść do pola dodawania obrazu z schowka i kliknać przycisk dodawania. Aby dodać obraz należy wcisnać CTRL+V zdjęcie zostanie dodane, będzie widoczny podgląd. Dodany obraz posiada nazwę pliku, oraz możliwość usunięcia go.

    

32. 32

    Panel dodawania plików np. załączników, kliknięcie Przeglądaj wyświetla okno systemowe wyboru pliku.

33. 33

    Panel dodanych plików zawiera informacje o nazwie, opisie oraz podstawowe opcje:

    • Pobierz - umożliwia pobranie pliku.

    • Usuń - usuwa plik.

    • Zmień / dodaj opis - Dodaje opis do pliku, który jest wykorzystywany do optymalizacji pod kątem wyszukiwarek.

34. 34

    Przycisk zapisuje i powraca do edycji formularza.

35. 35

    Przycisk zapisuje i przechodzi do formularza dodawania nowego elementu.

36. 36

    Przycisk zapisuje i przechodzi do listy dodanych elementów.

37. 37

    Przycisk anuluje dodawania / edycję elementu.

1. 1

   Pole błędnie uzupełnione podczas wypełniania formularza.

2. 2

   Informacja o błędzie jaki popełniono przy wypełnianiu pola formularza.