Kompozer Manuale: Modulo 4 - La prima pagina

In questo articolo vi mostrerò come fare una prima pagina Web con Kompozer, progettare la struttura del sito e creare una prima pagina con il testo modificato per migliorare esteticamente.

Progettare la struttura di cartelle e directory

Utilizzando le procedure standard per creare nuove cartelle nel sistema operativo installato sul computer, creare una directory denominata webcurso nella vostra home directory e, all'interno, cartelle, immagini, multimedia e file necessari per il tuo sito web iniziale.

La prima pagina

Kompozer Corri attraverso la consueta procedura: vedere la schermata principale dell'applicazione e l'area di lavoro specifico in cui verrà creata una pagina Web prima. Vai al menu File e selezionare il menu a discesa Salva con nome ... Kompozer cercate un titolo per la pagina che si sta salvando, titolo da visualizzare nella barra del titolo del browser Web quando si accede alla pagina da Internet. Di tipo nella definizione campo di testo, questo è il titolo della pagina che si sta creando.
Sullo schermo viene visualizzata, la finestra Salva con nome in grado di proporre, come il nome del file del sito che si sta facendo la stessa cosa che hai scritto nel paragrafo precedente. Modificare il nome del file e assicurarsi definicion.html cartella di salvataggio webcurso si è creato quando ha progettato la struttura del sito.

Il risultato sarà un nuovo file nella cartella definicion.html che webcurso in grado di visualizzare sul vostro browser Web semplicemente facendo doppio clic su di esso. Ovviamente, in questo momento, nulla viene visualizzata la pagina, ma uno sfondo bianco, perché è completamente vuoto (ma ha osservato come il nome della definizione della pagina visualizzata se nel titolo della finestra del browser). Dovrete iniziare ad aggiungere testo, immagini e altri mezzi di comunicazione voce che si vuole.

Set Kompozer per il tuo nuovo sito web

Per facilitare il lavoro di creazione e modifica di pagine Web in Kompozer è molto conveniente che si configura l'applicazione di riferimento sempre il vostro sito appena creato. Per fare questo dovete avere il window manager siti Kompozer, utili ed essenziali quando si dispone di diversi siti web creati sul computer. Noi ti insegnano ad utilizzare.

Fare clic sull'icona per aprire la finestra Modifica siti con la forma di configurazione della pubblicazione di un nuovo sito.

Immettere i seguenti valori:

• Nome del sito: Ecosistemi.
• Pubblica Server: il sito sarà fatto sul tuo computer a livello locale (si parlerà più avanti, quando hai finito la vostra creazione e l'editing, la pubblicazione su Internet), individuare la cartella utilizzando la directory webcurso pulsante Seleziona. Quando si trova clic sul pulsante Seleziona.
• Nome utente: Inserisci il tuo nome.

Infine, fare clic su OK. Guarda come hai progettato la struttura di file e cartelle è ora visualizzato nella finestra di Site Manager.

È possibile utilizzare Site Manager per accedere direttamente alle pagine passano così rapidamente in grado di modificarle, creare nuove cartelle in webcurso, rinominare, ecc. E 'quindi molto utile, configurarlo correttamente.

Aggiungere un testo alla pagina

Il testo è una componente fondamentale delle pagine web. La chiave generata (anche se si può anche copiare da qualsiasi altro programma e incollarlo nello spazio di lavoro).

Si dovrebbe considerare che il loro obiettivo principale è la loro leggibilità, cioè può essere letto con facilità (un fatto che non dipende solo dal tipo di font e dimensioni utilizzati, ma anche i colori e le immagini utilizzate nella parte inferiore della pagina) . Riserva la sottolineatura per i collegamenti, usare il corsivo ai proprietari o per sottolineare un pezzo di testo e l'uso in grassetto per sottolineare una parola.

Si noti che se si utilizza un carattere che il navigatore del tuo sito web non prende la sua squadra non sembrava esattamente come progettato. Pertanto, con caratteri tipografici comuni come Arial, Times New Roman, Courier, le fonti disponibili su praticamente qualsiasi computer con qualsiasi sistema operativo installato, comprese le macchine Linux.
Per organizzare il testo su schermo è preferibile utilizzare le tabelle (e poi ci indica come, se si prevede che è simile a come si utilizza con qualsiasi word processor) e senza l'utilizzo di schede o trattini. Non eccedere nell'uso l'uso di proiettili.
Hands On!

Digitare il lavoro in bianco il seguente: Quali sono gli ecosistemi?. Premere il tasto Invio alla fine del paragrafo, per Kompozer fare una interruzione di linea. Esattamente lo stesso come si farebbe se si stesse usando un word processor, invece di un sito web authoring domanda!

Continuare a digitare:
Ovunque, foreste, fiumi, deserti, mare o anche in piccoli stagni, sono una varietà di esseri viventi: animali, piante, ecc. Questi siti sono inoltre caratterizzati dalla presenza di elementi inanimati come l'aria, l'acqua, il suolo o la luce.
Gli esseri viventi hanno bisogno di questi elementi di crescere e svilupparsi.
L'insieme di tutti gli esseri viventi e gli esseri inanimati di un territorio è un ecosistema.

Devi solo preoccupare di scrivere il testo e rendere l'intro che si desidera per separare i paragrafi. Salvare il file dal menu File - Salva. Visualizzare il tuo aspetto nel tuo browser facendo doppio clic sul definicion.html cartella di file di webcurso. Testo scritto viene visualizzata la pagina, ma è ancora molto ottusi e noiosi: è necessario modificare per migliorare il suo aspetto.

Modificare il testo scritto

È possibile modificare il testo scritto per cambiare il tipo di font, dimensione, colore, allineamento dei paragrafi, ecc. Ritiene che un passo obbligatorio è quello di selezionare e far avanzare il frammento che si desidera modificare prima di applicare eventuali modifiche (fare clic e trascinare il mouse per selezionare del testo, fare doppio clic su una parola per selezionare o doppia Fare clic su un clic e rapido per selezionare l'intera linea): notare come il testo selezionato viene evidenziato per dirvi che si tratta.

Allinea il titolo della pagina al centro

Per impostazione predefinita, il testo si digita o copia-incolla è allineato con il bordo sinistro della finestra. Se si vuole centrare il testo o allineare il margine destro dovrà utilizzare una delle icone di allineamento del testo per localizzare sulla barra di formattazione della Kompozer.

In questo caso, utilizzare l'icona Allinea al centro per centrare il testo sulla pagina che si sta creando. Il punto si muoverà di conseguenza. (Questa procedura consente anche di allineare le immagini, intestazioni e linee di separazione orizzontali: è sufficiente selezionare l'oggetto di cui l'allineamento che si desidera modificare e fare clic sul pulsante appropriato).

Aumento delle dimensioni

Kompozer consente di aumentare le dimensioni del testo di un processo molto veloce utilizzando i pulsanti Riduci / Aumenta la dimensione del carattere troverete bar Formato:

Come sempre, è necessario innanzitutto selezionare il testo. Quindi fare clic sul pulsante Migliora per visualizzare un formato più grande. Per esempio, 3 volte clic su questa icona per acquistare una dimensione appropriata. Termina cliccando su un'area di lavoro vuota per vedere il risultato finale.

Fare clic sulla scheda Anteprima nella parte inferiore dell'area di lavoro per far scorrere la pagina si presenta, come faremmo un visitatore al tuo sito.

Ripetere la procedura utilizzando il pulsante una volta Aumenta la dimensione del testo sulla rimanenti paragrafi della pagina. Si può vedere un miglioramento sostanziale nel progetto, anche se la pagina è molto semplice per essere in bianco e nero!. Aggiungere un po 'di colore per migliorare la vostra presentazione!.

Cambia colore di testo

Usa i colori del testo è possibile aggiungere alle pagine di interesse. Nella maggior parte dei casi si desidera utilizzare un colore di testo che contrasta nettamente con lo sfondo: per impostazione predefinita, la pagina si crea è un testo nero su sfondo bianco (è possibile personalizzare entrambi gli aspetti di seguito). Si potrebbe anche voler evidenziare porzioni di testo nelle pagine utilizzando un colore di carattere diverso che si utilizza per il resto del testo. Ad esempio, alcune pagine sono belle con le intestazioni in un colore diverso. Ma ricordate di non abusare in eccesso di cambiare i colori (la leggibilità viene prima) ed essere sicuri di mantenere il colore coerente in tutto il sito. Ad esempio, utilizzare lo stesso colore per il testo e link sulla pagina principale nelle pagine interne.

Per cambiare il colore del testo si utilizzano i pulsanti selezionati Scegli Color Bar Formato: La prima permette di cambiare il colore del carattere, il secondo sarà cambiare lo sfondo.

Come si fa clic su una di queste icone si aprirà una finestra di testo di colore dello schermo:

Il suo utilizzo è semplice: l'elenco dei colori predefiniti (l'elenco standard che saranno visibili su qualsiasi piattaforma o qualsiasi tipo di monitor), selezionare un colore di vostro interesse o scegliere una chiave diversa da quella del campione che appare a sinistra Vantaggio cliccando su una posizione determinata. È inoltre possibile utilizzare la gamma tonale che è appena al di sotto di selezionare una tonalità di colore più chiaro o più scuro.
Vedere come si modificano i valori fissati in tonalità, saturazione, luminosità, Rosso, Verde, Blu, ogni volta che si seleziona un colore diverso e il piccolo campione di colore che prevede la finestra stessa in base al colore selezionato.
Questa finestra merita qualche spiegazione ha a che fare con i valori indicati nella parte inferiore di esso:

La combinazione di tasti e numeri che compaiono nella casella di testo esadecimale è un altro modo per i colori di riferimento. È possibile visualizzare il codice esadecimale per ogni colore in http://html-color-codes.info/codigos-de-colores-hexadecimales/ e visualizzare i risultati finali.

Internet trovare molti strumenti online che consentono di selezionare e display a colori diversi intervalli utilizzando il suo codice esadecimale e / o l'installazione di programmi specifici per trovare il codice esadecimale del colore.

Selezionato Siti Web:

• I valori di colore in esadecimali: http://www.webtaller.com/utilidades/csscoder/colores.php
• Cloford: palette con oltre 500 http://cloford.com/resources/colours/500col.htm tonalità di colore
• ColorSchemer: http://www.colorschemer.com/online.html selezione delle risorse on-line
• Convertitore online DRAAC colore: Consente di visualizzare il colore selezionato come http://www.draac.com/colorconvert.html sfondo dello schermo

Freeware e libero:

• Windows: Pixel http://www.screwturn.eu/PixelPicker.ashx Picker - programma gratuito con licenza GNU / GPL. Richiede Microsoft. Net Framework 2.0
• Windows: Instant contagocce e Pixel Pick http://instant-eyedropper.com/ http://www.design-lib.com/the_pixel-pick.php sia completamente gratis
• Mac OS X: Hex Color Picker http://wafflesoftware.net/hexpicker/
• Ubuntu: Hai Gcolor2 e KcolorChooser, due applicazioni molto simili che permettono di ottenere il codice esadecimale del colore selezionato. È possibile installare direttamente da Synaptic.

In questo esempio particolare, selezionare domanda del titolo nello spazio di lavoro e selezionare un colore dalla linea blu (tonalità scura) della gamma di colori predefiniti della finestra.

Ripetere l'operazione per selezionare il colore grigio scuro (codice esadecimale # 333333) e si applicano a altri punti della pagina.

L'aspetto estetico della pagina è migliorata, non è vero?

Utilizzare intestazioni predefinite

Aumentare o diminuire la dimensione del testo della tua pagina web utilizzando i pulsanti che hai visto nella barra di formato non è molto preciso. Kompozer offre la possibilità di utilizzare le intestazioni sulle pagine web, un particolare tipo di formattazione del testo e insieme predefinito di selezioni con una dimensione di carattere più grande di testo normale, di solito in grassetto di solito separate anteriore e posteriore da una linea di spazio bianco.

È possibile utilizzare una intestazione per il titolo della pagina, ma è possibile utilizzare diverse dimensioni delle intestazioni per diversi livelli di enfasi, più l'uso di intestazioni permette di dare uniformità alle dimensioni del testo sul vostro sito web un senso molto veloce e efficace.

HTML è disponibile in 6 taglie dalla intestazione. Non tutti sono efficaci in quanto tale, in quanto alcuni sono troppo piccoli, ancora più piccolo rispetto al corpo del testo.

È possibile accedere alla 6 tipi disponibili dal menu a discesa stili di menu Kompozer comma:

Pratica con la pagina che si sta creando:

1. Utilizzare la voce del menu Modifica - Annulla, icona Annulla o Ctrl + Z molte volte, come precisa di ripristinare l'aspetto della pagina al suo originale stato iniziale: cioè, il testo senza applicare qualsiasi formato di dimensioni font o il colore.
2. Selezionare il titolo interrogativo. Visualizza gli stili precedente punto e fare clic sul titolo 1. Wow, che uno sguardo ... e come semplice!
3. Ora, si applicano le nuove procedure che sapete di cambiare:
   1. Il titolo di un colore blu scuro
   2. Il resto del testo aumenta le dimensioni utilizzando il pulsante una volta Aumenta la dimensione del carattere e cambiare il colore di un tono grigio scuro, come lei sa fare.
   3. Selezionare l'ultimo paragrafo di pagina (il gruppo formato da ... è un ecosistema) e applicare uno stile di paragrafo, titolo 4. Utilizzare la scheda Anteprima per visualizzare l'aspetto complessivo della pagina e ammirare il nuovo look.

Salvare il file con File - Salva oppure utilizzando l'icona Salva.

Se volete potete vedere in anteprima l'aspetto della pagina direttamente nel vostro browser predefinito webcurso localizzare la cartella e fare doppio clic sul file definicion.html. Sapete come inserire del testo in una pagina Web e come modificare! Kompozer La classe prima è finita!

 Kompozer Manuale - Modulo 4: La tua prima pagina Web. PDF 

 Per l'editing di file con OpenOffice: formato ODT