This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with the Site Map
Being able to customize the site map is what will allow you to get the most out of this Dreamweaver feature. The map gives you a visual representation of the navigation system and structure of your Web site. This can be very important because Web sites quickly become complex in their navigation structure.
The Site Map will always use the index page as the top-level page and display pages linked two levels deep. You can always see additional linked pages by pressing the plus or minus signs. To see the Site Map, press F8 on your keyboard.
In the toolbar of the File panel, press the Show Map button. If you do not see the Show Map button, be sure to Expand the view of the File panel. Notice the button has two choices: to display either the map by itself or display the map alongside the files. To get the most use out of the map, I recommend displaying the map and files. Of course this is an option only if you are in expanded view, as shown in Figure 3.16. Otherwise, there isn't enough room with the File panel collapsed to see all the necessary data.
The site map offers the capability to change and manipulate files and links. If you want to add or delete links, you can do so in the site map view. You can also manipulate new files—this can be handy if you're looking to storyboard the structure of your Web site.
TIP
You can easily convert the site map into a bitmap file. Inside the File panel, choose File, Save Site Map. Navigate to the location on your computer where you want it to be saved, type in a filename, and choose what type of file you would like to save it as: BMP or PNG. This is perfect if you want to email the map to colleagues. You may want to optimize it first in Fireworks to reduce the file size.
)
Figure 3.16 After clicking the Expand button, the File panel transforms into a
site window reminiscent of Dreamweaver 4.
In this exercise, you're going to look at how you can link an existing file to a new file.
Open your site map by pressing F8 on your keyboard. Be sure to display the site map and files by clicking the Site Map button in the toolbar. Notice that the site map is now visible.
Click the index or home page icon of your Web site to highlight it.
Choose Site, Site Map View, Link to New File. This launches the Link to New File dialog box as shown in Figure 3.17. You can also contextual-click the selected icon and choose Link to New File from the contextual menu.
Enter in a name for the document with the appropriate extension: html, htm, cfm, and so on.
Type in a title for the page, which will show up in the title bar of the browser window.
Enter in a name for the link. This name will be displayed in the document the way you type it here, in the form of a hyperlink.
After you're happy with the information you typed in, click the OK button or press Return (Mac) or Enter (Windows). A new icon is created in the map with a line connected to the home page, or to whatever icon you selected.
)
Figure 3.17 The Link to New File dialog box.
Linking to a new file is one way to storyboard, or to start a structure or filing system to a Web site. It can also be good to create new files this way, keeping your navigation clean and intact. You can do the same thing for existing documents within your Web site by following the steps in the previous exercises and switching the option from Link to New File to Link to Existing File. You can also follow the steps in the next exercise.
In this exercise, you'll look at how you can use a shortcut by displaying both the site files and the site map. Linking documents is as simple as clicking and dragging.
In the File panel, be sure to display both the site files and the site map. Press F8 on your keyboard to make the site files visible. In the site files drop-down list located in the toolbar, choose Show Map and Files. Make sure you are working in the expanded view.
With both the map and file views visible, select the file icon in the site map that you want to link. Notice a small icon that looks like a rifle scope just above the file icon in the top-right corner. This rifle scope is the point-to-file icon, and it allows you to do just that.
Click and drag the point-to-file icon and place it on top of the file you want to link to in the site files portion of the window, as shown in Figure 3.18.
Open the document that you dragged the point-to-file icon from in the site map. You'll notice a text hyperlink at the bottom of the page named the same as the file that you linked it to.
)
Figure 3.18 Use the point–to-file icon to quickly add links to
documents.
Modifying Page Titles
You can easily modify the titles of documents as well. Be sure to view the files in the map by title name instead of filename. To show the title name, choose View, Show Page Title, or press Command+Shift+T (Mac) or Ctrl+Shift+T (Windows) to toggle the views.
With the title view active, click once to highlight the file, and then click a second time in the text area. This makes the text editable with a blinking cursor. Then type in the new title for the document.
Maintaining Files
As with any Web production, moving and renaming files will be a necessity at some point. It is important to follow certain guidelines to preserve site and link integrity. You should make all such changes within the Site window or panel. This ensures that Dreamweaver will make the appropriate adjustments or modifications to any document that a link or name change will affect. In contrast, if you make this change outside the File panel and make the adjustments in Windows Explorer (Windows) or the Finder (Mac), Dreamweaver will not be aware of these changes, resulting in broken hyperlinks.
The following exercise will show you how to rename files within Dreamweaver.
Be sure to have the File panel visible. If you can't see the File panel, press F8 on your keyboard to open the panel.
Inside the File panel, select a file by clicking in it, and then click a second time on the name of the icon to see a blinking cursor.
With the blinking cursor in the name of the file, press the Delete (Mac) key or Backspace (Windows) key to remove all the text for that file. Now that the icon does not have a name, type in a new one. Press Return (Mac) or Enter (Windows).
After pressing Return or Enter, the Update Files dialog box launches, asking you to scan the documents within the site, as displayed in Figure 3.19. After you press Scan, Dreamweaver searches the site for related files. When the scan is complete, the dialog box indicates what files need to be updated in your Web site, as shown in Figure 3.20. Click Update.
Dreamweaver will open each file on the list, make the necessary change, save it, and close it.
){kind=small}
Figure 3.19 The Update Files dialog box asks whether to scan the site for
related documents.
)
Figure 3.20 The Update Files dialog box displays files that will be
updated.
The Update feature in Dreamweaver proves to be quite the timesaver. Imagine if you had to make all the changes manually to all the separate documents.