All Articles Dreamweaver
Imparare i CSS nella parte Dreamweaver Tutorial 1: Redefined elementi HTML
Geoff Blake on Tue, February 8th | 0 comments
Learning how to work with CSS is absolutely critical to building contemporary websites. It's one of those things that we, as designers, have to hunker down and learn at some point. And even after you

Imparare a lavorare con i CSS è assolutamente essenziale per costruire siti web contemporaneo. E 'una di quelle cose che noi, come progettisti, devono accovacciarsi e imparare ad un certo punto. E anche dopo aver padroneggiare i fondamenti, c'è ancora spazio per crescere ed espandersi. È possibile conoscere nuove proprietà o il modo per ottenere risultati specifici e si possono scoprire le tecniche per mantenere il CSS come 'n magra significa il più possibile.

In this tutorial post, we'll be taking a look at the fundamentals of working with CSS in Dreamweaver. You'll learn about two primary rule types, how to create them, and how to begin applying them throughout your site.

Capire come stili di lavoro

Prima di tutto, devo chiederti, sai di stili in alcune delle altre applicazioni? InDesign ha stili, Illustrator ha stili ... diamine, anche Microsoft Word ha stili. Uno stile è semplicemente un insieme di opzioni di formattazione. Per esempio, potremmo avere uno stile chiamato "Enfasi", e all'interno di enfasi che abbiamo impostato un tipo di carattere, una dimensione e un colore. A questo punto, possiamo cominciare ad applicare enfasi in tutto il nostro documento, e, naturalmente, dove mai lo usiamo, otterremo lo stesso font, dimensione e colore utilizzato. Se torniamo indietro e apportare una modifica allo stile Enfasi originale, quindi la formattazione viene aggiornato istantaneamente dove mai è stata utilizzata nel nostro documento.

Questo è il modo tradizionale stili di lavoro. Tuttavia, CSS prende questa idea ancora di più. Invece di lavorare con stili all'interno di una sola pagina, con i CSS è possibile applicare il set di regole ad un gruppo di pagine - o per tutte le pagine in tutto il sito. Modificare una delle tue regole, e che il cambiamento ondulazione in tutto il sito il più velocemente possibile scegliere "File

Ora che è Potere!

Un paio di altri punti rapidi prima di andare avanti. In primo luogo, il termine "stile" e il termine "regola" sono usati in modo intercambiabile in Dreamweaver e CSS. A volte Dreamweaver utilizzerà lo "stile", termine e altre volte userà "regola". Molti nuovi utenti si confondono da questo e assumere Dreamweaver parlando di due cose diverse. Non si tratta! Gli stili e le regole sono la stessa cosa.

In secondo luogo, un elenco di regole è indicato come un foglio di stile. I fogli di stile possono essere situati all'interno di una pagina specifica HTML (questo è chiamato un foglio di stile interno) o salvati come file separato al di fuori delle pagine (chiamata un foglio di stile esterno). Ci sono molte cose interessanti si possono fare con i fogli di stile, e si parla di loro in modo molto più dettagliato in Dreamweaver CS5 101: Core Dreamweaver CS5 .

Ora che abbiamo capito come stili di lavoro e hanno un senso di ciò che i fogli di stile sono tutti circa, dovremmo discutere i due principali tipi di stili CSS possiamo lavorare con: ridefinito elementi HTML, e le regole della classe. Ogni è molto potente, ed ha usi specifici. Diamo uno sguardo.

Uno sguardo alle Redefined elementi HTML

Indirizzo Facciamo ridefinito gli elementi HTML per primo. Questo è il mio tipo preferito di stile perché quello che fanno è prendere, HTML noioso e trascinarlo dall'età della pietra nel 21 ° secolo, con poche righe di codice. E fortunatamente per noi, Dreamweaver intenzione di fare tutto il lavoro pesante, quindi se noi non vogliamo, non dobbiamo vedere tutto il codice.

Con ridefinito gli elementi HTML, saremo prendere pianura, gli elementi HTML e noioso ponendole sotto il controllo dei CSS. Per esempio, abbiamo potuto controllare tabelle, immagini, intestazioni, paragrafi, e qualsiasi altra cosa che potrebbe apparire nella pagina. Quello che è importante da ricordare è che quando si ridefinire un elemento HTML, stiamo controllando tutte le occorrenze di tale elemento. Per esempio, se si crea una regola CSS che ridefinisce

, then all
elements on your page are now under the control of your CSS rule. If your redefined
rule resides in an external style sheet, then all tables across your entire site are now all controlled by a single CSS rule.

Come impressionante che sia, potrebbe non essere quello che vuoi. Cosa succede se si voleva solo per controllare una tabella e lasciare gli altri come sono stati? Ed è qui che le regole di classe entrano in gioco. Arriveremo in quelli in appena un po '. Per ora, proviamo a creare un rapido ridefinito tag HTML.

Ecco Come creare una ridefinizione del tag HTML:

Fase 1

Nella parte inferiore del pannello Stili CSS, fare clic sull'icona Nuovo regola CSS.

Fase 2

Nella finestra di dialogo Nuova regola CSS che appare, scegliere Tag (ridefinisce Un elemento HTML) dal menu a tendina Tipo di selettore.

Fase 3

Nel campo Nome Selector, digitare il nome dell'elemento HTML che si desidera controllare.

Quando si digita il nome dell'elemento, assicurarsi di lasciare le parentesi angolari. In altre parole, se si voleva controllare "

," you'd simply type in "table."

Piuttosto che digitare il nome dell'elemento, è possibile scegliere tra i menu a comparsa sulla destra del campo Nome Selector.

Fase 4

Dal menu a tendina Definizione regola nella parte inferiore della finestra di dialogo, scegliere se si desidera salvare la nuova regola in un foglio di stile interno (Solo questo documento) o un foglio di stile esterno (Nuovo file foglio di stile). Oppure, se hai già un foglio di stile esterno collegato alla pagina, è possibile scegliere di salvare lì, selezionando il suo nome.

Fare clic su OK.

Fase 5

In the CSS Rule Definition dialog box that appears, begin applying the CSS formatting that you'd like to use for your new rule.


For example, if you're redefining a table, you may want to apply a background color, a font, margin settings, and so on. As you're working, click Apply in the CSS Rule Definition dialog box to preview your page. Any elements on your page that you've redefined using CSS will update.

Fase 6

Quando avete finito, fate clic su OK.

Quando hai finito di creare il tuo ridefinito elemento HTML, tutte le occorrenze dell'elemento HTML della pagina ora portare la formattazione impostate nella finestra di dialogo Definizione regola CSS. Non c'è bisogno di applicare la formattazione a nulla, perché sei ridefinire qualcosa che è già in uso. Non solo, ma si dovrebbe tornare indietro e inserire questo elemento HTML nella pagina in qualche punto lungo la strada, sarà anche sotto il controllo del vostro CSS. E 'un modo molto potente e molto efficiente di lavorare.

Anche se questa è solo una breve introduzione al lavoro con ridefinito elementi HTML, si spera si può capire perché sono una parte così importante della cassetta degli attrezzi di un web designer. Sono abbastanza facile da lavorare, anche. Basta smanettare un po 'con loro in Dreamweaver per 10-20 minuti e sono sicuro che sarete al passo con loro.

Ora, io sono ansioso di continuare il nostro sguardo CSS in Dreamweaver e questa discussione sui due tipi di regole primarie, in modo da unirsi a me nella parte 2, dove daremo uno sguardo a lavorare con regole di classe. Ci vediamo lì!

Non vedo l'ora per la parte 2? Non è necessario! Check out questo tutorial Dreamweaver, nel frattempo, con tutorial più avanzati in arrivo!

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: