Lesson 2 - Site Navigation
In this lesson I'll show you how to create basic navigation with the expanded Files Panel. First, make sure you Files Panel is expanded by clicking on the Expand/Collapse button in the upper right of the panel.
We'll work in the Local Files right pane of the Expanded Files Panel. Select the root folder in the Local Files Pane. Right-click or control-click on the folder icon - not the name of the folder. Select New File from the context-sensitive menu. A new file named untitled.htm will appear within the root folder. Change the name to index.html.
But wait...remember I told you not to name any file for this course index.html or index anything? For just this one assignment you will name this file index.html so you can see how you would set up your home page in the real world. I will be asking you to change this index.html name to zzz.html next week by using the Files Panel's rename feature. If you follow the directions for renaming this way, you will have the option of having DW automatically update all the links to this page. Very cool feature! Now repeat the steps to create a new file 3 more times and name the files page1.html, page2.html, and page3.html. Do not leave any spaces between the word page and the numbers that follow. Your Local Folder pane will now look like this.
In the Files Panel, click on the icon for the Site Map icon at the top of the toolbar. Select Map and Files from the dropdown menu.
Select the index.html in the left map pane and the circular Point to File icon will appear.
Click, hold and drag this circular icon from the index.html in the left pane to the page1.html icon in the right pane. You'll notice that a stretchable arrow connects the icons as you're dragging and a rectangular border appears in the right pane around the icon and name for page1.html. Release the mouse button. You've just linked the index.html to page1 of your website.
This circular icon is the Point-to-File icon and it enables you to create links by clicking and dragging the icon onto files in both the Site Map or Local Files panes of the expanded Files Panel. Your Site Map will begin to look like a flow chart with the index.html at the top or root and the page1.html one level below. Repeat this point to file process to link the index.html to page2.html and page3.html so you'll have the index file linked to all 3 pages. You may widen the left Site Map pane by dragging on the frame border between the panes.
Now click on page1.html in the Site Map left pane. You'll notice that it too has a Point to File icon. Connect page1.html to the index.html, page2.html and page3.html. Do the same page2.html and page3.html. With this done, the navigation for our site will be as follows:
Below is an illustration with all the links set for my site.
Double click on the index page index.html in either pane to display the index.html in the Design View of the Document Window. The page opens and has text links to pages 1, 2, and 3. These links don't function in the Document Window. You have to Preview them in a browser to test the links. Previewing your work in a Browser Click here for instructions on setting up both IE and Netscape as your Primary and Secondary browsers. With you your index.html document displayed in the Document Window, go to the File Menu - File>Preview in Browser. Select a browser and the index page will open in the browser you selected. Click on the link to page1.html. Does it take you page 1? How do you know you're on page1? Look in the blue title bar (Windows users - MacOS - look in the Grey Title bar). It should have the name of the html document - but it doesn't yet. Remember that the title of a page is not the same as the name of the file. We will title all pages later. Try all combinations of the links. They should all function. Did all your links work? Great! Did the all the pages have the proper links to all the other pages? Mine didn't. If yours didn't, send a note to the student lounge as soon as possible so we get you up to speed. Sometimes it something really simple that you didn't do which will throw off the rest of the assignment; so don't be afraid to let us know that it didn't work for you. Remember in an online class if you don't communicate, we don't know how you're doing and we want you all to keep on schedule, so give a shout and we'll get you back on track. What Went Wrong? Here's an example of one of my pages gone wrong. When I double clicked on page 3, the last link was a link to page 3 from page 3. That's a mistake. I don't want a page to link to itself. Just like using a word processor, I can simply select (highlight) the text in the Document Window and press the delete key to remove the text and correct this problem. I must have started to drag the point to file link and thought I aborted it when taking the screen shot but Dreamweaver registered the action and created a link. When in doubt, blame it on the software! Just fooling!
You have just learned one way to define the site navigation for a small site or the beginnings of a larger site. Of course when you have your concept and storyboard you will know approximately how many new files you'll need to create. For better organization you may want to create new folders as compartments to contain similar content. Grouping similar content in folders is a good way to manage larger sites. Instead of naming your pages page1, 2, and 3... you could name them company, product, clients, etc. You could even name the folders this way and then make files within the folders have names for your different products, different clients, etc. Naming your Home Page It's best to name your home or start page index.html because most ISPs who host your site will require that you call your start page index.html. When you name your starting page index.html, the index.html does not have to be included in the web address or URL. An example of this is www.something.com. The web server knows that the request is searching for an html file within the root directory and the file is named index.html. You can put an index.html file at the site root as we've done in our lesson for today and also within each folder of your website so you can use shorter URLs such as: http://www.something.com The above example means that there are 3 directories or folders on something.com's site. Within each folder is a separate index.html file. There is also an index.html at the root of the website.
It may seem confusing that you have so many index.html files on the same site but as long as they are all in separate folders they won't overwrite one another. Then why am I asking you NOT to use index.html for future lessons? Because if you use index.html I can not see the directory structure of your UNIX accounts. If you have problems which I need to troubleshoot, I will look at your file directory path. I need to actually see your files on your server and can't do that if you have created an index.html page on the server. So for this lesson, you will upload an index.html page, but I will ask you to delete it from the server next week and rename it on your local drive to .zzz.html. Don't worry about this now. ;) Summary of Site Definition We developed the structure of a site's navigation in the Files Panel and created blank html pages that link to one another. We will add the content later. We can change the names of these pages and/or the directory structure within the Files Panel of DW, and because we have defined our site within Dreamweaver, all the links will be updated and reflect the name change. Here, I changed page1.html to company.html. Dreamweaver asks if I want to update the links in the files to which page1.html was linked? When I click the Update button, all the links will automatically change in the source code, but I'll have to go in and change the text ("page1") by hand. I'll rename page2.html clients.html and page3.html to products.html.
I have successful changed all the file names and updated the links but when I view the page in the Document Window, I see that the text of the links has not changed. I will have to update the text manually and I'll show you how to do that in the next lessons when we add content and format text. By the way, we can apply this site navigation process to sites that already have data and content in the files. To apply DW's site management features to an existing site, do not move or modify files on your hard drive. Instead, define the site as a new site in DW. Select the folder where the site resides. Then, move, rename, reposition files through DW's Files Panel only. * click the link below to continue with this lesson * |
