Nozioni Di Base In Css Adobe Dreamweaver

html e css basi tutorial Adobe Dreamweaver

Questo tutorial è stato progettato per introdurre i concetti di utiLizzare in css Adobe Dreamweaver e html per i web designer che non hanno famiLiarità con i CSS in web design. CSS sta per Cascading Style Sheet ed è un sistema per l'aggiunta di stile per le tue pagine web e il contenuto delle pagine web.

Dopo la lettura di questo tutorial css si dovrebbe avere una sensazione di come utiLizzare in css Dreamweaver. In questo tutorial creeremo un documento vuoto, Creare stile css, Inserire aa div alla pagina, Inserire un immagine, E poi creare un menu di navigazione rapida e assegnare css proprietà per gLi elementi nella pagina. Il programma utiLizzato in questo tutorial e screenshot è Adobe Dreamweaver CS3.

Abramo chaffin CreativeCow.net, Cambria, CaLifornia USA © 2007 CreativeCow.net. Tutti i diritti riservati.

html documenti:
Creare un nuovo documento vuoto e salvarlo per iniziare il tuo lavoro. Io tendo sempre a salvare i documenti prima di fare qualcosa in modo che io possa salvare rapidamente di volta in volta utiLizzando i tasti di scelta rapida (cntrl + s). Quando si crea un documento in bianco Dreamweaver la tua pagina web è già contenuto in esso, Si può non vedere in modaLità progettazione. Per visuaLizzare il contenuto che si può usare la scorciatoia (cntrl + ~) per passare tra le modaLità di progettazione e di codice o andare al menu VisuaLizza codice o dal menu VisuaLizza progettazione.

Ciò che si dovrebbe vedere dovrebbe apparire qualcosa di simile:

Questo è l'inizio del suo quadro html documento, è costituito da molti tag. L'inizio di ogni tag appare come Questo e la fine di ogni tag somigLia / questo. L'intero documento è costituito dai html Tag di cui sopra sembra html xmlns = " http://www.W3.org / 1999/xhtml " perché ha un modificatore xmlns in esso. Il tag di chiusura è in basso del documento / html. Tra l'inizio e la fine html Tag primaria ci sono due tag head e Corpo tag. head tag non è visto, ma fornisce molte parti essenziaLi e modificatori per ciò che il Corpo tag elementi avrà un aspetto simile. Il contenuto nel tag Corpo è il contenuto che è in realtà visibile attraverso il browser.

Css elementi:
Prima di inserire tutti gLi elementi creiamo uno stile css. Premendo (SHIFT + F11) commuta la cornice stiLi CSS o andare a modificare il menu stiLi CSS. In basso a destra c'è una piccola icona che appare come . Questo porta il â € œnew css ruleâ € dialogo. Per iniziare diamo assegnare una regola CSS per il tag Corpo e il Coloree di sfondo bianco fuori uno invece di un netto bianco. Selezionare "tag" per la "selettore di tipo" radio. Da "tag" menu a discesa selezionare il "corpo" selettore. Selezionare "il presente documento unico" per la "definizione di" radio e fare cLic su "ok".

Una volta che avete cLiccato su "ok" Dreamweaver aggiunge il codice nel tuo html preparazione di file di modificare il tag Corpo utiLizzando css.

Questo porterà anche la "regola CSS per la definizione del corpo" finestra di dialogo che vi permette di definire il proprio scegLiere tra il "background" dalla categoria colonna e scegLiere un Coloree giallo molto leggero con la raccogLitrice di Coloree di sfondo o Tipo in ffffcc # e premere "ok".

Premendo "ok" eseguito Dreamweaver di modificare il corpo css Selettore Con l'inserimento di uno sfondo a Colorei Proprietà E un Valore # di ffffcc.

Ci sono molte altre proprietà che si possono assegnare al corpo selettore o è possibile modificare utiLizzando il codice CSS stiLi di cornice:

Tag div:
Tornare alla visuaLizzazione Progettazione (cntrl + ~) e sia di inserire un tag div andando al menu Inserisci layout oggetti tag div, Questo porterà il â € œinsert div Taga € dialogo. (tag div sono i più comunemente usati tag di tenere diversi elementi in una pagina web progettata con i CSS, come ad esempio le immagini, Testo, O video.)

Il primo campo nel "inserire tag div" finestra di dialogo è l'inserto: Campo. Questo è il campo che indica se il tag div sarà inserito nella html pagina. Per impostazione predefinita, si stabiLisce che "al punto di inserimento", che significa il tag div dove verrà inserito il cursore è stato messo in ultima pagina web. Potete anche scegLiere "dopo inizio del tag" o "prima della fine del tag" per posizionare il tag div in una posizione diversa.

Accanto si trova la "Classee:"Campo che è un campo che si riferisce direttamente al tuo css regole. Uno css Classee ha un selettore con un periodo di fronte ad esso come ad esempio ".Classe". Le Classei sono usate per assegnare una proprietà o di proprietà per molti oggetti in una pagina web. Non abbiamo ancora definito le Classei in questo documento in modo non c'è nulla che possiamo assegnare ancora. Il "id:"Campo è vuoto anche perché non ci sono ids definita nel nostro css. ID vengono utiLizzati per assegnare una proprietà o di proprietà di un unico elemento in una pagina web e nel codice css è un cancelletto prima che come "# id". Dal momento che non abbiamo né di questi fai cLic su "nuovo stile css" e si definirà una nuova regola.

Questa volta selezionare "Classee", come il selettore tipo, Digita "CoolClasse" come, Selezionare "il presente documento unico" e premere "ok". Let's impostare il Coloree di sfondo di questa Classee con un fresco blu selezionando "sfondo" sotto le categorie e l'impostazione del "Coloree di sfondo" a qualcosa di simile # 00ccff. Ora impostare il Coloree di confine ad una sottile Linea nera, facendo cLic su "frontiera", come la categoria e quindi scegLiere lo stile soLido come dal menu a tendina e 1 pixel di larghezza e nero (# 000000) come il Coloree. Oppure si può essere più creativo, se si scegLie. Adesso un po 'di impostare il nostro imbottitura in regola, facendo cLic su "scatola" nella colonna di categoria e del tipo "5" per il "top: Padding "ciò assegnare il Imbottitura non solo per la parte superiore, ma per tutti i lati, se si lascia il" uguale per tutti "casella selezionata. Premere "ok" e Dreamweaver creerà una nuova regola di Classee nel vostro stile css tag con tre proprietà.

Il tuo "inserire tag div" dialogo ora ha anche la sua Classee campo popolate con "cooltag" - premere "ok" e Dreamweaver si scrive codice nella tua pagina web con sede titolare di testo all'interno della nuova div tag.

Questo div avrà la nostra Classee che abbiamo creato assegnato al tag div e tutti gLi elementi all'interno del tag.

Immagini:
Ora inserire un'immagine e assegnare ad esso la nostra Classee.
Mettere il cursore al di fuori della div facendo cLic in qualsiasi punto al di fuori di essa all'interno della pagina web. Dal menu Inserisci vai a immagine (cntrl + ALT + I). ScegLiere qualsiasi immagine che si può avere a disposizione il computer e premere "ok". Si può bypassare la prossima finestra di dialogo premendo "ok"; Dreamweaver sarà posto l'immagine nella tua pagina web. Fate cLic destro sull'immagine e selezionare dal menu css stiLi CoolClasse. Questo si attribuisce la Classee di pre definita l'immagine, che è il Coloree di sfondo, Imbottitura, E di frontiera che abbiamo assegnato a ".CoolClasse". Adobe Dreamweaver inserire il codice dovrebbe essere simile a questo:

Potere di css:
Ciò che rende css potente è la possibiLità di tornare indietro e apportare modifiche al vostro stile di una volta e l'abbiano in vigore tutti gLi elementi assegnato lo stile di. Nel css stiLi cornice si dovrebbe vedere "tutte le regole" e il tuo stile ".CoolClasse". Fare cLic sul .CoolClasse selettore e poi il valore di Background-Colore (# 00ccff). UtiLizzando la raccogLitrice di Coloree scegLiere un Coloree diverso, Come ad esempio (# 66ffff). Ora si sta utiLizzando con successo nel css Dreamweaver. L'unico codice che è stato è stato modificato nel css e che è stato appLicato ad entrambe le div e il img.

La creazione di un menu di navigazione veloce
Ora con il contenuto nel tag div si romperà lo distingue e lo rende in un elenco di navigazione.

Mettere ogni parola sulla propria Linea di entrare premendo il cursore ideale con ogni parola. Evidenziare tutte le parole e fare cLic destro, quindi selezionare Elenco Lista non ordinata. Ora avete un elenco puntato, ma abbiamo bisogno di appLicare alcuni lo stile di cui abbiamo bisogno per creare una regola.

Fare cLic sul pulsante Aggiungi css Dal telaio stiLi CSS. Ci sono molti modi per assegnare lo stile per l'elenco, Si potrebbe creare una nuova Classee si chiama qualcosa come ".ListClasse "e si appLica a ciascun tag Li che Li Classe="ListClasse" , ma per questo esempio si crea una regola per tutti i tag Li. Selezionare "Avanzate" e la radio di tipo "Li" nel selettore di campo. "che" sta per Lista. Selezionare "il presente documento unico" e premere "ok".

Let's rimuovere il proiettile, Rendere il Coloree bianco e il tipo di carattere grassetto peso. Con il tipo di categoria selezionata scelta coraggiosa dal "peso" menu a tendina e scegLiere bianco (# ffffff) per il Coloree. Dalla Lista di categoria scegLiere nessuno dal "tipo" menu a tendina e premere "ok". Adobe Dreamweaver creato nel codice css che colpisce ilLiTag.

Ad avere un buon nav le voci di menu, come si dovrebbe cambiare il mouse su di loro. Per fare questo abbiamo bisogno di aggiungere un comportamento. Vai al menu della finestra comportamenti (SHIFT + F4). Guarda tutti gLi eventi cLiccando su "visuaLizza tutti gLi eventi" pulsante . Assicurarsi che il cursore si trova in uno dei punti elenco in modo che il comportamento è appLicata alla voce, e non qualcosa di diverso. Onmouseover nel tipo di campo Questo.Classname = 'CoolClasse'. "questo" si riferisce al tag "Li" Classename dice il browser che si desidera cambiare la Classee di CoolClasse. Onmouseout nel tipo di campo Questo.Classname ='' (che i due 'marchi non una citazione). Questo rende il ritorno del browser il nome della Classee del tag Li torna a nulla quando il mouse si sposta l'elemento di. Adesso avete appLicato un comportamento di un elemento nella Lista.

Per ottenere il comportamento che devono essere appLicati a tutti gLi elementi è necessario ripetere i passaggi precedenti con il cursore in ogni elemento di Lista o di copiare e incollare il codice nel codice di vista. Il risultato finale in vista codice dovrebbe essere simile al seguente:

Prima di concludere questo tutorial si dovrebbe impostare il cursore su un lato in quanto va oltre la Lista come sarebbe normale navigazione.
Nella cornice selezionare stiLi css Li. Nella parte inferiore della "proprietà" che "vi è una" proprietà aggiungere Link fai cLic su di esso e scegLiere "cursore" dal menu a tendina. Digita "puntatore", come se il valore non è nel preset.

Conclusione
Premere F12 e controllare ciò che hai fatto. Probabilmente non guardare troppo bella, ma dovrebbe darvi un assaggio su come in css Dreamweaver funziona con html e che cosa nel tuo browser.

Giocare e ricordare per divertirsi!