1 / 66

W4 -24.XI Pakiet Office – edytor HTML

Technologie informacyjne Mechatronika PWSW. W4 -24.XI Pakiet Office – edytor HTML. Superaplikacja biurowa – MS- OFFICE. Microsoft Office to pakiet aplikacji biurowych wyprodukowany przez firmę Microsoft.

edith
Download Presentation

W4 -24.XI Pakiet Office – edytor HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related