Try this:

Before we can actually create links we need to have additional files. Remember that at the start of this tutorial we discussed creating a page that we are happy with before duplicating it. We are now going to create the pages we need.

With index.html open,

  1. Choose: File >> Save As
    1. Type: timetable.html (remember that it should be lowercase and there should be no spaces)
  2. Choose: File >> Save As
    1. Type: contact.html
  3. Choose: File >> Save As
    1. Type: interests.html
  4. Choose: File >> Save As
    1. Type: concepts.html

If you define your site correctly, you should see the files you just created on the right side of your screen.

For organizational purposes,

  1. Close all of your files (not Dreamweaver)
  2. Open your files in this order
    1. index.html
    2. timetable.html
    3. contact.html
    4. interests.html
    5. concepts.html

If your files are maximized, you should see the files open as tabs a the bottom of your screen.

Our site is only 5 pages in length, this makes it easy to see and change all pages at the same time.

Try This:

We are now at a point where you should be able to complete some tasks on your own. If you need assistance, refer back to the previous lessons.

On each of your pages, make the following changes:

Page Tag Change
timetable.html title My Timetable
  h1 My Timetable
  h2 Semester 1
  p This is my semester one timetable. My favourite subject was {fill in the blank} because {fill in the black}
  add h2 Semester 2
  add p I hope to be successful in all of my classes this semester so that I don't have to take any courses in summer school.
  add h2 Ranking
  add ol {rank your top 3 favourite subjects}
     
contact.html title My Contact Information
  h1 My Contact Information
  h2 {remove it}
  p The following is my contact information. I have used fake names and numbers because I am so incredibly popular that I don't want everyone seeing my personal information.
     
interests.html title My Interests
  h1 My Interests
  h2 {interest 1, your choice}
  p {2 sentences about your first choice}
  h2 {interest 2, your choice}
  p {2 sentences about your second choice}
     
concepts.html title HTML and CSS
  h1 Web Design Concepts
  p (after list) This page is going to illustrate concepts that I have learned to be able to create these pages. It is separated in to 2 sections.
  h2 HTML
  p HTML (_________________)is code that is responsible for the ___________ of a web site. Here are some examples of what I have learned.
  h2 CSS
  p CSS (____________________) is a separate file that controls the ___________ of a website. Here are some examples of what I have learned.
  h2 Resources
  ol

1. W3Schools 2. HTML Dog 3. Entheos

Links

If a web page does not contain any links it would be a pretty boring web page. Links allow you to move to different pages within your site (internal) and to other pages on the world wide web (external).

The general HTML structure of a link is as follows:

Internal

External

 

Remember that every tag has an opening and closing tag. In this case the opening tag is <a> and closing is </a>. The browser needs to know where to go when the link is clicked so we add in an attribute href=”website.html” to the opening tag. The hypertext (link) element, Home, will be what is displayed in your browser. If you were to roll over it the address would display in the status bar at the bottom of your browser.

Notice the key difference between internal and external links is that http:// is required for external links.

E-mail

Notice the change is mailto: to allow an e-mail application to be activated and an e-mail to be sent to the recipient.

It is important to understand the general structure of a link, but at the same time Dreamweaver makes it very easy to link internal files together.

Try this:

  1. Click on the index.html tab.
  2. Highlight "All About Me" in the unordered list at the top of the page.
  3. In the property inspector at the bottom of the screen, locate the Link text field.
  4. Click and hold the Point to File () icon, and drag it over the index.html file in the site panel.
  5. An arrow should be visible as you link the files together.
  6. Repeat the steps to link the other 4 items in the list.
  7. Save changes and refresh the page in Internet Explorer.

We have created only created links on the first page. To ensure smooth navigation we must now link the remaining files. You can do this in 1 of 2 ways.

  1. Follow the above steps on each of the remaining pages.

OR

  1. In the Code view, on the index.html tab, locate the <ul></ul> tags
  2. Highlight and copy the code.
  3. Paste it into the remaining pages to replace the existing lists.
  4. Choose File >> Save All
  5. Press F12 to display the current page in Internet Explorer.
  6. Click links to ensure that you can get to all pages from all pages.

NEXT LESSON