--- title: "Tworzenie stron internetowych – projektowanie stron HTML za pomocą programu StyleVision" date: "2012-03-13" categories: - "applications" tags: - "html" - "stylevision" - "web-design" description: Odkryj, jak projektować dynamiczne strony internetowe przy użyciu HTML i StyleVision, wykorzystując zawartość XML do efektywnego aktualizowania i zaawansowanych możliwości formatowania. --- Status: #blog Tags: #html #stylevision #web-design Categories: [development](/blog/pl/category/development.md) # Tworzenie stron internetowych – projektowanie stron HTML za pomocą programu StyleVision Szybkie tempo współczesnego środowiska biznesowego oznacza, że informacje – wraz z formatem, w jakim są wymagane – często się zmieniają. Chociaż niektóre strony internetowe zawierają treści, które rzadko się zmieniają (np. strony "O nas" i informacje o dojeździe), większość współczesnych stron internetowych firm jest stale aktualizowana o nowe dane. Z tego powodu wiele organizacji decyduje się na przechowywanie treści internetowych w formacie XML. Pozwala to organizacjom na tworzenie treści w bardzo efektywny sposób, ponieważ informacje zawarte w pliku XML mogą być wykorzystywane do wielu celów i w różnych formatach wyjściowych – schemat XML powiązany z plikiem XML opisuje strukturę danych. StyleVision to potężny program do projektowania stylów i raportów, który może pomóc w wykorzystaniu XML. StyleVision pozwoli Państwu [tworzyć strony internetowe](https://www.altova.com/pl/stylevision/web-design.html) Dzięki zaawansowanemu formatowaniu, w oparciu o szablony, w intuicyjnym oknie projektowania, w którym można przesuwać i układać elementy. StyleVision [automatycznie generuje arkusze stylów XSLT](https://www.altova.com/pl/stylevision/xslt-html.html) aby można było zintegrować projekt z nową lub istniejącą stroną – można nawet generować aplikacje internetowe ASPX bezpośrednio z menu "Plik". [![Obrazek](https://lh6.ggpht.com/-Mo2Tu0QZMKQ/TzEYFXd_f4I/AAAAAAAAAW4/ktfIfXthFcI/clip_image001_thumb%25255B1%25255D.png?imgmax=800 "clip_image001")](http://lh6.ggpht.com/-H-qFnpImHnA/TzEYFD10sbI/AAAAAAAAAWw/xd9kXGKp02g/s1600-h/clip_image001%25255B6%25255D.png) W tym artykule zaprojektujemy stronę internetową, która zademonstruje niektóre możliwości formatowania HTML oferowane przez StyleVision. Chociaż wbudowane funkcje formatowania StyleVision pozwalają na tworzenie zaawansowanych projektów za pomocą prostego przeciągania i upuszczania, w tym przykładzie użyjemy [CSS3](https://www.altova.com/pl/stylevision/xslt-css.html), obrazów oraz innych standardowych elementów projektowych, aby stworzyć stronę internetową, która nie wymaga ponownego formatowania, gdy zmienia się zawartość. Początkowy projekt StyleVision był niezwykle prosty. Jak widać w oknie "Drzewo schematu" poniżej, schemat XML został zaprojektowany w taki sposób, aby dokument XML mógł być publikowany w formie książki i zawierał on wstęp, nagłówki rozdziałów, podnagłówki rozdziałów oraz treść. Po prostu przeciągnęliśmy elementy odpowiadające tym sekcjom do okna projektowania. [![Obrazek](https://lh6.ggpht.com/-BPIEx_VZjbU/TzEYGZRzx8I/AAAAAAAAAXI/799r1qMQ_9g/clip_image002_thumb%25255B1%25255D.gif?imgmax=800 "clip_image002")](http://lh4.ggpht.com/-ObHzvln3T2M/TzEYF4WfRQI/AAAAAAAAAXA/jiNhGNHKSlQ/s1600-h/clip_image002%25255B4%25255D.gif) Jak widać poniżej, zawartość XML jest wyświetlana prawidłowo – a do osiągnięcia tego efektu nie musieliśmy ręcznie pisać żadnych skryptów XSLT ani kodu HTML. Jednak przed publikacją jako strona internetowa, potrzebuje ona jeszcze dopracowania pod względem wyglądu. [![Obrazek](https://lh3.ggpht.com/-GYrrKvmKfI0/TzEYG-Qu3aI/AAAAAAAAAXY/LmYgOx7_jPQ/clip_image003_thumb%25255B1%25255D.png?imgmax=800 "clip_image003")](http://lh6.ggpht.com/-hLYoSfNTqwY/TzEYGl2298I/AAAAAAAAAXQ/U_mqgmdH5aI/s1600-h/clip_image003%25255B4%25255D.png) Chociaż praktycznie wszystkie elementy projektu można formatować w panelach "Style" i "Właściwości" w interfejsie StyleVision, w tym przypadku użyjemy pliku CSS do zastosowania formatowania. Dzięki temu, jeśli chcemy zmienić formatowanie, możemy po prostu wskazać nowy plik CSS w transformacji XSLT, zamiast wprowadzać zmiany bezpośrednio w projekcie. Użyjemy programu XMLSpy, produktu firmy Altova [Edytor XML](https://www.altova.com/pl/xml-editor/) z wbudowanymi funkcjami edycji i tworzenia stylów CSS2 i CSS3, co pozwala na tworzenie naszych własnych arkuszy stylów. Poniższy zrzut ekranu przedstawia fragment pliku CSS, który stworzyliśmy w programie XMLSpy, i zawiera właściwości dla nagłówków h1, h2 i h3. Zdefiniujemy te elementy w tym pliku CSS. Następnie przypiszemy je do elementów z naszego pliku XML w programie StyleVision. Zauważcie, że dodaliśmy właściwości CSS3 `box-shadow` dla nagłówka `h1` oraz `box-sizing` dla nagłówka `h3` – zarówno XMLSpy, jak i StyleVision obsługują standardy HTML5 i CSS3. [![Obrazek](https://lh5.ggpht.com/-f1A_aBwQ4Sw/TzEYHma1CPI/AAAAAAAAAXo/6SfTn1LnNdQ/clip_image004_thumb%25255B1%25255D.png?imgmax=800 "clip_image004")](http://lh3.ggpht.com/-puzAVL_C0GQ/TzEYHbGkKeI/AAAAAAAAAXg/Jbs-r3id3Pk/s1600-h/clip_image004%25255B4%25255D.png) Po utworzeniu pliku CSS, wracamy do programu StyleVision i przypisujemy go do stworzonego projektu. Aby przypisać plik CSS do projektu w programie StyleVision, wystarczy kliknąć link "_dodaj nowy plik CSS_" w sekcji przeglądu projektu i wybrać odpowiedni plik. [![Obrazek](https://lh5.ggpht.com/-_4c3Ol7amvs/TzEYIBmDYRI/AAAAAAAAAX4/eb2wpL2xLiU/clip_image005_thumb%25255B1%25255D.png?imgmax=800 "clip_image005")](http://lh5.ggpht.com/-wP6AoGdp1oE/TzEYH5gIuBI/AAAAAAAAAXw/ML0VQuOItJg/s1600-h/clip_image005%25255B4%25255D.png) Proszę pamiętać, że projekt StyleVision może obsługiwać wiele plików CSS. Niedawno opublikowaliśmy wpis na blogu, w którym wyjaśniliśmy, jak [dynamicznie przypisywać pliki CSS do projektu StyleVision.](https://www.altova.com/blog/2012/01/get-more-mileage-from-your-stylevision.html) Teraz możemy zacząć przypisywać selektory, które utworzyliśmy w naszym pliku CSS, do elementów w naszym projekcie. Zacznijmy od nagłówka rozdziału. Podświetlimy miejsce zastępcze dla elementu nagłówka rozdziału i wybierzemy "h1" z listy rozwijanej na pasku menu. [![Obrazek](https://lh3.ggpht.com/-a-MaRW2n-AQ/TzEYIq8zPuI/AAAAAAAAAYI/oxT9C_jG1G8/clip_image006_thumb%25255B1%25255D.png?imgmax=800 "clip_image006")](http://lh6.ggpht.com/-qW-eWAXrfac/TzEYIVYLIJI/AAAAAAAAAYA/nqSArbWHaNs/s1600-h/clip_image006%25255B4%25255D.png) W naszym pliku CSS zdefiniowaliśmy czcionkę, rozmiar czcionki, kolor oraz wyrównanie tekstu dla nagłówków h1. Użyliśmy również właściwości `box-shadow` z CSS3. Poniżej znajduje się widok HTML naszego projektu, w którym selektor h1 został przypisany do elementu nagłówka rozdziału. [![Obrazek](https://lh5.ggpht.com/-rmZF7njKPJw/TzEYJBiDeII/AAAAAAAAAYY/VHKDlLpNcSM/clip_image007_thumb%25255B1%25255D.png?imgmax=800 "clip_image007")](http://lh3.ggpht.com/-4r3Bf4jTBTI/TzEYI-jibcI/AAAAAAAAAYQ/4vf9KOnSFlA/s1600-h/clip_image007%25255B4%25255D.png) Podobnie, przypiszemy selektory "h2" i "h3" do elementów nagłówków sekcji ogólnej oraz podtytułów rozdziałów. Nasz projekt wygląda teraz w następujący sposób. [![Obrazek](https://lh3.ggpht.com/-reqkThcpVq4/TzEYJkmztRI/AAAAAAAAAYo/yQqc_cEbJRk/clip_image008_thumb%25255B1%25255D.gif?imgmax=800 "clip_image008")](http://lh3.ggpht.com/-BXquuuPNhaM/TzEYJeCEmMI/AAAAAAAAAYc/LfjSNsvaJ_s/s1600-h/clip_image008%25255B4%25255D.gif) Poniżej znajduje się widok HTML – zwróćcie uwagę, że wykorzystaliśmy właściwość `box-sizing` w CSS3, aby umieścić podtytuły („Twórz efektowne wyniki” i „Projektowanie arkusza stylów wizualnych”) i otoczyć je tekstem. [![Obrazek](https://lh4.ggpht.com/-TxafUezFexQ/TzEYM3XfhqI/AAAAAAAAAY4/42u6r2oDvrI/clip_image009_thumb%25255B1%25255D.png?imgmax=800 "clip_image009")](http://lh5.ggpht.com/-Rhd5pkkvhF0/TzEYLdxCXSI/AAAAAAAAAYw/LcNm6UHAYio/s1600-h/clip_image009%25255B4%25255D.png) Na koniec dodamy obraz na dole strony, korzystając z atrybutu o nazwie "coverimage" z pliku XML źródłowego (przedstawiony poniżej). [![Obrazek](https://lh5.ggpht.com/-e-bO4nBvyp8/TzEYNbLKFiI/AAAAAAAAAZI/kTcwbGrtSXM/clip_image010_thumb%25255B1%25255D.png?imgmax=800 "clip_image010")](http://lh5.ggpht.com/-RQANM46r-sw/TzEYNJw_ZxI/AAAAAAAAAZA/TXocXzFmzBY/s1600-h/clip_image010%25255B4%25255D.png) Aby dodać obraz do naszego projektu, po prostu przeciągniemy element "coverimage" z drzewa schematu do okna projektu i wybierzemy opcję "Utwórz obraz". Spowoduje to otwarcie okna dialogowego "Wstaw obraz". Przejdziemy do zakładki "Dynamiczne", klikniemy przycisk "Edytuj XPath" i wybierzemy element "cover image" z drzewa schematu. Poniżej wyświetli się okno dialogowe "Wstaw obraz". [![Obrazek](https://lh4.ggpht.com/-11I5DELZW7E/TzEYN17nsVI/AAAAAAAAAZY/Ur0CVDxFT7o/clip_image011_thumb%25255B1%25255D.png?imgmax=800 "clip_image011")](http://lh5.ggpht.com/-3BYH6D8mYsQ/TzEYNhlJvuI/AAAAAAAAAZQ/_eZIzfhZuhw/s1600-h/clip_image011%25255B4%25255D.png) Dodatkowo, w naszym pliku CSS dodaliśmy pewne formatowanie dla obrazów, wykorzystując właściwość CSS3 o nazwie "border-radius", która pozwala zaokrąglić rogi elementów. Poniżej znajduje się fragment naszego pliku CSS, który definiuje formatowanie obrazów – widok przedstawiony w programie XMLSpy. [![Obrazek](https://lh3.ggpht.com/--lMaklvkwxQ/TzEYOZ4YdsI/AAAAAAAAAZo/p3jegclrA0Y/clip_image012_thumb%25255B1%25255D.png?imgmax=800 "clip_image012")](http://lh6.ggpht.com/-kqKu3KFbBns/TzEYOJ1ABJI/AAAAAAAAAZg/x1CmD0G_QME/s1600-h/clip_image012%25255B4%25255D.png) Oprócz technik formatowania, które tutaj zastosowaliśmy, moglibyśmy również dodać zaawansowane funkcje, wykorzystując funkcje JavaScript, szablony warunkowe, automatyczne obliczenia i wiele innych – ale dla celów tego przykładu postaramy się, aby wszystko było proste. Nasza wersja projektu jest już gotowa do wdrożenia – poniżej znajduje się wizualizacja w formacie HTML. [Obrazek] [Obrazek] Teraz, gdy jesteśmy zadowoleni z projektu, możemy zapisać automatycznie wygenerowany arkusz stylów XSLT, korzystając z menu "Plik". [![Obrazek](https://lh5.ggpht.com/-gRgOx9vIRx4/TzEYPonha8I/AAAAAAAAAaI/3qmbAT5IBug/clip_image013_thumb%25255B1%25255D.png?imgmax=800 "clip_image013")](http://lh3.ggpht.com/-P5WjHAVrUb8/TzEYPHCdk5I/AAAAAAAAAaA/Q1iWw8iMi5o/s1600-h/clip_image013%25255B4%25255D.png) Możemy również wygenerować aplikację internetową ASPX dla tego projektu, wybierając opcję "Projektowanie stron internetowych" znajdującą się bezpośrednio pod przyciskiem "Zapisz wygenerowane pliki". Możemy wybrać, czy wygenerować kod HTML 4, czy HTML 5, a także ustawić kompatybilność z przeglądarką Internet Explorer w oknie dialogowym "Właściwości" (dostępnym również z menu "Plik"). [![Obrazek](https://lh6.ggpht.com/-URBS_XW2K2g/TzEYQHcwKEI/AAAAAAAAAaY/mjHVzfcP_RM/clip_image014_thumb%25255B1%25255D.png?imgmax=800 "clip_image014")](http://lh6.ggpht.com/-P7Q475fmxgc/TzEYP7OR1jI/AAAAAAAAAaQ/TVxvGxCnIgg/s1600-h/clip_image014%25255B4%25255D.png) Co więcej, jeśli dane źródłowe ulegną zmianie, zmiany te zostaną automatycznie odzwierciedlone w wynikowym kodzie HTML. Jeśli dodamy do naszego pliku XML, na przykład, nowe treści, zostaną one sformatowane w taki sam sposób, jak oryginalne, a wszystkie elementy graficzne zostaną wyświetlone we właściwej relacji do siebie – nie ma potrzeby ponownego kodowania HTML. W tym miejscu dodaliśmy nowy podtytuł rozdziału oraz powiązowaną treść do pliku XML, a następnie wyświetliliśmy podgląd w formacie HTML. [![Obrazek](https://lh3.ggpht.com/-YGDmSgh1y4I/TzEYQopbKJI/AAAAAAAAAao/Bpum5TUej0U/clip_image015_thumb%25255B1%25255D.png?imgmax=800 "clip_image015")](http://lh4.ggpht.com/-dQnw-NixtwY/TzEYQQkBpWI/AAAAAAAAAag/fpm63c9Okeg/s1600-h/clip_image015%25255B4%25255D.png) Jak widać, StyleVision oferuje najlepsze z obu światów – można tworzyć pojedynczy, uniwersalny szablon HTML z możliwościami dynamicznego formatowania. Dzięki pełnej kontroli nad formatowaniem, jaką zapewnia StyleVision, można projektować strony internetowe i aplikacje ASPX, które odzwierciedlają Państwa wizję.