Una pagina web ben progettata attira i visitatori di un sito Web e li tiene a tornare. Tuttavia, la codifica di un layout efficace può essere un compito che richiede tempo e difficile. Fortunatamente, Dreamweaver fornisce modelli già pronti che visualizzano correttamente nei principali browser e soddisfare le esigenze di qualsiasi pagina Web. Imparare a utilizzare questi modelli per i vostri progetti web.

Pagina vuota

All'avvio di Dreamweaver, selezionare "Nuovo" dal menu "File" per visualizzare la finestra di dialogo "Nuovo documento" e selezionare l'opzione "Pagina vuota". Queste pagine vuote sono documenti precedentemente codificati che sono disponibili in varie configurazioni, che sono l'ideale per i documenti che non richiedono un tema.

Lanciare una pagina vuota facendo clic sull'opzione "Pagina vuota" sul lato sinistro. Continuare a colonna "tipo Page" per effettuare una selezione del documento. Per il web design è in genere selezionare "HTML" o tipo "Modello HTML". Selezionare "HTML" per creare un file di base, o "Modello HTML" per creare un master file che è possibile effettuare copie.

Successivamente, vai alla colonna di "Layout" e clicca sui nomi di layout per visualizzare il layout sul lato destro. Sotto l'anteprima, Dreamweaver fornisce comodamente una spiegazione di ciò che fa il layout. Ad esempio, una pagina "elastica" si estende con la dimensione del carattere, un'opzione "fissa" rimane la stessa larghezza e altezza non importa cosa e un layout "liquido" è configurato in percentuali, in modo che la pagina si contrae e si espande con il browser web. Anche visualizzare in anteprima il numero di colonne e di posizionamento.

Continuare selezionando le opzioni dai menu "DocType" e "Layout CSS". "Doctype" consente di selezionare la versione che si desidera che il browser web per controllare la sintassi contro. Dreamweaver opzioni variano da "HTML 4.01 Transitional" a "Mobile XHTML 1.0", con ogni che serve uno scopo specifico, ad esempio codifica pagine con frame o visualizzazione di documenti su dispositivi mobili. Il menu a discesa "Layout CSS" ti permette di controllare dove il codice di Cascading Style Sheets (CSS) viene inserito nel file di pagina Web. Generalmente, se avete solo poche righe di regole di stile, selezionando l'opzione "Aggiungi a testa" funziona bene; Tuttavia, se si dispone di un foglio di stile lunga, scegliere il "Crea nuovo File" o "Collegamento a File esistente" per garantire che non comportano un più lunghi tempi di caricamento della pagina.

Infine, dopo aver effettuato le selezioni, fare clic sul pulsante "Crea" per lanciare il modello di layout. Adesso puoi editare la pagina per aggiungere contenuti e salvare il file per visualizzarne l'anteprima.

Pagina di esempio

Selezionare l'opzione "Pagina da esempio" nella finestra di dialogo "Nuovo documento" per scegliere un documento progettato professionalmente. Questi modelli contengono sguardi specifici per una varietà di industrie e funzionano bene per quei progetti che richiedono lo stile già in atto.

Inizia selezionando l'opzione "Starter Page (Theme)" nella colonna "Cartella di esempio". Si può scegliere tra "Intrattenimento", "Health & Nutrition", "Alloggio", "Personal Training", "Ristorante", "Spa" e "Viaggio." Ogni categoria contiene inoltre una pagina specifica, ad esempio "Catalogo" o "Calendario". Evidenziare la selezione nella colonna "Pagina di esempio" e visualizzare in anteprima il layout di pagina e descrizione fornita sul lato destro.

Ora, selezionare un'opzione di "DocType" dal menu a discesa. Ancora una volta, scelte vanno in HTML a versioni XHTML e devono essere scelti secondo ciò che la pagina Web contiene e dove si è visto. Dopo aver effettuato una selezione, fare clic sul pulsante "Crea".

Successivamente, il nome e salvare il modello nella finestra di dialogo e quindi seguire la richiesta di selezionare la posizione che si desidera che i file di modello copiati. Dopo aver salvato il documento, tutte le immagini CSS e segnaposto visualizzati.

Per modificare il layout, ad esempio aggiungendo il proprio immagini o testo, è sufficiente fare doppio clic su un'area della finestra di progettazione e seguire le istruzioni. Si possono collegare barre dei menu facendo clic sul link e utilizzando la barra degli strumenti di "Proprietà" per selezionare il file appropriato.

Infine, è possibile personalizzare qualsiasi porzione del file CSS forniti con il modello. Per effettuare questa operazione, passare alla finestra CSS e selezionare la scheda "Corrente" per modificare una caratteristica specifica o selezionare la scheda "Tutto" per visualizzare un elenco completo delle regole di stile.

Salvare il file e utilizzare la funzione "Anteprima" del tuo browser per visualizzare il vostro lavoro.