Instrukcja tworzenia strony WWW w oparciu o szablon CMSimple

Transkrypt

1 Instrukcja tworzenia strony WWW w oparciu o szablon CMSimple I. Wygląd strony. Elementy stałe. CMSimple jest prostym systemem zarządzania zawartością stron internetowych. Dostarcza łatwy w obsłudze edytor stron WWW, pozwalający na bieŝąco obserwować efekty wprowadzanych modyfikacji. Niniejszy tekst opisuje krok po kroku podstawowe funkcje i moŝliwości tego edytora. System CMSimple został zaadaptowany przez Laboratorium Informatyki WMiNI jako szablon do tworzenia stron pracowników Wydziału. Za wygląd stron odpowiedzialny jest plik stylu. W pakiecie instalacyjnym, wraz z innymi plikami niezbędnymi do prawidłowego funkcjonowania systemu znajduje się domyślny styl nowej strony wydziałowej. Dlatego przy uŝyciu edytora uŝytkownik ma wpływ przede wszystkim na zawartość strony, nie zaś na jej ogólny wygląd. 1

2 Na obrazku przedstawiona została przykładowa strona pracownika. Widoczne na niej stałe elementy to ramka nagłówka zawierająca w tym przypadku imię, nazwisko i tytuł naukowy (tekst znajdujący się w pierwszej linii nagłówka jest równocześnie tytułem strony), a takŝe afiliację, zdjęcie i logo wydziałowe. W ramce po lewej stronie znajduje się menu, czyli lista dostępnych zakładek. Na przykładowej stronie są cztery główne zakładki o nazwach: Strona główna, Badania naukowe, Dydaktyka, Rozmaitości Mapa strony a takŝe podzakładka Strony głównej Curriculum Vitae. Ponadto widoczna jest generowana automatycznie data i godzina ostatniej aktualizacji zawartości strony. Wszystko, co znajduje się na szarym tle w głównej ramce, podlega bezpośredniej edycji i moŝe być wpisywane przez uŝytkownika przy pomocy wbudowanego edytora CMSimple otwieranego z poziomu przeglądarki. II. Podstawowa edycja strony. O ile ostateczny rezultat tworzenia strony powinien być moŝliwy do obejrzenia we wszystkich przeglądarkach internetowych, o tyle edytor stron nie będzie działał w programach: Opera, Mozilla Firefox 0.9 lub MS Internet Explorer 5.0. Aby móc w pełni z niego korzystać potrzebna jest Mozilla 1.3 lub nowsza (systemy Windows, Linux i MacOS) albo MS IE 5.5 lub nowszy (Windows). Po prawidłowej instalacji pakietu CMSimple, czyli po wygenerowaniu strony, edytor powinien być dostępny on-line pod adresem: gdzie zamiast <username> naleŝy wpisać swój login na serwerze alpha.mini.pw.edu.pl (ten sam, który uŝywany jest w adresie pocztowym). Rezultat edycji moŝna oglądać na bieŝąco np. w drugim oknie (lub karcie) przeglądarki pod adresem: Otwarcie edytora kaŝdorazowo wymaga zalogowania; w tym wypadku nazwa uŝytkownika to admin, natomiast hasło musi być zgodne z tym, które zostało podane w procesie instalacji i aktywowania systemu na alphie. 2

3 Następnie pojawia się strona z oknem edycji, gdzie moŝna wpisywać tekst, który ostatecznie na stronie będzie wyglądał identycznie, jak w edytorze. Wszelkie zmiany zawsze naleŝy zapisywać za pomocą guzika Zapisz, pierwszego z lewej w górnym pasku narzędzi edytora. Zapisanie zmian jest równoznaczne z ich opublikowaniem na stronie w tym samym momencie. Treść strony przechowywana jest w całości w pojedynczym pliku w formacie HTML. System CMSimple pozwala dzielić ten tekst i organizować w wirtualne podstrony zakładki. SłuŜą do tego przyciski [H1], [H2] i [H3] w pasku narzędzi. Za pomocą guzika [H1] moŝna tworzyć główne zakładki na stronie; [H2] i [H3] pozwalają utworzyć podzakładki odpowiednio drugiego i trzeciego poziomu. Aby na przykład dodać podzakładkę Curriculum Vitae naleŝy na końcu strony będącej na wyŝszym poziomie wpisać nową nazwę, a następnie wybrać przycisk [H2], jak to jest pokazane na następnej ilustracji. UWAGA: Zanim przejdziemy do edytowania jakiejkolwiek innej zakładki na stronie trzeba koniecznie wcześniej zapisać zmiany w przeciwnym razie wszystkie zostaną utracone! Przycisk [H4] słuŝy do tworzenia zwykłego nagłówka w ramach strony, natomiast [ ] pozwala rozpocząć nowy akapit (odpowiednik <p> w kodzie HTML). 3

4 Paski narzędzi dostarczają ponadto standardowych funkcji zmiany stylu czcionki, czy formatowania (justowania) tekstu. MoŜliwe jest takŝe korzystanie z takich podstawowych narzędzi edytora, jak Zaznacz wszystko (Ctrl+A), Wytnij (Ctrl+X), Kopiuj (Ctrl+C), Wklej (Ctrl+V), Cofnij (Ctrl+Z) i Ponów (Ctrl+Y), chociaŝ w niektórych przeglądarkach edytor moŝe nie reagować na uŝywanie wymienionych przycisków (skróty klawiszowe działają natomiast zawsze, jeŝeli tylko funkcjonuje edytor). Edytor umoŝliwia wreszcie wypunktowanie tekstu lub tworzenie list numerowanych oraz zwiększanie i zmniejszanie wcięć całych akapitów w tekście. 4

5 Edycja strony zawierającej listę pokazana jest na ilustracji: III. Zarządzanie plikami. System CMSimple pozwala w bardzo łatwy sposób zamieszczać na stronie internetowej pliki do pobrania, a tym samym udostępnia niezwykle wygodny interfejs do publikowania w sieci np. materiałów dydaktycznych dla studentów. Aby zamieścić plik na stronie naleŝy najpierw przejść z trybu edycji w tryb zarządzania plikami w menu edytora. 5

6 Pojawia się strona edytora zawierająca listę plików zlokalizowanych w katalogu downloads w systemie katalogów CMSimple. MoŜna tutaj dodawać pliki lub usuwać juŝ istniejące (zob. ilustracja) z poziomu przeglądarki. Pliki moŝna dodawać, wgrywając je z lokalnego komputera (na którym otwarta jest przeglądarka) na serwer alpha za pomocą edytora CMSimple lub teŝ kopiując je bezpośrednio do katalogu /public_html/downloads w katalogu domowym na alphie (np. za pomocą programu WinSCP). Aby skorzystać w tym celu z edytora wystarczy kliknąć na guzik Browse, wyszukać Ŝądany plik, a następnie zachować wybrany dokument za pomocą przycisku Wgraj plik na serwer, jak na poniŝszej ilustracji. Plik od razu pojawi się na liście. Po powrocie do trybu edycji będzie teŝ widoczny na rozwijanej liście obiektów, do których moŝna dodać odnośnik na stronie. 6

7 Wystarczy wybrać plik z tej listy, podświetlić napis na stronie, z którym ma być skojarzony odnośnik do pliku, a następnie kliknąć na guzik znajdujący się obok rozwijanej listy, który wstawi ten odnośnik we wskazanym miejscu. Ten sam mechanizm umoŝliwia publikowanie dokumentów, jak i umieszczanie odnośników na stronie pozwalających na szybkie przejście między zakładkami. W ten sposób na przykładowej stronie w zakładce z informacjami dla studentów z grupy 7

8 wtorkowej zostało umieszczone w tekście dowiązanie do zakładki o nazwie Strona główna:... i efekt na wynikowej stronie: 8

9 IV. Wstawianie odnośników i obrazków. Oczywiście poza omówionymi wyŝej moŝliwościami tworzenia dowiązań do plików lub innych zakładek na edytowanej stronie dostępna jest równieŝ funkcja dodawania odnośników do innych stron w Internecie. W tym przypadku procedura wymaga, aby najpierw wybrać i zaznaczyć tekst na stronie, który chcemy skojarzyć z łączem, a następnie uŝyć przycisku na pasku narzędzi o nazwie Utwórz lub edytuj odnośnik. Analogicznie moŝna usunąć odnośnik (odłączyć go od tekstu na stronie) za pomocą guzika znajdującego się obok. W trakcie tworzenia łącza do innej strony w sieci, pojawi się okienko, w którym naleŝy wpisać pełny adres URL wybranej strony wraz z nazwą protokołu (np. lub Po zatwierdzeniu oraz po zapisaniu zmian w edytorze przyciskiem Zapisz na stronie pojawi się odnośnik. Wstawianie obrazków odbywa się bardzo podobnie, jak publikowanie plików. Po pierwsze naleŝy przejść w edytorze w tryb zarządzania obrazkami (opcja Obrazki w menu edytora). W trybie tym moŝna dodawać i usuwać pliki z danymi graficznymi, a takŝe oglądać listę obrazków aktualnie znajdujących się na serwerze (podkatalog 9

10 images w katalogu public_html). Przy kaŝdym z plików oprócz jego rozmiaru znajduje się teŝ informacja o stronie zakładce, na której został wykorzystany. Teraz, aby umieścić jeden z obrazków na stronie naleŝy powrócić do trybu edycji, na wybranej zakładce strony ustawić kursor w miejscu, gdzie ma się znaleźć obraz i wybrać odpowiedni plik z rozwijanej listy po prawej stronie. 10

11 Następnie naleŝy potwierdzić wybór za pomocą przycisku znajdującego się obok listy i jak zwykle na koniec zapisać stronę. V. Podsumowanie W niniejszej instrukcji opisana została najprostsza metoda posługiwania się systemem CMSimple. Bardziej zaawansowani uŝytkownicy znający podstawy języka HTML mogą skorzystać z moŝliwości przejścia do edycji wygenerowanego kodu HTML. Funkcja taka jest dostępna pod jednym z przycisków na pasku narzędzi edytora. Jednak, aby zapisać dokonane zmiany, naleŝy powrócić do poprzedniego trybu Lay out (tryb bieŝącego podglądu wyników edycji). Korzystanie z opcji zmian trybu HTML Lay out ilustrują przykłady na końcu dokumentu. Więcej informacji na temat zasady działania, a takŝe posługiwania się opisywanym systemem generowania stron moŝna uzyskać w sieci Internet. Odnośnik Pomoc w edytorze otwiera stronę podręcznika User s Manual w serwisie CMSimple pod adresem 11

12 12