--- title: "Creazione di pagine web: progettazione HTML con StyleVision" date: "2012-03-13" categories: - "applications" tags: - "html" - "stylevision" - "web-design" description: Scoprite come progettare pagine web dinamiche utilizzando HTML e StyleVision, sfruttando i contenuti XML per aggiornamenti efficienti e funzionalità di formattazione avanzate. --- Status: #blog Tags: #html #stylevision #web-design Categories: [development](/blog/it/category/development.md) # Creazione di pagine web: progettazione HTML con StyleVision Il ritmo frenetico dell'ambiente aziendale odierno significa che le informazioni, insieme al formato in cui sono richieste, cambiano frequentemente. Sebbene alcune pagine web contengano contenuti che raramente cambiano (ad esempio, le pagine "Chi siamo" e le indicazioni stradali), la maggior parte dei siti web aziendali di oggi vengono continuamente aggiornati con nuovi dati. Per questo motivo, molte organizzazioni scelgono di archiviare i contenuti web in formato XML. Questo consente alle organizzazioni di sviluppare i contenuti in modo estremamente efficiente, poiché le informazioni contenute nel file XML possono essere utilizzate per molteplici scopi e in diversi formati di output; lo schema XML associato al file XML descrive il modello dei contenuti. StyleVision è un potente strumento di progettazione di fogli di stile e report che può aiutarvi a sfruttare al meglio il formato XML. StyleVision vi permetterà di [creare pagine web](https://www.altova.com/it/stylevision/web-design.html) con una formattazione sofisticata, utilizzando una finestra di progettazione basata su modelli e con funzionalità di trascinamento e rilascio. StyleVision [genera automaticamente fogli di stile XSLT](https://www.altova.com/it/stylevision/xslt-html.html), consentendovi di integrare il vostro progetto in un sito nuovo o esistente; è possibile generare persino applicazioni web ASPX direttamente dal menu File. [![Immagine allegata](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) In questo articolo, progettiamo una pagina web che mostrerà alcune delle capacità di formattazione HTML di StyleVision. Sebbene le funzionalità di formattazione integrate di StyleVision consentano di creare design sofisticati tramite semplici operazioni di trascinamento, in questo esempio utilizzeremo [CSS3](https://www.altova.com/it/stylevision/xslt-css.html), immagini e altri elementi di design standard per creare una pagina web che non necessiti di essere riformattata quando il contenuto cambia. Il nostro primo progetto StyleVision era estremamente semplice. Come potete vedere nella finestra "Albero dello schema" qui sotto, lo schema XML di origine è stato progettato in modo che l'XML possa essere pubblicato in formato libro e include una panoramica, titoli dei capitoli, sottotitoli dei capitoli e contenuti. Abbiamo semplicemente trascinato gli elementi corrispondenti a queste sezioni nella finestra di progettazione. [![Immagine allegata](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) Come potete vedere di seguito, il contenuto XML viene visualizzato correttamente, e non è stato necessario scrivere manualmente alcun codice XSLT o HTML per ottenere questo risultato. Tuttavia, è necessario applicare una formattazione stilistica prima di poterlo pubblicare come pagina web. [![Immagine allegata](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) Sebbene quasi tutti gli elementi di progettazione possano essere formattati nelle sezioni "Stili" e "Proprietà" dell'interfaccia StyleVision, in questo caso utilizzeremo un file CSS per applicare la formattazione. In questo modo, se desideriamo modificare la formattazione, potremo semplicemente indicare un nuovo file CSS all'interno del codice XSLT, invece di apportare modifiche direttamente alla progettazione. Utilizzeremo XMLSpy, il software di Altova [Editor XML](https://www.altova.com/it/xml-editor/) con funzionalità integrate per la modifica e la creazione di CSS, sia nella versione 2 che nella versione 3, per sviluppare i nostri fogli di stile. La schermata qui sotto mostra una parte del file CSS che abbiamo creato in XMLSpy e include le proprietà per i titoli h1, h2 e h3. Definiamo questi elementi qui, nel file CSS. Successivamente, li assegneremo agli elementi del nostro file XML in StyleVision. Si noti che abbiamo incluso le proprietà CSS3 "box-shadow" per gli elementi "h1" e "box-sizing" per gli elementi "h3": sia XMLSpy che StyleVision supportano HTML5 e CSS3. [![Immagine allegata](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) Una volta creato il file CSS, torneremo a StyleVision e lo assoceremo al progetto che abbiamo creato. Per associare un file CSS a un progetto StyleVision, basta cliccare sul link "_aggiungi nuovo file CSS_" nella panoramica del progetto e selezionare il file desiderato. [![Immagine allegata](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) Si prega di notare che un progetto StyleVision può supportare più file CSS. Di recente abbiamo pubblicato un articolo sul blog che spiegava come [assegnare dinamicamente i file CSS a un progetto StyleVision.](https://www.altova.com/blog/2012/01/get-more-mileage-from-your-stylevision.html) Ora possiamo iniziare ad assegnare i selettori che abbiamo creato nel nostro file CSS agli elementi del nostro progetto. Inizieremo con il titolo del capitolo. Evidenzieremo l'area di contenuto per l'elemento del titolo del capitolo e selezioneremo "h1" dal menu a tendina nella barra dei menu. [![Immagine allegata](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) Nel nostro file CSS, abbiamo definito il tipo di carattere, la dimensione, il colore e l'allineamento per gli elementi `

`. Abbiamo inoltre utilizzato la proprietà `box-shadow` di CSS3. Di seguito è riportata la visualizzazione HTML del nostro progetto, in cui il selettore "h1" è stato assegnato all'elemento che rappresenta il titolo del capitolo. [![Immagine allegata](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) Analogamente, assegneremo i selettori "h2" e "h3" agli elementi di intestazione principale e secondaria, rispettivamente. Il nostro design ora appare così. [![Impossibile tradurre senza il testo da tradurre. Per favore, fornisci il testo che desideri tradurre](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) La visualizzazione HTML è mostrata qui sotto: notate che abbiamo utilizzato la proprietà CSS3 "box-sizing" per posizionare i sottotitoli ("Creare risultati efficaci" e "Progettazione del foglio di stile visivo") e per disporre il testo attorno a essi. [![Impossibile tradurre senza il testo da tradurre. Per favore, fornisci il testo che desideri tradurre](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) Infine, aggiungeremo un'immagine nella parte inferiore della pagina utilizzando un attributo chiamato "coverimage" presente nel file XML di origine (mostrato nell'immagine sottostante). [![Immagine allegata](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) Per aggiungere l'immagine al nostro progetto, trasciniamo semplicemente l'elemento "coverimage" dall'albero dello schema alla finestra di progettazione e selezioniamo "Crea immagine". Questo aprirà la finestra di dialogo "Inserisci immagine". Passiamo quindi alla scheda "Dinamico", clicchiamo sul pulsante "Modifica XPath" e selezioniamo l'elemento "cover image" dall'albero dello schema. La finestra di dialogo "Inserisci immagine" apparirà di seguito. [![Impossibile tradurre senza il testo da tradurre. Per favore, fornisci il testo che desideri tradurre](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) Abbiamo inoltre aggiunto alcune formattazioni per le immagini nel nostro file CSS, utilizzando la proprietà CSS3 "border-radius", che permette di aggiungere angoli arrotondati a un elemento. La sezione del nostro file CSS che definisce la formattazione delle immagini è riportata di seguito. Questa visualizzazione è stata ottenuta con XMLSpy. [![Impossibile tradurre senza il testo da tradurre. Per favore, fornisci il testo che desideri tradurre](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) Oltre alle tecniche di formattazione che abbiamo utilizzato in questo esempio, potremmo anche aggiungere funzionalità avanzate utilizzando funzioni JavaScript, modelli condizionali, calcoli automatici e altro ancora; tuttavia, per semplicità, in questo caso ci limiteremo a utilizzare solo le funzionalità di base. Il nostro progetto è ora pronto per essere utilizzato – la visualizzazione HTML è mostrata nell'immagine sottostante. [Immagine non disponibile] Ora che siamo soddisfatti del design, possiamo salvare il foglio di stile XSLT generato automaticamente utilizzando il menu File. [![Immagine allegata](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) Possiamo anche creare un'applicazione web ASPX per questo progetto, selezionando l'opzione "Progettazione web" che si trova immediatamente sotto "Salva i file generati". Possiamo scegliere di generare output in formato HTML 4 o HTML 5, e possiamo anche selezionare la compatibilità con Internet Explorer dalla finestra di dialogo "Proprietà" (accessibile anche tramite il menu "File"). [![Immagine allegata](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) Ancora meglio, se i dati di origine vengono modificati, queste modifiche verranno automaticamente riflesse nell'output HTML. Se aggiungiamo, ad esempio, nuovi contenuti al nostro file XML, questi vengono formattati nello stesso modo del contenuto originale e tutti gli elementi di design vengono visualizzati correttamente in relazione tra loro: non è necessario riscrivere il codice HTML. Qui, abbiamo aggiunto un nuovo sottotitolo di capitolo e il relativo contenuto al file XML sottostante, e lo abbiamo visualizzato in anteprima in formato HTML. [![Immagine allegata](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) Come potete vedere, StyleVision offre il meglio di entrambi i mondi: è possibile creare un singolo modello HTML, valido per tutti i casi, con funzionalità di formattazione dinamica. Grazie al controllo completo sulla formattazione offerto da StyleVision, è possibile progettare pagine web e applicazioni ASPX che riflettano la vostra visione.