Personalizzare l area di lavoro

Transcript

1 1 Personalizzare l area di lavoro Panoramica della lezione In questa lezione conoscerai l interfaccia del programma Dreamweaver CS6 (Creative Suite 6) e imparerai come: Passare fra le viste documento Gestire i pannelli Scegliere un area di lavoro Sistemare le barre degli strumenti Personalizzare le preferenze Creare scelte rapide da tastiera personalizzate Utilizzare la finestra di ispezione proprietà Per completare questa lezione occorrono circa 20 minuti. Prima di cominciare, assicurati di avere copiato sul disco rigido i file della cartella lesson01, come descritto nella sezione Iniziare all inizio del volume. 2

2 Dreamweaver è un editor HTML WYSIWYG personalizzabile e facile da usare che non scende a compromessi per quanto riguarda potenza e flessibilità. Per fare tutto quello che fa Dreamweaver potrebbero servire anche dieci programmi, e nessuno di essi sarebbe altrettanto divertente da usare. 3

3 Panoramica dell interfaccia Dreamweaver è l editor HTML (Hypertext Markup Language) standard di settore, e la sua diffusione è ampiamente giustificata. Dispone di un incredibile gamma di strumenti per la progettazione e la modifica del codice, offrendo qualcosa a ogni genere di utenti. L interfaccia di Dreamweaver include numerosi pannelli e barre degli strumenti configurabili dall utente. Prenditi il tempo necessario per familiarizzare con i nomi di questi componenti. A Barra del menu B Barra applicazioni C Menu delle aree di lavoro D Scheda del documento E Barra degli strumenti Documento F Barra degli strumenti Codifica G Vista Codice H Vista Progettazione I Pannello Inserisci J Pannello Stili CSS K Selettori di tag L Finestra di ispezione proprietà M Pannello File I programmatori ameranno la varietà e i perfezionamenti dell ambiente vista Codice, mentre gli sviluppatori adoreranno il supporto per ASP, PHP, ColdFusion e JavaScript, fra gli altri linguaggi di programmazione. I designer si meraviglieranno di fronte all accurata rappresentazione WYSIWYG (What You See Is What You Get) di testo e immagini durante il lavoro, che evita loro di sprecare ore per eseguire l anteprima nel browser. I principianti apprezzeranno senza dubbio l interfaccia potente e semplice da usare. Qualsiasi tipo di utente tu sia, se utilizzi Dreamweaver non ci saranno compromessi. D F A B C K L G E Se pensi che un programma così avanzato debba essere anche complesso, lento e pesante, sei in errore. Dreamweaver offre gran parte delle sue funzionalità tramite pannelli e barre degli strumenti ancorabili che puoi visualizzare o nascondere e disporre in innumerevoli combinazioni per creare la tua area di lavoro ideale. Questa lezione introduce l interfaccia di Dreamweaver e rivela alcune delle sue potenzialità. Se vuoi procedere in questa panoramica, scegli File > Apri e, nella cartella lesson01, seleziona start here.html. Fai clic su Apri. H I M J 4 LEZIONE 1 Personalizzare l area di lavoro

4 Cambiare vista e dividere le viste Dreamweaver offre ambienti dedicati per i programmatori e i designer, oltre a un opzione composita che fonde le due cose insieme. Vista Progettazione Nella vista Progettazione l area di lavoro di Dreamweaver si concentra sul suo editor WYSIWYG, che fornisce una rappresentazione molto fedele, sebbene non perfetta, della pagina web come apparirà nel browser. Per attivare la vista Progettazione, fai clic sul pulsante della vista Progettazione sulla barra degli strumenti Documento. Vista Progettazione Vista Codice Nella vista Codice l area di lavoro di Dreamweaver si concentra esclusivamente sul codice HTML e su una varietà di strumenti di produttività per la modifica del codice. Per attivare la vista Codice, fai clic sul pulsante della vista Codice sulla barra degli strumenti Documento. Vista Codice Adobe dreamweaver CS6 Classroom in a Book 5

5 Vista Dividi La vista Dividi offre un area di lavoro composita che ti permette di accedere simultaneamente sia alla progettazione sia al codice. Le modifiche apportate in una delle finestre si aggiornano istantaneamente nell altra. Per attivare la vista Dividi, fai clic sul pulsante della vista Dividi sulla barra degli strumenti Documento. Per sfruttare la maggiore larghezza dei nuovi schermi, Dreamweaver divide l area di lavoro verticalmente per impostazione predefinita. Vista Dividi Puoi anche dividere lo schermo orizzontalmente, disattivando la divisione verticale nel menu Visualizza. Per disattivare la funzionalità, scegli Visualizza > Dividi in verticale. Vista Dividi con divisione orizzontale 6 LEZIONE 1 Personalizzare l area di lavoro

6 Gestire i pannelli È possibile accedere alla maggior parte dei comandi tramite i menu, tuttavia gran parte delle funzionalità sono disponibili nei pannelli e nelle barre degli strumenti, che possono essere visualizzati o nascosti a piacere. Puoi visualizzare, nascondere, disporre e ancorare i pannelli sullo schermo come desideri, e puoi persino spostarli su un secondo o terzo schermo. Raggruppamenti standard dei pannelli Il menu Finestra elenca tutti i pannelli disponibili. Se non vedi un determinato pannello sullo schermo, selezionalo nel menu Finestra. Accanto al nome del pannello nel menu compare un segno di spunta indicante che il pannello è aperto. A volte un pannello può trovarsi dietro un altro sullo schermo ed essere difficile da individuare, ma basta selezionarlo nel menu Finestra per farlo apparire in superficie. Ridurre a icona i pannelli Per fare spazio per altri pannelli o per poter accedere a elementi dell area di lavoro che al momento sono coperti, puoi ridurre a icona o espandere i singoli pannelli nella loro posizione. Per ridurre a icona un pannello, fai doppio clic sulla scheda che riporta il nome del pannello. Per espandere il pannello, fai doppio clic di nuovo sul pannello. Adobe dreamweaver CS6 Classroom in a Book 7

7 Puoi anche ridurre a icona o espandere un singolo pannello in una pila di pannelli facendo doppio clic sulla sua scheda. Riduzione a icona di un pannello in una pila tramite la sua scheda Per recuperare maggiore spazio sullo schermo, puoi ridurre a icona i gruppi o le pile di pannelli facendo doppio clic sulla loro barra del titolo. Puoi anche ridurre a icona i pannelli facendo clic sull icona a doppia freccia ( ) nella barra del titolo del pannello. Quando sono ridotti a icona, puoi accedere ai singoli pannelli facendo clic sulla loro icona o pulsante. Il pannello selezionato apparirà a sinistra o a destra nell area di lavoro, dove c è spazio. Sequenza di riduzione fino alla riduzione a icona Rendere mobili i pannelli È possibile rendere mobile singolarmente un pannello raggruppato con altri pannelli. Per rendere mobile un pannello, trascina la sua scheda allontanandola dal gruppo. Estrazione di un pannello tramite il trascinamento della sua scheda 8 LEZIONE 1 Personalizzare l area di lavoro

8 Trascinare i pannelli Puoi cambiare l ordine della scheda di un pannello trascinandola nella posizione desiderata all interno del gruppo. Trascinamento di una scheda per cambiarne la posizione Per riposizionare i pannelli, i gruppi e le pile nell area di lavoro, trascinali tramite la loro barra del titolo. Trascinamento di un gruppo o di una pila di pannelli in una nuova posizione Raggruppare, impilare e ancorare i pannelli Puoi creare gruppi personalizzati trascinando un pannello in un altro. Dopo aver spostato il pannello nella posizione corretta, Dreamweaver evidenzia l area, chiamata zona di rilascio, mostrandola in blu (l operazione è visibile nella figura che segue). Rilascia il pulsante del mouse per creare il nuovo gruppo. Creazione di nuovi gruppi Adobe dreamweaver CS6 Classroom in a Book 9

9 In alcuni casi potresti voler mantenere entrambi i pannelli visibili contemporaneamente. Per impilare i pannelli, trascina la scheda desiderata sopra o sotto un altro pannello. Quando compare la zona di rilascio blu, rilascia il pulsante del mouse. Creazione di pile di pannelli I pannelli mobili possono essere ancorati sul lato destro, sinistro o inferiore dell area di lavoro di Dreamweaver. Per ancorare un pannello, un gruppo o una pila, trascina la sua barra del titolo sul lato desiderato dell area di lavoro. Quando compare la zona di rilascio blu, rilascia il pulsante del mouse. Ancoraggio dei pannelli 10 LEZIONE 1 Personalizzare l area di lavoro

10 Scegliere un area di lavoro Un modo veloce per personalizzare l ambiente del programma è utilizzare una delle aree di lavoro predefinite di Dreamweaver. Queste aree di lavoro sono state ottimizzate da esperti e mettono a portata di mano gli strumenti che servono. Dreamweaver CS6 include 11 aree di lavoro predefinite. Per accedere a queste aree di lavoro, selezionale nel menu Area di lavoro che si trova sulla barra applicazioni. Menu Area di lavoro Gli utenti di Dreamweaver di lunga data possono scegliere l area di lavoro Classica, che mostra i pannelli e le barre degli strumenti a cui sono abituati dalle precedenti versioni del programma. Area di lavoro Classica Adobe dreamweaver CS6 Classroom in a Book 11

11 L area di lavoro Programmatore genera un interfaccia che si concentra sul codice HTML e sugli strumenti di modifica del codice. Area di lavoro Programmatore L area di lavoro Designer fornisce l ambiente ottimale per il design visivo. Area di lavoro Designer 12 LEZIONE 1 Personalizzare l area di lavoro

12 sistemare le barre degli strumenti Alcune funzionalità del programma sono così comode che vorrai averle a disposizione costantemente nella forma di barre degli strumenti. Tre delle barre degli strumenti, ovvero Rendering stile, Documento e Standard, sono visualizzate in orizzontale lungo il lato superiore della finestra del documento. La barra degli strumenti Codifica è mostrata invece in verticale, ma soltanto nella finestra della vista Codice. Esplorerai le funzionalità di queste barre degli strumenti in alcuni degli esercizi successivi. Rendering stile Documento Documento (vista Dal vivo) Standard Codifica Mostra la barra degli strumenti desiderata selezionandola nel menu Visualizza. Personalizzare le preferenze Continuando a lavorare con Dreamweaver, riuscirai a individuare un area di lavoro per te ottimale, dotata dei pannelli e delle barre degli strumenti necessarie per tutte le attività che hai bisogno di eseguire. Puoi memorizzare questa configurazione in un area di lavoro personalizzata a cui puoi assegnare un nome a piacere. Per salvare un area di lavoro personalizzata, crea la configurazione della schermata che per te è ottimale, scegli Nuova area di lavoro nel menu Area di lavoro sulla barra applicazioni e assegnale il nome desiderato. Salvataggio di un area di lavoro personalizzata AdObE dreamweaver CS6 CLASSrOOm IN A book 13

13 Creare scelte rapide da tastiera personalizzate Un altra potente funzionalità di Dreamweaver è la capacità di creare scelte rapide da tastiera e modificare quelle esistenti. Le scelte rapide da tastiera sono caricate e mantenute in modo indipendente dalle aree di lavoro personalizzate. Esiste un comando senza il quale non puoi vivere che non ha una scelta rapida da tastiera associata? Creala! Prova questa procedura: 1 Scegli Modifica > Scelte rapide da tastiera/dreamweaver > Scelte rapide da tastiera. 2 Fai clic sul pulsante Duplica serie per creare una nuova serie di scelte rapide da tastiera. 3 Immetti un nome nel campo Nome della copia della serie. Fai clic su OK. 4 Scegli Comandi di menu nel menu Comandi. 5 Seleziona Salva tutto nell elenco dei comandi File. Nota che il comando Salva tutto non ha una scelta rapida da tastiera associata, sebbene lo utilizzerai di frequente in Dreamweaver. 6 Inserisci il cursore nel campo Premi tasto. Premi Ctrl+S/Cmd-Opt-S. Compare un messaggio d errore con l avviso che la scelta rapida da tastiera che hai scelto è già assegnata a un altro comando. Potremmo cambiare l assegnazione di questi tasti, ma preferiamo scegliere altri tasti. 14 LEZIONE 1 Personalizzare l area di lavoro

14 7 Premi Ctrl-Alt-Maiusc-S/Cmd-Ctrl-S. Questa combinazione è inutilizzata, perciò la assegniamo al comando Salva tutto. 8 Fai clic sul pulsante Cambia. La nuova scelta rapida da tastiera viene assegnata al comando Salva tutto. 9 Fai clic su OK per salvare la modifica. Hai creato una tua scelta rapida da tastiera che utilizzerai nelle lezioni successive. Utilizzare la finestra di ispezione proprietà Uno strumento vitale nel tuo flusso di lavoro è la finestra di ispezione proprietà. Questo pannello appare tipicamente in fondo all area di lavoro, è contestuale e si adatta al tipo di elemento che selezioni. Utilizzare la scheda HTML Inserisci il cursore in qualsiasi contenuto di testo sulla pagina, e la finestra di ispezione proprietà ti permette di assegnare tag HTML e formattazione di base. Quando il pulsante HTML è selezionato, puoi applicare i tag heading o paragraph, oltre che grassetto, corsivo, punti elenco, numeri, rientri e molti altri attributi e formattazioni. Scheda HTML della finestra di ispezione proprietà Adobe dreamweaver CS6 Classroom in a Book 15

15 Utilizzare la scheda CSS Fai clic sul pulsante CSS (Cascading Style Sheet) per accedere velocemente ai comandi per assegnare o modificare la formattazione CSS. Scheda CSS della finestra di ispezione proprietà Proprietà delle immagini Seleziona un immagine in una pagina web per visualizzare i controlli per gli attributi e la formattazione delle immagini nella finestra di ispezione proprietà. La finestra di ispezione proprietà per un'immagine Proprietà delle tabelle Per accedere alle proprietà delle tabelle, inserisci il cursore in una tabella e fai clic sul selettore del tag in fondo alla finestra del documento. La finestra di ispezione proprietà per una tabella 16 LEZIONE 1 Personalizzare l area di lavoro

16 Domande di verifica 1 Dove si trovano i comandi per visualizzare e nascondere i pannelli? 2 Dove si trovano i pulsanti delle viste Codice, Progettazione e Dividi? 3 Cosa si può salvare in un area di lavoro? 4 Le aree di lavoro caricano anche le scelte rapide da tastiera? 5 Cosa accade nella finestra di ispezione proprietà quando si inserisce il cursore in vari elementi nella pagina web? Risposte 1 Tutti i pannelli sono elencati nel menu Finestra. 2 Questi pulsanti sono componenti della barra degli strumenti Documento. 3 Le aree di lavoro possono salvare la configurazione della finestra del documento e dei pannelli aperti, nonché la dimensione e la posizione dei pannelli sullo schermo. 4 Le scelte rapide da tastiera sono caricate e mantenute in modo indipendente dalle aree di lavoro. 5 La finestra di ispezione proprietà si adatta all elemento selezionato, mostrando informazioni e comandi di formattazione pertinenti. Adobe dreamweaver CS6 Classroom in a Book 17