Pawel Zakrzewski - Adobe Certified Expert | Adobe Community Expert

CSS Sculptor Page firmy Webassist w praktyce

Jednym z najpoważniejszych problemów z jakim spotyka się niemal każdy początkujący webmaster jest przygotowanie ogólnego layoutu strony WWW za pomocą stylów CSS.

Prawidłowe użycie znaczników div, oraz wielu zaawansowanych właściwości stylów typu float:left, clear:right z pewnością nie należy do najłatwiejszych zadań, szczególnie na początku naszej kariery.

Nie ma co ukrywać ich poprawne użycie i przygotowanie projektu strony zgodnej ze standardem w3.org po prostu wymaga nieco wprawy i doświadczenia.

Zupełnie podobnie wygląda sprawa przygotowaniai prezentacji konkretnej zawartości strony. Prawidłowe użycie znaczników HTML do budowy logicznej (i zgodnej ze standardami) strony oraz późniejsze wykorzystanie stylów CSS w celu atrakcyjnej prezentacji nie jest już może aż tak trudnym zadaniem, jednak dla początkujących stanowi realny problem i wymaga wielu prób i testów.

Naturalnie, spostrzeżenia te nie wynikają jedynie z moich przemyśleń. W codziennej pracy, podczas prowadzenia szkoleń obserwuję początkujących webmasterów i to na tej podstawie mogę naprawdę łatwo wskazać elementy, które sprawiają uczestnikom szkoleń najwięcej problemów.

To właśnie, skłoniło mnie by przyjrzeć się bliżej niezwykle ciekawemu dodatkowi firmy Webassist o tajemniczej nazwie CSS Sculptor Page.

Dodatek ten, dostępny jako extension do programu Adobe Dreamweaver pozwala łatwo zbudować wstępny układ strony na podstawie kilkunastu doskonale przygotowanych szablonów.

Wszystkie szablony przygotowane zostały przez światowej sławy autorytet jakim bez wątpienia jest Eric Meyer, co gwarantuje nie tylko logiczny układ strony ale także pełną zgodność ze standardami jasno sprecyzowanymi przez międzynarodowe organizacje.

Każdy przygotowany za pomocą CSS Sculptor Page szablon, zawiera typowe elementy strony WWW jak na przykład: nagłówki, kolumny, stopkę czy sekcję nawigacyjną a także zestaw stylów CSS odpowiedzialnych za ich wygląd.

Co ważne, automatycznie powstaje tu także dodatkowy arkusz stylów CSS odpowiedzialnych ze wydruk, jakże często pomijany w codziennej pracy.

Najważniejszym atutem tego rozszerzenia jest fakt, że każdy, nawet mniej doświadczony twórca stron WWW jest w stanie zaprojektować i wykonać profesjonalny, zgodny ze standardami, wstępny projekt strony bez dogłębnej znajomości znaczników HTML oraz stylów CSS.

Wszystkie niezbędne ustawienia wprowadzamy w trybie wizualnym co znacznie ułatwia i przyspiesza wybór odpowiednich parametrów. Naturalnie, gotową stronę możemy dowolnie edytować ingerując nie tylko w kod HTML ale także jej style CSS. Otwiera to naprawdę nieograniczone możliwości.

Już nawet kilka tych jedynie wstępnych informacji powoduje, że wyłania nam się obraz przemyślanego i skutecznego rozwiązania wielu naszych problemów jakim bez wątpienia jest CSS Sculptor Page.  Spróbujmy jednak prześledzić jego użycie w kilku praktycznych krokach.

Extension Manager i instalacja

Podobnie jak wiele innych dodatków do webowych narzędzi firmy Adobe (Adobe Flash, Dreamweaver czy Fireworks), CSS Sculptor Page dostępny jest w samodzielnym pliku instalatora z rozszerzeniem .MXP. Jest to tak zwany extension, czyli dodatek do Dreamweavera. Do jego instalacji konieczne jest użycie bezpłatnego narzędzia firmy Adobe jakim jest Adobe Extension Manager.

Sam proces instalacji jest niezwykle prosty, po dwukrotnym kliknięciu w miniaturkę programu (plik z rozszerzeniem .MXP) uruchamia się wspomniany wcześniej Extension Manager. Po akceptacji procesu instalacji nowy dodatek jest już gotowy do użycia.

Z oczywistych powodów, do pierwszego uruchomienia dodatku CSS Sculptor Page konieczne jest wprowadzenie jego numeru seryjnego oraz aktywacja poprzez Internet. Cały proces trwa naprawdę szybko i już po chwili możemy przejść do właściwej pracy.

Tworzymy nową stronę za pomocą CSS Sculptor Page

Już po zainstalowaniu dostęp do rozszerzenia CSS Sculptor Page możliwy jest na kilka różnych sposobów.

Pierwszy to wykorzystanie przycisk CCS Sculptor dostępnego w zakładce Webassist na pasku narzędziowym Insert.

Drugi to wywołanie z menu głównego programu polecenia Insert>Webassist>CSS Sculptor.

Trzeci, bodaj najbardziej intuicyjny – to wykorzystanie polecenia File>New CSS Sculptor Page, który pozwala utworzyć nową stronę WWW podobnie jak każdy typowy dokument Dreamweavera.

Bez względu na sposób uruchomienia dodatku, CSS Sculptor Page wyświetla duże okno dialogowe Eric’s Mayer CSS Sculptor, gdzie łatwo i szybko możemy wskazać niezbędne parametry nowej strony.

W sekcji Choose a design mamy dostęp do dwóch ważnych ustawień:

• Choose a design type – to miejsce, gdzie wskazujemy szablon, jaki chcielibyśmy wykorzystać do budowy nowej strony
• Choose a design – to miejsce, gdzie za pomocą edycji stylów CSS określamy szczegółowy wygląd poszczególnych elementów strony

Niezwykle wygodnym jest fakt, że wszystkie layouty posiadają podgląd widoczny w dolnej sekcji okna. Każda zmiana układu lub stylów od razu widoczna jest na podglądzie. Ułatwia to wybór właściwego szablonu i kolorystyki.

Wydawać by się mogło, że działanie CSS Sculptor Page, ogranicza się jedynie do wyboru powyższych ustawień. Nie jest to jednak prawdą.

Serce dodatku to właśnie edycja i dostosowanie stylów CSS w sekcji Additional options, dostępnej po wyborze odpowiedniego layoutu w sekcji Choose a design type.

W tym miejscu za pomocą przycisku Customize CSS, możemy przejść do kolejnego okna, gdzie za pomocą kilku zakładek i wielu opcji możemy precyzyjnie dostosować wygląd poszczególnych detali naszej strony. Manage Colors pozwala natomiast, perfekcyjnie dostosować kolorystkę wszystkich jej (strony) elementów.
Jeśli nie zależy nam na wprowadzeniu własnych ustawień, proces tworzenia nowej strony na podstawie wybranego layoutu możemy uznać za zakończony.

Za pomocą przycisku Finish zamykamy okno CSS Sculptor i na naszym ekranie automatycznie tworzona jest odpowiednia strona wraz z niezbędnymi arkuszami stylów CSS.

Oczywiście, tak przygotowana strona stanowi jedynie wstęp do budowy właściwego layoutu. Teraz możemy łatwo wprowadzić dodatkowe elementy graficzne, nieco wymedytować istniejące style i perfekcyjnie doprowadzić przygotowany układ do konkretnych potrzeb.

Co ważne, tak przygotowany dokument jest w pełni zgodny ze specyfikacją XHTML Strict, co doskonale świadczy o twórcach dodatku.

Dostosowujemy wygląd strony

Jak już wcześniej wspomniałem, CSS Sculptor Page pozwala nie tylko szybko zbudować prosty szablon strony internetowej ale także za pomocą dodatkowych narzędzie, pozwala precyzyjnie dostroić wygląd i kolorystkę wszystkich jej elementów. Przyjrzyjmy się bliżej jak to działa.

Po wskazaniu szablonu, jaki najbardziej odpowiada naszym potrzebom w oknie edycyjnym CCS Sculptor Page aktywuje się sekcja Additional options. Tu za pomocą przycisku Customize CSS przechodzimy do okna edycji stylów kaskadowych, gdzie w trybie wizualnym możemy dokonać znaczącej edycji wyglądu wybranego szablonu.

Okno edycji wyglądu strony – Eric’s Meyer’s CSS Sculptor – Customize CSS podzielone jest na sześć zakładek:

• Layout – edycja ogólnego wyglądu strony
• Box – edycja wielkości oraz zewnętrznych i wewnętrznych marginesów poszczegól­nych elementów
• Type – edycja atrybutów tekstu (krój pisma, wielkość, kolor czy styl)
• Design – edycja kolorystyki, dodawanie elementów graficznych
• Print – edycja stylów CSS (wtrybiegraficznym) odpowiedzialnych za wygląd strony do druku
• Output – edycja ogólnych zasad zapisu szablonu

Wszystkie wprowadzane zmiany możemy na bieżąco podglądać w oknie Preview po zastosowaniu przycisku Apply.  Tak, z pewnością takie projektowanie wyglądu strony nie powinno nam sprawić żadnych problemów.

W bardzo podobny sposób, za pomocą przycisku Manage Colors wprowadzamy zmiany w kolorystyce całego układu.

W tym miejscu znajdziemy także całkiem ciekawy mechanizm. Możliwe jest wczytanie dowolnej strony WWW, którą chcielibyśmy wykorzystać jako wzorzec kolorystyki dla nowego szablonu.

Co dalej?

Tak przygotowaną stronę możemy z łatwością edytować za pomocą typowych narzędzi Dreamweavera. Naturalnie wszystkie style widoczne są w oknie CSS Style i także one mogą być poddane dowolnej edycji.

Wszystkie style zapisane są automatycznie w dodatkowym folderze naszego site’a i oczywiście muszą być wraz ze stroną przesłane na serwer WWW.

Gotową stronę, możemy bez problemów dostosować do naszych potrzeb. Tam, gdzie to konieczne wprowadzamy dodatkowe elementy graficzne (np. nagłówek strony, nagłówki) oraz oczywiście wypełniamy ją właściwą treścią.

Gotowy dokument możemy przekształcić w szablon, by później na jego podstawie przygotować szybko wszystkie tzw. podstrony serwisu.

Oczywiście przygotowany układ możemy wykorzystać także jako wzorzec do budowy dynamicznych stron WWW tworzonych w oparciu o dokumenty XML lub bazę danych.

Ocena

Pomimo, że nie mam zwykle problemów z tworzeniem własnych układów strony, jestem niezwykle korzystnie zaskoczony łatwością z jaką możemy korzystać z narzędzia CSS Sculptor Page.

Dodatkowy extension doskonale uzupełnia możliwości Dreamweavera i w znaczący sposób przyspiesza nasze prace. Jestem pewien, że w codziennej pracy mogą korzystać z niego nie tylko początkujący użytkownicy. Bogactwo opcji związanych z dostosowaniem layoutu do konkretnych potrzeb może przyspieszyć pracę nawet doświadczonym użytkownikom Adobe dreamweaver.

Dzięki użyciu CSS Sculptor Page możemy tworzyć szybko, wygodnie i co ważne zgodnie ze standardami – to gwarantuje nam Eric Meyer!

Polecam!