Creazione di un sito web per piccole imprese di una pagina con Adobe Muse

Adobe Muse è un potente strumento che ha reso il web design sorprendentemente più semplice e interessante. Più facile in termini di nessun requisito di codice per creare siti Web professionali e interessante in termini di controllo completo sul design a differenza di altre applicazioni di trascinamento della selezione.

Una delle caratteristiche più impressionanti di questa applicazione WYSIWYG (What You See Is What You Get) è che fornisce un flusso di lavoro appropriato per assistere il designer nello sviluppo passo dopo passo del sito web.

Al termine di questo tutorial, potrai:

• Avere una chiara comprensione di ogni aspetto tecnico e di design di Muse.
• Sapere come progettare professionalmente in meno tempo.
• Conosci alcune risorse gratuite in cui puoi trovare una grafica straordinaria per il tuo sito web.
• Crea un sito Web di una pagina completamente funzionante in pochissimo tempo.

Requisiti di questo tutorial

Dovrai scaricare determinate immagini, vettori e caratteri per creare questo sito. Ma puoi comunque continuare senza queste risorse. Per organizzare correttamente il contenuto, crea una cartella separata per il tuo sito.

• Vai su pexels.com e scarica:

  • 4 immagini di dimensioni 1160 x 480 per slideshow. Ecco uno screenshot da Pexels. Puoi inserire questa dimensione nella casella “dimensione personalizzata” su questo sito web.

  • 6 immagini di dimensioni 271 x 208 per la sezione ‘servizi’.

  • 1 immagine di dimensioni 1160 x 692 per la sezione “Contattaci”.

• Vai su freepik.com e scarica:

  • Un’icona a forma di croce (puoi modificare questa icona in Illustrator o semplicemente scaricare il file png da feepik).
  • 6 immagini di volti per la sezione ‘Testimonianze’.

• Vai su thinpatterns.com e scarica il modello ‘brickwall’ per la sezione ‘Testimonianze’.

• Mentre procederai con questo tutorial, ti dirò come scaricare i font richiesti (può essere fatto all’interno di Muse).

• Usa il testo fittizio da lipsum.com.

INIZIAMO!

Preparazione dello spazio di lavoro e impostazione dell’intestazione

1 Crea un nuovo sito andando su File > Nuovo sito (Ctrl+N) e inserisci i valori come mostrato di seguito. Non dimenticare di selezionare la casella di controllo che dice “Sticky Footer”. Fai clic su OK e avrai la modalità PLAN. Fare doppio clic su A-Master situato in basso in un’area grigia. Creerai tutto su questa pagina master.

2 Scegliere lo strumento testo dalla casella degli strumenti situata sul lato sinistro della finestra dell’applicazione. Fare clic e trascinare sulla tela o sulla pagina per creare una casella di testo. Vai al pannello di testo (Ctrl+T), sotto il menu a tendina dei font, cerca Font Web e scegli ‘Aggiungi font Web’ e scarica i seguenti font:

• Rametto Uno
• Pezzo
• Questrial
• Raleway
• Nobile
• PT Senza
• Ubuntu
• Aragosta

Dopo aver scaricato questi caratteri, elimina questa casella di testo.

3 Vai al pannello Livelli situato sul lato destro della finestra dell’applicazione. Se non è presente, vai al menu Finestra> Livelli. Vedrai lì un livello chiamato Livello 1 (colore blu). Questo è il livello predefinito e tutto ciò che crei o posizioni sulla tela va lì. Fai doppio clic su questo livello e chiamalo “Intestazione”.

4 All’interno del pannello dei livelli, fare clic sulla piccola icona della carta piegata situata nell’angolo in basso a destra. Facendo clic su questo creerà un nuovo livello con il colore rosso. Ancora una volta, fai doppio clic su questo livello e rinominalo in “Contenuto”.

5 Fare clic e trascinare questo livello di contenuto e posizionarlo sotto il livello di intestazione. Lo abbiamo fatto perché vogliamo che il nostro colpo di testa sia in cima a tutto.

6 Selezionare il livello di intestazione e comprimere il pannello dei livelli.

7 Selezionare lo strumento rettangolo dalla casella degli strumenti o premere ‘m’ sulla tastiera.

8 Disegna un piccolo rettangolo sulla tela e assicurati che il colore del bordo sia blu, il che indica che questo oggetto si trova all’interno del livello di intestazione.

9 Vai al pannello Trasforma situato nella parte in alto a destra della finestra dell’applicazione. Lascia la larghezza (L) e metti 50 nel campo dell’altezza interna (H) e premi invio. (Non preoccuparti dei valori X e Y.)

10 Nella parte superiore della pagina, vedrai due linee di colore blu (mostrate nello screenshot qui sotto). Questi sono chiamati ‘guide’. Quando passi il mouse sopra la prima guida, si dice “Inizio della pagina, trascina per regolare il riempimento sopra la pagina” e l’altra dice “Intestazione, trascina per regolare la posizione”. Impostare queste guide fin dall’inizio è molto importante.

11 Ora, poiché abbiamo creato un rettangolo di H=50, fare clic, tenere premuto e trascinare la guida ‘parte superiore della pagina’ fino a quando la casella che apparirà sotto una volta iniziato a trascinare indicherà Y=50.

12 Allo stesso modo, trascina la guida dell’intestazione sopra nella parte superiore della guida della pagina finché non dice Y=0. Lo abbiamo fatto per impostare la nostra area di intestazione. (Potresti provare a posizionare queste guide in posizioni diverse per ottenere risultati diversi, ma per ora va bene.)

13 Selezionare il rettangolo appena creato, trascinarlo nell’area dell’intestazione in modo che si adatti correttamente.

14 Ora, dobbiamo aumentare la larghezza del rettangolo e renderla al 100% in modo che l’intestazione appaia perfetta su ogni dimensione dello schermo. Espandi il rettangolo su entrambi i bordi e assicurati che si agganci con i bordi. Apparirà una guida arancione che assicura che l’oggetto sia stato agganciato. Man mano che aumenti la larghezza del rettangolo, il pop-up dirà W=100% o W=1160 quando raggiungerai il bordo.

15 Mantieni selezionato il rettangolo, fai clic sulla parola Riempi sotto il menu dell’applicazione e imposta le opzioni come segue. Scegli il primo colore come Nero e il secondo colore: R=37, G=37, B=37.

16 Andare su File > Salva sito. Salva il tuo sito ogni volta che apporti una modifica.

17 Creare una casella di testo e digitare – ‘example.com’ e modificarne la formattazione come mostrato di seguito.

18 Regolare le dimensioni della casella di testo in modo che l’intero testo appaia su una riga. Seleziona questa casella di testo e trascinala sul rettangolo nero. Allinealo al centro verticale del rettangolo (una linea blu ti dirà quando è centrato) e aggancialo al bordo sinistro come mostrato di seguito.

19 Creare una casella di testo e digitare – ‘Home’. Cambia la sua formattazione come segue. Regola la larghezza e l’altezza della casella di testo di conseguenza. Puoi farlo anche dal pannello di trasformazione. Il mio è L=52, A=17.

20 Copiare e incollare questa casella di testo e digitare “Servizi” in quella nuova. Regola la larghezza. Trascina e posiziona questa casella di testo accanto a casa con una differenza molto minore tra i due. Ancora una volta, le guide ti aiuteranno nel corretto allineamento.

21 Copia e incolla questa casella di testo per quattro volte di più e digita – Why Us, Testimonials, Contact Us e Newsletter. Posiziona queste caselle di testo una per una a spaziatura uguale accanto a “servizi”.

22 Con lo strumento di selezione selezionato e il tasto Maiusc premuto, selezionare tutte queste caselle di testo una per una. Vai al pannello di testo, cambia il colore in bianco. Scegli il gruppo di queste caselle e posizionalo sopra il rettangolo dell’intestazione. (Centrato verticalmente e allineato con il bordo destro della pagina). Questo è il nostro Menù.

23 Ancora una volta, con lo strumento di selezione selezionato e il tasto Maiusc premuto, selezionare queste caselle di testo, il rettangolo e la casella di testo example.com. In alto a destra, vedrai un’opzione chiamata Pin. Fai clic sulla sua casella in alto al centro per appuntare questi elementi. Ciò significa che quando l’utente scorrerà il tuo sito, questa intestazione rimarrà fissa in alto. È molto utile in quanto l’utente non dovrà scorrere fino in fondo solo per scegliere un’altra opzione.

24 Passare al pannello Livelli e bloccare il livello dell’intestazione. Questo può essere fatto facendo clic all’interno della casella a sinistra del nome del livello. Quando blocchi un livello o qualsiasi oggetto, non influirà sul suo aspetto ma non sarai in grado di selezionare questi elementi a meno che non li sblocchi. Lo abbiamo fatto per eliminare completamente le possibilità di spostare accidentalmente gli oggetti.

25 Selezionare il livello del contenuto e comprimere il pannello dei livelli.

Creazione di una presentazione

26 Vai alla libreria dei widget situata sul lato destro della finestra dell’applicazione. Se non è presente, vai al menu Finestra> scegli Libreria widget. Espandi la sezione “presentazioni” e seleziona “Vuoto”. Fare clic e trascinare questo oggetto sulla tela. Apparirà una finestra nera con le opzioni della presentazione.

27 Assicurarsi che le opzioni siano impostate come mostrato nell’immagine sottostante. Nella sezione delle parti in basso, deseleziona le caselle di controllo che dicono Prev, Next, Captions e Counter. Non abbiamo bisogno di nessuno di questi.

28 Fare clic in un punto qualsiasi dell’area di disegno per far scomparire questo popup. Ora, fai clic con attenzione all’interno della presentazione. Cliccandolo una volta, vedrai che ‘Slideshow’ è stato scritto nell’area ‘il tipo di selezione corrente’. Si trova nell’angolo in alto a sinistra sotto il menu dell’applicazione. Quest’area ti permette di vedere cosa hai selezionato. È una caratteristica molto utile quando il layout diventa complicato. Clicca di nuovo e noterai che la descrizione dice ‘Hero Image’.

29 Aumenta manualmente la larghezza dell’immagine principale espandendola dal centro. Aggancialo su entrambi i bordi della pagina (per renderlo largo al 100%) e nella parte inferiore del rettangolo dell’intestazione come mostrato di seguito.

30 Andare a trasformare pannello e mettere H=500.

31 Aprire nuovamente le opzioni della presentazione facendo clic sul piccolo cerchio blu con un rettangolo bianco al suo interno (si trova nell’angolo in alto a destra della presentazione).

32 Fare clic sull’icona della cartella accanto all’opzione ‘Aggiungi immagini…’, cercare le immagini che abbiamo scaricato per la presentazione. Seleziona tutti e quattro e fai clic su Apri.

33 Vai su File > scegli “Anteprima pagina nel browser” o Ctrl+Maiusc+E e guarda come funzionerà la tua presentazione una volta che il sito sarà attivo. Ti consiglio di memorizzare le scorciatoie da tastiera che sto usando in questo tutorial. Ciò ti aiuterà ad accelerare il processo di progettazione.

Creazione della sezione ‘Servizi’

34 Ora che abbiamo impostato la nostra intestazione e presentazione, è il momento di creare sezioni per ogni elemento che abbiamo aggiunto al nostro menu. Iniziamo con i “servizi”. Crea una casella di testo e digita servizi al suo interno (tutte le lettere minuscole) e modifica la formattazione come segue.

35 Fare doppio clic all’interno di questa casella di testo e selezionare solo la lettera ‘I’. Cambia il carattere in “Chunk” e lascia tutto uguale. Regola l’altezza di questa casella di testo. Quando ne diminuirai l’altezza, ad un certo punto apparirà una linea tratteggiata e la scatola non si accorcerà. Non ridurre le dimensioni dopo. Questa è l’altezza più bassa possibile con questa dimensione del carattere.

36 Con la casella di testo selezionata, passare al pannello di trasformazione e impostare l’angolo di rotazione su -90 gradi (90 gradi negativi).

37 Spostare la casella di testo sul lato sinistro dell’area di disegno come mostrato di seguito.

38 Potresti voler ridurre un po’ lo zoom per vedere tutto il contenuto in una volta o per regolare correttamente gli oggetti. Per fare ciò, prova a digitare valori diversi (meno del 100%) nella sezione del livello di zoom in alto. Dopo aver digitato il valore, premere Invio.

39 Vai su File > scegli ‘Posiziona’. Seleziona la prima immagine che abbiamo scaricato per la nostra sezione servizi. Fare clic su Apri.

40 Il cursore cambierà il suo aspetto in una pistola di posizione caricata con un’immagine. Fare clic sulla tela per posizionarlo. Spostalo e posizionalo in modo che sia allineato con la parte superiore della casella di testo “servizi”.

41 Copia questa immagine e incollala due volte. Seleziona queste immagini incollate una per una e allineale a uguale distanza con la prima immagine.

42 Selezionare la seconda immagine, fare clic destro su di essa e scegliere ‘sostituisci immagine’ (è l’ultima opzione). Cerca la seconda immagine e fai clic su Apri. Sostituisci anche la terza immagine.

43 Creare caselle di testo per le informazioni sui servizi e applicare la formattazione per intestazioni e paragrafi come scritto di seguito. Le guide ti aiuteranno ad allinearle correttamente.

• Per le intestazioni: Font: Raleway Bold, Dimensione=20, Colore: Nero, Allineato a sinistra e 100% iniziale.
• Per i paragrafi: carattere: Questrial, dimensione=15, colore: R=67 G=67 B=67, allineato a sinistra e 120% in avanti.

44 Posizionare altre tre immagini come abbiamo fatto nei passaggi precedenti e allo stesso modo creare un testo descrittivo per esse. Dovresti avere il seguente risultato.

Risultato finale della sezione ‘Servizi’

Creazione della sezione “Perché noi”.

45 La prossima è la sezione ‘Perché noi’. Questo è un po’ complicato. Prestare attenzione nella selezione degli oggetti. Innanzitutto, crea un rettangolo di larghezza 100% e H=996. Riempilo con un colore (R=47, G=48, B=55). Fai clic con il pulsante destro del mouse su questo rettangolo> Disponi> scegli “porta in secondo piano” (non manda indietro).

46 Espandi la tua area di lavoro facendo clic e trascinando la guida ‘in fondo alla pagina’ in modo da avere spazio sufficiente per creare contenuti che verranno inseriti in questo rettangolo che abbiamo appena creato.

47 Scorri verso il basso fino allo spazio vuoto bianco e crea un altro rettangolo di L=351 e A=351. Riempilo con il colore bianco e senza tratti.

48 Vai all’opzione ‘raggio d’angolo’ (si trova accanto al tratto sotto il menu dell’applicazione). Fai clic su tutti gli angoli per arrotondarli e metti 500 nella casella accanto.

49 Avrai un cerchio. Trascina questo cerchio sul rettangolo e regolalo come segue. Accanto al raggio dell’angolo, c’è un’opzione chiamata ‘Opacità’. Con il cerchio selezionato, metti 14 in questa casella.

50 Creare una casella di testo e digitare – why us (all small). Cambia il suo font in Rammetto One, size=100, Color R=241 G=244 B=247, leading 100% e allinealo al centro. Metti questa casella di testo all’interno del cerchio e allineala correttamente.

51 Ora creeremo le linee tratteggiate. Crea un rettangolo di L=9 e A=9, senza riempimento. Fai clic sulla parola “tratto” accanto a riempimento. Scegli il colore R=241 G=244 B=247. Fai clic sull’icona della catena per spezzarla e metti “1” nel peso della corsa inferiore.

52 Copia questo rettangolo con un tratto laterale e incollalo più volte. Disporli in una riga (ingrandisci leggermente con lo strumento zoom se hai difficoltà a vedere questi rettangoli). Una volta ottenuta la lunghezza desiderata della linea tratteggiata, seleziona tutti questi rettangoli, fai clic con il tasto destro e scegli “Raggruppa”. Copia e incolla questo gruppo per altre linee tratteggiate.

53 Per le linee tratteggiate inclinate, provare a inserire angoli di rotazione diversi nel pannello di trasformazione. Ho usato 150 e 30 gradi. Dovrai eliminare alcuni rettangoli da questo gruppo per avere lunghezze più brevi. Regola queste linee vicino al cerchio come mostrato di seguito.

54 Ora aggiungeremo altro testo per numeri, intestazioni e descrizioni. Usa le seguenti impostazioni per ognuna di esse e regola queste caselle di testo come mostrato di seguito.

• Per i numeri: Font=Rammetto One, Colore: R=196 G=214 B=193, allineato al centro e 100% in testa, dimensione: 200 (per il numero ‘1’), 160 (per i numeri ‘2’ e ‘3’) e 120 (per i numeri ‘4’ e ‘5’).
• Per le intestazioni: Font=Raleway Bold, Dimensione=18, Colore:Bianco, Allineato al centro e 100% iniziale.
• Per i paragrafi: Font=Questrial, Dimensione=16, Colore: R=241 G=244 B=247, Allineato al centro e 120% in avanti.

Risultato finale della sezione “Perché noi”.

Creazione della sezione ‘Testimonianze’

55 Ancora una volta, creare un po’ di spazio per lavorare trascinando verso il basso la parte inferiore della guida della pagina. Crea un rettangolo di larghezza 100% e H=486.

56 Con il rettangolo selezionato, fare clic sulla parola ‘Riempi’ e fare clic su ‘Aggiungi immagine’ accanto all’opzione immagine. Cerca l’immagine del modello brickwall che abbiamo scaricato. Sotto l’opzione Adattamento, scegli “Affianca” per riempire l’intero rettangolo con questa trama.

57 Scorri verso il basso fino allo spazio vuoto e crea una casella di testo di dimensioni L=406, A=289 con l’aiuto del pannello di trasformazione. Digita – ‘ciò che gli altri hanno da dire’ (tutto in piccolo). Cambia il suo carattere in Rammetto One, dimensione=70, allinealo a sinistra, valori di colore R=37 G=37 B=37 e leading=100%.

58 Con questa casella di testo selezionata, fare clic sulla parola tratto, applicare il tratto destro di peso uno e di colore nero. Trascina questa casella di testo e posizionala sopra il rettangolo con il motivo brickwall.

59 Il passaggio successivo consiste nell’aggiungere le testimonianze dei clienti. Per questo, useremo le immagini vettoriali della faccia tonda che abbiamo scaricato da freepik.com. Ancora una volta, riduciti allo spazio vuoto bianco in modo da poter personalizzare correttamente la tua composizione.

60 Vai alla libreria Widget e trascina ‘Vuoto’ dalla sezione composizioni sulla tela. Fai clic sul segno più per aggiungere altri tre trigger. Seleziona attentamente il primo trigger e assicurati la selezione con l’aiuto dell’area di selezione corrente che dice trigger. E proprio accanto c’è un’opzione chiamata ‘Attivo’. Fare clic qui per espandere. Seleziona lo stato “Normale” e scegli “nessun riempimento” e “nessun tratto” per questo stato. Ripeti l’operazione per ogni stato che è Rollover, Mouse giù e Attivo. Vai al pannello di trasformazione con il primo trigger selezionato e metti W=10, H=10.

61 Ripeti il ​​passaggio precedente per ogni trigger che abbiamo. Ciò significa che non applicare alcun riempimento e nessun tratto per ogni stato e trasformare i trigger in dimensioni 10 x 10. Avvicina i grilletti l’uno all’altro.

62 Ora. Personalizzeremo gli obiettivi per ciascuno di questi trigger. Il grande rettangolo che vedi è il bersaglio. Seleziona il primo trigger e seleziona il suo stato normale dal pannello degli stati. Successivamente, seleziona il target per questo trigger e non applicare nessun riempimento e nessun tratto per ogni stato. Quindi vai al pannello di trasformazione e crea il target di L=360, H=370.

63 Ripetere il passaggio precedente per ogni target. Assicurati solo di selezionare prima il trigger, portarlo allo stato normale, quindi selezionare il rispettivo target con stato normale e quindi applicare nessun riempimento e nessun tratto. Non sarà necessario modificare le dimensioni di ogni target. Fallo solo per uno e sarà applicato a tutti.

64 Ora inizieremo ad aggiungere contenuto a questa composizione. Vai a File> Posiziona e apri l’immagine del primo volto e posizionala all’esterno della composizione. Trascina questa immagine e inseriscila ora nella composizione. Vedrai che un cerchio blu apparirà nell’angolo in alto a destra che indica che questa immagine ora fa parte della composizione.

65 Creare tre caselle di testo: una per il nome della persona, una per la sua designazione e una per la dichiarazione o recensione. Applica la formattazione come scritto di seguito e inserisci queste caselle di testo all’interno della composizione. Assicurati solo che ognuno di loro abbia un cerchio blu all’angolo.

• Per il nome della persona: Carattere: Nobile Medium Italic, dimensione=18, Colore: R=37 G=37 B=37, allineato al centro e 100% all’inizio.
• Per la designazione: Carattere: Nobile, dimensione=15, Colore: R=37 G=37 B=37, allineato al centro e 100% iniziale.
• Per dichiarazioni (con virgolette): Font: PT Sans Italic, dimensione=18, colore: R=69 G=64 B=68, allineato al centro e 100% iniziale.

66 Con l’immagine del viso selezionata, applica un tratto di peso 4 su ciascun lato, colore: bianco, arrotonda tutti gli angoli e aumenta il raggio finché non avvolge l’immagine. Ho usato 100 come raggi d’angolo.

67 Vai su ‘Effetti’ (situato accanto all’opzione angoli arrotondati) e seleziona la casella di controllo ‘ombreggiatura’. Metti i valori come; Colore=Nero, Opacità=37%, Sfocatura=12, Angolo=78 e Distanza=5.

68 Ripetere i passi precedenti (da 64 a 67) per aggiungere contenuto ad ogni target e salvare le modifiche (Ctrl+S). Metti questa composizione sopra il rettangolo con il motivo del muro di mattoni.

69 Ora seleziona l’intera composizione (assicurati dell’area di selezione corrente) ed espandi le sue opzioni facendo clic sul cerchietto blu. Impostare le opzioni come mostrato di seguito. Premi Ctrl + Maiusc + E e verifica se funziona correttamente.

70 Dovresti ottenere il seguente risultato.

Risultato finale della sezione ‘Testimonianze’

Creazione della sezione “Contattaci”.

71 La sezione successiva è Contattaci. Aggiungeremo un’immagine di sfondo, un modulo e alcune caselle di testo in questa sezione. Innanzitutto, crea un rettangolo di larghezza 100% e H=692. Riempilo con un’immagine che abbiamo scaricato per questa sezione e scegli “scala per riempire” in Adattamento. Cambia la sua opacità al 72%.

72 Crea un altro rettangolo della stessa larghezza e altezza e riempilo con una sfumatura. Metti i valori del gradiente come; Opacità=dal 90% al 46%, Colore: Nero a R=69 G=64 B=68, Punto focale=66%, Direzione: Orizzontale e Dimensione: automatica. Metti questo rettangolo sopra l’immagine e assicurati che scatti con ogni bordo.

73 Vai alla libreria dei widget. Sotto i moduli, seleziona “contatto semplice” e trascinalo sulla tela. Apparirà una finestra con le opzioni del modulo. Inserisci il nome del modulo: Modulo di contatto, Email a: inserisci il tuo indirizzo email in cui desideri ricevere le informazioni inserite dai visitatori, Dopo l’invio: seleziona ‘resta sulla pagina corrente’. L’ultima opzione è “Modifica insieme”. Assicurati che sia selezionato. In questo modo dovrai apportare modifiche solo ad un campo e verranno applicate a tutti. Fare clic in un punto qualsiasi dell’area di disegno per far scomparire la casella delle opzioni.

74 Selezionare il modulo. Fare clic sull’etichetta “Nome” e fare nuovamente clic finché non viene visualizzato “Etichetta” scritto nell’area di selezione corrente. Premi Elimina. Ripeti l’operazione per le etichette delle email e dei messaggi ed eliminale.

75 Seleziona di nuovo il modulo e seleziona il primo campo del modulo che dice ‘Inserisci nome’ finché non vedi ‘Inserimento testo’ nell’area di selezione corrente. Non applicare riempimento e tratto inferiore (peso uno e colore bianco) per ogni stato, da Vuoto a Fuoco. Per lo stato di errore, selezionare nessun riempimento e tratto inferiore di colore rosso con peso 1.

76 Successivamente, con il campo e-mail selezionato> scegli nuovamente il suo stato vuoto e personalizza il carattere e il colore del testo per ogni stato come scritto di seguito.

• Per vuoto, non vuoto e stato attivo: Font: Questrial, dimensione=14, colore: bianco, allineato a sinistra, 100% iniziale e senza corsivo.
• Per lo stato di rollover: basta cambiare il colore del testo in R=196 G=196 B=196 e niente corsivo.
• Per stato di errore: cambia il colore del testo in rosso e senza corsivo.

77 Fare clic e selezionare il pulsante Invia. Scegli il suo stato normale, arrotonda tutti gli angoli con 40 raggi e aumenta la sua larghezza come mostrato nello screenshot qui sotto. Cambia il font in Raleway Bold, size=20, allineato al centro, color: R=241 G=244 B=247, leading: regola il testo ‘submit’ al centro del pulsante aumentando questo valore (ho usato il 130%) .

78 Per i suoi stati rollover e mouse down, cambia il colore del tratto e il colore del testo in grigio (R=127 G=127 B=127). Infine, per il suo stato di “invio in corso”, cambia il tratto e il colore del testo in blu cielo (R=41 G=171 B=226).

79 Quando selezioni lo stato ‘invio in corso’ per questo pulsante di invio, vedrai che c’è un’altra casella di testo che dice ‘invio modulo…’. Seleziona questa casella e scegli il suo stato “invio in corso”. Cambia il carattere in Questrial, dimensione=14, colore: grigio, allineato al centro e senza corsivo. Scegli lo stato “invio riuscito” e cambia il colore del testo in azzurro (senza corsivo). Scegli il suo stato “invia errore” e cambia il colore del testo in rosso (senza corsivo). Il modulo di contatto è pronto.

80 Creare due caselle di testo. Digita – contattaci e nella seconda riga digita “tutti i campi sono obbligatori”. Per contattarci, usa il carattere: Rammetto One, taglia=60, colore: R=241 G=244 B=247, leading=100% e allineato a sinistra. Per il testo “tutti i campi sono obbligatori”, utilizza il carattere: Nobile corsivo, dimensione=26, colore: R=241 G=244 B=247, iniziale=100% e allineato a sinistra. Per questa casella di testo, applica il tratto inferiore di peso 1 e colora il bianco.

81 Digitare un paragrafo nella seconda casella di testo che abbiamo creato. Usa font: PT Sans Italic, size=14, color: R=241 G=244 B=247, leading=120%, allineato a sinistra e spazio prima=15.

82 Metti queste caselle di testo e il modulo sull’immagine che abbiamo posizionato. Regolali come segue.

83 Crea un’altra casella di testo per alcune informazioni di contatto come indirizzo dell’ufficio, e-mail e numeri di telefono. Metti questa casella di testo sull’immagine. Dovresti avere il seguente risultato.

Risultato finale della sezione ‘Contattaci’

Creazione piè di pagina

84 L’ultima sezione è piè di pagina. Ci sono tre guide nella parte inferiore, vale a dire: parte inferiore della pagina, piè di pagina e parte inferiore del browser. Quello che devi fare ora è assicurarti che la guida “in fondo alla pagina” corrisponda alla parte inferiore della sezione contattaci e che la guida “a piè di pagina” coincida con la guida “in fondo alla pagina”. Successivamente, puoi trascinare verso il basso la guida “parte inferiore del browser” per regolare lo spazio necessario per il piè di pagina.

85 Creare due rettangoli di larghezza 100% e H=168 per il primo e H=37 per l’altro. Cambia il colore di riempimento del rettangolo grande in bianco e usa R=47, G=48, B=55 per uno più corto.

86 Selezionare il primo rettangolo e provare a posizionarlo nell’area del piè di pagina. Non ci andrà. Invece, la guida in fondo alla pagina inizierà ad espandersi verso il basso. Per rendere questo rettangolo un elemento a piè di pagina, seleziona la casella di controllo “Piè di pagina” situata nell’area in alto a destra della finestra dell’applicazione. Fallo anche per il secondo rettangolo.

87 Ora posiziona questi rettangoli nell’area del piè di pagina e assicurati che il rettangolo grande sia leggermente sopra la guida del piè di pagina. La parte inferiore del rettangolo colorato deve combaciare con la parte inferiore della guida del browser. Altrimenti vedrai un piccolo spazio bianco dopo il piè di pagina che non ha un bell’aspetto.

88 Crea caselle di testo per il piè di pagina e digita quello che vuoi. Basta selezionare la casella di controllo “piè di pagina” per le caselle di testo che aggiungerai. Ho aggiunto del testo contenente Disclaimer e informazioni sul copyright.

89 Il badge “Made with Adobe Muse CC” può essere aggiunto dalla libreria dei widget nella sezione social. Puoi anche aggiungere collegamenti alla tua pagina Facebook, Twitter, Google+, LinkedIn, Pinterest, canale YouTube o collegamento Vimeo.

90 Il simbolo del copyright e molti altri simboli visualizzati accanto al testo Tutti i diritti riservati possono essere aggiunti dal pannello “Glifi” situato sul lato destro della finestra dell’applicazione. Se non è presente, vai al menu Finestra> scegli Glifi.

Creazione della sezione ‘Newsletter’

91 Fino ad ora, abbiamo progettato sezioni per tutte le voci di menu tranne una, ‘Newsletter’. Facciamo qualcosa di interessante con esso. Ricorda il simbolo della croce che abbiamo scaricato, verrà utilizzato qui (va bene se non l’hai scaricato, puoi comunque seguirlo). Innanzitutto, seleziona la casella di testo Newsletter e annota la sua larghezza e altezza dal pannello di trasformazione. Il mio è 81 x 17.

92 Ora, apri la libreria dei widget e trascina ‘Visualizzazione lightbox’ dalla sezione delle composizioni. Elimina i primi due trigger (situati in alto) ed elimina tutti i sottotitoli (situati in basso). Rendere la dimensione del terzo trigger uguale alla casella di testo Newsletter che è 81 x 17. Modificarne il riempimento e il tratto su nessuno per tutti gli stati.

93 Trascina la casella di testo della newsletter e posizionala all’interno di questo trigger in modo tale che tutti i bordi della casella di testo coincidano con i bordi del trigger. Ora trascina questo gruppo e inseriscilo nuovamente nel menu in cui era stato posizionato in precedenza. Quello che abbiamo fatto è che abbiamo applicato un link alla casella di testo Newsletter. Quando l’utente farà clic su di esso, il sito Web svanirà e verrà visualizzato il target.

94 Il prossimo passo è personalizzare il nostro target. Seleziona l’area grigia e assicurati che l’area di selezione corrente indichi “Target”. Dovrai fare clic tre volte per selezionarlo. Cambia il riempimento e il tratto su nessuno per tutti i suoi stati.

95 Aggiungi due caselle di testo e un semplice modulo di contatto (elimina i campi nome e messaggio e mantieni solo il campo email). Trascinali all’interno di questa composizione e assicurati che abbiano tutti un cerchio blu agli angoli.

96 Personalizza il form come abbiamo fatto nella sezione contattaci. Dovresti avere il seguente risultato. Per il campo di testo “Resta in contatto”, utilizza il carattere: Lobster, dimensione=40, colore:bianco, allineato al centro e 100% in primo piano. Per il testo descrittivo sotto di esso, usa il carattere: Ubuntu Light Italic, dimensione=14, colore: bianco, allineato al centro e 120% in avanti. Cambia il testo del pulsante di invio in “Iscriviti”.

97 Ora seleziona il pulsante di chiusura, spostalo e posizionalo nell’angolo in alto a destra di questo display lightbox come mostrato di seguito. Fare clic al suo interno finché non viene visualizzata la scritta “Etichetta” nell’area di selezione corrente. Elimina l’etichetta.

98 Modificare il riempimento e il tratto di questo pulsante di chiusura in nessuno per tutti gli stati e impostarne L=40 e A=40. Vai a Riempi> aggiungi immagine e cerca l’immagine incrociata. Scegli “ridimensiona per adattare” sotto l’opzione di adattamento.

99 Fai clic su Newsletter e vedrai un cerchio blu all’angolo. Fare clic e assicurarsi che le opzioni siano impostate come segue.

Risultato finale della sezione ‘Newsletter’

Creazione di collegamenti ipertestuali

100 L’ultimo compito rimasto è quello di applicare i collegamenti a ciascuna sezione. Per fare questo, scegli l’opzione ‘link anchor’ che si trova nella zona centrale in alto o premi la lettera ‘a’ sulla tua tastiera. Vedrai che il cursore cambia il suo aspetto in una pistola posizionata caricata con un’ancora di collegamento.

101 Quando fai clic sull’area di lavoro per posizionarlo, verrà visualizzata una finestra di dialogo che ti consente di rinominare un’ancora.

102 Crea ancore di collegamento per ogni sezione che abbiamo progettato, ovvero Home, Servizi, Perché noi, Testimonianze e Contattaci. Posiziona le ancore in cima a ogni sezione. L’ancora domestica è mostrata di seguito come esempio. Posizionare queste ancore è un passo importante e dovrebbe essere fatto con attenzione. Quando l’utente farà clic su un particolare collegamento, il sito Web scorrerà fino alla posizione in cui è stato posizionato l’ancora.

103 Ora applicheremo i collegamenti. Per fare ciò, seleziona la casella di testo “Home”. Vai all’opzione “Collegamenti ipertestuali” (che si trova in alto), fai clic sulla piccola freccia giù per espandere l’elenco. Qui puoi vedere tutti gli ancoraggi che abbiamo appena posizionato. Collegalo all’ancora ‘Home’. Ripeti questo passaggio per altre caselle di testo eccetto Newsletter poiché abbiamo applicato una visualizzazione lightbox ad essa.

Risultato finale dopo la creazione di collegamenti ipertestuali

Tocchi finali: modifica delle proprietà della pagina e aggiunta di Favicon

104 All’interno della modalità Plan, fare clic con il pulsante destro del mouse sulla home page e selezionare ‘Proprietà pagina. Apparirà una finestra di dialogo. Scegli la scheda “Opzioni” e sotto il nome della pagina, metti – “Benvenuto in example.com” e fai clic su OK. Questo è il testo che apparirà nella parte superiore della finestra del browser.

105 Passare a File > Proprietà sito. Nella scheda Layout, l’ultima opzione è “Favicon”. Quando ci passi sopra con il mouse, apparirà un pop-up che descrive cos’è una favicon e quale dovrebbe essere la dimensione ottimale. È utile aggiungere una favicon in quanto aiuta a far risaltare il tuo marchio e serve anche allo scopo di aiutare gli utenti a identificare facilmente il tuo sito se lo hanno aggiunto ai segnalibri.

Test ed esportazione

106 Prova il tuo sito andando su File > Anteprima sito nel browser o Ctrl+Alt+E. Questa volta non scegliere “Anteprima pagina nel browser” poiché i collegamenti non funzionano nell’anteprima della pagina. Potresti provare a posizionare gli ancoraggi in punti diversi per assicurarti che quando l’utente farà clic su un collegamento, il sito scorrerà fino alla sezione giusta e alla posizione giusta.

107 Infine, vai su File > Esporta come HTML (Ctrl+E). Sotto l’URL del sito, inserisci un nome come “example.com” e scegli la posizione. Fare clic su OK. Il sito web è pronto.

Risultato finale di ogni pagina

Prima pagina

Sezione “Servizi”.

Sezione “Perché noi”.

Sezione ‘Testimonianze’

Sezione “Contattaci”.

Sezione piè di pagina

Sezione ‘Newsletter’

CONCLUSIONE

Sono sicuro che hai ottenuto tutto ciò che ti ho promesso dopo aver seguito questo tutorial. Questo è solo un esempio. Gioca un po’ con questo fantastico strumento e progetta siti Web straordinari e professionali mentre esplori infinite possibilità creative lungo la strada. Grazie.