Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Up at the top, I'm including header.php, and down at the bottom, I'm including footer.php. The purpose of the Code Navigator is to allow you to navigate from one page to another very easily. In Dreamweaver CS5, up at the top, in the toolbar, you'll see icons for each file that's included in the main file. These allow you to jump to, for example, Cascading Style Sheet files, and Server Side Includes, such as my header and footer. But the Code Navigator gives you another simple way to navigate.
I'll go back to the Source Code icon, which takes me to the main page, and then look at the page in Design View, and scroll down toward the bottom, where my footer is. I'm going to click anywhere in the footer and then wait two seconds. You'll see a little graphical icon show up. When you move the cursor over, you'll see this message, Click indicator to bring up the Code Navigator, and when you click it, you'll see a hierarchical display, showing you the name of the current page and the name of any includes, in this case footer.php.
You also see a listing of your Cascading Style Sheet files and Cascading Style Sheet rules that might be affecting the currently selected content. I'll click on footer.php, and takes me to that included page. You can also get to the Code Navigator from Code View. I'll go to Code View and go to the first Include page, wait two seconds, and there's the Code Navigator icon. I'll click it, and there is the same display. You can also get to the Code Navigator from a Context menu.
Get unlimited access to all courses for just $25/month.Become a member