- 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
Adding New Folders and Files to a Site
To create the initial framework of the site structure through the development of linked placeholder pages in the Yoga Sangha project site, you’ll need to create a number of new pages and folders. This can be done quickly and easily from the Files panel, which enables you to set up a site’s file and folder structure. You can immediately create pages that act as placeholders and add content to them at a later time.
- Click the Expand button on the Files panel toolbar in the Files panel.
Expand to show local and remote sites.
The Expand button is located on the right side of the toolbar, above the list of files. You’ll learn more about the other options and tools on the Files panel in Lesson 14.
- On the expanded Files panel, verify that Yoga Sangha is selected in the Show menu. Open the Lesson_03_Links folder shown in
the Local Files column by clicking the arrow (Macintosh) or plus icon (Windows).
The Local Files column is located on the right side of the expanded Files panel. The Remote Site column on the left side of the panel does not contain any files because you haven’t defined a remote site. You’ll learn more about doing so in Lesson 14.
- Right-click (Windows) or Control-click (Macintosh) the Lesson_03_Links folder.
A context menu opens, displaying a variety of options. The options available through this menu vary, depending upon what is selected. The context menu is a quick way to access many of Dreamweaver’s functions and can help speed up your production.
- Choose New Folder from the context menu.
A new untitled folder is added within the Lesson_03_Links folder. Because you just created the new folder, the name is highlighted and displayed with a heavy line around the text field to indicate that you can name the folder.
- Type about and then press Return (Macintosh) or Enter (Windows) to name the new folder.
The new folder displays the name you have just given it.
- Right-click (Windows) or Control-click (Macintosh) the about folder you just created inside the Lesson_03_Links folder in
the Files panel.
You are clicking the folder in which you will create a new file in the next step.
The context menu opens.
- Choose New File from the context menu.
A new unnamed document is created in the about folder. The name field is highlighted, indicating that you need to type a name for this document.
- Name the new file studio.html.
Don’t forget to keep the .html extension in the filename. All documents that you create in a site must have the appropriate extension for their document type so browsers can recognize them.
- Repeating Steps 6 through 8, add the following files inside the about folder: contact.html, newsletter.html, news.html, location.html, anusara.html, and index.html.
There should now be seven XHTML files in the about folder. Remember, XHTML files still use the .html extension.
As you learned earlier in this lesson, each folder can contain its own index.html file. Using an index.html file ensures that if a visitor enters only the folder name such as www.yogasangha.com/about, the index.html file will be displayed.
- Repeating Steps 3 through 8, create the following folders and the subsequent files those folders need to contain:
)
)
)
)
)
|
Folder name |
Files |
|---|---|
|
schedule |
faq.html, events.html, download-schedule.html, index.html |
|
teachers |
jayne.html, katchie.html, sierra.html, index.html |
|
community |
outreach.html, mission.html, green.html, forums.html, index.html |
|
training |
anusara-training.html, instructors.html, training-schedule.html, application.html, resources.html, login.html, index.html |
|
explorations |
philosophy.html, sequences.html, meditations.html, media.html, educational.html, index.html |
You’ve now finished creating placeholders for each page in the Yoga Sangha project site, and you’re ready to start linking them together. The folders and files in the Files panel should now look like the following example.
)