Hvordan lage en Høyre og Venstre Sidebar i en allerede brukt mal i Dreamweaver

Du kan endre oppsettet av nettstedet i Dreamweaver ved å sette inn "<div>" koder som legger en til høyre og venstre sidebar til din eksisterende mal. Denne funksjonaliteten gjør det mulig å sette inn deler til din eksisterende side uten å forstyrre eksisterende innhold. Når du har lagt en sidebar til venstre og en sidebar til høyre, vil den tidligere eksisterende malen vises som en full kolonne i sentrum av layouten.

Bruksanvisning

1 Start Adobe Dreamweaver CS5.5.

2 Klikk på "File" øverst i vinduet, klikk "Åpne" og deretter dobbeltklikker du malen du vil redigere.

3 Klikk på "Split" knappen øverst i venstre hjørne av vinduet. Dette vil vise malen i "Design" delen på høyre side av vinduet, samtidig viser HTML-koden for malen i "Code" delen på venstre side av vinduet.

4 Klikk hvor som helst inne i "Design" -delen på høyre side av vinduet.

5 Finn den horisontale linjen nederst i vinduet som starter med "<body>" tag, klikk på "<div>" tag direkte til høyre for den. For eksempel, hvis den horisontale linjen viser "<body> <div.container>", ville du klikker "<div.container>". Dette vil markere hele "<div>" i "Code" delen av vinduet.

6 Klikk i "<div>" tag på toppen av den markerte teksten.

7 Legg til "style =" float: left; ". Til tag For eksempel, hvis du arbeider med en" <div> "med" class = "container" "kode, og deretter hele" <div> "tag ville være" <div class = "container" style = "float: left;"> ".

8 Klikk på "<div>" tag i den horisontale linjen nederst i vinduet igjen, og klikk deretter over den markerte teksten i "Code" delen av vinduet.

9 Type "<div id =" left-sidebar "style =" float: left;> Your Content her </ div> "Erstatt" Your Content Here "med informasjon som du ønsker å inkludere i venstre sidebar..

10 Klikk på "<div>" -kategorien i den horisontale linjen nederst i vinduet igjen, og klikk deretter på rett under den markerte teksten i "Code" delen av vinduet.

11 Type "<div id =" right-sidebar "style =" float: left; "> Your Content her </ div>." Erstatt "Your Content Here" med informasjon som du ønsker å inkludere i høyre sidebar.

12 Klikk på "File" øverst i vinduet, klikk på "Lagre" for å lagre endringene.

Hint

  • Hvis malen ble tidligere laget for å passe en bestemt skjermoppløsning, må du kanskje endre bredden på "<div>" container som tidligere hjelpe alt innholdet ditt. Denne egenskapen kan bli funnet i "<head>" -delen av malen, eller i en vedlagt CSS-fil.