Dreamweaver CS6 For Dummies Cheat Sheet - dummies

Di Janine Warner

Se sei nuovo sul web design o stai creando pagine HTML da anni, Adobe Dreamweaver CS6 è lo strumento ideale per costruire il tuo sito web. Nella versione CS6, trovi una nuova schermata di benvenuto e supporto per le ultime novità in Cascading Style Sheets (CSS3) e HTML5. Dreamweaver è un programma popolare tra i web designer professionisti e le persone che desiderano creare siti per i loro hobby, club, famiglie e piccole imprese.

Schermata di benvenuto di Adobe Dreamweaver CS6

L'intuitiva interfaccia grafica di Dreamweaver e un potente elenco di funzionalità lo rendono una scelta popolare tra i web designer professionisti e gli appassionati. Con ogni nuova versione, Dreamweaver CS6 offre nuove funzionalità, ma troverai comunque la schermata di benvenuto familiare per aiutarti a iniziare.

Dreamweaver CS6: aggiunta di ombre di testo con CSS3

In Dreamweaver CS6, è possibile migliorare i progetti e aumentare la profondità delle pagine aggiungendo ombre di testo con le regole CSS3, la più recente tecnologia web. L'aggiunta di ombre di testo rende le tue parole più facili da leggere, specialmente se il tuo disegno ha uno sfondo complesso o se i colori dello sfondo e del testo non hanno contrasto.

credito: Paul Gual, istockphoto. com

Dreamweaver CS6 include il supporto per le ombre di testo CSS3 quando si utilizza il pannello Proprietà nel pannello Stili CSS. È possibile creare stili di classe o ID con ombre di testo ed è possibile aggiungere ombre di testo a elementi HTML esistenti definendo uno stile di tag, come lo stile di titolo 1 utilizzato nell'immagine.

Il codice CSS3 che crea quell'ombra di testo è

h1 {text-shadow: 2px 2px 3px # 000;}

I numeri nel codice specificano che l'ombra del testo deve estendersi di 2 pixel a destra e 2 pixel sotto il testo con una sfocatura di 3 pixel. Inoltre, l'ombra viene creata con il colore nero, specificato dal codice colore esadecimale # 000 abbreviato.

Quando si creano regole per le ombre del testo, è possibile specificare fino a quattro valori:

• Orizzontale e verticale: I primi due valori numerici sono obbligatori e specificano gli offset orizzontali e verticali: la distanza che l'ombreggiatura si estende al di sotto del testo (orizzontale) e alla destra del testo (verticale).

• Raggio di sfocatura: Il terzo valore indica la quantità di sfocatura nell'ombra. Se non includi il raggio di sfocatura, il valore predefinito è 0, che fa apparire l'ombra come un colore solido.

• Colore: Il quarto valore specifica il colore dell'ombra e può essere definito utilizzando un codice colore esadecimale o un codice colore RGBa.

È possibile aggiungere un'ombra di testo utilizzando il riquadro Proprietà nella parte inferiore del pannello Stili CSS, come mostrato nell'immagine.Per eseguire questa operazione, attenersi alla seguente procedura:

1. Fare clic sul collegamento Aggiungi proprietà nella parte sinistra del riquadro Proprietà stili CSS.

2. Immettere il nome della regola di stile CSS3, text-shadow o selezionare la regola di stile dall'elenco a discesa.

   Dopo che il nome appare sul lato sinistro, appare una piccola freccia sulla destra.

3. Fare clic per selezionare la freccia a destra dell'intestazione del testo.

   Viene visualizzata una finestra.

4. Immettere gli offset X e Y, il raggio di sfocatura e il colore.

Siti Web e risorse per Web designer

I web designer esperti, che utilizzino Adobe Dreamweaver o altri software di progettazione Web, fanno spesso riferimento alle risorse online per tenere il passo con le loro competenze e aggiungere funzionalità speciali ai loro siti web. Questo elenco ti consente di trovare facilmente alcuni siti Web e risorse online che possono aiutarti con i tuoi progetti di web design.

• Servizi di hosting audio e video:

  • YouTube

  • Vimeo

  • SoundCloud

• Blogging e programmi CMS

  • Blogger

  • Joomla

  • MovableType

  • TypePad

  • Tumblr > WordPress

  • Servizi di condivisione di social media

• Aggiungi questo

  • Condividi Lockerz

  • Servizi di segnalazione del traffico:

• Google Analytics

  • Yahoo! Web Analytics

  • HubSpot

  • Browser Web popolari:

• Apple Safari

  • Google Chrome

  • Microsoft Internet Explorer

  • Mozilla Firefox

  • Opera

  • Servizi di verifica browser Web:

• Adobe Browser Lab

  • BrowserShots

  • Test del browser incrociato

  • Browser Sandbox da Spoon (ex Xenocode)

  • Dreamweaver, CSS e risorse di progettazione Web:

• Centro sviluppatori Dreamweaver

  • Web Design Training presso DigitalFamily. com

  • W3 Conversions HTML5 e CSS3 Resources

  • A List Apart