KASKADOWE ARKUSZE STYLÓW
|
|
- Irena Nadzieja Szczepańska
- 8 lat temu
- Przeglądó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 HREF=mailto:prosper@serwer.dzial.pl> 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 HREF=mailto:prosper@serwer.dzial.pl> 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 ACTION=mailto:prosper@serwer.dzial.pl> 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:
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ółowoProgramowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
Bardziej szczegółowoZadanie 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ółowoZadanie 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ółowoZadanie 11. Przygotowanie publikacji do wydrukowania
Zadanie 11. Przygotowanie publikacji do wydrukowania Edytor Word może służyć również do składania do druku nawet obszernych publikacji. Skorzystamy z tych możliwości i opracowany dokument przygotujemy
Bardziej szczegółowoEdytor 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ółowoDzię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ółowoTabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>
Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem
Bardziej szczegółowoHTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Bardziej szczegółowoużywane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów
opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania
Bardziej szczegółowoLABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE
LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędów
Bardziej szczegółowoTworzenie 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ółowoI. 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ółowoModuł 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ółowoPodstawy 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ółowoInstrukcja obsługi funkcji specjalnych szablonu C01 v.1.0
Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0 UWAGA 1: Przed dokonaniem jakichkolwiek zmian, zalecamy skopiować wcześniej kod html modułu do pliku na lokalnym dysku. W przypadku problemów ułatwi
Bardziej szczegółowoPierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
Bardziej szczegółowoABC 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ółowoCzcionki bezszeryfowe
Czcionki szeryfowe Czcionki szeryfowe wyposażone są w dodatkowe elementy ułatwiające czytanie. Elementy te, umieszczone w dolnej i górnej części liter tworzą poziome, optyczne linie ułatwiające prowadzenie
Bardziej szczegółowoKaskadowe 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ółowoZdefiniowane 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ółowoDokument 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Ć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ółowoDanuta 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ółowo1. 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ółowoRozwią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ółowoZadanie 10. Stosowanie dokumentu głównego do organizowania dużych projektów
Zadanie 10. Stosowanie dokumentu głównego do organizowania dużych projektów Za pomocą edytora Word można pracować zespołowo nad jednym dużym projektem (dokumentem). Tworzy się wówczas dokument główny,
Bardziej szczegółowoWitryny i aplikacje internetowe
Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch
Bardziej szczegółowoTworzenie 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ółowoOczywiś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ółowoURL: 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ółowoAplikacje 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ółowoPrzedmiot: Grafika komputerowa i projektowanie stron WWW
KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup
Bardziej szczegółowoFragment tekstu zakończony twardym enterem, traktowany przez edytor tekstu jako jedna nierozerwalna całość.
Formatowanie akapitu Fragment tekstu zakończony twardym enterem, traktowany przez edytor tekstu jako jedna nierozerwalna całość. Przy formatowaniu znaków obowiązywała zasada, że zawsze przez rozpoczęciem
Bardziej szczegółowoKolory elementów. Kolory elementów
Wszystkie elementy na schematach i planach szaf są wyświetlane w kolorach. Kolory te są zawarte w samych elementach, ale w razie potrzeby można je zmienić za pomocą opcji opisanych poniżej, przy czym dotyczy
Bardziej szczegółowoPrzewodnik... 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ółowoLp. Nazwisko Wpłata (Euro)
Tabele_Writer Wstawianie tabeli Na początku dokumentu wpisz tekst Rzym-Lista Wpłat i wciśnij Enter. Następnie naciśnij symbol strzałki przypisanej do ikony Tabela znajdujący się na pasku narzędzi Pracę
Bardziej szczegółowoDODAJEMY 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ółowo1. 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ółowoPodrę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ółowoSpis 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ółowoWybrane znaczniki HTML
Wybrane znaczniki HTML Struktura dokumentu HTML informacje o dokumencie i plikach zewnętrznych zawartość wyświetlana w przeglądarce wraz z tagami formatującymi
Bardziej szczegółowoPodział na strony, sekcje i kolumny
Formatowanie stron i sekcji Formatowanie stron odnosi się do całego dokumentu lub jego wybranych sekcji. Dla całych stron ustalamy na przykład marginesy, które określają odległość tekstu od krawędzi papieru.
Bardziej szczegółowoEGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie Układ graficzny CKE 2016 chronione do momentu rozpoczęcia egzaminu CENTRALNA KOMISJA EGZAMINACYJNA Nazwa kwalifikacji: Twmzenie aplikacji internetowych i baz danych oraz
Bardziej szczegółowoWstawianie nowej strony
Wstawianie nowej strony W obszernych dokumentach będziemy spotykali się z potrzebą dzielenia dokumentu na części. Czynność tę wykorzystujemy np.. do rozpoczęcia pisania nowego rozdziału na kolejnej stronie.
Bardziej szczegółowoI. 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ółowoMoż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ółowo1.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ółowoTworzenie 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ółowozmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >
tytuł dokumentu treść dokumentu
Bardziej szczegółowoWORDPRESS 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ółowoEGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie Układ graficzny CKE 2016 chronione do momentu rozpoczęcia egzaminu CENTRALNA KOMISJA EGZAMINACYJNA Nazwa kwalifikacji: Twmzenie aplikacji internetowych i baz danych oraz
Bardziej szczegółowoOdsył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ółowoTemat: 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ółowoDlaczego 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ółowoZa 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ółowo1. 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Ć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ółowoINSTRUKCJA 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ółowoMATERIAŁ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ółowoDodawanie 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ółowoPrzenoszenie, 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ółowoTworzenie 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ółowoFormat HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
Bardziej szczegółowoEdukacja 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ółowoCSS. 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ółowoFormatowanie 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ółowoZadanie 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ółowoPersonalizowanie 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ółowo1.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ółowoYoung Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
Bardziej szczegółowoKlawiatura. 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ółowoStruktura 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ółowoetrader Pekao Podręcznik użytkownika Strumieniowanie Excel
etrader Pekao Podręcznik użytkownika Strumieniowanie Excel Spis treści 1. Opis okna... 3 2. Otwieranie okna... 3 3. Zawartość okna... 4 3.1. Definiowanie listy instrumentów... 4 3.2. Modyfikacja lub usunięcie
Bardziej szczegółowoMS 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ółowoLaboratorium 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ółowoPrzed 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ółowoOficyna Wydawnicza UNIMEX ebook z zabezpieczeniami DRM
Oficyna Wydawnicza UNIMEX ebook z zabezpieczeniami DRM Opis użytkowy aplikacji ebookreader Przegląd interfejsu użytkownika a. Okno książki. Wyświetla treść książki podzieloną na strony. Po prawej stronie
Bardziej szczegółowoKonfiguracja 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ółowoPrzedszkolaki Przygotowanie organizacyjne
Celem poniższego ćwiczenia jest nauczenie rozwiązywania zadań maturalnych z wykorzystaniem bazy danych. Jako przykład wykorzystano zadanie maturalne o przedszkolakach z matury w 2015 roku. Przedszkolaki
Bardziej szczegółowoPORADNIK 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ółowoTworzenie szablonów użytkownika
Poradnik Inżyniera Nr 40 Aktualizacja: 12/2018 Tworzenie szablonów użytkownika Program: Plik powiązany: Stratygrafia 3D - karty otworów Demo_manual_40.gsg Głównym celem niniejszego Przewodnika Inżyniera
Bardziej szczegółowoTechniki 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ółowoPodstawy 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ółowoZasady tworzenia podstron
Zasady tworzenia podstron Jeśli tworzysz rozbudowaną witrynę internetową z wieloma podstronami, za chwilę dowiesz się, jak dodawać nowe podstrony w kreatorze Click Web, czym kierować się przy projektowaniu
Bardziej szczegółowoPrzypisy 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ółowoEdytor tekstu MS Word 2010 PL. Edytor tekstu to program komputerowy umożliwiający wprowadzenie lub edycję tekstu.
Edytor tekstu MS Word 2010 PL. Edytor tekstu to program komputerowy umożliwiający wprowadzenie lub edycję tekstu. SP 8 Lubin Zdjęcie: www.softonet.pl Otwieranie programu MS Word. Program MS Word można
Bardziej szczegółowoTworzenie infografik za pomocą narzędzia Canva
Tworzenie infografik za pomocą narzędzia Canva Spis treści Wstęp... 1 Układy... 3 Zmiana tekstu... 4 Obrazki... 5 Elementy... 6 Zdjęcia - Gratis... 6 Siatki... 8 Ramki... 10 Kształty... 12 Linie... 12
Bardziej szczegółowoMoż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ółowoHTML. 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ółowoNAGŁÓ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ółowoFormularze 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ółowoCelem ć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ółowoAdobe 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ółowoKATEGORIA OBSZAR WIEDZY
Moduł 3 - Przetwarzanie tekstów - od kandydata wymaga się zaprezentowania umiejętności wykorzystywania programu do edycji tekstu. Kandydat powinien wykonać zadania o charakterze podstawowym związane z
Bardziej szczegółowoTworzenie 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ółowoMs WORD Poziom podstawowy Materiały szkoleniowe
Ms WORD Poziom podstawowy Materiały szkoleniowe Nota Materiał powstał w ramach realizacji projektu e-kompetencje bez barier dofinansowanego z Programu Operacyjnego Polska Cyfrowa działanie 3.1 Działania
Bardziej szczegółowoZaję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ółowoCopyright 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