Zastosowanie technologii medialnych i internetowych Wygląd witryny krok po kroku Wykład dr in ż. Jacek Wachowicz

Prezentacja na temat: "Zastosowanie technologii medialnych i internetowych Wygląd witryny krok po kroku Wykład dr in ż. Jacek Wachowicz"— Zapis prezentacji:

1 Zastosowanie technologii medialnych i internetowych Wygląd witryny krok po kroku Wykład dr in ż. Jacek Wachowicz jacek.wachowicz@zie.pg.gda.pl www.zie.pg.gda.pl/~jwach

2 Zastosowanie technologii medialnych i internetowych Szablon strony - początek Tworzymy projekt Zapisujemy na dysku Dodajemy pusty wiersz

3 Zastosowanie technologii medialnych i internetowych Wstawienie tabeli Wstawiamy tabelę

4 Zastosowanie technologii medialnych i internetowych Połączenie komórek Zaznaczamy komórki do połączenia Klikamy prawym klawiszem myszki Wybieramy połącz zaznaczone komórki

5 Zastosowanie technologii medialnych i internetowych Wstawienie nagłówka Wstaw przygotowany wcześniej obrazek korzystając z ikonki obrazek

6 Zastosowanie technologii medialnych i internetowych Dostosowanie wielkości komórek Można wykorzystać ikonki na listwach (patrz rys) Rozmiary wymuszają też rysunki umieszczone jako IMG

7 Zastosowanie technologii medialnych i internetowych Właściwości tabeli Wybieramy z menu właściwości tabeli Szerokość obramowania: 0 Odstęp: 0 Marginesy: 0 Wyrównanie: wyśrodkuj

8 Zastosowanie technologii medialnych i internetowych Szerokość tabeli Szerokość tabeli można Zostawić pustą Dostosuje się automatycznie do elementów Wpisać jako procent szerokości okna Nie więcej jak 70-80% Wpisać jako piksele Nie więcej jak 700-800 pikseli Najlepiej ustalić małą, stałą szerokość – ok. 400 pikseli, a potem wymusić zwiększenie szerokości obrazkiem nagłówka

9 Zastosowanie technologii medialnych i internetowych Tło komórki Aby obrazek był tłem należy go przygotować Ustawić pożądaną wielkość (np. za pomocą Irfan View: Image / Resize) Bardzo zmniejszyć kontrast (np. za pomocą Irfan View: Image / Color corrections) Rozjaśnić obrazek (np. za pomocą Irfan View: Image / Color corrections)

10 Zastosowanie technologii medialnych i internetowych Organizacja tabel Tabele są wewnątrz znacznika TABLE Zapisywane są wierszami, od góry do dołu, wewnątrz znacznika TR (Table Row) Każdy wiersz zapisywany jest komórkami, od lewej strony do prawej, wewnątrz znacznika TD (Table Data)

11 Zastosowanie technologii medialnych i internetowych Wstawianie tła Przełączamy się do widoku Źródło Znajdujemy właściwą komórkę Wewnątrz odnalezionego znacznika dodajemy parametr BACKGROUND=obrazek.jpg

12 Zastosowanie technologii medialnych i internetowych Właściwości tła Tło, inaczej niż obrazki, nie rozciąga tabel Jeżeli tło jest większe od komórki – wówczas wyświetlany jest tylko fragment Jeżeli tło jest mniejsze od komórki – wówczas tło jest powtarzane w poziomie i pionie Przy powtarzaniu zwykle widać miejsca połączeń obrazków, co nie wygląda zbyt pięknie Istnieją obrazki specjalnie projektowane jako tła – mają górną krawędź taką jak dolna oraz prawą taką jak lewa – dzięki czemu nie widać miejsc połączeń Przykładowe obrazki na tła można znaleźć pod adresem http://www.allfreebackgrounds.com/background_select.html http://www.allfreebackgrounds.com/background_select.html

13 Zastosowanie technologii medialnych i internetowych Dodanie koloru menu Klikamy na komórce prawym przyciskiem myszki Wybieramy kolor tła komórki Wybieramy kolor

14 Zastosowanie technologii medialnych i internetowych Dodanie pozycji menu Dodajemy pozycje menu jako tekst Za pomocą ikonki odnośnik zamieniamy je na linki do przyszłych stron Przed linkami warto dodać kilka spacji by nie dotykały krawędzi

15 Zastosowanie technologii medialnych i internetowych Ostatnia kosmetyka Zmieniamy wyrównanie w komórkach na do góry (prawy przycisk myszy – właściwości komórki) Zmieniamy wyrównanie całej tabeli na wyśrodkowane (Tabela / Właściwości tabeli) Zmieniamy kolor tła dla całej strony (Format / Kolor strony i tło)

16 Zastosowanie technologii medialnych i internetowych Powielenie stron Zapisujemy przez zapisz jako strony pod nazwami poszczególnych stron, takimi jak zdefiniowane w menu – tyle razy ile potrzebujemy Na każdej ze stron dodajemy indywidualną treść

17 Dziękuję za uwagę