Jak zbudować stronę internetową za pomocą Adobe Project Rome
Adobe niedawno uruchomił projekt o nazwie Rzym, który ma być swego rodzaju platformą publikowania treści typu „wszystko w jednym”. Możesz użyć tej innowacyjnej aplikacji do tworzenia stron internetowych, drukowania projektów, interaktywnych plików PDF i innych.
Dzisiaj dam ci podstawowe wprowadzenie do Rzymu dla początkujących, abyś mógł zobaczyć, co to jest, jak go używać i czy jest odpowiedni dla Ciebie.
Rzym
Według słów Adobe, Project Rome to „Proste, wydajne, wszechstronne tworzenie i publikowanie treści dla praktycznie każdego”. Jeśli uważasz, że to trochę niejasne, masz rację. Ale z drugiej strony cały projekt jest trochę zagadkowy. Czy Rzym to przyszłość Photoshopa? Czy to konkurencja dla Dreamweaver czy InDesign?
Odpowiedź jest naprawdę „żadna z powyższych”. Po odrobinie zabawy staje się oczywiste, że Adobe próbuje dotrzeć na inny rynek niż w przypadku pakietu Creative Suite. Podczas gdy CS jest niezwykle drogim zestawem potężnych, profesjonalnych aplikacji, których dogłębna nauka może zająć lata (dekady?), Rzym ma być przyjaznym dla użytkownika sposobem na tworzenie bogatych treści.
Zanim zaczniemy, będziesz musiał zajrzeć na stronę Rzymu i pobrać aplikację komputerową lub uruchomić aplikację internetową (będę używać wersji komputerowej).
Ile to kosztuje?
Rzym jest obecnie dostępny w bezpłatnej wersji zapoznawczej. Adobe najwyraźniej nie zdecydował jeszcze o swojej strategii cenowej i chce zobaczyć, jak użytkownicy reagują przed kontynuowaniem. Możesz pobrać kopię teraz, ale wiedz tylko, że pewnego dnia prawdopodobnie ją dezaktywuje i sprawi, że albo kupisz jednorazową licencję, a może nawet subskrypcję.
Pierwsze kroki
Po pobraniu aplikacji uruchomienie jej powinno spowodować pojawienie się pionowego paska przycisków na pulpicie.
Stąd możesz przeglądać szablony domyślne, a nawet ładną galerię szablonów przesłanych przez użytkowników, ale już wiele się dzieje, więc lepiej jest uczyć się, aby zacząć od zera.
Kliknij przycisk „Utwórz nowy”, aby otworzyć dość dużą galerię możliwych rozmiarów dokumentów. Stąd przejdź do „Pustego ekranu” i wybierz coś z folderu „Rozmiary przeglądarki”. Wybrałem 960 × 550.
Poznaj Rzym: interfejs
Kiedy po raz pierwszy spojrzysz na interfejs Rzymu, wygląda to na bardzo uproszczoną wersję Photoshopa. Zamiast niekończącego się morza palet, jest tylko kilka. W rzeczywistości może się wydawać, że jest zdecydowanie za mało. Jest tak, ponieważ Adobe wydaje się eksperymentować z nowymi pomysłami, które pokazują ci tylko to, co musisz zobaczyć, kiedy musisz to zobaczyć, zamiast dawać ci całą enchiladę naraz.
Powyższy obraz pokazuje, jak czysty jest ekran w porównaniu do tego, do czego jesteśmy przyzwyczajeni w pakiecie Creative Suite. Przyjrzymy się bliżej każdej sekcji poniżej, gdy zagłębimy się w nasz prosty projekt.
Pościel
Witryna, którą zbudujemy, będzie miała kilka stron. Rzym określa je jako „Arkusze” i wyświetla je w lewym górnym rogu z podglądem miniatur.
Pierwszą rzeczą, którą chcemy zrobić, to stworzyć „Arkusz główny”. Pozwoli nam to skonfigurować kilka podstawowych elementów, które pojawią się na każdej stronie. Zamiast ręcznie umieszczać elementy na każdym arkuszu, elementy w arkuszu wzorcowym zostaną automatycznie przeniesione na inne arkusze. Na początku może to być mylące, ponieważ na arkuszu często widzisz element, którego nie możesz edytować. Wynika to z faktu, że chociaż element może pojawić się na tym arkuszu, jest to element główny i dlatego wymaga wybrania arkusza głównego przed edycją.
Aby utworzyć arkusz główny, kliknij „Pokaż arkusze główne” w menu „Widok”. Powinno to podzielić menu arkuszy na dwie sekcje: Arkusze i Arkusze główne. Kliknij mały przycisk plus, aby dodać kilka dodatkowych zwykłych arkuszy. Obok miniatury arkusza jest mała ikona Rzymu, zobaczysz je rozrzucone w interfejsie, wskazując, że jest tu ukryte, kontekstowe menu.
Użyj tego małego menu wysuwanego, aby nazwać swoje arkusze Strona główna, Informacje, Portfolio i Kontakt.
Menu nawigacji
Ponieważ trzymamy to jako proste wprowadzenie do aplikacji, możemy pochwalić się wieloma podstawowymi funkcjami, budując menu nawigacyjne. Aby rozpocząć, chwyć narzędzie tekstowe i narysuj ramkę. Następnie wpisz „Strona główna” i użyj menu pokazanego poniżej, aby wybrać czcionkę, którą lubisz.
Tutaj naprawdę widzisz tę magię menu w akcji. Jest tu mnóstwo opcji menu, każda z zestawem podmenu. Otrzymujesz dużą funkcjonalność bez całego bałaganu. Na pewno przyzwyczajenie się do tego i może być czasochłonne, ale kiedy się zorientujesz, nie jest tak źle. Naprawdę lubię małe suwaki, które można wykorzystać do dostosowania różnych właściwości, takich jak rozmiar czcionki.
Po ustaleniu rozmiaru i czcionki zejdź do menu „Link” i ustaw link do arkusza „Strona główna”.
Spowoduje to automatyczną zmianę wyglądu linku na niebieski z podkreśleniem. Ponieważ nie chcemy żadnego z nich, będziemy musieli to naprawić. Zmiana koloru z powrotem na czarny jest dość łatwa, ale trudniej było znaleźć podkreślenie. Ta opcja znajduje się w menu „Więcej opcji postaci” pokazanym poniżej.
Efekt zawisu
Następnie chcemy zmienić wygląd linku, gdy użytkownik przesuwa się nad nim kursorem. To nie jest do końca intuicyjny proces i zajęło mi kilka minut, aby się zorientować.
Po zaznaczeniu pola tekstowego przejdź do „Ustawień zdarzeń” w menu „Zaawansowane” i aktywuj „Zdarzenia standardowe”.
Powinieneś teraz mieć opcję „Zdarzenia” w menu głównym. Stąd przejdź do „Myszy Enter” i „Ustaw właściwość”. Następnie wybierz obiekt tekstowy i ustaw właściwość Krycie. Na koniec ustaw wartość na 50%.
Spowoduje to przyciemnienie tekstu do 50% jego pierwotnego krycia, gdy ktoś najedzie na niego kursorem. Chciałbym po prostu ustawić kolor, ale opcja ta nie pojawia się w menu wydarzeń.
Problem, który teraz napotykamy, polega na tym, że tekst zmieni kolor w Mysz Enter, ale pozostanie w ten sposób na stałe. Aby rozwiązać ten problem, musimy dodać kolejne wydarzenie na wyjściu myszy, które ustawia krycie z powrotem na 100%. Zobacz zdjęcie poniżej w celach informacyjnych.
Duplikowanie łącza do strony domowej
Teraz, gdy mamy pierwszy skonfigurowany link tak, jak chcemy, skopiuj go i wklej trzy razy, aby utworzyć linki Informacje, Portfolio i Kontakt. Pamiętaj, że musisz wybrać tekst dla każdego, a następnie wejść i zmienić linki, aby wskazywały odpowiednie arkusze.
Będziesz także chciał rozmieścić obiekty w pionie, aby upewnić się, że są równomiernie rozmieszczone. Aby to zrobić, zaznacz wszystkie pola tekstowe i przejdź do menu Wyrównaj.
Podgląd pracy
Aby sprawdzić, czy menu nawigacyjne działa poprawnie, kliknij mały przycisk monitora z przyciskiem odtwarzania w górnej części ekranu. To powinno dać ci podgląd na żywo twojej strony w akcji.
Najedź kursorem na linki, aby upewnić się, że działają, i kliknij, aby sprawdzić, czy arkusz się zmienia.
Paleta obiektów
Teraz, gdy masz już kilka elementów na stronie, spójrzmy na paletę Obiekty. Jest to odpowiednik palety Warstwy, do której przywykłeś w innych aplikacjach, i jest to po prostu interaktywna lista wszystkich elementów na stronie.
Pamiętaj, że jest to o wiele prostsze niż paleta warstw Photoshop. Nie ma maskowania, efektów warstw itp.
Wykończenie arkusza głównego
Ponieważ każda dobra minimalistyczna strona ma logo z frazesami, nasze po prostu nie mogą bez niego pozostać. Szybkie wykonanie makiety daje wyczucie narzędzia do kształtowania. Zauważ, że można zmieniać rozmiar kształtów bez degradacji obrazu. Rzym doskonale nadaje się do pracy z obiektami wektorowymi i rastrowymi.
I z tym skończyliśmy z naszym Arkuszem głównym. Elementy te pojawią się na każdej stronie bez dodatkowego wysiłku.
Kończenie strony i eksportowanie
Jak wspomniałem wcześniej, nawigacja pozwoliła nam objąć większość funkcji, które chciałem pochwalić. Tworzymy linki, pozycjonujemy i rozmieszczamy obiekty oraz tworzymy efekty aktywowania.
Odtąd powinieneś grać sam i dokończyć pozostałe strony. Spróbuj wkleić obraz, pracować z akapitami tekstu, a może nawet zbudować siatkę. Pamiętaj, aby wybrać odpowiedni arkusz przed dodaniem zawartości, aby nie dodawać dalej do arkusza głównego.
Po zakończeniu korzystania z witryny masz dwie podstawowe opcje eksportowania. Pierwszy to strona rzymska. Spowoduje to przesłanie witryny na serwer obsługiwany przez Adobe przy użyciu Twojego identyfikatora Adobe ID (na razie za darmo). Jednak nie można nic z tym zrobić w ten sposób, więc wolę eksportować go do pliku SWF i wybrać opcję utworzenia pliku HTML.
To da Ci działającą stronę internetową zbudowaną samodzielnie przez Ciebie bez uncji kodu!
Moje myśli o Rzymie
Teraz jest część, która Cię naprawdę interesuje. Czy możesz wykorzystać Rzym do rzeczywistych projektów? Aby odpowiedzieć na to pytanie, spójrzmy na zalety i wady.
Najpierw spójrzmy na pozytywną stronę. Rzym to innowacyjny WYSIWYG, który wcale nie jest idealny, ale wydaje się dość dopracowany i potężny. Krzywa uczenia się jest znacznie mniejsza niż w aplikacjach CS i na pewno powinna spodobać się każdemu zastraszonemu przez ten pakiet. Co więcej, osiąga zawsze iluzoryczny cel, jakim jest umożliwienie programistom zbudowania działającej witryny bez jednego wiersza kodu.
Jednak pomimo tych korzyści nie widzę, aby kiedykolwiek korzystałem z Rzymu w profesjonalnym kontekście do projektów internetowych. Największą przeszkodą dla mnie jest to, że tak bardzo zależy od Flasha. Nie zamierzam wdawać się w rażące flashowanie, ale jest to po prostu niepraktyczne wykorzystanie technologii, czy ją kochasz, czy nienawidzisz. Witryna, którą właśnie zbudowaliśmy, zawierała tylko kilka linków i zdjęć. Absolutnie nie ma powodu, dla którego wynikowe pliki powinny być niczym innym jak czystym HTML i CSS. Rozumiem, że Adobe chce budować z obsługą Flasha, ale nie twierdzę, że mogę budować strony internetowe za pomocą tego narzędzia, jeśli nie masz nawet opcji podstawowej strony internetowej.
Należy pamiętać, że ten artykuł dotyczył Rzymu tylko z internetowego punktu widzenia. Nadal może być świetny do opracowywania materiałów do drukowania i interaktywnych plików PDF. W rzeczywistości jest to naprawdę niesamowite narzędzie dla tych drugich.
Wniosek
Podsumowując, jeśli jesteś całkowicie obcy w tworzeniu stron internetowych i musisz sam zbudować szybką stronę, nie zatrudniając nikogo ani nie czytając 15 książek, sprawdź Rzym. Jest dość łatwy do odebrania i uruchomienia bez względu na poziom wiedzy.
Jeśli jednak szukasz solidnego i przyjaznego dla użytkownika WYSIWYG, który faktycznie tworzy strony internetowe na profesjonalnym poziomie, zapoznaj się z naszym samouczkiem na temat Flux 3. Jeśli rozumiesz CSS, Flux jest zabójczą aplikacją i nie znalazłem godnego rywala.
Zostaw komentarz poniżej i daj nam znać, co myślisz o Projekcie Rzym. Co zrobił Adobe w tym eksperymencie? Co zrobili źle? Chcemy usłyszeć od ciebie!
