Dynamiczna pomoc dla Edytora Tekstu.

Transkrypt

1 Dynamiczna pomoc dla Edytora Tekstu. Witamy w dynamicznej pomocy dla edytora tekstu. Poniżej znajdą Państwo wskazówki, które sprawią, że praca z edytorem tekstu będzie łatwa i przyjemna. Spis treści Wstęp... 2 Wprowadzenie do pracy z edytorem tekstu Telerik... 2 Wprowadzanie tekstu... 5 Dynamicznie... 5 Wklejając... 5 Formatowanie... 6 Formatowanie nagłówków... 7 Formatowanie tekstu... 8 Lista numerowana Lista punktowana Tekst wklejony jako Plain Text Tekst wpisywany dynamicznie Wstawianie i formatowanie łącza Linki w ramach tej samej witryny Do stron zewnętrznych Formatowanie adresu Modyfikacja istniejących łączy Modyfikacja tabeli Wstawianie znaków specjalnych Wstawianie paragrafu Wprowadzanie lead a... 37

2 Wstęp W ramach Nowej witryny WWW, zostały utworzone dwie odrębne witryny dla: KDPW S.A. i KDPW_CCP S.A. zachowanej w tej samej konwencji stylistyczno-wizualnej. Jedyną różnicą jest kolorystyka, która dla KDPW pozostała w odcieniach zieleni natomiast dla KDPW_CCP w odcieniach pomarańczy. Sposób pracy z edytorem tekstu jest ten sam bez względu na witrynę, w której Państwo pracujecie. Oznacza to, że sposób formatowania treści jest ten sam natomiast różnica leży w kolorystyce np. punktatorów, numeratorów czy ikon łączy. Ilość zdefiniowanych styli dla obu witryn jest ta sama. UWAGA: Użytkownik modyfikujący treści na witrynie KDPW ma dostępne tylko i wyłącznie style dla tej witryny zdefiniowane. Podobnie gdy użytkownik edytuje treści w witrynie KDPW_CCP nie ma takiej możliwości, że wykorzysta style zdefiniowane dla KDPW.

3 Wprowadzenie do pracy z edytorem tekstu Telerik Edytor tekstu jest aktywny gdy kursor spełnione są dwa warunki: Strona jest w trybie edycji Kursor myszy znajduje się w oknie edytora Rysunek 1 Puste aktywne okno edytora Poniżej znajduje się lista wszystkich dostępnych przycisków, z krótkim opisem funkcjonalności: Wytnij Umożliwia wycięcia zaznaczonego tekstu i umieszczenie go w schowku Wklej Umożliwia wklejenie zawartości schowka Wstaw symbol Umożliwia wstawienie znaków specjalnych, które dostępne są na liście rozwijanej Pogrubienie Umożliwia pogrubienie zaznaczonego tekstu Indeks dolny Umożliwia utworzenie małych liter poniżej linii bazowej tekstu

4 Indeks górny Umożliwia utworzenie małych liter powyżej linii tekstu Wyczyść formatowanie umożliwia wyczyszczenie całego formatowania w zaznaczeniu co spowoduje pozostawienie tylko zwykłego tekstu Punktory Umożliwia rozpoczęcie listy punktowanej Numerowanie Umożliwia rozpoczęcie listy numerowanej Zwiększ wcięcie Umożliwia zwiększenie poziomu wcięcia akapitu Zmniejsz wcięcie Umożliwia zmniejszenie poziomu wcięcia akapitu Wyrównaj tekst do lewego marginesu Do środka w poziomie Umożliwia wyśrodkowanie tekstu Wyrównaj tekst do prawego marginesu Wyjustuj Umożliwia wyrównanie tekstu do lewego i do prawego marginesu Zastosuj styl Umożliwia zastosowanie zdefiniowanych styli dla zaznaczonego tekstu. Wstaw linię Umożliwia wstawienie linii w układzie horyzontalnym w miejscu ustawienia kursora Wstaw łącze Umożliwia utworzenie łącza do strony lub dokumentu Usuń link Umożliwia usunięcie łącza Szybka pomoc - Dynamiczna pomoc korzystania z edytora tekstu Wklej Umożliwia wklejenie Plain text zwykłego tekstu Cofnij Umożliwia cofnięcie ostatniej akcji Powtórz Umożliwia powtórzenie ostatniej akcji Wstaw paragraf Umożliwia wstawienie nowego paragrafu

5 Wprowadzanie tekstu Nową treść na stronie można wprowadzać na dwa sposoby: Dynamicznie - wpisując tekst na bieżąco Tekst wprowadzany dynamicznie będzie automatycznie formatowany jako zwykły tekst. Rysunek 2 Aktywne okno edytora tekstu Telerik Wklejając - z innego edytora tekstu, należy wykonać kroki zapisane poniżej: Kopiujemy tekst z innego edytora treści. Stronę, na której chcemy wkleić tekst otwieramy w trybie do Edycji, tzn. wybieramy z menu Akcje Witryny -> Edytuj stronę. Ustawiamy się kursorem myszy w oknie edytora i wybieramy przycisk Paste Plain Text

6 Rysunek 3 Aktywne okno edytora - wklejanie zwykłego tekstu tekstu. Tekst został wyczyszczony ze wszystkich styli. Teraz przechodzimy do formatowania tego Formatowanie Formatowanie zwykłego tekstu odbywa się z wykorzystaniem zdefiniowanych dla Państwa styli. Lista tych styli znajduje się w polu Apply CSS na liście rozwijanej. Poniżej znajduje się cała lista dostępnych styli. Dołożyliśmy wszelkich starań żeby nazewnictwo i prezentacja wizualna styli była jak najbardziej intuicyjna.

7 Formatowanie nagłówków Zdefiniowano 3 rodzaje nagłówków: Rysunek 4 Lista zdefiniowanych w edytorze styli Nagłówek pisany ozdobną czcionką z marginesem dolnym. Nagłówek pisany tą samą ozdobną czcionką ale bez marginesu dolnego. Nagłówek pisany tą samą ozdobną czcionką co powyższe ale w mniejszym rozmiarze. W oknie edytora zaznaczamy tekst [patrz rys.4-1], który chcemy sformatować jako nagłówek i z listy wybieramy styl nagłówka [patrz rys. 4-2].

8 Rysunek 5 Aktywne okno edytora tekstu - formatowanie nagłówka Formatowanie tekstu Zdefiniowano 4 sposoby formatowania tekstu: Tekst pisany zwykłą czcionką w kolorze pomarańczowym Tekst pisany zwykłą czcionką w kolorze szarym Tekst pisany pogrubioną czcionką w kolorze szarym Tekst pisany pogrubioną czcionką w kolorze pomarańczowym

9 W oknie edytora zaznaczamy tekst [patrz rys.5-1], który chcemy sformatować i z listy wybieramy dostępne style dla tekstu [patrz rys 5-2]. Rysunek 6 Aktywne okno edytora tekstu - formatowanie

10 Lista numerowana Rysunek 7 Aktywne okno edytora tekstu - formatowanie Formatowanie listy numerowanej zależy od sposobu wprowadzanie tekstu: Tekst wklejony jako Plain Text Zakładamy, że tekst został wprowadzony zgodnie z instrukcją zamieszczoną w części Wprowadzanie tekstu Wklejanie. Zaznaczamy tekst [patrz rys. 7-1], który ma stanowić pierwszy punkt listy numerowanej i wybieramy przycisk [patrz rys.7-2]

11 Rysunek 8 Aktywne okno edytora tekstu - wstawianie listy numerowanej Zaznaczony tekst zostanie umieszczony na liście z numerem 1 i zostanie sformatowany czcionką ozdobną [patrz rys. 8]. Rysunek 9 Aktywne okno edytora tekstu - formatowanie listy numerowanej

12 Ten tekst można sformatować w dowolnie wybrany sposób, wykorzystując zdefiniowane style z listy. W tym celu zaznaczamy ponownie tekst [patrz rys.9-1] i wybieramy styl z listy [patrz rys. 9-2] Rysunek 10 Aktywne okno edytora tekstu - formatowani listy Rysunek 11 Aktywne okno edytora tekstu - widok sformatowanej listy

13 Zaznaczony tekst został sformatowany pogrubioną czcionką [patrz rys. 10] Chcąc dalej kontynuować numerowanie, musimy ustawić kursor na początku wiersza, który będzie stanowił drugi punkt listy i klawiszem BACKSPACE z klawiatury przenieść tekst do poprzedniej linii. Póki co uzyskaliśmy taki efekt, że cały tekst został sformatowany ozdobną, pomarańczową czcionką.[patrz rys. 11] Rysunek 12 Kontynuacja numerowania Następnie, nie zmieniając pozycji kursora kliknijmy ENTER na klawiaturze komputera. Tekst zostanie przeniesiony do nowego wiersza z zachowaniem kolejności numerowania. Wykonajmy te same czynności dla kolejnego elementu listy, tzn. przenieśmy BACKSPACEm do poprzedniej linii i kliknijmy ENTER. Uzyskamy kolejny punkt w liście numerowanej.

14 Rysunek 13 Aktywne okno edytora tekstu - Formatowanie listy Formatując tekst listy numerowanej nie musimy wykonywać każdej z czynności osobno dla kolejnych punktów (chyba, że docelowe formatowanie ma być różne). Istnieje możłiwość zaznaczenia całego tekstu i wybrania z listy pożadanego formatowania. Rysunek 14 Formatowanie listy numerowanej

15 W efekcie użytkownik otrzyma sformatowane zwykłą czcionką pkt. 2 i 3. [patrz rys. 14] Rysunek 15 Sformatowana lista numerowana Tekst pisany dynamicznie W oknie edytora należy wstawić kursor myszy w miejscu gdzie chcemy rozpocząć listę numerowaną i z opcji edytora wybrać przycisk, który umożliwia wstawienie listy numerowanej pierwszy punkt listy.. Otrzymamy

16 Rysunek 16 Dynamiczne tworzenie listy Gdy pojawi się pierwszy element listy wprowadzamy tekst. Żeby przejść do kolejnego i kontynuować numerowanie listy wciskamy klawisz ENTER z klawiatury. W linii tekstu poniżej powinien pojawić się kolejny numerowany element listy. [patrz rys. 16] Rysunek 17 Kontynuacja numerowania

17 Załóżmy, że pomiędzy kolejnymi elementami listy numerowanej chcemy wstawić tekst może być inaczej sformatowany ale w taki sposób, żeby nie był on kolejno numerowanym elementem listy. W takim przypadku, kursor wiersza również ustawiamy na końcu wiersza poniżej, którego chcemy wstawić taki tekst i na klawiaturze komputera wciskamy kombinację klawiszy SHIFT+ENTER. Kursor przejdzie do kolejnej linii ale bez kontynuacji numerowania. Rysunek 18 Tak wprowadzony tekst możemy sformatować. W naszym przypadku będzie to zmiana koloru czcionki na pomarańczową. Zgodnie z tym co zostało już opisane w części Formatowanie zaznaczamy tekst [patrz rys. 18-1] i wybieramy z listy odpowiedni styl [patrz rys. 18-2].

18 Rysunek 19 Formatowanie bloku tekstu Jeśli poniżej sformatowanego tekstu chcemy kontynuować listę numerowaną to na końcu tego wiersza wciskamy na klawiaturze komputera klawisz ENTER. Kursor przeniesie się do kolejnej linii z numerem 5. Rysunek 20 Lista numerowana - kontynuacja

19 UWAGA: Przypominam, że jeśli chcemy kontynuować numerowanie listy to należy kursor pozostawić w poprzedniej linii i kliknąć ENTER. Kombinację klawiszy SHIFT+ENTER stosujemy gdy chcemy wprowadzać tekst sformatowany między kolejnymi elementami listy jako odrębny paragraf. Lista punktowana Sposób formatowania listy punktowanej podobnie jak numerowanej w dużym stopniu zależy od formy wprowadzanego tekstu. Również w tej sytuacji możemy rozróżnić dwa przypadki: Tekst wklejony jako Plain Text Zakładamy, że tekst został wprowadzony zgodnie z instrukcją zamieszczoną w części Wprowadzanie tekstu Wklejanie. Zaznaczamy tekst [patrz rys. 20-1], który ma być pierwszym punktem listy punktowanej i wybieramy przycisk [patrz rys. 20-2] Rysunek 21 Wstawianie listy punktowanej Zaznaczony tekst zostanie sformatowany ozdobną czcionką i umieszczony w elemencie listy punktowanej. [patrz rys. 21]

20 Rysunek 22 Sformatowany pierwszy element listy Kolejne elementy listy punktowanej możemy formatować w sposób opisany powyżej, czyli poprzez zaznaczenie tekstu i wybranie opcji Punktatora lub Podobnie jak w przypadku listy numerowanej, ustawić się kursorem na początku wiersza i klawiszem BACKSPACE na klawiaturze przenieść tekst do poprzedniej linii.

21 Rysunek 23 Kontynuacja listy Pozostawiając kursor w tym samym miejscu klikamy ENTER na klawiaturze komputera [patrz rys.22]. Czynności te powtarzamy dla wszystkich elementów listy. Jeśli formatowanie listy jest jednakowe dla wszystkich elementów to zaznaczamy ten tekst [patrz rys. 23-1] i wybieramy styl z listy [patrz rys. 23-2]. Rysunek 24 Formatowanie listy

22 Rysunek 25 Sformatowana lista punktowana Tekst wpisywany dynamicznie W oknie edytora należy wstawić kursor myszy w miejscu gdzie chcemy rozpocząć listę punktowaną i z opcji edytora wybrać przycisk, który umożliwia wstawienie listy punktowanej. Otrzymamy pierwszy punkt listy. Wpisujemy tekst i jeśli chcemy przejść do kolejnego wiersza kontynuując listę klikamy klawisz ENTER na klawiaturze komputera.

23 Rysunek 26 Kolejne kroki dodawania następnych elementów listy Wprowadzony tekst podobnie jak w poprzednich opisanych scenariuszach możemy formatować wykorzystując zdefiniowane style na liście Apply CSS. Rysunek 27 Kolejne kroki formatowania listy punktowanej

24 Otrzymamy jednolicie sformatowany tekst zwykłą czcionką. Wstawianie i formatowanie łącza Rysunek 28 Sformatowana lista punktowana Łącza, ze względu na sposób wprowadzania, należy podzielić na dwa rodzaje: linki w ramach tej samej witryny i do stron zewnętrznych dostępnych w Internecie. W witrynie zdefiniowano 3 rodzaje formatowań dla linków: Format łącza będący przekierowaniem do strony Format łącza będący przekierowaniem do dokumentu Format łącza będący adresem mailowym Linki w ramach tej samej witryny Linki tworzone w ramach tej samej witryny można podzielić ze względu na sposób formatowania na linki do stron i dokumentów. Żeby utworzyć nowe łącze należy umieścić kursor w miejscu gdzie link ma się znajdować i kliknąć przycisk Wstaw Łącze

25 Rysunek 29 Kolejne kroki dodawania łącza Nowe okno, które się wyświetli użytkownikowi składa się z dwóch sekcji: - po lewej stronie znajduje się drzewiasta hierarchia witryny, z podziałem na listy znajdujące się w witrynie - po prawej stronie wyświetlana jest zawartość, zaznaczonej w lewym boxie, listy UWAGA: Korzystanie z opcji jest ograniczone w ramach witryny, w której znajduje się użytkownik. Oznacza to, że jeśli użytkownik edytuje stronę w witrynie KDPW to drzewiasta hierarchia witryny wyświetla zbiór list tylko dla tej witryny. Natomiast, jeśli użytkownik edytuje stronę w witrynie CCP to wyświetla się zbiór list dla witryny CCP W omawianym scenariuszu chcemy wstawić link do strony głównej witryny SPAN. W lewym boxie odnajdujemy witrynę Zarządzanie ryzykiem [1], następnie podwitrynę SPAN [2] i wskazujemy bibliotekę stron tej witryny [3]. W prawym boxie wskazujemy stronę, do której link chcemy umieścić [4] następnie zatwierdzamy przyciskiem OK.

26 Rysunek 30 Hierachia drzewiasta witryn i bibliotek witryny Wracamy do edytowanej strony, na której umieszczono link. Domyślnie wyświetlaną nazwą jest nazwa strony. W celu sformatowania linku i zmiany wyświetlanej nazwy należy umieścić kursor w którymkolwiek miejscu linku [1] i kliknąć prawym przyciskiem myszy. Rysunek 31 Kolejne kroki formatowania łącza do strony

27 Z menu kontekstowego należy wybrać opcję Properties [2] W nowym oknie wyświetli się manager linków Rysunek 32 Manager Łączy objaśnienie atrybutów W kolejnych polach można uzupełnić następujące atrybuty: 1 nazwa linku wyświetlana na stronie 2 sposób otwarcia linku, tzn. czy dokument / strona ma się otwierać w nowym oknie, w tym samym itd. Jest to pole wyboru z listy Rysunek 33 Sposoby otwierania linku 3 Tooltip czyli nazwa wyświetlana po najechaniu kursorem myszy na element nim opatrzony 4 Jest to ta sama lista zdefiniowanych styli dostępna z poziomu edytora, z której należy wybrać sposób formatowania wstawianego linku

28 Rysunek 34 MAanger Łączy Wprowadzone atrybuty zatwierdzamy przyciskiem OK. Użytkownik powraca na edytowaną stronę gdzie sformatowany link został zamieszczony. Do stron zewnętrznych Rysunek 35 Widok sformatowanego łącza do strony w ramach tej samej witryny Żeby sformatować link do stron zewnętrznych należy wprowadzić adres w oknie edytora.

29 Rysunek 36 Kolejne kroki formatowania łącza do strony zewnętrznej Kursor myszy umieścić gdzieś w adresie i kliknąć prawy przycisk myszy. Podobnie jak w poprzednim scenariuszu z menu kontekstowego wybieramy opcję Properties i uzupełniamy atrybuty.

30 Formatowanie adresu Rysunek 37 Sformatowane łącze do strony Adres mailowy, który chcemy sformatować wprowadzamy w oknie edytora. Rysunek 38 Widok niesformatowanego adrseu mailowego Formatowanie możemy wykonać za pomocą Managera Łączy, tak jak zaprezentowano powyżej, albo zaznaczyć adres [1] i z listy dostępnych styli wybrać ten odpowiedni [2].

31 Rysunek 39 Kolejne kroki formatowania adresu mailowego Zastosowanie obydwu metod umożliwi poprawnie sformatować adres mailowy. Modyfikacja istniejących łączy Może się zdarzyć tak, że istniejący już link chcemy zmodyfikować. Zawsze w takim przypadku klikamy na link prawym przyciskiem myszy i poprzez opcję Properties modyfikujemy łącze korzystając z Managera Łączy. Modyfikacja tabeli Na tym etapie edycji treści w witrynach użytkownicy mają możliwość wyłącznie modyfikacji zawartości istniejących już tabel. Modyfikacje te dotyczą treści i formatowania. Dla tabeli zdefiniowano 7 styli: Stosowany w przypadku tabel posiadających nazwę stosowane są dla nagłówków kolumn. Dwa powyższe formatowania różnią się wyłącznie wielkością czcionki i

32 Dwa powyższe formatowania różnią się wyłączne wielkością czcionki i stosowane są dla komórek w tabeli Dwa powyższe formatowania różnią się wyłącznie wielkością czcionki i stosowane są dla komórek w tabeli Scenariusz modyfikacji formatowania tabeli wygląda podobnie jak formatowanie zwykłego tekstu, z tą różnicą, że z listy dostępnych styli wybieramy te, które dotyczą tabeli + łączy (jeśli istnieje taka potrzeba). Rysunek 40 Widok tabeli w trybie do edycji Żeby zmienić formatowanie komórki w tabeli należy zaznaczyć tekst [1] i wybrać styl z listy [2].

33 Rysunek 41 Modyfikacja styli w tabeli Analogicznie wprowadza się inne formatowania przeznaczone dla tabeli. Wstawianie znaków specjalnych W opcjach edytora tekstu dostępna jest opcja, która umożliwia użytkownikom wstawianie znaków specjalnych. Rysunek 42 Tekst bez znaków specjalnych

34 Sposób umieszczania symboli jest bardzo intuicyjny. Umieszczamy kursor w miejscu gdzie znak ma się znaleźć i wybieramy rozwijamy listę symboli dostępną pod przyciskiem Wstawianie paragrafu Rysunek 43 Wstawione symbole w treśd strony Wstawienie nowego paragrafu ( w rozumieniu nowej sekcji w tekście) umożliwia wyrównywanie jednego bloku tekstu w różny sposób. Te części tekstu, które chcemy np. wyśrodkować musimy popakować w osobne bloki tekstu.

35 Rysunek 44 Częsci tekstu, które będą formatowane Zaznaczone na zielono części tekstu chcemy wyśrodkować względem strony. Musimy je zatem zapakować w paragrafy. Na końcu tekstu w pierwszym zielonym, boxie umieszczamy kursor [1] i wybieramy przycisk [2] Rysunek 45 Kolejne kroki formatowania

36 Kursor zostanie umieszczony w linii poniżej tekstu. Następnie zaznaczamy tekst i wybieramy przycisk Do środka Rysunek 46 Formatowanie tekstu po uprzednim wstawieniu paragrafu Żeby wyśrodkować pozostałe zaznaczone na zielono części tekstu należy: a. Wstawiamy kursor myszy przed 1 i wybieramy przycisk. b. Wstawiamy kursor myszy po 1 i wybieramy przycisk. c. Zaznaczamy cały tekst 1 i wybieramy przycisk Do środka Rysunek 47 Sformatowane naprzemiennie bloki tekstu

37 Wprowadzanie lead a Na początku wyjaśnijmy może czym jest lead. Otóż, jest to część strony o stałej szerokości, której zawartością jest tekst, i który znajduje się po lewej stronie [patrz rys. 49] Rysunek 48 Układ strony z leadem Dostępne są również układy stron, w których Lead nie występuje. To na co warto zwrócić uwagę to sposób zamieszczania treści w lead e. Formatowanie natomiast samo w sobie, nie występuje z tego względu, że lead jest odrębną częścią strony i nie jest formatowany za pomocą edytora. Czcionka, wielkość i odstępy między wierszami W lead e są sztywno określone. Tekst wpisywany dynamicznie jest automatycznie wpisywany. Natomiast, jeśli chcemy tekst wkleić z innego edytora tekstu to bardzo ważne jest wcześniejsze wyczyszczenie go ze styli. WSKAZÓWKA: Najlepszym i najmniej zawodnym sposobem jest wklejanie tekstu ze zwykłego Notatnika.