WSTĘP KOD HTML SZABLONU SKĄD GO WZIĄĆ, GDZIE I JAK GO WKLEIĆ... 3

Transkrypt

1 WSTĘP KOD HTML SZABLONU SKĄD GO WZIĄĆ, GDZIE I JAK GO WKLEIĆ... 3 A) JAK SIĘ DOSTAĆ DO KODU?... 3 B) KOPIOWANIE KODU SZABLONU... 4 C) WKLEJANIE KODU SZABLONU DO EDYTORA ALLEGRO EDYCJA SZABLONU - WSTĘP EDYCJA PRZY POMOCY EDYTORA WIZUALNEGO ALLEGRO... 8 A) CHARAKTERYSTYKA EDYTORA WIZUALNEGO ALLEGRO WADY I ZALETY... 8 B) CHARAKTERYSTYKA EDYTORA WIZUALNEGO ALLEGRO WYGLĄD I OPIS FUNKCJI... 9 C) PRACA Z EDYTOREM WIZUALNYM ALLEGRO FORMATOWANIE I EDYCJA TEKSTU D) PRACA Z EDYTOREM WIZUALNYM ALLEGRO USUWANIE ZDJĘĆ E) PRACA Z EDYTOREM WIZUALNYM ALLEGRO LINK TEKSTOWY F) PRACA Z EDYTOREM WIZUALNYM ALLEGRO LINK OBRAZKOWY G) PRACA Z EDYTOREM WIZUALNYM ALLEGRO TWORZENIE ADRESÓW H) PRACA Z EDYTOREM WIZUALNYM ALLEGRO WSTAWIANIE I OBRÓBKA DOWOLNEJ ILOŚCI ZDJĘĆ I)PRACA Z EDYTOREM WIZUALNYM ALLEGRO COFANIE ZMIAN I) PRACA Z EDYTOREM WIZUALNYM ALLEGRO WYSTAWIANIE AUKCJI A. EDYCJA PRZY POMOCY EDYTORA WIZUALNEGO ALLEGRO ROZWIĄZYWANIE PROBLEMÓW - PYTANIA I ODPOWIEDZI A) PROBLEM ZE ZMIANĄ ROZMIARU, KOLORU LUB RODZAJU CZCIONKI W EDYTORZE WIZUALNYM ALLEGRO.. 28 B) PODCZAS WYSTAWIANIA AUKCJI W PRZEGLĄDARCE INTERNET EXPLORER POJAWIAJĄ SIĘ NIEESTETYCZNE ODSTĘPY POMIĘDZY NIEKTÓRYMI ELEMENTAMI GRAFIKI. CZY NA AUKCJI TEŻ BĘDĄ ONE WIDOCZNE? C) AUKCJA ROZJECHAŁA SIĘ NA BOKI, WYGLĄDA TO BARDZO NIEESTETYCZNIE, JAK ROZWIĄZAĆ TEN PROBLEM? D) PRZEZ DŁUŻSZY CZAS WYSTAWIAŁEM AUKCJĘ W EDYTORZE WIZUALNYM ALLEGRO, JEDNAK MOJA PRACA POSZŁA NA MARNE. GDY KLIKNĄŁEM PRZYCISK DALEJ W CELU WYSTAWIENIA AUKCJI, SYSTEM POPROSIŁ O ZALOGOWANIE I MOJA PRACA PRZEPADŁA. JAK TEMU ZARADZIĆ? E) POSIADAM SZABLON Z CZARNYM TŁEM. PO WPISANIU TEKSTU WCALE GO NIE WIDAĆ. JAK TEMU ZARADZIĆ? TWORZENIE STRONY O MNIE A) JAK DOSTAĆ SIĘ DO OKNA UMOŻLIWIAJĄCEGO WKLEJENIE KODU HTML STRONY O MNIE? B) EDYCJA STRONY O MNIE C) WYSTAWIENIE STRONY O MNIE EDYCJA PRZY POMOCY DOWOLNEGO EDYTORA HTML PODSTAWY HTML A) CO TO SĄ ZNACZNIKI? B) STRUKTURA DOKUMENTU HTML C) KOLORY W DOKUMENCIE HTML D) KILKA PODSTAWOWYCH ZNACZNIKÓW HTML akapit pogrubienie fragmentu tekstu pochylenie tekstu zmiana czcionki, rozmiaru i koloru fragmentu tekstu dodanie prostej linii poziomej przejście do nowej linii tworzenie listy wypunktowanej łączenie znaczników tworzenie tabeli wstawianie obrazków PRZEDSTAWIENIE PROGRAMU EDYTOR ZNACZNIKÓW HTML A) OPIS PODSTAWOWYCH FUNKCJI PROGRAMU DODATEK: UMIESZCZANIE PLIKÓW SZABLONU NA INNYM SERWERZE

2 Wstęp Witam i dziękuję za zakup mojego szablonu. Mam nadzieję, że zwiększy Twoje zyski ze sprzedaży i przyczyni się do większego zainteresowania i zadowolenia Twoich klientów. Starałem się, aby szablon był nie tylko atrakcyjny graficznie, ale również funkcjonalny oraz prosty w obsłudze. Zależało mi, aby mogła z niego korzystać nawet osoba nie znająca języka HTML. Poniżej zamieściłem porady, w jaki sposób z niego korzystać. Poradnik jest napisany z myślą również o osobach słabo znających się na obsłudze komputera, dlatego, jeżeli chociaż trochę masz w tym obeznanie, myślę, że 80% procent tego poradnika będzie dla Ciebie zbyteczne i większość fragmentów możesz pominąć. Proszę nie zrażać się jego obszernością, jak wspomniałem wyżej mało komu będzie potrzebne przeczytanie całości! Wraz z szablonem otrzymałeś: plik.html szablonu aukcji plik.html szablonu strony o mnie ( jeżeli zakupiłeś szablon ze stroną O mnie ) pliki tekstowe z kodem szablonu oraz kodem strony o mnie ( jeżeli zakupiłeś szablon ze stroną O mnie ) wszystkie pliki graficzne, z których składa się szablon ( folder grafika ) niniejszy poradnik hosting szablonu na opłaconym serwerze na okres opisany w aukcji W razie problemów możesz liczyć na moją pomoc, korzystając z a, gg lub telefonu : mój piotrek1983@poczta.onet.pl mój nr. gadu-gadu: mój nr. tel. : Oświadczam, iż jestem autorem niniejszego poradnika, plików graficznych szablonu, oraz kodu HTML szablonu. Zgodnie z ustawą z 4 lutego 1994 o prawie autorskim i prawach pokrewnych (D.U. 1994/24/83) za naruszenie praw własności poprzez kopiowanie, powielanie i rozpowszechnianie przedstawionych niżej treści (zawartości niniejszego poradnika, plików HTML szablonów, grafiki do szablonów) bez zgody właściciela grozi grzywną oraz karą pozbawienia wolności od 6 m-cy do lat 5 (art ). 2

3 1. Kod HTML szablonu skąd go wziąć, gdzie i jak go wkleić Zapraszam również do obejrzenia filmu, w którym wyjaśniam sposób kopiowania oraz wstawiania kodu szablonu do Allegro, a także w jaki sposób edytować tekst przyszłej aukcji. a) Jak się dostać do kodu? Jak zdobyć kod HTML szablonu? Nic prostszego! Oto, jak to zrobić : Po rozpakowaniu głównego folderu z plikami szablonu, otwórz go Poszukaj pliku o nazwie kod szablonu.txt i otwórz go klikając na nim dwukrotnie lub kliknij na nim jeden raz prawym przyciskiem myszy i z menu rozwijanego wybierz Otwórz ( jak na poniższym screenie). Screen 1. Otwieranie kodu szablonu Po otworzeniu pliku cały kod szablonu jest już widoczny. Wygląda to mniej więcej tak jak na poniższym obrazku. 3

4 Screen 2. Kod HTML szablonu otwarty w notatniku b) Kopiowanie kodu szablonu Teraz należy zaznaczyć CAŁY kod. W tym celu wystarczy kliknąć w dowolnym miejscu dokumentu, a następnie użyć kombinacji klawiszy CTRL + A. Gdy to zrobimy całość kodu zostanie zaznaczona (zmieni kolor na szary), jak poniżej: Screen 3. Zaznaczony kod szablonu 4

5 Gdy kod mamy już zaznaczony używamy kombinacji klawiszy CTRL + C co spowoduje jego skopiowanie do schowka. c) wklejanie kodu szablonu do edytora Allegro Jeżeli masz już skopiowany kod szablonu, musisz go wkleić w odpowiednie okno,aby wystawić aukcję. Aby sprzedać przedmiot wejdź na stronę następnie kliknij przycisk: System poprosi Cię o zalogowanie, gdy to zrobisz ukaże się strona z wyborem kategorii. Wybierz odpowiednią i kliknij przycisk Dalej. Ukaże się okno, jak poniżej: Screen 4. Okno edytora Allegro Kliknij teraz napis:. Proszę pamiętać, aby koniecznie użyć tego przycisku (Edytor tekstowy). Wprawdzie możliwe jest wklejenie kodu po kliknięciu zakładki Kod źródłowy HTML, jednak nie zawsze wtedy szablon zadziała poprawnie! 5

6 Teraz okno zmieni trochę swój wygląd, jak na poniższym screenie: Screen 5. Miejsce wklejenia kodu HTML szablonu przy wystawianiu aukcji Właśnie w to pole należy wkleić kod szablonu, który wcześniej skopiowałeś z notatnika. Gdy kod zostanie wklejony, kliknij :, w okienku ukaże się szablon gotowy do edycji. Można już przygotowywać swoją aukcję, jeżeli nie wiesz jaki to robić, zapraszam do kolejnych rozdziałów. 6

7 2. Edycja szablonu - wstęp Edytować szablon możesz na 3 sposoby: za pomocą edytora wizualnego Allegro, szczegółowy opis edycji tym sposobem wraz ze zrzutami ekranu opisałem w rozdziale 3. Przy pomocy dowolnego edytora wizualnego ( np. NVU ) za pomocą dowolnego edytora tekstu, np. notatnika lub edytora HTML, np. ezhtml, Pajączek, Zajączek i inne. Aby edytować w ten sposób konieczna jest pewna znajomość HTML; w jednym z rozdziałów przedstawiam podstawowe znaczniki HTML, strukturę dokumentu HTML, kolory i inne informacje. 7

8 3. Edycja przy pomocy edytora wizualnego Allegro a) charakterystyka edytora wizualnego Allegro wady i zalety Edycja za pomocą edytora wizualnego Allegro nie jest czynnością skomplikowaną i przypomina nieco korzystanie z programu WORD. Poniżej przedstawiam ( oczywiście subiektywną ) listę plusów i minusów allegrowego edytora: zalety - możliwość szybkiej zmiany wielu elementów aukcji, jak rozmiar i format czcionki, rozmiar zdjęć, wypunktowanie, numerowanie, wcięcie tekstu i inne - obserwowanie zmian w wystawianej aukcji na bieżąco, nie potrzeba nawet podstawowej znajomości HTML - bardzo prosta, intuicyjna obsługa wady - niewielkie okienko edytora, które uniemożliwia przeglądanie całej aukcji naraz, szczególnie jest to kłopotliwe przy bardziej rozbudowanych aukcjach - mały wybór czcionek oraz ich rozmiarów, stąd zmiana na jakąś atrakcyjną wizualnie czcionkę może być możliwa jedynie poprzez edycję kodu HTML - zdarzają się błędy, problemy ze zmianą koloru lub rozmiaru czcionki i inne, jednak większość tych problemów można łatwo rozwiązać Chciałbym jeszcze napisać kilka słów o tym, jak działa edytor wizualny, nie tylko ten z Allegro, ale każdy. Gdy tworzymy np. opis aukcji, wstawiamy zdjęcia itd., edytor wizualny tworzy kod HTML, dzięki czemu nie musimy tego kodu znać. Jest to niewątpliwa zaleta tego typu edytorów. Niestety są również wady. Kod tworzony przez edytory wizualne jest bardzo niskiej jakości, często powstają niepotrzebne znaczniki, niejednokrotnie również niepotrzebnie się powtarzają. Nawet osoba wprawiona w pisaniu kodu HTML będzie mieć problemy z ogarnięciem kodu stworzonego przez edytor i np. dokonaniu w nim zmian. Nie oznacza to, że stworzona w ten sposób strona czy aukcja nie będzie prawidłowo działać, jednak stworzony w ten sposób kod na pewno nie jest ładnie napisany. Piszę o tym, aby Wam uzmysłowić, że edytory wizualne nie są programami idealnymi, czasami bezproblemowe posługiwanie się danym edytorem wymaga nieco wprawy. 8

9 b) charakterystyka edytora wizualnego Allegro wygląd i opis funkcji Jak napisałem w poprzednim rozdziale, po wklejeniu kodu szablonu do edytora Allegro i przełączeniu w tryb wizualny ( przyciskiem ), możemy edytować swoją aukcję. A tak wygląda jeden z szablonów właśnie w tym trybie: Screen 6. Wygląd jednego z szablonów w edytorze wizualnym Allegro W każdej chwili możemy również podejrzeć, jak będzie wyglądać przyszła aukcja, klikając ikonę :. 9

10 Poniżej prezentuję wygląd edytora wizualnego Allegro, wraz z opisem funkcji: Screen 7. Opis edytora wizualnego Allegro 1. Rodzaj czcionki ( 5 rodzajów do wyboru) 2. Wybór rozmiaru zaznaczonej czcionki ( 7 rozmiarów do wyboru ) 3. Zmiana koloru zaznaczonej czcionki ( tutaj wybór jest dość obszerny ) 4. Zmiana tła zaznaczonego tekstu ( również duży wybór kolorów ) 5. Kliknięcie tej ikony pomaga stworzyć link do WWW w jaki sposób opisałem poniżej 6. Tworzy adres szczegóły w dalszej części rozdziału 7. Wstawianie zdjęć o tym również poniżej 8. Pogrubienie zaznaczonego tekstu 9. Pochylenie zaznaczonego tekstu 10. Podkreślenie zaznaczonego tekstu 11. Przekreślenie zaznaczonego tekstu 12. Indeks dolny 13. Indeks górny 14. Wyrównuje zaznaczony tekst do lewej strony 15. Wyrównuje zaznaczony tekst do środka 16. Wyrównuje zaznaczony tekst do prawej strony 17. Wyjustowanie tekstu ( dociągnięcie go zarówno do prawej, jak i lewej strony) 18. Zmniejsza wcięcie zaznaczonego tekstu 19. Zwiększa wcięcie zaznaczonego tekstu 20. Tworzy listę numerowaną 10

11 21. Tworzy listę wypunktowaną 22. Wycina zaznaczony obrazek bądź tekst 23. Kopiuje zaznaczony obrazek lub tekst do schowka 24. Wkleja zawartość schowka 25. Przełącza z powrotem na edytor tekstowy (widok kodu HTML) 26. Umożliwia podgląd strony Allegro umożliwia wybór pięciu krojów czcionki, takich jak: Arial Courier New Times New Roman Tahoma Verdana Czcionki te nie należą raczej do grupy czcionek ozdobnych, są natomiast proste i czytelne, co pozytywnie wpływa na odbiór aukcji przez odwiedzających. c) praca z edytorem wizualnym Allegro formatowanie i edycja tekstu Przejdźmy jednak do pracy z edytorem wizualnym i edycji tekstu. Przykładowy tekst, który będziemy zmieniać na swój, zaznaczamy przeciągając po nim kursorem myszy i trzymając wciśnięty lewy jej lewy przycisk. Gdy tekst zostanie zaznaczony ( jego tło zmieni kolor na szary, jak na poniższym screenie), po prostu zaczynamy wpisywać swój tekst. Screen 8. Zaznaczanie przykładowego tekstu w szablonie. 11

12 W momencie gdy zaczniemy wpisywać swój tekst, zaznaczony tekst przykładowy zniknie. Każde pole w szablonie będzie się dopasowywać swoją długością stosownie do ilości wprowadzonej treści. Nie ma żadnych ograniczeń, co do jej ilości. Możemy oczywiście zmieniać rozmiar, krój czy kolor czcionki. W tym celu zaznaczamy, fragment tekstu, który chcemy zmodyfikować. Dla przykładu: chcemy zmienić kolor kosztu wysyłki (10 zł) na czerwony. Zaznaczamy więc ten fragment tekstu, a następnie wybieramy przycisk zmień kolor. Po wybraniu czerwonego, klikamy wybierz, jak na zdjęciu: Screen 9. Zaznaczanie fragmentu tekstu w celu zmiany koloru w edytorze wizualnym Allegro 12

13 Po kliknięciu przycisku wybierz, zaznaczony fragment staje się czerwony, efekt możesz zobaczyć poniżej : Screen 10. Fragment tekstu zmieniony na kolor czerwony w edytorze wizualnym Allegro Myślę, nie ma sensu tłumaczyć jak dokonać każdej zmiany, jest to bardzo proste, analogicznie jak na powyższym przykładzie. Gdy chcemy zmienić rodzaj czcionki, jej rozmiar, pogrubić, ja pochylić, czy dokonać każdej innej zmiany, postępujemy w podobny sposób zaznaczamy fragment tekstu, który ma być zmieniony i wybieramy odpowiednią opcję u góry z menu edytora. UWAGA! nie każdy tekst w szablonie jest edytowalny. Tekst, np. znajdujący się w górnej grafice, napisy regulamin, wysyłka itp. są plikami graficznymi, które można zmienić jedynie w programie graficznym. Edycja z poziomu edytora wizualnego Allegro czy nawet z poziomu kodu HTML jest niemożliwa. 13

14 d) praca z edytorem wizualnym Allegro usuwanie zdjęć Usuwanie zdjęć jest czynnością banalnie prostą i nie zajmie Ci więcej niż 3 sekundy. Podobnie, jak w przypadku tekstu, zdjęcie zaznaczamy klikając na nie lewym przyciskiem myszy. Następnie klikamy ponownie (prawy przycisk myszy), i z rozwiniętego menu wybieramy Wytnij, tak jak na poniższym screenie: Screen 11. Usuwanie zdjęcia przy pomocy opcji Wytnij w edytorze wizualnym Allegro. Po wykonaniu tej prostej operacji zdjęcie zostanie usunięte. Jak zapewne pamiętasz, jest to sposób bardzo podobny do wycinania tekstu, z tym, że tu zaznaczamy zdjęcie, a nie tekst. 14

15 e) praca z edytorem wizualnym Allegro link tekstowy Link (odnośnik) jest to fragment tekstu, bądź obrazek, który po kliknięciu, przenosi nas do innej strony WWW. Aby w opisie aukcji dodać odnośnik tekstowy do określonej strony, należy zaznaczyć wybrany fragment tekstu, który ma być linkiem, przeciągając po nim kursorem myszy i przytrzymując lewy przycisk myszy, podobnie jak na zdjęciu poniżej: Screen 12. Zaznaczanie fragmentu tekstu w celu utworzenia odnośnika w edytorze wizualnym Allegro Następnie z menu edytora wybieramy przycisk : Utwórz link do WWW ( ). Po wciśnięciu przycisku ukaże się okienko z miejscem na wpisanie adresu. Załóżmy przykładowo, że chcemy dodać link do serwisu Wpisujemy więc ten adres w okienku, które ukazało się po wciśnięciu powyższej ikony, nie usuwając wpisanego już tam fragmentu : 15

16 Screen 13. Wpisywanie adresu www, w celu utworzenia linku w edytorze wizualnym Allegro. Gdy adres do strony zostanie wpisany, klikamy na przycisku.okienko zniknie, a zaznaczony fragment zmieni kolor i po wystawieniu aukcji będzie już linkiem, na który odwiedzający aukcję będzie mógł kliknąć. W tym przypadku będzie on wyglądał tak : Po jego kliknięciu, użytkownik zostanie przeniesiony na stronę czyli adres, który wpisaliśmy wcześniej. 16

17 f) praca z edytorem wizualnym Allegro link obrazkowy Jeżeli chcesz, twoim linkiem może być również dowolny obrazek wstawiony w opis aukcji. W tym celu po wstawieniu obrazka (o wstawianiu obrazków w dalszej części instrukcji), należy go zaznaczyć kliknięciem, aż pojawią się po jego bokach charakterystyczne kwadraciki, jak poniżej; w tym przypadku linkiem będzie obrazek zabawki - lokomotywy: Screen14. Zaznaczony obrazek, który stanie się linkiem, w edytorze wizualnym Allegro. Gdy obrazek jest już zaznaczony, dalej postępujemy identycznie jak w przypadku tekstu, tj. klikamy ikonę Utwórz link WWW ( ), wpisujemy adres, do którego ma prowadzić link, po czym klikamy przycisk. Twój obrazek stanie się linkiem! 17

18 g) praca z edytorem wizualnym Allegro tworzenie adresów Aby utworzyć adres w dowolnym miejscu opisu aukcji, postępujemy bardzo podobnie jak w przypadku tworzenia linku. W tym celu zaznaczamy fragment tekstu, który ma stać się naszym linkiem. Załóżmy, że odnośnikiem , ma być fragment tekstu , jak na zdjęciu poniżej. W tym celu zaznaczamy ten fragment tekstu: Screen 15.Zaznaczony fragment tekstu, który stanie się odnośnikiem . Po zaznaczeniu, wybieramy i klikamy ikonę Utwórz adres ( ), z menu edytora. Podobnie jak w przypadku adresu do strony WWW, pojawi się okienko, gdzie należy wpisać swój , załóżmy, że jest to jan_kowalski@wp.pl : Po wpisaniu klikamy przycisk Wybierz ; zaznaczony fragment zmieni kolor i po wystawieniu aukcji, gdy oglądający aukcję kliknie w niego, będzie mógł wysłać do ciebie wiadomość. UWAGA! Ten sposób wysłania wiadomości zadziała tylko wtedy, gdy użytkownik, odwiedzający aukcję ma skonfigurowany program pocztowy, jeżeli nie, nie będzie mógł ci wysłać a. Dobrym rozwiązaniem jest więc utworzenie adresu www (ikona : ), w którym podamy swój link do formularza wysyłania wiadomości z Allegro. Aby pozyskać ten link 18

19 można np. wejść na jedną ze swoich aukcji, a następnie pod swoją nazwą użytkownika kliknąć przycisk : Zadaj pytanie sprzedającemu, w moim przypadku wygląda to tak: Po kliknięciu powyższego i zalogowaniu się, zostaniemy przeniesieni na stronę, gdzie możemy wysłać wiadomość do siebie. Będąc na tej stronie kopiujemy link z paska adresu, jak na poniższym screenie: Screen 16. Link do skopiowania z serwisu Allegro i umieszczenia jako odnośnik do formularza w Allegro. Następnie zaznaczamy tekst, który ma stać się linkiem do wysłania wiadomości np.:, po czym skopiowany przed chwilą link z paska adresu przeglądarki wklejamy w okienko adres www po kliknięciu ikony : (nie : ) Dalej postępujemy tak jak w przypadku linków www ( poprzedni podpunkt rozdziału ), a więc wklejeniu powyższego linku w okienko: Klikamy. Gratulacje, od teraz użytkownik klikając w twój link na aukcji zostanie przeniesiony do formularza Allegro, który umożliwi natychmiastowe wysłanie a do Ciebie! 19

20 h) praca z edytorem wizualnym Allegro wstawianie i obróbka dowolnej ilości zdjęć UWAGA! Proszę nie przekraczać zalecanej szerokości zdjęć! Informacja, jaka jest dozwolona szerokość zdjęć, zawsze znajduje się w zakupionym szablonie ( wpisana jest z w nim jako tekst przykładowy ). Być może wiesz już jak wstawiać zdjęcia w edytorze wizualnym Allegro, jeżeli jednak nie, opiszę jak to zrobić. Dodam, że zdjęcia wstawione w edytorze ( z zewnętrznego serwera) są bezpłatne i można ich dodać dowolną ilość! W celu dodania zdjęcia, klikamy w wybranym miejscu opisu aukcji, w którym ma się znaleźć zdjęcie, aż pojawi się migający kursor ( przy bardzo ciemnych kolorach tła, kursor może być niewidoczny, należy więc zrobić to na wyczucie ). Następnie z menu edytora wybieramy ikonę Wstaw obrazek :. Podobnie jak w przypadku adresu lub linku, pojawi się okienko, w które należy wstawić link do zdjęcia. Wygląda ono tak: Screen 17. Wygląd okienka do wstawiania zdjęć w edytorze wizualnym Allegro. I tu pojawia się pierwszy problem. Skąd wziąć link do zdjęcia? Aby uzyskać taki link na początek zdjęcie, które chcemy wstawić na aukcję, musimy wgrać na jakiś zewnętrzny serwer. Ja opiszę to na przykładzie bardzo prostego w obsłudze serwisu umożliwiającego wstawianie zdjęć : Imageshack.us. 20

21 Wchodzimy więc na stronę wygląda ona tak : Screen 18. Wygląd strony głównej serwisu Imageshack.us Kolejnym krokiem będzie wysłanie do imageshack obrazka, który chcemy umieścić w aukcji. Załóżmy, że będzie to taki samochodzik: Klikamy więc na stronie na przycisk: Wyskoczy okienko, w którym musimy znaleźć swoje zdjęcie na dysku komputera. Załóżmy, że zdjęcie znajduje się w folderze Moje Dokumenty i w podfolderze obrazki na aukcje : Znajdujemy je więc w tym okienku, jak na screenie : 21

22 Screen 19. Otwieranie obrazka na komputerze w celu wysłania na serwis Imageshack.us Po wyszukaniu zdjęcia i zaznaczeniu go, klikamy przycisk Otwórz. W jednym z okienek na stronie Imageshack, pojawi się nam nazwa obrazka, to znaczy, że wszystko OK. Przed wysłaniem możemy jeszcze zaznaczyć opcję resize image, jak poniżej i wybrać jedną z dostępnych rozdzielczości. Zdjęcie zostanie przeskalowane do wybranej. Screen 20. Wybieranie rozdzielczości obrazka w serwisie Imageshack.us. Ja polecam wybranie opcji 640 x 480, będzie to odpowiedni rozmiar dla większości szablonów. Zdarzają się jednak szablony, dla których powyższy rozmiar może być trochę zbyt duży, istnieje jednak możliwość zmiany rozmiaru zdjęcia już po jego wstawieniu do edytora. Jeżeli natomiast rozmiar naszego zdjęcia nas zadowala, wybierzmy opcję optimize without resizing (optymalizuj bez skalowania). 22

23 Pamiętajmy, że tym sposobem ( opcja resize), możemy tylko zmniejszyć zdjęcie, tak więc, jeżeli zdjęcie, które posiadamy, jest mniejsze niż 640 x 480, nie zostanie ono powiększone do tego rozmiaru. Pamiętajmy również, że im mniejsze zdjęcie, tym krócej odwiedzający Twoją aukcję czeka na jego załadowanie. Po wybraniu rozmiaru pozostaje kliknąć przycisk:, czyli zacznij wysyłanie. Po krótkiej chwili nasz obrazek znajdzie się w serwisie, zobaczymy nową stronę z miniaturką obrazka, oraz linkiem potrzebnym do wstawienia zdjęcia na aukcję: Screen 21. Zdjęcie wysłane na serwis Imageshack.us wraz linkiem potrzebnym do wstawienia zdjęcia na aukcji. Nas interesuje tylko ten link: Po zaznaczeniu, należy go skopiować klikając na nim i używając kombinacji klawiszy CTRL + C, a następnie wkleić w okienko edytora Allegro do wystawiania zdjęć (CTRL + V ), o którym wspomniałem na początku tego podrozdziału, podobnie jak na poniższym screenie: 23

24 Screen 22. Link do zdjęcia z serwisu Imageshack.us wklejony w okno do wstawiania zdjęć w edytorze wizualnym Allegro Możemy teraz kliknąć Podgląd, aby zobaczyć, czy wszystko działa. Obrazek powinien pojawić się w okienku. Mamy tu również możliwość wyboru kilku opcji, takich jak: szerokość ramki, czyli szerokość obramowania obrazka, a także jego kolor ( proszę jednak pamiętać, że suma szerokości ramki i zdjęcia nie powinna przekraczać maksymalnej szerokości zdjęć zalecanej dla danego szablonu) odstęp w poziomie oraz odstęp w pionie od zawartości strony, np. tekstu lub innych obrazków ( proszę mieć na uwadze, że suma szerokości odstępów poziomych i zdjęcia nie powinna przekraczać maksymalnej szerokości zdjęć zalecanej dla danego szablonu) wyrównanie, możesz ustawić obrazek z prawej lub lewej strony opisu aukcji, a także na środku Po wybraniu danych opcji wedle upodobań, należy kliknąć przycisk pojawi się w edytorze:, obrazek 24

25 Screen 23. Obrazek wstawiony do edytora wizualnego Allegro z serwisu Imageshack.us i) praca z edytorem wizualnym Allegro skalowanie zdjęć Jeżeli nie odpowiada nam rozmiar obrazka, zawsze możemy je przeskalować. W tym celu należy kliknąć w zdjęcie, aż pojawią się po jego bokach charakterystyczne małe kwadraciki Chcąc przeskalować zdjęcie, chwytamy wybrany kwadracik i przesuwając kursorem myszy ustalamy pożądany rozmiar. Proszę mieć jednak na uwadze, a by nie przekraczać zalecanej dla danego szablonu szerokości zdjęcia ( wysokość może być dowolna). Ustawienie wielkości fotki ułatwi nam też mała tabelka, pokazująca aktualny rozmiar obrazka ( w tym przypadku 534 x 481 pikseli ). Screen 24. Zmiana rozmiaru obrazka w edytorze wizualnym Allegro 25

26 W opisany powyżej sposób możemy wstawiać dowolną ilość zdjęć zupełnie gratis! Należy jednak wziąć pod uwagę fakt, że Imageshack jest darmowym serwisem i zdjęcia tam umieszczone mogą po pewnym czasie zostać usunięte (nie jest to jednak regułą). i) praca z edytorem wizualnym Allegro cofanie zmian Jeżeli wystawiamy aukcję w edytorze wizualnym Allegro, i coś poszło nie tak, zawsze możemy cofnąć zmiany. Dotyczy to jednak tylko przeglądarek Mozilla Firefox oraz Opera, w Internet Explorer 6 to nie działa. W celu cofnięcia zmiany należy z menu Edycja w górnym menu przeglądarki wybrać opcję Cofnij, lub wcisnąć kombinację klawiszy CTRL + Z, jak na poniższym screenie: Screen 25. Cofanie zmian w edytorze wizualnym Allegro. Aby cofnąć więcej niż jedną zmianę, możemy użyć tego polecenia wielokrotnie. Jeżeli jednak cofnęliśmy zbyt wiele razy, również z menu Edycja należy wybrać opcję Przywróć ( Firefox) lub Powtórz (Opera), możmy też wcisnąć CTRL + Y. i) praca z edytorem wizualnym Allegro wystawianie aukcji Gdy nasz aukcja w edytorze wizualnym jest już gotowa i wygląda w pożądany przez nas sposób, wszystkie dane i zdjęcia są takie jak być powinny - możemy przejść do wystawienia aukcji. Oczywiście wypełniamy wszystkie wymaganie pola, takie jak tytuł aukcji, czas trwania aukcji, cena itd. Następnie przechodzimy na dół strony, i klikamy przycisk. Jeżeli któreś z wymaganych pól nie zostało wypełnione lub wypełniono je błędnie, system nie pozwoli Ci przejść do następnej strony. W tej sytuacji zawsze u góry strona pojawi się odpowiednia informacja. W takim przypadku poprawiamy odpowiednie dane lub 26

27 uzupełniamy informacje i po raz kolejny korzystamy z przycisku strony. na dole Teraz powinniśmy zobaczyć naszą aukcję w całej okazałości. Czasami możemy zobaczyć również poniższy komunikat: Screen 26. Ostrzeżenie na dole strony przy wystawianiu aukcji Allegro Nie ma się jednak czym przejmować, system sam usunie niezalecane elementy i jeżeli strona wyświetla się prawidłowo klikamy na. W tym momencie aukcja zostaje wystawiona, a Allegro informuje nas o tym fakcie oraz wyświetla link do naszej aukcji. 27

28 3a. Edycja przy pomocy edytora wizualnego Allegro rozwiązywanie problemów - pytania i odpowiedzi. Poniżej opisuję standardowe problemy, które mogą wystąpić podczas korzystania z Allegro i z szablonu. a) problem ze zmianą rozmiaru, koloru lub rodzaju czcionki w edytorze wizualnym Allegro Jest to problem, który zdarza się czasami w niektórych przeglądarkach. Można jednak rozwiązać go w bardzo łatwy sposób. Załóżmy, że chcemy zmienić przed chwilą napisany tekst, np. jak na zdjęciu poniżej: Screen 27. Zaznaczanie tekstu w celu sformatowania w edytorze wizualnym Allegro. jednak żadna opcja formatowania nie działa. Zaznaczam, że taki problem nie musi wystąpić, jednak czasami się zdarza. Jak go rozwiązać? To proste. Zaznaczamy tekst, pomijając jego pierwszą literkę, czyli w tym przypadku tak : 28

29 Screen 28. Zaznaczanie tekstu bez pierwszej literki w celu w celu sformatowania w edytorze wizualnym Allegro rozwiązanie problemu z formatowaniem. Gdy zaznaczymy w ten sposób, tekst bez problemu się sformatuje, a pierwszą literkę sformatujemy w identyczny sposób jak tekst - oddzielnie. Jeżeli i ten sposób nie zadziała, można spróbować zaznaczyć tekst bez całego pierwszego wyrazu. b) Podczas wystawiania aukcji w przeglądarce Internet Explorer pojawiają się nieestetyczne odstępy pomiędzy niektórymi elementami grafiki. Czy na aukcji też będą one widoczne? Oczywiście nie będą widoczne. Pojawiają się one tylko w edytorze wizualnym, po wystawieniu aukcji nie będą już widoczne. Dodam, że nie można tego zjawiska nazwać problemem, jest to normalne zachowanie edytora wizualnego pod przeglądarką Internet Explorer. Screen 29. Odstępy pomiędzy niektórymi elementami grafiki w przeglądarce Internet Explorer podczas wystawiania aukcji w edytorze wizualnym Allegro 29

30 Możemy również kliknąć przycisk zniknął., aby przekonać się, że problem z odstępami Mała sugestia: proponuję zrezygnować ze starej przeglądarki Internet Explorer 6, jest to już program wręcz zabytkowy, ma ona wiele wad i może powodować problemy podczas wyświetlania niektórych stron, zwłaszcza tych bardziej nowoczesnych od strony kodu. Również jakość tej samej grafiki wyświetlanej w Internet Explorer oraz w innej przeglądarce różni się, na niekorzyść IE. Niezłą alternatywą jest przeglądarka Mozilla Firefox, z której korzysta coraz więcej ludzi. Możesz ją pobrać np. pod adresem ( wersja polska) : c) aukcja rozjechała się na boki, wygląda to bardzo nieestetycznie, jak rozwiązać ten problem? Najczęstszą przyczyną problemu jest wstawienie zdjęć o zbyt dużej szerokości ( większej niż zalecana dla danego szablonu). Proszę zmienić rozmiar zdjęć na taki, aby nie przekraczały zalecanej szerokości (więcej informacji na temat skalowania zdjęć, można znaleźć w poprzednim rozdziale ). Inną przyczyną nieprawidłowego wyglądu aukcji może być nieużycie przycisku przed wstawieniem kodu szablonu bądź kodu strony O mnie do edytora Allegro. Proszę zawsze go używać przed wstawieniem kodu! Można również kliknąć tylko zakładkę Kod źródłowy HTML i wtedy wkleić kod, jednak wtedy nie ma gwarancji poprawnego działania szablonu lub strony O mnie. d) Przez dłuższy czas wystawiałem aukcję w edytorze wizualnym Allegro, jednak moja praca poszła na marne. Gdy kliknąłem przycisk Dalej w celu wystawienia aukcji, system poprosił o zalogowanie i moja praca przepadła. Jak temu zaradzić? Po dłuższym czasie nieskorzystania z Allegro zdarza się, że system prosi o ponowne zalogowanie. Po ponownym zalogowaniu niestety wynik pracy w edytorze wizualnym przepada. Jest na to sposób. Załóżmy, że przygotowaliśmy już swoją aukcję w edytorze wizualnym, jednak trwało to dość długo i występuje obawa, że kliknięcie przycisku Dalej, po raz kolejny spowoduje utratę efektów naszej pracy. 30

31 Aby temu zaradzić, gdy aukcja w edytorze wizualnym jest już gotowa, klikamy zakładkę. Zobaczymy swój kod, który należy zaznaczyć w całości i skopiować, podobnie jak na zdjęciu: Screen 30. Zaznaczanie i kopiowanie kodu źródłowego aukcji w edytorze wizualnym Allegro. Klikamy w dowolnym miejscu kodu, a następnie zaznaczamy całość przy użyciu kombinacji klawiszy CTR + A. Ponownie klikamy, tym razem prawym przyciskiem myszy i z menu wybieramy Kopiuj, jak na zdjęciu powyżej. Cały kod znajdzie się w tzw. schowku i będzie dostępny do wklejenia w dowolne miejsce. Dobrym pomysłem jest zapisanie go np. w pliku tekstowym. Teraz bez obaw możemy kliknąć Dalej, nawet, gdy system poprosi o zalogowanie i praca przepadnie, nic straconego. Skopiowany przed chwilą kod, wklejamy ponownie do edytora Allegro ( Ctrl + V ) i przełączamy na edytor wizualny. Jak widzimy, efekt naszej pracy nie został zaprzepaszczony! e) Posiadam szablon z czarnym tłem. Po wpisaniu tekstu wcale go nie widać. Jak temu zaradzić? Domyślny kolor tekstu edytora Allegro jest czarny, a więc po wpisaniu czarnego tekstu na czarnym tel, oczywiście nic nie widać. Musimy więc na wyczucie zaznaczyć wpisany ( na razie niewidoczny ) tekst i zmienić jego kolor na jaśniejszy ( jak zmieniać kolor tekstu opisuję w jednym z poprzednich podrozdziałów ). 31

32 4. Tworzenie strony O mnie a) Jak dostać się do okna umożliwiającego wklejenie kodu HTML strony O mnie? Utworzenie strony O mnie jest jest pod wieloma względami bardzo podobne do wystawienia aukcji. Podobnie jak w przypadku aukcji pracujemy z niemal identycznym edytorem wizualnym.aby stworzyć swoją stronę O mnie należy wykonać następujące czynności: wchodzimy na stronę klikamy przycisk u góry strony logujemy się podając swój login oraz hasło klikamy zakładkę rozwinjamy zakładkę klikamy w tekst ponownie logujemy się klikając w pomarańczowy plusik Po wykonaniu powyższych czynności naszym oczom ukaże się edytor strony o mnie, jak wspomniałem powyżej, jest on praktycznie identyczny z edytorem do wystawiania aukcji, a wygląda tak: Screen 31. Wygląd edytora strony O mnie Allegro 32

33 b) edycja strony O mnie Podobnie jak w przypadku aukcji, KONIECZNIE klikamy przycisk w puste pole wklejamy kod HTML strony O mnie. i Kod strony O mnie znajduje się w pliku tekstowym o nazwie kod strony omnie.txt. Zawartość pliku kopiujemy w identyczny sposób, jak kopiowaliśmy kod szablonu aukcji. ( strony 3-4). Po wklejeniu kodu klikamy przycisk zasadzie, jak edytowaliśmy szablon aukcji. i edytujemy stronę, na identycznej c) Wystawienie strony O mnie Gdy zakończymy edycję, podobnie jak przy wystawianiu aukcji klikamy przycisk na dole strony. Również może pojawić się ostrzeżenie: Screen 32. Ostrzeżenie przy wystawianiu strony Omnie I podobnie jak w przypadku aukcji, jeżeli strona wyświetla się poprawnie, nie ma się czym przejmować. Następnie, po upewnieniu się, że wszystko jest OK, klikamy przycisk Zatwierdź. W tym momencie strona O mnie zostaje utworzona! 33

34 5. Edycja przy pomocy dowolnego edytora HTML podstawy HTML Być może chcielibyście poznać podstawy HTML-a i edytować swój szablon od strony kodu? Jeżeli tak poniżej przedstawiam strukturę dokumentu HTML, oraz najprostsze znaczniki HTML. a) Co to są znaczniki? Znacznik ( tzw. tag )jest to specjalny tekst, umieszczony w nawiasach ostrych, np.: <b>. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Dzięki niemu możemy np. ustalić kolor tła, rodzaj formatowania tekstu, wstawić obrazek czy tabelę itd. Znacznik nie jest widoczny na ekranie, widoczne są tylko efekty jego działania (np. wstawienie obrazka, utworzenie linii, nadanie odstępu w tekście itd.). b) Struktura dokumentu HTML Każdy dokument HTML, czy to szablon, czy strona WWW, musi posiadać określoną strukturę, szkielet, w którym znajduje się zawartość strony, jak tekst i grafika. A tak ona wygląda : <HTML> <HEAD> <META http-equiv="content-type" content="text/html"; charset=iso "> <TITLE> tu wpisujesz tytuł strony </TITLE> </HEAD> <BODY> Tutaj znajduje się treść strony </BODY> </HTML> Pomiędzy znacznikami BODY, znajduje się cała treść strony. Pomiędzy znacznikami HEAD wprowadza się elementy takie jak: deklaracje stylów, skrypty Java script itp., ale jest to już sprawa dla trochę bardziej zaawansowanych. Natomiast fragment : <META http-equiv="content-type" content="text/html"; charset=iso "> Jest konieczny do wyświetlania przez przeglądarkę polskich znaków. Pomiędzy znacznikami TITLE można wpisać tytuł strony, będzie on widoczny na górnym panelu okna przeglądarki. 34

35 c) kolory w dokumencie HTML Dla każdego elementu dokumentu HTML możemy określić wybrany kolor. Podstawowe kolory posiadają swoją nazwę, jak np. blue, red, green, yellow, można użyć także kodów kolorów np. #FF0FF0, #9400D3. Poniżej prezentuję fragmenty tabeli z nazwami i/lub kodami kolorów: Screen 33. Tabela podstawowych kolorów Screen 34. Fragment tabeli rozszerzonej kodów kolorów Pełną listę kodów kolorów możesz znaleźć np. pod linkami :

36 Aby nadać kolor wybranemu elementowi strony, należy użyć polecenia, które zawiera w sobie słowo COLOR. Przykładowo, aby zdefiniować kolor tabeli wpisujemy: <table bgcolor= gray > Aby zmienić kolor tekstu pomiędzy znacznikami FONT wpisujemy <font color= red > Aby ustawić główny kolor dokumentu wpisujemy w znaczniku BODY: <body bgcolor= black > d) kilka podstawowych znaczników HTML akapit Akapit jest to część tekstu objęta znacznikami: <p>...</p>. Aby umieścić tekst na stronie, wystarczy, że umieścimy go pomiędzy tymi znacznikami. Przykład : <p> To jest zwykły tekst </p> przeglądarka wyświetli jako : To jest zwykły tekst pogrubienie fragmentu tekstu Aby pogrubić dany tekst wystarczy, że umieścimy go pomiędzy znacznikami <b></b> Przykład : <b> To jest tekst pogrubiony </b> przeglądarka wyświetli jako : To jest tekst pogrubiony 36

37 pochylenie tekstu Aby pochylić wybrany fragment tekstu, umieszczamy go pomiędzy znacznikami <i></i> Przykład: <i> To jest tekst pochylony </i> przeglądarka wyświetli jako To jest tekst pochylony zmiana czcionki, rozmiaru i koloru fragmentu tekstu Aby bardziej zaawansowanie zmienić tekst wystarczy, że umieścimy go między znacznikami <font></font>. Dodatkowo należy podać wartości i ich atrybuty. Wartości, jakie możemy dodać do <font> : e) size podajemy wartość liczbową określa rozmiar tekstu ( domyślny rozmiar to 3, jeżeli nie podasz wartości tekst będzie w tym rozmiarze ) f) color określa kolor czcionki, domyślny to czarny, jeżeli nie podasz wartości, kolor tekstu będzie czarny g) face określa nazwę czcionki Kilka przykładów ( rozmiar tekstu ): <font size= 4 > Tekst o rozmiarze 4 </font> Przeglądarka wyświetli jako : Tekst o rozmiarze 4 <font size= 5 > Tekst o rozmiarze 5 </font> Przeglądarka wyświetli jako : Tekst o rozmiarze 5 37

38 <font size= 7 > Tekst o rozmiarze 5 </font> Przeglądarka wyświetli jako : Tekst o rozmiarze 7 Kilka przykładów ( kolor tekstu ): <font color= blue > Kolor niebieski </font> przeglądarka wyświetli jako: Kolor niebieski <font color= #2DB95A > Odcień zielonego</font> Przeglądarka wyświetli jako Odcień zielonego Kilka przykładów ( czcionka ): <font face="comic sans ms">czcionka comic sans ms</font> przeglądarka wyświetli jako: Czcionka comic sans ms <font face="arial"> Czcionka arial</font> Przeglądarka wyświetli jako : Czcionka arial 38

39 Oczywiście istnieje możliwość łączenia ze sobą kilku parametrów, co umożliwia większą kontrolę nad tekstem. Kilka przykładów ( łączenie parametrów ): <font face= arial size= 5 color= blue > To jest tekst z czcionką arial, o wielkości 5 i kolorze niebieskim</font> Przeglądarka wyświetli jako : To jest tekst z czcionką arial, o wielkości 5 i kolorze niebieskim <font face= sans serif size= 2 color= Purple > To jest tekst z czcionką Sans serif, o wielkości 2 i kolorze purpurowym </font> Przeglądarka wyświetli jako: To jest tekst z czcionką Sans serif, o wielkości 2 i kolorze purpurowym <font face="comic sans ms" size= 4 color= # > To jest tekst z czcionką comic sans ms, o wielkości 4 i w kolorze ciemno-szarym</font> Przeglądarka wyświetli jako: To jest tekst z czcionką comic sans ms, o wielkości 4 i w kolorze ciemno-szarym dodanie prostej linii poziomej Aby dodać prosta linię poziomą wystarczy, że umieścimy w dowolnym miejscu znacznik <HR>. Tego znacznika nie trzeba zamykać! Możemy także określić długość linii za 39

40 pomocą parametru WIDTH. Możemy również ustawić linię po odpowiedniej stronie, korzystając z polecenia ALIGN, wygląda to tak: a) align= center położenie linii na środku b) align= left położenie linii z lewej strony ( domyślne) c) align= right połżenie linii z prawej strony Kilka przykładów : <hr> Przeglądarka zinterpretuje jako : <hr width= 200 > Przeglądarka zinterpretuje jako : <hr width= 200 align= right > Przeglądarka zinterpretuje jako : <hr width= 400 align= center > Przeglądarka zinterpretuje jako : 40

41 przejście do nowej linii Aby przejść do nowej linii podczas pisania tekstu, należy użyć znacznika <BR>. Tego znacznika nie trzeba zamykać! Aby jeszcze oddalić tekst od siebie, należy go użyć kilka razy. Kilka przykładów : Witam na mojej aukcji, mam nadzieję, <br>że będziesz zadowolony z moich towarów. Przeglądarka wyświetli jako: Witam na mojej aukcji, mam nadzieję, że będziesz zadowolony z moich towarów. Witam na mojej aukcji, mam nadzieję, <br><br>że będziesz zadowolony z moich towarów. Przeglądarka wyświetli jako: Witam na mojej aukcji, mam nadzieję, że będziesz zadowolony z moich towarów. tworzenie listy wypunktowanej Aby stworzyć listę wypunktowaną, bardzo przydatną, na wielu aukcjach wystarczy wykorzystać dwa znaczniki : <ul> oraz <li>. Znacznik <ul> otwiera listę wypunktowaną ( później należy ją zamknąć poprzez </ul> ), natomiast tekst umieszczony pomiędzy znacznikami <li></li> tworzy jeden podpunkt. Przykład: <ul> <li> podpunkt pierwszy </li> <li> podpunkt drugi</li> <li> podpunkt trzeci </li> <li> podpunkt czwarty </li> </ul> 41

42 Przeglądarka wyświetli jako: podpunkt pierwszy podpunkt drugi podpunkt trzeci podpunkt czwarty łączenie znaczników Wiele znaczników, które zaprezentowałem wyżej możesz ze sobą łączyć, co jeszcze powiększa możliwości formatowania. Kilka przykładów : <font size= 5 color= red > <b> <i> To jest tekst o rozmiarze 5, w kolorze czerwonym, dodatkowo pogrubiony i pochylony </i> </b> </font> Przeglądarka wyświetli jako: To jest tekst o rozmiarze 5, w kolorze czerwonym, dodatkowo pogrubiony i pochylony <font face= comic Sans MS size= 4 > </b> To jest tekst z czcionką comic sans ms, o rozmiarze 4 i pogrubiony </b> </font> Przeglądarka wyświetli jako: To jest tekst z czcionką comic sans ms, o rozmiarze 4 i pogrubiony 42

43 <ul> <li><i><b>tekst przykładowy 1</b></i></li> <li><i><b>tekst przykładowy 2</b></i></li> <li><i><b>tekst przykładowy 3</b></i></li> </ul> Przeglądarka wyświetli jako: tekst przykładowy 1 tekst przykładowy 2 tekst przykładowy 3 tworzenie tabeli Podstawowa struktura tabeli wygląda w następujący sposób: <table> <tr> </tr> <tr> </tr> </table> <td>...</td> <td>...</td> <td>...</td> <td>...</td> Kilka przykładów: <table> <tr> </tr> <tr> </tr> </table> <td>komórka1</td> <td>komórka3</td> <td>komórka2</td> <td>komórka4</td> Przeglądarka wyświetli jako: komórka1 komórka2 komórka3 komórka4 43

44 Przedstawiam również kilka parametrów, które możemy podać dla znacznika TABLE, takich jak: width określa szerokość tabeli w pikselach height określa wysokość tabeli w pikselach border określa grubość obramowania tabeli wartość 0 to brak obramowania bgcolor - kolor tła tabeli Kilka przykładów: <table border= 2 width= 400 height= 200 bgcolor= red > <tr> <td>komórka1</td> <td>komórka2</td> </tr> <tr> <td>komórka3</td> <td>komórka4</td> </tr> </table> Przeglądarka wyświetli jako : <table border="4" width="200" height="200" bgcolor="blue" > <tr> <td>komórka1</td> <td>komórka2</td> </tr> <tr> <td>komórka3</td> <td>komórka4</td> </tr> 44

45 Przeglądarka wyświetli jako: wstawianie obrazków Aby wstawić obrazek należy użyć polecenia A HREF. Można także podać parametry takie jak: width szerokość obrazka height wysokość obrazka border grubość obramowania obrazka Kilka przykładów: Jeżeli posiadamy obrazek na zewnętrznym serwerze (o tym jak dodać zdjęcie na serwer wspomniałem przy opisywaniu wstawiania obrazków do edytora wizualnego Allegro), możemy podać ścieżkę dostępu do obrazka na serwerze w poleceniu IMG SRC Przykładowo adres do obrazka: wstawiony w polecenie IMG SRC wraz z parametrami WIDTH, HEIGHT i BORDER wygląda tak: <IMG SRC=" WIDTH="250" HEIGHT="200" BORDER="3"> Przeglądarka wyświetli jako: 45

46 Jeżeli temat zainteresował i chciałbyś wiedzieć jeszcze więcej, zapraszam na świetną moim zdaniem stronę na której można poznać wszystkie znaczniki HTML z dokładnym opisami, style CSS i wiele, wiele innych przydatnych wiadomości, opisanych w bardzo prosty i przejrzysty sposób. Jest to prawdopodobnie najlepszy internetowy kurs tego typu, a przede wszystkim DARMOWY 46

47 6. Przedstawienie programu Edytor Znaczników HTML a) opis podstawowych funkcji programu Aby edytować szablon od strony kodu HTML, warto zainstalować jeden z programów do jego edycji. Jako ciekawostkę, przedstawiam właśnie jeden z nich i opisuję jego podstawowe możliwości. Aplikację można pobrać np. tutaj: Screen 35. Wygląd programu Edytor Znaczników HTML Opis wyróżnionych elementów: 1. Panel kolorów, umożliwia szybkie i łatwe wybranie i wstawienie dowolnego koloru 2. Panel ułatwień, umożliwia wprowadzenie zmian, takich jak: zmiana kolorowania Tagów podpowiedzi składniowe automatyczne dodawanie znacznika zamykającego kilka innych 3. Menu wstaw, umożliwia proste i szybkie wstawianie elementów takich jak: obrazek odnośnik 47

48 pozioma linia wiele innych elementów 4. Tabela ułatwień, umożliwia szybkie wstawianie elementów, formatowanie tekstu, ustawianie czcionki, wstawianie tabel i wiele innych. W tym poradniku nie będę opisywał dokładniej tego elementu programu 5. Wyświetlenie nazwy pliku, nad którym pracujesz Poniżej przedstawiam również umiejscowienie przełączników z trybu tekstowego na podgląd i odwrotnie: Screen 36. Przełączniki trybów: edycja kodu-podgląd A tak wygląda mój kod szablonu na podglądzie wizualnym : 48

49 Screen 37. Podgląd szablonu w programie ezhtml Postanowiłem więcej nie opisywać programu, myślę, że przedstawienie tych kilku elementów powyżej powinno Ci wystarczyć do podstawowych zmian w szablonie. Znacznie ułatwia on edycję w porównaniu z notatnikiem, choćby już przez to, że jest bardziej przejrzysty i posiada edytor wizualny. 49

50 Dodatek: Umieszczanie plików szablonu na innym serwerze Jeżeli chcesz się uniezależnić od mojego serwera lub kończy się okres gwarantowanego przeze mnie hostingu plików twojego szablonu możesz umieścić całą grafikę szablonu na własnym serwerze. Wraz szablonem otrzymałeś wszystkie potrzebne pliki. Pierwszą rzeczą, jakiej musisz dokonać w celu przeniesienia plików, będzie wrzucenie ich na twój serwer. Zakładam, że już taki posiadasz, więc opiszę w jaki sposób dokonać transferu plików. Praktycznie każdy serwer posiada obsługę ftp, dlatego też przedstawiam poniżej jak przenieść pliki za pomocą programu Total Commander posiada on wbudowanego klienta ftp. Program możesz pobrać np. z adresów: Po ściągnięciu programu na dysk komputera należy go zainstalować. Instalacja jest bardzo prosta i na pewno nie sprawi kłopotów, podczas instalacji możesz też określić język programu ( do wyboru również język polski ). Po zainstalowaniu programu musisz go uruchomić, klikając dwukrotnie ikonę programu ( program podczas instalacji powinien umieścić skrót na pulpicie, jeżeli tak się jednak nie stało, domyślnie program powinien znajdować się w katalogu C:/Program Files/totalcmd. A tak wygląda program po uruchomieniu: Screen 1. Wygląd programu Total Commander po uruchomieniu. Jak widzisz program nie jest zbyt skomplikowany, a jedyne elementy programu, które będą potrzebne oznaczyłem cyferkami: 50

51 - 1,2) Program składa się z jakby dwóch stron. Zarówno z prawej jak i lewej strony znajdują się listy rozwijane, które pozwalają wybrać odpowiednią partycję dysku, na przykładzie z obu stron jest to partycja C. 3) ikona służy do przeprowadzania transakcji ftp, a więc tego co nas interesuje. Kliknij więc tę ikonę. Ukaże się okienko, które służy do wprowadzania nowych połączeń przy użyciu ftp. Wygląda ono, jak poniżej: Screen 2. Wygląd programu Total Commander po wciśnięciu ikony FTP Jak pewnie zauważyłeś, okienko w moim przypadku nie jest puste, gdyż posiadam już kilka wprowadzonych połączeń ftp. Aby przenieść pliki na swój serwer musisz ustawić parametry dla swojego połączenia, w tym celu kliknij ikonę jak poniżej:. Otworzy się kolejne okno, 51

52 Screen 3. Okienko do wprowadzania nowego połączenia w programie Total Commander. Jak widzisz, w okienku znajdują się puste pola, które należy uzupełnić. Dane, które należy wprowadzić, powinieneś posiadać otrzymać podczas zakładania konta na serwerze. Uzupełnij więc je, w następujący sposób: Sesja tutaj należy wpisać dowolną nazwę, nie ma znaczenia co tu wpiszesz, np. Mój serwer Nazwa hosta jest to nazwa, którą powinieneś otrzymac, przy zakładaniu konta na serwerze, np. ftp.republika.pl Hasło - Tutaj podajesz swoje hasło dla połączeń ftp Użyj trybu pasywnego do transferu(jak w przeglądarce WWW) zaznacz ptaszkiem jak na zdjęciu Reszty pól nie ma potrzeby wypełniać, gdy wszystko co koniecznie uzupełniłeś, kliknij przycisk. Okienko zostanie zamknięte, a twoje połączenie zostanie wyświetlone liście, podobnie jak moje połączenia na screenie nr. 2. Ok, wszystko co potrzebne do połączenia zostało zdefiniowane, pozostaje się połączyć z serwerem. W tym celu kliknij na nazwę swojego połaczenia, którą wprowadziłeś przed chwilą, załóżmy, że jest to Mój serwer, jak widzisz jest już na liście połączeń: 52

53 Screen 4. Lista połączeń po utworzeniu nowego połączenia o nazwie Mój serwer w programie Total commander. Pozostaje więc zaznaczyć połączenie klikając na nie ( jak na screenie powyżej) i kliknąć przycisk. W tym momencie program połączy się z serwerem, jeżeli wszystko będzie ok, po chwili w jednym z okienek zobaczysz pliki na swoim serwerze lub jeżeli jeszcze nic nie wgrywałeś, puste miejsce, jak na zdjęciu: 53

54 Screen 5. Wygląd programu Total Commander po połączeniu z serwerem Jak widzisz, zostało utworzone połączenie ftp, a w miejscu wskazanym strzałką, znajduje się adres serwera. Już niedługo będziesz mógł wgrać plik szablonu na serwer. Proponuję teraz utworzyć folder, do którego będziesz wrzucał pliki szablonu. Kliknij więc z lewej strony programu, po stronie połączenia, gdyż właśnie na serwerze chcemy stworzyć folder. Następnie wciśnij klawisz F7, lub przycisk w programie F7 UtwKat. W okienku, które się pojawi, wpisz nazwę dla folderu, np. moj_szablon. UWAGA! Proszę nie używać polskich znaków ani dużych liter, przy tworzeniu folderów na serwerze, należy także unikać spacji, jeżeli chcesz zrobić odstęp, użyj pauzy przytrzymując klawisz Shift, otrzymasz wtedy tzw. podkreślnik : _. Po utworzeniu folderu, będzie to wyglądać tak: 54

55 Screen 6. Folder mój_szablon utworzony na serwerze z użyciem programu Total Commander. Kolejnym krokiem będzie wgranie plików szablonu na serwer. Musisz wiec, w okienku po prawej stronie wyszukać swoje plik szablonu. Załóżmy, że szablon znajduje się na partycji D, wybierasz więc z listy rozwijanej odpowiednią partycję, czyli właśnie D Następnie wyszukujesz folder szablonu, załóżmy, że jest to szablon silownia1, wchodzisz więc w folder silownia1, a następnie w folder grafika, jak na zdjęciu: 55

56 Screen 7. Pliki graficzne szablonu gotowe na przesłanie do serwera w programie Total Commander. Jak widzisz, widoczne są już wszystkie pliki graficzne szablonu, teraz wystarczy przesłać je na serwer. W tym celu wejdź jeszcze w folder mój_szablon na serwerze, klikając w niego dwukrotnie. Już możesz przesłać pliki, w tym celu zaznacz pliki z lewej strony, poprzez przejechanie po nich z wciśniętym lewym klawiszem myszy. Powinny przybrać kolor czerwony. Następnie kliknij na F5 Kopiowanie w programie lub wciśnij przycisk F5 na klawiaturze. Po kilku, kilkudziesięciu sekundach ( w zależności od szybkości łącza ), twoje pliki powinny znaleźć się na serwerze. Tak to wygląda u mnie : 56

57 Screen 8. Pliki graficzne szablonu wgrane na serwer do folderu mój_szablon w programie Total Commander. Ok, pliki są już na serwerze, więc musimy wytłumaczyć szablonowi, żeby pobierał je właśnie stamtąd. W tym celu należy zmodyfikować odnośniki do grafiki w szablonie. Otwórz go więc za pomocą np. notatnika ( jak to zrobić zostało opisane w instrukcji). W otwartym kodzie szablonu musisz pozmieniać wszystkie adresy, które odnoszą się do grafiki. Jak wyglądają te adresy i ile ich jest? W każdym szablonie znajduje się przeważnie kilka takich odnośników. A wyglądają w następujący sposób ( na przykładzie szablonu silownia1 ): 57

58 Jak widzisz wszystkie te odnośniki zaczynają się od http, a kończą.jpg. Jest to właśnie adres do pliku graficznego na moim serwerze, który to plik szablon pobiera. Ty musisz teraz zmienić te adresy, aby prowadziły do plików na twoim serwerze. Pliki są już wgrane, więc należy podać adres. Jaki to ma być adres? To proste. Wszystko zależy od adresu twojego serwera. Jak może zauważyłeś w przykładach z programem Total commander, w moim przypadku był to serwer Jeżeli więc chciałbym zmienić w kodzie, aby pliki wgrywały się z tego serwera, musze podać ten adres w kodzie HTML. Jak zapewne pamiętasz, pliki wgrywałem do folderu mój_szablon. A więc adres należy już troszkę zmodyfikować. Wygląda on teraz tak : Gdybym pliki wgrał do folderu np. szablony, adres do plików wyglądał by tak: Myślę, że ten prosty przykład pozwoli ci zrozumieć, na czym polega adresowanie dostępu do plików. Ok. W takim razie ustawmy nowe adresy dla plików. 58