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
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. 4.0. 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. 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-8859-2"> 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
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
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
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
<BR><BR> <H2>Adres firmy: <BR>PROSPER Sp.z o.o. <BR>87-100 Toruń, ul. Kraszewskiego 58 <BR>tel. (56) 652487, fax: (56) 652488 </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
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
</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 1700 16&14PPM/FR3/A3+ 1624,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 4100 24PPM/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 240X12 1+0 STANDARD 42,30 PAPIER 240X12 1+1 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
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 e-mail:</p> <INPUT TYPE=text NAME=e-mail 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
<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 240X12 1+0 STANDARD<INPUT NAME=m10 SIZE=5></LABEL> <BR><LABEL>PAPIER 240X12 1+1 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
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