![Page 1: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/1.jpg)
Aula 7Dreamweaver
![Page 2: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/2.jpg)
ATRIBUTOSExistem vários atributos. O primeiro que você
aprenderá é o atributo style. Com oatributo style você pode adicionar
estilização e layout ao seu website.
![Page 3: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/3.jpg)
•Como modificar o menu bar 1° Crio o menu
![Page 4: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/4.jpg)
Irei configurar na barra de propriedades.
![Page 5: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/5.jpg)
Agora modificarei o atributo style.
![Page 6: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/6.jpg)
Clico em SpryMenuBarHorinzontal.css
![Page 7: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/7.jpg)
Na Aba CSS Styles clico em ul.MenuBarHorizontal a
![Page 8: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/8.jpg)
Observe o código: Agora irei atribuir o estilo css.
![Page 9: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/9.jpg)
Vou no site :
![Page 10: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/10.jpg)
Irá aparecer está página. Daí eu irei clicar em Ultimate Gradiente Generator
![Page 11: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/11.jpg)
Veja a página
![Page 12: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/12.jpg)
Agora escolherei a cor desejada.
![Page 13: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/13.jpg)
Vamos fazer as devidas configurações.
![Page 14: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/14.jpg)
Clico em horizontal e seleciono a opção IE .
![Page 15: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/15.jpg)
Iremos agora copiar o código.
![Page 16: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/16.jpg)
Iremos voltar no Dreamweaver, e colar o código no local certo.
![Page 17: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/17.jpg)
Agora eu colo.
![Page 18: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/18.jpg)
Agora iremos testar. Pressiono o botão F12
![Page 19: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/19.jpg)
Clico em sim.
![Page 20: Como fazer o MenuBar Horizontal (Dreamweaver)](https://reader035.vdocuments.pub/reader035/viewer/2022062711/55bdbac5bb61eb30118b4586/html5/thumbnails/20.jpg)
Veja como fica!