Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

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

Podobne prezentacje


Prezentacja na temat: "W4 -24.XI Pakiet Office – edytor HTML Technologie informacyjne Mechatronika PWSW."— Zapis prezentacji:

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

2 Superaplikacja biurowa – MS- OFFICE wersje: starsze, XP, 2003, 2007, 2010 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.) 2

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) 3

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) 4

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

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” 6

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

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

9 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) 10

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

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 12

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

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

15 Zaznaczanie i operacje edycyjne Ważniejsze operacje  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) 15

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. 16

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 17

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

19 Tworzenie i wykorzystanie stylów do formatowania Style (okienko stylów) - nowy styl, -modyfikacja -dodawanie do meny szybkich stylów 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

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 20

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

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

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) 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 NazwiskoDataCecha Premia Kowalski wysoki 1500,00 Nowak niski Malinowski średni 50,90 Pozycje tabulatorów widoczne na linijce górnej Powielenie tabulatorów dla nowego - wstawianego akapitu 23

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 90 o )  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 24

25 wyliczanie numerowanie (w tym konspekty numerowane – lista wielopoziomowa) Listy – Narzędzia główne/ Akapit – ikony dla list 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 Nagłówki i stopki – menu Wstawianie (tytuł rozdziału, numer strony) – zróżnicowane dla sekcji 25

26 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 (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. HTML

29 Dynamiczny HTML lub DHTML (ang. Dynamic HyperText Markup Language, 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 Tytuł w nagłówku okna Tu są elementy pojawiające się na stronie PODSTAWOWA STRUKTURA dokumentu HTML zawartość konfiguracja treść strony atrybuty są opcjonalne (niekonieczne)

31 Onet znacznik otwierający nazwa atrybutu zawartość znacznik zamykający wartość atrybutu Przykład

32 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 Znaczniki podstawowe (jest ich ok. 80)

33 Zagnieżdżanie znaczników Tekst1 Tekst2 Tekst 3 Tekst1 Tekst2 Tekst3 obrazek w komórce tabeli

34 Znaczniki elementów pustych przykładowo: wymuszona zmiana wiersza grafika pole formularza można pisać: lub lecz zgodnie z XHTML powinno być: ze spacją

35 Wybrane znaczniki … Przykłady: Tytuł Tytuł2 Nagłówek pierwszy Nagłówek drugi Nagłówek trzeci Nagłówek czwarty Nagłówek piąty Nagłówek szósty Akapit tekstowy - znacznik - Akapity nagłówkowe określonych gotowych stylów wybór kroju, koloru, rozmiaru czcionki przez atrybut style i jego cechy – o tym za chwilę Dawniej określał to znacznik ale niezalecany dla nowszych standardów HTML

36 Linie poziome znacznik HR pusty – nie ma znacznika zamykającego white aqua silver gray blue fuchsia lime red teal olive yellow maroon navy

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

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

39 Kolor tła strony – jako atrybut znacznika BODY motywy lub obrazek w tle strony można zdefiniować innymi parametrami stylu dla BODY – o tym za chwilę poprawniej:

40 …. … znacznik wiersza … znacznik kolumny Przykład: AA AB BA BB CA CB Tabele

41 tekst punktu pierwszego tekst punktu drugiego tekst punktu trzeciego Lista wypunktowana Lista numerowana tekst punktu pierwszego tekst punktu drugiego tekst punktu trzeciego

42 Punkt 1. Punkt 2. Podpunkt 1. Podpunkt Punkt Punkt 2. Podpunkt 1. Podpunkt 2. Przykład efekt

43 Grafika znacznik IMG folder podrzędny względem tego, w którym jest plik HTML

44 Odsyłacze (link – hiperłącze) Tekst (lub obrazek), który należy kliknąć Np. Wirtualna Polska Możesz zaglądnąć pod ten adres 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ą.

45 Formularze Rock and roll Jazz Blues Podstawowe Średnie Wyższe Wpisz tekst: cd. … ta sama nazwa

46 OK MIEJSCE NA WIĘKSZY TEKST

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 Moja strona To jest moja strona AA AB BA BB CA CB Onet GOOGLE Interia Przykład dokumentu HTML tabela lista hiperłączy BODY HEAD

50 CSS – arkusze stylów Styl może mieć wiele cech, np.:... cechy stylu oddzielamy średnikami opiera się na zasadzie określania cech elementy dzięki atrybutowi style...

51 Przykładowe cechy stylów Styl OpisPrzykładowa wartość background-color kolor tła #ff0000 albo rgb(255,0,0) blue background-image adres tła graficznegourl('rys1.gif ') border-color kolor ramkired border-style styl i wygląd obramowania dotted dashed solid border wiele cech obramowania2px solid yellow color kolor tekstu yellow # font-family rodzaj oraz rodzina czcionkiArial sans-serif font-size wielkość czcionki 14px 2cm font-style styl czcionkiitalic

52 font-weight grubość (waga) czcionkibold lighter height wysokość elementu10px 3mm width szerokość elementu100px left top odległość od lewej (górnej) krawędzi 10cm 3mm position określenie współrzędnych elementu fixed relative margin odległości od zewnętrznego elementu 3px 3px 10px 20px margin-top margin-bottom margin-left margin-right każdy margines osobno5cm text-align wyrównanie poziome tekstuleft center justify text-decoration wygląd tekstuunderline vertical-align wyrównanie w pionietop bottom padding oddalenie wewnętrznego elementu

53 definiowany element element wewnętrzny element zewnętrzny

54 Przykład zastosowania margin i padding Tekst w komórce Obejrzeć efekt w przeglądarce

55 Sposoby definicji stylów znaczników 1 sposób: bezpośrednio w elemencie To jest tekst

56 Indeks: elementy p {font-size: 44px;} table {background-color:#ff0000;} To jest tekst 1 AAA dla akapitów dla tabel 2 sposób: w bloku HEAD wewnątrz znacznika

57 Indeks: elementy.czerwony {background-color:#ff0000;} A B Tekst zastosowania klasy Można zestaw cech nazwać – jest to tzw. klasa – i stosować atrybut class dla różnych znaczników AB Tekst tabela akapit. (kropka)

58 A B tekst akapitu body, td, p {font: 14px helvetica, sans-serif; border:2px solid red} table {border:2px solid black;}.gruby {font: bold 18px helvetica, sans-serif;} Przykład2: i dalej.. tekst akapitu A B

59 Indeks: elementy #maly {font-size:10px;} #duzy {font-size:30px;} Tekst 1 Tekst 2 Można też stosować identyfikatory znaczników Tekst 1 Tekst 2 #

60 Plik style.css p {font-size: 44px;}.czerwony {background-color:#ff0000;} Plik index.html Indeks: elementy To jest tekst 1 AAA 3 sposób: W osobnym pliku robimy definicje stylów

61 Przykład skryptu HTML z arkuszem stylów Moja strona To jest moja strona AA AB BA BB CA CB Onet GOOGLE INTERIA body{ background-color:gray} table{border-width:3px;}.lista {font-size:20px} plik style.css

62 Javascript JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. JavaScript jest oddzielnym językiem (nie jest uproszczoną wersją Javy). Może być osadzany w dokumentach HTML. Javascript jest łatwy w nauce i pozwala na pewne „zdynamizowanie” stron internetowych. Przeglądarka IExplorer pyta o zezwolenie na wykonanie skryptu.

63 Wstawienie skryptu do dokumentu HTML Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript umieszczane są między znacznikami i. treść skryptu

64 To jest tekst 1 treść skryptu 1 To jest tekst 2 treść skryptu 2 Może istnieć wiele skryptów naprzemiennie z pozostałym kodem HTML

65 Aby tworzyć działające skrypty JavaScript wymagane są: -jakaś metoda wprowadzania i przechowania danych (liczb, tekstów) -jakieś instrukcje, które umożliwią obliczenia wyników -jakieś metody pokazania wyniku

66 // obiekt document i jego metoda write - wypisanie tekstu document.write ("To jest zwykły tekst"); // wysyłamy też znacznik HTML document.write (" "); x=5; //nadajemy wartość zmiennej y=13; //nadajemy wartość zmiennej wynik=13; //nadajemy wartość zmiennej (obliczenie) //... i wyświetlamy jej wartość document.write("Wartość wyniku : "+wynik); a to już akapit poza skryptem Wykorzystanie skryptu Javascript w dokumencie HTML


Pobierz ppt "W4 -24.XI Pakiet Office – edytor HTML Technologie informacyjne Mechatronika PWSW."

Podobne prezentacje


Reklamy Google