Kompozer manuale: Release 5 - Immagini sulla tua pagina

Si farà la copertina del tuo sito web ecosistemi. Come ci sono in corso per individuare i pulsanti di navigazione diverso, una immagine rappresentativa e un titolo dovrà utilizzare una tabella che consente di individuare correttamente ogni immagine. Inoltre, come fai notare che la raccomandazione generale, la prima copia della struttura delle immagini nella cartella del vostro sito, vale a dire nel webcurso directory - sottocartella immagini, immagini che si intende utilizzare: vedi nostri articoli precedenti dedicati a Kompozer.

A seguire, offriamo ai nostri tutorial on-line e quindi le immagini saranno utilizzati sulla pagina (e convenientemente trattati con un programma di editing grafico, vale a dire in Gimp) in modo che il download e l'utilizzo direttamente.

Immagine per la copertina

Tasti di navigazione

Immagine per il proprietario del Web

Utilizzare l'opzione del tuo browser per salvare ogni immagine nella cartella images si è creato nel webcurso directory, directory appositamente creata per monitorare i nostri progressi online. Mozilla Firefox è semplice come il posizionamento stesso su ogni immagine con il tasto destro del mouse, selezionare l'immagine Salva con nome e trovare nella vostra directory home webcurso cartella - immagini sottocartella nella vostra finestra di Firefox sullo schermo.

Creare una tabella per individuare le immagini

L'opzione migliore per posizione di tutti i tipi di elementi di una pagina Web utilizza le tabelle, che si tratti di immagini, altri mezzi di comunicazione e anche il testo.

Vi mostriamo come includere le tabelle nella pagina.

In primo luogo, avviare una nuova pagina utilizzando il pulsante Nuovo sulla barra degli strumenti icone Kompozer (si può anche andare su File - Nuovo o utilizzare i tasti Ctrl + N).
Per inserire una tabella nella pagina è possibile utilizzare una delle seguenti operazioni:

• Fare clic sulla barra icon Table
• Vai al menu Inserisci - Tabella

La finestra Inserisci tabella verrà visualizzata sullo schermo:

Rileva che dispone di tre schede:

• Veloce: è possibile selezionare con il mouse il numero di righe e colonne
• Accurata: ho chiesto di impostare un numero specifico di righe e colonne. Immettere il numero nei campi appropriati.
• Cell: consente di modificare le caratteristiche delle celle della tabella, il programma di installazione, lo spazio tra le celle, l'adeguamento del testo ...

Il pulsante Modifica avanzata permette di impostare le opzioni avanzate, come gli attributi HTML, eventi JavaScript, stili, ecc.

In questo laboratorio, fare clic sulla scheda accurata e immettere i seguenti valori:

• Fila: 9
• Colonne: 4
• Larghezza: 1000 (ricordate la risoluzione dello schermo è di 1024 che stiamo usando, se avete bisogno di web design per una risoluzione inferiore solo a ridurre questo numero, ad esempio 800) e seleziona i pixel nella casella di elenco a discesa sulla destra .
• Edge osserva che appare di default 1, lasciare in questo modo: questo renderà la tabella ha un bordo unico con il quale è possibile visualizzare meglio le cellule che lo compongono. Non preoccupatevi, perché si può cambiare in ogni momento nel bisogno.

Quando hai finito fare clic su OK. La tabella viene visualizzata nel workspace Kompozer.

Dopo aver creato una tabella, è possibile modificare le sue proprietà da l'opzione di menu Tabella - Proprietà della tabella. È inoltre possibile utilizzare il menu contestuale del tasto destro del mouse, se si posiziona il cursore all'interno della tabella e fare clic su Proprietà Cell: quindi stabilire il livello di proprietà delle celle.
È inoltre possibile impostare la larghezza e l'altezza del tavolo facendo clic e trascinando i pannelli di controllo della tavola, che individua in alto a sinistra della pagina:

Inserire la navigazione pulsanti

Posizionatevi con il cursore del mouse nella prima cella sarà qui dove vi posto il primo pulsante di navigazione.
Per inserire una foto vai al menu Inserisci - Immagine o clicca sull'immagine icona della barra delle icone. Schermo si aprirà la finestra Proprietà immagine.

• Indica la scheda Percorso di Kompozer, dove è possibile scattare la foto. Facendo clic sul file appropriato icona, la scansione dei file di sistema del computer per selezionare l'immagine che si sceglie. È necessario indicare una formulazione alternativa immagine obbligatoria: il testo che dovrebbe apparire quando si passa il mouse sopra l'immagine.
• La scheda Dimensioni ti dà la possibilità di ridimensionare l'immagine.
• La scheda Aspetto consente di impostare la distanza tra immagine e testo, e l'allineamento del testo intorno all'immagine.
• La scheda Link offre la possibilità di stabilire un collegamento ipertestuale per l'immagine.
• Il pulsante Modifica avanzata ti permette di impostare gli attributi avanzati per l'immagine in formato HTML, eventi JavaScript, stili, ecc.

Fare clic sulla scheda Posizione e attraverso l'icona Scegli file si trova nella directory home webcurso cartella. Fare doppio clic su di esso per accedere ai contenuti e ripete la procedura per la cartella immagini. Selezionare il file che si trova in esso bot01.jpg e cliccare infine sul pulsante Apri. Notare che il percorso del file viene visualizzato nella finestra Proprietà immagine:
Digitare il testo nel campo Testo alternativo, per esempio, la definizione gemma.
Si noti che l'anteprima di stampa fornisce una miniatura dell'immagine che si includono nel vostro sito e vi dice la sua misura in pixel.

Ora Salvare la pagina con File - Salva con nome ... nel titolo della finestra come il tipo di casa nome della pagina e salvare il file denominato index.html nella webcurso cartella.
Ora che hai il file index.html note un'altra procedura per inserire le immagini nella vostra pagina:

Sua volta alla finestra Site Manager.

Consente di visualizzare, cliccando sul segno più a sinistra della lista ecosistemi ingresso di cartelle e file sul tuo sito. Ripetere la procedura sul segno più a sinistra della cartella immagini. Finestra è mostrato nella lista di tutte le immagini che si è precedentemente copiato in questa cartella.

Fare clic e trascinare l'area di lavoro per l'immagine da includere nella pagina. Per esempio, fare clic sull'immagine e trascinare bot02.jpg alla prima cella della seconda fila, proprio sotto l'immagine del pulsante è stato incluso nella definizione di cui sopra.

Con un doppio clic sull'immagine del pulsante si aprirà la finestra Proprietà immagine. Questo vi permette di modificare in qualsiasi momento, le proprietà di qualsiasi immagine che hai già incluso nella vostra pagina web. Ad esempio, i tipi Button tipo di ecosistemi come testo alternativo.

Ripetere il procedimento con gli altri pulsanti di navigazione sulla pagina e aggiungerli come una colonna.

Prevede un antipasto in Home Page

Si noti che la larghezza della prima colonna è troppo grande. Per ridurre, fare clic sul controllo di esso (nella parte superiore dell'area di lavoro) e trascinarla verso sinistra per "scontro" con i tasti. È possibile spostare troppo, se lo si desidera, i limiti delle altre colonne.

Potrete inserire una foto con un titolo che occuperà i tre rimanenti celle nella prima riga, quindi si deve unire in un unico precedenza. Per fare questo, fare clic sulla seconda cella nella prima riga, senza rilasciare il mouse, trascinate fino all'ultimo per selezionare (vedrete apparire segnato). Usare il menu contestuale del tasto destro del mouse sulle celle selezionate e scegliere, in particolare per quanto riguarda l'entrata Join the celle selezionate. Questo si uniranno alle tre celle in una singola cella che occupa tutta la sua larghezza. (Gli utenti di Microsoft di riconoscere questa azione come Unisci celle).

Quindi trascinare il titular.jpg immagine, che individua nella cartella Immagini, per la cellula risultante dall'unione. Anche in questo caso utilizza il menu contestuale del tasto destro del mouse su questo cellulare e selezionare una cella di tabella voce Proprietà. Nella nuova finestra che appare, Proprietà tabella - scheda Cells, trovare l'allineamento del contenuto del paragrafo. Selezionare Centrato drop orizzontale-down menu.

Fare clic su Applica e OK successivamente. L'immagine con il titolare è posizionata al centro della cellula.

Comprende la copertura

Ripetere la procedura che è noto per attaccare le cellule che vanno dalla seconda cella nella seconda riga l'ultimo in linea 8 (si sa, fare clic e trascinare per selezionare) e la selezione degli ingressi nel menu contestuale del tasto destro mouse, Join the celle selezionate.

Fare clic e trascinare l'immagine portada.jpg delle immagini nella cartella in questa posizione. Utilizza anche il menu contestuale del tasto destro del mouse - Proprietà della cella della tabella per cambiare l'allineamento orizzontale al centro della stessa, come abbiamo fatto in precedenza.

Include informazioni su footer

Une il 4 celle nell'ultima riga. Conseguente tipo di cellula con i tuoi dati personali, il nome della tua scuola e la data di creazione del web (utilizzando il menu Inserisci - caratteri e simboli, se si desidera includere il segno dei diritti d'autore). Esso comprende anche questo piè di pagina nella licenza che hanno governato il sito Web, per esempio, una licenza Creative Commons o di una licenza GNU / GPL.

Modificare questo testo a proprio piacimento.

Nota. Modifica il bordo del tavolo. Questa volta selezionare le celle di tabella Proprietà nel menu contestuale del tasto destro del mouse su una cella della tabella e fare clic sulla scheda Tabella. Individuare il punto di frontiera e modifica il valore 1 Sostituito da 0 pixel.

Infine memorizzare la pagina utilizzando il pulsante Salva. E controllare l'aspetto della pagina webcurso andare alla cartella e fare doppio clic sul file di indice. html per aprire nel browser predefinito.

Non male per la tua seconda pagina in Kompozer!

 Vedi il nostro manuale. Kompozer manuale - Modulo 5: Issuu 

 Kompozer manuale - Modulo 5: Lavorare con le immagini. PDF 

 Per l'editing di file con OpenOffice: formato ODT