Come fare una destra e sinistra Sidebar in un modello già utilizzato in Dreamweaver

December 18

È possibile modificare il layout del tuo sito web in Dreamweaver inserendo nuovi "<div>" tag che aggiungono a destra e barra laterale sinistra per il vostro modello esistente. Questa funzionalità consente di inserire le sezioni alla tua pagina esistente senza interrompere il contenuto esistente. Dopo aver aggiunto una barra laterale a sinistra e una barra laterale a destra, il modello preesistente verrà visualizzato come una colonna completa al centro del layout.

istruzione

1 Avviare Adobe Dreamweaver CS5.5.

2 Fai clic su "File" nella parte superiore della finestra, fare clic su "Apri", quindi fare doppio clic sul modello che si desidera modificare.

3 Fare clic sul pulsante "Split" nell'angolo in alto a sinistra della finestra. Ciò visualizzerà il modello nella sezione "Design" sul lato destro della finestra, mentre viene visualizzato simultaneamente il codice HTML per il modello nella sezione "codice" sul lato sinistro della finestra.

4 Scegliere ovunque all'interno della sezione "Design" sul lato destro della finestra.

5 Individuare la barra orizzontale nella parte inferiore della finestra che inizia con il tag "<body>", quindi fare clic sul tag "<div>" direttamente alla destra di esso. Ad esempio, se la barra orizzontale visualizza "<body> <div.container>," è necessario fare clic "<div.container>." Ciò evidenziare l'intero "<div>" nella sezione "codice" della finestra.

6 Fare clic all'interno del tag "<div>" nella parte superiore del testo evidenziato.

7 Aggiungere "style =" float: left; ". Al tag, ad esempio, se si sta lavorando con un" <div> "con" class = "contenitore" "il codice, poi la completa" <div> "tag sarebbe" <div class = stile "contenitore" = "float: left;"> ".

8 Fare clic sul tag "<div>" nella barra orizzontale nella parte inferiore della finestra di nuovo, quindi fare clic sopra il testo evidenziato nella sezione "Codice" della finestra.

9 Digitare "<div id =" left-sidebar "style =" float: left;> Contenuti Qui </ div> "Sostituire" Contenuti Here "con le informazioni che si desidera includere nella barra laterale sinistra..

10 Fare clic sulla scheda "<div>" nella barra orizzontale nella parte inferiore della finestra di nuovo, quindi fare clic direttamente sotto il testo evidenziato all'interno della sezione "Codice" della finestra.

11 Digitare "<div id =" "style =" right-sidebar float: left; "> Contenuti Qui </ div>." Sostituire "Contenuti Here" con le informazioni che si desidera includere nella barra laterale destra.

12 Fai clic su "File" nella parte superiore della finestra, quindi fare clic su "Salva" per salvare le modifiche.

Consigli e avvertenze

  • Se il modello è stato precedentemente progettato per adattarsi a una certa risoluzione dello schermo, potrebbe essere necessario modificare la larghezza del "<div>" contenitore che in precedenza aiutare tutti i contenuti. Questa proprietà può essere trovato nella sezione "<head>" del modello, o in un file CSS allegato.