W4 -24.XI Pakiet Office – edytor HTML

1. Technologie informacyjne Mechatronika PWSW W4 -24.XI Pakiet Office – edytor HTML

2. Superaplikacja biurowa – MS- OFFICE Microsoft Office to pakiet aplikacji biurowych wyprodukowany przez firmę Microsoft. Popularny - powszechnie wykorzystywany w firmach i przez zwykłych użytkownikow domowych. Programy składające się na Microsoft Office są przeznaczone na platformę Microsoft Windows oraz Apple Mac OS X, mogą zostać uruchomione na innych systemach (GNU/Linux, FreeBSD itp.) wersje: starsze, XP, 2003, 2007, 2010

3. W skład pakietu MS Office Basic wchodzą: − Microsoft Word(edytor tekstu) − Microsoft Excel(arkusz kalkulacyjny) − Microsoft PowerPoint(tworzenie prezentacji multimedialnej) − Microsoft Office Picture Manager (przeglądarka obrazow, prosta edycja zdjęć) Ponadto: − Microsoft Outlook (program pocztowy, kalendarz). − Microsoft Access (tworzenie i obsługa baz danych) − Microsoft OneNote (robienie notatek, dodawany od wersji 2003) − Microsoft Publisher (tworzenie publikacji prasowych) − Microsoft Visio (edytor schematów) − Microsoft Office SharePoint Designer (poprzednio FrontPage; tworzenie i edycja stron WWW) − Microsoft Project (zarządzanie harmonogramem projektów) i inne nawet Microsoft Office Communicator (Komunikator internetowy)

4. MS Powerpoint Krótko możliwości (przećwiczymy na laboratorium) Widoki: slajd, sortowanie slajdów, notatki, wyświetlenie prezentacji • Podstawowe elementy slajdu: • tekst • grafika (obrazy, wykresy, schematy organizacyjne, równania matemat.) • dźwięk • Możliwości: • sterowanie tempem • efekty wizualne (animacje, przejścia slajdów)

5. EDYTORY TEKSTU - wprowadzenie Podział edytorów tekstu ASCII dokumentu redagowanego • MS WordPad (Write) • MS Word • WordPerfect • NC-edit • Notatnik • vi - unix • Tech • Works • AmiPro • Open Office inne • Write • WordStar • ChiWriter • TAG

6. Pośrednictwo użytkownika edytora MS Word • składowe okna: • menu operacji • paski narzędzi • pasek stanu • menu podręczne • możliwości: • praca z wieloma dokumentami równocześnie (menu Okno) • podział okna (dokumentu) na dwie części WYSIWYG (what you see is what you get) „masz to co widzisz”

7. podział logiczny: sekcje - wygląd stron akapity (paragrafy) - wygląd fragmentów stron (nowy wiersz) obiekty (rysunki, wzory, wykresy, tabele, pola tekstowe) znaki operacje: Wstaw Znak podziału  Sekcji Wstaw Obiekt | Rysunek | Pole tekstowe Enter - koniec akapitu sekcja 1 sekcja 2 Z sekcja 3 i n k a

8. podział redakcyjny: • strony • wiersze • Istota: • automatyczny podział tekstu na strony • automatyczny podział tekstu na wiersze Ale podział na sekcje nie jest automatyczny !

9. Układ strony • Najważniejsze opcje: • Rozmiar • Orientacja • Marginesy – proponowane/niestandardowe • Podgląd wydruku w ikonie Office w lewym górnym rogu ekranu

10. AKAPIT - 1 lub więcej wierszy stanowiących całość logiczną, zakończony znakiem końca akapitu. ŁAMANIE WIERSZY odbywa się AUTOMATYCZNE !!! Naciśnięcie ENTER wymusza zmianę wiersza a więc jest początkiem nowego akapitu. AKAPIT posiada zawsze całkowitą liczbę wierszy (jeden lub więcej). • Niewskazane • wiele spacji • puste akapity jako odstępy (wykonywać przez parametry akapitu – odstęp przed i po)

11. Położenie akapitów marginesy strony wcięcie 1-go wiersza wcięcie prawostronne wcięcie lewostronne odstęp po odstęp przed sumuje się Tylko tak robimy – przez parametry akapitu – Format Akapit

12. Odstępy wewnątrz akapitu • spacja • NORMALNA • NIEROZDZIELAJĄCA (CRTL+SHIFT + SPACJA) • tabulatory (większe odstępy) • kolumny • tabela ENTER – koniec akapitu (można usuwać) SHIFT+ENTER – wymuszone złamanie akapitu

13. Formatowanie czcionki – łatwe ale.... • x2 - indeksy górne i dolne •      - Wstaw symbol italic

14. Nawigacja w dokumencie • typowa: • myszka + paski przewijania • klawiatura - o znak, wiersz, akapit, ekran, pocz./koniec KlawiszeSkok kursora o znak o wiersz CTRL+ CTRL+ o słowo w prawo, lewo Home/End na początek/koniec wiersza CTRL+ /CTRL+o akapit PgDn/PgUp o ekran CRTL+Home CTRL+End początek/koniec dokumentu • inne możliwości: • skok do specyficznego miejsca (wiersz, strona, sekcja, obiekt) • menu Edycja Przejdź do, makroklawiszCtrl-G (ang. go to), klawisz funkcyjny F5

15. Ważniejsze operacje Zaznaczanie i operacje edycyjne • typowe: • wprowadzanie + usuwanie + przemieszczanie + kopiowanie • bezpośrednio + schowek • znaki, wycinki • tryb wstawiania/zastępowania: • przycisk w pasku stanu • klawisz Insert (zmiana trybu wstawianie-zastępowanie) Techniki - schowek - przeciąganie Kasowanie znaków (Delete, Backspace)

16. Widoki dokumentu • widok normalny – wpisywanie, edycja i wstępne formatowanie • widok wydruku – podgląd w ikonie Office wszystkie szczegóły wyglądu stron dokumentu wstawianie i rozmieszczanie obiektów edycja nagłówków i stopek ustawiania marginesów ustawianie układu kolumnowego • podgląd wydruku • widok konspektu - wielopoziomowe listy wyliczane Widoczność znaków niedrukowanych - narzędzie ¶ widzimy znaki reprezentujące zmiany wiersza, spacje, tabulatory, wymuszone zakończenia strony, sekcji itp.

17. Sprawdzanie poprawności pisowni i gramatyki • na bieżąco: • Narzędzia Opcje Pisownia i gramatyka • Menu Recenzja w Office 2007 • jednorazowo: • Narzędzia Pisownia i gramatyka • przycisk paska narzędzi • F7 • kolejno: propozycje zmiany wyrazu ręczna edycja wyrazu rezygnacja ze zmiany Dzielenie wyrazów na sylaby na prawym marginesie: Menu Narzędzia – Język – Dzielenie wyrazów (lub Układ strony! w Office2007) F4 - powtarzanie ostatniej operacji (przydatne) malarz formatów

18. Szukanie i zastępowanie • operacje: • Edycja Znajdź lub Ctrl-F (ang. Find) • Edycja Zamień lub Ctrl-H (ang. cHange) Narzędzia główne • Wstawianie obiektów (grafika i inne) • menu Wstawianie

19. Tworzenie i wykorzystanie stylówdo formatowania • Styl – nazwany zestaw parametrów dla akapitu – właściwości akapitu – wcięcia odstępy itp., czcionka- wielkość, krój itd., obramowania, język itp.) • ułatwia jednolite formatowanie • tylko dla stylów Nagłówek możliwe utworzenie spisu treści • Style (okienko stylów) • - nowy styl, • modyfikacja • dodawanie do meny szybkich stylów

20. Równania matematyczne Wstaw ObiektMicrosoft Equation 3.0, Bezpośrednio dostępne w Office 2007 w menu Wstawianie Dodatkowe narzędzie, pasek elementów najczęściej występujących w równaniach, rozwijane narzędzia paska. Uwaga: Najpierw wybierać strukturę (np. ułamek, indeksy) a potem w odpowiednie pola wstawiać obiekty z klawiatury lub z paska

21. Obramowania i cieniowania • Elementy które można obramować: • Znaki • Słowa • Dłuższy akapit • Tabele • Rysunki • Strona

22. komórki scalone Tabele Sposoby wstawiania tabeli: ·lub menu Wstawianie/Tabela  Wstaw tabelę Narzędzie Rysuj tabelę (tabele o strukturze nierównomiernej) Poruszanie się po tabeli – klawisze nawigacyjne, TAB, SHIFT+TAB, klikanie myszką

23. Inne możliwości Tabulatory – standardowe i własne (odstępy poziome i wyrównanie) TABULATOR– pozycja, do której wykonać można skok poziomy poprzez użycie klawisza tabulacji TAB, zastępuje użycie wielu spacji (co nie jest zalecane) Pozycje tabulatorów widoczne na linijce górnej Typy tabulatorów: ·Wyrównanie do lewej ·Wyrównanie do prawej ·Wyrównanie do środka ·Dziesiętny (dla liczb) – wyrównanie do kropki lub przecinka dziesiętnego Nazwisko Data Cecha Premia Kowalski 10.10.1999 wysoki 1500,00 Nowak 1.11.1987 niski 1456.50 Malinowski 2.02.1988 średni 50,90 Powielenie tabulatorów dla nowego - wstawianego akapitu

24. Podział na sekcje Podział dokumentu na sekcje umożliwia: ·Zróżnicowanie liczby kolumn gazetowych ·Zróżnicowanie formatowania strony (czasem potrzebna 1 strona poziomo, obrócona o 90o) ·Zróżnicowanie nagłówków i stopek (np. dla rozdziałów) Podział na sekcje: ·1 sposób – wstawianie znaków końca sekcji (menu Układ strony – znaki podziału) ·2 sposób – zaznaczenie fragmentu tekstu i ustalenie liczby kolumn – podział automatyczny Znak podziału kolumny – Układ strony/kolumny

25. Listy – Narzędzia główne/ Akapit – ikony dla list • wyliczanie • numerowanie (w tym konspekty numerowane – lista wielopoziomowa) Nagłówki i stopki – menu Wstawianie (tytuł rozdziału, numer strony) – zróżnicowane dla sekcji Numery stron – menu Wstawianie - Numer strony Spisy treści – KONIECZNY STYL NAGŁÓWKOWY! DLA AKAPITÓW TYTUŁOWYCH (Nagłówek1, Nagłówek2..) Menu Odwołanie - Indeks i spisy

26. Inne możliwości: • Tezaurus – synonimy, • Tłumaczenie • Przypisy • Recenzja (śledź zmiany) – poprawki widoczne lub nie

27. Strony WWW (World Wide Web) Mosaic – pierwsza przeglądarka 1993 • Internet Explorer • Opera • Firefox(Mozilla) • Safari • Chrome(Google)

28. HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML – kod źródłowy języka, można bezpośrednio pisać korzystając z edytora tekstu nieformatowanego (ASCII) np. Notatnik – zapis w pliku z rozszerzeniem htm lub html • HTML • zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce internetowej, • osadzanie ciągów instrukcji języków skryptowych, wpływających na zachowanie przeglądarek lub innych parserów HTML.

29. Dynamiczny HTML lub DHTML (ang. DynamicHyperTextMarkupLanguage, dynamiczny hipertekstowy język znaczników) • techniki służące do dynamicznej zmiany treści, wyglądu, zachowania dokumentu HTML w przeglądarce • umożliwiające interakcję strony WWW z użytkownikiem i stosowanie efektów wizualnych • plik HTML - tekst nieformatowany – małe pliki łatwe do przesyłu w sieci

30. Znaczniki (tagi) – postać ogólna <ZNACZNIKatrybuty> zawartość</ZNACZNIK> atrybuty są opcjonalne (niekonieczne) PODSTAWOWA STRUKTURA dokumentu HTML <HTML> <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD> <BODY> Tu są elementy pojawiające się na stronie </BODY> </HTML> konfiguracja treść strony

31. Przykład <A href="jakiś_adres"> Onet </A> nazwa atrybutu wartość atrybutu znacznik zamykający znacznik otwierający zawartość

32. Znaczniki podstawowe (jest ich ok. 80) • Strukturalne, np . • H1 – nagłówek • P – akapit • TABLE - tabela • DIV, SPAN - grupujące • Prezentacyjne – określające formę – np. • B – pogrubienie • I – italic • Hiperłącza (kotwice) • A

33. Zagnieżdżanie znaczników <P> Tekst1<B><I>Tekst2 </I> Tekst 3</B></P> Tekst3 Tekst2 Tekst1 <TD><IMGsrc="obraz.jpg" /></TD> obrazek w komórce tabeli

34. Znaczniki elementów pustych <ZNACZNIK /> przykładowo: <BR /> wymuszona zmiana wiersza <IMG /> grafika <INPUT /> pole formularza można pisać: <BR> </BR> lub <BR/> lecz zgodnie z XHTML powinno być: <BR /> ze spacją

35. Wybrane znaczniki … Akapit tekstowy - znacznik <P> - Przykłady: <P align="center"> Tytuł </P> <P align="left"> Tytuł2 </P> wybór kroju, koloru, rozmiaru czcionki przez atrybut style i jego cechy – o tym za chwilę Dawniej określał to znacznik <FONT> ale niezalecany dla nowszych standardów HTML Akapity nagłówkowe określonych gotowych stylów <H1> Nagłówek pierwszy </H1> <H2> Nagłówek drugi </H2> <H3> Nagłówek trzeci </H3> <H4> Nagłówek czwarty</H4> <H5> Nagłówek piąty</H5> <H6> Nagłówek szósty</H6>

36. Linie poziome znacznik HR pusty – nie ma znacznika zamykającego <HR SIZE="7" WIDTH="400" COLOR="yellow" /> <HR SIZE="8" WIDTH="100" ALIGN=left COLOR="navy" /> whiteaqua silvergrayblue fuchsia lime red teal olive yellow maroon navy

37. Kolory Oprócz nazw ang. można podawać 3 dwupozycyjne liczby w układzie szesnastkowym (cyfry 0123456789ABCDEF), określające nasycenie składowych RGB (red, green, blue) od 00 (minimum) do FF (maksimum = 25510) np. #17AACF czyli np. #00FF00 to zielony R G B

38. Styl czcionki <B> tekst </B> pogrubiona <I> tekst </I> kursywa <U> tekst </U> podkreślona Stosuje się tylko lokalnie, np. wewnątrz akapitu dla krótkiego fragmentu tekstu <P>Litwo, <B> Ojczyzno </B> moja</P> tylko jedno słowo pogrubione

39. Kolor tła strony – jako atrybut znacznika BODY <BODYBGCOLOR="nazwa koloru"> poprawniej: <BODY style="background-color:nazwa koloru"> motywy lub obrazek w tle strony można zdefiniować innymi parametrami stylu dla BODY – o tym za chwilę

40. Tabele <TABLE BORDER="1"> …. </TABLE> <TR>…</TR> znacznik wiersza <TD>…</TD> znacznik kolumny Przykład: <TABLE BORDER="1"> <TR> <TD> AA </TD> <TD> AB </TD></TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE>

41. Lista wypunktowana <UL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </UL> Lista numerowana <OL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </OL>

42. Przykład • <ol> • <li>Punkt 1.</li> • <li>Punkt 2. • <ul> • <li>Podpunkt 1.</li> • <li>Podpunkt 2.</li> • </ul> • </li> • </ol> • 1. Punkt 1. • 2. Punkt 2. • Podpunkt 1. • Podpunkt 2. efekt

43. Grafika znacznik IMG <IMGSRC="ścieżka_do_pliku/nazwa_pliku" /> <IMG border="0" src="email_7.gif" width="55" height="45" /> <IMG SRC="OBRAZY/plik.jpg" HEIGHT="80" /> folder podrzędny względem tego, w którym jest plik HTML

44. Odsyłacze (link – hiperłącze) Odsyłaczem jest konstrukcja, która wskazuje pewien adres (zakładka na tej samej stronie, inna strona, inny adres URL) i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. <A HREF= "adres " > Tekst (lub obrazek), który należy kliknąć </A> Np. <A HREF= " http://www.wp.pl" > Wirtualna Polska </A> <A HREF="http://www.microsoft.com/poland/”> Możesz zaglądnąć pod ten adres </A> <A HREF="./reklama.htm"> <IMG SRC="reklama.jpg" > </A>

45. Formularze <FORM> <SELECTname="Typy" multiple="multiple"> <OPTION selected="selected">Rock and roll</OPTION> <OPTION>Jazz</OPTION> <OPTION>Blues</OPTION> </SELECT> <INPUTtype="RADIO" name="wybor" value="p" />Podstawowe <INPUTtype="RADIO" name="wybor" value="s" />Średnie <INPUTtype="RADIO" name="wybor" value="w" />Wyższe Wpisz tekst:<INPUTtype="text" name="T1" size="20"/> <INPUTtype="submit" value="OK" name="B1" /> <INPUTtype="reset" value="Reset" name="B2" /> ta sama nazwa cd. …

46. <INPUT TYPE="CHECKBOX" NAME="ok" VALUE="B" /> OK <TEXTAREA NAME="TEKST" ROWS="5" COLS="20"> MIEJSCE NA WIĘKSZY TEKST </TEXTAREA><BR /> </FORM>

47. efekt…

48. Dla obsługi danych wpisanych do formularzy (np. ich wysłanie na serwer w celu zapisu czy też analizy) konieczne jest zastosowanie specjalnych metod

49. Przykład dokumentu HTML <HTML> <HEAD> <TITLE> Moja strona </TITLE> </HEAD> <BODY bgcolor="gray"> <H1> To jest moja strona </H1> <HR size="2" align=leftcolor="navy" /> <TABLE BORDER="3"> <TR> <TD> AA </TD> <TD> AB </TD></TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE> <UL> <LI> <A HREF='http://www.onet.pl>Onet</A> <LI> <A HREF='http://www.google.pl>GOOGLE</A> <LI> <A HREF='http://www.interia.pl>Interia</A> </UL> </BODY> </HTML> HEAD tabela BODY lista hiperłączy

50. CSS – arkusze stylów opiera się na zasadzie określania cech elementy dzięki atrybutowi style <ZNACZNIKstyle="cecha:wartość"> ... Styl może mieć wiele cech, np.: <P style="font-size:20px;color:blue"> ... <TABLE style=" background-color:#ff0000; border:2px solid red;"> ... cechy stylu oddzielamy średnikami