Dreamweaver progettazione pagine web Tutorial

October 4

Dreamweaver progettazione pagine web Tutorial


Una pagina web ben progettato attira visitatori di un sito web e li tiene a tornare. Tuttavia, codifica una disposizione efficace può essere una lunga e difficile. Fortunatamente, Dreamweaver offre modelli già pronti che visualizzano correttamente in principali browser e si adattano alle esigenze di qualsiasi pagina web. Scopri come utilizzare questi modelli per i propri progetti web.

Pagina vuota

Quando si lancia Dreamweaver, selezionare "Nuovo" dal menu "File" per aprire la finestra di dialogo "Nuovo documento", e selezionare l'opzione "Pagina vuota". Queste pagine bianche precedentemente codificate documenti che vengono in vari layout, che sono l'ideale per i documenti che non richiedono un tema.

Avviare una pagina vuota, cliccando sull'opzione "Pagina vuota" sul lato sinistro. Proseguire fino alla colonna "Tipo di pagina" per effettuare una selezione dei documenti. Per il web design, in genere di selezionare il tipo o "HTML" "modello HTML". Selezionare "HTML" per creare un file di base, o "modello HTML" per creare un master file che è possibile effettuare copie di.

Poi, vai alla colonna "Layout" e fare clic sui nomi di layout per visualizzare i layout sul lato destro. Sotto l'anteprima, Dreamweaver offre convenientemente una spiegazione di ciò che il layout fa. Ad esempio, una pagina "elastico" si estende con la dimensione del carattere, una opzione "fisso" rimane la stessa larghezza e altezza non importa quale, e una disposizione "liquido" è configurato in percentuali in modo che la pagina si restringe e si espande con il browser web . È inoltre possibile visualizzare in anteprima il numero di colonne e di posizionamento.

Continuare selezionando le opzioni dai menu "DocType" e "Layout CSS". Il "Doctype" permette di selezionare la versione che si desidera che il browser Web per verificare la sintassi contro. Opzioni di Dreamweaver vanno da "HTML 4.01 Transitional" a "XHTML Mobile 1.0", con ognuna delle quali serve uno scopo specifico, come ad esempio la codifica pagine con frame o la visualizzazione di documenti su dispositivi mobili. Il menu a discesa "Layout CSS" consente di controllare dove i Cascading Style Sheets (CSS) codice va nel file pagina web. In generale, se avete solo poche righe di regole di stile, selezionando l'opzione "Aggiungi a testa" opzione funziona bene; tuttavia, se si dispone di un foglio di stile lungo, scegliere l'opzione "Crea nuovo file" o "link a file esistente" per garantire che non si incorrere in tempi di caricamento delle pagine più lunghi.

Infine, dopo aver effettuato le selezioni, fare clic sul pulsante "Crea" per lanciare il modello di layout. È ora possibile modificare la pagina per aggiungere il contenuto e salvare il file per visualizzarne l'anteprima.

Pagina da Campione

Selezionare la "pagina di esempio da" nella finestra di dialogo "Nuovo documento" per scegliere un documento dal design professionale. Questi modelli contengono sguardi specifiche per una varietà di industrie e lavorare bene per quei progetti che richiedono lo stile già in atto.

Inizia selezionando la "Starter pagina (Theme)" nella colonna "Cartella di esempio". Si può scegliere tra "intrattenimento", "Health & Nutrition", "alloggi", "Personal Training", "ristorante", "spa" e "Travel". Inoltre, ogni categoria contiene una pagina specifica, come ad esempio "catalogo" o "Calendario". Evidenziare la selezione nella colonna "Pagina di esempio" e visualizzare in anteprima il layout e la pagina di descrizione fornita sul lato destro.

Ora, selezionare l'opzione "DocType" dal menu a discesa. Anche in questo caso, le scelte variano in HTML a XHTML versioni e devono essere scelti in base a ciò che la pagina web contiene e dove si è visto. Fare clic sul pulsante "Crea" dopo aver effettuato una selezione.

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

Per modificare il layout, come ad esempio l'aggiunta di proprie immagini o testo, è sufficiente fare doppio clic su un'area nella finestra di progettazione e seguire le istruzioni. Si può collegare barre dei menu facendo clic sui link e usando la barra degli strumenti "Proprietà" per selezionare il file appropriato.

Infine, è possibile personalizzare qualsiasi parte del file CSS fornito con il modello. Per fare questo, andare alla finestra CSS e selezionare la scheda "Current" per modificare una funzione specifica, oppure selezionare la scheda "Tutte" per visualizzare un elenco completo delle regole di stile.

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