JAK ZAPROJEKTOWAĆ WYGLĄD STRONY INTERNETOWEJ W KREATORZE CLICK WEB?

Podobne dokumenty
Zasady tworzenia podstron

Tworzenie własnych treści w kreatorze Click Web

Jak stworzyć własny blog w kreatorze Click Web?

JAK EDYTOWAĆ MULTIMEDIA W KREATORZE CLICK WEB?

DODATKI SPECJALNE DLA GASTRONOMII

Przewodnik... Tworzenie Landing Page

Personalizowanie wirtualnych pokojów

Wszystko o edytowaniu strony głównej

Tworzenie wiadomości Newsletter

Tworzenie wiadomości Follow up

Zadanie 1. Stosowanie stylów

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

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

Tworzenie infografik za pomocą narzędzia Canva

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

I. Spis treści I. Spis treści... 2 II. Kreator szablonów Tworzenie szablonu Menu... 4 a. Opis ikon Dodanie nowego elementu...

Photoshop. Tworzenie tekstu

Wszystko o zarządzaniu stronami w kreatorze Click Web

DODAJEMY TREŚĆ DO STRONY

WORDPRESS INSTRUKCJA OBSŁUGI

Tworzenie prezentacji w MS PowerPoint

Tworzenie nowej kampanii i jej ustawienia

Samouczek edycji dokumentów tekstowych

Dokument zawiera podstawowe informacje o użytkowaniu komputera oraz korzystaniu z Internetu.

UONET+ moduł Dziennik

Laboratorium - Narzędzie linii uruchamiania w systemie Windows Vista

Formatowanie dokumentu

UONET+ moduł Dziennik

Spis treści. Rozdział 2. Graficzna oprawa witryny...z Stosowanie motywu...s...s.. 19

Edytor tekstu MS Word 2010 PL. Edytor tekstu to program komputerowy umożliwiający wprowadzenie lub edycję tekstu.

UONET+ moduł Dziennik

Laboratorium - Narzędzia linii uruchamiania w systemie Windows 7

Po naciśnięciu przycisku Dalej pojawi się okienko jak poniżej,

Podręcznik użytkownika programu. Ceremonia 3.1

Instrukcja obsługi programu Creative Fotos

1.5. Formatowanie dokumentu

Sugestie wyszukiwarki Premium. Aplikacja Shoper Appstore Instrukcja obsługi. zobacz online

Laboratorium - Narzędzia linii uruchamiania w systemie Windows XP

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

Tworzenie płatności. Celem tego dokumentu jest opisanie, jak tworzyć płatności w Business Online włączając:

LibreOffice Impress. Poziom podstawowy. Materiały szkoleniowe

edycja szablonu za pomocą serwisu allegro.pl

Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3

Uczniowie, którzy nie ukończyli szkoły, nie otrzymują świadectwa. Fakt nieukończenia szkoły odnotowuje się jedynie w arkuszu ocen.

Zaprojektuj własny kalendarz na nowy rok szkolny

Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3

UONET+ moduł Dziennik. Praca z rozkładami materiału nauczania

1.Formatowanie tekstu z użyciem stylów

Przewodnik Szybki start

Celem ćwiczenia jest zapoznanie się z podstawowymi funkcjami i pojęciami związanymi ze środowiskiem AutoCAD 2012 w polskiej wersji językowej.

TWORZENIE DANYCH DO DRUKU W PROGRAMIE MICROSOFT POWERPOINT 2013

EDYCJA TEKSTU MS WORDPAD

Edytor tekstu OpenOffice Writer Podstawy

Podstawy tworzenia prezentacji w programie Microsoft PowerPoint 2007

MagicInfo Express instrukcja obsługi

1. Pobierz i zainstaluj program w 3 krokach : 2. Wybierz produkt -> FotoAlbum (Photo Books)

Tworzenie szablonów użytkownika

INSTRUKCJA OBSŁUGI PROGRAMU SENTO DESIGNER

Poradnik instalacyjny sterownika CDC-ACM Dla systemów Windows

INSTRUKCJA OBSŁUGI DIODOWEGO WYŚWIETLACZA TEKSTÓW PIEŚNI STEROWANEGO Z TABLETU 10,1 '

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

MS Office Picture Manager

kolorami komplementarnymi.

CorelDraw - obiekty tekstowe

Creative Photos. program do tworzenia kompozycji fotoksiążek instrukcja instalacji i obsługi

Fragment tekstu zakończony twardym enterem, traktowany przez edytor tekstu jako jedna nierozerwalna całość.

Pokaz slajdów na stronie internetowej

1. Arkusz kalkulacyjny 7

WAŻNE! colour.me Google Fonts tutaj

Oficyna Wydawnicza UNIMEX ebook z zabezpieczeniami DRM

Prezentacja MS PowerPoint 2010 PL.

kolorami komplementarnymi.

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

Jak przygotować i wydrukować strony arkuszy ocen z wynikami klasyfikacji końcowej oraz świadectwa ukończenia szkoły?

Przewodnik po obszarze roboczym

Prezentacje multimedialne w Powerpoint

INSTRUKCJA EDYCJI PROFILU OSOBOWEGO W SERWISIE

Jak posługiwać się edytorem treści

Metaliczny button z deseniem.

Rozdział 1. Wstęp 5. Rozdział 2. Pierwsze kroki 13. Rozdział 3. Podstawy rysunku wektorowego 35

Edytor tekstu MS Word podstawy

Rozdział 2. Konfiguracja środowiska pracy uŝytkownika

Zadanie 3. Praca z tabelami

Wstawianie nowej strony

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

3.7. Wykresy czyli popatrzmy na statystyki

Pracownia internetowa w każdej szkole (edycja Jesień 2007)

Ćwiczenie 5 Animacja tekstu

2 Szkolenia i doradztwo dla pracowników systemu wspomagania oraz wdrożenie kompleksowego wspomagania w zakresie kompetencji kluczowych

Scenariusz lekcji. Scenariusz lekcji. opisać działanie narzędzi przybornika. korzystać z Edytora postaci programu Logomocja;

Formatowanie komórek

Jak dopasować pola szablonu świadectwa, aby na stronie z wynikami klasyfikacji rocznej poprawnie drukowały się długie nazwy przedmiotów?

Ms WORD Poziom podstawowy Materiały szkoleniowe

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

TECHNIKI MULTIMEDIALNE LABORATORIUM GIMP: Projektowanie tła

Budowanie listy Odbiorców

Zadanie 9. Projektowanie stron dokumentu

narzędzie Linia. 2. W polu koloru kliknij kolor, którego chcesz użyć. 3. Aby coś narysować, przeciągnij wskaźnikiem w obszarze rysowania.

Inkscape. Menu. 1 SVG (ang. Scalable Vector Graphics) uniwersalny format dwuwymiarowej, statycznej i

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

Transkrypt:

JAK ZAPROJEKTOWAĆ WYGLĄD STRONY INTERNETOWEJ W KREATORZE CLICK WEB?

Czy można zbudować atrakcyjną stronę WWW w czasie krótkiej przerwy na kawę? W kreatorze Click Web zrobisz to bez trudu. Wystarczy, że poświęcisz 15 minut na wybór ciekawego szablonu strony, dobór jej kolorystyki, ustawienie indywidualnego tła oraz dopasowanie czcionek. W tym przewodniku dowiesz się, jak zaprojektować atrakcyjną stronę w 4 krokach. W przewodniku: Wybierz szablon Dobierz kolorystykę Ustaw tło Dobierz czcionki 2

Krok 1: Wybierz szablon strony Budowę własnej strony rozpocznij od wybrania jej szablonu. W tym celu wejdź w zakładkę Style i wybierz opcję Przeglądaj szablony. Na ekranie pojawi się strona z dostępnymi szablonami: Wybierz szablon najlepiej dostosowany do Twoich potrzeb, następnie kliknij wybrany szablon lewym przyciskiem myszki i zobacz go w pełnym formacie. Jeśli projekt strony przypadnie Ci do gustu, przejdź do edycji szablonu, klikając przycisk Użyj szablonu. W każdej chwili możesz zmienić szablon swojej strony bez utraty treści. Dlatego przy wyborze szablonu nie bój się eksperymentów. W razie potrzeby zawsze możesz wybrać inny szablon. W tym celu ponownie wejdź w zakładkę Style, wybierz opcję Przeglądaj szablony i dalej postępuj według zamieszczonej wyżej instrukcji. 3

Krok 2: Dobierz kolorystykę strony W kreatorze Click Web możesz dowolnie modyfikować układ kolorystyczny swojej strony. W tym celu wejdź w zakładkę Style i wybierz opcję Kolory. W pasku edycji po lewej stronie pojawią się gotowe zestawienia kolorów do wyboru. Na górze białego okna znajduje się aktualnie wykorzystywana kompozycja barw, a poniżej kreski gotowe propozycje innych układów kolorystycznych. Aby wybrać jeden z nich, wystarczy kliknąć go lewym przyciskiem myszki. W razie potrzeby możesz także stworzyć własne zestawienie kolorów. W tym celu kliknij zębatkę w prawym górnym rogu okna barw. Następnie zaznacz edytowaną barwę i wybierz nowy kolor z palety. Aby zakończyć edycję, kliknij przycisk Wróć. 4

Krok 3: Ustaw tło strony W kreatorze Click Web możesz także modyfikować tło strony. Aby to zrobić, wejdź w zakładkę Style i wybierz opcję Tło. Następnie wybierz typ tła z zakładki. Do dyspozycji masz tła w jednolitym kolorze, tła w postaci gradientu oraz tła w postaci obrazów. Jednolite tło ustawisz, wybierając z zakładki opcję Kolor kryjący. Następnie kliknij okienko z barwą i wybierz kolor ze standardowego lub niestandardowego zestawienia barw albo dobierz własny kolor z palety. W tym celu ustaw suwakiem spektrum barw, a następnie lewym przyciskiem myszki zaznacz barwę na palecie. Po zakończeniu edycji zamknij okno Wybór koloru krzyżykiem w prawym górnym rogu, a następnie użyj przycisku Wróć. 5

Kreator Click Web umożliwia również ustawienie tła w postaci gradientu, czyli dwóch kolorów płynnie przechodzących w siebie. Aby to zrobić, wybierz opcję Gradient z zakładki w oknie tła. Następnie dostosuj typ gradientu: barwy mogą przechodzić w siebie w pionie, poziomie albo w okręgu. W kolejnym kroku wybierz kolory, które zostaną użyte w tle Twojej strony kliknij okienko z barwą i dobierz kolor z gotowego zestawienia albo z palety barw. Aby zakończyć dobór kolorów użytych w gradiencie, kliknij krzyżyk w prawym górnym rogu okna Wybór koloru. Po zakończeniu edycji kliknij przycisk Wróć w górnej części paska edycji. 6

W Click Webie możesz także ustawić tło w postaci obrazu. W tym celu wybierz opcję Obraz z zakładki w oknie edycji tła. Następnie użyj przycisku Wybierz obraz i wybierz zdjęcie z folderu, klikając je lewym przyciskiem myszki. Uwaga! Możesz wybierać tylko zdjęcia z wewnętrznego albumu. Aby dodać do niego grafiki z własnego komputera, postępuj według instrukcji z przewodnika nr 4 Tworzenie własnych treści w kreatorze Click Web. W kolejnym kroku dobierz wielkość zdjęcia. Z zakładki Skaluj możesz wybrać opcję Pełen ekran, aby wyświetlić zdjęcie w trybie pełnoekranowym albo opcję Oryginalny rozmiar, aby wyświetlić zdjęcie w niezmienionej wielkości. 7

Z zakładek Poziomo i Pionowo wybierz ustawienie zdjęcia w tle. Dostępne opcje umożliwiają wyrównanie obrazu do lewej, do prawej, do góry, do dołu lub do środka. Aby wybrać ustawienie, wystarczy rozwinąć zakładkę i zaznaczyć wybraną opcję. Click Web dopuszcza również wielokrotne wyświetlanie tego samego zdjęcia w tle. Wystarczy zaznaczyć opcję Powtórzenie w pionie i/lub Powtórzenie w poziomie, aby obraz wyświetlał się zgodnie z jednym z poniższych wzorów: w pionie w poziomie w pionie i w poziomie 8

Krok 4: Dobierz czcionki Click Web oferuje szerokie możliwości edytowania typografii na Twojej stronie. Możesz wybrać krój czcionek dla wszystkich rodzajów tekstów na stronie, określić kolorystykę i wielkość liter, ustawić odstępy pomiędzy wierszami i literami, a także pogrubić lub wycieniować tekst. Aby rozpocząć edycję czcionek, wejdź w zakładkę Style i wybierz opcję Czcionki. W pasku edycji po lewej stronie, pojawi się pełna lista typów tekstów na stronie: Rozpocznij edycję od kliknięcia wybranego rodzaju tekstu lewym przyciskiem myszki. W pasku po lewej stronie pojawią się dostępne opcje edycji. Ich działanie zobaczysz na przykładzie edycji tytułu strony oraz bloku zwykłego tekstu, ale według tych samych zasad przeprowadzisz edycję dowolnego tekstu na stronie. Krój czcionki dobierzesz, rozwijając zakładkę Czcionka. Znajdziesz w niej wszystkie fonty dostępne w kreatorze Click Web. Kliknij wybrany font, aby zmienić czcionkę tekstu 9

W kolejnym kroku możesz zmienić grubość czcionki. W tym celu wybierz opcję pogrubienia albo cieniowania (Light) z zakładki Waga. W razie potrzeby możesz powrócić do oryginalnej grubości czcionki, wybierając opcję Normalny. Ustawienia kolorystyki czcionki dostępne są w okienku Kolor. Aby dobrać barwę, kliknij okienko i wybierz jeden z kolorów ze standardowego zestawienia albo wyszukaj barwę w palecie kolorów. Staraj się dobierać kolory czcionek w taki sposób, aby teksty na Twojej stronie dobrze kontrastowały z tłem. Unikaj jednak stosowania jasnych czcionek na ciemnym tle. Dzięki temu teksty na Twojej stronie nie będą męczyły oczu czytelnika. 10

Rozmiar czcionki ustawisz, wybierając jej wielkość z zakładki Rozmiar. Wystarczy ją rozwinąć i kliknąć wybraną wartość lewym przyciskiem myszki albo wpisać wielkość w okienku. Możesz także modyfikować odstęp pomiędzy literami w wyrazach. W tym celu rozwiń zakładkę Odstęp między literami i wybierz wartość albo wpisz liczbę pikseli w okienku. Wartości dodatnie zwiększają odstęp pomiędzy literami, wartości ujemne sprawiają, że tekst staje się bardziej zbity. Tak jak na poniższych przykładach: -1 px +3 px 11

W przypadku bloków tekstów możesz również ustawić odstęp pomiędzy wierszami. Wystarczy, że rozwiniesz zakładkę Odstęp pomiędzy wierszami i wybierzesz wysokość interlinii, klikając lewym przyciskiem myszki albo wpisując liczbę pikseli w okienku. Domyślna wysokość interlinii w naszym szablonie to 24px. Możesz ją zmniejszyć, wybierając niższą wartość, albo zwiększyć, wybierając wyższą wartość. Tak jak na poniższych przykładach: 18 px 22 px 26 px Po zakończeniu edycji czcionek zapisz zmiany, używając przycisku Zapisz w lewym górnym rogu na pasku po lewej stronie. 12

Przewodniki z serii Click Web Academy 1. Jak zaprojektować wygląd strony internetowej w kreatorze Click Web? 2. Wszystko o edytowaniu strony głównej 3. Zasady tworzenia podstron 4. Tworzenie własnych treści w kreatorze Click Web 5. Jak edytować multimedia w kreatorze Click Web? 6. Twoja strona w mediach społecznościowych 7. Wszystko o dodatkach dla przedsiębiorców 8. Dodatki specjalne dla gastronomii 9. Jak stworzyć własny blog w kreatorze Click Web? 10. Wszystko o zarządzaniu stronami w kreatorze Click Web