KOMPOZER CONSIGLI E TRUCCHI
|
|
|
- Giada Marini
- 9 anni fa
- Visualizzazioni
Transcript
1 KOMPOZER CONSIGLI E TRUCCHI Parte terza
2 DUE MENU' Chi realizza siti web prima o dopo (piuttosto prima) avverte la necessità di avere un menù di navigazione un po' diverso da una serie di semplici link, se non altro per motivi estetici. Fino a qualche tempo fa erano molto usati dei link ottenuti con bottoni che cambiavano colore al passaggio del mouse; bisognava però ricorrere ai codici scritti in javascript e realizzare con i programmi di grafica i propri bottoni personalizzati. Per fortuna i fogli di stile (CSS) permettono invece di realizzare dei menù, molto leggeri anche senza ricorrere alle immagini (se non in particolari menù). Questi menù si possono ampiamente modificare, scegliendo colori e font a piacere. Prima di impegnarsi nella realizzazione dei menù sarebbe però molto opportuno conoscere almeno i rudimenti dell' HTML e dei CSS, in quanto si tratta sempre di inserire e modificare nell'interno della pagina web dei codici. In questo tutorial ho cercato perciò di spiegare i vari passaggi necessari anche a chi queste conoscenze non le possieda. Quando si lavora con i codici è necessario procedere con la massima attenzione; il lavoro da fare non è difficile però è un po' delicato. Avverto subito che i menù funzionano sia con Explorer sia con Firefox e che il web editor deve essere KompoZer o un altro editor che permetta di copiare ed incollare il codice sorgente. Non tentate di realizzare questi menù usando Front Page Express. UN MENU' ORIZZONTALE Nell' immagine si vede chiaramente cosa succede quando il cursore del mouse è dentro la linguetta: cambiano colore lo sfondo e il carattere. Come è stato detto, il menù è ampiamente modificabile.
3 COME PROCEDERE Aprire con KompoZer il file in cui si vuole inserire il menù. Copiare il seguente codice: <! /* Prelevato su link.it e modificato*/ #navlist { padding: 3px 0; margin left: 0; border bottom: 1px solid #000000; font: bold 12px Verdana, sans serif; #navlist li { list style: none; display: inline; #navlist li a { padding: 3px 0.5em; margin left: 3px; border: 2px solid #000000; background: #ffff00; #navlist li a:link { color: #ff0000; #navlist li a:visited { color: #ff0000; #navlist li a:hover { color: #ffffff; background: #ff0000; border color: #000000; #navlist li a#current { background: white; border bottom: 1px solid white; > Cliccare ora in basso a sinistra di KompoZer, la linguetta Sorgente
4 Ora si vedrà il codice sorgente della pagina web (il codice della vostra pagina potrebbe essere diverso, ma non preoccupatevi e seguite le istruzioni). Fare clic a destra di </title> e dare un Invio (per aprire uno spazio): Fare clic destro nel punto segnato dalla freccia del mouse e poi clic su Incolla. Ora avrete il vostro codice copiato tra <head> e </head>. Fare clic, in basso a sinistra di KompoZer, sulla linguetta Disegno. Il codice è sparito e sembra non sia successo nulla Copiare ora il seguente codice: <div style="text align: center;"> <div id="navcontainer"> <ul id="navlist"> <li id="active"><br> </li> <li><a href="index.html">home Page</a></li> <li><a href="#">pagina due</a></li> <li><a href="#">pagina tre</a></li> <li><a href="#">pagina quattro</a></li> <li><a href="#">pagina cinque</a></li> </div> </div> Portare ora il mouse nel punto della pagina web dove si vuol inserire il menù (anche se il cursore del mouse è a sinistra, il menù verrà automaticamente centrato).
5 Cliccare su Inserisci e poi su HTML. Apparirà la finestra Inserimento HTML. Nell'interno della finestra fare clic destro, cliccare su Incolla e poi cliccare su Inserire. Ora dovreste vedere il vostro menù. Salvate la pagina. Come modificare il menù Prima di procedere è bene sapere che lo spessore delle linee o l'altezza dei caratteri hanno il codice px. Es: 3px potrebbe essere lo spessore (3 pixel) di una linea oppure 12px l'altezza di un carattere. Attenzione a non lasciare spazio tra il numero e px. Verdana, Arial, Nimbus Sans L ecc. sono i tipi di carattere (font). Il codice per i colori è preceduto dal # e da sei cifre e/o lettere. Il codice per il rosso è, ad esempio, #ff0000; quello per il blu # ecc. Per i codici dei colori usate i seguenti link: Per cambiare un colore è sufficiente quindi sostituire il vecchio codice con quello desiderato. Attenzione: non cancellare il ; dopo il codice colore. <! /* Prelevato su link.it e modificato*/ #navlist { padding: 3px 0; margin left: 0; border bottom: 1px solid #000000; linea sotto il menù (spessore e colore) (Nota 1) font: bold 12px Verdana, sans serif; caratteri scritta (neretto, altezza, tipo di carattere) #navlist li { list style: none; display: inline; #navlist li a { padding: 3px 0.5em; margin left: 3px; border: 2px solid #000000; contorno linguette menù (spessore e colore) background: #ffff00; colore sfondo linguette mouse fuori #navlist li a:link { color: #ff0000; colore carattere mouse fuori #navlist li a:visited { color: #ff0000; usare il colore carattere mouse fuori #navlist li a:hover { color: #ffffff; colore carattere mouse dentro background: #ff0000; colore sfondo linguette mouse dentro border color: #000000; colore bordo linguette mouse fuori #navlist li a#current { background: white; border bottom: 1px solid white; > (Nota 1: se non si desidera la linea orizzontale mettere 0px.)
6 Modificare i link Questo è il codice da cui partire: <div style="text align: center;"> <div id="navcontainer"> <ul id="navlist"> <li id="active"><br> </li> <li><a href="index.html">home Page</a></li> <li><a href="#">pagina due</a></li> <li><a href="#">pagina tre</a></li> <li><a href="#">pagina quattro</a></li> <li><a href="#">pagina cinque</a></li> </div> </div> A destra di a href mettete il nome della vostra pagina e tra > e < scrivete le parole calde. Es. : <li><a href="contatti.html">contatti</a></li> Per aggiungere linguette basta copiare e modificare questo codice <li><a href="nonso.html">linguetta nuova</a></li> e inserirlo in una riga sopra il tag. UN MENU' VERTICALE Nell' immagine si vede chiaramente cosa succede quando il cursore del mouse è dentro la linguetta: anche questa volta cambiano colore lo sfondo e il carattere. Se non vi piacciono i colori o il font (tipo di carattere), si possono cambiare a piacere. (Il codice è stato copiato e poi modificato da )
7 Come procedere Il procedimento per ottenere il menù verticale è del tutto identico al precedente; cambiano infatti solo i codici. Forse è bene rileggere le istruzioni ( o leggerle, perché scommetto che qualcuno, interessato solo al menù verticale, avrà saltato le pagine precedenti ). Copiare questo codice e poi incollarlo tra <head> e </head> (sapete già come farlo):.tagmenu{ padding: 0; width: 180px; list style type: none;.tagmenu li a{ color: #ffffff; display: block; width: 100%; padding: 2px 4px; font weight: bold; font family: verdana; font size: 15px; border: 1px solid; border color:#99cc33 # # #99CC33; /*light dark dark light*/ background color: #669900; text decoration:none;.tagmenu li a:visited{ color: #ffffff;.tagmenu li a:hover,.tagmenu li a:active{ color: #000000; background color: #CCCCCC; Cliccata la linguetta Disegno, in basso a sinistra di KompoZer, come al solito sembrerà non sia successo nulla Portare il cursore del mouse nel punto in cui si vuol inserire il menù (con ogni probabilità all'interno di una cella di una tabella) e copiare il seguente codice: <ul class="tagmenu"> <li><a href="index.html">homepage</a></li> <li><a href="script.html">script</a></li> <li><a href="flash.html">flash e Actionscript</a></li> <li><a href="css.html">css e HTML</a></li> <li><a href="php.html">php</a></li> <li><a href=" Incollare il codice con la modalità già descritta in precedenza. Dovrebbe apparire il menù.
8 Come modificare il menù.tagmenu{ padding: 0; width: 180px; > lunghezza menù list style type: none;.tagmenu li a{ color: white; display: block; width: 100%; padding: 2px 4px; font weight: bold; font family: verdana; font size: 15px; > font e grandezza font border: 1px solid; border color:#99cc33 # # #99CC33; /*light dark dark light*/ background color: #669900; > colore sfondo mouse fuori text decoration:none;.tagmenu li a:visited{ color: #ffffff; > colore carattere mouse fuori.tagmenu li a:hover,.tagmenu li a:active{ color: #000000; > colore carattere mouse dentro background color: #CCCCCC; > colore sfondo mouse dentro Modificare i link Anche questa volta il lavoro da fare è semplice: basta cambiare il nome delle pagine web e le parole calde. Es.: <ul class="tagmenu"> <li><a href="index.html">homepage</a></li> <li><a href="script.html">script</a></li> <li><a href="flash.html">flash e Actionscript</a></li> <li><a href="css.html">css e HTML</a></li> <li><a href="news.html >News </a></li> > link modificato <li><a href=" Per aggiungere linguette basta copiare e modificare questo codice <li><a href="contatti.html">contatti</a></li> e inserirlo in una riga sopra il tag.
9 Quando ci si rende conto che inserire e modificare un menù nelle proprie pagine web non è un'impresa tanto difficile, si è invogliati a sperimentare altre soluzioni. Ecco qualche link utile; troverete sicuramente il menù che fa per voi: boy.com/images/ebmenus/menus.html link.it/ (Cercare nella colonna a sinistra il link scripting ). Come sempre, BUON LAVORO!! Trieste, 13 luglio 2010 (continua...)
10 Ebbene sì, visto che mi avete seguito fin qui, vi regalo altri due menù. Menù orizzontale Mettere tra <head> e </head>: /*Credits: Dynamic Drive CSS Library */ /*URL: */.underlinemenu{ font: bold 15px Verdana; width: 100%;.underlinemenu ul{ padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/ text align: center; //set value to "left", "center", or "right"*/.underlinemenu ul li{ display: inline;.underlinemenu ul li a{ color: #00ff00; padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/ margin right: 20px; /*spacing between each menu link*/ border bottom: 3px solid #ff0000; /*bottom border is 3px*/.underlinemenu ul li a:hover,.underlinemenu ul li a.selected{ border bottom color: #ffff00; Inserire nella pagina web: <div class="underlinemenu"> <ul> <li><a href="a.html">home</a></li> <li><a href="a.html">css Codes</a></li> <li><a href="a.html">forums</a></li> <li><a href="a.html">webmaster Tools</a></li> <li><a href="a.html">javascript</a></li> <li><a href="a.html">gallery</a></li> </div>
11 Modifiche: /*Credits: Dynamic Drive CSS Library */ /*URL: */.underlinemenu{ font: bold 20px Verdana; altezza carattere e tipo carattere width: 100%;.underlinemenu ul{ padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/ text align: center; //set value to "left", "center", or "right"*/.underlinemenu ul li{ display: inline;.underlinemenu ul li a{ color: #00ff00; colore testo padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/ margin right: 20px; /*spacing between each menu link*/ border bottom: 3px solid #ff0000; /*bottom border is 3px*/ spessore, colore linea mouse fuori.underlinemenu ul li a:hover,.underlinemenu ul li a.selected{ border bottom color: #ffff00; colore linea mouse dentro Modificare i link Anche questa volta il lavoro da fare è semplice: basta cambiare il nome delle pagine web e le parole calde. <div class="underlinemenu"> <ul> <li><a href="a.html">home</a></li> <li><a href="a.html">css Codes</a></li> <li><a href="a.html">forums</a></li> <li><a href="a.html">webmaster Tools</a></li> <li><a href="a.html">javascript</a></li> <li><a href="a.html"></a>java</li> esempio di modifica </div> Per aggiungere linguette basta copiare e modificare questo codice <li><a href="a.html"> </a></li> e inserirlo in una riga sopra il tag.
12 Menù verticale Mettere tra <head> e </head>: /*Credits: Dynamic Drive CSS Library */ /*URL: */.bevelmenu{ list style type: none; padding: 0; width: 180px;.bevelmenu li a{ display: block; width: 100%; padding: 2px 4px; font weight: bold; font family: Verdana; font size: 15px; color: #000000; background color: #e0ffff; border: 2px solid #FFF2BF; text decoration:none;.bevelmenu li a:hover{ color: #ff0000; background color: #ffff00; border style: outset; html>body.bevelmenu li a:active{ /* Apply mousedown effect (non IE browsers only) */ border style: inset; Inserire nella pagina web: <ul class="bevelmenu"> <li><a href="a.html">dynamic Drive</a></li> <li><a href="a.html">css Library</a></li> <li><a href="a.html">javascript</a></li> <li><a href="a.html">dom Reference</a></li> <li><a href="a.html">css Drive</a></li> <li><a href="a.html">coding Forums</a></li>
13 Modifiche: /*Credits: Dynamic Drive CSS Library */ /*URL: */.bevelmenu{ list style type: none; padding: 0; width: 180px; larghezza sfondo.bevelmenu li a{ display: block; width: 100%; padding: 2px 4px; font weight: bold; font family: Verdana; font size: 15px; color: #000000; Nota 1 background color: #e0ffff; colore bottone mouse fuori border: 2px solid #FFF2BF; ombreggiatura text decoration:none;.bevelmenu li a:hover{ color: #ff0000; colore testo mouse dentro background color: #ffff00; colore bottone mouse dentro border style: outset; html>body.bevelmenu li a:active{ /* Apply mousedown effect (non IE browsers only) */ border style: inset; Nota 1: tipo carttere, altezza e colore Modificare i link Anche questa volta il lavoro da fare è semplice: basta cambiare il nome delle pagine web e le parole calde. <ul class="bevelmenu"> <li><a href="a.html">dynamic Drive</a></li> <li><a href="a.html">css Library</a></li> <li><a href="a.html">javascript</a></li> <li><a href="a.html">dom Reference</a></li> <li><a href="a.html">css Drive</a></li> <li><a href="b.html">java</a></li> > esempio di modifica Per aggiungere linguette basta copiare e modificare questo codice <li><a href="a.html"> </a></li> e inserirlo in una riga sopra il tag.
CONSIGLI E TRUCCHI. Parte seconda
CONSIGLI E TRUCCHI Parte seconda IMPOSTARE LA PAGINA WEB Un sito web da noi realizzato certamente viene visualizzato benissimo sul nostro computer, ma talvolta succede che gli amici ci avvertono che il
CSS. Esercizi CC BY ALESSANDRO URSOMANDO DIAPOSITIVA 2 CSS PROPRIETÀ
CSS Esercizi CSS PROPRIETÀ DIAPOSITIVA 2 Corredare l esercizio precedentemente realizzato di un file.css che presenti delle dichiarazioni per impostare: l ampiezza del body a 800 pixel a giallo chiaro
Struttura Layout Monolitico Fisso con Menu Orizzontale
Struttura Layout Monolitico Fisso con Menu Orizzontale BODY Body { margin: 0px; padding:0; font-family: arial,sans-serif; font-size: 76%; text-align: center; background-color: #FC3; background-image: url();
layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto
Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding
CSS 6. Il modello contenitore (box model) Elementi flottanti
CSS 6 Il modello contenitore (box model) Elementi flottanti Il modello contenitore Tecnologie di Sviluppo per il WEB 2 BOX MODEL CSS assume che ogni elemento genera uno o più box rettangolari, chiamati
CSS (Cascading Style Sheets)
Foglio di stile CSS (Cascading Style Sheets) Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Vedi http://www.w3schools.com/css/demo_default.htm
Riassunto CSS Tutorial
Colori e sfondi color background-color h1 { color: #ff0000; body { background-color: #FFCC66; Riassunto CSS Tutorial Per uno sfondo trasparente: body { background-color: transparent; background-image background-repeat
HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte
HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo
Guida alla modifica di un layout
Guida alla modifica di un layout Abbiamo realizzato il sito web di Hexagon Tours utilizzando HTML e CSS, impostando una struttura formata da header, barra di navigazione, contenuti principali e laterali,
Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà
HTML e CSS Sommario HTML e CSS I fogli di stile cosa sono principali proprietà CSS CSS La specifica HTML elenca le linee guida su come i browser dovrebbero visualizzare i diversi elementi del documento
Capitolo 2. Figura 21. Inserimento dati
Capitolo 2 INSERIMENTO DI DATI In ogni cella del foglio di lavoro è possibile inserire dati che possono essere di tipo testuale o numerico, oppure è possibile inserire formule le quali hanno la caratteristica
Come creare una tabella responsive
Come creare una tabella responsive martedì, 26 dicembre 2017 Uno degli elementi HTML più difficili da trattare quando si passa dalla visualizzazione desktop a quella mobile è senz'altro la tabella. Si
WEB I FOGLI DI STILE. Gabriele Murara
WEB I FOGLI DI STILE Gabriele Murara 1 Cosa sono e a cosa servono HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento
Fogli di stile a cascata (CSS)
Fogli di stile a cascata (CSS) November 25, 2010 1 Definizione I fogli di stile a cascata (Cascading Style Sheets, CSS) sono una delle tecnologie introdotte dal W3C per la formattazione dei documenti HTML,
LAYOUT e NAVIBAR. + frame e iframe
LAYOUT e NAVIBAR + frame e iframe Elementi del layout HTML Nei siti Web spesso vengono visualizzati i contenuti in più colonne (come una rivista o un giornale). l HTML5 offre nuovi elementi semantici che
Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:
Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:
Piccolo tutorial per TimelineJS
Piccolo tutorial per TimelineJS Sommario Scaricare lo spreadsheet... 1 Modificare il file con i propri contenuti... 1 Lo spreadsheet passo passo... 2 La data... 2 Il corpo della slide... 2 Contenuti multimediali...
U.T.E FOGLIO ELETTRONICO. Università della Terza Età. Sede di Novate Milanese. Corso Informatica Approfondimento. Docente: Giovanni Pozzi
U.T.E Università della Terza Età Sede di Novate Milanese Corso Informatica Approfondimento FOGLIO ELETTRONICO Docente: Giovanni Pozzi FOGLIO ELETTRONICO MS-Excel E un programma che permette di effettuare:
INDICE DEGLI ARGOMENTI
LA FINESTRA DI WORD INDICE DEGLI ARGOMENTI OPERAZIONI SU DOCUMENTO. Pag. Digitare il testo in Word Creare un nuovo documento Apertura di un documento esistente Salvataggio di un documento Chiusura di un
U.T.E Università della Terza Età
U.T.E Università della Terza Età Sede di Novate Milanese Corso Informatica Approfondimento FOGLIO ELETTRONICO Docente: Giovanni Pozzi FOGLIO ELETTRONICO MS-Excel E un programma che permette di effettuare:
Personalizza, modifica il layout di Contact Form 7 via Css
Personalizza, modifica il layout di Contact Form 7 via Css wpp.altervista.org/blog/personalizza-modifica-il-layout-di-contact-form-7/ Ciao, benvenuto su Go WordPress. In un articolo precedente ho spiegato,
Inserire un nuovo foglio
Excel Base- Lezione 2 Inserire un nuovo foglio 1. Nella parte inferiore della finestra di lavoro sulla sinistra, fare clic sulla linguetta del foglio, a sinistra del quale se ne desidera aggiungere uno
Operazioni preliminari: creare una cartella in Documenti
Operazioni preliminari: creare una cartella in Documenti 1. Fare clic in successione su Start (cerchio con il logo Microsoft in basso a sinistra), Documenti. 2. Cliccare su Nuova cartella comparirà una
Progettazione multimediale
Progettazione multimediale Le tabelle 1 Obiettivi Perché si usano le tabelle Le proprietà delle tabelle Inserimento e modifica delle proprietà 2 Perché si usano le tabelle Una pagina Web è formata da testo