• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Creating a New Web Site Defin... > Creating a Quick Prototype and a Sit...

Creating a Quick Prototype and a Site Map

You can view the layout of your Web site in the Dreamweaver Site panel or Site window. It might be useful to create a mockup of the Web site structure to share with your team or include with a report.

You can do this in Dreamweaver without actually creating the files. You can quickly create and name new files, and then display a site map view of the site, showing the file and directory hierarchy. You can even create an image of the map to include in a report!

Creating Files and Folders in the Site

Before you can use the site map, you’ll need to create some Web pages. You can do this quickly in the Site window. Right-click (Control-click on the Mac) on the top line in the local site; this line represents the site root. Select the New File command to create a Web page. Name the file index.htm, one of the standard names for a home page. Right-click (Control-click on the Mac) on index.htm, and choose the Set as Home Page command on the context menu. You must specify a home page for your site before you can create a site map.

In the Site window, switch between the Site Files view and the Site Map view by using the buttons on the left side of the Site window toolbar, shown in Figure 4.13. When you click the Site Map view button, you can choose Map Only or Map and Files. Select the Map and Files view so that you can see both the site map and the files in the local site.

Figure 4.13. The buttons in Dreamweaver’s Site window toolbar enable you to switch between the Site Files view and the Site Map view.

Create several new directories, using the New Folder command in the pop-up context menu, representing lesson directories within the online learning application. Name the directories L1, L2, L3, and quiz. Be sure the directories are within the site root and not nested within each other or in the images directory. If you accidentally nest one of the directories, you can drag and drop it on the top line in the site to place it in the side root.

Create a new file in the L1 directory and name it 1_1.htm. Continue creating a single file in each directory, naming the files 2_1.htm (representing the lesson number and the page number), 3_1.htm, and q_1.htm. You can continue creating Web pages based on a storyboard or other plan for the online learning application.

Select index.htm in the Site Map view and you’ll see the Point-to-File icon, the small circular icon to the right of the file. Click the Point-to-File icon and drag it over 1_1.htm in the site files, as shown in Figure 4.14. Dreamweaver creates a simple link in index.htm to the file, and it shows up as linked in the site map. You can continue to link files to each other, creating a mockup of the site navigation. You can use the Point-to-Files icon to link files or select a file and use the Link to Existing File (Site, Link to Existing File) or Link to New File (Site, Link to New File) commands. These commands are also available in the context menu.

Figure 4.14. Drag the Point-to-File icon to another file to link the two together. Point-to-File icon

Modifying the Way the Site Map Appears

The Site Map Layout category of the Site Definition dialog box, shown in Figure 4.15, sets up the look of the site map. Open the Site Map Layout category by either editing the site definition, as described earlier in this chapter, or by selecting the Layout command (View, Layout). This category enables you to set the number of columns displayed in the site map and the width of the columns. You might need to modify these values to make your site map readable. For example, making the column width 150 pixels gives more room to display linked files.

Figure 4.15. You can change the width of each column and the number of columns displayed in the Site Map Layout category of your site definition.

Icons in the site map can be labeled with the filename (the default view) or the page title of a Web page. When you view the files by the page titles, you can name the files right in the site map view by clicking on the title and entering a new one. You can also check Display Files Marked As Hidden (you can hide files in the site map with the Show/Hide Link command on the View menu) or check Display Dependent Files (shows images and other files along with the Web files). Because you don’t have any hidden or dependent files in this site, you can leave both check boxes unchecked.

Saving the Site Map as an Image

One great Dreamweaver feature is the capability to export a picture of the site map as a BMP or PNG file. You can then import the image into proposals or use it to document your project. To accomplish this, choose the Save Site Map command from the File menu while in the Site Map view. Select either the PNG or BMP file format in the Save As Type drop-down list. You can import this image into a Word document, as shown in Figure 4.16, or insert a PNG into a Web page.

Figure 4.16. You can insert an image created from Dreamweaver’s site map into documents or Web pages.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint