KASKADOWE ARKUSZE STYLÓW

Wielkość: px
Rozpocząć pokaz od strony:

Download "KASKADOWE ARKUSZE STYLÓW"

Transkrypt

1 PODSTAWY UŻYTKOWANIA KOMPUTERÓW ZAJĘCIA LAORATORYJNE KASKADOWE ARKUSZE STYLÓW CSS (Cascading Style Sheets) - kaskadowe arkusze stylów są językiem definiowania globalnego wyglądu i układu stron WWW. W 1996 r. zostały zatwierdzone przez World Wide Web Consortium jako standardowe rozszerzenie HTML 3.2 pod nazwą CSS1. Technika kaskadowych arkuszy stylów polega na definiowaniu grup parametrów poleceń HTML stosowanych na stronie dla określonego obiektu w dokumencie, całego dokumentu lub grupy stron (witryny). Niezwykle ułatwia to pracę z dużą ilością dokumentów - po wprowadzeniu zawartości strony i dodaniu odnośnika do arkusza stylu strona jest automatycznie formatowana, co skraca objętość tekstu i szybkość jego ładowania. Kaskadowe arkusze stylów dzielą się na trzy poziomy: a) Zewnętrzne arkusze stylów W przypadku tego typu arkusza stylów wszystkie instrukcje zapisywane są w oddzielnym pliku o rozszerzeniu.css, natomiast w nagłówku dokumentu podaje się jedynie odnośnik do arkusza. Zewnętrzne arkusze stylów najlepiej sprawdzają się w przypadku często uaktualnianych serwisów informacyjnych - wystarczy wprowadzić gotowe informacje, kilka znaczników HTML bez parametrów i zastosować arkusz stylów. Używanie jednego arkusza dla całej witryny pozwala na zachowanie jednolitej szaty graficznej. b) Osadzone arkusze stylów Najczęściej stosowana metoda - polega na umieszczeniu instrukcji stylu w nagłówku dokumentu. Odbywa się to w obrębie znaczników <STYLE> i </STYLE> osadzonych między znacznikami <HEAD> i </HEAD>. c) Wpisane arkusze stylów Otrzymuje się je przez dodanie do znacznika HTML [np. BODY, P] atrybutu style="{atrybuty: parametry}" lub przez oznaczenie obszaru dokumentu przy pomocy znacznika HTML4 <SPAN> i zdefiniowaniu jego atrybutów. Znacznik SPAN przyjmuje właściwości znacznika BODY - można w jego obrębie definiować własny margines, stosowany font i kolory oraz położenie na ekranie względem innych obiektów. Działanie atrybutów kończy się wraz ze znacznikiem zamykającym blok polecenia. Wszystkie te warstwy kaskadowych arkuszy stylów można stosować w jednym dokumencie równocześnie, pojedynczo lub zamiennie. Decydujące znaczenie mają atrybuty arkusza leżącego najniżej w hierarchii dokumentu - w tej kolejności są to: wpisane, osadzone i zewnętrzne arkusze stylów. Stosowanie jednego z arkuszy nie oznacza konieczności stosowania pozostałych. Składnia arkuszy jest następująca: Dla arkuszy zewnętrznych i osadzonych: ZNACZNIK {atrybut: parametr; atrybut: parametr} np. BODY {background: black; font-family: serif}. Ilość atrybutów w wierszu nie ma znaczenia - istotne jest tylko aby cała definicja znacznika nie została przełamana. W tym celu w edytorze należy wyłączyć zawijanie wierszy. Dla arkuszy wpisanych: <ZNACZNIK style="{atrybut: parametr; atrybut: parametr}">... </ZNACZNIK> np. <BODY style="{background: black; font-family: serif}">... </BODY> TWORZENIE WITRYNY INTERNETOWEJ Z WYKORZYSTANIEM KASKADOWYCH ARKUSZY STYLÓW Zadanie: Utwórz witrynę internetową firmy PROSPER zajmującej się sprzedażą sprzętu komputerowego i materiałów eksploatacyjnych. Budując witrynę zdefiniuj jej układ wykorzystując ramki. 1

2 W górnej części budowanej witryny cały czas wyświetlane będzie logo firmy i jej nazwa. Natomiast poniżej w lewej części będzie znajdował się wykaz grup oferowanych towarów utworzony z odnośników, a prawa część będzie zarezerwowana na aktualną ofertę w obrębie poszczególnych grup: Budowana witryna internetowa będzie składała się z 7 dokumentów Html o następujących nazwach: a) index.html w dokumencie tym zdefiniujesz układ ramek (tzw. ramkę nawigacyjną) i przyporządkujesz poszczególnym ramkom odpowiednie dokumenty HTML, b) logo.html dokument ten zawierać będzie logo i nazwę firmy, a wyświetlany będzie w górnej ramce, c) pasek.html dokument ten zawierać będzie wykaz grup oferowanych towarów utworzony z odsyłaczy i wyświetlany będzie w lewej ramce, d) glowny.html dokument ten zawierać będzie informację o firmie, która będzie pojawiać w ramce prawej po otwarciu witryny internetowej, e) komputery.html oferta aktualnie sprzedawanych komputerów, f) drukarki.html oferta aktualnie sprzedawanych drukarek, g) materialy.html oferta aktualnie sprzedawanych materiałów eksploatacyjnych, h) zamowienie.html formularz zamówienia. Budując witrynę wykorzystaj kaskadowe arkusze stylów: wpisane w arkusz, osadzone i zewnętrzne. Uruchom program Zajączek wer I. Utwórz dokument index.html i zdefiniuj w nim następujący układ ramek: gora lewa prawa 1. Z menu opcji Plik znajdującej się na pasku menu programu wybierz opcję Nowy, a z menu tej opcji polecenie Nowy wg domyślnego - na ekranie w oknie Edytor/Podgląd pojawia się plik HTML z domyślnie zdefiniowaną strukturą dokumentu. 2. W strefie nagłówka strony wprowadź pomiędzy znaczniki <TITLE></TITLE> następujący tytuł strony: PROSPER 2

3 3. W strefie nagłówka strony wprowadź następujące modyfikacje znaczników <META>: a) w poleceniu <META NAME="Description" CONTENT="opis dokumentu"> wprowadź w miejsce "opis dokumentu" następujący opis dokumentu: "Witryna prezentuje ofertę handlową firmy PROSPER." b) w poleceniu <META NAME="Author" CONTENT="autor dokumentu"> wprowadź w miejsce "autor dokumentu" swoje nazwisko i imię. c) po poleceniu <META NAME="Generator" CONTENT="Zajączek 4.0.0"> informującym o edytorze HTML wykorzystanym do pisania strony wprowadź polecenie <META NAME="Keywords" CONTENT="komputery, drukarki, materiały eksploatacyjne, PROSPER">. W ten sposób zdefiniujesz słowa kluczowe dokumentu. 4. Zapisz tworzony dokument z nazwą index.html w folderze GrupaX (X oznacza numer grupy) znajdującym się na dysku C:\ w folderze Style_ćwicz. 5. W strefie nagłówka dokumentu zdefiniuj przedstawiony powyżej układ ramek: a) po poleceniu <TITLE>PROSPER</TITLE> wprowadź następujące polecenia definiujące układ ramek: <FRAMESET ROWS=25%,*> <FRAME NAME="gora" SRC='logo.html' FRAMEBORDER="1"> <FRAMESET COLS=20%,80%> <FRAME NAME="lewa" SRC='pasek.html' FRAMEBORDER="1"> <FRAME NAME="prawa" SRC='glowny.html' FRAMEBORDER="1"> </FRAMESET> </FRAMESET> b) uaktualnij zapis pliku c) w strefie zasadniczej (<BODY>...<BODY>) dokumentu, w którym definiujemy ramkę nawigacyjną, zaznacz tekst Tutaj wpisz treść dokumentu i usuń go d) nie można jeszcze uaktywnić podglądu napisanego dokumentu HTML, ponieważ nie zostały zdefiniowane pliki logo.html, pasek.html i glowny.html II. Utwórz dokument logo.html przedstawiający znak logo, nazwę firmy, rysunek komputera i nazwę jej specjalność: 1. W sposób analogiczny do punktu I. utwórz nowy dokument, ale w strefie jego nagłówka usuń wszystkie polecenia META oprócz <META http-equiv="content-type" content="text/html; charset=iso "> i <META NAME="Generator" CONTENT="Zajączek 2.0.0"> oraz wprowadź tytuł strony. 2. Zapisz tworzony dokument z nazwą logo.html w folderze GrupaX (X oznacza numer grupy) znajdującym się na dysku C:\ w folderze Style_ćwicz. 3. W znaczniku <BODY> zdefiniuj kolor tła strony: <BODY BGCOLOR=#699FF6> 4. W obrębie strefy zasadniczej dokumentu zdefiniuj posadowienie grafik, nazwy firmy i nazwy jej specjalności (patrz rycina na str. 2): a) wprowadź kursor tekstowy programu do pierwszej linii strefy zasadniczej dokumentu (BODY) znajdującej się tuż pod linią z zapisem <!--/HEADER--> b) zaznacz tekst Tutaj wpisz treść dokumentu i usuń go, c) wszystkie elementy, które mają być wprowadzone na budowaną stronę powinny zmieścić się w ramce gora, dlatego też należy wykorzystać możliwość zdefiniowania warstw w kaskadowych arkuszach stylów i umieścić w nich poszczególne elementy odpowiednio je rozmieszczając: wprowadź do strefy nagłówka dokumentu zbiór definicji osadzonych arkuszy stylów: <STYLE type=text/css> DIV.logo1 {float:left} DIV.tekst {font-size:40pt; font-weight:900} DIV.logo2 {float:right} </STYLE> 3

4 Polecenie <STYLE type=text/css> określa język definicji arkuszy stylów w tym wypadku jest to standard CSS. W kolejnych trzech liniach definiowane są warstwy (znacznik DIV, kropka, nadana przez nas nazwa warstwy). Polecenie {float:left} definiuje wyrównanie grafiki do lewej krawędzi ekranu, a {float:right} do prawej. Polecenie {font-size:40pt; font-weight:900} definiuje atrybuty czcionki: wielkość 40 punktów i pogrubienie 900. d) do strefy zasadniczej dokumentu (BODY) wprowadź polecenia umieszczenia grafiki przedstawiającej logo firmy zapisanej w pliku logo1.gif wpisując <DIV CLASS=logo1> <IMG SRC="logo1.gif"> </DIV> Polecenie <DIV CLASS=logo1> spowoduje umieszczenie grafiki w warstwie o nazwie logo1, a grafika zostanie wyrównana do lewej krawędzi ekranu, ponieważ zostało to zdefiniowane w strefie nagłówka dokumentu. Polecenie <IMG SRC="logo1.gif"> umieszcza grafikę logo1.gif. Wszystkie pliki graficzne znajdują się w folderze GrupaX i dlatego też w powyższym poleceniu można pominąć specyfikację ścieżki dostępu. e) do strefy zasadniczej dokumentu (BODY) wprowadź polecenia umieszczenia grafiki przedstawiającej komputer zapisanej w pliku logo2.jpg wpisując <DIV CLASS=logo2> <IMG SRC="logo2.jpg"> </DIV> f) do strefy zasadniczej dokumentu (BODY) wprowadź polecenia umieszczenia nazwy firmy wpisując <DIV CLASS=tekst> <Font color=#f0000f> <CENTER>PROSPER </CENTER></FONT> </DIV> g) do strefy zasadniczej dokumentu (BODY) wprowadź polecenia umieszczenia nazwy specjalności firmy wymuszając przesuwanie tekstu po ekranie od jego lewej do prawej strony (definiowanie markizy): <MARQUEE BEHAVIOR=scroll> <B><FONT SIZE=5 COLOR=#C0066C> SPRZĘT KOMPUTEROWY I MATERIAŁY EKSPLOATACYJNE </FONT></B> </MARQUEE> Opcja BEHAVIOR posiada następujące ustawienia: a) scroll - tekst wyświetlany jest litera po literze z jednej strony ekranu i przewijany w stronę przeciwległej krawędzi, po czym cały proces powtarza się, b) slide - ma podobne działanie, lecz tekst znika z chwilą gdy pierwsza litera dochodzi do drugiej krawędzi okna, c) alternate - sprawia, że tekst odbija się między krawędziami. 5. Uaktualnij zapis pliku. 6. Kliknij myszką zakładkę Przeglądanie znajdująca się nad oknem edycja/podgląd w oknie tym pojawia się podgląd utworzonego dokumentu HTML. 7. Kliknij myszką zakładkę Edycja kodu HTML w oknie edycja/podgląd ponownie pojawia się dokument HTML. III. Utwórz dokument pasek.html zawierający wykaz grup oferowanych towarów utworzony z odsyłaczy (patrz ryc. na str. 2): 1. W sposób analogiczny do punktu II.1. utwórz nowy dokument. 2. Zapisz tworzony dokument z nazwą pasek.html w folderze GrupaX (X oznacza numer grupy) znajdującym się na dysku C:\ w folderze Style_ćwicz. 3. W znaczniku <BODY> zdefiniuj żółty kolor tła strony. 4. W obrębie strefy zasadniczej dokumentu zdefiniuj posadowienie wyrażenia Wybierz grupę towarów: : 4

5 a) wprowadź kursor tekstowy programu do pierwszej linii strefy zasadniczej dokumentu (BODY) znajdującej się tuż pod linią z zapisem <!--/HEADER--> b) zaznacz tekst Tutaj wpisz treść dokumentu i usuń go c) wprowadź polecenie <FONT SIZE="5" COLOR=#000990> i uderz klawisz ENTER d) wyrażenie Wybierz gatunek: ma zostać dosunięte do lewej krawędzi okna i dlatego też kliknij myszką zakładkę paska narzędzi TEKST, a następnie widoczny na pasku przycisk Wyrównaj do lewego marginesu w oknie edycja/podgląd program wstawił znacznik otwierający i znacznik zamykający Akapit z opcją Wyrównaj do lewego marginesu: <P ALIGN="LEFT"></P> - uderz klawisz ENTER e) ustaw kursor tekstowy programu w obrębie polecenia <P ALIGN="LEFT"></P> pomiędzy znacznikiem otwierającym i zamykającym P (znacznik P określa obszar akapitu, a opcja ALIGN="LEFT" wyrównanie tekstu do lewego marginesu) f) wprowadź znacznik wytłuszczenia czcionki klikając myszką zakładkę paska narzędzi TEKST, a następnie widoczny na pasku przycisk B w oknie edycja/podgląd program wstawił znacznik otwierający i znacznik zamykający Wytłuszczenie czcionki: <B></B> g) przenieś kursor tekstowy pomiędzy znaczniki <B></B> i wpisz wyrażenie: Wybierz grupę towarów:, a następnie przenieś kursor tekstowy do następnej linii edytora h) wprowadź znacznik zamykający </FONT> i uderz klawisz ENTER 5. Zdefiniuj posadowienie odsyłaczy dla nazw kolejnych grup oferowanych przez firmę towarów: a) zdefiniuj styl czcionki opisów odsyłaczy wykorzystując możliwość zdefiniowania go w oparciu o kaskadowe arkusze stylów: wprowadź do strefy nagłówka dokumentu zbiór definicji osadzonych arkuszy stylów: <STYLE type=text/css> H1 {background-color:silver; font-size:12pt; font-weight:900; border-style:outset} </STYLE> Polecenie <STYLE type=text/css> określa język definicji arkuszy stylów w tym wypadku jest to standard CSS. W następnej linii zapis H1 {background-color:silver; font-size:12pt; fontweight:900; border-style:outset} definiuje dla nagłówka H1 tło (srebrne), atrybuty czcionki (wielkość 12 punktów i pogrubienie 900) i obramowanie (trójwymiarowe typu outset). b) wprowadź do strefy zasadniczej dokumentu (BODY) odsyłacz dla pierwszej grupy oferowanych przez firmę towarów wpisując polecenie: <A HREF="komputery.html" TARGET="prawa"><H1>KOMPUTERY PC</H1></A> c) wprowadź do strefy zasadniczej dokumentu (BODY) odsyłacz dla drugiej grupy oferowanych przez firmę towarów wpisując polecenie: <A HREF="drukarki.html" TARGET="prawa"><H1>DRUKARKI</H1></A> d) wprowadź do strefy zasadniczej dokumentu (BODY) odsyłacz dla trzeciej grupy oferowanych przez firmę towarów wpisując polecenie: <A HREF="materialy.html" TARGET="prawa"> <H1>MATERIAŁY EKSPLOATACYJNE</H1></A> e) wprowadź do strefy zasadniczej dokumentu (BODY) odsyłacz do formularza zamówienia wpisując polecenie: <A HREF="zmowienie.html" TARGET="prawa"> <H1>WYŚLIJ ZAMÓWIENIE</H1></A> f) kliknięcie myszką zdefiniowanych odsyłaczy spowoduje wyświetlenie odpowiednich dokumentów w ramce o nazwie prawa (układ i nazwy ramek zostały zdefiniowane w pliku index.html) 6. Uaktualnij zapis pliku. 7. Kliknij myszką zakładkę Przeglądanie znajdująca się nad oknem edycja/podgląd w oknie tym pojawia się podgląd utworzonego dokumentu HTML. 5

6 8. Kliknij myszką zakładkę Edycja kodu HTML w oknie edycja/podgląd ponownie pojawia się dokument HTML. IV. Utwórz dokument glowna.html zawierający informację, która będzie pojawiać w ramce prawej po otwarciu witryny internetowej (patrz ryc. na str. 2): 1. W sposób analogiczny do punktu II.1. utwórz nowy dokument. 2. Zapisz tworzony dokument z nazwą glowny.html w folderze GrupaX (X oznacza numer grupy) znajdującym się na dysku C:\ w folderze Style_ćwicz. 3. Zdefiniuj formatowanie nagłówków, akapitu i listy wypunktowanej wykorzystując możliwość zdefiniowania go w oparciu o kaskadowe arkusze stylów: wprowadź do strefy nagłówka dokumentu zbiór definicji osadzonych arkuszy stylów: <STYLE type=text/css> BODY {background-image:url(tlo1.jpg); background-repeat:no-repeat; background-position:center; background-attachment:fixed; background-color:silver} H1 {color:red; font-size:28pt; font-weight:900} H2 {line-height:100%;font-size:16pt; font-weight:700;} P {text-align:justify; text-indent:2cm; line-height:150%; font-size:16pt; font-weight:700;} LI {line-height:150%;font-size:16pt; font-weight:700;} </STYLE> Polecenie <STYLE type=text/css> określa język definicji arkuszy stylów w tym wypadku jest to standard CSS. W następnej linii zapis BODY {...} definiuje dla strefy zasadniczej dokumentu BODY kolejno: a) background-image:url(tlo1.jpg) - tło będzie stanowił rysunek zapisany w pliku tlo1.jpg, b) background-repeat:no-repeat obraz w tle będzie pojedynczy (nie zostanie powielony na całym ekranie), c) background-position:center obraz w tle zostanie wyświetlony w środkowej części okna, d) background-attachment:fixed obraz w tle przy przewijaniu ekranu będzie nieruchomy, e) background-color:silver tło poza obszarem grafiki będzie srebrne. Zapis H1 {...} definiuje nagłówek H1 (kolejno: kolor czcionki czerwony, wielkość czcionki 28 pkt., pogrubienie maksymalne 900). Zapis H2 {...} definiuje nagłówek H2 (kolejno: odległość między liniami bazowymi 100%, wielkość czcionki 16 pkt., pogrubienie 700). Zapis P {...} definiuje akapit (P) (kolejno: tekst będzie wyjustowany, wcięcie akapitu 2 cm, odległość między wierszami 150%, wielkość czcionki 16 pkt., pogrubienie 700). Zapis LI {...} definiuje pozycje list (LI) (kolejno: odległość między wierszami 150%, wielkość czcionki 16 pkt., pogrubienie 700). 4. Wprowadź do strefy zasadniczej dokumentu (BODY) tytuł strony (środkowanie) nadając mu format zdefiniowany w obrębie arkusza stylów dla nagłówka H1: <CENTER><H1>FIRMA PROSPER</H1></CENTER> 5. Następnie wprowadź tekst nadając mu format zdefiniowany w obrębie arkusza stylów dla akapitu: <P>Firma działa na polskim rynku sprzedaży sprzętu komputerowego od 1987 roku. Specjalizuje się w sprzedaży komputerów PC i drukarek dla odbiorców indywidualnych. W ofercie posiada też bogatą gamę materiałów eksploatacyjnych.</p> 6. Wprowadź tytuł listy wypunktowanej nadając mu format zdefiniowany w obrębie arkusza stylów dla nagłówka H2: <H2>Atutami firmy PROSPER niewątpliwie są:</h2> 7. Wprowadź listę wypunktowaną nadając jej pozycjom format zdefiniowany w obrębie arkusza stylów: <UL TYPE=disc> <LI>niskie ceny sprzętu, <LI>niezawodność sprzętu, <LI>błyskawiczny serwis. </UL> 8. Wprowadź adres firmy nadając mu format zdefiniowany w obrębie arkusza stylów dla nagłówka H2: 6

7 <BR><BR> <H2>Adres firmy: <BR>PROSPER Sp.z o.o. <BR> Toruń, ul. Kraszewskiego 58 <BR>tel. (56) , fax: (56) </H2> 9. Wprowadź do dolnej części okna pasek dający osobom zainteresowanym możliwość przesłania zapytania do firmy: a) format czcionki tekstu wprowadzanego na pasek i wszystkie elementy związane z wyglądem paska zdefiniuj w zewnętrznym arkuszu stylów (pasek będzie wprowadzany na większą liczbę budowanych stron serwisu): z menu opcji Plik znajdującej się na pasku menu programu Zajączek wybierz opcję Nowy, a z menu tej opcji polecenie Nowy pusty dokument - na ekranie w oknie Edytor/Podgląd pojawia się plik pod zapisem <!--ISO--> (standard czcionki ISO Latin2) wprowadź komentarz objaśniający przeznaczenie definiowanego stylu: /*Pasek: kontakt z firmą*/ następnie wprowadź definicję nagłówka H3 (odległość między wierszami 100%): H3 {line-height:100%} w następnej linii zdefiniuj format czcionki tekstu wprowadzanego na pasek i jego wygląd: ADDRESS {font-size:14pt; font-weight:700; background-color:red; border-style:outset;} W linii tej został zdefiniowany format treści wprowadzanych w obręb znaczników <ADDRESS> </ADDRESS>. Wyjaśnienie: background-color:red kolor paska czerwony; border-style:outset obramowanie trójwymiarowe typu outset. zapisz plik z nazwą adres.css w folderze GrupaX (X oznacza numer grupy) znajdującym się na dysku C:\ w folderze Style_ćwicz (w oknie Zapisz dokument: w polu Zapisz jako typ: wybierz opcję Wszystkie pliki (*.*), a w polu nazwa pliku wpisz nazwę wraz z rozszerzeniem: aders.css) b) powróć do pliku glowny.html klikając myszką przycisk z jego nazwą znajdujący się pod oknem Edytor/Podgląd c) do strefy nagłówka dokumentu wprowadź zapis dołączający zewnętrzny arkusz stylów adres.css: <LINK REL=STYLESHEET TYPE=text/css HREF=adres.css> d) do kolejnej linii strefy zasadniczej dokumentu (BODY) wprowadź dwie puste linie: <BR><BR> e) następnie wprowadź pasek wraz z umieszczoną na nim informacją i odsyłaczem mailto: <ADDRESS>Masz pytania - odpowiemy natychmiast! <A Kliknij myszką, aby wysłać zapytanie</a></address> 10. W znaczniku <BODY> zdefiniuj tło wprowadzając obraz graficzny z pliku tlo3.gif (C:\Style_ćwicz\GrupaX\): <BODY BACKGROUND=tlo3.gif> 11. Uaktualnij zapis pliku. 12. Kliknij myszką zakładkę Przeglądanie znajdująca się nad oknem edycja/podgląd w oknie tym pojawia się podgląd utworzonego dokumentu HTML. 13. Kliknij myszką zakładkę Edycja kodu HTML w oknie edycja/podgląd ponownie pojawia się dokument HTML. V. Sprawdź poprawność funkcjonowania zbudowanej przez Ciebie witryny: 1. Kliknij myszką przycisk z nazwą pliku index.html znajdujący się pod oknem Edytor/Podgląd (obok znajdują się przyciski z nazwami pozostałych plików HTML), a gdy dokument HTML zapisany w tym pliku pojawi się w oknie Edytor/Podgląd kliknij myszką przycisk Przeglądanie znajdujący się nad tym oknem. Aby przejrzeć zbudowaną witrynę w oknie odpowiadającym rozmiarom okna przeglądarek internetowych, 7

8 kliknij myszką opcję Widok znajdującą się na pasku menu programu, a następnie wybierz polecenie Pełny ekran. 2. Po przejrzeniu stron witryny powróć do poprzedniego układu okien programu ponownie klikając myszką polecenie Pełny ekran. VI. Utwórz stronę przedstawiającą ofertę aktualnie sprzedawanych komputerów: 1. Utwórz stronę przedstawiającą ofertę aktualnie sprzedawanych komputerów i zapisz ją w pliku komputery.html (C:\Style_ćwicz\GrupaX\): a) w sposób analogiczny do punktu II.1. utwórz nowy dokument, b) zapisz tworzony dokument z nazwą komputery.html w folderze GrupaX (X oznacza numer grupy) znajdującym się na dysku C:\ w folderze Style_ćwicz f) do strefy nagłówka dokumentu wprowadź zapis dołączający zewnętrzny arkusz stylów adres.css (definiowanie stylu paska dającego osobom zainteresowanym możliwość przesłania zapytania do firmy): <LINK REL=STYLESHEET TYPE=text/css HREF=adres.css> c) wprowadź do strefy nagłówka dokumentu definicję osadzonego arkusza stylów określającego styl czcionki tekstu wpisywanego do komórek tabeli: <STYLE type=text/css> TD {font-size:12pt; font-weight:700} </STYLE> d) w obrębie strefy zasadniczej dokumentu zaznacz tekst Tutaj wpisz treść dokumentu i usuń go 2. W obrębie strefy zasadniczej dokumentu wprowadź ofertę komputerów PC przedstawiając ją w tabeli: a) w znaczniku <BODY> zdefiniuj niebieski kolor tła strony: <BODY BGCOLOR=blue> b) wprowadź tytuł budowanej strony: <FONT COLOR=yellow> <H1><B>OFERTA KOMPUTERÓW PC</B></H1> </FONT> c) zdefiniuj obramowanie tabeli: <TABLE BORDER=3> d) zdefiniuj nagłówek tabeli w następujący sposób: <THEAD BGCOLOR=orange> <TD><P ALIGN="CENTER"><B>Model komputera PC</B></P></TD> <TD><P ALIGN="CENTER"><B>Cena [PLN brutto]</b></p></td> </TR> e) zdefiniuj stopkę tabeli w następujący sposób: <TFOOT BGCOLOR=yellow ALIGN="CENTER"> <TD COLSPAN=2><P ALIGN="CENTER"><B>Zapraszamy do skorzystania z naszej oferty</b></p></td> </TR> f) wprowadź część zasadniczą tabeli wraz z treścią: <TBODY BGCOLOR=silver> <TD>OPT PR LP 600 C1.2G/256/40/CD/XPP/FM/ LCD XGA TFT 15"</TD> <TD>5899,00</TD> </TR> <TD>OPT PR LX 200 C1G/128/40/CD/XP/FM/LCD XGA TFT 15"</TD> <TD>4499,00</TD> 8

9 </TR> <TD>OPT PR LX 400 IV1.6G/D128/40/CD/XP/FM/LCD XGA TFT 15"</TD> <TD>6249,00</TD> <TD>OPT YO DX 200 1G/128/20/R32/CD/FM/XP/15"</TD> <TD>1899,00</TD> </TR> <TD>OPT YO DX 200 1G/128/40/ATI64TV/DVD/T/XP/15"</TD> <TD>2089,00</TD> </TR> <TD>OPT YO DX 400 A1.7/256D/40/GF64/CD-RW/XP/15"</TD> <TD>2719,00</TD> </TR> </TABLE> 3. Do kolejnej linii strefy zasadniczej dokumentu (BODY) wprowadź dwie puste linie, a następnie pasek wraz z umieszczoną na nim informacją i odsyłaczem mailto: <BR><BR><ADDRESS>Masz pytania - odpowiemy natychmiast! <A Kliknij myszką, aby wysłać zapytanie</a></address> 4. Uaktualnij zapis pliku, sprawdź na podglądzie wyświetlanie utworzonej strony, a następnie wróć do jej edycji. VII. Utwórz stronę drukarki.html przedstawiającą ofertę aktualnie sprzedawanych przez firmę drukarek: DRUKARKA HP DJ 1220C 11&9,5PPM/FR3/A3 1311,00 DRUKARKA HP DJ &14PPM/FR3/A ,00 DRUKARKA HP DJ 350CBI 5&2PPM/A4/BAT/IFR 1016,00 DRUKARKA HP DJ 656C 6&3PPM/FR/A4/USB 198,00 DRUKARKA HP LJ 2200D 18PPM/8MB/1200DPI 3162,00 DRUKARKA HP LJ PPM/16MB/1200DPI 4647,00 DRUKARKA HP LJ 4100N 24PPM/16MB/DJ610N 5988,00 DRUKARKA HP LJ 4550 COLOR 7276,00 VIII. Utwórz stronę materialy.html przedstawiającą ofertę aktualnie sprzedawanych przez firmę materiałów eksploatacyjnych: TONER DO DRUKARKI HP LJ 1100 C4092A 219,00 TONER DO DRUKARKI HP LJ 1200/1220 C7115A 219,00 TONER DO DRUKARKI HP LJ 5L, 6L 219,00 TONER DO DRUKARKI HP LJ 5P/ 6/P/MPC3903A 296,00 ZASOBNIK ATRAM. HP2000 CZARNY 69ML 117,00 ZASOBNIK ATRAM. HP2000 ŻÓŁTY 127,00 ZASOBNIK ATRAM. HP840 COLOR (6625A) 104,00 ZASOBNIK ATRAM. HP840 CZARNY (6615) 103,00 ZASOBNIK ATRAM. HP850/1100 COLOR 128,00 PAPIER 240X STANDARD 42,30 PAPIER 240X KOLOR NADR. 42,00 IX. Utwórz stronę materialy.html przedstawiającą ofertę aktualnie sprzedawanych przez firmę materiałów eksploatacyjnych: 1. W sposób analogiczny do punktu II.1. utwórz nowy dokument. 9

10 2. Zapisz tworzony dokument z nazwą zamowienie.html w folderze GrupaX (X oznacza numer grupy) znajdującym się na dysku C:\ w folderze Style_ćwicz. 3. Wprowadź do strefy nagłówka dokumentu definicję osadzonego arkusza stylów określającego styl czcionki tekstu kolejnych pozycji formularza: <STYLE type=text/css> BODY {background-color:silver} P {line-height:5%; font-size:10pt; font-weight:600} LEGEND {color:blue; font-size:12pt; font-weight:600} INPUT {line-height:100%; color:reed; font-size:8pt} LABEL {font-size:10pt; font-weight:600} </STYLE> 4. W obrębie strefy zasadniczej dokumentu zaznacz tekst Tutaj wpisz treść dokumentu i usuń go. 5. W obrębie strefy zasadniczej dokumentu wprowadź formularz zamówienia: a) wprowadź tytuł formularza zamówienia: <FONT COLOR=green> <H3><B>FORMULARZ ZAMOWIENIA</B></H3> </FONT> b) wprowadź znacznik otwierający formularz wybierając metodę POST, która nakazuje przeglądarce internetowej przesłać dane formularza pod adresem wskazanym parametrem ACTION: <FORM METHOD=post c) wprowadź znacznik otwierający grupowanie elementów formularza: <FIELDSET> d) wprowadź opis tworzonego zgrupowania pól (ALIGNK="top" umieszcza opis na górze obramowania grupy): <LEGEND ALIGNK="top">Dane zamawiającego</legend> e) wprowadź pola formularza do grupy Dane zamawiającego : <P>Wpisz nazwisko i imię:</p> <INPUT TYPE=text NAME=klient SIZE=40> <P>Miasto:</P> <INPUT TYPE=text NAME=miasto SIZE=25> <P>Ulica:</P> <INPUT TYPE=text NAME=ulica SIZE=25> <P>Nr domu:</p> <INPUT TYPE=text NAME=dom SIZE=3> <P>Nr telefonu:</p> <INPUT TYPE=text NAME=tel SIZE=12> <P>Adres </p> <INPUT TYPE=text NAME= SIZE=25> Zapis NAME=... określa nazwę, z którą zostanie przesłana informacja wpisana do danego pola formularza, a końcowa cyfra długość danego pola. f) wprowadź znacznik zamykający grupowanie elementów formularza: </FIELDSET> g) wprowadź pustą linię: <BR><BR> h) wprowadź znacznik otwierający grupowanie elementów formularza: <FIELDSET> i) wprowadź opis tworzonego zgrupowania pól: <LEGEND ALIGNK="top">Komputery PC i drukarki</legend> j) wprowadź listę rozwijalną z oferowanymi modelami komputerów PC: <SELECT> <OPTION DISABLET>Wybierz model komputera z listy... <OPTION VALUE=k1>OPT PR LP 600 C1.2G/256/40/CD/XPP/FM/ LCD XGA TFT 15" 10

11 <OPTION VALUE=k2>OPT PR LX 200 C1G/128/40/CD/XP/FM/LCD XGA TFT 15" <OPTION VALUE=k3>OPT PR LX 400 IV1.6G/D128/40/CD/XP/FM/LCD XGA TFT 15" <OPTION VALUE=k4>OPT YO DX 200 1G/128/20/R32/CD/FM/XP/15" <OPTION VALUE=k5>OPT YO DX 200 1G/128/40/ATI64TV/DVD/T/XP/15" <OPTION VALUE=k6>OPT YO DX 400 A1.7/256D/40/GF64/CD-RW/XP/15" </SELECT> Zapis <OPTION DISABLET>... wprowadza tekst, który jest wyświetlany w obrębie pola listy rozwijalnej po załadowaniu strony z formularzem. Zapis VALUE=... określa wartość, która zostanie zwrócona po dokonaniu wyboru określonej opcji. k) w analogiczny sposób (podpunkt j) wprowadź listę rozwijalną z oferowanymi modelami drukarek (str. 9). l) wprowadź znacznik zamykający grupowanie elementów formularza: </FIELDSET> m) wprowadź oferowane materiały eksploatacyjne: <BR><BR> <FIELDSET> <LEGEND ALIGNK="top">Wybierz materiały eksploatacyjne wpisując zamawianą liczbę egzemplarzy:</legend> <LABEL>TONER DO DRUKARKI HP LJ 1100 C4092A<INPUT NAME=m1 SIZE=5></LABEL> <BR><LABEL>TONER DO DRUKARKI HP LJ 1200/1220 C7115A<INPUT NAME=m2 SIZE=5></LABEL> <BR><LABEL>TONER DO DRUKARKI HP LJ 5L, 6L<INPUT NAME=m3 SIZE=5></LABEL> <BR><LABEL>TONER DO DRUKARKI HP LJ 5P/ 6/P/MPC3903A<INPUT NAME=m4 SIZE=5></LABEL> <BR><LABEL>ZASOBNIK ATRAM. HP2000 CZARNY 69ML<INPUT NAME=m5 SIZE=5></LABEL> <BR><LABEL>ZASOBNIK ATRAM. HP2000 ŻÓŁTY<INPUT NAME=m6 SIZE=5></LABEL> <BR><LABEL>ZASOBNIK ATRAM. HP840 COLOR (6625A)<INPUT NAME=m7 SIZE=5></LABEL> <BR><LABEL>ZASOBNIK ATRAM. HP840 CZARNY (6615)<INPUT NAME=m8 SIZE=5></LABEL> <BR><LABEL>ZASOBNIK ATRAM. HP850/1100 COLOR<INPUT NAME=m9 SIZE=5></LABEL> <BR><LABEL>PAPIER 240X STANDARD<INPUT NAME=m10 SIZE=5></LABEL> <BR><LABEL>PAPIER 240X KOLOR NADR.<INPUT NAME=m11 SIZE=5></LABEL> </FIELDSET> Wprowadzenie znaczników <LABEL></LABEL> powoduje umieszczenie opisu pola i samego pola w jednej linii. n) wprowadź przyciski Wyślij formularz i Wyczyść formularz: <BR><BR> <BUTTON TYPE=submit>WYŚLIJ FORMULARZ </BUTTON> <BUTTON TYPE=reset>WYCZYŚĆ FORMULARZ</BUTTON> o) wprowadź znacznik zamykający formularz: </FORM> 6. Uaktualnij zapis pliku. 7. Kliknij myszką zakładkę Przeglądanie znajdująca się nad oknem edycja/podgląd w oknie tym pojawia się podgląd utworzonego dokumentu HTML. 11

12 8. Kliknij myszką zakładkę Edycja kodu HTML w oknie edycja/podgląd ponownie pojawia się dokument HTML. X. Sprawdź poprawność funkcjonowania zbudowanej przez Ciebie witryny: 3. Kliknij myszką przycisk z nazwą pliku index.html znajdujący się pod oknem Edytor/Podgląd (obok znajdują się przyciski z nazwami pozostałych plików HTML), a gdy dokument HTML zapisany w tym pliku pojawi się w oknie Edytor/Podgląd kliknij myszką przycisk Przeglądanie znajdujący się nad tym oknem. Aby przejrzeć zbudowaną witrynę w oknie odpowiadającym rozmiarom okna przeglądarek internetowych, kliknij myszką opcję Widok znajdującą się na pasku menu programu, a następnie wybierz polecenie Pełny ekran. 4. Po przejrzeniu stron witryny powróć do poprzedniego układu okien programu ponownie klikając myszką polecenie Pełny ekran. 5. Zamknij wszystkie dokumenty HTML. 6. Opuść program Zajączek. 12

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

Zadanie 9. Projektowanie stron dokumentu

Zadanie 9. Projektowanie stron dokumentu Zadanie 9. Projektowanie stron dokumentu Przygotowany dokument można: wydrukować i oprawić, zapisać jako strona sieci Web i opublikować w Internecie przekonwertować na format PDF i udostępnić w postaci

Bardziej szczegółowo

Zadanie 1. Stosowanie stylów

Zadanie 1. Stosowanie stylów Zadanie 1. Stosowanie stylów Styl to zestaw elementów formatowania określających wygląd: tekstu atrybuty czcionki (tzw. styl znaku), akapitów np. wyrównanie tekstu, odstępy między wierszami, wcięcia, a

Bardziej szczegółowo

Edytor tekstu OpenOffice Writer Podstawy

Edytor tekstu OpenOffice Writer Podstawy Edytor tekstu OpenOffice Writer Podstawy OpenOffice to darmowy zaawansowany pakiet biurowy, w skład którego wchodzą następujące programy: edytor tekstu Writer, arkusz kalkulacyjny Calc, program do tworzenia

Bardziej szczegółowo

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

Moduł IV Internet Tworzenie stron www

Moduł IV Internet Tworzenie stron www Ze strony internetowej www.kaze.zut.edu.pl z folderu BUDOWA JACHTÓW pobierz i zapisz je do własnego folderu następujące pliki: znak_drogowy.png, morze.jpg, logo_ecdl.gif, logobj.png ZADANIE 1 Podstawy

Bardziej szczegółowo

I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu...

I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu... Kreator szablonów I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu... 7 a. Grafika... 7 b. Tekst... 7 c.

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2} Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu.

Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu. Klub Seniora - Podstawy obsługi komputera oraz korzystania z Internetu Str. 1 Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu. Część 3 Opis programu MS Office

Bardziej szczegółowo

URL: http://www.ecdl.pl

URL: http://www.ecdl.pl Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo

Bardziej szczegółowo

1. Przypisy, indeks i spisy.

1. Przypisy, indeks i spisy. 1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt.

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt. Grafika w dokumencie Wprowadzanie ozdobnych napisów WordArt Do tworzenia efektownych, ozdobnych napisów służy obiekt WordArt. Aby wstawić do dokumentu obiekt WordArt: 1. Umieść kursor w miejscu, w którym

Bardziej szczegółowo

DODAJEMY TREŚĆ DO STRONY

DODAJEMY TREŚĆ DO STRONY DODAJEMY TREŚĆ DO STRONY SPIS TREŚCI Pasek narzędzi i wyszukiwarka aplikacji... 2 Dodawanie portletów... 3 Widok zawartości stron... 4 Zawartość portletu... 5 Ikonki wybierz oraz dodaj zawartość stron...

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Ćwiczenia nr 2. Edycja tekstu (Microsoft Word)

Ćwiczenia nr 2. Edycja tekstu (Microsoft Word) Dostosowywanie paska zadań Ćwiczenia nr 2 Edycja tekstu (Microsoft Word) Domyślnie program Word proponuje paski narzędzi Standardowy oraz Formatowanie z zestawem opcji widocznym poniżej: Można jednak zmodyfikować

Bardziej szczegółowo

Przewodnik... Tworzenie Landing Page

Przewodnik... Tworzenie Landing Page Przewodnik... Tworzenie Landing Page Spis treści Kreator strony landing page Stwórz stronę Zarządzaj stronami 2 Kreator strony landing page Kreator pozwala stworzyć własną stronę internetową z unikalnym

Bardziej szczegółowo

Ćwiczenie 4 Konspekt numerowany

Ćwiczenie 4 Konspekt numerowany Ćwiczenie 4 Konspekt numerowany Celem ćwiczenia jest zastosowane automatycznej, wielopoziomowej numeracji nagłówków w wielostronicowym dokumencie. Warunkiem poprawnego wykonania tego ćwiczenia jest właściwe

Bardziej szczegółowo

WORDPRESS INSTRUKCJA OBSŁUGI

WORDPRESS INSTRUKCJA OBSŁUGI WORDPRESS INSTRUKCJA OBSŁUGI Zapraszamy do zapoznania się z Instrukcją obsługi panelu CMS Wordpress, która w krótkim czasie i bez większego kłopotu pozwoli na edycję treści i zawartości strony, w tym:

Bardziej szczegółowo

Podręcznik użytkownika programu. Ceremonia 3.1

Podręcznik użytkownika programu. Ceremonia 3.1 Podręcznik użytkownika programu Ceremonia 3.1 1 Spis treści O programie...3 Główne okno programu...4 Edytor pieśni...7 Okno ustawień programu...8 Edycja kategorii pieśni...9 Edytor schematów slajdów...10

Bardziej szczegółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

Edukacja na odległość

Edukacja na odległość Ćwiczenie 2. Edukacja na odległość Obsługa konta WWW na serwerze Linuksowym Tworzenie portalu edukacyjnego o określonej, wybranej przez studenta tematyce naukowej. Cel ćwiczenia: Projektowanie strony czołowej

Bardziej szczegółowo

1.5. Formatowanie dokumentu

1.5. Formatowanie dokumentu Komputerowa edycja tekstu 29 1.5. Formatowanie dokumentu Pisanie, kopiowanie czy przenoszenie tekstu to jedynie część naszej pracy z dokumentem. O tym, jak będzie się on prezentował, decydujemy, wykonując

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

Bardziej szczegółowo

Rozwiązanie ćwiczenia 8a

Rozwiązanie ćwiczenia 8a Rozwiązanie ćwiczenia 8a Aby utworzyć spis ilustracji: 1. Ustaw kursor za tekstem na ostatniej stronie dokumentu Polska_broszura.doc i kliknij przycisk Podział strony na karcie Wstawianie w grupie Strony

Bardziej szczegółowo

Tworzenie prezentacji w MS PowerPoint

Tworzenie prezentacji w MS PowerPoint Tworzenie prezentacji w MS PowerPoint Program PowerPoint dostarczany jest w pakiecie Office i daje nam możliwość stworzenia prezentacji oraz uatrakcyjnienia materiału, który chcemy przedstawić. Prezentacje

Bardziej szczegółowo

Spis treści. Rozdział 2. Graficzna oprawa witryny...z... 19 Stosowanie motywu...s...s.. 19

Spis treści. Rozdział 2. Graficzna oprawa witryny...z... 19 Stosowanie motywu...s...s.. 19 Spis treści Wstęp...z... 5 Rozdział 1. Nowa witryna sieci Web...z... 7 Tworzenie szkieletu witryny...s... 7 Ustawienia witryny...s...s... 8 Hierarchia witryny...s...s... 10 Nazwy i tytuły stron...s...s..

Bardziej szczegółowo

Aplikacje internetowe

Aplikacje internetowe Temat: Język HTML i style CSS Aplikacje internetowe Pracownia specjalistyczna, studia podyplomowe, rok 2011/2012 1. Stwórz formularz HTML pozwalający na rejestrację użytkownika w aplikacji internetowej.

Bardziej szczegółowo

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3 DODAJEMY TREŚĆ DO STRONY 1. Dockbar, CMS + wyszukiwarka aplikacji... 2 2. Dodawanie portletów... 3 Widok zawartości stron... 3 Omówienie zawartości portletu (usunięcie ramki itd.)... 4 3. Ikonki wybierz

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

Dlaczego stosujemy edytory tekstu?

Dlaczego stosujemy edytory tekstu? Edytor tekstu Edytor tekstu program komputerowy służący do tworzenia, edycji i formatowania dokumentów tekstowych za pomocą komputera. Dlaczego stosujemy edytory tekstu? możemy poprawiać tekst możemy uzupełniać

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

Temat: Organizacja skoroszytów i arkuszy

Temat: Organizacja skoroszytów i arkuszy Temat: Organizacja skoroszytów i arkuszy Podstawowe informacje o skoroszycie Excel jest najczęściej wykorzystywany do tworzenia skoroszytów. Skoroszyt jest zbiorem informacji, które są przechowywane w

Bardziej szczegółowo

Personalizowanie wirtualnych pokojów

Personalizowanie wirtualnych pokojów Personalizowanie wirtualnych pokojów www.clickmeeting.pl Dowiedz się, jak spersonalizować swój wirtualny pokój, stosując kolorystykę Twojej marki oraz dodając logo organizacji. Pokażemy Ci krok po kroku,

Bardziej szczegółowo

Zadanie 3. Praca z tabelami

Zadanie 3. Praca z tabelami Zadanie 3. Praca z tabelami Niektóre informacje wygodnie jest przedstawiać w tabeli. Pokażemy, w jaki sposób można w dokumentach tworzyć i formatować tabele. Wszystkie funkcje związane z tabelami dostępne

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 7

Tworzenie stron internetowych w kodzie HTML Cz 7 Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

Bardziej szczegółowo

INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ

INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ Spis treści: 1 Logowanie do panelu administracyjnego 2 Dodawanie obiektów na stronie 2.1 Wybór podstrony 2.2 Wybór obiektu 2.2.1 Dodawanie obiektów tekstowych

Bardziej szczegółowo

1.Formatowanie tekstu z użyciem stylów

1.Formatowanie tekstu z użyciem stylów 1.Formatowanie tekstu z użyciem stylów Co to jest styl? Styl jest ciągiem znaków formatujących, które mogą być stosowane do tekstu w dokumencie w celu szybkiej zmiany jego wyglądu. Stosując styl, stosuje

Bardziej szczegółowo

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY 2013 Klawiatura narzędzie do wpisywania tekstu. 1. Wielkie litery piszemy z wciśniętym klawiszem SHIFT albo z włączonym klawiszem CAPSLOCK. 2. Litery typowe dla języka

Bardziej szczegółowo

Dodawanie grafiki i obiektów

Dodawanie grafiki i obiektów Dodawanie grafiki i obiektów Word nie jest edytorem obiektów graficznych, ale oferuje kilka opcji, dzięki którym można dokonywać niewielkich zmian w rysunku. W Wordzie możesz zmieniać rozmiar obiektu graficznego,

Bardziej szczegółowo

Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt

Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt Zadanie: Utwórz szablon rysunkowy składający się z: - warstw - tabelki rysunkowej w postaci bloku (według wzoru poniżej)

Bardziej szczegółowo

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce

Bardziej szczegółowo

Techniki wstawiania tabel

Techniki wstawiania tabel Tabele w Wordzie Tabela w Wordzie to uporządkowany układ komórek w postaci wierszy i kolumn, w które może być wpisywany tekst lub grafika. Każda komórka może być formatowana oddzielnie. Możemy wyrównywać

Bardziej szczegółowo

Zajęcia e-kompetencje

Zajęcia e-kompetencje Zajęcia e-kompetencje Podstawy obsługi pakietu biurowego. Word i Writer cz.2 Projekt pt:. E-dzi@dek, e-b@bcia i nauczyciel wnuczek 1 Plan dzisiejszych zajęć: 1. Podstawy obsługi pakietu biurowego. Word

Bardziej szczegółowo

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony: Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod

Bardziej szczegółowo

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS

Bardziej szczegółowo

p { color: yellow; font-weight:bold; }

p { color: yellow; font-weight:bold; } Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 13: CSS Wstęp Cascading Style Sheets (Kaskadowe Arkusze Styli, w skrócie CSS) jest językiem, który opisuje sposób w jaki będzie wyświetlana

Bardziej szczegółowo

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30 MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

Formularze w programie Word

Formularze w programie Word Formularze w programie Word Formularz to dokument o określonej strukturze, zawierający puste pola do wypełnienia, czyli pola formularza, w których wprowadza się informacje. Uzyskane informacje można następnie

Bardziej szczegółowo

Przypisy i przypisy końcowe

Przypisy i przypisy końcowe - 1 - Przypisy i przypisy końcowe Przypisami nazywamy pewne teksty służące do podawania wyjaśnień, komentarzy, odsyłaczy do tekstu, do bibliografii itp. Edytor WORD rozróżnia dwa rodzaje przypisów: przypisy

Bardziej szczegółowo

Podstawy tworzenia prezentacji w programie Microsoft PowerPoint 2007

Podstawy tworzenia prezentacji w programie Microsoft PowerPoint 2007 Podstawy tworzenia prezentacji w programie Microsoft PowerPoint 2007 opracowanie: mgr Monika Pskit 1. Rozpoczęcie pracy z programem Microsoft PowerPoint 2007. 2. Umieszczanie tekstów i obrazów na slajdach.

Bardziej szczegółowo

Przenoszenie, kopiowanie formuł

Przenoszenie, kopiowanie formuł Przenoszenie, kopiowanie formuł Jeżeli będziemy kopiowali komórki wypełnione tekstem lub liczbami możemy wykorzystywać tradycyjny sposób kopiowania lub przenoszenia zawartości w inne miejsce. Jednak przy

Bardziej szczegółowo

Klawiatura. Klawisze specjalne. Klawisze specjalne. klawisze funkcyjne. Klawisze. klawisze numeryczne. sterowania kursorem. klawisze alfanumeryczne

Klawiatura. Klawisze specjalne. Klawisze specjalne. klawisze funkcyjne. Klawisze. klawisze numeryczne. sterowania kursorem. klawisze alfanumeryczne Klawiatura Klawisze specjalne klawisze funkcyjne Klawisze specjalne klawisze alfanumeryczne Klawisze sterowania kursorem klawisze numeryczne Klawisze specjalne Klawisze specjalne Klawiatura Spacja służy

Bardziej szczegółowo

Formatowanie tekstu za pomocą zdefiniowanych stylów. Włączanie okna stylów. 1. zaznaczyć tekst, który chcemy formatować

Formatowanie tekstu za pomocą zdefiniowanych stylów. Włączanie okna stylów. 1. zaznaczyć tekst, który chcemy formatować Style Bardzo często w edytorze podczas pisania tekstu zachodzi potrzeba wielokrotnego powtórzenia czynności związanych z formatowaniem. Aby zapobiec stałemu otwieraniu okien dialogowych i wybierania stale

Bardziej szczegółowo

BAZY DANYCH Formularze i raporty

BAZY DANYCH Formularze i raporty BAZY DANYCH Formularze i raporty Za pomocą tabel można wprowadzać nowe dane, przeglądać i modyfikować dane już istniejące. Jednak dla typowego użytkownika systemu baz danych, przygotowuje się specjalne

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5 Moduły i bloki 1 Spis treści 1. Dodawanie bloków... 3 2. Treść i Dodaj odstęp... 3 3. Galeria obrazów Amiant... 5 4. Lista stron... 8 5. Aktualności...

Bardziej szczegółowo

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2. Spis treści: 1 Podstawy pracy z aplikacją... 2 1.1 Układ strony... 2 strona 1 z 7 1 Podstawy pracy z aplikacją InDesign jest następcą starzejącego się PageMakera. Pod wieloma względami jest do niego bardzo

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

Wymiarowanie i teksty. Polecenie:

Wymiarowanie i teksty. Polecenie: 11 Wymiarowanie i teksty Polecenie: a) Utwórz nowy rysunek z pięcioma warstwami, dla każdej warstwy przyjmij inny, dowolny kolor oraz grubość linii. Następnie narysuj pokazaną na rysunku łamaną warstwie

Bardziej szczegółowo

FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.

FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail. 1 FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.

Bardziej szczegółowo

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo

Bardziej szczegółowo

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5 Moduły i bloki 1 Spis treści 1. Dodawanie bloków... 3 2. Treść i Dodaj odstęp... 3 3. Galeria zdjęć... 5 4. Lista stron... 8 5. Aktualności...

Bardziej szczegółowo

NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA

NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA Ćwiczenie 1: NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA Skopiuj dowolny tekst z Internetu, np. ze strony http://www.gazeta.pl, około jednej strony objętości. Wklej tekst do nowego dokumentu Writer.

Bardziej szczegółowo

Jak posługiwać się edytorem treści

Jak posługiwać się edytorem treści Jak posługiwać się edytorem treści Edytor CKE jest bardzo prostym narzędziem pomagającym osobom niezaznajomionym z językiem HTML w tworzeniu interaktywnych treści stron internetowych. Razem z praktyka

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

Celem ćwiczenia jest zapoznanie się z podstawowymi funkcjami i pojęciami związanymi ze środowiskiem AutoCAD 2012 w polskiej wersji językowej.

Celem ćwiczenia jest zapoznanie się z podstawowymi funkcjami i pojęciami związanymi ze środowiskiem AutoCAD 2012 w polskiej wersji językowej. W przygotowaniu ćwiczeń wykorzystano m.in. następujące materiały: 1. Program AutoCAD 2012. 2. Graf J.: AutoCAD 14PL Ćwiczenia. Mikom 1998. 3. Kłosowski P., Grabowska A.: Obsługa programu AutoCAD 14 i 2000.

Bardziej szczegółowo

PORADNIK Zasady i zalecenia pracy z plikami oraz tekstem na stronach nowego portalu SGH (na platformie SharePoint)

PORADNIK Zasady i zalecenia pracy z plikami oraz tekstem na stronach nowego portalu SGH (na platformie SharePoint) PORADNIK Zasady i zalecenia pracy z plikami oraz tekstem na stronach nowego portalu SGH (na platformie SharePoint) wersja 2.0. (6 listopada 2015 r.) Przygotowanie: Dział Informacji i Komunikacji, Dział

Bardziej szczegółowo

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro Konfiguracja szablonu i wystawienie pierwszej aukcji allegro Metod na wystawienie aukcji na allegro jest co najmniej 2. W pierwszej przechodzimy do zakładki MOJA SPRZEDAŻ, w USTAWIENIACH SPRZEDAŻY odnajdujemy

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 3 Formularze Agenda Podstawy formularzy HTML Podstawowe kontrolki formularzy HTML Nowe kontrolki z HTML

Bardziej szczegółowo

INSTRUKCJA UŻYTKOWNIKA. Spis treści. I. Wprowadzenie... 2. II. Tworzenie nowej karty pracy... 3. a. Obiekty... 4. b. Nauka pisania...

INSTRUKCJA UŻYTKOWNIKA. Spis treści. I. Wprowadzenie... 2. II. Tworzenie nowej karty pracy... 3. a. Obiekty... 4. b. Nauka pisania... INSTRUKCJA UŻYTKOWNIKA Spis treści I. Wprowadzenie... 2 II. Tworzenie nowej karty pracy... 3 a. Obiekty... 4 b. Nauka pisania... 5 c. Piktogramy komunikacyjne... 5 d. Warstwy... 5 e. Zapis... 6 III. Galeria...

Bardziej szczegółowo

Nowy szablon stron pracowników ZUT

Nowy szablon stron pracowników ZUT Nowy szablon stron pracowników ZUT Uczelniane Centrum Informatyki ZUT przygotowało nowy szablon stron pracowników, zunifikowany z obecnymi stronami ZUT. Serdecznie zachęcamy Państwa do migracji na nowy

Bardziej szczegółowo

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Cz. 1. Tworzenie slajdów MS PowerPoint 2010 to najnowsza wersja popularnego programu do tworzenia prezentacji multimedialnych. Wygląd programu w

Bardziej szczegółowo

Rozdział 5: Style tekstu

Rozdział 5: Style tekstu 5. STYLE TEKSTU Posługując się edytorem MS Word trudno nie korzystać z możliwości jaką daje szybkie formatowanie z użyciem stylów. Stylem określa się zestaw parametrów formatowych, któremu nadano określoną

Bardziej szczegółowo

Tworzenie wiadomości Newsletter

Tworzenie wiadomości Newsletter Tworzenie wiadomości Newsletter W tym przewodniku dowiesz się jak Tworzyć atrakcyjne wiadomości Newlsetter, wybierać grupy docelowe do wysyłki oraz publikować wiadomości na profilach w portalach społecznościowych.

Bardziej szczegółowo

DODAWANIE ARTYKUŁÓW DO STRONY INTERNETOWEJ

DODAWANIE ARTYKUŁÓW DO STRONY INTERNETOWEJ DODAWANIE ARTYKUŁÓW DO STRONY INTERNETOWEJ Aby dodać artykuł musimy się zalogować. W tym celu wchodzimy na stronę http://sp1.brzesckujawski.pl/3/administrator/, wprowadzamy swoje dane: Nazwę użytkownika,

Bardziej szczegółowo

Strony WWW - podstawy języka HTML

Strony WWW - podstawy języka HTML Strony WWW - podstawy języka HTML Jacek Krzaczkowski 2004 r. HTML (Hyper Text Markup Language) jest językiem opisu dokumentu używanym do tworzenia stron WWW. Znaczniki języka HTML informują przeglądarkę

Bardziej szczegółowo

Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9

Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9 Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9 Uruchamianie edytora OpenOffice.ux.pl Writer 9 Dostosowywanie środowiska pracy 11 Menu Widok 14 Ustawienia dokumentu 16 Rozdział 2. OpenOffice

Bardziej szczegółowo

Sylabus Moduł 2: Przetwarzanie tekstów

Sylabus Moduł 2: Przetwarzanie tekstów Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera

Bardziej szczegółowo

Rozwiązanie ćwiczenia 7a

Rozwiązanie ćwiczenia 7a Rozwiązanie ćwiczenia 7a Podpisy pod rysunkami, zdjęciami możesz wprowadzić w następujący sposób: 1. Kliknij obiekt (rysunek, zdjęcie) i wybierz przycisk Wstaw podpis z grupy narzędzi Podpisy na karcie

Bardziej szczegółowo

Przewodnik Szybki start

Przewodnik Szybki start Przewodnik Szybki start Program Microsoft Publisher 2013 wygląda inaczej niż wcześniejsze wersje, dlatego przygotowaliśmy ten przewodnik, aby skrócić czas nauki jego obsługi. Pasek narzędzi Szybki dostęp

Bardziej szczegółowo

Kadry Optivum, Płace Optivum

Kadry Optivum, Płace Optivum Kadry Optivum, Płace Optivum Jak seryjnie przygotować wykazy absencji pracowników? W celu przygotowania pism zawierających wykazy nieobecności pracowników skorzystamy z mechanizmu Nowe wydruki seryjne.

Bardziej szczegółowo

Edytor tekstu OpenOffice Writer Podstawy

Edytor tekstu OpenOffice Writer Podstawy Edytor tekstu OpenOffice Writer Podstawy Cz. 3. Rysunki w dokumencie Obiekt Fontwork Jeżeli chcemy zamieścić w naszym dokumencie jakiś efektowny napis, na przykład tytuł czy hasło promocyjne, możemy w

Bardziej szczegółowo

1. Ćwiczenia z programem PowerPoint

1. Ćwiczenia z programem PowerPoint 1. Ćwiczenia z programem PowerPoint Tworzenie prezentacji Ćwiczenie 1.1. 1. Uruchomić program prezentacyjny PowerPoint wyszukując w menu Start programu Windows polecenie Programy, a następnie wybrać Windows

Bardziej szczegółowo

Pracownia internetowa w każdej szkole (edycja Jesień 2007)

Pracownia internetowa w każdej szkole (edycja Jesień 2007) Instrukcja numer D1/02_05/Z7 Pracownia internetowa w każdej szkole (edycja Jesień 2007) Opiekun pracowni internetowej cz. 1 Tworzenie własnej witryny WWW - Zadanie 7 (D1) Zadanie 7 Modyfikowanie właściwości

Bardziej szczegółowo

e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda

e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda Logowanie do panelu administracyjnego Aby móc zarządzać stroną, należy zalogować się do panelu administracyjnego.

Bardziej szczegółowo

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1. Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1

Bardziej szczegółowo

Praktyczne wykorzystanie arkusza kalkulacyjnego w pracy nauczyciela część 1

Praktyczne wykorzystanie arkusza kalkulacyjnego w pracy nauczyciela część 1 Praktyczne wykorzystanie arkusza kalkulacyjnego w pracy nauczyciela część 1 Katarzyna Nawrot Spis treści: 1. Podstawowe pojęcia a. Arkusz kalkulacyjny b. Komórka c. Zakres komórek d. Formuła e. Pasek formuły

Bardziej szczegółowo

Rozwiązanie ćwiczenia 6a

Rozwiązanie ćwiczenia 6a Rozwiązanie ćwiczenia 6a Aby ponumerować strony: 1. Ustaw kursor tekstowy na pierwszej stronie dokumentu Polska_broszura.doc i kliknij przycisk Numer strony na karcie Wstawianie w grupie Nagłówek i stopka.

Bardziej szczegółowo