CercaCrea: un editor HTML WYSIWYG
e modulo di ricerca in Visual Basic .net
Piccolo tutorial per fare un piccolo sito
Come prima cosa
per fare un sito bisogna preparare una cartella nel prorpio computer dove
salvare tutti i files:
Quindi clicca destro sul desktop poi su "nuovo" e
crea una cartella di nome "mio sito".
Ora metti nella cartella "mio sito" un paio di immagini jpeg
che chiamerai "immagine1.jpg" e "immagine2.jpg"
Questo tutorial non riguarda le immagini ma solo l'utilizzo del programma,
comunque se vuoi che il tuo sito venga bene dovresti comprimere il più
possibile le jpg lasciando la qualità alta.
Adesso apri Cercacrea (il file mshtml2.exe) , poi clicca destro sull'
iconcina con il tao e poi su "editor", una volta aperta la
finestra clicca sul menu file->salva , seleziona la cartella
"mio sito" sul desktop
Adesso nella parte di modifica visuale scrivi :"Ciao questo è
il mio sito".
Seleziona il testo appena scritto, cliccando sinistro e trascinandoci il mouse
sopra, col testo selezionato, scegli verdana al posto di times new
roman nella scelta font.
Clicca poi accanto sull' icona con la T e i colori per scgliere il colore
bianco per il testo, poi clicca sul secchiellino subito accanto per fare uno
sfondo nero, infine più in alto sulla barra degli strumenti clicca
sulla B che fa il testo in grassetto adesso il codice dell'
HTML selezione dovrebbe essere
che viene visualizzato nella pagina così;Ciao,
questo è il mio sito internet
come puoi notare
il background color è stato impostato su #000000 che
è il colore nero, e il colore del testo su #ffffff che è
bianco.
Se non vedi il codice scritto sopra clicca sul testo nella modifica visuale
e poi clicca sul tag FONT nella struttura HTML.
Adesso prova a cambiare il colore, hai selezionato il tag font nella
struttura e vengono fuori tutti gli attributi nella lista ce ne dovrebbe essere
uno "color=#ffffff" , cliccaci sopra.
in basso verrà scritto: FONT->color e poi sotto #ffffff
, cambia #ffffff in #ccffcc che è un verdino leggero,
la scritta adesso diventa leggermente verde, clicca di nuovo sulla scritta
nella modifica visuale e sul tag font nella struttura html.
dovresti vedere scritto nell' html selezione tutto il codice e in mezzo
BACKGROUND-COLOR: #000000 , cambialo in BACKGROUND-COLOR: #333333
(grigio scuro) e clicca su modifica HTML , se tutto ha funzionato adesso
la scritta nella modifica visuale dovrebbe essere leggermente diversa Ciao,
questo è il mio sito internet.
Adesso prova a cambiare lo sfondo della pagina:
Clicca sul testo nella modifica visuale e poi sul tag BODY nella struttura
HTML
Tra gli attributi visualizzati sotto clicca su bgcolor= , scrivi #000000
nel campo modifica attributo selezionato e clicca su modifica attributo.
Lo sfondo della pagina dovrebbe essere ora nero, ripeti i passaggi e imposta
l'attributo text di body su #ffffff , così il
colore predefinito del testo della pagina sarà bianco.
Adesso clicca alla fine del testo nella modifica visuale , premi invio
per andare a capo
cerca l'iconcina "Allineamento scorrevole" accanto a quella
della tabella nella barra degli strumenti e inserirai un testo scorrevole.
cliccaci all' interno e scrivi:"ho programmato questo sito in HTML"
, con i piccoli quadratini bianchi ai lati e angoli della scritta puoi anche
ridimensionare il testo scorrevole.
Adesso puoi provare a vedere un anteprima della pagina cliccando sul menu
vista->Browse, il testo dovrebbe scorrere, poi clicca di
nuovo su vista->Design , per tornare alla modifica.
Adesso puoi salvare la pagina , clicca su File->Salva e sovrascrivi
il file index.htm nella cartella mio sito.
Adesso clicca sull'iconcina "inserisci tabella" nella barra
degli strumenti, scrivi 1 nel campo righe, 2 nel campo colonne
e 2 nel campo bordo e clicca su ok
Viene inserita una piccola tabella nella pagina , clicca all' interno della
cella sinistra e clicca sull' iconcina "inserisci immagine"
nella barra degli strumenti, clicca su sfoglia e seleziona l'
immagine1.jpg nella cartella "mio sito" , poi clicca
su ok, rimpicciolisci l'immagine nella modifica visuale finchè
non diventa piccola abbastanza per la prima cella della tabella , poi clicca
all, interno della seconda cella della tabella e inserisci l'immagine2.jpg
come la prima.
Cicca sull' immagine 1 e poi sull' iconcina "allineamento al centro"
nella barra degli strumenti , fai lo stesso per l'immagine due.
Adesso puoi provare a vedere un anteprima della pagina cliccando sul menu
vista->Browse, il testo dovrebbe scorrere, poi clicca di
nuovo su vista->Design , per tornare alla modifica.
Adesso puoi salvare la pagina , clicca su File->Salva e sovrascrivi
il file index.htm nella cartella mio sito.
Una volta salvata la pagina index.htm clicca destro sulla modifica
visuale e seleziona tutto, premi il tasto canc sulla tastiera e
cancella tutto.
Ora salva la pagina come immagine1.htm , inserisci l'immagine1.jpg
nella pagina come sopra, una volta inserita selezionala e clicca sull' iconcina
"Collegamento ipertestuale " nella barra degli strumenti,
nel campo url scrivi index.htm, per collegarla all home page.
Salva la pagina sovrascrivendo immagine1.htm e cancella l'immagine
, ora salva la pagina come immagine2.htm , inserisci l'immagine2.jpg
nella pagina , una volta inserita selezionala e clicca sull' iconcina "Collegamento
ipertestuale " nella barra degli strumenti, nel campo url scrivi
index.htm, per collegarla all home page.
Salva la pagina sovrascrivendo immagine2.htm .
Ora riapri la pagina index.htm , seleziona l'immagine 1 collegalla
alla pagina immagine1.htm , fai lo stesso con l'iimmagine 2 collegandola
alla pagina immagine2.htm , salva l'index sovrascrivendolo.
Adesso puoi finalmente visualizzare il tuo sitino , apri la cartella mio
sito sul desktop , apri index.htm e clicca sulla prima immagine,
visualizzerai la pagina con l'immagine ingrandita , poi clicca sull' immagine
ingrandita per tornare all' indice, adesso fai lo stesso con la seconda immagine,
vedi se tutto funziona bene , altrimenti riapri le pagine e riinserisci i
collegamenti sulle immagini, oltre a delle immagini puoi fare anche collegamenti
sul testo e aggiungere così altre pagine.
Adesso il tuo sito è gia pronto per essere esplorato in locale, ma
ancora deve essere rifinito prima di essere trasferito sul tuo spazio internet.
Apri quindi le pagine una ad una , dal menu vista seleziona
HTML e cerca tutti i percorsi che erano stati inseriti come interni
al tuo computer .
Soprattutto nelle immagini dovresti trovare percorsi del tipo:< IMG alt=""
hspace=0 src="C:\Documents and Settings\oem\Desktop\mio sito\immagine2.jpg"
align=baseline border=0>
Dovresti sostituire tutti i percorsi in < IMG alt="" hspace=0 src="immagine2.jpg"
align=baseline border=0>
Quindi lasciando solo il nome del file e cancellando tutto il percorso di
cartelle nel tuo computer.
(lo so che è palloso, nelle prossime versioni cercherò di farlo
automatico.)
Comunque finchè non fai questo le pagine funzioneranno solo nel tuo
computer, se invece lo fai funzioneranno sia sul tuo computer che su qualsiasi
altro computer e anche su un sito internet.
Dopo avere sostitutito
i percorsi risalva tutti i file con lo stesso nome.
Adesso puoi caricare tutti i file e tutte le immagini all' interno di una
stessa cartella nel tuo sito, puo essere una sottocartella o la cartella principale,
è uguale, l'importante è che carichi tutte le pagine e le immagini
nella stessa cartella.
Questo è il risultato del tutorial.
chiudi menu