WSTĘP FIRMA BA-TARNAS I JEJ IDENTYFIKACJA Profil działalności firmy Logo firmy... 5

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

Download "WSTĘP... 4 1. FIRMA BA-TARNAS I JEJ IDENTYFIKACJA... 5. 1.1. Profil działalności firmy... 5. 1.2. Logo firmy... 5"

Transkrypt

1 SPIS TREŚCI WSTĘP FIRMA BA-TARNAS I JEJ IDENTYFIKACJA Profil działalności firmy Logo firmy Podstawowy pakiet firmowy STRONA INTERNETOWA Multimedia i Internet Założenia i wireframe Layout strony głównej witryny Narzędzia pracy Publikacja strony w Internecie ZAKOŃCZENIE WYKAZ RYCIN BIBLIOGRAFIA

2 WSTĘP Celem niniejszej pracy jest zaprojektowanie i prezentacja identyfikacji wizualnej firmy transportowej ba-trans. Na pakiet firmowy ba-trans składają się: logo, wizytówka, papier firmowy, koperta i strona internetowa. Wszystkie elementy zostały tak zaprojektowane by tworzyły całość. Na pracę składają się dwa rozdziały. W pierwszym z nich przedstawiony jest profil działalności firmy ba-trans; informacje na temat projektowania logo oraz projekt logo firmy ba-trans. W rozdziale znajdują się również projekty: wizytówki, papieru i koperty firmowej. W drugim rozdziale znajdują się rozważania na temat roli multimediów i Internetu we współczesnym świecie. Przedstawiony jest wireframe, layout i kod strony głównej witryny ba-trans oraz omówione są narzędzia wykorzystane podczas tworzenia projektu. Ostatni podrozdział zawiera informacje na temat publikowania strony ba-trans w Internecie. 4

3 1. FIRMA BA-TARNAS I JEJ IDENTYFIKACJA 1.1. Profil działalności firmy Firma ba-trans powstała w 1998 roku. Początkowa była to mała firma, zajmująca się transportem maszyn rolniczych ze Skandynawii do Polski. Inną gałęzią działalności firmy był zakup maszyn rolniczych w Skandynawii i późniejsza sprzedaż sprzętu na polskim rynku. Od roku 2001 firma oprócz ww. działalności zajęła się transportem towarów na terenie kraju. Zlecenia przyjmowała od spedycji i klientów indywidualnych. Od 2005 roku firma ba-trans główny nacisk kładzie na transportmiedzy Polską a Skandynawią, kompleksowe organizowanie transportu nienormatywnego i handel kombajnami zbożowymi. Od początku swojego istnienia firma sukcesywnie powiększała tabor. Obecnie posiada ciągniki oraz naczepy typu platforma, jumbo i tiefbet. Posiadany sprzęt umożliwia transport ładunków specjalnych, ciężkich, ponadnormatywnych i ponadgabarytowych. Nadrzędnym celem firmy ba-trans jest świadczenie usług logistycznych zgodnie z oczekiwaniami klientów. Firma stawia na rzetelność oraz profesjonalizm, w związku z czym, wymaga takiej samej postawy od swoich kontrahentów Logo firmy Firma ba-trans choć istnieje na rynku od trzynastu lat to nie posiada własnej identyfikacji wizualnej. Fundamentem funkcjonowania firmy jest dobra reputacja, która umożliwia rozbudowywanie sieci kontaktów i poszerzanie działalności. Chcąc stać się jeszcze bardziej wiarygodnymi i profesjonalnymi, przedstawiciele firmy zdecydowali się na stworzenie wizualnej identyfikacji czyli ( ) ogółu symboli i zachowań stosowanych w firmie w celu uzyskania czytelnej i spójnej identyfikacji rynkowej i wyróżnienia jej spośród konkurencyjnych marek 1. Pierwszym krokiem do stworzenia identyfikacji wizualnej firmy jest stworzenie logo. Airey David, autor książki pt. Logo Design Love twierdzi, że firma bez logo jest jak człowiek bez twarzy. Logo to graficzny znak towarowy spełniający rolę marketingową oraz informacyjną, poprzez skrótowe, ale łatwo zauważalne i zapamiętywane 1 Benicewicz-Miazga A., Grafika w Biznesie, Helion. Gliwice 2005, s. 9. 5

4 przedstawienie symbolu firmy, instytucji, organizacji lub też jakiejś idei czy pomysłu 2. Podkreśla charakter firmy, a poprzez znak graficzny wywołuje skojarzenie z głównym zakresem jej działalności lub reprezentującą ją ideą 3. Logo składa się z jednej, dwóch, ewentualnie z trzech części. Jednoelementowe logo to znak graficzny lub typografia - w tym znaczeniu znak oparty na topografii. Logo dwuelementowe występuje najczęściej i zbudowane jest ze znaku graficznego i typografii. W skład logo trzyelementowego wchodzą: znak graficzny, typografia i hasło firmowe. W różnych źródłach dotyczących logo pojawia się termin logotyp oznaczający literniczą część znaku firmowego/towarowego. W rzeczywistości, z punktu widzenia etymologii, jest to stwierdzenie niewłaściwe, ponieważ mamy wówczas do czynienia z paradoksem, w którym pojęcie logo powstałe jako skrót od logotypu, staje się dla niego nadrzędne. W obu przypadkach właściwsze jest używanie pojęcia logo jedynie jako synonimu logotypu 4. Ryc Budowa logo, logo z: Por. Benicewicz-Miazga A.., op. cit.,. s

5 Logo zmienia się wraz z firmą. Zmiany wymuszają nowe trendy w projektowaniu graficznym, ale też są niezbędne, jeśli firma zmienia profil swojej działalności lub nazwę. Metamorfozy przechodziły największe światowe marki takie jak Pepsi czy Apple. Ryc Ewolucja logo Pepsi, z: Ryc Ewolucja logo Apple, z:

6 Są też firmy, które stawiają na tradycję i nie zmieniają często swojego logo. Dobrym przykładem jest Coca-Cola, która od początku swojego istnienia znacząco nie zmieniła swojego logo. Ryc Ewolucja logo Coca-Cola, z: Logo firmy ba-trans zbudowane jest z znaku graficznego i typografii. Budowa znaku graficznego oparta jest na kole. Koło znane było we wszystkich kulturach od najdawniejszych czasów. Zastosowane zostało tam, gdzie zachodziła potrzeba transportu na większe odległości. Wykorzystanie koła jako koło jezdne pojawiło się ok lat p.n.e. w Mezopotamii 5. Koło oprócz skojarzeń z transportem nawiązuje do kształtu kuli ziemskiej motywu często używanego w logo firm transportowych. Co więcej: Koło, jako powracająca do siebie samej linia, której wszystkie punkty są równo oddalone od centrum, jest nie tylko najprostszą, ale taż najdoskonalszą figurą, łączy ono najwyższy spokój z napiętą siłą i dlatego stało się obrazowym przedstawieniem pełni i doskonałości 6. Nazwa firmy napisana została fontem bezszeryfowym Century Gothic. Światła miedzy literami b-a, r-a, a-n, n-s zostały wyrównane ręcznie przy pomocy programu Photoshop

7 Logotyp firmy ba-trans w podstawowej wersji występuje w formie barwnej. Użyte kolory to czerwony (C=0% M=99% Y=100% K=0%) i szary (C=0% M=0% Y=0% K=70%). Kolor czerwony pobudza zmysły. Kolor ten wykorzystuje się dla przyciągnięcia uwagi, pokazania dynamiki 7. Zestawiony został z szarym - kolorem stonowanym, ( ) neutralnym i zrównoważonym, a także konserwatywnym 8. Ryc Forma podstawowa logo ba-trans Ryc Kolorystyka logo ba-trans Jeśli nie możliwe jest użycie wersji kolorowej logo, można użyć wersji monochromatycznej 9 czarnej. Wariant achromatyczny służy do wykorzystania w technikach grawerskich, pieczęciach, faksach i wszędzie tam, gdzie niemożliwe jest zastosowanie podstawowej wersji znaku. Ryc Logo ba-trans w wersji monochromatycznej Tamże. 9 Monochromatyczny - jednobarwny, o różnych odcieniach jednego koloru, z:

8 Ryc Logo ba-trans w wersji achromatycznej Ryc Logo ba-trans w wersji achromatycznej negatyw. Podstawowa wersja tła dla logo ba-trans to kolor biały. W sytuacjach wyjątkowych dopuszczalne jest umieszczanie logo na tłach kolorowych. Tła nie powinny być zbliżone w kolorze i nasyceniu do kolorów występujących w logotypie. Logo firmy ba-trans ma drugą wersję, w której znak graficzny i typografia mają zbliżoną wysokość. Ta wersja logo zalecana jest do umieszczania na dokumentach przeznaczonych do druku. Ryc Druga wersja logo ba-trans Pole ochronne określa minimalną odległość znaku od innych elementów graficznych takich jak tekst, zdjęcia, ilustracje czy inne obiekty. Przy ustalaniu pola ochronnego wokół znaku należy posłużyć się jednostką podstawową, za którą przyjmujemy element o krawędzi równej wysokości litery a wchodzącej w skład znaku. Element ten odkładamy prostopadle od najbardziej wysuniętego miejsca z każdej strony znaku. To samo pole ochronne obowiązuje dla wszystkich wersji kolorystycznych znaku. 10

9 Ryc Pole ochronne logo ba-trans 1.3. Podstawowy pakiet firmowy Na podstawowy pakiet firmowy ba-trans składa się wizytówka, papier firmowy i koperta. Wszystkie elementy zostały tak zaprojektowane by tworzyły całość. Charakterystyczne cechy pakietu to zaokrąglone rogi i użycie trzech kolorów białego, czerwonego i szarego. We wszystkich elementach identyfikacji użyto fontu Catriel Regular. Fonty zostały wygładzone metodą Strong w programie Photoshop. Wizytówka to zazwyczaj prostokątny, podręczny kartonik, zapisany treścią zależną od rodzaju wizytówki. Towarzyszy chwilom nawiązywania znajomości, stając się elementem konwenansu. Jest oznaką uprzejmości i szacunku, a współcześnie może też pełnić funkcje reklamowe 10. Dobra wizytówka powinna być prosta w formie, czytelna i oryginalna 11. Wizytówka firmy ba-trans ma formę dwustronną, jej format to 90 x 50 mm. Na stronie frontowej znajduje się logo w drugiej wersji. Pod logo umieszczone są personalia pracowników wraz z danymi teleadresowymi. Po prawej stronie oddzielonej pionową kreską znajdują się trzy wypunktowane hasła opisujące profil działalności firmy, pod nimi umieszczony jest adres strony internetowej firmy ba-trans. Tekst napisany jest fontem Catriel 6pt. Kolor tekstu po lewej stronie pobrany został z logotypu, kolor tekstu po prawej stronie to kolor czerwony ba-trans Por

10 Ryc Wizytówka firmowa, awers i rewers, format 50x90 mm (skala 1:1) Papier firmowy stanowi bazę do tworzenia dokumentów firmowych. Jest jednym z podstawowych elementów identyfikacji wizualnej firmy. Podstawowe elementy, które powinny być zawarte na papierze firmowym to: logo i dane teleadresowe. Na papierze firmy ba-trans o formacie A4, w lewym górnym rogu zostało umieszczone logo w wersji drugiej. W stopce strony znajdują się szczegółowe dane teleadresowe. Tekst w stopce rozbity jest na trzy kolumny, każdą z kolumn wyznacza pionowa kreska. Dane napisane są fontem Catriel 6pt. Lewy margines wynosi 20 mm, górny i dolny 11 mm. Elementy znajdujące się na papierze przylegają do marginesów. 12

11 Ryc Papier firmowy, format A4 (skala 1:1,5) 13

12 Koperta zawarta w pakiecie firmy ba-trans ma format C6/C5 czyli wymiary mm i jest dostosowana do złożenia arkusza A4. Format C6/C5 zawarty jest w Międzynarodowym standardzie ISO 269, który definiuje standardy rozmiarów kopert 12. Na froncie koperty, w lewym górnym rogu, umieszczone są dane teleadresowe firmy napisane fontem Catriel 10pt. Poniżej danych znajduje się logo w wersji drugiej, obrócone w lewo o 90 stopni. Okienko, w którym będą umieszczone dane odbiorcy, znajduje się w prawym, dolnym rogu koperty i ma kształt nawiązujący do kształtu wizytówki posiada dwa zaokrąglone rogi. Marginesy, do których przylegają wymienione elementy, wynoszą: górny, dolny, lewy - 11mm, prawy 20 mm. Tył kopert jest biały, nie zawiera elementów dekoracyjnych. Jedynie po otwarciu klapki z zaokrąglonym rogiem, koperta odsłania swoje czerwone wnętrze. Ryc Koperta firmowa front i tył, format C6/C5 (skala 1:2) 12 Por

13 2. STRONA INTERNETOWA 2.1. Multimedia i Internet Informacja od początku ludzkości odgrywała bardzo ważna rolę. Możliwość komunikowania się, czyli przekazywania informacji, umożliwiła ludziom budowanie kultury. Wydaje się, iż współcześnie znaczenie informacji osiągnęło apogeum. Aktualnie trudno podać coś, co z nią konkuruje i co mogłoby zastąpić jej miejsce. Społeczeństwo ulegające transformacji pod wpływem rosnącej roli informacji, a także wprowadzania do gospodarki wysokich technologii, w tym technologii informacyjno-komunikacyjnych, określone jest wieloma terminami. Jednym z najczęściej używanych nazw jest: społeczeństwo informacyjne. Informacja zyskuje coraz większe znaczenie ekonomiczne w zestawieniu z innymi dobrami materialnymi, jak żywność i wyroby przemysłowe. W perspektywie rozwoju nowo powstającego społeczeństwa globalnej informacji owa głęboka zmiana implikuje inne niż dotąd postrzeganie wiedzy. Ujmuje się ją zatem w kategorii bogactwa, którego odpowiednikiem w społeczeństwach agrarnym i przemysłowym były ziemia i kapitał 13. W związku z powyższym bardzo ważnym aspektem jest dostęp do informacji. Prawo, w większości krajów, gwarantuje obywatelom dostęp do informacji i rzeczywiście media są obecnie coraz łatwiej dostępne To z kolei zrodziło problem natłok różnorodnych informacji spowodował tzw. szum informacyjny czy też smog informacyjny. Ludzie bombardowani są ze wszech stron komunikatami o bardzo zróżnicowanej treści i jakości. Współczesny człowiek musi nauczyć się filtrować informacje. Z drugiej strony, specjaliści od reklamy stają przed pytaniem: jak przebić się w gąszczu informacji? Jak dotrzeć do odbiorcy? Współcześnie do przekazu informacji, wykorzystuje się multimedia czyli media, które łączą różne formy przekazu danych np. tekstu, dźwięku, grafiki, animacji, wideo. Komunikacja odbywa się bardzo często z wykorzystaniem Internetu, czyli ogólnoświatowej sieci komputerowej. Jeżeli nie ma cię w Internecie to znaczy, że nie istniejesz ta myśl robi dużą furorę w przeciągu ostatnich lat. Internet stał się potężnym medium wykorzystywanym w różnych dziedzinach życia, w tym stanowi ważne narzędzie dla reklamy. Wykorzystując globalną sieć firmy budują swój wizerunek, nazywany 13 Wąsiński A., Społeczeństwo Informacyjne - wyzwanie dla pedagogiki mediów, OSBRSW, Poznań 2003, s

14 e-wizerunkiem. E-wizerunek polega na budowaniu dobrej reputacji firmy poprzez wykorzystanie dostępnych narzędzi internetowych. Najbardziej skutecznym sposobem kreowania wizerunku w sieci jest strona internetowa. Według badań przeprowadzonych przez Agencję Interaktywną Centrum Nowej Technologii 60 % użytkowników sieci ocenia przedsiębiorstwa przez pryzmat ich witryn www 14. Firma ba-trans chcą zbudować swój e-wizerunek zleciła zaprojektowanie i opublikowanie swojej strony internetowej. Zgodnie z podstawowymi założeniami, strona internetowa musi być spójna pod względem graficznym z pakietem firmowym Założenia i wireframe Prototypowanie jest ważnym elementem projektowania ( ).Metoda ta polega na opracowaniu prototypu (ang. prototype, mockup) planowanego systemu lub jego części i przedstawianiu jego kolejnych wersji do regularnej oceny przez docelowych użytkowników 15. Jak twierdzą autorzy książki pt. Projektowanie stron www. Użyteczność w praktyce: Prototypowanie to: oszczędność czasu, oszczędność pieniędzy, jedność celów, sposób na wykrycie wielu błędów 16. Prototypowanie to planowanie, które ma na celu usprawnienie procesu konstruowania strony internetowej. Istnieją różne rodzaje prototypów. Jednym z nich jest wykonanie makiety zwanej inaczej wireframe. Makiety to szkice stron i interfejsów, zawierające układ i architekturę informacji 17. Przed wykonaniem makiety należy zebrać informacje od klienta. Etap ten polega na kontakcie lub spotkaniu twarzą w twarz z klientem i poznaniu jego wymagań dotyczących projektu. Kolejny etapem projektowania jest implementacja czyli wykorzystanie w tworzeniu makiety informacji, które pozyskaliśmy od klienta 18. Wireframe można wykonać na kartce papieru, lub programie komputerowym: Photoshop, Kasperski M., Boguska-Torbicz A., Projektowanie stron www. Użyteczność w praktyce, Helion, Gliwice 2008, s Tamże, s Por. Beaird J., Artystyczne projektowanie stron internetowych, Power Net, Lublin 2007, s

15 Illustrator czy PowerPoint. Istnieją też narzędzia przeznaczone stricte do wykonywania wireframe, np. Microsoft Visio, Axure, Pencil Project. Wireframe strony firmy ba-trans powstał w programie Adobe Photoshop. Podstawowe elementy strony to: logo, nawigacja, treść i stopka informacyjna. Elementy ujęte na stronie to także ikony umożliwiające zmienienie wersji językowej oraz grafika umieszczona pod menu. W lewym górnym rogu znajduje się logo firmy ba-trans w wersji podstawowej. Blok dotyczący identyfikacji wizualnej powinien znajdować się na górze każdej strony witryny i zawierać logo lub nazwę firmy. Zwiększa on rozpoznawalność marki i informuje użytkowników, że strony, które przeglądają, są częścią jednej witryny 19. Obok logo, w prawym górnym rogu umieszczone są grafiki pozwalające zmienić język, w jakim wyświetla się tekst na stronie. Pod logo umieszczona jest nawigacja pionowa. Blok nawigacyjny umieszczony jest na górze strony, Konieczne jest, aby łatwo można było znaleźć system nawigacji strony i aby było on prosty w użyciu 20. Po prawej strony menu znajduje się grafika nagłówkowa zgodnie z wymaganiami klienta, jej tematyka musi nawiązywać do charakteru działalności firmy. Pod nawigacją znajduje się grafika nie może ona dominować na stronie, jej kolory mają być stonowane. Pod grafiką nagłówkową umieszczony jest tekst. Użytkownik wchodzi na stronę po informacje zawarte w treści jeśli ich szybko nie znajdzie, wyjdzie szybciej niż wszedł. Aby uniknąć takiej sytuacji, tekst na stronie ba-trans jest dobrze widoczny: napisany ciemnym fontem i umieszczony na jasnym tle. Na dole strony znajduje się stopka, zawierająca informacje na temat praw autorskich i roku powstania strony. Oddzielając końcową zawartość strony od dołu okna przeglądarki, stopka wskazuje użytkownikom, że znaleźli się na końcu strony 21. Ważnym elementem strony jest światło czyli przestrzeń na stronie, która nie jest wypełniona tekstem ani ilustracjami. Światło, prowadząc oko użytkownika po stronie, sprawia, że projekt oddycha, ale także pomaga stworzyć równowagę i jedność ( ) Tamże, s Tamże. 21 Tamze, s Tamże. 17

16 Ryc Wireframe strony firmy ba-trans 2.3. Layout strony głównej witryny Termin layout ma kilka znaczeń. W niniejszej pracy layout rozumiany jest jako szata graficzna publikacji, w skład, której wchodzi rozplanowanie elementów, krój pisma, kolorystyka, układ nagłówka i stopki 23. Layout strony internetowej firmy ba-trans powstał na podstawie wireframe. Kolory dominujące na stronie to czerwony, szary i biały. W topie strony znajduje się logo w wersji podstawowej i łezka, na której znajdują się: flaga Polski i Wielkiej Brytanii. Kliknięcie na flagę powoduje zmianę wersji językowej. Kolor czerwony został pobrany z logo i wypełnia panel nawigacyjny. Font użyty w menu to Verdana 12 pt. Grafika nagłówkowa została pobrana ze strony za zgodą przedstawicieli firmy. Zdjęcie przedstawiające jadącego tira, zostało poddane fotomontażowi zmienione zostało tło i dodano do niego logo firmy ba-trans. 23 Por

17 Pod menu znajduje się grafika z konturami Europy. Motyw ten nawiązuje do charakteru działalności firmy. Obok mapy znajduje się tekst napisany fontem Verdana o rozmiarze 11px. W fazie projektu szkic strony głównej został wypełniony tekstem Lorem Ipsum, po to, aby zademonstrować rozłożenie tekstu na stronie internetowej. Lorem Ipsum jest tekstem stosowanym, jako przykładowy wypełniacz w różnego typu publikacjach. Właściwa wersja strony głównej będzie zawierała informacje na temat działalności firmy. Tło strony wypełnione jest kolorem szarym o kodzie szesnastkowym (HEX) #dcd9d9. Kod szesnastkowy koloru zapisany jest za pomocą znaku # i sześciu liter gdzie dwa pierwsze znaki reprezentują kolor czerwony, dwa środkowe kolor zielony, a pozostałe kolor niebieski. Model odwzorowywania kolorów, który powstał na potrzeby technologii komputerowej, został określony jako RGB to akronim od Red, Green, Blue, czyli podstawowych kolorów, które zostały użyte do mieszania w celu uzyskania pełnej gamy kolorystycznej 24. Witryna internetowa ba-trans, oprócz strony głównej, będzie zawierała pięć podstron o tytułach: Oferta, Tabor, Galeria, Certyfikaty i Kontakt. Elementy niezmienne na wszystkich podstronach to: top strony z logo i flagami, panel nawigacyjny, grafika nagłówkowa i grafika z mapą pod menu. Na poszczególnych podstronach zmieniał się będzie jedynie tekst. W zakładkach Galeria i Certfikaty zostanie on uzupełniony odpowiednią grafiką. Poszczególne podstrony mają na celu: zaprezentowanie pełnego zakresu świadczonych usług; wskazanie taboru, jakim dysponuje firma; wymienienie posiadanych certyfikatów; podanie danych teleadresowych. 24 Kasperski M., Boguska-Torbicz A., Projektowanie stron, s

18 Ryc Layout strony startowej, witryny internetowej firmy ba-trans 2.4. Narzędzia pracy Wireframe i layout witryny ba-trans oraz pakiet firmowy powstały w programie Adobe Photoshop CS5. Photoshop daje użytkownikowi możliwość tworzenia profesjonalnych i niezwykle efektownych projektów, składających się z niemalże nieograniczonej ilości warstw, masek, grafik w wysokiej rozdzielczości, zgrabnie łączonych ze sobą za pośrednictwem szerokiej gamy filtrów i efektów 25. Photoshop to program do tworzenia grafiki rastrowej, czyli takiej w której obraz prezentowany jest za pomocą pionowopoziomej siatki odpowiednio kolorowanych pikseli najmniejszych, jednolitych elementów wyświetlanego obrazu. Logo firmy ba-trans powstało w programie Corel Draw X4 przeznaczonym to tworzenia grafiki wektorowej, czyli takiej w której obrazy tworzone są za pomocą figur geometrycznych a nie pikseli. Grafika wektorowa nie zależy od rozdzielczości, można ją skalować w sposób bezstratny

19 Projekt graficzny witryny został pocięty w programie Photoshop, a następnie strona została zakodowana w języku XHTML i CSS przy użyciu programu Adobe Dreamweaver CS5. XHTML jest aktualnie najczęściej używanym językiem służącym do tworzenia stron WWW. Oba języki są bardzo podobne do siebie, często oba określa się wciąż słowem HTML. Język XHTML to po prostu nowsza, zalecana wersja języka HTML. Kod strony startowej ba-trans znajduje się poniżej. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ba-trans</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body class="ba-trans"> <div id="container"> <div id="header"> <div id="lan"> <a href="#"><img src="images/pl.png" alt="" /></a><a href="#"><img src="images/eng.png" alt="" /></a> </div> </div> <div id="sidebar1"> <div id="menug"> <ul class="menu"> <li class="menu"><a href="#"><img src="images/arrow.png" style="padding-right:10px" alt="" />O FIRMIE</a></li> <li class="menu"><a href="#"><img src="images/arrow.png" style="padding-right:10px" alt="" />OFERTA</a></li> <li class="menu"><a href="#"><img src="images/arrow.png" style="padding-right:10px" alt="" />TABOR</a></li> <li class="menu"><a href="#"><img src="images/arrow.png" style="padding-right:10px" alt="" />GALERIA</a></li> <li class="menu"><a href="#"><img src="images/arrow.png" style="padding-right:10px" alt="" />CERTYFIKATY</a></li> <li class="menu"><a href="#"><img src="images/arrow.png" style="padding-right:10px" alt="" />KONTAKT</a></li></ul></div> <!-- end #sidebar1 --></div> <div id="maincontent"> <div id="foto"> </div> 21

20 <div id="text">lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vitae libero nunc, tempusnunc volutpat aliquam tellus dui non nonummy consequat. Aliquam auctor tortor id nunc. Nulla pellentesque leo. Pellentesque molestie tincidunt. Praesent at ipsum.duis a ante ipsum dolor dictum wisi placerat at, ligula. Mauris vel neque odio ac erat.sed malesuada fames ac libero Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu pretium quis, sem. <br><br><br><br> </div> </div> <br class="clearfloat" /> <div id="footer"> <p>wszelkie prawa zastrzeżone! ba-trans 2011 </p> </div> </div> </body> </html> Powyżej ukazany zarys struktury właściwej części kodu tzn. body. Sekcjom tzw. divom nadawane są znaczniki id, dzięki czemu są one potem odpowiednio opisywane przez przeglądarkę za pomocą CSS czyli kaskadowych arkuszy styli. CSS ( ) to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych 26. CSS nie istnieje samodzielnie lecz w powiązaniu z (X)HTML. HTML jest używany do strukturyzacji treści, natomiast CSS jest używany do formatowania tej treści. Kod CSS strony startowej ba-trans prezentowany jest "utf-8"; body { font-family: Verdana, Arial, Helvetica, sans-serif; background: #dcd9d9; font-size:11px; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; }.ba-trans #container { width: 780px;/* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ text-align: left; /* this overrides the text-align: center on the body element. */

21 }.ba-trans #header { margin: 20px 0 0 0; height:55px; background-image:url(images/logo7.png); background-repeat:no-repeat; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */ }.ba-trans #sidebar1 { float: left; /* since this element is floated, a width must be given */ width: 223px; height:517px; background-image:url(images/menubg3.png); background-repeat:no-repeat; margin-top:30px; }.ba-trans #maincontent { margin: 30px px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #maincontent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */ padding: 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ }.ba-trans #footer { padding: 20px 0 0 0; font-size:10px; color:#999; text-align:right;/* this padding matches the left alignment of the elements in the divs that appear above it. */ }.ba-trans #footer p { margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */ padding: 0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */ }.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; }.fltlft { /* this class can be used to float an element left in your page */ float: left; margin-right: 8px; } 23

22 .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */ clear:both; height:0; font-size: 1px; line-height: 0px; } img {border:0;} #menug {padding:40px; font-size:12px; color:#fff;} #menug li.menu a { background-color:#ec0a0a; background-repeat: no-repeat; color: #fff; display: block; text-decoration: none; border-bottom: solid 1px #fff; } #menug li.menu a:hover { background-color:#f66; background-repeat: no-repeat; color: #fff; display: block; text-decoration: none; border-bottom: solid 1px #fff; } #menug ul.menu { line-height:25px; list-style: none outside none; margin: 0; padding: 0; } #logo{ width:670px;float: left; } #lan {width:90px;float:right; padding-top:5px;} #foto{ background-image:url(images/foto2.png); width:557; height:232px; backgroundrepeat:no-repeat; }#text{background-image:url(images/bg.png); width:557; background-repeat:no-repeat; padding:55px 60px 60px 60px ; line-height:16px;} Do zmiany poszczególnych elementów zdefiniowanych w języku HTML użyte zostały selektory CSS. Do body został przypisany selektor elementu - najważniejszy i zarazem najprostszy sposób nadania stylu dokumentom. Inne selektory użyte w skrypcie to: selektory klas (przed selektorem klas wstawiona jest kropka) i selektory identyfikatorów 24

23 (selektory te są poprzedzone znakiem #). Zarówno klasę jak i identyfikator tworzy się poprzez nadanie mu nazwy, a następnie stosuje się go, dodając do kodu (X)HTML. Podstawowa różnica między klasą, a identyfikatorem jest taka, że identyfikator może być przypisany tylko do jednego znacznika (X)HTML, tylko raz na stronie, a klasa pozwala zastosować takie samo formatowanie do różnych elementów znajdujących się na stronie. W kodzie użyta została również pseudoklasa a:hover, która działa wtedy gdy użytkownik najedzie kursorem na element Publikacja strony w Internecie Kolejnym etapem w pracy nad witryną, po wykonaniu wiraframe, layout, pocięciu i zakodowaniu jest: zredagowanie tekstów, zeskanowanie posiadanych przez firmę certyfikatów oraz wybranie zdjęć do galerii. Gotowe materiały należy umieścić na właściwych podstronach. Kiedy wszystkie elementy będą gotowe strona zostanie opublikowana w Internecie. Aby było to możliwe należy wykupić domenę. Domena to unikalna nazwa (adres) w Internecie, pod którą można umieścić serwis WWW 27. Dobrze dobrana domena powinna pasować do profilu strony WWW oraz działalności przedsiębiorstwa 28. Wnioski z badań, przeprowadzonych przez portal 2be.pl, nad najpopularniejszymi polskimi domenami brzmią: ( ) idealna domena internetowa jest krótka, nie zawiera niepotrzebnych znaków i ma końcówkę.pl 29. Po konsultacjach z reprezentantami firmy ba-trans wybór padł na domenę Wybrana domena nie jest zajęta, w Internecie istnieje tylko batrans.com strona włoskiej firmy transportowej. Na rynku istnieje wiele firmy, które sprzedają domeny przez co wybór najkorzystniejszej oferty jest czasochłonny. Duże firmy takie jak Home.pl czy Nazwa.pl oferują rejestrację domeny nawet za 0zł. Należy jednak zwrócić uwagę na cenę odnowienia domeny w następnym roku, jeśli planujemy utrzymać witrynę dłużej niż rok. Firma ba-trans planuje utrzymać domenę przez wiele lat w związku, z czym istotnym czynnikiem decydującym o wyborze domeny była cena odnowienia domeny. Ww. firmy pobierają opłatę w wysokości ok. 100zł natomiast inne, mniej rozreklamowane firmy Por

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

Podręcznik Identyfikacji Wizualnej

Podręcznik Identyfikacji Wizualnej Podręcznik Identyfikacji Wizualnej 1. ZESTAWIENIE ZNAKÓW 1 Znak RDC występuje w wersji pełnej z dopiskiem: Polskie Radio. Podstawowa wersja znaku składa się z symbolu graficznego RDC. Znak jako podstawowy

Bardziej szczegółowo

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

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

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

GRUPA EXPERTUS KSIĘGA ZNAKU EXPERTUS

GRUPA EXPERTUS KSIĘGA ZNAKU EXPERTUS GRUPA EXPERTUS Firma od 1999 roku specjalizuje się w windykacji i zarządzaniu wierzytelnościami, jednocześnie świadcząc usługi prawne. Wieloletnie doświadczenie oraz profesjonalna obsługa pozwala zapewnić

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

Logo wersja podstawowa logotyp i godło

Logo wersja podstawowa logotyp i godło Logo wersja podstawowa logotyp i godło Logo PARP Logo zawierające godło i akronim (skrót PARP) jest stosowane w większości sytuacji. W szczególności we wszystkich dokumentach obcojęzycznych. Logo zawierające

Bardziej szczegółowo

Księga znaku. Copyright MARR S.A. - Małopolska Agencja Rozwoju Regionalnego S.A. All rights reserved

Księga znaku. Copyright MARR S.A. - Małopolska Agencja Rozwoju Regionalnego S.A. All rights reserved Księga znaku Spis treści 1. Logotyp 1.1 Konstrukcja znaku 1.2 Pole ochronne znaku 1.3 Minimalne wielkości 1.4 Kontra 1.5 Opcjonalne wersje 1.6 Niedozwolone modyfikacje 2. Kolory 1.1 Logotyp - konstrukcja

Bardziej szczegółowo

Księga znaku Swiss Contribution

Księga znaku Swiss Contribution Zasady stosowania znaku 2. Wersja podstawowa znaku 3. Forma i budowa znaku 4. Kolory dla znaku kolorowego i monochromatycznego 5. Liternictwo w znaku 6. Pole ochronne znaku 7. Swiss Contribution w ciągu

Bardziej szczegółowo

PODSTAWOWA KSIĘGA ZNAKU

PODSTAWOWA KSIĘGA ZNAKU MyKulturalni.pl PODSTAWOWA KSIĘGA ZNAKU PODSTAWOWA KSIĘGA ZNAKU 2 Spis zawartości. 3 Znak MyKulturalni.pl 4 Elementy Logo. 5 Elementy dodatkowe. 6 Odmiany Logo. 7 Wersje logo. 8 Kolorystyka. 9 Pole ochronne

Bardziej szczegółowo

Identyfikacja wizualna WĘGLOKOKS KRAJ Sp. z o.o. Luty 2014 r. (wersja 01-2014)

Identyfikacja wizualna WĘGLOKOKS KRAJ Sp. z o.o. Luty 2014 r. (wersja 01-2014) Identyfikacja wizualna WĘGLOKOKS KRAJ Sp. z o.o. Luty 2014 r. (wersja 01-2014) 1. Logo 5 1.1. Logo wersja podstawowa 1.2. Logo wersja pełna 1.3. Logo wersja podstawowa - warianty GKW oraz WCG 1.4. Logo

Bardziej szczegółowo

Krótki przegląd własności języka CSS

Krótki przegląd własności języka CSS Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

księga identyfikacji wizualnej

księga identyfikacji wizualnej księga identyfikacji wizualnej 1.1 opis 1.2 forma podstawowa 1.3 pole podstawowe i pole ochronne 1.4 minimalna wielkość znaku graficznego 1.5 wariant w odcieniach szarości i achromatyczny, zarys 1.6 warianty

Bardziej szczegółowo

PRZEWODNIK IDENTYFIKACJI WIZUALNEJ Niezależnego Zrzeszenia Studentów

PRZEWODNIK IDENTYFIKACJI WIZUALNEJ Niezależnego Zrzeszenia Studentów opracowanie: Tomasz Ryś tomasz.rys@nzs.org.pl +48 55 329 63 współpraca: Jakub Pluta jakub.pluta@nzs.org.pl +48 62 518 356 spis treści znak...3 11 logotyp ogólnopolski...12 21 logotyp jednostki...22 32

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

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

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

PODSTAWOWA KSIĘGA ZNAKU

PODSTAWOWA KSIĘGA ZNAKU PODSTAWOWA KSIĘGA ZNAKU PODSTAWOWA WERSJA ZNAKU Logotyp jest głównym elementem tożsamości wizualnej firmy Centrum Elektronicznych Usług Płatniczych eservice Sp. z o.o.. Logo zbudowane jest z sygnetu oraz

Bardziej szczegółowo

Wprowadzenie MINISTERSTWO NAUKI I SZKOLNICTWA WYŻSZEGO

Wprowadzenie MINISTERSTWO NAUKI I SZKOLNICTWA WYŻSZEGO Księga znaku Wprowadzenie Niniejszy dokument opisuje podstawowe zasady stosowania znaku kampanii Zawód naukowiec oraz prezentuje projekty podstawowych materiałów firmowych. Podręcznik zawiera także wiele

Bardziej szczegółowo

KANCELARIA PRAWNA KSIĘGA ZNAKU EXPERTUS

KANCELARIA PRAWNA KSIĘGA ZNAKU EXPERTUS KANCELARIA PRAWNA Kancelaria Prawna Expertus Widerak & Wspólnicy powstała w wyniku połączenia Działu Prawnego Spółki Expertus oraz Kancelarii Adwokackiej prowadzonej przez adwokata Radosława Wideraka.

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo

2. Prezentacja wizualna

2. Prezentacja wizualna 2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia

Bardziej szczegółowo

BRAND BOOK. Ośrodek Rehabilitacji Jeży Jerzy dla Jeży w Kłodzku

BRAND BOOK. Ośrodek Rehabilitacji Jeży Jerzy dla Jeży w Kłodzku BRAND BOOK Ośrodek Rehabilitacji Jeży Jerzy dla Jeży w Kłodzku IDEA: Konstrukcja logo fundacji Jerzy dla Jeży jest zamierzona w taki sposób, aby łatwo kojarzyła się odbiorcy z przedmiotem działalności,

Bardziej szczegółowo

Identyfikacja Wizualna Pomorskiego Klastra ICT

Identyfikacja Wizualna Pomorskiego Klastra ICT Identyfikacja Wizualna Pomorskiego Klastra ICT Projekt finansowany w ramach Regionalnego Programu Operacyjnego dla Województwa Pomorskiego na lata 2007-2013 Logotyp Wersja podstawowa Godło logotypu oparte

Bardziej szczegółowo

byś cieszył się zielenią

byś cieszył się zielenią motyw Obrazem przewodnim jest napis / nazwa wraz z zielonym elementem ściętej trawy o grubości Wersja podstawowa elementów kroju pisma. Dopuszczalne, w przypadku bardzo małych rozmiarów bądź niemożności

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

Szlak Piastowski. Księga znaku. Spis treści

Szlak Piastowski. Księga znaku. Spis treści Szlak Piastowski Księga znaku Spis treści 02 04 05 06 07 08 09 10 12 13 podstawowa wersja znaku geneza znaku budowa i proporcje pole podstawowe znaku kolorystyka warianty achromatyczne warianty monochromatyczne

Bardziej szczegółowo

księga znaku fundacja równe szanse

księga znaku fundacja równe szanse księga znaku fundacja równe szanse spis treści: znak marki 3 sygnet - konstrukcja 4 logo - wersja podstawowa 5 logo - wymiarowanie 6 logo - skalowanie 7 kolorystyka - wersja pełnokolorowa 8 wersja monochromatyczna

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

1.1 Logotyp. 1.1.1 Logotyp Podstawowa wersja logotypu

1.1 Logotyp. 1.1.1 Logotyp Podstawowa wersja logotypu 1.1 Logotyp 1.1.1 Logotyp Podstawowa wersja logotypu Podstawowe kolory występowania logo to ciemny błękit (100% cyan, 75% magenta), błękit (100%) i biel tła. Logotyp w podstawowej wersji kolorystycznej

Bardziej szczegółowo

Księga znaku SWISSSTANDARDS.PL

Księga znaku SWISSSTANDARDS.PL Księga znaku SWISSSTANDARDS.PL 1 KOLOR SKALA SZAROŚCI WARIANT 1 str. 2 / / str. 3 / / ZNAK POD, WARIANTY str. 4 / / str. 5 / / SKALO str. 6 / / KOLORY DLA KOLOROWEGO, MONOCHROMATYCZNEGO str. 7 / / str.

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

Brand Manual Partner Bank BPH Spis treści

Brand Manual Partner Bank BPH Spis treści Brand Manual Partner Bank BPH Spis treści 1.00 Logo Partner Bank BPH 1.01 Logo podstawowe 1.02 Logo w skali szarości 1.03 Logo w kontrze 1.04 Pole ochronne 1.05 Pole ochronne w przypadku użycia znaku na

Bardziej szczegółowo

System Identyfikacji Wizualnej. opracowany dla ZOO Wrocław sp. z o.o.

System Identyfikacji Wizualnej. opracowany dla ZOO Wrocław sp. z o.o. System Identyfikacji Wizualnej opracowany dla ZOO Wrocław sp. z o.o. 2 System Identyfikacji Wizualnej Spis treści Spis treści 1. Znak firmowy 1.1 Podstawowa forma znaku 1.2 Dopuszczalne formy znaku 1.3

Bardziej szczegółowo

Spis treści. 2.1 Paleta kolorów 2.2 Typografia

Spis treści. 2.1 Paleta kolorów 2.2 Typografia KSIĘGA ZNAKU PORTA Czerwiec 2013 Spis treści 1.1 Znak podstawowy wstęp 1.2 Znak podstawowy pole ochronne 1.3 Znak podstawowy konstrukcja znaku 1.4 Znak podstawowy wersja achromatyczna, monochromatyczna,

Bardziej szczegółowo

PRZEWODNIK IDENTYFIKACJI WIZUALNEJ MARKI

PRZEWODNIK IDENTYFIKACJI WIZUALNEJ MARKI PRZEWODNIK IDENTYFIKACJI WIZUALNEJ MARKI upaid Integrator płatności mobilnych i internetowych, partner MasterCard Mobile. Integrujemy firmy m-commerce i e-commerce, systemy płatności, banki, operatorów

Bardziej szczegółowo

IDENTYFIKACJA WIZUALNA. 17 Wizytówka personalizowana 18 Teczka A4 19 Segregator

IDENTYFIKACJA WIZUALNA. 17 Wizytówka personalizowana 18 Teczka A4 19 Segregator IDENTYFIKACJA WIZUALNA. BRANDBOOK. SPIS TREŚCI WSTĘP 02 Podstawowe informacje LOGOTYP 03 Wersja podstawowa 04 Wersja podstawowa pozioma 05 Wersja monochromatyczna 06 Wersja w odcieniach szarości 07 Pole

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

1.0 POLE OCHRONNE. pole ochronne i jego wyznaczanie

1.0 POLE OCHRONNE. pole ochronne i jego wyznaczanie 1.0 Średnica KOŁA z logotypu CELSIUM wyznacza podstawową jednostkę stosowaną przy pozycjonowaniu logo wewnątrz pola ochronnego. pole ochronne i jego wyznaczanie POLE OCHRONNE POMARAŃCZ Główny kolor SZAROŚĆ

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

Księga Logotypu Marki Radom

Księga Logotypu Marki Radom Księga Logotypu Marki Radom spis treści 1. LOGOTYP 1.01 forma podstawowa 1.02 znak graficzny 1.03 forma podstawowa z hasłem 1.04 forma podstawowa z hasłem w języku angielskim i rosyjskim 1.05 formy uzupełniające

Bardziej szczegółowo

Dokumentacja techniczno-użytkowa Serwis internetowy www.art-dom.cba.pl

Dokumentacja techniczno-użytkowa Serwis internetowy www.art-dom.cba.pl Dokumentacja techniczno-użytkowa Serwis internetowy www.art-dom.cba.pl Projekt i wykonanie Dominika Marzec dominika.marzec@poczta.fm Spis treści 1. Charakterystyka ogólna... 3 2. Domena i hosting... 3

Bardziej szczegółowo

WORDPRESS INSTRUKCJA OBSŁUGI

WORDPRESS INSTRUKCJA OBSŁUGI WORDPRESS INSTRUKCJA OBSŁUGI Zapraszamy do zapoznania się z Instrukcją obsługi panelu CMS Wordpress, która w krótkim czasie i bez większego kłopotu pozwoli na edycję treści i zawartości strony, w tym:

Bardziej szczegółowo

Rada Osiedla Gumieńce

Rada Osiedla Gumieńce Rada Osiedla Gumieńce Logo Rady Osiedla podstawowy wzór logo pole podstawowe i pole ochronne znaku sposób wyznaczania pola ochronnego kolorystyka logo typografia I 2 4 6 8 10 II bilet wizytowy karty grzecznościowe

Bardziej szczegółowo

4. Materiały reklamowe

4. Materiały reklamowe 4. 4.1 Zasady konstrukcji layoutów - grid Nadrzędną, główna zasadą konstruowania przestrzeni poszczególnych projektów graficznych jest modułowy podział parzysty formatu. Wysokość i szerokość medium dzielona

Bardziej szczegółowo

LOGO BUDOWA LOGO. Znak składa się z dwóch części - sygentu zbudowanego z trzech wielkoątów oraz logotypu - typograficznego zapisu nazwy firmy CDA.

LOGO BUDOWA LOGO. Znak składa się z dwóch części - sygentu zbudowanego z trzech wielkoątów oraz logotypu - typograficznego zapisu nazwy firmy CDA. LOGO FIRMOWE LOGO Logo jest głównym elementem identyfikacji wizualnej firmy. Dzięki oryginalnej formie i odpowiedniej kolorystyce jest ono łatwo rozpoznawane i zapamiętywane. BUDOWA LOGO Znak składa się

Bardziej szczegółowo

Spis treści. 3 2. Logo 2.1 Znaczenie. 1. Wstęp. 4 2.2 Budowa. 5 2.3 Kolorystyka. 6 2.4 Obszar ochronny. 7 2.5 Wersja monochromatyczna

Spis treści. 3 2. Logo 2.1 Znaczenie. 1. Wstęp. 4 2.2 Budowa. 5 2.3 Kolorystyka. 6 2.4 Obszar ochronny. 7 2.5 Wersja monochromatyczna Księga znaku Spis treści 1. Wstęp 3 2. Logo 2.1 Znaczenie 4 2.2 Budowa 5 2.3 Kolorystyka 6 2.4 Obszar ochronny 7 2.5 Wersja monochromatyczna 8 2.6 Wersja achromatyczna 9 2.7 Warianty 10 2.8 Minimalna wielkość

Bardziej szczegółowo

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie

Bardziej szczegółowo

Projektowanie aplikacji internetowych. CSS w akcji

Projektowanie aplikacji internetowych. CSS w akcji Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji

Bardziej szczegółowo

KSIĘGA IDENTYFIKACJI WIZUALNEJ. PERSONA Sp z.o.o. - Corporate Guideline 2015

KSIĘGA IDENTYFIKACJI WIZUALNEJ. PERSONA Sp z.o.o. - Corporate Guideline 2015 KSIĘGA IDENTYFIKACJI WIZUALNEJ PERSONA Sp z.o.o. - Corporate Guideline 2015 PERSONA - Księga identyfikacji wizualnej 1. Identyfikacja wizualna 3 2. Podstawowe zasady i konstrukcja znaku 4 3. Pole ochronne

Bardziej szczegółowo

Wzór wizualizacji 1. 1. Zakres informowania odbiorców i stosowania wzoru wizualizacji w projekcie

Wzór wizualizacji 1. 1. Zakres informowania odbiorców i stosowania wzoru wizualizacji w projekcie Wzór wizualizacji 1 1. Zakres informowania odbiorców i stosowania wzoru wizualizacji w projekcie Załącznik nr 6 Zgodnie z 1 ust. 6 każdy Wnioskodawca realizujący projekt w ramach Konkursu dotacji na działania

Bardziej szczegółowo

SPIS TRESCI. Wstęp 1. ZNAK MARKI 2. DRUKI FIRMOWE 3. MATERIAŁY PROMOCYJNE

SPIS TRESCI. Wstęp 1. ZNAK MARKI 2. DRUKI FIRMOWE 3. MATERIAŁY PROMOCYJNE MTB WAŁBRZYCH KSIĘGA IDENTYFIKACJI WIZUALNEJ 2010/2011 SPIS TRESCI Wstęp 1. ZNAK MARKI 2. DRUKI FIRMOWE 3. MATERIAŁY PROMOCYJNE Szanowni Państwo Przedstawiamy zbiór podstawowych elementów Systemu Identyfikacji

Bardziej szczegółowo

System identyfikacji wizualnej

System identyfikacji wizualnej System identyfikacji wizualnej System identyfikacji wizualnej Do SIW zaliczają się wszystkie opcje + oraz przygotowanie do druku* każdego projektu. Projekty: logo +, wizytówka + (awers, rewers), papier

Bardziej szczegółowo

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

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW. Ćwiczenie 2 Kaskadowe arkusze stylów CSS. Budowanie makiety strony i jej modyfikacja dr inż. Robert Banasiak 1 Materiały ćwiczeniowe Wszelkie materiały ćwiczeniowe: wykłady, instrukcje oraz pliki ćwiczeniowe

Bardziej szczegółowo

dlaczego taka osoba miałaby odwiedzić naszą stronę internetową,

dlaczego taka osoba miałaby odwiedzić naszą stronę internetową, Jak powstają strony internetowe - 6 kroków Krok 1 - Definiowanie wymagań nowej witryny Zespół projektowy, wraz z właścicielem witryny, precyzuje wymagania wobec nowej strony internetowej. Oczekiwania właściciela

Bardziej szczegółowo

budowa i zasady użycia logo Fundacji Orange

budowa i zasady użycia logo Fundacji Orange budowa i zasady użycia 1 budowa i kolorystyka 1.1 A B logo Orange deskryptor Podstawowy znak Fundacji Orange składa się z logotypu Orange i deskryptora: Fundacja Orange, umieszczonego z prawej strony.

Bardziej szczegółowo

SYSTEM IDENTYFIKACJI WIZUALNEJ

SYSTEM IDENTYFIKACJI WIZUALNEJ SYSTEM IDENTYFIKACJI WIZUALNEJ SPIS TREŚCI. IDENTYFIKACJA MARKI DRUKI AKCYDENSOWE 1.00 Logo. 1.01 Logo. Forma podstawowa i opis. 1.02 Logo. Forma podstawowa na siatce. 1.03 Logo. Kolorystyka podstawowa

Bardziej szczegółowo

kaskadowe arkusze stylów

kaskadowe arkusze stylów Autor: Marek Buła bulkas@poczta.onet.pl CSS kaskadowe arkusze stylów CASCADING STYLE SHEETS Validator (X)HTML Validator CSS CSS CSS level 1 (1996, 1999) contains properties for fonts, margins, colors,

Bardziej szczegółowo

KSIĘGA IDENTYFIKACJI WIZUALNEJ CORPORATE IDENTITY MANUAL

KSIĘGA IDENTYFIKACJI WIZUALNEJ CORPORATE IDENTITY MANUAL KSIĘGA IDENTYFIKACJI WIZUALNEJ CORPORATE IDENTITY MANUAL Księga znaku firmowego jest nie tylko prezentacją poszczególnych elementów systemu identyfikacji wizualnej, lecz także zbiorem wskazówek, jak należy

Bardziej szczegółowo

Projekty z Technologii Informacyjnych

Projekty z Technologii Informacyjnych Projekty z Technologii Informacyjnych Zad. 1. Opracuj prezentację w programie PowerPoint lub podobnym na zadany temat. Prezentacja powinna być przeznaczona do prezentowania w czasie ok. 10 minut. Zad.

Bardziej szczegółowo

Leonardo da Vinci KSIĘGA IDENTYFIKACJI WIZUALNEJ

Leonardo da Vinci KSIĘGA IDENTYFIKACJI WIZUALNEJ Leonardo da Vinci KSIĘGA IDENTYFIKACJI WIZUALNEJ 1. } logotyp, kolorystyka i typografia } 4 1.1. } logotyp Logotyp jest najważniejszym elementem identyfikacji wizualnej programu Leonardo da Vinci, dlatego

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

SPIS TREŚCI. 1. Opis koncepcji kreatywnej 2. Logotyp

SPIS TREŚCI. 1. Opis koncepcji kreatywnej 2. Logotyp Brandbook 2010 SPIS TREŚCI 1. Opis koncepcji kreatywnej 2. Logotyp logotyp strefa ochronna wersje kolorystyczne kolorystyka użycie logotypu kolor tła minimalne rozmiary siatka modułowa nieprawidłowe użycie

Bardziej szczegółowo

Laboratorium 6 Tworzenie bloga w Zend Framework

Laboratorium 6 Tworzenie bloga w Zend Framework Laboratorium 6 Tworzenie bloga w Zend Framework Przygotowanie bazy danych 1. Wykonaj skrypt blog.sql, który założy w bazie danych dwie tabele oraz wpisze do nich przykładowe dane. Tabela blog_uzytkownicy

Bardziej szczegółowo

Identyfikacja wizualna HUTA ŁABĘDY S.A. Wrzesień 2013 r. (wersja 02-2013)

Identyfikacja wizualna HUTA ŁABĘDY S.A. Wrzesień 2013 r. (wersja 02-2013) Identyfikacja wizualna HUTA ŁABĘDY S.A. Wrzesień 2013 r. (wersja 02-2013) 1. Logo 5 1.1. Logo wersja podstawowa 1.2. Logo wersja pełna 1.3. Logo wersja podstawowa - warianty GKW oraz WCG 1.4. Logo wersja

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

Miejskie Przedsiębiorstwo Komunikacyjne S.A. w Krakowie

Miejskie Przedsiębiorstwo Komunikacyjne S.A. w Krakowie Miejskie Przedsiębiorstwo Komunikacyjne S.A. w Krakowie ZASADY IDENTYFIKACJI WIZUALNEJ FIRMY logo, akcydensy wersja 2009.12 1. Logo - proporcje Logo Miejskiego Przedsiębiorstwa Komunikacyjnego S.A. w Krakowie,

Bardziej szczegółowo

KSIĘGA ZNAKU CBSS POLISH PRESIDENCY 2015-2016

KSIĘGA ZNAKU CBSS POLISH PRESIDENCY 2015-2016 CBSS POLISH PRESIDENC CBSS POLISH PRESIDENC SPIS TREŚCI LOGO OPIS STOSOWANIE ZNAKU JAKO MOTWU GRAFICZNEGO WERSJE LOGO KONSTRUKCJA LOGO WERSJA ANGIELSKA KONSTRUKCJA LOGO WERSJA POLSKA POLE OCHRONNE WERSJA

Bardziej szczegółowo

01. BUDOWA ZNAKU I ROZMIAR MINIMALNY ZNAK LOGOTYP SYGNET. 4 mm / 60px. System identyfikacji wizualnej / Księga znaku

01. BUDOWA ZNAKU I ROZMIAR MINIMALNY ZNAK LOGOTYP SYGNET. 4 mm / 60px. System identyfikacji wizualnej / Księga znaku System identyfikacji identyfikacji wizualnej / Księga znaku wizualnej / Księga znaku 01. BUDOWA ZNAKU I ROZMIAR MINIMALNY ZNAK Znak BPX składa się z sygnetu i części typograficznej - akronimu BPX. Występuje

Bardziej szczegółowo

księga identyfikacji wizualnej

księga identyfikacji wizualnej księga identyfikacji wizualnej LGD Żuławy i Mierzeja. Księga identyfikacji wizualnej A. Elementy bazowe znaku A.1 Znak firmowy: A.1.1 Wprowadzenie............................................. 3 A.1.2 Konstrukcja

Bardziej szczegółowo

Księga znaku Prokuratury Generalnej 2011

Księga znaku Prokuratury Generalnej 2011 Księga znaku Prokuratury Generalnej 2011 autor Katarzyna Bojanowska Spis treści: 1. Forma podstawowa 2. Sygnet 3. Typografia 4. Siatka modułowa 5. Formy uzupełniające 6. Pole ochronne 7. Warianty kolorowe

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

Ochrona znaku przykłady błędnego używania znaku błędna kolorystyka minimalny rozmiar loga

Ochrona znaku przykłady błędnego używania znaku błędna kolorystyka minimalny rozmiar loga Spis tresci 1.0 Znak znak podstawowy budowa znaku konstrukcja symbolu pole ochronne loga Warianty kolorystyczne logo w pełnych kolorach logo monochromatyczne logo na czarnym tle Typografia wykorzystane

Bardziej szczegółowo

Kim jesteśmy, co oferujemy?

Kim jesteśmy, co oferujemy? Kim jesteśmy, co oferujemy? Dual system to firma zajmująca się szeroko rozumianą reklamą oraz marketingiem. Wykonujemy materiały reklamowe zarówno w klasycznej formie drukowanej (np.: wizytówki, ulotki,

Bardziej szczegółowo

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2} Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.

Bardziej szczegółowo

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

WROCŁAWSKA KAMPANIA ROWEROWA system identyfikacji wizualnej. v 03 / 2012

WROCŁAWSKA KAMPANIA ROWEROWA system identyfikacji wizualnej. v 03 / 2012 WROCŁAWSKA KAMPANIA ROWEROWA system identyfikacji wizualnej v 03 / 2012 spis treści logo/2 rozmiar/umiejscowienie/3 zastosowanie/4 otoczenie/5 kolor/6 projekty graficzne/druk/7 1 logo Logo Wrocławskiej

Bardziej szczegółowo

Księga identyfikacji wizualnej Szwajcarsko-Polskiego Programu Współpracy Część 1 - Księga znaku Swiss Contribution

Księga identyfikacji wizualnej Szwajcarsko-Polskiego Programu Współpracy Część 1 - Księga znaku Swiss Contribution Księga identyfikacji wizualnej Szwajcarsko-Polskiego Programu Współpracy Część 1 - Księga znaku Swiss Contribution 2 Zasady stosowania znaku 1. Filozofia znaku 2. Wersja podstawowa znaku 3. Forma i budowa

Bardziej szczegółowo

Spis treści 3 4 4 5 6 7 7 8 8 9 10 10 11 11 12 13-14 15-16 17 17-19 20 21 22 23-24 25 26

Spis treści 3 4 4 5 6 7 7 8 8 9 10 10 11 11 12 13-14 15-16 17 17-19 20 21 22 23-24 25 26 LT-PL-RU 2007-2013 System Identyfikacji Wizualnej 2011 LT-PL-RU 2007-2013 System Identyfikacji Wizualnej 2011 Spis treści Koncepcja plastyczna prezentacji symbolu Określenie kolorystyki znaku graficznego

Bardziej szczegółowo

MIXON OFERTA PROJEKTÓW GRAFICZNYCH. mix.on@outlook.com +48 607 710 944 www.mixon.com.pl Mikołaj Kaczmarczyk - MixON

MIXON OFERTA PROJEKTÓW GRAFICZNYCH. mix.on@outlook.com +48 607 710 944 www.mixon.com.pl Mikołaj Kaczmarczyk - MixON MIXON OFERTA PROJEKTÓW GRAFICZNYCH mix.on@outlook.com +48 607 710 944 www.mixon.com.pl Mikołaj Kaczmarczyk - MixON 1. LOGOTYPY PAKIET PODSTAWOWY 3 projekty logotypów; 5 poprawek wybranego logo; projekt

Bardziej szczegółowo

KSIĘGA IDENTYFIKACJI WIZUALNEJ. znaku promocyjnego Szlaku Zabytków Techniki Katowice 2011 r.

KSIĘGA IDENTYFIKACJI WIZUALNEJ. znaku promocyjnego Szlaku Zabytków Techniki Katowice 2011 r. KSIĘGA IDENTYFIKACJI WIZUALNEJ znaku promocyjnego Szlaku Zabytków Techniki Katowice 2011 r. SPIS TREŚCI 1. ZNAK MARKI 1.1 forma podstawowa 1.2 formy uzupełniające 1.3 budowa i proporcje znaku 1.4 pole

Bardziej szczegółowo

Identyfikacja wizualna Białostockiego Parku Naukowo-Technologicznego

Identyfikacja wizualna Białostockiego Parku Naukowo-Technologicznego Identyfikacja wizualna Białostockiego Parku Naukowo-Technologicznego Przygotowano na zlecenie miasta Białystok na podstawie umowy z dnia 29.07.2011 Autor: Tomasz Miazga Część A. Księga znaku BPN-T A. Księga

Bardziej szczegółowo

ZASADY STOSOWANIA ZNAKU, BUDOWANIA CIĄGU ZNAKÓW PROGRAMU OPERACYJNEGO INFRASTRUKTURA I ŚRODOWISKO

ZASADY STOSOWANIA ZNAKU, BUDOWANIA CIĄGU ZNAKÓW PROGRAMU OPERACYJNEGO INFRASTRUKTURA I ŚRODOWISKO ZASADY STOSOWANIA ZNAKU, BUDOWANIA CIĄGU ZNAKÓW ORAZ PROJEKTOWANIA TABLIC I NAKLEJEK W PROMOCJI PROJEKTÓW PROGRAMU OPERACYJNEGO INFRASTRUKTURA I ŚRODOWISKO Pole podstawowe i pole ochronne znaku Pole podstawowe

Bardziej szczegółowo

REKLAMA INTERNETOWA WYMAGANIA TECHNICZNE

REKLAMA INTERNETOWA WYMAGANIA TECHNICZNE WYMAGANIA TECHNICZNE y form reklamowych dostępnych w serwisach www.gazetaolsztynska.pl i wm.pl SPIS TREŚCI 3 SPIS TREŚCI Zasady ogólne...................................str. 4 1. Baner tradycyjny................................str.

Bardziej szczegółowo

Katalog Systemu Identyfikacji Wizualnej Planetarium

Katalog Systemu Identyfikacji Wizualnej Planetarium Katalog Systemu Identyfikacji Wizualnej Planetarium Planetarium Niebo Kopernika jest najnowocześniejszym tego typu obiektem w Europie. Jako część Centrum Nauki Kopernik jego misją jest rozbudzanie ciekawości

Bardziej szczegółowo

System Identyfikacji Wizualnej Księga znaku

System Identyfikacji Wizualnej Księga znaku Projekt współfinansowany przez Unię Europejską z Europejskiego Funduszu Rozwoju Regionalnego. Fundusze Europejskie dla rozwoju regionu łódzkiego. Projekt pn. Opracowanie Strategii Marki Miasta Bełchatowa

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

Tworzenie Stron Internetowych. odcinek 6

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

Bardziej szczegółowo

Reklama na portalu Świata Przemysłu Farmaceutycznego specyfikacja techniczna

Reklama na portalu Świata Przemysłu Farmaceutycznego specyfikacja techniczna Reklama na portalu Świata Przemysłu Farmaceutycznego specyfikacja techniczna Formy reklamowe: 1. Billboard UP 1100zł netto Graficzny prostokąt reklamowy umieszczony centralnie w górnej części portalu,

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Księga Systemu Identyfikacji Wizualnej Centrum Automatycznego Nadzoru nad Ruchem Drogowym (CANARD)

Księga Systemu Identyfikacji Wizualnej Centrum Automatycznego Nadzoru nad Ruchem Drogowym (CANARD) Księga Systemu Identyfikacji Wizualnej Centrum Automatycznego Nadzoru nad Ruchem Drogowym (CANARD) Projekt współfinansowany przez Unię Europejską ze Środków Europejskiego Funduszu Rozwoju Regionalnego w

Bardziej szczegółowo

Wzór wizualizacji 1. 1. Zakres informowania odbiorców i stosowania wzoru wizualizacji w projekcie

Wzór wizualizacji 1. 1. Zakres informowania odbiorców i stosowania wzoru wizualizacji w projekcie Wzór wizualizacji 1 1. Zakres informowania odbiorców i stosowania wzoru wizualizacji w projekcie Zgodnie z 1 ust. 6 każdy Wnioskodawca realizujący projekt w ramach Konkursu dotacji na działania informacyjno-promocyjne

Bardziej szczegółowo

Krok 1: Stylizowanie plakatu

Krok 1: Stylizowanie plakatu HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

spis treści 02 budowa logo 03 konstrukcja logo 04 pole ochronne 05 kolorystyka 09 występowanie logo na różnych tłach 11 minimalny rozmiar logo

spis treści 02 budowa logo 03 konstrukcja logo 04 pole ochronne 05 kolorystyka 09 występowanie logo na różnych tłach 11 minimalny rozmiar logo księga znaku spis treści 02 budowa logo 03 konstrukcja logo 04 pole ochronne 05 kolorystyka 09 występowanie logo na różnych tłach 11 minimalny rozmiar logo 12 skalowanie 13 typografia, niepoprawne użycie

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

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień. Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać

Bardziej szczegółowo

Identyfikacja wizualna miejskich jednostek organizacyjnych

Identyfikacja wizualna miejskich jednostek organizacyjnych Identyfikacja wizualna miejskich jednostek organizacyjnych Spis treœci 1. Charakterystyka budowy logotypu 1.1 Logotyp 1.1.1 Logotyp /miejsce pochodzenia 1.1.2 Logotyp/rodzina 1.1.3 Logotyp ZZO 1.1. 4 Wersje

Bardziej szczegółowo