Instrukcja obsługi strony dotykowej

Autorzy:

Mariusz Konior
Adam Pokoleńczuk
Roman Maj
Tomasz Kryszan

1.Dodawanie nowego pracownika

Aby dodać nowego pracownika edytujemy plik Pracownicy.html i dodajemy pod wszystkimi pracownikami kolejną klasę z pracownikiem. Przedstawia się to tak:

Najpierw dodajemy nazwę pracownika do lewej lub prawej kolumny, czyli odnajdujemy podział na kolumny halfII left i halfII right i do jednej z tych klas dodajemy:

<div id="buttonjob"> <a style="color: rgb(80, 220, 247);font-weight: bold; text-decoration: none;font-size: 35px;line-height: 60px;" href="#testimonial" >dr hab. prof. UŚ Piotr Porwik</a> </div></br>

Gdzie w zaznaczonym miejscu wpisujemy pełną nazwę pracownika.

Następnie zjeżdżamy na niżej lub na sam koniec i dodajemy taką klasę analogicznie do poprzednich:

<div class="section section_with_padding" id="testimonial">

<center><h6>Pracownicy</h6></center>

<div class="halfII left"> //tutaj oznaczamy że opis jest po lewej…

<h4>dr hab. prof. UŚ Piotr Porwik</h4> //pełna nazwa

<div class="img_border img_fl">

<img src="images/pporwik1235379527.jpg" alt="image 1" /> //zdjecie

</div>

<h5>

//następnie pełny opis

Stanowisko: Kierownik Zakładu</br>

Telefon: [phone]</br>

Pokój: 307</br>

Adres e-mail: [e-mail]</br>

Konsultacje: </br>

Wydział: Zakład Systemów Komputerowych</br>

Staż pracy w latach: 35</br>

</br></h5>

</div>

<div class="halfII right"> //a button do powrotu po prawej

<center><a href="#facebook" ><img style="margin-top: 104px;-webkit-border-top-right-radius: 5px;-webkit-border-bottom-right-radius: 5px;-webkit-border-top-left-radius: 5px;-webkit-border-bottom-left-radius: 5px;" src="images/pracownicy1.jpg" /></a></center> </div>

<a href="#facebook" class="slider_nav_btn previous_btn">Previous</a> //przycisk navi wstecz

<a href="index.html" class="slider_nav_btn home_btn">home</a> //przycisk navi home

<a href="#testimonialx" class="slider_nav_btn next_btn">Next</a> //przycisk navi dalej

</div>

Modyfikacja danych pracowników polega na edycji w/w, a całkowite usunięcie jest niejako procesem odwrotnym od tego tu podanego i obejmuje usunięcie wpisu z listy pracowników oraz usunięcie całej klasy dotyczącej tego pracownika.

2.Modyfikacja opisu stron CISCO, Studia podyplomowe, Informacje ogólne

Modyfikacja tego opisu nie jest skomplikowana, gdyż dodajemy interesującą nas zawartość stosując formatowanie html. Strona CISCO znajduje się w pliku cisco.html, studia podyplomowe w studia.html, a informacje ogólne w strona.html. Lecz aby dodać nową stronę to po klasie ostatniej strony(sekcji) tworzymy nową zaczynającą się od <div class="section section_with_padding" id="services1"> gdzie pod „id” wpisujemy kolejną stronę np. services2. Nie zapominajmy również o odpowiednim dodaniu klawiszy nawigacyjnych (np. pierwsza strona posiada Home-Next, pośrednie Prev-Home-Next, a ostatnia Home-Next). Konfigurujemy te przyciski na końcu klasy strony:

<a href="#services" class="slider_nav_btn previous_btn">Previous</a>
<a href="index.html" class="slider_nav_btn home_btn">home</a>
<a href="#services2" class="slider_nav_btn next_btn">Next</a>

Zaznaczone na czerwono to odnośniki, do następnej i poprzedniej strony, które również trzeba odpowiednio zmodyfikować aby np. z pierwszej strony nie przeniosło nas od razu na ostatnią. Przycisk HOME zawsze przenosi nas do strony głównej.

3.Dodawanie zdjęć do galerii

Aby dodać nowe zdjęcia do galerii najpierw wrzucamy je do folderu \images\gallery, a następnie modyfikujemy odpowiednio plik index.html. Mniej więcej od linii 112 zaczyna się dodawanie zdjęć grupowanych w albumy. Oto wygląd przykładowego albumu:

<div class="section section_with_padding" id="zdjęcia"> //nowa sekcja=nowe, kolejne id

<h6>"Budowa klastra obliczeniowego"</h6> //tytuł

<div id="home_galleryII" class="box no_mr">

<a href="images/gallery/0_001.jpg" rel="lightbox[gallery]"><img src="images/gallery/0_001k.jpg" alt="image 1" /></a> //tak wygląda dodanie jednego zdj.

<a href="images/gallery/0_002.jpg" rel="lightbox[gallery]"><img src="images/gallery/0_002k.jpg" alt="image 1" /></a>

</div>

<a href="#home" class="slider_nav_btn home_btn">home</a> //nie zapominamy o

<a href="#zdjęcia1" class="slider_nav_btn next_btn">Next</a> //przyciskach nawigacji

</div>

4.Edycja wirtualnego spaceru

Wirtualny spacer edytujemy w pliku spacer.html. W wirtualnym spacerze nie trzeba wiele konfigurować, najbardziej przydatną opcją może być edycja rozdzielczości która znajduje się w 28 linii kodu i jest następująca:

<object type="application/x-shockwave-flash" width="1180px" height="530px">

Pliki graficzne wykorzystywane przez wirtualny spacer znajdują się w folderze \virtualtourdata

5.Kontakt

W pliku kontakt.html możemy edytować dane dotyczące kontaktu, które nie powinno sprawić większego kłopotu lub zmienić rozmiar mapki, co robimy poprzez edycję pól width i height przy linku do mapy. Aby edytować pozycję wskazywania mapy najlepiej przejść na stronę mapy.google.pl i wygerenować nowy link do interesującej nas pozycji.

6.Edycja wygaszacza

Aby edytować wygaszacz ekranu, edytujemy plik /js/screensaver.js w którym możemy zmienić w deklaracji var $sleeper dodajemy odnośniki do zdjęć, które będą zmieniać się w wygaszaczu. Dodajemy je wg przykładu już dostępnych zdjęć.
Aby zmienić czas oczekiwania na wygaszacz zmieniamy ostatnią liczbę w kodzie (obecnie 60000ms) w deklaracji function preparetosleep().

W razie dodatkowych pytań prosimy o kontakt:

Mariusz Konior: [e-mail]
Adam Pokoleńczuk: [e-mail]