Zapytanie o efekty podczas tworzenia strony
Author: Piotr S.
Visited 3605,
Followers 2,
Shared 0
Witam,
Mam pytanie odnośnie wykonania kilku elementów podczas tworzenia witryny w WebSite x5.
Oto strona stworzona w WebSite x5 http://danila-a.com/ - czy mógłbym was prosić o wytłumaczenie krok po kroku co powinienem zrobić aby osiągnąć:
1 - zamiast menu (napisów) - obrazki,
2 - przy zmianie zdjęć strzałki,
3 - kropeczki oznaczające ilość zdjęć oraz zaznaczenie wyświetlanego obecnie,
W załączniku zdjęcie z opisem.
Jeszcze jedno pytanie do tego - co powinienem zrobić aby uzyskać podobny efekt przejścia - po naciśnięciu strzałki (w załączonym pliku opisanej "2").
Pozdrawiam,
Posted on the
Author
Witam ponownie,
W przypadku "1" - po najechaniu na ikonę pojawia się opis, chciałbym również wiedzieć w jaki sposób to zrobić?
Pozdrawiam,
Witaj Piotrze,
Poznaje dogłębnie programik WebsiteX5 i jest świetny, przy dodatkowej znajomości HTML5 i CSS oraz dodatkowych skryptów java, jquery nawet ASP.NET i innych świetne stronki można robić..więc jest super... Program ten ułatwia tworzenie szkieletu i też fajnych funkcji zastosowań, a dorzucając coś od siebie daje naprawdę super efekty...
OK..ale do rzeczy... Opiszę Ci najpierw co zaobserwowałem i to co mogłem wywnioskować.
Przeglądałem tą stronę, którą podałeś i rozwiązania, które są tam zawarte prezentują się następująco:
Menu tzw HOVER
Całkowicie na tej stronce w WEBSITEX5 ukryto całe menu. Wstawiono ikonki menu graficzne do NAGŁÓWKA STRONY. Utworzono identyczne ikonki graficzne menu lecz już w kolorze, które ukazują się po najechaniu myszki - więc funkcja HOVER w CSS się tutaj pojawia, jako najprostszy sposób.
Ukryte całe menu całkowicie wyłącza dodawanie naszych stron i podstron do mapy witrynyy XML - należy wówczas utworzyć samemu taką mapę witryny i wrzucić jako oddzielny plik na serwer, aktualizować z czasem gdy rozbudowujemy menu, w celu zapewnienia prawidłowego działania indeksowania przez Google Analytics i inne podprogramy wpływające na pozycjonowanie strony.
Jeszcze tego nie sprawdzałem w naszym programie, ale to zrobię i sprawdzę czy jest taka możliwość, że ustawiając samo zdjęcie w tym Nagłówku strony podpinamy link lub dorzucamy kod i po najechaniu na tą ikonkę podmienia ona obraz na kolorowy - też funkcja Hover ale automatyczna w programie bez użycia kodu, możliwe że w WebsiteX5 jest to możliwe do zrobienia, jeśli nie to nie ma problemu rozwiązanie będzie w kodzie HTML + CSS !
Sprawdziłem PIOTRZE i działa nawet bez dodawania kodu HTML
A więc tak: (przepraszam za zbyt szczegółowe rozwlekanie się, ale pisząc tutoriale nabrałem nawyku iż taka instrukcja musi być szczegółowo opisywana krok po kroku, aby nawet osoba rzadko korzystająca z komputera mogła sobie poradzić, a tez nie wiem kto to będzie później czytał)
1. Ustawiasz się w pozycji Krok 1 - Ustawienia ogólne klikasz >>DALEJ<<
2. W pozycji wybór wzorca wybierasz Wzorzec Własny lub Wzorzec Domyślny
3. Gdy wybierzesz Wzorzec Własny przechodzisz najpierw do edycji szablonu strony kolejne przejście >>DALEJ<< wchodzisz do naszego NAGŁÓWKA STRONY. W przypadku Wzorca Domyślnego kolejne przejście dalej ustawia Cię natychmiast w NAGŁÓWKU STRONY.
4. Ukazuje się nasze miejsce pracy, pole NAGŁÓWKA STRONY. Teraz przygotuj sobie w FOLDERZE Z PROJEKTEM dodatkowy folder z grafiką (ikonki zdjęcia itp.), takie rozwiązanie polepszy Ci pracę i niczego się nie zgubi w razie "W". Pomocne to jest w trakcie przenoszenia projektów.
Przygotuj sobie własne ikonki np w dwóch wersjach kolorystyki lub nawet wielkości (po najechaniu myszki mogą się powiększać nieznacznie też miły efekt, prócz koloru). Wstawiamy swoją grafikę klikając na ikonkę u góry menu "WSTAW OBRAZ".
Ikonki swojego menu możesz ustawić w polu nagłówka bardzo dokładnie. Klikasz na wybraną ikonkę aby ją zaznaczyć. Teraz z menu u góry wybierasz pozycję "POŁOŻENIE i ROZMIAR" jest obok ikonki z podpinaniem linka. Wpisując parametry liczeniowe łatwo i dokładnie sobie je możesz rozmieścić .
5. Gdy już całe główne menu sobie ustawisz zaznacz jedna z ikonek swojego menu.
6. Pod plikiem obrazu masz pozycję "Plik obrazu pod wskazaniem myszy" tutaj podajesz zdjęcie ikonki kolorowej lub lekko powiększonej. Dzięki temu Funkcja HOVER zadziała. Efektem po najechaniu myszki na wybraną ikonkę będzie podmiana obrazka, nadpisanie szarego na kolorowy obrazek.
"------------!!!!------------
Będąc w tej pozycji - chciałbym dodać PROŚBĘ do zespołu WEBSITEX5 oraz PROMISE - mianowicie brakuję w tej pozycji jak i w całym programie textboxa lub comoboxa z możliwością wybierania czasu (ms) opóźniania lub przyspieszania wyświetlania zdjęcia ukazującego się w trakcie najechania myszki na obiekt (tekst, obraz itp.).Znacznie by to ułatwiło i powiększyło efekty wizualne działania programu, a taki drobny dodatek dla zespołu WEBSITEX5 nie będzie problemem. Byłoby miło.
------------!!!!-------------"
Teraz aby objaśnienie w chmurce tzw TOLTIP, ukazywał się u nas na stronie w tym przypadku MENU w nagłówku strony w odwróconej pozycji trzeba coś zmienić. Domyślnie chmurka ukazuje się nam w całym projekcie skierowana do dołu a my chcemy aby była z góry. (Należny pamiętać że zmiana ustawienia chmurki - WSKAZÓWKI - będzie dotyczyła całego projektu strony, nie tylko samego nagłówka. W przepadku gdy będziemy chcieli zamieścić inny rodzaj objaśnienia w chmurce trzeba skorzystać wówczas z HTML i CSS).
Więc działamy:
Zmiana ustawień objaśnień w chmurce - WSKAZÓWKA
1. Wchodzimy do pozycji KROK 4 - Ustawienia zaawansowane
2. Wchodzimy do pozycji STYLE i MODELE (Literka A)
3. W stylach i modelach wybieramy zakładkę WSKAZÓWKA EKRANOWA
4. Tutaj zmieniamy sobie styl pozycji: 1-Góra, wówczas nasza chmurka będzie pojawiała się u góry naszego obiektu (obrazek, tekst itp.)
Odpowiedź na Twoje pytania:
1 i 2 - korzystając z tego małego tutorialu zrobisz od razu 2 podpunkty, jedynie obrazki jako strzałki które chcesz, podepniesz jako "Plik obrazu pod wskazaniem myszy" dla każdego z menu.
3 - hmm tutaj będzie trochę trudniej, czy ta galeria na podanej stronce (http://danila-a.com/) jest zrobiona tylko w WebsiteX5, może ktoś z forumowiczów coś zasugeruje lub Promise się wypowie i rzuci trochę jasności, ale przypuszczam że to jest galeria całkiem oddzielna zrobiona i wrzucona za pomoca kodu HTML, CSS i javascript lub jquery. Zauważ że ta galeria na każdym ze swoich slajdów ma oddzielny tekst który możesz zaznaczyć, pod tekstem jest zaokrąglony rozciągnięty prostokącik - link który porusza się z lekkim opóźnieniem do tekstu u góry, a sam tekst w chwili przejścia do nowego slajdu - przyspiesza. Z tego co zdążyłem zaobserwować WEBSITEX5 nie oferuje jeszcze takich fajnych wizualnych funkcjonalności.
Jedyne rozwiązanie to znaleźć w sieci przykład darmowej podobnej galerii i przerobić ją pod własną stronkę (HTML, CSS, JavaScript, Jqury, Ajax itp.)
W miarę możliwości większego czasu postaram się rzucić pare tutoriali jako plik PDF z gotowym przykładowym projektem podobnej stronki w WebsiteX5 z oddzielną galerią slajdów (HTML5, CSS oraz jakiś skrypt) oraz innymi funkcjami.
Mam nadzieję Piotrze, że tutorial się przyda i choć trochę pomogłem.
Pozdrawiam Adam-AIGM:):)
Przypinam się do pytania co do PKT 3 . ma ktoś gotowy taki skrypt i plik ?
Witaj Temate Z.,
Slider na podanej przez Ciebie stronie nie jest stworzony w WebSite X5. To jest zewnętrzny skrypt, skonfigurowany i dostosowany do wyglądu strony.
Pozdrawiam
Author
Witaj Adam,
Bardzo Ci dziękuję za obszerną i niezwykle wyczerpującą odpowiedź - tego (jako laik) potrzebowałem!
Czy jesteś jeszcze w stanie pomóc mi w rozwiązaniu problemu dotyczącego zastosowania opisów w chmurkach (objaśnień), by po najechaniu na ikonkę pojawiała się chmurka z jej opisem (np. home, oferta, historia, itp.). Proszę o pomoc, ponieważ nie mogę tego rozszyfrować.
Z największą przyjemnością skorzystam z kolejnych Twoich tutoriali, projektów galerii, skryptów i tym podobnych rzeczy, którymi zechcesz się podzielić --> kontakt na PW.
Jeszcze raz Bardzo Dziękuję!
Pozdrawiam,
Author
Witam,
Przypominam się, czy mogę prosić o wyjaśnienie?
Pozdrawiam,
Witam
Opisy w cmurce:
- klikasz na obiekt który ma uruchamiać chmurkę (może być foto, może być tekst)
- szukasz (na górze) opcji "wstaw link"
- wybierasz " plik lub adres URL z oknem pokazu"
- i dalej w "opis" wstawiasz tekst lub foto.
- to jest własnie ta chmurka
Author
Witaj,
Emir M. bardzo dziękuję za pomoc i wyjaśnienie, jestem wdzięczny że pomogłeś mi rozwikłać problem.
Jeszcze raz podziękowania dla Adama J. za obszerną rozpiskę - już wnet to zastosuję :)
Pozdrawiam wszystkich,