Nwlapcug.com


Come utilizzare e modificare layout CSS e pagine di esempio di Dreamweaver

Come utilizzare e modificare layout CSS e pagine di esempio di Dreamweaver


Conoscere un po' di Dreamweaver e fare siti web? Non devi essere un professionista per utilizzare Dreamweaver per rendere un sito dall'aspetto semplice e bello quando si utilizza una pagina incorporata o layout.

Istruzioni

Selezionare un esempio CSS o Layout CSS

1

Preparare un nuovo sito e designare una cartella principale del sito. Quando si è pronti per iniziare la prima pagina, ci sono diverse opzioni nel File > nuovo menu. I prossimi passaggi verranno spiegherà le varie scelte. Nella sezione 2, imparerete a modificare il CSS per la pagina di esempio o il layout CSS che si seleziona.

2Come utilizzare e modificare layout CSS e pagine di esempio di Dreamweaver


Selezionare File > nuovo. Nell'immagine, si vede che pagina da esempio - pagina Starter (tema) - salute e nutrizione (Home Page) è selezionata, con la scelta del Doctype. Colonna di destra vi dà un'anteprima dell'aspetto della pagina iniziale. È un layout a due colonne con una combinazione di colori verde-basato.

Ogni tema di pagina di esempio viene fornito con un layout della home page e quattro altre pagine in un disegno corrispondente. È possibile utilizzare e modificare uno qualsiasi di questi per creare il tuo sito.

3

Fare clic su Crea. Dreamweaver chiederà dove salvare i file HTML (cartella principale sito) e che cosa il nome del file. Poiché questo una home page di esempio, il nome index. html.

4Come utilizzare e modificare layout CSS e pagine di esempio di Dreamweaver


Dreamweaver vi propone un altro nella finestra di dialogo che ti chiede di copiare gli altri file necessari per la pagina di esempio è selezionato. Fare clic su copia.

5Come utilizzare e modificare layout CSS e pagine di esempio di Dreamweaver


È inoltre possibile avviare il tuo sito da una pagina vuota con un Layout CSS. Scegliete File > nuovo. Quindi selezionare pagina vuota > HTML > e uno dei layout. Nell'immagine, vedete 3 colonna liquido, intestazione e piè di pagina selezionato.

Sulla destra, si vede una miniatura del layout con simboli indicata se il layout è bloccato (larghezza fissa) o elastico. Si noti che i layout sono grigio, bianco e nero solo di base. Sono scelte di colore sono tutti fino in palio.

Prima si sceglie di creare, ci sono parecchie decisioni importanti. Scegliere un Doctype. Scegliere se mettere il CSS nella testa del documento o in un nuovo file CSS e scegliere o meno di allegare un altro file CSS oltre al layout CSS. Dreamweaver ha fogli di stile solo per il colore del testo nel File > nuovo menu sotto la pagina da esempio - categoria di foglio di stile CSS che poteva essere collegata, troppo. O è possibile allegare qualsiasi altro foglio di stile che avete in questo momento.

Per trovare uno dei fogli di stile incorporati per collegare insieme le regole di layout CSS, passare alla cartella di Dreamweaver nel vostro file di programma (applicazioni) e trovare la configurazione > BuiltIn > css per selezionare una delle combinazioni di colori incorporato.

6Come utilizzare e modificare layout CSS e pagine di esempio di Dreamweaver


Fare clic su Crea. Dreamweaver chiede dove salvare il layout CSS. Non modificare il nome di che Dreamweaver ha dato il file CSS, a meno che non si desidera modificare ogni istanza di esso in HTML e CSS che verrà creato.

Il thrColLiqHdr.css nome indicato il layout di esempio che sto usando: 3 colonna liquido, intestazione e piè di pagina

7Come utilizzare e modificare layout CSS e pagine di esempio di Dreamweaver


Dreamweaver si aprirà la pagina HTML nella visualizzazione progettazione, con il Layout CSS, si è scelto. Salvarlo in una cartella radice del sito con un nome che si seleziona. È quindi possibile iniziare le modifiche.

Gli esempi sono tutti pieni di testo fittizio, che è semplice selezionare per modificare i tuoi contenuti.

Modificare o aggiungere al CSS

8Come utilizzare e modificare layout CSS e pagine di esempio di Dreamweaver


Si ottiene un sacco di aiuto da Dreamweaver quando si è pronti per modificare la nuova pagina per uso personale. Il CSS è riccamente commentato per spiegare che cosa significa ogni regola alla tua pagina.

9Come utilizzare e modificare layout CSS e pagine di esempio di Dreamweaver


Quando si seleziona una parte del documento che si desidera modificare, è facile vedere quali regole si applicano ad esso utilizzando il pannello Stili CSS e i suggerimenti nella visualizzazione progettazione. Vedere gli ovali rossi nell'immagine evidenziando il h1 nell'intestazione, la struttura della pagina nel selettore di Tag che conduce fino alla h1 e la regola CSS selezionato nel pannello stili che corrisponde a tale elemento di pagina. Vedere viste ravvicinate nel passaggio 3.

10Come utilizzare e modificare layout CSS e pagine di esempio di Dreamweaver


Una vista ingrandita del selettore di Tag e la regola CSS corrispondente mostrarvi come trovare la regola che si desidera modificare per rendere il vostro proprio una struttura di pagina.

11Come utilizzare e modificare layout CSS e pagine di esempio di Dreamweaver


Quando hai la giusta regola evidenziata, fare clic sull'icona della matita nel pannello Stili CSS per modificare la regola per apportare eventuali modifiche, ad esempio modificando il colore del carattere, come nell'immagine.

12

Aggiungere nuove regole utilizzando un processo simile di capire un nuovo selettore. Per esempio, per aggiungere una regola per le immagini nell'area #mainContent, guardate la specificità di
.thrColLiqHdr #mainContent
Il nuovo selettore deve essere almeno quanto più specifiche che, ma dovrebbe aggiungere il selettore img al mix.

Fare clic sull'icona più per aggiungere una nuova regola e utilizzare un selettore come
img .thrColLiqHdr #mainContent
per creare la nuova regola.

Consigli & Avvertenze

  • Le opzioni nel File > nuovo menu possa essere combinato, più di un foglio di stile può essere associata a una nuova pagina. Esplorate tutte le possibilità.
  • Una volta che hai finito di modificare i file CSS, è possibile rimuovere i commenti per risparmiare sulle dimensioni del file.
  • Se sei un utente di Windows, si noterà una leggera differenza nell'aspetto tra la versione di Dreamweaver e quello che vedete in queste schermate fatta su un Mac. Non preoccupatevi, la versione di Windows sarà funzionano allo stesso modo ma con un Windows look.
  • State attenti che alcuni dei disegni pagina di esempio (tema) utilizzare layout basati su tabelle. Questa non è la scelta accessibile. Utilizzando uno dei layout CSS è più accessibile.