50 trucchi per utilizzare al meglio Macromedia Dreamweaver MX (I parte)

1- C’è interfaccia einterfaccia

Non appena decidiamo di lanciare Dreamweaver MX, si presentadavanti ai nostri occhi un box di scelta che ci chiede conquale tipo di piano di lavoro (Workspace) vogliamo procedere.Le possibilità sono di due tipi: continuare con ilvecchio e rassicurante stile della versione 4, oppurebuttarsi a capofitto nelle lusinghe del nuovo, con ilWorkspace di MX. In realtà ci sarebbe una terzapossibilità, legata più che altro a questionidi layout e di aspetto della schermata, ovvero una visione atutto schermo del codice Html, in puro stile Homesite,attivabile previo clic sulla spunta posta in basso, nel boxdi scelta iniziale. E se vogliamo tornare indietro e passareda un Worskpace all’altro? Semplice, non ci resta cheattivare il menu Edit, richiamare la voce Preferences e, unavolta sicuri di essere all’interno della sezioneGeneral, selezionare il pulsante Change workspace.

 

2- I nuovi vestiti dello sviluppatore

Dreamweaver MX mette a disposizione una serie dinovità interessanti, legate anche ad una disposizionepiù flessibile dei tools, dei pannelli di comando edei classici ispettori di proprietà (PropertiesInspector). La struttura della strumentazione principale nonè più fluttuante, ma si presenta come una barradegli strumenti quasi tradizionale, con una concezione afolder, ovvero, una sorta di schedario virtuale con tanto di“cartelline” cliccabili. La scelta di unacartellina specifica cambierà anche il contenuto deitools presenti nella barra degli strumenti.
Sono rimasti invariati i pulsanti per passare dalla paginadi Dreamweaver al codice Html, oppure ad un mix delle duepossibilità (tali pulsanti li trovi sotto la barradegli strumenti); stesso discorso vale per il box di testoche permette di scrivere il titolo della pagina e che agiscedirettamente sul tg<><<title></title>> del codice Html.

 

3- Ispettori e codici segreti

Se vogliamo accedere direttamente al codice Html della nostrapagina, realizzata con Dreamweaver, per modificaremanualmente alcuni parametri, abbiamo due possibilità.La prima è utilizzare i pulsanti relativi allavisualizzazione del codice, o del layout design, ben visibilisotto la barra degli strumenti principale. Il secondo metodoconsiste nel richiamare un vero e proprio ispettore di codice(Code Inspector) attraverso il menu Window/ others/ codeinspector. Il Code Inspector (tramite il quale possiamomodificare liberamente il codice Html) si presenta come unvero e proprio box fluttuante, o agganciabile agli altriinspector mediante trascinamento ai lati dello schermo.Piccola scorciatoia da tenere a mente: tramite il pulsanteF10 possiamo richiamare il Code inspector in modo automatico.

 

4- Definire bene, prima di agire

Prima di procedere con la realizzazione di una semplicepagina Web, conviene definire alcune procedure di base. Dalmenu Site/ New site sarà possibile definire lacartella all’interno della quale salvare le nostrepagine Html, comprese le immagini. E’ un passaggioimportante affinché tutto quello che impostiamo nellapagina (come ad esempio i link), funzioni alla perfezione,anche dopo aver trasferito i file on-line. Dreamweaver MXmigliora l’interfaccia del box New site e mette adisposizione la modalità Basic per essere guidati,passo passo, nei settaggi principali del progetto.


5- Definiamo il sito in ogni particolare

Accediamo al menu Site/New site e scegliamo il tab Advanced.In tale finestra è possibile definire alcuni parametridel nostro progetto. Dalla voce Local info (posta nellasezione Category) possiamo decidere tutte le impostazionirelative allo sviluppo della nostra pagina Web in locale.Dopo aver scelto un nome per il nostro sito, possiamoindicare la cartella dove salvare i file Html (Local RootFolder) e, successivamente, le immagini (Default ImageFolder). Spuntando la casella Enable Cache, Dreamweaveravrà la possibilità di memorizzare i nuovielementi editati (pagine e immagini). Qualsiasi cartellina ooggetto (per esempio un file SWF di flash) dovràessere sviluppato e inserito all’interno della Localroot folder scelta in partenza, in questo modo non avremobrutte sorprese di immagini non trovate e link nonfunzionanti.

 

6- L’universo in una tabella

Prima di inserire immagini, testo o animazioniall’interno della nostra pagine Web èconsigliabile costruire una struttura a tabelle, magari darendere invisibile, importante per ancorare e impaginare inostri contenuti in posizioni sicure. La versione MX diDreamweaver permette due metodi di creazione delle tabelleaccessibili mediante il tab Layout, posta nella barraprincipale degli strumenti. In tale sezione sono presenti dueposizioni, quella standard (Standard view) che permetteun’editing tradizionale, inserendo tabelle con leprocedure consuete di numero celle, colonne e cosìvia. La seconda posizione (Layout view) permette di tracciaredirettamente il disegno della tabella nella posizionedesiderata, semplicemente trascinando un rettangolo con ilmouse.

 

7- Primo esercizio di stretching

Dal menu Modify è possibile richiamare la voce PageProperties attraverso la quale impostare alcuni parametrifondamentali. Uno dei settaggi più trascurati èquello relativo ai margini della pagina Html. In questo caso,per ottenere una tabella che occupi tutta l’estensionedello schermo visibile, senza evidenziare lo stacco tra lastruttura tabellare e la finestra del browser, possiamoimpostare i margini tutti a zero, in modo da ottenere unatabella che possa combaciare con l’effettiva estensionedella pagina Web.

 

8- Secondo esercizio di stretching

In realtà, costruire la nostra tabella con i marginidella pagina impostati sul valore zero, utilizzandol’inserimento tradizionale (Standard View) non ci aiutadel tutto ad ottenere il risultato migliore. Dopol’impostazione dei margini è necessariospostarsi sulla posizione Layout View, dal tab Layout postanella barra degli strumenti, e disegnare la tabella.Tracciamo un rettangolo utilizzando lo strumento posto adestra del pulsante Layout view. In alto, in posizionecentrale sopra la tabella, possiamo vederne la sua dimensioneriportata in pixel; cliccando su tale valore viene mostratoun menu dal quale sarà possibile attivare la funzioneMake Column Autostretch, ovvero la possibilità diestendere automaticamente la tabella, secondo le dimensionidella pagina. Dreamweaver ci chiederà se vogliamocreare automaticamente uno Spacer, ovvero un’immagineinvisibile, che inserita in altre eventuali colonne dellanostra tabella, permetterà di evitare lasovrapposizione tra colonne “stretchate”.

 

9- Tutta una questione di livelli

Per costruire la struttura della nostra pagina Web possiamoricorrere ad uno strumento versatile e semplice dautilizzare: i livelli (layer). Accediamo alla sezione Layoute, rimanendo nella modalità Standard View, utilizziamolo strumento Draw Layer (pulsante posta a sinistra della voceStandard View) per disegnare letteralmente un rettangolo didimensioni assolutamente libere, direttamente sulla pagina daeditare. Nella nostra pagina dedicata a Spider Man possiamoinserire le immagini all’interno dei nostri layer. Ognilayer dispone di una maniglia di spostamento (in alto asinistra) e dei punti di ridimensionamento, per adattarloall’immagine inserita o semplicemente per modificarnele dimensioni. Il risultato consente di ancorare i contenuticome all’interno di una tabella, ma in modo piùsemplice e con possibilità di spostamento piùampie e libere.

10- Viaggio di andata e ritorno

Il problema dei layer è antico quanto il primo WordProcessor, ovvero è quello del diverso grado dicompatibilità tra i Browser disponibili per lanavigazione selvaggia su Internet. Vecchie versioni diNetscape Navigator potrebbero avere problemi seri avisualizzare i contenuti inseriti nei layer, Explorergarantisce una compatibilità più o meno totale.Nel caso il rischio non sia il nostro mestiere, molto megliocostruire una pagina leggibile da ogni piattaforma. E’possibile, una volta strutturata l’impaginazione dellanostra pagina attraverso i layer, convertire questi in unapiù tradizionale tabella, richiamando il menu Modify esuccessivamente la voce convert/layer to table. Si puòcomunque tornare indietro selezionando la voce complementareconvert/table to layer.



Ti potrebbe interessare anche

commenta la notizia