Na początek kilka słów wstępu nie tylko na temat samego kursu, ale też podejścia do tworzenia stron internetowych ogólnie.
Kim jest i czym zajmuje się web designer?
Oprócz tego powiemy sobie parę słów o głównym narzędziu, z którym będziemy pracowali podczas kursu, czyli o pakiecie Corela.

Nim przejdziemy do właściwej części naszej pracy, czyli do wykonania projektu strony internetowej, przed nami kilka tematów do omówienia. Na początek skompletujemy potrzebne oprogramowanie.
Do zaprojektowania szaty graficznej serwisu wykorzystamy pakiet CorelDRAW Graphics Suite. Decydując się na korzystanie z tego pakietu, otrzymujemy jednocześnie dwa programy do grafiki: CorelDRAW oraz Corel PHOTO-PAINT.
Jednak dobry web designer nie obejdzie się również bez edytora kodu HTML. Przeanalizujemy rynek tego typu programów, a w czasie kursu będziemy pracowali z edytorem SharePoint Designer. Ostatnia grupa programów, o której porozmawiamy to przeglądarki internetowe. Niezbędne do śledzenia na bieżąco efektów naszej pracy. Przyjrzymy się statystykom i jako naszą główną przeglądarkę, wybierzemy Firefoxa.

W poprzednim rozdziale wybraliśmy oprogramowanie, z którym będziemy pracować w dalszej części kursu, a najważniejsze z nich, oprócz pakietu Corela, to SharePoint Designer.
Edytor HTML wykorzystamy do analizy i modyfikacji kodu wygenerowanego przez Corela, a także do utworzenia strony internetowej od podstaw.
Pobierz już teraz bezpłatny edytor HTML SharePoint Designer, zainstaluj i wstępnie zapoznaj się z jego możliwościami, dzięki trzeciej lekcji tego kursu, którą możesz obejrzeć już teraz.
Podczas trwania kursu, poznasz SharePoint Designera dużo lepiej. To edytor, który wspomaga pracę projektanta stron oferując ogrom ułatwień dla początkujących i nie znających kodu HTML użytkowników, oraz wiele zaawansowanych opcji, gdy nabierzesz już doświadczenia.
SharePoint Designer pracuje także w trybie WYSIWYG (docenią to osoby nieznające kodu HTML) i obsługuje arkusze CSS, z którymi zapoznasz się w dalszej części kursu.
Zobacz ten rozdział już teraz

Pora przygotować nasze środowisko pracy.
Na początek zajmiemy się ustawieniami koloru w CorelDRAW oraz Corelu PHOTO-PAINT.
Dopasujemy ustawienia dostępne dzięki oknu dialogowemu Zarządzanie kolorami z myślą oczywiście o projektowaniu stron WWW. Przyjrzymy się narzędziom, które znajdziesz w nowszych i wcześniejszych wersjach Corela.
Ponadto dokonamy kilku modyfikacji w Corelu PHOTO-PAINT, aby wygodniej nam się pracowało w dalszej części kursu.
W tym rozdziale porozmawiamy także ogólnie o zarządzaniu kolorami w kontekście tworzenia stron. Przyjrzymy się także, co w tym temacie ma do zaoferowania jedna z najpopularniejszych przeglądarek stron internetowych, czyli Firefox.

Zanim przejdziemy do zaprojektowania szaty graficznej w Corelu, przybliżymy sobie kilka zagadnień związanych z językami HTML oraz CSS.
Będzie to kilka tematów ściśle związanych z kodem, które grafik także powinien poznać, ponieważ web designer musi pamiętać, że strona internetowa to grafika oraz kod.
W tym rozdziale także kilka słów teorii: czym jest język HTML, czym XML, a czym XHTML. Ustalimy, w jakiej technologii będziemy projektować i przygotujemy nasz pierwszy, prosty dokument HTML.

W kolejnym rozdziale poświęconym językowi HTML poznasz dokładniej strukturę strony internetowej od strony kodu. Omówimy niezwykle ważny element, jakim jest tzw. deklaracja typu dokumentu. To od niego zależy, w jaki sposób przeglądarki internetowe np. Firefox zinterpretują Twój projekt strony.
Poznasz różne rodzaje deklaracji, ale przede wszystkim ten rozdział pomoże Ci ustalić, którą z nich stosować i dlaczego.
Z deklaracją typu dokumentu związany jest także tryb Quirks. Dowiesz się, co ma wspólnego z wyświetlaniem Twojej strony internetowej.

Drugą część poświęconą strukturze dokumentu HTML rozpoczniemy od poruszenia tematu, który wielu początkującym projektantom sprawia dużo problemów: to poprawne wyświetlanie polskich liter na stronie internetowej.
Aby przybliżyć ten, temat omówimy dwa kluczowe zagadnienia:
— standard kodowania,
— zestaw znaków.
Przyjrzymy się, jak z tymi zagadnieniami radzi sobie typowy edytor HTML, czyli program kED oraz bardziej zaawansowane narzędzie, czyli SharePoint Designer.
Dobrze zaprojektowana strona WWW nie tylko wygląda i działa dobrze, ale jest także przyjazna wyszukiwarkom internetowym. Podczas całego procesu tworzenia, będziemy kładli na to duży nacisk.
Ważnym elementem z punktu widzenia np. Google jest nagłówek <head>. W tym rozdziale dowiesz się, które elementy nagłówka są najistotniejsze, także z punktu widzenia tzw. pozycjonowania.

Nowoczesna strona internetowa składa się z trzech głównych elementów: grafiki, kodu HTML oraz arkuszy stylów kaskadowych, czyli CSS.
Po co grafikowi wiedza na temat stylów kaskadowych?
Style kaskadowe odpowiadają za wygląd elementów HTML. Można zrobić naprawdę estetyczną stronę WWW, w ogóle nie korzystając z programu do tworzenia grafiki, a to właśnie dzięki stylom. Dobry web designer powinien wiedzieć, kiedy korzystać z elementów graficznych, a kiedy z arkuszy stylów. Dobry projekt strony to optymalna współpraca grafiki i CSS, tak więc z tego rozdziału dowiesz się:
— czym są arkusze stylów,
— w jaki sposób dołączać arkusze do dokumentu HTML,
— poznasz rodzaje arkuszy CSS.
Arkusze CSS posiadają kilka cech charakterystycznych, z których najistotniejsze są: kaskadowość i dziedziczenie.
W pierwszej części poświęconej stylom dowiesz się, czym jest kaskadowość.
Ponadto w tym rozdziale będzie także okazja, by przyjrzeć się jednostkom miary stosowanym na stronach WWW: piksel, punkt, em; jednostki względne i bezwzględne. Które są najważniejsze z praktycznego punktu widzenia i z pomocą których definiować rozmiary elementów na stronie internetowej?

Drugą część poświęconą arkuszom rozpoczniemy od zapoznania się, czym jest dziedziczenie. Z pojęciem tym jest także związane tzw. drzewo dokumentu. To schemat ilustrujący zależności pomiędzy elementami dokumentu HTML.
Schemat ten przyda nam się także w dalszej części filmu, ponieważ głównym tematem tego rozdziału będą selektory. Selektor (od angielskiego słowa select, czyli wybór) określa, któremu elementowi przypisany zostanie wygląd z wykorzystaniem atrybutów stylów kaskadowych.
Z arkuszami stylów związanych jest kilka rodzajów selektorów. W tej części poznasz m.in.
— selektory proste,
— selektory potomka,
— selektory braci.

W tym rozdziale kontynuujemy omawianie selektorów.
Do najbardziej użytecznych należą selektory klasy i selektory identyfikatora. A ponadto poznasz dwie wyjątkowe grupy: to pseudoklasy i pseudoelementy. Pierwsze związane są z odnośnikami, drugie z typografią strony internetowej (więcej o typografii w dalszej części kursu).

A kolejne cztery rozdziały, czyli prawie 100 minut materiału, poświęcimy na omówienie tych zagadnień, które mają kluczowe znaczenie dla web designera pracującego z kodem. Poznasz atrybuty języka HTML oraz CSS, mające bezpośredni związek z grafiką.
Aby przygotować dobry layout, czyli w naszym wypadku projekt strony w Corelu PHOTO-PAINT, należy rozumieć, w jaki sposób tworzona jest struktura dokumentu HTML. Chodzi o projektowanie odpowiednich sekcji lub komórek z wykorzystaniem kodu, w których umieszczone zostaną elementy strony internetowej, takich jak grafika czy też tekst.
Jednym ze sposobów tworzenia szkieletu strony jest element DIV.
Poznasz atrybuty znacznika div związanych z jego tworzeniem, wyglądem i pozycjonowaniem, czyli umieszczaniem w wybranym miejscu strony WWW.
Skorzystamy z tzw. ułatwień wizualnych dostępnych w programie SharePoint Designer, aby przyjrzeć się, czym jest pozycjonowanie względne i bezwzględne elementów div.
Na koniec tego rozdziału dowiesz się, jakiego typu layouty możesz tworzyć — chodzi o tzw. pływające oraz sztywne układy stron.

Drugi rozdział poświęcimy osadzaniu grafik w kodzie strony.
Warto wiedzieć, że elementy graficzne nie są częścią kodu HTML; w kodzie umieszczona jest jedynie informacja o lokalizacji obrazka. I tym zajmiemy się w rozdziale 12, a zaczniemy od omówienia jednego z najważniejszych dla grafika elementów języka HTML; chodzi o znacznik <img>, czyli image/obraz.
Poznasz atrybuty elementu <img>, takie jak choćby tekst alternatywny; element ważny również ze względu na pozycjonowanie serwisu w wynikach wyszukiwarek typu Google.
Przyjrzymy się także ułatwieniom, jakie oferuje SharePoint Designer w temacie pracy z obrazkami: osadzanie, pozycjonowanie grafik, omówienie opcji dostępnych na pasku narzędzi Obrazy.
Wspominaliśmy już, że w kodzie strony umieszczona jest jedynie informacja o lokalizacji danego obrazka. To tzw. URL. Warto zapoznać się ze sposobami definiowania adresów URL (dowiesz się, czym są adresy względne i bezwzględne), ponieważ błędnie zdefiniowana ścieżka dostępu wskazująca obrazek oznacza, że dana grafika po prostu nie wyświetli się w oknie przeglądarki.

Kontynuujemy niezwykle istotny dla web designera temat, czyli umieszczanie grafik w kodzie strony.
W tym rozdziale poznasz drugi główny sposób osadzania obrazów, tym razem jako tło strony internetowej.
Omówimy temat wyczerpująco; poświęcimy mu dwie części o łącznym czasie trwania prawie 50 minut.

Projektowanie graficznego tła strony wymaga specyficznej wiedzy i od tego zaczniemy ten rozdział. Praca nad tłem wymaga przemyślanej współpracy grafiki oraz kodu. Cechą charakterystyczną tła jest efekt kafelkowania, ponieważ grafika użyta jako tło jest automatycznie duplikowana. W związku z tym dowiesz się, w jaki sposób projektować elementy graficzne, jakie atrybuty języków HTML oraz CSS ma do dyspozycji grafik i jak tę wiedzę wykorzystać w praktyce.
Najważniejsze atrybuty dotyczą pozycjonowania grafiki oraz sposobów jej powielania; omówimy je wszystkie, np.:
— atrybut background-image,
— atrybut background-repeat,
— atrybut background-position.
Ale wygląd to nie tylko grafika, to także praca z kolorem. W dalszej części tego filmu poznasz sposoby definiowania kolorów na stronach WWW, skupimy się przede wszystkim na tzw. trybie szesnastkowym. Dowiesz się, jak definiować wartości atrybutu background-color.

Druga część poświęcona pracy nad tłem strony internetowej, to część praktyczna. Zobaczysz, w jaki sposób wykorzystać zdobytą w poprzednim rozdziale wiedzę, łącząc grafikę z kodem HTML i CSS.
Podczas projektowanie tła strony powinniśmy brać pod uwagę najważniejszą cechę tego elementu, mianowicie powielanie. Tylko umiejętna praca zarówno z kodem, jak i grafiką zapewniają optymalne rezultaty.
W tym rozdziale zobaczysz, jak przygotowywać grafikę, którą będzie można wykorzystać podczas powielania; pracę ułatwi nam dostępne w internecie, bezpłatne narzędzie. Pomocny będzie także filtr Przesunięcie, który znajdziesz w Corelu PHOTO-PAINT.
Na koniec przyjrzymy się kilku serwisom internetowym, które w ciekawy sposób wykorzystują graficzne tła strony.
Zobacz ten rozdział już teraz

Praktycznie przez cały kurs podkreślamy, jak ważne jest wcześniejsze, staranne zaplanowanie wszystkich elementów serwisu. Wcześniejsze, czyli przed uruchomieniem programu graficznego. Ten i następny rozdział poświęcimy właśnie planowaniu.
Przed przystąpieniem do pracy należy zgromadzić wszystkie potrzebne materiały: logo, zdjęcia, multimedia i tekst. Dopiero wtedy można zaplanować wygląd funkcjonalnej witryny internetowej. Powiemy sobie, na co zwracać szczególną uwagę, aby tworzyć strony przyjazne zarówno użytkownikom, jak i wyszukiwarkom. Jeśli zechcesz projektować strony internetowe na zlecenie, dowiesz się, o czym rozmawiać z potencjalnym zleceniodawcą i co brać pod uwagę podczas wyceny swojej pracy projektanta strony.

Strona internetowa nie spełni swojej funkcji, jeśli nikt nie będzie jej odwiedzał. Co zrobić, aby zwiększyć ilość odwiedzin na stronie?
Jednym ze sposobów jest takie projektowanie strony, aby była ona przyjazna wyszukiwarkom internetowym. Chodzi głównie o wyszukiwarkę Google, która jest zdecydowanie najpopularniejszym narzędziem tego typu, również w Polsce. Wbrew pozorom wszystkie sprawy związane z tzw. pozycjonowaniem również powinniśmy ustalić jeszcze przed rozpoczęciem właściwej pracy nad projektem naszej strony.
O różnych aspektach pozycjonowania będziemy mówić również w dalszej części, bezpośrednio podczas pracy nad stroną, a w tym rozdziale dowiesz się, czym są słowa kluczowe i jak wykorzystywać je w praktyce, przygotowując część tekstową naszego serwisu.
Skorzystamy z pomocy dostępnych w internecie narzędzi.

Czym charakteryzują się nowoczesne strony internetowe?
W tym rozdziale porozmawiamy o tym, co ma wpływ na design i funkcjonalność obecnie projektowanych witryn.
Zobaczymy gdzie w internecie szukać inspiracji, również na przykładzie witryn katalogujących wartościowe, głównie z punktu widzenia designu, strony.

Powoli przechodzimy do właściwego projektowania.
Wcześniej przygotowaliśmy materiały, ustaliliśmy pozycje menu nawigacyjnego, najwyższa więc pora uruchomić Corela.
Właściwą szatę graficzną zaprojektujemy w Corelu PHOTO-PAINT, a zaczniemy od zdefiniowania rozmiarów nowego dokumentu. W przypadku strony WWW ustalenie rozmiarów dokumentu, z którym będziemy pracować, jest trudniejsze, niż definiowanie rozmiaru projektu np. do druku, ponieważ musimy uwzględnić możliwości i potrzeby naszych odbiorców.
Przyjrzymy się dostępnym w internecie statystykom i postaramy się dowiedzieć czegoś więcej o osobach, które będą przeglądały naszą gotową stronę, to pomoże nam przygotować projekt dopasowany do odbiorcy.

Obszar roboczy przygotowany, a kolejne dziewięć rozdziałów poświęcimy wyłącznie na pracę nad szatą graficzną naszej strony.
Jeśli chodzi o kompozycję, to wykorzystamy regułę trójpodziału; przygotujemy siatkę, która pomoże nam w rozmieszczaniu poszczególnych elementów strony. Ponadto wybierzemy motyw główny i zastanowimy się nad kolorystyką strony WWW.
Będziemy pracować głównie w Corelu PHOTO-PAINT, aczkolwiek w dalszych rozdziałach skorzystamy także z pomocy CorelDRAW.
Zobacz ten rozdział kursu, klikając miniaturkę.
Zobacz ten rozdział już teraz

Wszystkie ustalenia za nami — rozpoczynamy pracę nad layoutem strony. Layout to, w uproszczeniu mówiąc, nic innego, jak wygląd naszej strony, jej kolorystyka i rozmieszczenie poszczególnych elementów.
W tym rozdziale umieścimy w dokumencie logo oraz główny motyw strony, czyli motyw dziewczyny.
Porozmawiamy także o kilku pułapkach czekających na projektanta, a związanych z menu oraz z trybami kolorów, czyli CMYK i RGB.
Już teraz rozpocznij projektowanie z tym kursem i zobacz, jak rozpocząć tworzenie grafiki strony WWW.

W tej części rozpoczniemy pracę nad tłem strony.
Wykorzystamy informacje z wcześniejszych rozdziałów, dotyczące tła strony i zaplanujemy takie tło, które po pierwsze będzie dobrze wyglądać na ekranie monitorów o różnych rozdzielczościach, a po drugie będziemy mogli skorzystać z atrybutów związanych z powielaniem.
Kod HTML z gotowej grafiki wygenerujesz z pomocą opcji dostępnych w Corelu, ale warto podczas projektowania zastanowić się, w jakich sytuacjach lepiej dokonywać modyfikacji już w samym kodzie, a w jakim stopniu pozwolić, by zadziałały za nas opcje automatycznego tworzenia dokumentu HTML.
W tym rozdziale rozpoczniemy także pracę nad menu nawigacyjnym.

Przechodzimy do CorelDRAW, ponieważ zajmiemy się wykonaniem ikon menu nawigacyjnego, a z obiektami typu znaki graficzne czy logo dużo wygodniej pracuje się właśnie w CorelDRAW.
Menu oparte na ikonach z symbolami wymaga zdecydowanie większego nakładu pracy, niż proste tekstowe menu, ale wysiłek ten najczęściej się opłaca.
Główne menu naszej strony będzie składało się z czterech ikon, a przyciski oraz symbole na przyciskach wykonamy, tak jak już wspominaliśmy, właśnie w CorelDRAW.

Gotowe, zaprojektowane w CorelDRAW w poprzednim rozdziale ikony menu, zaimportujemy do Corela PHOTO-PAINT.
Oba programy dobrze ze sobą współpracują, więc wymiana danych przebiega bezproblemowo.
Oprócz głównego menu zbudowanego z ikon umieścimy także dodatkowe, już tekstowe, odnośniki prowadzące do mniej naszym zdaniem istotnych podstron.

Kontynuujemy pracę nad menu nawigacyjnym.
Oprócz samych ikon umieścimy także opisy tekstowe, które pomogą internautą jednoznacznie ocenić tematykę podstron, do których będą prowadzić.

Zajmiemy się także dolną częścią tła oraz sekcją przeznaczoną na treść strony głównej.

Ten rozdział poświęcimy na dopracowanie głównego motywu, którym jest postać dziewczyny.
Skupimy się na dolnej części; powinniśmy płynnie połączyć postać z tłem strony. Przygotujemy fragment z motywem betonowego podłoża, który wkomponujemy w tło strony. Zajmiemy się także detalami, np. dodamy ręcznie cienie.

Do zagospodarowania pozostała nam centralna część layoutu.
Do utworzenia tła tej części wykorzystamy jedną z naprawdę wielu tekstur dostępnych zarówno w Corelu PHOTO-PAINT, jak i w CorelDRAW. Wybierzemy wzór, dopasujemy kolor motywu i wkomponujemy w dotychczasowy projekt.
Ponadto wzbogacimy projekt o kilka detali, ponieważ zbliżamy się powoli do końca pracy nad szatą graficzną naszej strony internetowej.

To ostatni rozdział poświęcony tworzeniu projektu graficznego naszej strony.
Pozostał nam jeszcze jeden detal; środkową część layoutu ozdobimy tekstem „Projektowanie graficzne”, aby odwiedzający nasz przyszły serwis, łatwo zorientowali się, co do jego tematyki.
Poeksperymentujemy z efektami dostępnymi w programie CorelDRAW, takimi jak Obrys, Głębia czy Metamorfoza. Gotowy tekst zaimportujemy do PHOTO-PAINT-a i dopracujemy.
W tym rozdziale ukończymy projekt strony.

W poprzednim rozdziale skończyliśmy tworzenie layoutu, ale to oczywiście nie koniec pracy.
Co dalej?
Mamy już grafikę, pora więc na kod HTML strony, ale zanim powrócimy do pracy nad naszym projektem bardzo dokładnie omówimy wszystkie internetowe opcje zarówno PHOTO-PAINTa, jak i CorelDRAW.
A zaczynamy od Corela PHOTO-PAINT.
Na początek dowiesz się, jak dla elementów graficznych definiować odnośniki z wykorzystaniem dokowanego okna Właściwości obiektu.
A w dalszej części rozdziału porozmawiamy o tworzeniu map obrazu.
Czym są mapy obrazu, w jakie narzędzia wyposażony jest Corel, a także jak zapisywać stronę WWW z mapami obrazu.
Pozostałą część tego rozdziału poświęcimy tworzeniu przejść. Przejścia to grupa narzędzi pakietu Corela służąca do automatycznego generowania obrazków typu rollover, czyli grafik zmieniających swój wygląd po najechaniu na nie kursorem.

W tym rozdziale poznasz najważniejsze narzędzie Corela PHOTO-PAINT, pomocne podczas pracy nad stronami WWW. To Kawałkowanie obrazka.
Omówimy wszystkie dostępne opcje, a zaczniemy od tych dostępnych na pasku właściwości.
Linie kawałkowania można definiować w Corelu na kilka sposobów:
— z pomocą narzędzi Pionowy i Poziomy kawałek,
— automatycznie,
— z wykorzystaniem opcji Jednakowe kawałki.
Wybierając narzędzie Kawałkowanie obrazka, do dyspozycji dostajesz także dokowane okno o takiej samej nazwie, czyli Kawałkowanie obrazka. Służy do personalizowania podzielonej grafiki. Możemy obrazkowi nadać nazwę, przydzielić hiperłącze, ale przede wszystkim znajdziesz tutaj opcje, dzięki którym wybierzesz format i jakość każdego kawałka indywidualnie.

Corel PHOTO-PAINT umożliwia automatyczne generowanie kodu HTML. Utworzony kod oparty jest na tabelach, czyli znaczniku <table>, dlatego drugą część tego rozdziału poświęcimy na przyjrzeniu się, czym są tabele. Skorzystamy z pomocy SharePoint Designera, który wyposażony jest w wygodny zestaw narzędzi do pracy z tabelami. Skupimy się przede wszystkim na najważniejszych atrybutach, czyli <rowspan> i <colspan>.
Tabela jest konstrukcją złożoną z wierszy i komórek, a jedną z najtrudniejszych operacji jest ich scalanie. To właśnie temu służą atrybuty <rowspan> i <colspan>.

Przechodzimy powoli do ostatecznego wygenerowania w pełni funkcjonalnej strony WWW.
Zaczniemy od przygotowania obrazka tła w taki sposób, by można było skorzystać z opcji powielania grafiki, czym zajmiemy się w dalszej części.
W tym rozdziale wykorzystamy w praktyce narzędzie Kawałkowanie obrazka, by przygotować linie kawałkowania, które będą dla Corela wskazówkami, w jaki sposób podzielić nasz layout na fragmenty.
Ponadto skorzystamy z opcji tworzenia przejść, by przygotować interakcyjne przyciski menu, które będą zmieniały swój wygląd po najechaniu na nie kursorem.
Rozpoczniemy także omawianie najważniejszych dla grafika zagadnień, czyli tych związanych z formatami i jakością grafiki publikowanej w internecie. Potrzebne opcje znajdziesz w dokowanym oknie Kawałkowanie obrazka.

To najobszerniejszy i jeden z najważniejszych dla grafika rozdział tego kursu. A ważny, ponieważ zapoznasz się dokładnie z formatami graficznymi stosowanymi w internecie.
Web designer ma do dyspozycji trzy główne formaty, w jakich może zapisywać elementy graficzne: jpg, gif, png. Omówimy każdy po kolei, skupiając się na cechach charakterystycznych formatów. Przy okazji poznasz narzędzia Corela służące do pracy z grafiką webową. Od wersji X5 Corel wyposażony jest w nowe narzędzie Eksport dla Internetu, gdzie zgromadzone są praktycznie wszystkie opcje związane z formatami, a także z kodem HTML.
We wcześniejszych wersjach Corela dostępne jest prostsze, ale funkcjonalne narzędzie Optymalizator obrazków dla Internetu. Natomiast we wszystkich wersjach programu znajdziesz dokowane okno Kawałkowanie obrazka, również pomocne podczas pracy z grafiką.
Poznasz takie zagadnienia, jak:
— kompresja,
— podformat,
— palety obrazka,
— symulacja kolorów (dithering).
Ponadto skupimy się na temacie, z którym wielu użytkowników pakietu Corela miewa problemy — chodzi o zapisywanie obrazów z przezroczystymi obszarami. Dowiesz się, jak pracować z tego typu grafikami z pomocą narzędzi dostępnych w X5 i nowszym, a także we wcześniejszych wersjach Corela.
Ale w tym rozdziale przede wszystkim wygenerujemy gotową (grafika plus kod HTML) stronę internetową, korzystając z narzędzi Corela PHOTO-PAINT.

Ukończyliśmy pracę na grafiką strony, w następnych kilku rozdziałach przyjrzymy się, jak wygląda kod HTML utworzony przez Corela PHOTO-PAINT.
Wszelkie opcje automatyzujące dane czynności, takie jak np. wygenerowanie kodu strony są przydatne, ponieważ oszczędzają czas i nie wymagają większej wiedzy, ale z drugiej strony odbywa się to praktycznie zawsze kosztem jakości. Automat nie zawsze jest w stanie w 100% spełnić nasze oczekiwania, dlatego w kolejnych trzech rozdziałach przeanalizujemy kod HTML PHOTO-PAINTA.
Przyjrzymy się nagłówkowi strony, zajmiemy się kodowaniem, znakami specjalnymi i omówimy wpływ deklaracji typu dokumentu (DOCTYPE) na sposób wyświetlania naszej strony.
Będziemy pracowali z edytorem SharePoint Designer, więc poznasz opcje programu np. związane z optymalizacją kodu HTML/XHTML.

Zmodyfikujemy także obrazek tła, który będzie wymagał poprawek z uwagi na wygenerowany kod HTML.

W drugiej części poświęconej pracy z kodem zajmiemy się wyłącznie częścią na treść.
Powrócimy do Corela PHOTO-PAINT, by wygenerować elementy graficzne związane z tym fragmentem strony. Następnie już w SharePoint Designerze przygotujemy kod oparty na elementach DIV i wstawimy przygotowaną wcześniej treść.

Ponadto w tym rozdziale omówimy bardzo ważny temat, jakim jest korzystanie z elementów liniowych oraz blokowych.
Czym są elementy liniowe oraz elementy blokowe, a także czym się różnią.

Kontynuujemy pracę nad częścią tekstową.
Poznasz podstawowe atrybuty związane z formatowaniem tekstu z pomocą języków HTML i CSS, dzięki którym zdefiniujesz krój fonta, jego kolor czy też rozmiar. Zajmiemy się także przygotowaniem i sformatowaniem odnośników, a wykorzystamy w tym celu pseudoklasy.
W tym rozdziale ostatecznie ukończymy naszą stronę główną. Efekt naszej pracy będzie w pełni funkcjonalna strona internetowa, czyli grafika plus kod HTML wraz z formatowaniem CSS.

CorelDRAW Graphics Suite to nie tylko PHOTO-PAINT (choć podczas projektowania stron to właśnie on jest główną aplikacją), ale także CorelDRAW. CorelDRAW również wyposażony jest w pokaźny zestaw opcji i narzędzi związanych z tworzeniem stron WWW.
Od tego rozdziału rozpoczniesz poznawanie właśnie opcji internetowych CorelDRAW.
Głównym tematem tego rozdziału będzie zapisywanie plików Corela do formatu swf, czyli formatu Flash. Opcje związane z tym formatem dostępne są na trzech kartach okna dialogowego Eksport do formatu Flash. Jak zwykle omówimy wszystkie.

Flashowa strona jest generowana w CorelDRAW na bazie dokumentu HTML, który znajduje się w jednym z katalogów programu. Dowiesz się, jak dokonać modyfikacji szablonu, by wprowadzić własne ustawienia.
Zobacz fragment tego rozdziału już teraz.
Zobacz ten rozdział już teraz

Jeżeli pracując w CorelDRAW, klikniesz prawym klawiszem na dowolnym pasku narzędzi, wyświetli się menu, dzięki któremu będzie można aktywować pasek narzędzi Internet. Poznasz wszystkie opcje, które zostały na nim zgromadzone, zarówno we wcześniejszych wersjach programu, jak i od wersji X5.
Pasek narzędzi Internet ułatwia pracę z hiperłączami oraz zakładkami. Element, który funkcjonuje w CorelDRAW jako łącze, wyróżniony jest charakterystyczną czerwoną siatką. Na pasku Internet znajdziesz także garść opcji związanych właśnie z wyglądem aktywnego obszaru.
Najważniejsza grupa opcji zgromadzona została na sześciu kartach okna dialogowego Eksportuj HTML. Dostęp do tego okna również uzyskasz, dzięki paskowi narzędzi Internet. W tym rozdziale rozpoczniemy omawianie wszystkich opcji okna Eksportuj HTML, które związane są z różnymi aspektami gotowej strony WWW, generowanej automatycznie przez CorelDRAW.
Wybierzemy miejsce, w którym program zapisze kod oraz obrazki, w razie potrzeby zdefiniujemy nazwy dla dokumentów HTML, przyjrzymy się także opcjom związanych z generowaniem elementów graficznych (chodzi o wybór formatu).
Ponadto omówimy ustawienia związane z projektowaniem stron, dostępne dzięki Opcjom programu. Polecenie te różnią się zasadniczo w zależności od wersji Corela, omówimy więc zarówno te dostępne od X5, jak i we wcześniejszych wersjach. Opcje związane są z hiperłączami, tekstem na stronie WWW, jak też sposobem dzielenia layoutu.

Kontynuujemy omawianie opcji dostępnych w oknie dialogowym Eksportuj HTML.
W drugiej części skupimy się na tych najważniejszych, do których należy Metoda tworzenia układu HTML. Corel może wygenerować kod strony w oparciu albo o tabele, albo o elementy DIV. W następnych rozdziałach zaprojektujemy stronę i wygenerujemy kod, który utworzony zostanie właśnie z wykorzystaniem znaczników DIV.
Drugi ważny temat, to sposób dołączania arkuszy CSS do kodu strony. Do wyboru mamy kilka opcji dostępnych na karcie Zaawansowane.
Ponadto poznasz okno dokowane Łącza i zakładki.

W tym rozdziale zaprojektujemy w programie CorelDRAW przykładową podstronę serwisu.
Wykorzystamy motywy przygotowane wcześniej, również w Corelu PHOTO-PAINT, a skupimy się na tym aspekcie pracy, który jest mocną stroną CorelDRAW, jeśli chodzi o tworzenie stron WWW — to praca z tekstem. Każdy obiekt tekstowy wykorzystany w projekcie może zachować swój tekstowy charakter po wygenerowaniu kodu (w innych programach tekst zazwyczaj przekształcany jest w obrazek rastrowy). Ta wyjątkowa cecha sprawia, że CorelDRAW znakomicie nadaje się do tworzenia dokumentów, w których dominuje właśnie tekst.

Nim dokończymy naszą podstronę, zajmiemy się tematem nagminnie zaniedbywanym przez początkujących projektantów; chodzi o typografię.
Czym jest typografia?
W tym rozdziale przyjrzymy się przede wszystkim problemom związanym ze stosowaniem fontów na stronach internetowych. Poznasz tzw. zestaw bezpiecznych czcionek, a także dowiesz się, czym są fonty szeryfowe, bezszeryfowe oraz monospace.
Ponadto zajmiemy się atrybutami CSS związanymi z formatowaniem tekstu. Wykorzystamy narzędzia SharePoint Designera do zdefiniowania tzw. rodzin czcionek. Przyjrzymy się także opcjom wygładzania czcionek, a także takim cechom fontów, jak odległości międzyliterowe, czy hinting.
Zobacz ten rozdział już teraz

W drugim rozdziale poświęconym typografii przejdziemy do części praktycznej.
Zwrócimy uwagę przede wszystkim na najczęściej popełniane błędy związane z pracą z tekstem: niepoprawne używanie cudzysłowów oraz myślników. Z tematem tym związane są tzw. encje, które umożliwiają wykorzystywanie na stronach internetowych znaków niedostępnych bezpośrednio z klawiatury.
A wszystkie te tematy omówimy podczas formatowania fragmentu tekstu, który w następnym rozdziale wykorzystamy na naszej podstronie.

W tym rozdziale dokończysz pracę nad podstroną i wygenerujesz gotową stronę HTML.
Zajmiemy się ustawieniem opcji związanych właśnie z generowaniem kodu, a dostępnych w oknie dialogowym Eksportuj HTML.
Sporą część tego rozdziału poświęcimy elementom graficznym, ponieważ opcje automatycznego generowania grafik nie zawsze pozwalają uzyskać zadowalające rezultaty. Zajmiemy się indywidualnym przygotowywaniem obrazków na potrzeby stron WWW.

Podobnie, jak w przypadku strony utworzonej w Corelu PHOTO-PAINT, tak i tym razem przeanalizujemy wygenerowany kod HTML.
Zgodnie z wybraną przez nas wcześniej metodą, CorelDRAW przygotował kod oparty na znaczniku DIV. Znaczniki te są osadzane na stronie z wykorzystaniem atrybutu position-atrybut. Chcemy, aby nasza strona wyświetlała się na środku okna przeglądarki internetowej, wobec czego nie obejdzie się bez ingerencji w kod, gdyż domyślnie nasz serwis umieszczony zostanie przy lewej krawędzi okna przeglądarki.
Przede wszystkim jednak przyjrzymy się najważniejszym problemom, które możemy napotkać podczas pracy z kodem. I oczywiście zobaczymy, jak sobie z nimi radzić. Ponadto zoptymalizujemy kod HTML, dopracujemy tło strony, wycentrujemy serwis i zakończymy pracę nad projektem.

Opcje automatycznego generowania kodu, które znajdziemy w pakiecie Corela, niezwykle ułatwiają pracę, ale wymagający projektant lubi mieć nad wszystkim pełną kontrolę, dlatego sam przygotowuje kod. I to będzie główny temat ostatnich rozdziałów tego kursu
— ręczne przygotowanie kodu HTML.
To będzie także dobra okazja, by w pełni wykorzystać potencjał programu SharePoint Designer. Edytor ten wyposażony jest w ogrom narzędzi, które pozwalają tworzyć całe linijki kodu dosłownie kilkoma kliknięciami (przypominam, że jest to edytor typu WYSIWYG).
Przyjrzymy się, jak tworzyć serwisy wykorzystując opcję Witryna sieci Web SharePoint Designera. To wygodny sposób zarządzania projektem, który oferuje dodatkowe możliwości, jak choćby statystki serwisu, kontrolę osadzonych obrazków oraz poprawność zdefiniowanych hiperłączy.
W pierwszej części uważnie przeanalizujemy layout, zaprojektowany w Corelu PHOTO-PAINT, pod kątem tworzenia kodu. A będziemy pracować ze znacznikami DIV.

Przystępujemy do tworzenia kodu strony.
Jak już wspominaliśmy, wykorzystamy w większym zakresie możliwości SharePoint Designera. Przybornik pomoże nam w wygodny sposób umieszczać sekcje, a wszystkie atrybuty każdego elementu DIV zdefiniujemy, korzystając z okna dialogowego Modyfikowanie stylu. Modyfikowanie stylu to miejsce, w którym zgromadzono praktycznie wszystkie opcje związane z elementem DIV, choć nie tylko. Pozwala kilkoma kliknięciami zdefiniować choćby wymiary każdej sekcji czy sposób otaczania (float).

W tym rozdziale zakończymy pracę nad kodem strony.
Pozostały nam ostatnie sekcje do zdefiniowania, przygotujemy także ikony menu oraz dołączymy do kodu przygotowaną wcześniej część z treścią.
Ręczne utworzenie kodu HTML, takiej strony jak nasza, nie powinno zająć więcej niż 30 minut spokojnej pracy wraz z planowaniem, więc naprawdę warto włożyć troszkę wysiłku i przygotować optymalny kod, zamiast zdawać się na kod generowany automatycznie.

Na koniec powrócimy do opcji związanych z Witryną sieci Web, a następnie skorzystania z narzędzia, które znajduje się pod tym adresem:
https://validator.w3.org/. To tzw. walidator, czyli program sprawdzający poprawność dokumentu, w tym wypadku HTML. Narzędzie przygotowane przez organizację W3 sprawdzi kod naszej strony i wskaże ewentualne błędy.
Pora na krótkie podsumowanie.
Dzięki kursowi „Kompendium projektanta stron internetowych” poznasz praktycznie wszystkie opcje programów PHOTO-PAINT i CorelDRAW związane z tworzeniem stron WWW. Zobaczysz, że strony projektować można na wiele sposób, wykorzystując różne narzędzia. Kod HTML można tworzyć automatycznie lub ręcznie.
Kurs przybliży Ci także informacje związane z językami HTML i CSS, abyś miał pełny obraz tego, co każdy web designer powinien wiedzieć.