INSERIMENTO DI IMMAGINI,DOCUMENTI,SFONDI E OGGETTI FLASH IMPOSTAZIONE DI UNA IMMAGINE ALL INTERNO DI UNA PAGINA WEB: In questo capitolo è spiegata la procedura di inserimento e modifica di una immagine all interno della vostra pagina web, è bene ricordare, prima di passare alla spiegazione pratica, che è SEMPRE estremamente consigliato dedicare all immagine da inserire una cella specifica ( ridimensionandola in modo analogo all immagine stessa). 1) Posizionate il cursore nel punto in cui volete venga inserita l immagine ( assicurandovi di aver prima impostato, nella cella che la conterrà, l allineamento esatto). 2) Cliccate su: Inserisci/Modifica immagine. 3) Nella finestra che vi appare ( quella delle proprietà immagine, che approfondiremo poi) cliccate su cerca sul server. 4) Vi appare una seconda finestra con elencate le immagini presenti sul server ( se non ne avete ancora inserite, non ne sarà presente nessuna), cliccate su sfoglia 5) Vi appare una finestra di dialogo con il vostro computer; a questo punto, dovete selezionare l immagine che desiderate inserire e cliccare su apri. 6) A questo punto siete tornati alla seconda finestra, Cliccate quindi su Upload 7) l immagine che avete scelto sarà inserita in ordine alfabetico nella lista delle immagini. 8) scegliete l immagine dalla lista (cliccandoci sopra), Tornate così alla finestra delle proprietà immagine, dalla quale potete impostarne le proprietà prima di inserirla (cliccando su OK). PROPRIETA IMMAGINE: Il pannello di proprietà immagine vi compare quando inserite una immagine nuova o quando lo selezionate direttamente ( cliccando con il tasto destro sull immagine scelta). Il pannello è diviso in 3 parti: Informazioni immagine, Collegamento, e Avanzate:
1) Informazioni immagine: URL : indica il percorso da seguire per trovare l immagine all interno del server ( ovvero la cartella nella quale l immagine è contenuta). Testo alternativo: indica il testo che dovrà essere visualizzato quando il navigatore lascia il cursore del mouse posizionato sopra l immagine. Larghezza e Altezza: sono i due valori che conferiscono la dimensioni all immagine, variando uno solo dei due valori, l altro si adatterà a sua volta, mantenendo le proporzioni originali, è bene ricordare alcuni concetti importanti sul ridimensionamento. PRIMO: rimpicciolendo dal pannello di controllo una immagine grande, il suo peso in Megabyte rimarrà invariato, per cui non è consigliabile utilizzare immagini enormi o in alta definizione per inserire piccoli loghi ( in quanto poi il tempo di caricamento della pagina web aumenterebbe inesorabilmente); SECONDO: rimpicciolendo una immagine dal pannello di controllo, verrebbe visualizzata con una qualità leggermente inferiore. Per un inserimento ottimale delle immagini è consigliato lasciarle delle loro dimensioni originali, o, eventualmente, ridimensionarle prima sul proprio computer tramite un apposito programma ( ne esistono tanti scaricabili gratuitamente, come serif Photoplus o Pixia). Blocca rapporto: tramite questo pulsante, potete decidere se mantenere le proporzioni durante il ridimensionamento dell immagine, quando il rapporto è bloccato ( ) modificando un solo valore, l altro varierà automaticamente, sbloccando invece il rapporto ( ) potrete variare un solo valore lasciando invariato l altro, ATTENZIONE: ridimensionando in questo modo l immagine verrà deformata e perderà le proporzioni originali.
Reimposta dimensione: tramite questo pulsante, riporterete l immagine alla sua grandezza originale. Bordo: da qui potete impostare lo spessore in pixel del bordo dell immagine, se lasciate la voce vuota, il bordo assumerà valore zero ( tranne nel caso in cui l immagine abbia anche un link,dove verrà visualizzato il bordo, per non visualizzarlo, in questo caso, dovete inserire 0 nella voce corrispondente). HSpace: Questo comando ( horizontal space) imposta la distanza in pixel che intercorrerà dai i margini laterali dell immagine ai margini sinistro e destro della cella che la contiene, in sostanza, impostando un valore di 10, l immagine si posizionerà in modo da essere sempre e comunque distante 10 pixel sia dal margine sinistro, sia dal margine destro della cella che la contiene ( anche dilatandone le dimensioni). VSpace: Questo comando ( Vertical Space) agisce in modo analogo al HSpace, con l unica differenza che riguarda la distanza dai margini superiore ed inferiore della cella contenente. Allineamento: questo comando serve ad impostare l allineamento che l immagine dovrà tenere all interno della cella, è bene ricordare che, qualora l allineamento della cella non coincida con questo allineamento, l immagine si allineerà secondo questo valore, quindi, allo scopo di evitare confusione, è consigliabile non utilizzare questo comando, avvalendosi solamente dell allineamento impostabile dalle proprietà della cella. 2) Collegamento: Questo pannello è utile nel caso in cui vogliate collegare l immagine ad un documento (excel, word, pdf, power point ecc..), per farlo consultate l apposito paragrafo alle pagine successive.
3) Avanzate: Questo pannello consente il settaggio delle proprietà avanzate dell immagine, come l ID o l appartenenza ai fogli di stile. L utilizzo di questa sezione, per propria natura, è riservato a Webmaster ed informatici provvisti di competenze specifiche, pertanto, la sua spiegazione, non è inclusa in questo manuale, in quanto risulterebbe superflua a chi di mestiere, ciononostante, abbiamo comunque ritenuto giusto farne menzione, per consentire ad utenti specializzati di usufruire anche di queste funzionalità. Per qualsiasi chiarimento particolare, potete scrivere a info@etecna.it.
IMPOSTAZIONE DI UN DOCUMENTO ALL INTERNO DI UNA PAGINA WEB: E possibile aggiungere un documento ( word, excel, pdf, ecc ) nella nostra pagina web. Per farlo è sufficiente seguire attentamente la seguente procedura. 1) selezionare un immagine a piacimento che andrà a linkare il nostro documento, gli esempi più classici sono: Ovviamente non è necessario utilizzare queste immagini per segnalare il documento, sarebbe sufficiente anche solo il testo, esse però sono consigliate in quanto sono le più utilizzate nel web e quindi quelle che raccolgono il miglior feedback (in termini di click e visite) da parte degli utenti. 2) Dopo aver montato l immagine sulla pagina ( vedi paragrafo precedente) accedete alle sue proprietà, cliccandoci sopra con il tasto destro. 3) Nella schermata delle proprietà immagine, selezionate la seconda scheda ( Collegamento) 4) sulla voce destinazione, settate la finestra dove desiderate venga aperto il documento ( se sulla stessa pagina o in un altra finestra). 5) a questo punto, cliccate su cerca sul server e ripetete la stessa procedure vista per l inserimento dell immagine ( vedi paragrafo precedente) selezionando però, all interno del vostro computer, il documento in questione.
NB. Dopo aver Linkato l immagine essa vi apparirà contornata di blu, per eliminare il contorno, andate in proprietà immagine e digitate 0 (zero) nella voce corrispondente a bordo. COLLEGARE UN DOCUMENTO CON UN LINK DI TESTO : Se desiderate collegare il testo al documento ( anziché l immagine) vi basterà seguire questa procedura: 1) digitate il testo che volete collegare ( ad esempio: CLICCA QUI PER APRIRE IL DOCUMENTO ) 2) andate nelle proprietà immagine ( di prima. FIG 1) Nella finestra di dialogo, (FIG 1) cliccare su: cerca sul server, verrà visualizzata la seguente schermata:
FIG 2) Quando visualizzate questa schermata,(fig 2) cliccate su sfoglia e selezionate ( all interno del vostro computer) il documento che volete inserire; a questo punto ritornerete alla schermata precedente, con l unica differenza che il vostro documento sarà pronto da inserire; ( vedi FIG 3 sotto) FIG 3) Ora, cliccate su Upload e il vostro documento pdf sarà inserito nella cartella del server; per semplicità, assicuratevi di inserire il documento sulla stessa cartella dell immagine di riferimento ( le icone viste al punto 1).
Una volta inserito il documento nella cartella del server vi apparirà in lista nella finestra sopra riportata(figura 3); basterà cliccarci sopra e confermare cliccando su ok nella schermata che verrà visualizzata. COLLEGAMENTO DEL DOCUMENTO ALL IMMAGINE: Arrivati a questo punto nella vostra pagina vedrete un icona di questo tipo:, questa finta immagine, in realtà, non rappresenta altro che il vostro documento che, ovviamente, non può ancora essere visualizzato; per collegare il documento all immagine ( o al testo) che avevate inserito, sarà sufficiente seguire questi ultimi passaggi essenziali. 1) cliccate con il tasto destro sull immagine, selezionate, proprietà immagine 2) Nella finestra che vi apparirà (FIG 5 sottostante) selezionate il percorso del documento ( quello in alto nella barra intitolata URL), copiate la dicitura con tasto destro copia. FIG 4) 3) Chiudete la finestra di dialogo cliccando su annulla 4) Selezionate il testo che avevate preparato al collegamento ( nell esempio: CLICCA QUI PER APRIRE IL DOCUMENTO ) 5) Inserite un link tramite l apposito pulsante nella barra degli strumenti.
6) Ora, seguite la procedura illustrata nelle seguenti figure
Fatto questo vi basterà cliccare su OK e il vostro testo sarà linkato al documento. CONSIGLIO. Per agevolare la navigazione del visitatore impostate il link del documento dirigendolo sempre in una nuova finestra, per fare questo Vi basterà cliccare sull area destinazione (vedi figura sopra) e selezionare dall apposita tendina la voce nuova finestra_blank). IMPOSTAZIONE DELLO SFONDO DI UNA CELLA O DI UNA PAGINA WEB: Per impostare uno sfondo specifico alla pagina web, sarà sufficiente posizionare il cursore sulla cella madre ( la tabella iniziale costituita da una cella larga il 100%, menzionata nel capitolo tabelle ed organizzazione dei contenuti ) E possibile impostare lo sfondo di una cella sia con un colore, sia con una immagine; solitamente, è anche noto l utilizzo di una immagine di sfondo nel caso in cui si voglia sovrascriverla con del testo o altri contenuti ( se ad esempio si vuole creare un bottone, si inserisce come sfondo di una cella il bottone vuoto e si scrive sopra il testo nella posizione desiderata). E necessario chiarire, prima di vedere il procedimento, che l immagine usata come sfondo ha una sua dimensione ben precisa, NON si adatta, quindi, alla grandezza della cella che la contiene, per cui, se si inserisce una immagine di sfondo di 100 x 100 in una cella di 100 x 200, tale immagine si vedrà due volte (si vedranno due immagini identiche attaccate, in quanto lo sfondo si ripete) Ora vedremo i principali passaggi per creare uno sfondo all interno di una cella.
IMPOSTAZIONE DEL COLORE DI SFONDO: 1) selezioniamo la cella desiderata, e cliccare con il tasto destro. Selezionare la voce Cella (immagine sotto) FIG 1 FIG 2 nel sotto menù selezioniamo proprietà cella 2) nella finestra di dialogo sottostante, clicchiamo su Sfoglia, accanto alla voce: colore di sfondo:
FIG 3) Visualizzeremo la finestra seguente: FIG 4) A questo punto sarà sufficiente selezionare il colore e spingere per ottenere il colore voluto. IMPOSTAZIONE DI UNA IMMAGINE DI SFONDO: Per impostare una immagine.. partiamo dal procedimento precedente alla FIG 3, cliccare su Cerca sul Server dopodiché utilizzare lo stesso procedimento visto per l inserimento di immagine ( vedi cap: inserimento di una immagine). Il risultato finale sarà:
FIG 5) Ovviamente.. lo sfondo non è visualizzato completamente.. perché si adatta alla dimensione della cella, per visualizzarlo completamente.. sarà sufficiente impostare le dimensioni della cella (vedi cap: proprietà delle celle) uguali a quelle dell immagine usata come sfondo; se si agirà in tal senso il risultato sarà questo: FIG 6) Ora visualizziamo lo sfondo interamente.. e possiamo anche sovrascriverlo, scrivendo all interno della cella esattamente come fosse vuota: ecco l esempio con la parola etecna web FIG 7) ATTENZIONE: se si imposta la cella più grande dell immagine di sfondo (nell esempio sotto è a 400 x 120) il risultato sarà la visualizzazione dello sfondo stesso ripetuto nello spazio disponibile: FIG 8) NB: è chiaro che il posizionamento del testo all interno della cella risulterà difficoltoso inserendolo senza annidarlo in nessuna tabella: per risolvere il problema; basterà creare all interno della cella (allineandola prima in modo centrato- in alto) una tabella ad ampiezza 100% con numero di righe e colonne adeguato a ciò che si vuole inserire, in modo da poter inserire contenuti nella posizione desiderata ( vedi FIG 9).
FIG 9) Come possiamo notare grazie alla tabella ( 4 righe 3 colonne ) inserita dentro la nostra cella, possiamo posizionare il testo nel punto che ci è più congeniale, ovvio che.. nel caso dovessimo scrivere un lungo testo in modo discorsivo, ci basterebbe digitarlo nella cella primaria allineandola in alto a sinistra, così facendo però, otteniamo una griglia con tante celle, che fungono da coordinate per i nostri contenuti. INSERIMENTO DI UN DOCUMENTO FLASH ALL INTERNO DI UNA PAGINA WEB: Tramite l editor di pagina è possibile inserire animazioni e contenuti multimediali in flash ( formato swf) all interno della pagina web, per farlo, dovete rispettare la seguente procedura: 1) posizionate il cursore nella posizione dove volete inserire l animazione ( prestando sempre la massima attenzione all allineamento della cella corrispondente). 2) cliccate su: Inserisci/modifica oggetto flash 3) Vi si apre la finestra proprietà oggetto flash, cliccate su cerca sul server 4) Vi si apre la seconda finestra ( di comunicazione al server), a questo punto, procedete in modo analogo all inserimento delle immagini ( vedi apposito paragrafo). Una volta inserita l animazione, la visualizzerete all interno dell editor in questo modo: da qui potrete selezionarla e variarne le dimensioni, trascinandone i bordi con il puntatore del mouse. (le dimensioni possono anche essere impostate utilizzando l apposito pannello proprietà oggetto flash, spiegata di seguito).
PROPRIETA OGGETTO FLASH: come visualizzato nell esempio, tramite questo pannello visualizzerete un anteprima dell animazione, e potrete digitarne le dimensioni esatte. IMPOSTAZIONI AVANZATE: Questa sezione, analogamente a quella delle immagini, è riservata a webmaster e utenti esperti, per cui, la sua spiegazione, non è inserita all interno di questo manuale, per qualsiasi chiarimento particolare, potete scrivere a info@etecna.it.