In this course, our instructor Candyce Mairs demonstrates how to customize the navigation area with Dreamweaver CC. This lecture covers how to change the size of the navigation area and preview a webpage using the Inspect feature.
We are going to modify the navigation area on our page
Delete all the text under the hyperlinks
Notice how the background color for the column has now shortened since the content in this area is shorter
We have a small amount of orange showing under the nav bar
If you click in there you see an extra <aside> tag
Right click in the tag selector and delete it
Click in the hyperlinks and choose Show Set
We also need to determine what is causing the extra spacing above the nav bar
Show the Live View and use the Inspect button
Notice the header is too tall, which is causing the spacing issue
We will add a width and height to the header area and see what happens
Set nav ul top padding to 15px
Preview the page in the browser
Customizing the Navigation Area
Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.
Educator.com recommends Adobe Dreamweaver CC to use with our Dreamweaver CC course. Adobe Dreamweaver CC is the leading all-in-one visual development tool used by web designers and developers worldwide to create, publish, and manage their websites and mobile content. Membership includes the full version of Dreamweaver CC to download, install, and run on your computer. You will get immediate access to all the latest updates and new features as soon as they're released.