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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ć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

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

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

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

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

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

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

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

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

Ć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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Cz. 2. Wstawianie obiektów do slajdu Do slajdów w naszej prezentacji możemy wstawić różne obiekty (obraz, dźwięk, multimedia, elementy ozdobne),

Bardziej szczegółowo

Portal Wymiany Wiedzy Przewodnik dla nowych użytkowników

Portal Wymiany Wiedzy Przewodnik dla nowych użytkowników Portal Wymiany Wiedzy Przewodnik dla nowych użytkowników Spis treści 1. Wstęp... 2. Dostęp do Portalu Wymiany Wiedzy... 2.1. Główna strona projektu... 2.2. Główna strona portalu... 3. Rejestracja na Portalu

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

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

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

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

Zadanie 8. Dołączanie obiektów

Zadanie 8. Dołączanie obiektów Zadanie 8. Dołączanie obiektów Edytor Word umożliwia dołączanie do dokumentów różnych obiektów. Mogą to być gotowe obiekty graficzne z galerii klipów, równania, obrazy ze skanera lub aparatu cyfrowego.

Bardziej szczegółowo

przygotował: mgr Szymon Szewczyk PODSTAWY

przygotował: mgr Szymon Szewczyk PODSTAWY S t r o n a 1 PODSTAWY Każdy dokument musi być w całości zawarty między znacznikami - i (większość znaczników musi być odwołana ). Dokument HTML a składa się z dwóch części: - głowy

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

LEGISLATOR. Data dokumentu:24 maja 2013 Wersja: 1.3 Autor: Paweł Jankowski, Piotr Jegorow

LEGISLATOR. Data dokumentu:24 maja 2013 Wersja: 1.3 Autor: Paweł Jankowski, Piotr Jegorow LEGISLATOR Dokument zawiera opis sposobu tworzenia podpisów pod aktami dla celów wizualizacji na wydrukach Data dokumentu:24 maja 2013 Wersja: 1.3 Autor: Paweł Jankowski, Piotr Jegorow Zawartość Wprowadzenie...

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

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. odcinek 6

Tworzenie Stron Internetowych. odcinek 6 Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą

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

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów. JĘZYK - HTML Hipertekst - możliwośd przechodzenia między różnymi fragmentami tego samego lub różnych dokumentów, które zostały ze sobą powiązane. Jest systemem odnośników (tzw. Skrótów), działających na

Bardziej szczegółowo

1. 2. Dobór formy do treści dokumentu w edytorze tekstu MS Word

1. 2. Dobór formy do treści dokumentu w edytorze tekstu MS Word 1. 2. Dobór formy do treści dokumentu w edytorze tekstu MS Word a. 1. Cele lekcji i. a) Wiadomości 1. Uczeń potrafi wyjaśnić pojęcia: nagłówek, stopka, przypis. 2. Uczeń potrafi wymienić dwie zasadnicze

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

OKNO NA ŚWIAT - PRZECIWDZIAŁANIE WYKLUCZENIU CYFROWEMU W MIEŚCIE BRZEZINY

OKNO NA ŚWIAT - PRZECIWDZIAŁANIE WYKLUCZENIU CYFROWEMU W MIEŚCIE BRZEZINY Projekt OKNO NA ŚWIAT - PRZECIWDZIAŁANIE WYKLUCZENIU CYFROWEMU W MIEŚCIE BRZEZINY współfinansowany przez Unię Europejską ze środków Europejskiego Funduszu Rozwoju Regionalnego w ramach Programu Operacyjnego

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

Arkusz kalkulacyjny EXCEL

Arkusz kalkulacyjny EXCEL ARKUSZ KALKULACYJNY EXCEL 1 Arkusz kalkulacyjny EXCEL Aby obrysować tabelę krawędziami należy: 1. Zaznaczyć komórki, które chcemy obrysować. 2. Kursor myszy ustawić na menu FORMAT i raz kliknąć lewym klawiszem

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

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

Podstawowe czynnos ci w programie PowerPoint

Podstawowe czynnos ci w programie PowerPoint Podstawowe czynnos ci w programie PowerPoint Program PowerPoint to zaawansowana aplikacja do obsługi prezentacji, jednak aby w pełni wykorzystać jej możliwości, należy najpierw poznać jej podstawowe funkcje.

Bardziej szczegółowo

mgr Elżbieta Galant-Zielonka

mgr Elżbieta Galant-Zielonka Szkoła Podstawowa Nr 12 w Tczewie PRZYGOTOWANIE SZABLONU DYPLOMU W PROGRAMIE MICROSOFT WORD Z WYKORZYSTANIEM KORESPONDENCJI SERYJNEJ mgr Elżbieta Galant-Zielonka Tczew 2003 Wstęp Nowoczesny nauczyciel,

Bardziej szczegółowo

learningpanel - materiały pomocnicze - JAK ZROBIĆ... Jak zrobić...

learningpanel - materiały pomocnicze - JAK ZROBIĆ... Jak zrobić... Jak zrobić... W tym dziale prezentujemy przepisy "krok po kroku" jak stworzyć różne aplikacje multimedialne w generatorze lekcji learningpanel. APLIKACJA I: Zestaw ćwiczeń i zadań testowych. Przykład aplikacji,

Bardziej szczegółowo

Blok dokumentu.

Blok dokumentu. <div> </div> Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów

Bardziej szczegółowo

Instrukcja użytkownika

Instrukcja użytkownika SoftwareStudio Studio 60-349 Poznań, ul. Ostroroga 5 Tel. 061 66 90 641 061 66 90 642 061 66 90 643 061 66 90 644 fax 061 86 71 151 mail: poznan@softwarestudio.com.pl Herkules WMS.net Instrukcja użytkownika

Bardziej szczegółowo

Wersja 2.6 przeznaczona jest dla systemów Windows Vista/7. Pobierz ze strony:

Wersja 2.6 przeznaczona jest dla systemów Windows Vista/7. Pobierz ze strony: Windows Movie Maker Windows Movie Maker to program do obróbki filmów. Wersja 2.6 przeznaczona jest dla systemów Windows Vista/7. Pobierz ze strony: http://www.dobreprogramy.pl/windows-movie-maker,program,windows,11546.html

Bardziej szczegółowo

Budowa aplikacji ASP.NET współpracującej z bazą dany do obsługi przesyłania wiadomości

Budowa aplikacji ASP.NET współpracującej z bazą dany do obsługi przesyłania wiadomości Budowa aplikacji ASP.NET współpracującej z bazą dany do obsługi przesyłania wiadomości część 2 Zaprojektowaliśmy stronę dodaj_dzial.aspx proszę jednak spróbować dodać nowy dział nie podając jego nazwy

Bardziej szczegółowo

EDYCJA TEKSTU MS WORDPAD

EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU - MS WORDPAD WordPad (ryc. 1 ang. miejsce na słowa) to bardzo przydatny program do edycji i pisania tekstów, który dodatkowo dostępny jest w każdym systemie z rodziny

Bardziej szczegółowo

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:

Bardziej szczegółowo