Progettazione e costruzione di un sito - Introduzione

Transcript

1 Prgettazine e cstruzine di un sit - Intrduzine Differenza fra pagina web, sit e prtale Le pagine web sn dcumenti di test pubblicati sul Web, che cmprendn cllegamenti vers file grafici e vers altre pagine web. Una pagina web è cstituita dall'insieme delle infrmazini (test e grafica) e dagli strumenti di navigazine (Iink, pulsanti, icne) visualizzabili entr una schermata. Slitamente il clre dei link attivi è blu mentre quell dei link visitati è prpra. Essend quest l standard è sttintes che all'utente la navigazine risulterà più chiara ed immediata se si manterrann questi clri peraltr cnsciuti. Un sit web è cstituit da un cert numer di pagine web. Attivand un link ipertestuale, a partire da un dcument presente in rete, tteniam cme rispsta una pagina web, che può essere cntenuta all'intern dell stess sit, ppure appartenere ad un sit del tutt divers, magari cllcat fisicamente lntanissim da quell che stavam cnsultand. Se in un sit sn presenti cllegamenti cn altri siti, per evitare di perdere il visitatre, cnviene fare in md di caricare le infrmazini all'intern di una finestra (frame), dand csì la pssibilità di cnsultare dcumenti interessanti presenti in siti diversi senza lasciare quell da cui si è partiti. La prima pagina di un sit web è la hme page. Questa pagina, essend la pagina intrduttiva del sit, deve avere la funzine di smmari, spiegand ed illustrand brevemente al visitatre, cme sn rganizzati gli argmenti e i cntenuti del sit, nnché frnendgli un quadr dei cllegamenti e dei percrsi da cmpiere per trvare le infrmazini desiderate. Un prtale è un sit, lug di cmunicazine verticale tra cmunità e sggett e al temp stess anche rizzntale tra target di utenza. Oltre a cntenere pagine di presentazine dell'azienda dell'ente e dei prdtti fferti, il sit prtale ffre servizi interattivi, vver dei servizi per la "cmmunity" di riferiment, quindi frum di discussine, newsletter, bacheche. Un sit per gni esigenza Prima di prcedere cn la realizzazine del sit vi dvete chiedere csa desiderate ttenere e quali strumenti utilizzare. Il prcess può essere divis in quattr fasi fndamentali: prgettazine cstruzine test pubblicazine in rete Esiste inltre una fase successiva che riguarda la manutenzine del sit, ciè l aggirnament dei cntenuti, l espansine, la verifica del crrett funzinament. Ogni bun sit è frutt di una attenta rganizzazine su carta: definite quindi in prima analisi quali sarann i livelli delle diverse categrie di argmenti, e quali sarann i percrsi e i cllegamenti ipertestuali delle varie pagine che cmpngn il sit web. La più diffusa rganizzazine delle pagine è in frma gerarchica (struttura ad alber): si parte da una hme page da cui si passa ad un cert numer di sttsezini, che a lr vlta prtan ad altre sttsezini. Quest schema risulta facile da aggirnare e cnsente di definire cn precisine i layut di pagina. Se però il sit spita una racclta di ft un raccnt si può prgettare una struttura lineare: una pagina cnduce alla successiva, che a sua vlta prta alla pagina dp, e csì via. Secnd l schema di struttura scelt, ccrre quindi stabilire il layut delle pagine del sit, e decidere quali link inserire e dve inserirli all'intern delle pagine del sit: dalla struttura si definiscn le gerarchie degli argmenti delle pagine interne, i cllegamenti ipertestuali e la grafica che caratterizzerà l stile del sit. Ovviamente l schema della struttura ptrà essere rielabrat fintant che il sit e le pagine che l cmpngn nn sarann ritenute funzinali rispett agli biettivi e alle aspettative iniziali. prf. Vanda Ribldi pag.1

2 Prgettazine e cstruzine di un sit - Intrduzine Durante questa fase di analisi per la definizine dell schema di struttura del sit, nn dimenticatevi alcune regle di buna prgettazine: 1. la barra di navigazine nn deve mancare: serve a dare un idea dei cntenuti e aiuta durante l esplrazine del sit 2. in gni pagina deve esserci un cllegament cn la hme page e al fnd un link che riprti in cima alla pagina 3. tutte le infrmazini rilevanti devn essere raggruppate in cima 4. il sit deve essere aggirnat peridicamente: megli prevedere una sezine di news 5. lasciate al navigatre la pssibilità di cntattarvi, indicand il vstr indirizz di psta elettrnica HTML Una vlta definita la struttura del vstr sit e i layut delle pagine che l cmpngn, passiam ad analizzarne il cdice di base, l'html (Hypertext Markup Language, linguaggi ipertestuale a marcatura). Il mi cnsigli è quell di prvare ad analizzare una pagina a vstra scelta, per cnsentirvi di cmprendere in maniera dettagliata, cme funzinan gli elementi che in essa sn cntenuti. Cercate quindi una pagina che vi sembri adatta al vstr scp, e iniziate ad sservarne gli elementi, visualizzandne il cdice srgente scegliend dal menù "visualizza", l'pzine "visualizza cdice srgente" cn Netscape, "HTML" per gli utenti di le (Internet Explrer). Tale linguaggi cntiene dei cmandi testuali, racchiusi tra i simbli di maggire e minre, nn visibili a chi visita la pagina, ma sl al brwser. E' quindi il navigatre che, leggend il cdice HTML, definisce la visualizzazine degli elementi cntenuti nella pagina: test, grafica, files multimediali e i cmandi per cllegare gni pagina alle altre pagine e alle risrse di Internet. L scp che ci siam prefissati però nn è quell di creare pagine web digitand HTML (csa che si può fare cn un qualsiasi wrd prcessr): esistn prgrammi che generan autmaticamente il cdice, facilitandvi il cmpit; ma avere un'idea delle regle base dell'html cnsentirà di intervenire direttamente sull' HTML, qualra si presentasse la necessità di mdificare di "pulire" parti del cdice del dcument da infrmazini inutili che alcuni prgrammi crean (cme per esempi Frntpage di Micrsft), nnché di cmprendere megli il funzinament dei prgrammi utilizzati per realizzare pagine web. Prgrammi per l realizzazine delle pagine web Fra i prgrammi più utilizzati per la creazine di pagine web trviam: editr testuali: sn prgrammi che permettn mdifiche dirette sul cdice HTML pur, cn la pssibilità di vedere in anteprima il risultat. Questi prgrammi facilitan la scrittura del cdice mettend a dispsizine dell'utente cmandi attivabili cn un semplice clic. Un di questi è 1 st page 2000, facile ed immediat da utilizzare. L ptete scaricare direttamente dalla rete senza nessun cst editr visuali: Frntpage di Micrsft e Dreamweaver di Macrmedia sn fra i più utilizzati. Questi prgrammi fann parte degli editr WYSIWYG, acrnim per "'What Yu See Is What Yu Get" vver quell che viene visualizzat sull scherm crrispnde a quell che si vede caricand la pagina cn il brwser. In altre parle questi editr nn visualizzan il cdice HTML, a men che nn venga scelta l'appsita pzine di visualizzazine, ma esclusivamente gli ggetti, le immagini ed il test delle vstre pagine. In quest md nn dvrete lavrare sul cdice HTML, ma sl cn gli elementi da inserire nella pagina, che verrann visualizzati cme nel brwser. Ptrete spstare gli ggetti trascinandli semplicemente cn il muse, sfruttand layut di pagina predefiniti, minimizzand csì ntevlmente i tempi di realizzazine Paint Shp Pr, Adbe Phtshp, CreIDRAW, pssn essere utilizzati per la grafica e per il trattament delle immagini. Slitamente il Paint Shp Pr e il CrelDRAW sn utilizzati per le immagini piane, per le icne e i bttni, nnché per ttenere mbreggiature ed effetti tridimensinali cn il test. Phtshp, invece, ltre a cnsentire l'acquisizine delle immagini attravers l scanner, cnsente di ritccare le ftgrafie imprtate e di applicare filtri ed effetti particlari alle immagini in generale prf. Vanda Ribldi pag.2

3 Prgettazine e cstruzine di un sit - Intrduzine Firewrks e Flash di Macrmedia: il prim ffre la pssibilità di creare gif animate e di cmprimere tutti i tipi di immagini; il secnd è in grad di creare animazini per le pagine web su base vettriale e quindi estremamente leggere da caricare. Flash viene spess utilizzat per animazini in splash page (pagine intrduttive) ltre che per realizzare interi siti. L imprtanza della grafica L aspett più cmpless della creazine di un sit Web è l impstazine grafica. Nn sl bisgna creare pagine accattivanti, ma anche facili e velci da navigare. Nn è csa da pc, cnsiderand che sul Web si cmunica prevalentemente per immagini. Una delle fnti pssibili per l'acquisizine di immagini da elabrare e ritccare, è l scanner. 1 Il prim pass per l'acquisizine di immagini attravers l scanner, è quell di impstare intrn ai 300/400 dpi (punti/pllice) l'pzine di scansine A quest punt l'immagine ptrò essere ritccata ed elabrata cn un qualunque prgramma di grafica Perché sia pssibile intervenire sull'immagine acquisita, è necessari cnvertire la stessa al metd RGB (acrnim per Rss/Verde/Blu), quest cnsentirà l'utilizz di filtri ed effetti speciali, essend il sistema utilizzat dalle schede vide per definire il clre di gni singl punt Sl dp aver ttenut l'effett desiderat, si pssn mdificare le dimensini dell'immagine, a secnda dell spazi di inseriment dispnibile all'intern della vstra pagina web. L'immagine andrò salvata in frmat GIF JPG prima di essere inserita nella pagina web. Sl dp aver cmpiut tutte le perazini precedenti, l'immagine ptrò essere cmpressa, abbassandne la risluzine fin a 72 dpi (punti/pllice), valre più che sufficiente per una crretta visualizzazine sul mnitr. Questa cmpressine permetterò di ttimizzare i tempi di caricament delle pagine. Le immagini per il Web: vettriali bitmap Nel cas della grafica vettriale, le immagini vengn create attravers una cmbinazine di linee, curve e frmule matematiche e la clrazine avviene attravers la clrazine delle linee e delle aree chiuse. L'immagine risulta più definita e netta, estremamente leggera (in termini di memria), ma mlt men particlareggiata rispett ad un 1 immagine bitmap elabrata pixel per pixel. La grafica vettriale si presta per i disegni semplici e per le frme piatte. La grafica bitmap raster, invece, crea le Immagini usand punti clrati chiamati pixel, per cui la cmpsizine avviene cme un msaic, e la memrizzazine avviene attravers una srta di database, basat su pixel e clri. La grafica bitmap riesce quindi a rendere le immagini di qualità maggire, piché cnserva un elevat numer di clri. La grafica bitmap è adatta per rappresentare la realtà, quindi per le ftgrafie e per la visualizzazine su vide delle immagini rendendle più leggere. Ricrdate che l'us di immagini vettriali sul Web è limitat a casi particlari, cme ad esempi animazini Flash. Fra le immagini bitmap, i frmati GIF e JPG sn quelli utilizzati per il Web. Vediamne di seguit le differenze: GIF (Graphics Interchange Frmat) è un frmat adatt alle immagini che presentan grandi blcchi di clri a tinta unita, cme disegni, grafici e icne. I file GIF sn limitati a 256 clri (8 bit di clre). GIF INTERLACCIATE: per gli utenti che accedn al Web attravers cnnessini lente, il trasferiment di elementi grafici di grandi dimensini nn risulta cnveniente. Per miglirare questa situazine è stat intrdtt il frmat GIF interlacciat. I file interlacciati appain in md incrementale: gni pass miglira la risluzine dell'immagine. Quest cnsente di far intuire all'utente il risultat finale e, nel cas nn fsse interessat, cnsente di prcedere prima 1 Dvete evitare di scaricare immagini da altri siti di scansinare dai catalghi di agenzie ftgrafiche: ptreste incrrere in frti sanzini per lesine dei diritti di autre prf. Vanda Ribldi pag.3

4 Prgettazine e cstruzine di un sit - Intrduzine che l'immagine venga cmpletamente caricata, cn un semplice clic del muse. GIF TRASPARENTI: un file GIF permette la creazine di elementi grafici bitmap che hann un clre impstat sulla trasparenza. Questi elementi, cllcati sull sfnd, cnsentn di visualizzare il clre l'immagine sttstante. In quest md è pssibile creare cmplesse relazini tra test e immagine ( tra immagine e immagine) senza che sia necessari trattare l'intera pagina cme un unic grande element grafic. GIF ANIMATE: per realizzare GIF animate ccrre creare una serie di immagini che, visualizzate una dp l'altra cme ftgrammi di un film, frmin una scena animata. A differenza di altri frmati di animazine, quell GIF nn richiede, per funzinare, l'installazine di prgrammi aggiuntivi (plug-in cme shckwave quicktime), necessari, invece, per visualizzare altri tipi di animazini. Esistn in rete mlti siti dve trvare GIF animate di gni genere. JPEG (frmat prpst dal cmitat Jint Phtgraphic Experts Grup) è un frmat adatt a cmprimere immagini cmplesse, cn mlte sfumature di clri, cme le ftgrafie. I file JPEG sn immagini a 24 bit milini di clri. In base alla scelta dell'impstazine della qualità (Phtshp per esempi ne ffre quattr: bassa, media, alta e massima), è pssibile ridurre le dimensini di un'immagine. Dat che la risluzine massima dell scherm del cmputer è di 72 punti per pllice (dpi), si pssn ttenere facilmente immagini a tutt scherm, senza superare i 50 Kilbyte. 2 Una csa da nn dimenticare mai nel cas di immagini, è l'inseriment del test alternativ, vver test che appare quand il muse passa su un'immagine e che prende il pst dell'immagine se questa nn viene scaricata. La struttura della pagina Un dei sistemi più semplici e diffusi per definire i campi in cui inserire gli elementi che cmpngn le pagine web, è l'utilizz di tabelle invisibili, che attravers l definizine di aree fisse all'intern della pagina, frniscan una struttura in cui cllcare test e grafica. Sempre su carta ptete definire quante tabelle ccrrn per impstare l vstra pagina, e quante celle le tabelle dvrann cntenere. Ptrete quindi definire, all stess md, gli spazi fra gli elementi e preparare i cntenuti e l grafica in base alla struttura scelta. Le dimensini di una tabella pssn essere fissate in pixel ltre che in percentuale, e quindi rese immdificabili rispett al ridimensinament della finestra. Quest garantisce una crretta lettura della pagina indipendentemente dal brwser utilizzat. Un altr sistema per impaginare è rappresentat dall'utilizz di frame 3 : si divide la pagina stessa in finestre multiple, dve gni finestra (frame) cntiene dati unici e separati Un frame può essere, per esempi, impstat per l scrriment della pagina, mentre un altr rimane fiss. Per quant riguarda l scrriment, è pssibile impstare le barre in md che sian visibili indipendentemente dalla dimensine del cntenut del frame, ppure sltant quand il cntest si espande ltre la dimensine della finestra. I frame cnsentn ai cllegamenti ipertestuali di mdificare sltant una parte della pagina e rappresentan l strument ideale per separare i pannelli di cntrll della navigazine dal cntenut della pagina. Anche le dimensini di un frame,cme per le tabelle, pssn essere impstate in base ad un numer di pixel in percentuale, rispett alla finestra del brwser, ppure pssn ccupare tutt l spazi rimanente. I frame cnsentn di visualizzare il cntenut di una pagina cn diverse mdalità, grazie all'utilizz delle ancre (target). Queste permettn di aprire le pagine in nuve finestre in specifici frame. I target sn assciati direttamente ai cllegamenti ipertestuali e cntrllan in che punt della struttura del frame viene visualizzat il file in arriv. 2 L algritm di cmpressine è distruttiv, nel sens che prevede delle perdite di infrmazini che si traducn in un abbassament della qualità. Inltre la cmpressine è irreversibile. 3 I frames nn sn supprtati da tutti i brwsers prf. Vanda Ribldi pag.4

5 Prgettazine e cstruzine di un sit - Intrduzine Un altr sistema per impaginare gli elementi grafici e testuali all'intern delle vstre pagine web è l'utilizz dei CSS ("Cascading Stile Sheets") fgli di stile a cascata. I CSS sn un utile strument per psizinare gli elementi all'intern delle pagine web. Gli elementi vengn infatti cllcati in base a scstamenti stabiliti, misurati in pixel in percentuale, rispett ai brdi della finestra. I CSS ffrn la pssibilità di cmprre gli elementi su vari strati cnsentendne la svrappsizine. L'utilizz dei fgli di stile ha dei limiti, impsti dall'inadeguatezza di mlti brwser utilizzati. Un trucc per facilitare l'impaginazine degli elementi dell vstr pagina web è quell di fare us di file GIF a pixel singl. Questi file vi cnsentirann di gestire l'allineament degli elementi all'intern delle celle delle tabelle presenti nella vstra pagina senza appesantirla piché, si tratta di immagini picclissime. Queste immagini GIF sn invisibili, perché impstate su un clre trasparente perché impstate sull stess clre dell sfnd della pagina. Ptrete utilizzare questi spaziatri a pixel singl in vari punti della vstra pagina per cllcare le immagini per allargare l spazi al centr delle tabelle. Se vlete prvare a creare un file GIF a pixel singl per cntrllare megli l'impaginazine degli elementi grafici e di test all'intern della vstra pagina web, nn dvete fare altr che aprire un nuv disegn cn un prgramma di grafica qualunque e impstare le dimensini dell'immagine ad un pixel. Una vlta individuat il clre dell sfnd della vstra pagina, riempite l'immagine dell stess clre rendetela trasparente nel cas in cui vgliate utilizzare quest spaziatre in più pagine, anche cn sfndi di divers clre. L stess effett ptete ttenerl creand file GIF a linee di pixel rizzntali verticali mdificand il valre di larghezza e/ altezza. Si tenga presente che utilizzare più vlte la stessa immagine in una pagina nn significa ricaricarla più vlte, quindi l'utilizz ripetut della stessa immagine a pixel singl nn appesantirà la pagina. Il clre può cstituire un efficace strument per indicare l relazine tra le varie pagine di un sit; ess può essere utilizzat per diversificare i diversi livelli di infrmazine delle pagine del sit: il clre della hme page delle pagine generali può essere divers da quell delle pagine interne. Quindi gni clre crrispnde ad un divers livell di specificità dell'infrmazine. Il test Il test deve essere chiar e leggibile, ben strutturati i cntenuti, i paragrafi rdinati e brevi; più le linee di test sn lunghe, più difficile è la lettura. Nn utilizzate quindi una clnna più larga di 450 pixel circa, vver le dimensini che nrmalmente utilizziam cn un wrd prcessr. Abbndate cn gli spazi vuti, piché aiutan la lettura e fann risaltare il test e le immagini rendend la pagina più leggera. Cnviene prevedere sempre un dppi spazi tra un paragraf e l'altr, servirà a rendere più chiara ed immediata la lettura del test. Inltre, cercate di scrivere blcchi di test di lunghezza unifrme. Impaginate preferibilmente a sinistra, ma nn giustificate il test piché quest intrduce spess buchi al su intern. Preferite sempre fnt che dian la sicurezza di essere letti da qualsiasi brwser, per esempi: Arial, Times New Rman, Verdana, Tahma, Impact, Cmic, Curier. Ricrdatevi, inltre, che se il navigatre nn trva il fnt specificat l sstituirà cn un di default e l'effett sarà sicuramente divers da quell desiderat. Nn utilizzare trppi fnt nella stessa pagina perché ptreste cnfndere il visitatre. La csa miglire è di sceglierne due: un per titli ed un per il crp del test. Usate il grassett il clre quand dvete evidenziare qualcsa piuttst che il crsiv, piché le sue curve ne rendn difficile la lettura sull scherm. Nn usate le parle sttlineate perché si cnfndn cn i link e il lettre ptrebbe cliccarci spra rimanendne delus. Evitate, se pssibile, di scrivere parle frasi in MAIUSCOLO all'intern del crp test, piché in Internet equivale ad "URLARE". Ottima tecnica di impaginazine è l'utilizz degli elenchi puntati piché, ltre ad essere facili da scrrere, fann risaltare subit al nstr sguard le cse più imprtanti. Inltre chiariscn la sequenza e la relazine tra le idee i fatti espsti nel test, semplificand l'espsizine e la lettura di un argment cmpless. Anche il titl e i stttitli sn imprtantissimi perché cstituiscn già da sli un livell di lettura, dal mment che fann capire immediatamente il cntenut di una pagina. prf. Vanda Ribldi pag.5

6 Prgettazine e cstruzine di un sit - Intrduzine Interattività Se vlete che il vstr sit abbia success nn dimenticatevi di aggirnarl: nn intervenite sl cn l'aggirnament dei cntenuti ma ricrdatevi di verificare anche i cllegamenti agli altri siti. Prestate quindi attenzine ai link frniti e alla veridicità delle infrmazini in essi cntenute, altrimenti le vstre pagine perderann di credibilità. Nn dimenticate di prevedere servizi interattivi all'intern del vstr sit, vver delle pagine che cnsentan al visitatre di esprimere un parere e di dare suggerimenti sugli argmenti presentati. Questi "feedback" diventerann per vi un ttim strument per verificare i cntenuti delle vstre pagine e l'utilità delle infrmazini in esse presenti. Per fare quest un sistema mlt semplice è quell di rendere attiv il link al vstr prgramma di psta elettrnica, permettend al visitatre di scrivervi direttamente. Nn dimenticate che un sit nn dvrebbe risultare "chius", vver tenete presente che i vstri visitatri si aspettan di utilizzare le vstre pagine cme veicl di ulteriri infrmazini. Pensate quindi ad una serie di link utili che apprfndiscan e rendan interessanti gli argmenti trattati nel vstr sit. Smmari Differenza fra pagina web, sit e prtale...1 Un sit per gni esigenza...1 HTML...2 Prgrammi per l realizzazine delle pagine web...2 L imprtanza della grafica...3 Le immagini per il Web: vettriali bitmap...3 La struttura della pagina...4 Il test...5 Interattività...6 Smmari...6 prf. Vanda Ribldi pag.6

7 (1) - Prgettazine di un sit - DREAMWEAVER MX La finestra di Dreamweaver MX La prima vlta che si avvia Dreamweaver in Windws, viene visualizzata una finestra di dialg che permette di scegliere il layut dell area di lavr. Se in seguit si cambia idea, è pssibile passare all altra area di lavr utilizzand la finestra di dialg Preferenze, dal menu Mdifica. Il nuv layut avrà effett al riavvi di Dreamweaver. Nell area di lavr integrata di Dreamweaver MX in Windws, tutte le finestre e i pannelli sn integrati in una sla finestra più grande dell applicazine. prf. Vanda Ribldi pag. 1

8 (1) - Prgettazine di un sit - DREAMWEAVER MX Cn il tast funzinale F1 si richiama la guida in linea, al cui intern è presente una sezine dedicata alle esercitazini Finestra Benvenuti frnisce suggerimenti sulla cnfigurazine dell area di lavr per scpi diversi e infrmazini sulle nuve funzini per gli utenti di precedenti versini di Dreamweaver. Barra Inserisci cntiene i pulsanti che cnsentn di inserire vari tipi di ggetti, ad esempi immagini, tabelle e livelli, in un dcument. Ogni ggett cnsiste in cdice HTML che permette di impstare i diversi attributi quand l si inserisce. Ad esempi, è pssibile inserire un immagine facend clic sull icna Immagine della barra Inserisci. Se si preferisce, è pssibile inserire gli ggetti utilizzand il menu Inserisci invece della barra Inserisci. Barra degli strumenti Dcument cntiene i pulsanti e i menu a cmparsa che cnsentn di visualizzare la finestra del dcument in diversi mdi (ad esempi in vista Struttura e in vista Cdice), impstare le pzini di visualizzazine e accedere ad alcune perazini cmuni (ad esempi, l anteprima in un brwser). Barra degli strumenti Standard nn è visualizzata nel layut predefinit dell area di lavr; cntiene i pulsanti per le perazini cmuni da eseguire dai menu File e Mdifica. Per visualizzare la barra degli strumenti Standard, scegliere Visualizza> Barre degli strumenti> Standard. Finestra del dcument visualizza il dcument crrente durante le perazini di creazine e mdifica. Finestra di ispezine Prprietà cnsente di vedere e mdificare una serie di prprietà dell ggett del test selezinat. Ogni tip di ggett ha prprietà diverse Selettre di tag situat nella barra di stat nella parte inferire della finestra del dcument, mstra la gerarchia dei tag che circndan la selezine crrente in vista Struttura. Fare clic su qualsiasi tag nella gerarchia per selezinare il tag specific e il relativ cntenut. Gruppi di pannelli serie di pannelli crrelati raggruppati insieme stt una sla intestazine. Per espandere un grupp di pannelli, fare clic sulla freccia di espansine visualizzata a sinistra del nme del grupp; per sganciare un grupp di pannelli, trascinare l area punteggiata sul margine sinistr della barra del titl del grupp. Pannell Sit permette di gestire i file e le cartelle che cmpngn il sit. Inltre, frnisce la vista di tutti i file sul disc lcale, cme Esplra risrse (Windws). Dreamweaver frnisce mlte altre finestre di ispezine, pannelli e finestre nn illustrate in questa sede. Per aprire le finestre, le finestre di ispezine e i pannelli di Dreamweaver, utilizzare il menu Finestra. Accant agli elementi attualmente aperti (anche quelli nascsti da altre finestre) viene visualizzat un segn di spunta. Per visualizzare un element che al mment nn è apert, selezinarne il nme nel menu. Se nn si riesce a trvare un pannell, una finestra di ispezine una finestra che riprta il segn di spunta indicante l stat di apertura, scegliere Finestra > Dispni pannelli per disprre rdinatamente tutti i pannelli aperti. prf. Vanda Ribldi pag. 2

9 (1) - Prgettazine di un sit - DREAMWEAVER MX Prgettazine di un sit In Dreamweaver, il termine sit può essere riferit ad un sit Web ad un area di archiviazine lcale dei dcumenti appartenenti ad un sit Web. Decidere gli biettivi del sit cstituisce la prima perazine da eseguire quand si crea un sit Web. Quand si crea un sit, è necessari essere cnsapevli della grande varietà dei brwser che i visitatri prbabilmente utilizzerann per visualizzarl. Ove pssibile, prgettate dei siti cn la massima cmpatibilità. Più il sit è sfisticat (in termini di layut, animazini, cntenuti multimediali e interazine), minri sn le prbabilità che sia cmpatibile cn più brwser. Quand si prgetta un sit, il segret è quindi cercare un equilibri tra l effett e la cmpatibilità. Il metd tradizinale per impstare un sit cnsiste nel creare una cartella sul disc lcale che cntenga tutti i file del sit (definit sit lcale) e creare e mdificare i dcumenti al su intern. Successivamente, tali file vengn cpiati su un server Web, una vlta che il sit è prnt per la pubblicazine e per essere visualizzat dal pubblic. E pprtun cllcare gni grupp di pagine crrelate nella stessa cartella, utilizzand, se necessari, delle sttcartelle. Quest tip di rganizzazine rende più facile la gestine e la navigazine del sit. Per l stess mtiv è cmd sistemare tutte le immagini in un unica psizine, in md che sia facile trvare un immagine quand si desidera inserirla in una pagina. È imprtante prgettare l aspett della navigazine, piché essa deve essere cerente in tutt il sit. Se si psizina una barra di navigazine nella parte superire della hme page, è pprtun mantenerla in tale psizine per tutte le pagine cllegate. Pianificazine e racclta delle risrse Una vlta definit il futur aspett della struttura e del layut, è pssibile creare e raccgliere le risrse necessarie. Le risrse pssn essere cstituite da elementi quali immagini, test elementi multimediali (Flash, Shckwave, e csì via). Verificate di aver racclt tutti questi elementi prima di iniziare l svilupp del sit, per evitare di interrmpere cntinuamente il prcess (ad esempi, per trvare un immagine creare un pulsante). Se si utilizzan immagini elementi grafici creati da altri scaricati da un sit di clip-art, raccgliete tutti gli elementi necessari e archiviarli in una cartella del sit. Se si crean persnalmente le risrse, createle prima di iniziare l svilupp, cmprese le immagini necessarie per gli effetti di rllver. Se si prevede che gran parte delle pagine avrà l stess layut, pianificate e prgettate un mdell per tale layut in base al quale creare successivamente delle nuve pagine. Se si decide di cambiare il layut di tutte le pagine, sarà sufficiente mdificare semplicemente il mdell. prf. Vanda Ribldi pag. 3

10 (1) - Prgettazine di un sit - DREAMWEAVER MX Impstazine di un sit di Dreamweaver È pssibile impstare un sit di Dreamweaver in due mdi: si può utilizzare la prcedura guidata Definizine del sit, che guida l utente attravers il prcess di impstazine, ppure le impstazini Avanzate della Definizine del sit, per impstare singlarmente la cartella lcale, quella remta e quella di prva, in base alle prprie necessità. Utilizzate la prcedura guidata Definizine del sit per impstare un sit di Dreamweaver 1. Scegliete Sit > Nuv sit. Viene visualizzata la finestra di dialg Definizine del sit. 2. Fate clic sulla scheda Generali per utilizzare la prcedura guidata Definizine del sit. 3. Rispndete alle dmande visualizzate, quindi fate clic su Avanti per passare alla finestra di dialg successiva. Se necessari, fate clic su Indietr per trnare ad una finestra precedente. (nn utilizzare una tecnlgia server lavrare, mdificand cpie lcali,sul prpri cmputer 1 nn effettuare la cnnessine cn il server remt fine) Dreamweaver crea la cache iniziale del sit e nel pannell Sit viene visualizzat il nuv sit di Dreamweaver. Successivamente, quand il sit lcale sarà prnt per essere pubblicat su un server remt, sarà necessari aggiungervi altri dati. In genere il pannell Sit visualizza tutti i file e le cartelle del sit, tuttavia al mment il sit nn cntiene ancra né cartelle né file. Quand il sit cntiene dei file, l elenc del pannell Sit funzina cme un interfaccia per la gestine dei file e cnsente di cpiare, incllare, eliminare, spstare e aprire file cme sul desktp del cmputer. Creazine e salvataggi di un mdell Una vlta cnfigurat il sit, è pssibile creare delle pagine Web per pplarl. All avvi di Dreamweaver è stat creat autmaticamente un dcument HTML vut. Prima di prcedere, chiudete tale dcument cn il cmand File > Chiudi. Per definire il layut di pagina, ptete usare tre strategie: 1. Utilizzare una pagina preimpstata, apprtand pprtune mdifiche 2. Utilizzare un mdell predefinit in Dreamweaver 3. Cstruire un prpri mdell 1 La cartella lcale è la cartella di lavr per il sit di Dreamweaver. Questa cartella può essere sul cmputer lcale su un server di rete. Si tratta del lug in cui vengn archiviati i file in lavrazine per un sit di Dreamweaver prf. Vanda Ribldi pag. 4

11 (2) - Mdelli predefiniti - DREAMWEAVER MX Creazine e salvataggi di un mdell (1) - Us di un layut di pagina preimpstat Aprite la finestra di dialg Nuv dcument scegliend File > Nuv. La finestra di dialg Nuv dcument cntiene due schede: Generali e Mdelli La scheda Generali cntiene diversi tipi di dcumenti da utilizzare per creare una nuva pagina vuta. È pssibile selezinare un nuv dcument vut dalle categrie Pagina di base, Pagina dinamica e Set di frame. Nella categria Altr create invece una pagina in base ad un tip di file specific, cme CSS, JavaScript, VBScript File di test selezinand un dcument. La categria Mdelli ffre una varietà di tipi di dcument da cui è pssibile creare un mdell vut: mdelli HTML e altri mdelli in cui è pssibile inserire cmprtamenti server. Le categrie Fgli di stile CSS, Strutture di pagina e Strutture di pagina (accessibili) frniscn file di struttura predefiniti da utilizzare per la creazine delle prprie pagine. Nel cas di fgli di stile CSS, è pssibile cpiare un fgli di stile predefinit ed applicarl al dcument. A secnda del tip di dcument selezinat, nella finestra di dialg vengn visualizzate ulteriri pzini: se si selezina un file Strutture di pagina è pssibile scegliere tra la creazine di un dcument e di un mdell. La scheda Mdelli cntiene un elenc di siti definiti in Dreamweaver. È pssibile creare nuvi dcumenti partend da un mdell selezinabile fra i siti elencati. Per creare una nuva pagina, mdificandne una preimpstata: 1. Scegliete File > Nuv. Viene visualizzata la finestra di dialg Nuv dcument. 2. Nell elenc Categria visualizzat sulla sinistra, selezinate la categria Strutture di pagina. Spra l elenc della clnna centrale della finestra di dialg appare l etichetta Strutture di pagina. Viene visualizzat un elenc di strutture di pagina predefinite. 3. Scrrete l elenc Strutture di pagina e scegliere l element che più vi aggrada 4. Selezinate Dcument se vlete salvare sl la pagina, Mdell se vlete utilizzare in seguit la pagina cme mdell 5. Fate clic su Crea. prf. Vanda Ribldi pag. 1

12 (2) - Mdelli predefiniti - DREAMWEAVER MX In una nuva finestra del dcument viene visualizzata una nuva pagina, cn il layut scelt. Per mdificare il layut di una pagina, dvete utilizzare gli strumenti di layut di Dreamweaver: ccrre rimuvere gli elementi del layut nn necessari, aggiungere segnapst immagine, reglare la larghezza delle clnne di tabella mediante la vista Layut di Dreamweaver, per rganizzare il cntenut in md apprpriat.. Le pagine preimpstate sn un punt di partenza, ma raramente crrispndn al layut che gli utenti vglin applicare alle prprie pagine. I mdelli vengn salvati cn l estensine.dwt nella cartella Templates, che si trva all intern della cartella principale lcale del sit. Se questa cartella nn esiste, Dreamweaver la crea autmaticamente quand si salva un nuv mdell. Nn spstate i file di mdell dalla cartella Templates e nn archiviate file di altr tip in questa cartella. La cartella Templates, inltre, nn deve essere spstata dalla cartella principale lcale per evitare che si verifichin errri nei percrsi dei mdelli. prf. Vanda Ribldi pag. 2

13 (2) - Mdelli predefiniti - DREAMWEAVER MX (2) - Us di un mdell predefinit di layut di pagina Dreamweaver viene frnit cn numersi file relativi a layut di pagina ed elementi di prgettazine sviluppati da prfessinisti. È pssibile utilizzare questi file di struttura cme punt di partenza per la creazine di pagine da inserire nei prpri siti. È pssibile creare un nuv mdell partend da un file di struttura. Una delle funzini più ptenti dei mdelli cnsiste nella pssibilità di aggirnare più pagine cntempraneamente. Un dcument creat da un mdell resta assciat al mdell, a men che nn venga dissciat in un secnd temp. È pssibile mdificare un mdell e aggirnare immediatamente la struttura di tutti i dcumenti basati su di ess. 1. Selezinate File > Nuv. 2. Nell elenc Categria, selezinate Struttura di pagina Struttura di pagina (Accessibile) in base ai requisiti di prgettazine. 3. Nell elenc Strutture di pagina selezinate il dcument da utilizzare cme base per la pagina da creare. 4. Effettuate una delle seguenti perazini: Per creare un dcument, selezinate il pulsante di scelta Dcument. Per creare un nuv mdell, selezinate il pulsante di scelta Mdell. 5. Fate clic su Crea. Nella finestra del dcument viene visualizzat un nuv dcument. Se si crea un mdell, vengn visualizzate le aree mdificabili definite e viene richiest di salvare il dcument cme mdell per il sit crrente. 6. Per salvare il dcument, selezinate File > Salva. Se il file cntiene cllegamenti a file di risrse, viene visualizzata la finestra di dialg Cpia file dipendenti. Nella finestra di dialg Cpia file dipendenti, impstate le pzini per cpiare le risrse nel sit crrente. Quand si fa clic su Cpia, le risrse vengn cpiate nella cartella selezinata e la finestra di dialg si chiude. Per creare un nuv dcument basat su un mdell: 1. Scegliete File > Nuv per aprire la finestra di dialg Nuv dcument 2. Nella scheda Mdelli selezinate il mdell prescelt 3. Se desiderate dissciare il nuv dcument dal mdell, deselezinate l pzine Aggirna la pagina quand il mdell cambia. 4. Fate clic su Crea. Viene creat un nuv dcument. 5. Salvate il dcument, ricrdandvi di assegnare il nme file index.html alla hme page del sit prf. Vanda Ribldi pag. 3

14 (3) - Prgettazine di un nuv layut di pagina: us di tabelle - DREAMWEAVER MX Creazine e salvataggi di un mdell (3) - Prgettazine di un nuv layut di pagina Per creare un nuv mdell 1. Aprite una nuva pagina cn il cmand File > Nuv, selezinand nella finestra che si apre Pagina di base, HTML e ciccand su crea. 2. Frmattate la pagina secnd il layut da vi prgettat. 3. Salvate cme mdell. Utilizzate quest mdell per cstruire tutte le pagine del sit. Per cstruire il mdell secnd il layut di pagina prgettat è pprtun fare us di tabelle di frames. Pertant rganizziam il discrs in tre parti: (a) Presentazine dei cntenuti mediante le tabelle (b) Creazine del layut delle pagine nella vista Layut (c) Us dei frames (a) - Presentazine dei cntenuti mediante le tabelle Le tabelle sn un strument particlarmente utile per presentare dati e disprre test e grafica in una pagina HTML, anche perché il lr us nn presenta prblemi di cmpatibilità cn i vari brwsers. Dp aver creat una tabella, l aspett e la struttura pssn essere mdificati cn estrema facilità. Dreamweaver ffre due strumenti per visualizzare e mdificare le tabelle: la vista Standard, in cui le tabelle sn presentate cme una griglia di righe e clnne, e la vista Layut, che cnsente di disegnare, ridimensinare e spstare le caselle nella pagina cntinuand ad utilizzare le tabelle per la struttura sttstante prf. Vanda Ribldi pag. 1

15 (3) - Prgettazine di un nuv layut di pagina: us di tabelle - DREAMWEAVER MX Inseriment di una tabella Per creare una nuva tabella, utilizzate la barra il menu Inserisci. Nella vista Struttura della finestra del dcument (vista predefinita), spstate il punt di inseriment nella psizine in cui si desidera inserire la tabella. Se il dcument è vut, è pssibile psizinare il punt di inseriment sl all inizi del dcument. Effettuate una delle seguenti perazini: Fate clic sul pulsante Tabella nella categria Cmuni della barra Inserisci. Scegliete Inserisci > Tabella. Viene visualizzata la finestra di dialg seguente Inserite nuvi valri nel md desiderat, avend cura di assegnare 0 al brd: in quest md la struttura della tabella nn sarà visibile. È pssibile selezinare un intera tabella, riga clnna in un unica perazine. È inltre pssibile selezinare un blcc di celle cntigue all intern di una tabella. E pssibile selezinare più celle nn adiacenti e mdificarne le prprietà, ma nn cpiare incllare serie di celle nn adiacenti. Per selezinare un intera tabella fate clic nell angl superire sinistr della tabella in un punt qualunque sul su lat inferire destr ppure fate clic in una cella della tabella, quindi scegliete Elabra > Tabella > Selezina tabella. Vengn visualizzate le maniglie di selezine sul brd inferire e destr della tabella selezinata. Per selezinare righe clnne psizinate il puntatre sul margine sinistr di una riga sul margine superire di una clnna: quand il puntatre assume la frma di una freccia di selezine, fate clic per selezinare una riga una clnna ed eventualmente trascinate il muse per selezinare più righe clnne. Per selezinare una singla cella fate clic nella cella e scegliete Mdifica > Selezina tutt. Per selezinare celle nn adiacenti tenete premut il tast Ctrl (Windws) e fate clic sulle celle, righe clnne che si desidera selezinare. Frmattazine di una tabella Quand è selezinata una tabella, la finestra di ispezine Prprietà cnsente di visualizzarne e mdificarne le prprietà. Se la finestra di ispezine Prprietà nn è ingrandita, fate clic sulla freccia di espansine nell angl inferire destr per visualizzare tutte le prprietà. Per visualizzare le prprietà della tabella nel cas in cui la finestra di ispezine Prprietà nn è visualizzata, selezinate la tabella e scegliete Finestra > Prprietà prf. Vanda Ribldi pag. 2

16 (3) - Prgettazine di un nuv layut di pagina: us di tabelle - DREAMWEAVER MX Se la finestra di ispezine Prprietà nn è ingrandita, fate clic sulla freccia di espansine nell angl inferire destr per visualizzare tutte le prprietà. ID tabella specifica un ID per la tabella. Righe e Clnne specifican il numer di righe e di clnne della tabella. La e Al specifican la larghezza e l altezza della tabella espresse in pixel cme percentuale della larghezza dell altezza della finestra del brwser. In genere, nn è necessari impstare l altezza. MargCell specifica la distanza in pixel tra il cntenut e i brdi della cella. SpazCell specifica la distanza in pixel tra le celle adiacenti della tabella. Suggeriment: se nn si assegnan in md esplicit dei valri alle pzini Margine celle e Spaziatura celle, la maggir parte dei brwser visualizza la tabella cme se l pzine Margine celle fsse impstata su 1 e l pzine Spaziatura celle su 2. Per far sì che i brwser visualizzin la tabella senza alcuna spaziatura margine delle celle, impstare le pzini su 0. Allinea specifica la psizine in cui viene visualizzata la tabella rispett agli altri elementi dell stess paragraf, ad esempi il test le immagini. A sinistra allinea la tabella a sinistra degli altri elementi in md che il test dell stess paragraf venga dispst intrn alla tabella a destra, A destra allinea la tabella a destra degli altri elementi cn il test intrn alla tabella a sinistra, mentre Al centr centra la tabella e dispne il test spra e/ stt la tabella. Predefinit specifica l allineament predefinit del brwser. Suggeriment: se si specifica l allineament predefinit, accant alla tabella nn vengn visualizzati altri tipi di cntenut. Per visualizzare una tabella accant ad altri tipi di cntenut, utilizzare l allineament A sinistra e A destra. Brd specifica la larghezza in pixel dei brdi della tabella. Suggeriment: se nn si assegna in md esplicit un valre all pzine Brd, la maggir parte dei brwser visualizza la tabella cme se l pzine fsse impstata su 1. Per far sì che i brwser visualizzin la tabella senza alcun brd, impstare l pzine su 0. Per visualizzare i brdi delle celle e della tabella quand l pzine Brd è impstata su 0, scegliere Visualizza > Riferimenti visivi > Brdi delle tabelle. Nella finestra di ispezine Prprietà sn presenti alcuni pulsanti, la cui funzine può essere evidenziata pnendsi spra cn il puntatre del muse. I pulsanti Annulla larghezza celle e Annulla altezza celle cnsentn di eliminare tutti i valri di altezza delle righe di larghezza delle clnne specificati dalla tabella. I pulsanti Cnverti larghezza celle in pixel e Cnverti altezze tabella in pixel cnsentn di cnvertire la larghezza l altezza di ciascuna clnna e la larghezza dell intera tabella nella larghezza crrente espressa in pixel. I pulsanti Cnverti larghezza celle in percentuali e Cnverti altezze tabella in percentuali cnsentn di cnvertire la larghezza l altezza di ciascuna clnna e la larghezza dell intera tabella nella larghezza crrente espressa cme percentuale della larghezza della finestra del dcument. Cl sf specifica il clre di sfnd della tabella. Clre brd specifica il clre dei brdi della tabella. Immagine sfnd specifica l immagine di sfnd della tabella. prf. Vanda Ribldi pag. 3

17 (3) - Prgettazine di un nuv layut di pagina: us di tabelle - DREAMWEAVER MX Frmattazine di una cella Quand è selezinata una cella, la finestra di ispezine Prprietà cnsente di visualizzare e mdificare le prprietà della cella. Se la finestra di ispezine Prprietà nn è ingrandita, fate clic sulla freccia di espansine nell angl inferire destr per visualizzare tutte le prprietà. Orizz specifica l allineament rizzntale del cntenut di una cella, riga clnna. È pssibile allineare il cntenut a sinistra, a destra al centr delle celle ppure è pssibile specificare l allineament predefinit del brwser (generalmente, a sinistra per le celle nrmali e al centr per le celle delle intestazini). Vert specifica l'allineament verticale del cntenut di una cella, riga clnna. Il cntenut può essere allineat in alt, al centr, in bass alla linea di base ppure in base all impstazine predefinita del brwser (generalmente, al centr). La e Al specifican la larghezza e l'altezza delle celle selezinate espresse in pixel cme percentuale della larghezza dell altezza dell intera tabella. Per specificare una percentuale, inserite il simbl di percentuale (%) dp il valre. Lasciate vut il camp (impstazine predefinita) per fare in md che venga autmaticamente applicata la larghezza l altezza apprpriata in base al cntenut della cella e alla larghezza e all altezza delle altre clnne e righe. Sf (Camp di test superire) specifica il nme di file dell immagine di sfnd di una cella, clnna riga. Fate clic sull icna della cartella per cercare un immagine ppure utilizzare l icna Scegli file per selezinare un file di immagine. Sf (Campine di clre e camp di test inferire) cnsente di specificare il clre di sfnd di una cella, clnna riga mediante il selettre di clri. Brd specifica il clre del brd delle celle. Il pulsante Unisci celle cnsente di cmbinare le celle, le righe le clnne selezinate e creare un'unica cella. È pssibile unire sl le celle che frman un blcc rettanglare lineare. Il pulsante Dividi cella suddivide una cella creand due più celle. È pssibile dividere una sla cella alla vlta. Se vengn selezinate più celle, il pulsante è disabilitat. N a cap impedisce il ritrn a cap mantenend il test della cella su una singla riga. Se l pzine è abilitata, le celle si allargan in md da cntenere tutti i dati digitati incllati in una cella. Intest frmatta le celle selezinate cme intestazini di tabella. Per impstazine predefinita, il cntenut delle celle di intestazine di una tabella è in grassett e centrat. Ridimensinament di una tabella È pssibile cambiare le dimensini di un intera tabella ppure di single righe e clnne, agend sulle maniglie di ridimensinament. Quand si ridimensina un intera tabella, varian prprzinalmente le dimensini di tutte le celle. Se per le celle di una tabella sn state specificate esplicitamente le larghezze e le altezze, il ridimensinament della tabella cambia la dimensine visiva delle celle nella finestra del dcument, ma nn mdifica le larghezze e le altezze delle celle specificate. prf. Vanda Ribldi pag. 4

18 (3) - Prgettazine di un nuv layut di pagina: us di tabelle - DREAMWEAVER MX Aggiunta ed eliminazine di righe e clnne Per aggiungere ed eliminare righe e clnne, utilizzare i cmandi del sttmenu Elabra > Tabella. Se si preme Tab nell ultima cella, viene autmaticamente aggiunta una riga alla tabella. Per aggiungere righe clnne: 1. Fate clic in una cella. 2. Effettuate una delle seguenti perazini: Per aggiungere una riga spra la cella crrente, scegliete Elabra > Tabella > Inserisci riga. Per aggiungere una clnna a sinistra della cella crrente, scegliete Elabra > Tabella > Inserisci clnna. Per aggiungere più righe clnne ppure per aggiungere una riga stt la cella crrente una clnna a destra della cella, scegliete Elabra > Tabella > Inserisci righe clnne. Viene visualizzata la finestra di dialg Inserisci righe clnne. 3. Se si sceglie Inserisci righe clnne, inserite le infrmazini necessarie nella finestra di dialg e fare clic su OK. Per eliminare una riga una clnna: 1. Fate clic in una cella all intern della riga clnna da eliminare. 2. Effettuate una delle seguenti perazini: Per eliminare una riga, scegliete Elabra > Tabella > Elimina riga. Per eliminare una clnna, scegliete Elabra > Tabella > Elimina clnna. In alternativa, è pssibile selezinare un intera riga clnna e scegliere Mdifica > Cancella ppure premere Canc. L intera riga clnna viene eliminata dalla tabella. E pssibile aggiungere eliminare righe clnne utilizzand la finestra di ispezine Prprietà. Nidificazine di tabelle Una tabella nidificata è una tabella che si trva all intern di una cella di un altra tabella. È pssibile frmattare una tabella nidificata cme qualunque altra tabella, cn l unica limitazine che la tabella nidificata nn deve superare la larghezza della cella che la cntiene. prf. Vanda Ribldi pag. 5

19 (4) - Prgettazine di un nuv layut di pagina: vista layut - DREAMWEAVER MX (b) - Creazine del layut delle pagine nella vista Layut La vista Layut di Dreamweaver semplifica l utilizz delle tabelle per il layut delle pagine. Nella vista Layut, è pssibile prgettare le pagine utilizzand le tabelle cme struttura sttstante, evitand i tradizinali incnvenienti legati all impieg delle tabelle. Ad esempi, nella vista Layut è pssibile creare celle di layut nella pagina e successivamente spstarle nella psizine desiderata. È inltre pssibile creare layut a larghezza fissa e layut che si adattan autmaticamente all intera larghezza della finestra del brwser. Nella vista Layut, è pssibile definire il layut della pagina prima di aggiungere il cntenut. Ad esempi, è pssibile creare una cella che cntenga un immagine di intestazine nella parte superire della pagina, una cella per la barra di navigazine sul lat sinistr della pagina e una cella per il cntenut sul lat destr. prf. Vanda Ribldi pag. 1

20 (4) - Prgettazine di un nuv layut di pagina: vista layut - DREAMWEAVER MX In alternativa, è pssibile creare ciascuna cella al mment dell inseriment del cntenut. Quest metd ffre la massima flessibilità, lasciand una maggir quantità di spazi liber nella tabella di layut per un perid di temp più lung e cnsentend di spstare ridimensinare le celle più facilmente. Quand si crea una cella di layut all estern di una tabella di layut, in Dreamweaver viene autmaticamente creata una tabella di layut cme cntenitre per la cella. Le celle di layut sn sempre cntenute all intern di tabelle di layut. È pssibile creare il layut di pagina utilizzand diverse celle di layut all intern di una tabella di layut ppure utilizzare più tabelle di layut per ttenere un layut più sfisticat. L utilizz di più tabelle di layut cnsente di mantenere separate le sezini del layut in md che le mdifiche apprtate in una sezine nn abbian effett sulle altre sezini. È anche pssibile nidificare le tabelle di layut, vver inserire una tabella di layut in una tabella di layut esistente. Questa struttura cnsente di semplificare la tabella quand le righe le clnne di una parte del layut nn sn allineate a quelle di un altra parte del layut. L utilizz di tabelle di layut nidificate cnsente ad esempi di creare un layut a due clnne cn quattr righe nella clnna di sinistra e tre righe nella clnna di destra. Attivazine e disattivazine della vista Layut Per creare tabelle celle di layut è necessari passare dalla vista Standard alla vista Layut. Se si crea una tabella nella vista Standard e successivamente si attiva la vista Layut, la tabella di layut risultante ptrebbe cntenere celle di layut vute. È pssibile che sia necessari eliminare le celle vute prima di creare spstare le celle di layut. È cnsigliabile creare i nuvi layut, da mdificare successivamente, nella vista Layut anziché nella vista Standard. Per passare alla vista Layut: 1. Se la vista Struttura nn è visibile, scegliete Visualizza > Struttura Visualizza > Cdice e struttura. Nn è pssibile abilitare disabilitare la vista Layut dalla vista Cdice. 2. Scegliete Visualizza > Vista tabella > Vista Layut ppure fare clic sul pulsante Vista Layut nella categria Layut della barra Inserisci. Per disattivare la vista Layut: 1. Se la vista Struttura nn è visibile, scegliete Visualizza > Struttura Visualizza > Cdice e struttura. Nn è pssibile abilitare disabilitare la vista Layut dalla vista Cdice. 2. Scegliete Visualizza > Vista tabella > Vista Standard ppure fate clic sul pulsante Vista Standard nella categria Layut della barra Inserisci. Per disegnare una tabella di layut Celle e tabelle di layut 1. Verificate che la vista Layut sia attiva. Fate clic sul pulsante Disegna tabella layut nella categria Layut della barra Inserisci. Il puntatre assume la frma di un segn più (+). 2. Psizinate il puntatre nella pagina e trascinare per creare la tabella di layut. Se nella pagina nn è presente altr cntenut, la nuva tabella viene psizinata autmaticamente nell angl superire sinistr della pagina. Attrn alla tabella viene visualizzat un cntrn verde. Nella parte superire di ciascuna tabella creata viene visualizzata una scheda Tabella di layut che semplifica l individuazine e la selezine della tabella. prf. Vanda Ribldi pag. 2