Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.

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

Download "Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW."

Transkrypt

1 Ćwiczenie 2 Kaskadowe arkusze stylów CSS. Budowanie makiety strony i jej modyfikacja dr inż. Robert Banasiak 1

2 Materiały ćwiczeniowe Wszelkie materiały ćwiczeniowe: wykłady, instrukcje oraz pliki ćwiczeniowe do niniejszych zajęć z projektowania stron WWW są dostępne w trakcie zajęć na stronie WWW prowadzącego: w zakładce Grafika Komputerowa. Pamiętajmy o częstym zapisywaniu rezultatów swojej pracy!!! Plan ćwiczeń W trakcie tego ćwiczenia zapoznacie się Państwo z zaawansowanymi możliwościami tworzenia i stosowania kaskadowych arkuszy stylów CSS. A w szczególności jak: tworzyć elementy układu (makiety) strony i dołączać do nich arkusze stylów CSS; definiować reguły CSS dla określonych fragmentów projektu; definiować reguły CSS do znaczników <div>; umieszczać tekstu oraz obrazów zastępczych; eksportować reguły CSS do zewnętrznego arkusza stylów; Ćwiczenie : Tworzymy nowy układ (makietę, szablon) strony Nowoczesne serwisy internetowe bardzo często projektowane są (dla przypomnienia ) przy użyciu stylów CSS. Struktura oparta na modelu pudełkowym oraz regułach CSS jest mniej skomplikowana i łatwiejsza do zarządzania niż analogiczny projekt oparty o przestarzałe już (zdeprecjonowane w specyfikacji HTML5) ramki. Ponadto projekty oparte na stylach CSS są zgodne z obowiązującymi aktualnie standardami stosowanymi w Internecie. Projekt makiety CSS strony internetowej, który realizuje model pudełkowy CSS, składa się z dwóch głównych składników: sekwencji znaczników HTML zazwyczaj są to specjalne znaczniki <div> - które stanowią główny budulec projektu; zestawu reguł CSS, określających parametry i format najważniejszych elementów strony, dzięki czemu strona posiada określony przez nas, funkcjonalny i ciekawy wygląd. Aby stworzyć podstawę do zbudowania makiety strony WWW musimy najpierw wykonać następujące kroki: 1. Tworzymy nowy serwis o nazwie Makieta (musimy jak zwykle pamiętać o zbudowaniu właściwej struktury katalogów wraz z katalogiem Obrazy); 2. Następnie tworzymy nowy pusty dokument html (typ strony: HTML, Typ dokumentu: HTML5, układ: brak), następnie klikamy Utwórz; 3. Otwieramy panel style CSS i dodajemy nową regułę CSS i jej selektor o nazwie body (typ selektora: Znacznik (pozwala przedefiniować element HTML). Zatwierdzamy. 4. W oknie właściwości selektora ustawiamy kolor tła dla selektora body jako biały; w sekcji Blok -> Textalign -> center; w sekcji Pole ustawiamy w sekcji Padding (odstęp wewnętrzny) -> Top -> 0 i zaznaczamy (jeżeli nie jest zaznaczone) To samo dla wszystkich; Analogicznie jak dla Padding ustawiamy dla opcji Margin (margines); 2

3 Kolejnym naszym krokiem będzie zbudowanie pojemnika głównego (kontenera głównego) makiety, w którym pojawią się wszystkie jej elementy czyli cała struktura naszej strony WWW. W ten sposób wykorzystamy jedną najpopularniejszych technik tworzenia serwisów WWW polegającą na wstawieniu nadrzędnego znacznika <div>, który będzie zawierał wszystkie pozostałe znaczniki wraz z ich treścią. Nadrzędny znacznik <div> nosi, jak już wcześniej wspomniałem, nazwę pojemnika strony (znany Państwu z poprzednich zajęć styl wbudowany o nazwie container, który zawiera odpowiednią regułę i jej selektor). Zadeklarowanie takiego znacznika, obejmującego swoim zasięgiem całą zawartość strony WWW, pozwala zdefiniować pewne ogólne właściwości wszystkich elementów tej strony, na przykład takie jak jej szerokość czy wyrównanie tekstu. Naszym zadaniem będzie teraz zdefiniowanie takich właściwości w ramach nowych reguł CSS. Dla tych reguł utworzymy również szereg znaczników <div> określających poszczególne elementy strony takie jak nagłówek czy zawartość główna. Zaczniemy od stworzenia reguły określającej dla nas formatowanie tworzonego głównego kontenera strony. W tym celu tworzymy nową regułę CSS opartą na selektorze ID (typ selektora: Identyfikator dotyczy tylko jednego elementu HTML) o nazwie: #wrapper (krzyżyk w nazwie selektora oznacza, iż w obrębie danej strony może on być użyty tylko raz co jest oczywiście skrupulatnie pilnowane przez Dreamweavera). 1. W kategorii blok wybierz opcję Text-align i ustaw wartość na left. 2. W kategorii pole ustaw width= 984 (wartość optymalna dla stron o rozdzielczości 1024x768), 3. W sekcji Margin ustaw Top=0, Right=auto, Bottom=0, Left=auto. 4. Zatwierdź konfigurację selektora #wrapper. 5. Kliknij ikonę Znacznik DIV: 6. Gdy na ekranie pojawi się okno dialogowe Wstaw znacznik DIV: Wybierz z listy opcji ID: nazwę selektora #wrapper, jeżeli to konieczne wybierz z listy opcji Wstaw: Po początku znacznika (po prawej stronie wyświetli się <body>) i naciśnij OK. Efektem tych działań będzie pusty kontener o nazwie #wrapper, wycentrowany na środku strony i wypełniony domyślnym tekstem: Tu znajdzie się zawartość id "wrapper". 7. Naciśnij klawisz F4 w celu ukrycia wszystkich widocznych paneli edycyjnych i zobaczenia pełnej strony wraz z utworzonym kontenerem. Ponowne naciśnięcie klawisza F4 przywraca widzialność paneli edycyjnych. Utworzony znacznik <div> z selektorem formatującym #wrapper służy raczej jako pojemnik dla innych znaczników typu <div> nie zaś dla tekstu czy grafiki. Jednocześnie używa się go również do wymuszania docelowej szerokości układu serwisu WWW. 3

4 No cóż. główny znacznik już zdefiniowaliśmy, przejdźmy zatem do definicji właściwego szkieletu strony WWW, dzieląc go na kilka zasadniczych części: nagłówek, treść oraz stopkę. Każda z tych części wymaga zdefiniowania selektora i reguły CSS oraz wstawienia osobnego znacznika <div>. Zbudujmy zatem w pierwszej kolejności nagłówek (#header), następnie treść (#content) oraz stopkę (#footer). W tym celu: 1. Tworzymy nową regułę wraz z jej selektorem CSS o identyfikatorze ID: #header (typ selektora: Identyfikator dotyczy tylko jednego elementu HTML) proszę zwrócić uwagę na ustawienie opcji zaznaczonych kropkowanymi prostokątami na poniższej ilustracji. 2. Definiujemy regułę dla selektora #header według następujących wytycznych: zakładka Pole, wyłączmy Jednakowy dla wszystkich w sekcji Margin, ustawmy Top=12, Bottom=12, pozostałe pola zostawiamy puste; 3. Tworzymy nową regułę (i jej selektor) CSS o identyfikatorze ID: #content; 4. Definiujemy regułę dla selektora #content według następujących wytycznych: zakładka Pole, wyłączmy Jednakowy dla wszystkich w sekcji Padding, Top=0, pozostałe pola zostawiamy puste; 5. Analogicznie skonfigurujmy sekcję Margin. Ćwiczenie do samodzielnego zrealizowania: Korzystając z trybu Kod (lub Kod i Projekt -> zakładka Podziel) napisz kod dodający do arkusza stylów selektor #footer oraz jego regułę. Konfiguracja reguły będzie niemal identyczna jak w przypadku selektora #header. Jedyną zmianą będzie dopisanie reguły dbającej o to, by żadne inne tzw. pływające elementy strony nie kolidowały nam ze stopką. W tym celu ustawiamy zmienną clear na wartość both -> clear: both. Dodatkowo w ramach tego ćwiczenia można zapoznać się z ciekawym systemem podpowiedzi konfiguratora reguły CSS. Nadal pamiętajmy o częstym zapisywaniu rezultatów swojej pracy poprzez opcję Zapisz wszystko. W kolejnym ćwiczeniu do zbudowanych powyżej reguł CSS dla nagłówka, treści strony i stopki, wstawimy i przypiszemy odpowiednie znaczniki <div>. 1. Kasujemy tekst zastępczy w kontenerze #wrapper. 2. Header: wstawiamy nowy znacznik <div> (patrz str. 4 punkt 6): wybieramy opcję Wstaw -> Po początku znacznika, z sąsiadującej listy wybieramy <div id= wrapper >, a z listy ID wybieramy nazwę selektora 4

5 header. Naciskamy OK. Taka konfiguracja gwarantuje nam, iż nasz selektor zadziała wewnątrz kontenera wrapper. Zobaczmy jak wygląda kod źródłowy tej operacji: <body> <div id="wrapper"> <div id="header">tu znajdzie się zawartość id "header"</div> </div> </body> Jak widać zostało dokonane zagnieżdżenie jednego znacznika <div> w drugim. 3. W przypadku elementu strony WWW przechowującego główną treść o nazwie ID: content: wstawiamy nowy znacznik <div>: tym razem wybieramy opcję Wstaw -> Po znaczniku, z sąsiadującej listy wybieramy <div id= header >, a z listy ID wybieramy nazwę selektora content. Ćwiczenie do samodzielnego zrealizowania: Korzystając z trybu Kod (lub Podziel) napisz kod CSS/HTML dodający do naszego serwisu nowy znacznik <div> dla selektora #footer, odpowiednio go zagnieżdżając względem pozostałych znaczników <div> w strukturze serwisu tj. ustaw znacznik <div> dla #footer po znaczniku <div> dla #content. Ćwiczenie: Rozbudowujemy nowy układ strony W kolejnym ćwiczeniu spróbujemy rozbudować otrzymaną dotychczas ogólną strukturę serwisu, umieszczając w niej kilka znacznie bardziej ukierunkowanych elementów. W tym ćwiczeniu do naszej strony dodamy pojemnik na logo strony, pojemnik na panel nawigacyjny oraz pojemnik na baner reklamowy. Pamiętajmy o częstym zapisywaniu rezultatów swojej pracy poprzez opcję Zapisz wszystko. 1. Dodaj nowe reguły CSS dla selektora o ID: #logo, #nav oraz #banner. a. W konfiguracji reguły #logo ustaw w zakładce Pole -> Wysokość (height) na 71, wyłącz opcje Jednakowy dla wszystkich w sekcji Padding i wpisz 12 w polu Bottom. Pozostałe pola pozostaw puste; b. W konfiguracji reguły #nav ustaw w zakładce Pole -> Wysokość (height) na 28. Pozostałe pola pozostaw puste; c. W konfiguracji reguły #banner ustaw w zakładce Pole -> Wysokość (height) na 200. Pozostałe pola pozostaw puste. 2. Wstaw odpowiednio i we właściwej kolejności znaczniki <div> zagnieżdżając je wewnątrz kontenera header (korzystając z trybu Projekt lub trybu Kod) tak by uzyskać następujący układ makiety strony WWW: 5

6 Ćwiczenie 4: Dodajemy bloki tekstu w pojemniku #content Kolejny etap prac będzie polegał na podzieleniu treści strony na dwie kolumny. W tym celu należy zdefiniować odpowiednie reguły CSS i ich selektory dla tych kolumn. 1. Tworzymy nową regułę CSS dla kolumny lewej o nazwie ID: #leftcolumn; 2. W zakładce (kategorii) Pole wprowadź szerokość = (szerokość głównego kontenera / 2) 2*15 (dwa odstępy poziome po 15 pikseli) czyli w naszym przypadku będzie to.??? ; 3. Ustaw pole Float na left dzięki czemu nasz kolumna #leftcolumn będzie z lewej strony; 4. Utwórz regułę CSS dla kolumny prawej o nazwie ID: #rightcolumn korzystając z trybu Kod. Ustaw pole float na right. Szerokość #rightcolumn identyczna jak w przypadku #leftcolumn. 5. Utwórz odpowiednie znaczniki <div> zagnieżdżając je: znacznik dla #leftcolumn po początku znacznika #content a znacznik <div> dla #rightcolumn po znaczniku #leftcolumn. Zadanie można wykonać zarówno w trybie Projekt jak i Kod. 6. Wynik działania tej procedury powinien przypominać poniższą ilustrację: Ćwiczenie : Wstawiamy elementy zastępcze do makiety strony. 1. Zaznaczamy tekst Tu znajdzie się zawartość id "logo", kasujemy go i w to miejsce wstawiamy obraz zastępczy o wymiarach 984x71 nadając mu nazwę Logo; 2. Zaznaczamy tekst Tu znajdzie się zawartość id "nav", kasujemy go i w to miejsce wstawiamy obraz zastępczy o wymiarach 984x28 nadając mu nazwę Nav; 3. Zaznaczamy tekst Tu znajdzie się zawartość id "banner", kasujemy go i w to miejsce wstawiamy obraz zastępczy o wymiarach 984x200 nadając mu nazwę Banner; 4. Umieszczamy kursor w treści napisu Tu znajdzie się zawartość id "leftcolumn", następnie klikamy na znacznik <div #leftcolumn> w dolnym pasku stanu na liście znaczników. Następnie naciskamy strzałkę w lewo aby przenieść kursor pomiędzy znacznikami #content <div> a #leftcolumn <div>. Wpisujemy tekst: Nagłówek 1 i formatujemy ten tekst jako Nagłówek 1 korzystając z panelu właściwości HTML. 6

7 5. Zaznaczamy tekst zastępczy Tu znajdzie się zawartość id "leftcolumn" i wpisujemy słowo Nagłówek 2. Formatujemy go jako Nagłówek 2. Ustawiamy się na końcu napisu Nagłówek 2 i wpisujemy jakiś dowolny tekst tak by zajmował około 6 linii, rozdzielając kolejne linie Enterami przy końcu pojemnika lewej kolumny; 6. Zamieśćmy ten sam tekst w prawej kolumnie: ustawmy się w treści akapitu, który właśnie został stworzony, wybierzmy z menu Edycja -> Zaznacz wszystko. Następnie Ctrl+C (kopiuj). Zaznaczmy tekst Tu znajdzie się zawartość id "rightcolumn" i naciśnijmy Ctrl + V. 7. Końcowy efekt Państwa działań powinien być zbliżony do poniższego: Ćwiczenie do samodzielnego zrealizowania (w miarę możliwości czasowych ). Korzystając z tak przygotowanego szablonu: 1. Opracuj na jego bazie prostą stronę WWW na dowolny temat; 2. Wypełnij ją dowolnym, wybranym przez siebie tekstem; 3. Obrazy zastępcze przekształć na prawdziwe obrazy (Photoshop, Grafika Google); 4. Zmodyfikuj ogólna kolorystykę strony według własnego pomysłu; 5. Wyeksportuj style do zewnętrznego pliku; Ćwiczenie do samodzielnego zrealizowania (w miarę dalszych możliwości czasowych ). Zbuduj od podstaw samodzielnie szablon według podanych poniżej wytycznych: 1. Szablon składa się z następujących 6 elementów: container (kontener), header (nagłówek), footer (stopka), sidebar1 (panel lewy), sidebar2 (panel prawy), maincontent (panel środkowy); 2. Tło element body -> białe; 3. Komponent container powinien być zagnieżdżony wewnątrz body: rozmiary komponentu container (szerokość: 1024 px, wysokość zmienna), wycentrowany na środku ekranu przeglądarki; 7

8 4. header powinien być zagnieżdżony w komponencie container, wysokość 80px, szerokość dopasowana do szerokości komponentu container, ustawienie: górna krawędź komponentu container (marginesy górny i dolny -> według uznania); 5. footer powinien być zagnieżdżony w komponencie container, wysokość 40px, szerokość dopasowana do szerokości komponentu container, ustawienie: dolna krawędź komponentu container (marginesy górny i dolny -> według uznania); 6. sidebar1 powinien być zagnieżdżony w komponencie container, wysokość dopasowana do zawartości -> tekstu i grafik, szerokość 180px, ustawienie: lewa krawędź komponentu container (marginesy górny i dolny - > według uznania); 7. sidebar2 powinien być zagnieżdżony w komponencie container, wysokość dopasowana do zawartości -> tekstu i grafik, szerokość 280px, ustawienie: prawa krawędź komponentu container (marginesy lewy i prawy -> według uznania); 8. maincontent powinien być zagnieżdżony w komponencie container, pomiędzy komponentami Sidebar1 i Sidebar2, wysokość dopasowana do zawartości -> tekstu i grafik, szerokość 280px, ustawienie: prawa krawędź komponentu container (marginesy lewy i prawy -> według uznania); 9. Odstępy wewnętrzne we wszystkich elementach według uznania; 10. Ilustracja poglądowa przygotowywanego szablonu CSS (rzeczywiste proporcje komponentów będą nieco inne): 11. Korzystając z kolorowej wersji instrukcji dostępnej na stronie WWW prowadzącego można skonfigurować kolory tła takie jak prezentuje ilustracja poglądowa w punkcie 9) > kolory oczywiście można również zastosować własne - według uznania; 12. Po zbudowanie szablonu należy sprawdzić jego poprawność wyświetlania w przeglądarce Mozilla Firefox Internet Explorer, oraz Google Chrome (jeżeli dostępny). 8

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

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

Instrukcja 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ółowo

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading

Bardziej szczegółowo

Lp. Nazwisko Wpłata (Euro)

Lp. 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ółowo

Wstawianie nowej strony

Wstawianie 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ół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

Tworzenie szablonów użytkownika

Tworzenie 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ół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

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

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

Jeżeli pole Krawędź będzie zaznaczone uzyskamy obramowanie w całej wstawianej tabeli

Jeżeli pole Krawędź będzie zaznaczone uzyskamy obramowanie w całej wstawianej tabeli Tabela Aby wstawić tabelę do dokumentu należy wybrać z górnego menu Tabela-->Wstaw-->Tabela W kategorii Rozmiar określamy z ilu kolumn i ilu wierszy ma się składać nasza tabela. Do dokumentu tabelę możemy

Bardziej szczegółowo

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

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

Bardziej szczegółowo

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

EGZAMIN 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ółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

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

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

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

Bardziej szczegółowo

Stosowanie, tworzenie i modyfikowanie stylów.

Stosowanie, tworzenie i modyfikowanie stylów. Stosowanie, tworzenie i modyfikowanie stylów. We wstążce Narzędzia główne umieszczone są style, dzięki którym w prosty sposób możemy zmieniać tekst i hurtowo modyfikować. Klikając kwadrat ze strzałką w

Bardziej szczegółowo

Edytor tekstu MS Word 2003 - podstawy

Edytor tekstu MS Word 2003 - podstawy Edytor tekstu MS Word 2003 - podstawy Cz. 4. Rysunki i tabele w dokumencie Obiekt WordArt Jeżeli chcemy zamieścić w naszym dokumencie jakiś efektowny napis, na przykład hasło reklamowe, możemy wykorzystać

Bardziej szczegółowo

Zaznaczanie komórek. Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM

Zaznaczanie komórek. Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM Zaznaczanie komórek Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM Aby zaznaczyć blok komórek które leżą obok siebie należy trzymając wciśnięty LPM przesunąć kursor rozpoczynając od komórki

Bardziej szczegółowo

Zadanie 3. Praca z tabelami

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

Bardziej szczegółowo

Studia Podyplomowe Grafika Komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW

Studia Podyplomowe Grafika Komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW Ćwiczenie nr 1 Zapoznanie się z pracą w środowisku Dreamweaver CS6 Tworzenie prostego serwisu WWW Publikacja w Internecie Praca własna dr inż. Robert Banasiak 1 Materiały ćwiczeniowe Wszelkie materiały

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

Zadanie 11. Przygotowanie publikacji do wydrukowania

Zadanie 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ółowo

Rozdział VI. Tabele i ich możliwości

Rozdział VI. Tabele i ich możliwości Rozdział VI Tabele i ich możliwości 3.6. Tabele i ich możliwości W wielu dokumentach zachodzi konieczność przedstawienia danych w formie tabelarycznej. Dlatego też program OO Writer jest wyposażony w

Bardziej szczegółowo

Zadanie 10. Stosowanie dokumentu głównego do organizowania dużych projektów

Zadanie 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ółowo

Układy witryn internetowych

Układy witryn internetowych 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym

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

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

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

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

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

Bardziej szczegółowo

Podstawy informatyki

Podstawy informatyki Podstawy informatyki semestr I, studia stacjonarne I stopnia Elektronika rok akademicki 2012/2013 Pracownia nr 5 Edytor tekstu Microsoft Word 2007 mgr inż. Adam Idźkowski Pracownia nr 5 2 Edytor tekstu

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji

Bardziej szczegółowo

5.4. Tworzymy formularze

5.4. Tworzymy formularze 5.4. Tworzymy formularze Zastosowanie formularzy Formularz to obiekt bazy danych, który daje możliwość tworzenia i modyfikacji danych w tabeli lub kwerendzie. Jego wielką zaletą jest umiejętność zautomatyzowania

Bardziej szczegółowo

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

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

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

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

Bardziej szczegółowo

Nawigacja po długim dokumencie może być męcząca, dlatego warto poznać następujące skróty klawiszowe

Nawigacja po długim dokumencie może być męcząca, dlatego warto poznać następujące skróty klawiszowe Zestawienie wydatków rok 2015 1 Wstaw numerację stron. Aby to zrobić przejdź na zakładkę Wstawianie i w grupie Nagłówek i stopka wybierz Numer strony. Następnie określ pozycję numeru na stronie (na przykład

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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

Damian Daszkiewicz 2010 www.damiandaszkiewicz.pl www.videowebmaster.pl. Tworzenie strony-wizytówki dla firmy XYZ

Damian Daszkiewicz 2010 www.damiandaszkiewicz.pl www.videowebmaster.pl. Tworzenie strony-wizytówki dla firmy XYZ Damian Daszkiewicz 2010 www.damiandaszkiewicz.pl www.videowebmaster.pl Tworzenie strony-wizytówki dla firmy XYZ Dokument może być dowolnie rozpowszechniany w niezmiennej formie. Nie możesz pobierać opłat

Bardziej szczegółowo

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

NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA Ćwiczenie 1: Ściągnij plik z tekstem ze strony www. Zaznacz tekst i ustaw go w stylu Bez odstępów. Sformatuj tekst: wyjustowany czcionka Times New Roman

Bardziej szczegółowo

Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych. 8a 3,54 8b 5,25 8c 4,21 8d 4,85

Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych. 8a 3,54 8b 5,25 8c 4,21 8d 4,85 Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych Klasa Średnia 8a 3,54 8b 5,25 8c 4,21 8d 4,85 Do wstawienia wykresu w edytorze tekstu nie potrzebujemy mieć wykonanej tabeli jest ona tylko

Bardziej szczegółowo

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA

EGZAMIN 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ółowo

Formatowanie komórek

Formatowanie komórek Formatowanie komórek Korzystając z włączonego paska narzędziowego Formatowanie możemy, bez szukania dodatkowych opcji sformatować wartości i tekst wpisany do komórek Zmiana stylu czcionki (pogrubienie,

Bardziej szczegółowo

1. Włączamy listę wielopoziomową: rozwijamy trzecią ikonę do włączania list i wybieramy wzór:

1. Włączamy listę wielopoziomową: rozwijamy trzecią ikonę do włączania list i wybieramy wzór: Wskazówki do wykonania Ćwiczenia 2 (Word 2007) ze strony http://logika.uwb.edu.pl/mg/ Wg wzoru praca do wykonania http://logika.uwb.edu.pl/mg/cw2n.pdf Część A. LISTA WIELOPOZIOMOWA Autor: dr Mariusz Giero

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

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

Samouczek edycji dokumentów tekstowych

Samouczek edycji dokumentów tekstowych 1. Różne sposoby zaznaczania tekstu. Najprostszą czynnością, którą możemy wykonać na zaznaczonym tekście, jest jego usunięcie. Wystarczy nacisnąć klawisz Delete lub Backspace. Aby przekonać się, jak to

Bardziej szczegółowo

Podział na strony, sekcje i kolumny

Podział 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ółowo

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

Bardziej szczegółowo

Elementy div i style CSS w praktyce

Elementy div i style CSS w praktyce Elementy div i style CSS w praktyce Włodzimierz Gajda 23 listopada 2005 ver. 0.2 Streszczenie Artykuł omawia kulisy tworzenia strony internetowej wyłącznie w oparciu o elementy div oraz kaskadowe arkusze

Bardziej szczegółowo

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2018 CZĘŚĆ PRAKTYCZNA

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2018 CZĘŚĆ PRAKTYCZNA Arkusz zawiera informacje prawnie chronione do momentu rozpoczęcia egzaminu Układ graficzny CKE 2017 Nazwa kwalifikacji: Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami Oznaczenie

Bardziej szczegółowo

Kurs ECDL Moduł 3. Nagłówek i stopka Microsoft Office Word 2003. Autor: Piotr Dębowski. piotr.debowski@konto.pl

Kurs ECDL Moduł 3. Nagłówek i stopka Microsoft Office Word 2003. Autor: Piotr Dębowski. piotr.debowski@konto.pl Kurs ECDL Moduł 3 Nagłówek i stopka Microsoft Office Word 2003 Autor: Piotr Dębowski piotr.debowski@konto.pl Wolno: Creative Commons License Deed Uznanie autorstwa - Użycie niekomercyjne - Na tych samych

Bardziej szczegółowo

Dokument hipertekstowy

Dokument hipertekstowy Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością

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

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

Ćwiczenia nr 4. Arkusz kalkulacyjny i programy do obliczeń statystycznych

Ćwiczenia nr 4. Arkusz kalkulacyjny i programy do obliczeń statystycznych Ćwiczenia nr 4 Arkusz kalkulacyjny i programy do obliczeń statystycznych Arkusz kalkulacyjny składa się z komórek powstałych z przecięcia wierszy, oznaczających zwykle przypadki, z kolumnami, oznaczającymi

Bardziej szczegółowo

I. Menu oparte o listę

I. Menu oparte o listę I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy

Bardziej szczegółowo

Przygotuj za pomocą tabulatorów element formularza. Utwórz pole tekstowe i sformatuj tak, aby dół napisu w polu był dokładnie nad kropkami.

Przygotuj za pomocą tabulatorów element formularza. Utwórz pole tekstowe i sformatuj tak, aby dół napisu w polu był dokładnie nad kropkami. FORMULARZE POLA TEKSTOWE Pole tekstowe Pole tekstowe kilka wierszy Karta Developer Formanty Formant i pole tekstowe Ćwiczenia Jak wypełnić danymi utworzony w edytorze tekstów formularz? Jak wpisać informacje

Bardziej szczegółowo

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

NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA NAGŁÓWKI, STOPKI, PODZIAŁY WIERSZA I STRONY, WCIĘCIA Ćwiczenie 1: Ściągnij plik z tekstem ze strony www. Zaznacz tekst i ustaw go w stylu Bez odstępów. Sformatuj tekst: wyjustowany czcionka Times New Roman

Bardziej szczegółowo

STOPKA. Redakcja strony Stopka Linki w stopce Link do nowej podstrony Link do strony zewnętrznej... 6

STOPKA. Redakcja strony Stopka Linki w stopce Link do nowej podstrony Link do strony zewnętrznej... 6 STOPKA SPIS TREŚCI Redakcja strony... 2 Stopka... 4 Linki w stopce... 5 Link do nowej podstrony... 5 Link do strony zewnętrznej... 6 Link do strony wewnętrznej... 7 Ikonki w stopce... 9 Stopka to element

Bardziej szczegółowo

Techniki wstawiania tabel

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

Bardziej szczegółowo

Zaprojektuj własny kalendarz na nowy rok szkolny

Zaprojektuj własny kalendarz na nowy rok szkolny Jadwiga Pawluk Warmińsko-Mazurska Biblioteka Pedagogiczna im. Karola Wojtyły w Elblągu Zaprojektuj własny kalendarz na nowy rok szkolny Początek roku szkolnego skłania nas do zaplanowania zajęć na najbliższe

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

Adobe InDesign lab. 2 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Dokument wielostronicowy Książka Eksport do PDF... 7.

Adobe InDesign lab. 2 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Dokument wielostronicowy Książka Eksport do PDF... 7. Spis treści: 1 Dokument wielostronicowy... 2 1.1 Książka... 2 1.2 Eksport do PDF... 7 strona 1 z 7 1 Dokument wielostronicowy Poniższa instrukcja zawiera przykład procedury projektowania dokumentów wielostronicowych

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

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

Jak dodać własny szablon ramki w programie dibudka i dilustro

Jak dodać własny szablon ramki w programie dibudka i dilustro Aby dodać własną ramkę otwórz moduł administracyjny dibudkaadmin.exe, wejdź do zakładki Ramki, tła, id i następnie Edycja. 1. Kliknij przycisk Dodaj ramkę 2. Określ wymiary nowej ramki Jeżeli dodajesz

Bardziej szczegółowo

Przykład 1 wałek MegaCAD 2005 2D przykład 1 Jest to prosty rysunek wałka z wymiarowaniem. Założenia: 1) Rysunek z branży mechanicznej; 2) Opracowanie w odpowiednim systemie warstw i grup; Wykonanie 1)

Bardziej szczegółowo

Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki

Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki Edytory tekstu oferują wiele możliwości dostosowania układu (kompozycji) strony w celu uwypuklenia

Bardziej szczegółowo

Jak zainstalować szablon allegro?

Jak zainstalować szablon allegro? Jak zainstalować szablon allegro? W mailu z zakupionym szablonem otrzymali państwo plik zip z numerem szablonu w nazwie. Należy najpierw go rozpakować. W paczce znajduję się pliki: 1. index[nrszablonu].txt

Bardziej szczegółowo

Języki programowania wysokiego poziomu. CSS Wskazówki

Języki programowania wysokiego poziomu. CSS Wskazówki Języki programowania wysokiego poziomu CSS Wskazówki CSS powinno się projektować hierarchicznie, zaczynając od elementów ogólniejszych, kończąc na szczegółowych - Źle: p.mid { text-align: center; p { color:

Bardziej szczegółowo

Serwis PTF Dodanie informacji bieżącej w podserwisie oddziału

Serwis PTF Dodanie informacji bieżącej w podserwisie oddziału Serwis PTF Dodanie informacji bieżącej w podserwisie oddziału Spis treści 1 Logowanie do panelu redagowania treści 1 2 Uwagi dotyczące panelu administratora 1 3 Dodanie nowej informacji bieżącej 2 4 Redagowanie

Bardziej szczegółowo

Podstawy pozycjonowania CSS

Podstawy pozycjonowania CSS Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"

Bardziej szczegółowo

Pierwsza strona internetowa

Pierwsza 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ółowo

Dodawanie grafiki i obiektów

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

Bardziej szczegółowo

KATEGORIA OBSZAR WIEDZY

KATEGORIA 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ółowo

Czcionki bezszeryfowe

Czcionki 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ółowo

Okna dialogowe ustawień konfiguracyjnych

Okna dialogowe ustawień konfiguracyjnych Zadania z luką 1. Utwórz folder dla nowego ćwiczenia i uruchom moduł JCloze. 2. Kliknij w ikonę by zapisać plik ćwiczenia. Nadaj mu nazwę (najlepiej bez polskich znaków) i zapisz w folderze ćwiczenia.

Bardziej szczegółowo

I. Program II. Opis głównych funkcji programu... 19

I. Program II. Opis głównych funkcji programu... 19 07-12-18 Spis treści I. Program... 1 1 Panel główny... 1 2 Edycja szablonu filtrów... 3 A) Zakładka Ogólne... 4 B) Zakładka Grupy filtrów... 5 C) Zakładka Kolumny... 17 D) Zakładka Sortowanie... 18 II.

Bardziej szczegółowo

1. Proszę wejść na stronę: poczta.home.pl i zalogować się do nowej skrzynki e-mail za pomocą otrzymanych danych.

1. Proszę wejść na stronę: poczta.home.pl i zalogować się do nowej skrzynki e-mail za pomocą otrzymanych danych. 1. Proszę wejść na stronę: poczta.home.pl i zalogować się do nowej skrzynki e-mail za pomocą otrzymanych danych. 2. Po poprawnym zalogowaniu się, przejdziemy do nowej skrzynki. Ważną informacją jest zajętość

Bardziej szczegółowo

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów... Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...

Bardziej szczegółowo

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2018 CZĘŚĆ PRAKTYCZNA

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2018 CZĘŚĆ PRAKTYCZNA Arkusz zawiera informacje prawnie chronione do momentu rozpoczęcia egzaminu Układ graficzny CKE 2017 Nazwa kwalifikacji: Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami Oznaczenie

Bardziej szczegółowo

CMS- kontakty (mapa)

CMS- kontakty (mapa) CMS- kontakty (mapa) Rozpatrzy inny rodzaj kontaktu mapa sytuacyjna. W naszej kategorii kontaktów dodamy teraz multimedialną mapę dojazdową. W tym celu potrzebny nam będzie moduł HTML 1.0. Będziemy mogli

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

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

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2017 CZĘŚĆ PRAKTYCZNA

EGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2017 CZĘŚĆ PRAKTYCZNA Arkusz zawiera informacje prawnie chronione do momentu rozpoczęcia egzaminu Układ graficzny CKE 2016 Nazwa kwalifikacji: Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami Oznaczenie

Bardziej szczegółowo

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Tabele. 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ółowo

netster instrukcja obsługi

netster instrukcja obsługi Spis treści netster instrukcja obsługi Informacje wstępne...2 Logowanie do systemu...2 Widok po zalogowaniu...2 Menu systemu...3 Zarządzanie treścią...3 Treść...5 Przenieś...6 Dodaj podstronę...6 Newsy...7

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

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

Rys.1. Technika zestawiania części za pomocą polecenia WSTAWIAJĄCE (insert)

Rys.1. Technika zestawiania części za pomocą polecenia WSTAWIAJĄCE (insert) Procesy i techniki produkcyjne Wydział Mechaniczny Ćwiczenie 3 (2) CAD/CAM Zasady budowy bibliotek parametrycznych Cel ćwiczenia: Celem tego zestawu ćwiczeń 3.1, 3.2 jest opanowanie techniki budowy i wykorzystania

Bardziej szczegółowo

CSS - layout strony internetowej

CSS - layout strony internetowej www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:

Bardziej szczegółowo

Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów

Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów Europejski Certyfikat Umiejętności Komputerowych. Moduł 3 Przetwarzanie tekstów 1. Uruchamianie edytora tekstu MS Word 2007 Edytor tekstu uruchamiamy jak każdy program w systemie Windows. Można to zrobić

Bardziej szczegółowo

Tworzenie strony www - jako projektu z Mechaniki i budowy maszyn

Tworzenie strony www - jako projektu z Mechaniki i budowy maszyn Tworzenie strony www - jako projektu z Mechaniki i budowy maszyn Program do tworzenia projektu strony - Microsoft SharePoint Designer 2007 Kliknij > aby dowiedzieć się o nowej aplikacji do tworzenia stron

Bardziej szczegółowo

PekaoBIZNES 24 Szybki START. Przewodnik dla Użytkowników z dostępem podstawowym

PekaoBIZNES 24 Szybki START. Przewodnik dla Użytkowników z dostępem podstawowym PekaoBIZNES 24 Szybki START Przewodnik dla Użytkowników z dostępem podstawowym Podręcznik przygotowany na potrzeby wdrożenia systemu w zborach i obwodach Świadków Jehowy ZAWARTOŚĆ PRZEWODNIKA Niniejszy

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

Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku

Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku W swoim folderze utwórz folder o nazwie 29_10_2009, wszystkie dzisiejsze zadania wykonuj w tym folderze. Na dzisiejszych zajęciach nauczymy

Bardziej szczegółowo