Studia Podyplomowe Grafika Komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW

Transkrypt

1 Ćwiczenie nr 1 Zapoznanie się z pracą w środowisku Dreamweaver CS6 Tworzenie prostego serwisu WWW Publikacja w Internecie Praca własna dr inż. Robert Banasiak 1

2 Materiały ćwiczeniowe Wszelkie materiały ćwiczeniowe: wykłady, instrukcje oraz pliki ćwiczeniowe dla potrzeb realizacji materiału dydaktycznego z przedmiotu będą dostępne przed kolejnymi zajęciami na stronie WWW prowadzącego: w zakładce Grafika Komputerowa. Wśród materiałów ćwiczeniowych znajdą się pliki graficzne oraz tekstowe, a także pliki multimedialne i inne niezbędne do zajęć materiały.!uwaga nr 1! Proszę pamiętać by w trakcie realizacji zadań ćwiczeniowych często zapisywać zmiany w dokumentach na dysku.!uwaga nr 2! Proszę pamiętać by w trakcie realizacji zadań ćwiczeniowych realizować instrukcję KROK PO KROKU. Jest to klucz do sukcesu Plan ćwiczenia W trakcie niniejszego ćwiczenia dowiecie się Państwo między innymi jak: 1. Pracować i poruszać się w środowisku Adobe Dreamweaver CS6 2. Skonfigurować własny projekt serwisu internetowego przy użyciu środowiska Adobe Dreamweaver CS6; 3. Korzystać z podstawowych elementów przestrzeni roboczej programu Dreamweaver; 4. Utworzyć nową stronę WWW, wykorzystując wbudowany szablon w programie Dreamweaver; 5. Prawidłowo zapisać na dysku projekt strony WWW i jego składowe dokumenty; 6. Pracować w trybie Kod oraz Kod i Projekt; 7. Korzystać z podglądu strony WWW w trybie Widoku Aktywnego oraz zewnętrznej Przeglądarki; 8. Zmodyfikować tytuł strony i nagłówki tekstowe; 9. Wprowadzić tekst pochodzący z innego dokumentu (np. Microsoft Word) i zmienić jego właściwości; 10. Osadzać pliki graficzne; 11. Tworzyć i edytować proste style CSS dla wbudowanego, gotowego szablonu strony WWW; 12. Założyć konto z przestrzenią dyskową na stronę WWW na darmowym serwerze; 13. Skonfigurować zdalny serwis WWW; 14. Umieścić pliki na serwerze WWW; 15. Pobierać pliki ze zdalnego serwisu WWW. Wynikiem Państwa pracy będzie prosty serwis WWW o Adamie Mickiewiczu, który po opracowaniu zostanie opublikowany w Internecie na Państwa ćwiczeniowym koncie WWW utworzonym na dzisiejszych zajęciach. 2

3 Pierwszy serwis WWW Prace wstępne (!!!!Bardzo ważne 4 kroki!!!!) 1. W pierwszym kroku należy pobrać ze strony prowadzącego materiały do ćwiczeń w postaci archiwum: 2. Utwórzmy na dysku (w wybranym przez siebie miejscu, sugeruję np. Biurko) folder Moje Serwisy, w nim w środku folder Portal Adama Mickiewicza, a w nim folder Obrazy (może być też: Obrazki/Grafiki/Images -> wedle uznania ). 3. Umieszczamy (koniecznie!) w folderze przeznaczonym na grafiki trzy obrazki (pobrane wraz z materiałami w punkcie 1), które będą wykorzystane przy budowie serwisu. 4. W katalogu głównym serwisu tj. w folderze Portal Adama Mickiewicza umieszczamy pozostałe dostarczone pliki, np. plik inwokacja.rtf; Od prawidłowego przeprowadzenia tych czterech zadań zależy późniejsze prawidłowe funkcjonowanie naszego projektu w Adobe Dreamweaver. Uruchamiamy program Adobe Dreamweaver i przystępujemy do pracy. Skonfigurujmy teraz nowy serwis o nazwie Portal Adama Mickiewicza korzystając z polecenia Nowy Serwis -> Zaawansowane -> zadanie to zostanie zaprezentowane przez prowadzącego zajęcia w trakcie wykładu; 3

4 1. Zapoznajmy się z Ekranem Powitalnym programu Dreamweaver oraz z układem i funkcjami menu programu Dreamweaver (czas przeznaczony na tę pracę to około 20 minut ); Jeżeli zaznaczymy to pole, ekran powitalny nie zostanie pokazany przy kolejnym uruchomieniu Adobe Dreamwaver 2. Dokonajmy teraz wyboru szablonu strony WWW wybierając w górnym menu Plik -> Nowy -> Nowy Dokument. Wybierzmy typ strony: HTML oraz Układ: 2 kolumny, stała szerokość, pasek boczny z lewej, nagłówek i stopka. 3. Proszę się upewnić co do wyboru prawidłowego szablonu przed zatwierdzeniem wyboru. Od tego zależy powodzenie w realizacji ćwiczeń. 4. Zaakceptujmy szablon poprzez przycisk Utwórz. 4

5 !!!!! Wynikiem tego działania powinien być szablon strony WWW, wypełniony fikcyjną zawartością: 5. Zapiszmy stronę jako plik o nazwie index.html (Plik -> Zapisz Jako) BARDZO WAŻNY KROK!!! 6. Zapoznajmy się teraz z trzema trybami pracy w programie Dreamweaver: Projekt, Kod, Kod i Projekt; Przełącz się pomiędzy nimi; 5

6 Widok kod Widok Projekt Widok Podziel (Kod i Projekt) 7. Zmień tytuł strony na: Portal o Adamie Mickiewiczu; 8. Zmodyfikuj nagłówki dokumentu korzystając z poniższej ilustracji. W celu zrealizowania tego zadania należy kliknąć dwukrotnie (w miarę szybko ) bezpośrednio na modyfikowanym elemencie. 9. Wklejamy (Kopiuj/Wklej) tekst Inwokacji z Pana Tadeusza, z przygotowanego przez prowadzącego zajęcia dokumentu z rozszerzeniem RTF zamiast przykładowego bloku tekstu zaczynającego się od Lorem ipsum dolor sit amet a kończącego na tristique in, vulputate at, odio.; Rezultat wstawienia tego tekstu jest widoczny na powyższym rysunku; 10. Zauważamy od razu że tekst nie jest wyjustowany. Aby go wyjustować przełączamy widok w tryb Kod, odnajdujemy fragment kodu w którym jest zawarta treść Inwokacji i usuwamy na końcach każdego wersu znacznik HTML <br />. Po usunięciu tych znaczników przechodzimy do widoku Projekt i zaznaczamy cały tekst Inwokacji bez nagłówka. Następnie udajemy się do zakładnik Właściwości (jeżeli nie jest widoczna naciskami Ctrl+F3 -> powinna się pojawić, jeśli się nie pojawiła prosimy prowadzącego o pomoc. Następnie zaznaczamy z boku tego paska opcję CSS (konfiguracja styli kaskadowych) a następnie 6

7 wybieramy z prawej strony paska opcję Justowanie. Po naciśnięciu tej opcji pojawi nam się okno tworzenia Nowej Reguły CSS: Pojawiają się tu różne informację dojdziemy do nich w toku zajęć. Tymczasem jedynie naciskamy Ok. Efektem tego zabiegu powinien być wyjustowany tekst Inwokacji. 11. Wstawiamy grafikę AdamM.jpg w lewym panelu strony WWW (w tym z nagłówkiem Zawartość paska bocznego Sidebar1). W tym celu usuwamy znajdujący się tam tekst wraz z nagłówkiem. Następnie korzystamy z ikony Wstaw Obraz z panelu Wspólne. Jeżeli panel jest niewidoczny można skorzystać z górnego paska menu Wstaw -> Obraz, bądź ze skrótu klawiszowego Ctrl+Alt+I. Efekt naszych działań powinien mniej więcej zgadzać się z poniższą ilustracją. Oczywiście na końcowy efekt wizualny możemy wpłynąć sami dostosowując rozmiary grafik według własnego uznania (rozmiary można dostosowywać przy pomocy myszy -> czarne kwadraciki po zaznaczeniu grafiki bądź w trybie Kod zmieniając parametry odpowiedniego znacznika HTML img -> width="150" height="207", rozmiary podane są w pikelach). 12. W podobny sposób (korzystając z trybu Kod lub Kod i Projekt) wstawmy grafiki PanT.jpg i AdamM2.jpg w obrębie tekstu. 13. Wykorzystując wbudowane w szablon na którym pracujemy reguły CSS o nazwach.fltrt i.fltlft uzyskamy efekt opływania tekstu wokół grafik z prawej lub lewej strony. Aby zastosować te klasy zaznaczamy daną (wstawioną w tekst) grafikę, udajemy się do znanego nam już panelu Właściwości. Odnajdujemy pole klasa i staramy się w nim wybrać regułę.fltrt lub.fltlft. Po wybraniu reguły nasza grafika zostanie otoczona równomiernie tekstem. 7

8 14. Dostosujmy rozmiary grafik do rozmiarów bloku tekstowego; 15. Zmieńmy kolor tła strony WWW (na dowolny wybrany przez siebie kolor). W tym celu udajemy się do trybu Kod, odszukujemy definicję reguły (stylu) dla znacznika HTML o nazwie body (okolice 8 linijki kodu HTML licząc od góry). Następnie dokonujemy ręczną modyfikację tego stylu CSS poprzez zmianę wartości atrybutu background: z # na dowolnie wybrany przez siebie kolor. Można to łatwo zrobić poprzez skasowanie poprzedniej wartości tego atrybutu (#666666) i ponowne wpisanie znaku #. Wówczas Dreamweaver powinien otworzyć okienko wyboru kolorów. Wybieramy interesujący nas kolor dopisujemy na końcu linii znak ; <- BARDZO WAŻNE. 16. Zmieńmy teraz kolor tekstu nagłówka strony na żółty poprzez modyfikację w trybie Kod stylu:.twocolfixlthdr #header #h1; W celu zmiany domyślnego koloru musimy dopisać do jego atrybutów atrybut color. Kolor ustawiamy tak jak punkcie 15 według własnego uznania. 17. Zmieniamy krój czcionki nagłówka Adam Mickiewicz Online na Times New Roman lub inny dowolny poprzez modyfikację stylu:.twocolfixlthdr #header #h1; W tym celu klikamy na Adam Mickiewicz Online, a następnie korzystamy z panelu Style CSS dostępnego z prawej strony okna Adobe Dreamweaver (jeżeli takiego okna nie ma, zgłaszamy problem prowadzącemu zajęcia. Klikamy w panelu na Style CSS. Rozwijamy drzewko styli i powinniśmy odnaleźć tam regułę o nazwie.twocolfixlthdr #header h1. Klikając dwukrotnie na tę regułę otwieramy okienko Definicja reguły W powyższym okienku wybieramy nowy krój czcionki poprzez pole Font-family. Zatwierdzamy klawiszem Ok. 18. Zmieńmy wielkość (na 220% lub inną dopasowaną wizualnie), krój oraz ustawmy podkreślenie czcionki napisu Pan Tadeusz modyfikując odpowiedni styl (korzystamy ze sposobu z poprzedniego ćwiczenia); 19. Zmieńmy cały tekst Inwokacji na pochylony (Italic) korzystając z panelu Właściwości przełączając ten panel w tryb HTML. 20. Pracując w trybie Kod i Projekt (lub Kod) odszukajmy w kodzie HTML w pierwszym wersie Inwokacji słowo maja i zmieńmy je na poprawne moja ; 21. Sprawdźmy czy zmiana dokonana w kodzie HTML została wprowadzona równie w trybie Projekt; 22. Podejrzyjmy wygląd strony w trybie Widok Aktywny (po wykonaniu punktu koniecznie WYŁĄCZAMY WIDOK AKTYWNY przed dalszymi krokami edycyjnymi); 23. Podejrzyjmy wygląd strony w trybie Przeglądarki (F12) domyślnie jest to Mozilla Firefox (jeżeli jest zainstalowana w systemie). Jest możliwość wyboru przeglądarki poprzez górne menu -> Plik -> Podgląd w przeglądarce. 8

9 Publikowanie zbudowanego serwisu WWW w Internecie 1. Udajemy się na stronę internetową: 2. Następnie klikamy 3. Wybieramy nazwę domeny -, zaznaczamy Plan darmowy : 4. Wybieramy plan hostingowy -> Free Plan darmowy 9

10 5. Po uzupełnieniu wszystkich danych możemy sobie podejrzeć naszą nowo utworzoną przestrzeń robocządla strony WWW wpisując nasz adres strony w przeglądarce. 6. Następnie udajemy się do opcji Konfiguracji naszego serwisu WWW w programie Dreamweaver CS6. Serwis -> Zarządzaj serwisami -> wybieramy nasz serwis -> Serwery 7. Dodajemy nowyt serwer ikonką + 8. Wprowadzamy paramtery serwera (adres ftp: nazwadomeny.cba.pl, login: admin@nazwadomeny.cba.pl + hasło) 10

11 Naciskamy Testuj i w przypadku, gdy wszystkie dane wprowadziliśmy poprawnie powinniśmy uzyskać następujące okienko potwierdzające: 9. Mając tak skonfigurowane połączenie możemy teraz wysłać nasz serwis O Adamie Mickiewiczu na zdalny serwer WWW. Po wysłaniu przetestujmy działanie nowo utworzonego konta. Ćwiczenie 1 do samodzielnego zrobienia (jeżeli czas pozwala ) Korzystając wiedzy i nabytych umiejętności z dzisiejszych zajęć opracuj od podstaw własny prosty serwis korzystając z gotowego szablonu o nazwie Dwie kolumny, wszystkie szerokości w pikselach, z prawym paskiem bocznym. Dodaj do projektu serwisu krótki (10-15 linijek) tekst na temat aktualnej polskiej reprezentacji w piłce siatkowej. Okraś publikację kilkoma grafikami. Zastosuj poznane w trakcie poprzedniego ćwiczenia różne formatowania tekstu oraz możliwości zmian szaty kolorystycznej. Pamiętaj o zrealizowaniu Prac wstępnych (cztery ważne kroki!!!). Ćwiczenie 2 do samodzielnego zrobienia (jeżeli wciąż czas pozwala ) Korzystając wiedzy i nabytych umiejętności z dzisiejszych zajęć opracuj od podstaw proste Bio korzystając z gotowego szablonu dobranego według własnych upodobań. Pamiętaj o zrealizowaniu Prac wstępnych (cztery ważne kroki!!!). 11