- What You Will Learn
- Approximate Time
- Lesson Files
- Specifying Link Color and Forma
- Creating Hypertext Links
- Understanding Links and File Structure
- Adding New Folders and Files to a Site
- Creating a Site Map
- Working with Links in Site Map View
- Viewing a Subset of the Entire Site
- Saving the Site Map
- Targeting Links
- Inserting and Linking to Named Anchors
- Inserting E-mail Links
- Working with Links On Your Own
- What You Have Learned
This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with Links in Site Map View
You can add or delete links through the Files panel site map.
- Choose Map and Files from the Site Map menu. Select the icon for the index.html file in the Map view pane, click the Point To File icon, and drag the Point To File icon to the icon for the index.html file in the about folder. Release the mouse button when the index.html file becomes highlighted.
As you drag, the pointer becomes an arrow and a Point To File icon. A blue line is drawn as you drag from the top-level index.html file to the index.html file that is contained in the about folder. When you release the pointer, the index.html file located in the about folder shows up in the Site Map view. The link has been inserted into the top-level index.html document. If you open the top-level index.html, document you will see the link.
- Repeat Step 1 to create links from the top-level index.html file to the remaining index.html files in the following folders:
schedule, teachers, community, training, and explorations.
Pausing over a file displayed in the map will show a tooltip displaying the name and location of the file. Selecting a file in the map view will highlight the same folder in the Files view, and vice versa.
In this step, you linked the main page of the site, index.html, to main pages of each section—the index.html files that are located in each of the folders.
Links made this way will appear on the same line—one after the other—beneath any pre-existing content in the document and will use the name of the file for the text of the link on the page. In this case, the filename index.html is not very descriptive so you’ll apply the links to the navigation area in the next step.
- Open index.html in the Lesson_03_Links folder. Select the first index link at the bottom of the page. Then select the text
in the Link field in the Property inspector. Select the word About in the list of sections just above the copyright information
and paste the copied link into the Link field in the Property inspector.
In this lesson, you’re creating the main navigational links at the bottom of the page in the index.html document. In a fully functional site, you would repeat this set of links in each document. Maintaining consistent navigational links throughout a site—in the same place on each page—makes it easier for visitors to browse a site. In later lessons, you’ll create the main navigation system that will be used at the top of all pages in the project site.
- Repeat Step 3 for the corresponding links and sections for the Schedule, Teachers, Community, Training, and Explorations sections.
Delete the line of index links at the bottom of the page, save and close the file.
Be sure to look at the link location in the link text field on the Property inspector as you copy the links to apply the correct index link to the corresponding section—if you closed Dreamweaver at any time between creating the folders earlier in this lesson and this exercise, the Files panel might have refreshed into alphabetical order. Therefore, the index links might not be in the same order as the list of sections.
The navigational links are now clear about the location to which they will take the visitor.
If the Start page opens, you can close it.
- Repeat Step 1 to create links from the index.html file in the schedule folder to all the other documents in the schedule folder.
In this step, you linked the main page of the schedule section, schedule/index.html, to the rest of the pages of the schedule section.
Pages that contain links are displayed on the site map with a plus (+) or minus (-) sign just to the left of the file. Clicking the plus sign displays a list of the links contained in the document, each with its own plus sign. Broken links (those that don’t work) are displayed in red type. External links, such as e-mail links and URLs, are blue and are indicated with a small globe.
- Repeat Step 5 for the files in the remaining folders: about, teachers, community, training, and explorations.
)
)
)
You now have a test site with many of the links that will allow you to browse through the site and test the navigation and site structure. To complete this test site, you’ll need to add links from each index.html file in the six folders to the top-level index file, as well as adding links from each page in a folder to the index.html file in the same folder. After doing so, your site map would look like the following example.
)