In this scenario, you are managing the Haas Consulting Club website and have a copy of the entire site. You want to create a new page for Alumni Information. You would like to add a link to this page in the navigation section of all the current website pages.
A. Reviewing the website structure and code
The website files are in the class folder named Consulting Club. If you have already created a Local Site for that folder, you can easily see the pages.
1. Close any open files from the previous Local Site.
2. In the Files panel, select Consulting Club from the Local Site list.
3. Double-click index.html to open it.
4. Use Dreamweaver tools to analyze the page.
In the Document toolbar, notice that there is a CSS file named pacific.css.
In Code view, notice that there are scripts in the HTML code.
In Code view, notice that the page layout is created using <table> tags instead of <div> tags.
In Live View, notice that there is one script to switch the image at the top of the page, and another script to change the content title from “Good afternoon” to “Good evening”.
5. Open some other pages and review them as well.
B. Creating and saving a new page
The easiest way to create a new page is to copy an existing one. We will copy the about.htm page, because it is simpler than the index.htm page.
1. If necessary, double-click about.htm from the Files panel to open it.
2. Go to File → Save As...
3. In the Save As dialog box, make sure you are viewing the top level of the
Consulting Club Local Site.
4. In the File name field, enter alumni.htm.
5. Click Save.
C. Updating Meta information
When you make a copy of another page, you should update the Meta information of the new page so it is appropriate to the new page.
1. In the Document toolbar, change the Document Title as necessary.
2. Go to View → Head Content.
3. In the Head content toolbar, select each of the icons to review any keywords or descriptions that may need to be modified in the Property Inspector.
D. Reviewing the CSS stylesheet
Verify that the new page still contains the link to the website’s CSS file.
1. In the Document toolbar, click on the pacific.css link to verify that the CSS file is available.
E. Modifying text
You can type text directly into the new page or copy it from a text document.
1. Make sure you are viewing the Source Code in the Design view.
2. Change the content title from “About us” to “Alumni Information”.
3. In the Files panel, double-click alumni.doc in the NEW_CONTENT folder.
4. In Microsoft Word, select all the text and copy it.
5. In Dreamweaver, select the paragraphs that you want to replace.
6. Paste the new text over the selected paragraphs.
7. Apply any Heading, Paragraph, or CSS rule formats as necessary.
F. Inserting an image by dragging
If you want to insert an image, you can use the Insert menu or use this shortcut by dragging the image.
1. In the Files panel, click the plus symbol next to the images folder to expand the folder.
2. Find the image file named rock_outman.jpg.
3. Drag the filename from the Files panel into the web page where you want it to display.
4. In the Image Tab Accessibility Attributes dialog box, enter an appropriate Alternate text, such as “Alumni Photo”.
5. Click OK.
G. Creating a link to an internal page by pointing
If you want to create a link from a word or phrase in a paragraph to an internal web page, you can use the Browse for File icon in the Property Inspector or you can use the Point to File icon.
1. Select the word or phrase that you want to link, such as the word “officers”.
2. In the Property Inspector, drag the Point to File icon next to the Link field to the officers.htm file in the Files panel.
H. Creating a link to an email address
You can create an email link to an email address in your text.
1. Select the email text that you want to link, such as the email “[email protected]”.
2. In the Property Inspector, in the Link field type “mailto:” plus the email address. For example, you can type
mailto:[email protected]
I. Adding a link to navigation
Now that we have a new page, we need to create a link in the left navigation area. This left navigation code must be changed on every page in the website.
An easy approach is to create the code on one page, and then use “Find and Replace” to update the HTML code throughout the website.
1. In alumni.htm, click after the text “Join” in the left navigation area.
2. Press Enter, and then type “Alumni”. Notice that the word Alumni does not look like the other links.
3. Select the text “Alumni” and add a link to alumni.htm.
Now, the CSS rule properly formats the text to look like the other links.
4. Save the file.
J. Using Find and Replace to update the website pages
1. Go to Edit → Find and Replace.
2. In the Find and Replace dialog box, from the Find in list, select Entire Current Local Site.
3. From the Search list, select Source Code.
4. In alumni.htm, select the text “Join” from the left navigation, and click Split to view the code.
5. Select the entire codeline for the text “Join”.
<li><a href="join.htm">Join</a></li>
6. Copy it.
7. In the Find and Replace dialog box, click in the Find field and paste the code.
8. In the Split view, select the codelines for “Join” and “Alumni”.
<li><a href="join.htm">Join</a></li>
<li><a href="alumni.htm">Alumni</a></li>
9. Copy it.
10. In the Find and Replace dialog box, click in the Replace field and paste the code.
11. Click Replace All.
12. In the warning dialog box, click Yes.
13. The Search panel will display all the files where the code was updated. Notice that some files are not listed, such as academics.htm, events.htm, and join.htm.
K. Modifying the HTML code on individual pages
The Find and Replace will update most of the pages in the website, but some pages may need to be updated manually because they were not matched in the Find and Replace.
1. From the Files panel, open academics.htm, events.htm, and join.htm.
2. In alumni.htm, delete the duplicate Alumni codeline if necessary.
3. Select and copy the codeline for the Alumni link.
<li><a href="alumni.htm">Alumni</a></li>
4. In each of the three files, paste the Alumni code below the appropriate Join code.
5. Save all files.
6. Preview in a browser to test the files.
L. Applying the “active” id to the left navigation link
Notice that there is another problem. When you view the alumni.htm file in a browser, the left navigation still highlights “About” instead of “Alumni”. This is due to the wrong list item being marked with a CSS ID of “active”.
1. In alumni.htm, notice in the code that the <li> tag for the text “About” has an id=”active”
property. If you are comfortable with HTML, you can simply cut and paste this code into the
<li> tag for “Alumni”. Otherwise, do the following.
2. In the Design view, click in the text “About”.
3. In the Tag Selector, click on the tag <li#active>. This selects the tag that is marked with the CSS rule.
4. In the Property Inspector, from the ID list, select none to remove the CSS rule.
5. Click in the text “Alumni”.
6. In the Tag Selector, click on the tag <li>. This selects the tag that you want to mark with the CSS rule.
7. In the Property Inspector, from the ID list, select active to add the CSS rule.
8. Preview the web page to test the change.