Un ottimo appunto da leggere e stampare con tutte le informazioni più importanti da sapere quando si crea un lay-out con i CSS: è l'ottimo Specchietto riassuntivo dei CSS, traduzione in italiano del CSS Cheat Sheet.
Non tutte le proprietà elencate sono già state trattate a lezione (per approfondirle c'è sempre il solito html.it), ma dargli un'occhiata da subito non è comunque una cattiva idea.

Per inserire un link in una pagina HTML si utilizza il tag <a>.

Il tag <a> ha due attributi obbligatori, e almeno un importante attributo facoltativo .

Attributi del tag <a>

attributo	valore	significato
href=""	link	Specifica il percorso assoluto o relativo della pagina che si vuole collegare
title=""	descrizione	Specifica la descrizione del contenuto della pagina collegata
target=""	finestra	FACOLTATIVO: specifica in quale finestra dovrà aprirsi la pagina collegata

Di seguito è riportato un esempio di link, con il relativo codice html usato per generarla.

Collegamento <a>

vai a Repubblica

<a href="http://www.repubblica.it" title="Visualizza la home page di Repubblica on line" target="_blank">vai a Repubblica</a>

Precisato che l'ordine degli attributi è indifferente, vediamo nel dettaglio i singoli attributi del link:

• L'attributo href può contenere il collegamento assoluto o relativo alla pagina html. In questo caso il collegamento è assoluto. Per la differenza tra collegamenti assoluti e relativi si consulti questo tutorial.
• L'attributo title contiene una descrizione della pagina collegata. In base alle specifiche di (X)HTML è un attributo obbligatorio.
• L'attributo target è facoltativo: se non si usa, la pagina collegata si apre di default nella stessa finestra. Se si usa, con il valore _blank, il collegamento si apre in una nuova finestra del browser (provare per credere. Di seguito due collegamenti alla stessa pagina, il primo senza target, il secondo con target="_blank": Il sito dell'Herald Tribune (stessa finestra) - Il sito dell'Herald Tribune (nuova finestra)

Continua a leggere

Il presente tutorial seguirà passo passo la creazione di una grafica avanzata mediante l'uso di HTML e CSS.

Il layout che si sta per creare può essere visionato da questo indirizzo. Qui, invece, è possibile scaricare un'immagine, in formato jpg, del layout complessivo.

Suddivisione in aree di lavoro

Per prima cosa, occorre concentrarsi sul layout complessivo, così come fornito, individuando le aree (rettangoli, o <div>) che dovranno essere usati per la composizione visiva della pagina web. In questa immagine sono in dettaglio visualizzate le tre macro aree del layout e, tratteggiate, le aree interne, o microaree.

Solo successivamente è possibile iniziare il lavoro su Dreamweaver, a partire dalla definizione del sito Web.

Continua a leggere

Nella scorsa lezione di Dreamweaver è stata effettuata la realizzazione di un lay-out per un sito web, precedentemente disegnato grazie a Photoshop, attraverso i CSS.
Lay-out (in .psd)
Lay-out (in .jpg)
Di seguito sono scaricabili i file ritaglio delle immagini usati per gli sfondi e il logo, e i due file (.htm e .css) contenenti una possibile realizzazione del suddetto lay-out. Per vedere il codice è sufficiente aprirli con il blocco note. Da notare che il codice non è esattamente identico nè alla versione realizzata in classe nè a quella consegnata alla fine della lezione alla V web.
Ritaglio sfondo background (.gif)
Ritaglio sfondo container (.gif)
Logo (.jpg)
File .htm
File .css

CSS è la sigla per Cascading Style Sheet. Gli stili, normalmente raggrupati in un foglio di stile servono per modificare l'aspetto degli elementi HTML. In uno stesso stylesheet possono risiedere molti stili.
È possibile definire le informazioni relative agli stili in molti modi diversi: nell'elemento
<style></style>
posizionato all'interno di head, in ogni singolo tag della pagina, oppure in un file esterno con estensione css. Di seguito alcune specifiche sui fogli di stile esterni.

Continua a leggere