In un mondo di costruttori di siti Web drag-and-drop, Adobe Dreamweaver ha fatto bene a rimanere rilevante in mezzo alla concorrenza. Ricco di fantastiche funzionalità e un sacco di strumenti per semplificarti la vita, questo software è un'ottima scelta per web designer e sviluppatori.
Ma come si crea il primo sito Web utilizzando Dreamweaver?
Guida introduttiva a Dreamweaver
È necessario ottenere una copia di Adobe Dreamweaver prima di poter iniziare a lavorarci, ma è disponibile una versione di prova gratuita.
Dirigetevi verso il Adobe sito Web, accedi o registra un account e scarica lo strumento Adobe Creative Cloud per iniziare. Da qui puoi scaricare Adobe Dreamweaver e iniziare con la guida completa.
Questa guida ti mostrerà come creare un sito Web di base utilizzando i file modello di Dreamweaver come base. Puoi trovare i file di progetto completi su questo repository GitHub.
Passaggio 1: crea un sito Dreamweaver
Apri Adobe Dreamweaver e vai su Luogo menu nella parte superiore della pagina. Selezionare
Nuovo sito, quindi scegli un nome per il tuo sito web e scegli un percorso per il file.Passaggio 2: crea un file modello
Successivamente, è il momento di creare un file modello per il tuo nuovo sito web. I file modello funzionano in modo simile ai temi utilizzati dai sistemi CMS come WordPress e Shopify, solo tu li crei tu stesso.
Clicca su Creare nuovo o vai a File > Nuovo e scegli Modello HTML dal tipo di documento elenco.
Questo creerà un modello di base con del codice HTML già in atto. Utilizzerai questo codice HTML per il tuo progetto, quindi vale la pena tenerlo in posizione per i passaggi successivi.
Passaggio 3: crea un'intestazione nel modello
Ora è il momento di creare la sezione menu/intestazione sul sito Web nel modello appena creato. Vai a Inserire nella parte superiore dello schermo e selezionare Intestazione dalla lista.
A questo punto si aprirà una finestra di dialogo. Aggiungi un nome per la tua nuova classe di intestazione e fai clic OK per aggiungere il codice al tuo HTML. Dovrebbe posizionare automaticamente il nuovo codice all'interno del file tag, ma puoi spostarlo se necessario.
Successivamente, dovresti anche aggiungere un elemento div per il logo del sito e un elemento di navigazione per il menu del sito. Vai al Inserire menu e selezionare div, quindi torna al Inserire menu e selezionare nav. Entrambi questi elementi necessitano del proprio nome di classe.
Come ultima fase di questo processo, abbiamo aggiunto alcune opzioni di menu al nostro elemento di navigazione. Per fare questo, vai a Inserire e seleziona Collegamento ipertestuale. Abbiamo aggiunto cinque collegamenti ipertestuali all'intestazione del nostro sito: Casa, Leone, Tigre, Giaguaro e Gatto domestico.
Le pagine che avranno collegamenti nell'intestazione non esistono ancora, quindi lascia il href proprietà vuota finché non li crei.
Passaggio 4: aggiungi un foglio di stile per CSS
Come puoi vedere, questo sito Web non ha un bell'aspetto così com'è. Un po' di CSS risolverà questo problema e puoi aggiungere facilmente un foglio di stile in Dreamweaver. Vai al Designer CSS sul lato destro dello schermo e fare clic su Più icona accanto a Sorgenti. Devi solo scegliere un nome per il tuo foglio di stile e puoi lasciare il resto delle impostazioni così come sono.
La prima cosa da fare è trasformare l'intestazione in un flexbox. Flexbox è solo un modo per creare una pagina web usando i CSS. Accanto a questo, viene impostato il carattere del sito, viene impostato uno sfondo nero e sono in atto molte altre modifiche per migliorare l'aspetto del sito. Puoi vedere il codice CSS completo alla fine dell'articolo.
Passaggio 5: aggiungi regioni modificabili al modello
Le aree modificabili creano sezioni di HTML modificabili quando si utilizza il modello per creare altre pagine. Il contenuto della nostra pagina principale si adatta perfettamente a una regione come questa. Vai a Inserire > Modello > Regione modificabile per aggiungere una regione modificabile alla tua pagina.
Passaggio 6: aggiungi contenuto di immagine/testo al modello
L'area modificabile che hai appena aggiunto è utilizzabile senza alcun HTML aggiuntivo, ma puoi comunque aggiungerne alcuni da modificare quando crei singole pagine. Per iniziare, vai a Inserire e seleziona div per aggiungere un nuovo elemento div al tuo sito web.
Funzionerà sia come contenitore per il contenuto del testo sulla pagina, sia come luogo in cui aggiungere un'immagine di sfondo. Questo elemento ha una classe e un ID in modo che pagine diverse abbiano proprietà CSS diverse. Queste modelli di sfondo CSS unici sono ottimi se vuoi portare il tuo sito web Dreamweaver al livello successivo.
Quindi, vai a Inserire > Intestazioni > H1 per aggiungere un'intestazione all'interno dell'elemento div appena aggiunto. Entrambi questi elementi necessitano di alcuni CSS per funzionare correttamente. Il div ha valori di immagine di sfondo, dimensione di sfondo e altezza. Vai a File > Salva tutto per assicurarti che il tuo modello si aggiorni.
Puoi aggiungere immagini da qualsiasi punto della tua rete locale o Internet, ma è meglio salvare le immagini all'interno dei file del sito Web per un facile accesso.
Passaggio 7: aggiungi pagine con il modello
Ora che hai un modello in atto, puoi iniziare ad aggiungere alcune pagine. Vai a File > Nuovo e seleziona HTML sotto tipo di documento. Aggiungere un Titolo per ogni pagina che aggiungi prima di colpire Creare.
La nuova pagina è bianca e non ha ancora il nostro modello. Una volta aperta la nuova pagina in Dreamweaver, vai a Strumenti > Modelli e fare clic su Applica il modello alla pagina. Scegli il tuo modello dall'elenco e fai clic Selezionare per caricare il tuo modello. Infine, vai a File > Salva come e scegli un nome per la tua nuova pagina prima di salvarla.
Ripeti questo processo finché non hai abbastanza pagine per soddisfare le tue esigenze. Non devi attenerti a un singolo modello per questo; puoi aggiungerne di nuovi per diversi layout di pagina.
Passaggio 8: aggiungi collegamenti di pagina al modello
Con le tue pagine aggiunte, puoi modificare i link di navigazione nel tuo modello in modo che si colleghino alle pagine giuste. Torna al tuo modello e trova i tag A che hai aggiunto in precedenza. Elimina il collegamento segnaposto e fai clic su Virgolette per aprire il Navigare menù. Da qui, puoi selezionare la pagina corretta per ciascuno dei tuoi link.
Passaggio 9: correggi CSS/HTML su nuove pagine
Ciascuna delle pagine avrà lo stesso aspetto al momento. Ci sono alcuni passaggi da compiere per garantire che abbiano i propri contenuti; segui i passaggi seguenti per completare il tuo nuovo sito web.
- Modifica l'ID elemento div del contenuto su ciascuna pagina per riflettere il titolo della pagina
- Aggiungi il codice CSS per il nuovo ID elemento con un'immagine di sfondo diversa
- Cambia il titolo in ogni pagina
Passaggio 10: prova il sito Web nel tuo browser
Puoi testare il tuo nuovo sito web nel tuo browser web preferito direttamente da Adobe Dreamweaver. Vai a File > Anteprima in tempo reale e seleziona il browser che preferisci per visualizzare il tuo sito web. Questo è ottimo per testare CSS o altro codice che non è compatibile con tutti i browser.
Ora hai solo bisogno di un posto dove ospitare il tuo sito web. Hosting di un sito statico con AWS S3 è un ottimo punto di partenza.
Il codice HTML e CSS
<!doc digita html>
<html>
<testa>
<metacarattere="utf-8">
<!-- TemplateBeginEditable name="doctitolo" -->
<titolo>Documento senza titolo</title>
<!-- TemplateEndEditable -->
<link href="../page-css.css" rel="foglio di stile" tipo="testo/css">
</head>
<corpo>
<classe di intestazione="intestazione principale">
<classe div="logo del sito">Sito di esempio MakeUseOf</div>
<classe di navigazione="menu principale">
<ahref="../Casa.html">Casa</un><ahref="../Leone.html">Leone</un><ahref="../Tigre.html">Tigre</un><ahref="../Jaguar.html">Giaguaro</un><ahref="../Gatto domestico.html">Gatto di casa</un>
</nav>
</header>
<!-- TemplateBeginEditable name="MainContentRegion" -->
<classe div="contenuto principale" id="Leone">
<h1>Questo è un leone!</h1>
</div>
<!-- TemplateEndEditable -->
</body>
</html>
Questo HTML crea il sito Web finito per il nostro progetto. Puoi smontarlo per vedere come funziona, ma ti invitiamo a creare il tuo codice HTML per il tuo sito web.
@charset "utf-8";
corpo {
margine: 0;
sfondo: nero;
famiglia di caratteri: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.intestazione principale {
display: flessibile;
sfondo: nero;
imbottitura: 20px;
}
.logo-sito {
larghezza: 30%;
colore bianco;
font-weight: grassetto;
trasformazione del testo: maiuscolo;
}
.menu principale {
larghezza: 70%;
allineamento del testo: a destra;
}
.menu principaleun {
imbottitura: 10px;
decorazione del testo: nessuna;
colore bianco;
}
.contenuto principale {
altezza: 100vh;
imbottitura: 20px;
dimensione dello sfondo: copertina;
}
.contenuto principaleh1 {
colore bianco;
dimensione del carattere: 10rem;
trasformazione del testo: maiuscolo;
}
#Leone {
immagine di sfondo: url("Immagini/largelion.png");
}
#tigre {
immagine di sfondo: url("Immagini/tigre.png");
}
#giaguaro {
immagine di sfondo: url("Immagini/jaguar.png");
}
#gatto di casa {
immagine di sfondo: url("Images/housecat.png");
}
#tutti i gatti {
immagine di sfondo: url("Immagini/loadsofcats.png");
}Anche questo CSS fa parte del progetto finito. Come l'HTML che abbiamo trattato, puoi giocare con questo codice per rendere tuo questo sito web.
Creazione di siti Web con Adobe Dreamweaver
Dreamweaver potrebbe non sembrare facile da usare come strumenti come WordPress o Squarespace, ma ti dà molta più potenza. Questa guida è un ottimo punto di partenza, ma c'è molto altro da imparare e vale la pena esplorare Dreamweaver in prima persona.