Projektowanie Witryn Internetowych

Projektowanie Witryn Internetowych
Technikum EE09 / INF03

Tworzenie projektów graficznych witryn internetowych

Cele ogólne

Uczeń:

Odczytuje projekt strony (brief strony )

omawia zastosowane technologie.

stosuje podstawowe selektory w pliku CSS

rozpoznaje i rozwiązuje najczęściej występujące problemy.

tworzy szablon strony www wg zadanego projektu

dostosowuje styl znacznika <div> w pliku css

definiuje i tworzy plik css

Przydatne narzędzia/oprogramowanie

Wprowadzenie

Projekt graficzny witryny internetowej obejmuje zarówno wykonanie ogólnej struktury graficznej,jak i projektu poszczególnych elementów graficznych, takich jak: przyciski, obrazy, banery logo, linie, avatary czy tekstury.
Ważnym elementem na tym etapie jest równiez określenie palety barw używanych na poszczególnych stronach witryny.
Projekt graficzny strony internetowej często jest określany jako "Layout". Layout można tez zdefiniować jako interfejs obsługi strony internetowej.
Poszczególne elementy graficzne są grupowane w określone bloki, które wspólnie tworzą szablon całej witrynyny. Zwykle projekt graficzny wykonuje się jako część projektu witryny internetowej, zaraz po określeniu struktury logicznej. Do wykonania projektu możemy wykorzystać każdy edytor graficzny np: Adobe Photoshop, GIMP itp.
W naszym przykąłdzie wykonamy projekt graficzny strony głównej witryny Hotelu Chomicz, oferującego wypoczynek nad morzem. Aby poprawnie wykonać taki projekt, powinniśmy postępować według następujących zasad:

Wybór szkieletu szablonu stron według briefu, czyli sposób podziału stron na bloki i ich rozmieszczenie np.:

Wybór gotowych plików. graficznych do przetworzenia na potrzeby strony (zdjęcia, tła, tekstury)

Przykład obrazu źródłowego do projektu strony

Przygotowanie motywu kolorystycznego. Motyw kolorystyczny strony można utworzyć samodzielnie według określonych reguł lub na podstawie związanych ze stroną obrazów.

Przykładowa paleta kolorów stworzona z wczytanego obrazu

Określenie funkcji poszczególnych kolorów w motywie. Przypisujemy barwy do określonych zastosowań, np.;

Projekt poszczególnych elementów gtaficznych, takich jak przyciski, 1ogo, banery itp.

Projekt banera

Przygotowanie tekstu, nazw menu, danych informacyjnych itp.

Wykonanie ogólnego projektu szablonu zawierającego poprzednie elementy.

Zadanie 1

Zaprojektuj strukturę graficzną strony internetowej dla Przedszkola. Przygotuj odpowiednie plioki (index.html, style.css, pliki_graficzne.jpg. Całość strony powinna zawierać /po otwarciu pliku index.html/:

nagłówek

menu poziome

menu i obok tresć strony

stopka

Możesz wzorować się na przykładowej stronie http://www.przedszkole8.wloclawek.pl/

Zadanie 2

Jeszce nie ma zadania

Zadanie 3

Jeszce nie ma zadania

Zadanie 4

Jeszce nie ma zadania

Test wiedzy

		
			Część pisemna egzaminu zawodowego

			1. Layout to określenie właściwe dla 

			A/ interfejsu obsługi strony internetowej.

			B/ motywu barw na stronie internetowej.

			C/ szkieletu szablonu strony internetowej.

			D/ projektu przycisków menu.


			2. Szkielet szablonu strony określa podział witryny, na

			A/ bloki.

			B/ tabele.

			C/ mapy.

			D/ barwy.


			3. Projekt graficzny witryny internetowej można wykonać w programie

			A/ MS Access.

			B/ MS Excel.

			C/ Adobe Photoshop,

			D/ Adobe Reader.


			4. Do elementów graficznych strony internetowej nie zaliczamy

			A/ kodu źródłowego,

			B/ tła strony,

			C/ zdjęcia.

			D/ 1ogo.


			5. Projekt graficzny witryny internetowej wykonujemy po sporządzeniu

			A/ projektu struktury fizycznej. 

			B/ briefu strony internetowej. 

			C/ protokołu odbioru gotowej strony internetowej.

			D/ faktury za projekt końcowy witryny.

Podsumowanie

Przykładowe rozwiązania oraz komentarze do wybranych ćwiczeń i zadań

Rozwiązania do ćwiczeń z tej strony

Ćwiczenie 5 - test

1 --> A; 2 --> A; 3 --> C; 4 --> A; 5 --> B;