Links, Dates and Testing
Objectives
Practice
Files

Creating New Pages (You Tube Video | Video)

A web site consists of two or more web pages, each holding specific information that a user might be looking for. One of the tasks in web design and development is to decide how to chunk the information so that users are not overwhelmed with text and can easily find the information that they are looking for. The beginning of that process is to create the physical pages. We already have an index.html and spa.html page for the Striped Umbrella site, now we are going to add a few more.
  1. Select the Striped Umbrella site from your Files panel in the lower right of the DW window.
  2. Right click on the main folder and select New File
  3. A new file, untitled.html, will be created. Rename this file to read aboutUs.html. Note that the file begins with a lowercase letter and uses camel casing.
  4. Repeat the process and make cafe.html and activities.html.
Creating a Navigation Bar (You Tube Video | Video)

When developing a web site, one of the most critical pieces is that users can easily navigate to find the information that they are looking for. This is done through the creation of a list of links to other pages in the site, known as a navigation (nav) bar. Good developers create clear nav bars that link to all pages and are located in the same place on each page.
  1. Open the index.html page of the Striped Umbrella site.
  2. Highlight the text at the top of the page ("About Us - Spa - Cafe"). Type the following in its place: Home | About Us | Spa | Cafe | Activities
  3. Insert a paragraph break at the end of the line an insert a horizontal rule (Insert -> HTML -> Horizontal Rule).
  4. Highlight the first item, "Home". With the text highlighted, locate the target icon in the HTML Properties Panel, next to the Link input. Drag the target to the index.html file located in the Files Panel in the lower right of the screen. The word "Home" is now linked to the index.html web page.
  5. Repeat the process for each of the other items, linking About Us to aboutUs.html; Spa to spa.html; Cafe to cafe.html; and Activities to activities.html.
  6. Highlight the horizontal rule, nav bar and banner at the top of the page. Press Ctrl-C to copy the information. Then go to each of the other pages and Ctrl-V (paste) the information onto each page.
  7. Save all of the files using File -> Save All.
Email Links (You Tube Video | Video)

Another type of link is a link that is directed at a specified email address. This type of link automatically opens the users mail client (Outlook, iMail, etc) and places an address in the To: field.
  1. On the index.html page, place the cursor at the end of the phone number and insert a line break
  2. On the next line type "Contact Club Manager".
  3. Highlight the text and select Insert -> Email Link.
  4. In the email field of the pop-up window, type "manager@stripedumbrella.com." Click OK.
  5. Note that the text turned blue and is underlined, indicating to users that it is a hyperlink.
  6. Save your page.
Date Objects (You Tube Video | Video)

Developers often includes dates on their pages to inform users how current the content is. These dates may include copyright information, the current date, or information about the last time the page was updated. If you are making lots of changes to a page, it would be annoying to additionally have to alter the last updated text. Luckily, there is a web programming language called JavaScript that helps us to automate some of these tasks.
  1. On the index.html page, highlight the last updated date at the bottom of the page.
  2. Go to Insert -> Date.
  3. Select the March 7, 1964 Date format and the AM/PM time format.
  4. Check the box that says "Update Automatically."
  5. Click OK and File->Save. Note the change.
  6. Wait one minute and save the file again. Note the date change.
Previewing/Testing Pages(You Tube Video | Video)

Dreamweaver is a great environment for creating web pages, but does not always represent the page how it will actually look in the browser. For example, links do not work in the editor. So, it is important that we save our work and test it in the browser often.
  1. Make sure all of your files are saved using File->Save All.
  2. Go to File -> Preview In Browser -> Chrome (or Safari).
  3. Test the navigation on all pages and look at the content. If there are any problems, go back in to DW, make the necessary changes, re-save the file, and then re-fresh the browser page.