Web Page Basics
Objectives
Practice
Files

Review

As we proceed through our lessons, each lecture will build upon a site called The Striped Umbrella. As a review of the previous lesson, we will now set up a site for The Striped Umbrella that, once created, we will use each day.
  1. Create a folder structure for The Striped Umbrella. (You Tube Video | Video)
  2. Download, unzip and file the lesson files for The Striped Umbrella (You Tube Video | Video)
  3. Create a site in Dreamweaver for The Striped Umbrella (You Tube Video | Video)
Head Content and SEO (You Tube Video | Video)

When creating a web page, there are some simple things that we can do to help interested people find our page. The process of getting users' queries to find your page is called Search Engine Optimization (SEO). The easiest way to effect this process is to add information in the head of the document that search engines will see. Specifically, we will be adding a Title, Description and Keywords to each page. The title is the Title of the page and provides basic information re: the page content. The page title also appears on the tab in your browser. The keywords are a comma separated list of terms that users may search to find your site. The description provides detailed information about the page, expanding on the title and using the keywords. The key is to use as many of your keywords in the title and description as possible to reinforce their importance in your site.
  1. Open the index.html page of your Striped Umbrella Site
  2. Just above the workspace and below the Menu Bar, notice the text box labeled "Title". Replace the text in that box with the following The Striped Umbrella beach resort and spa, Ft. Eugene, Florida. Then, hit ENTER.
  3. From the menu, choose Insert -> HTML -> Head Tags -> Keywords and type the following: The Striped Umbrella, beach reort, spa, Ft. Eugene, Florida, Gulf of Mexico, fishing, golf, golfing, cruises. Click OK.
  4. From the menu, choose Insert -> HTML -> Head Tags -> Description and type the following: The Striped Umbrella is a full-service resort and spa just steps from the Gulf of Mexico in Ft. Eugene, Florida. Click OK.
Page Properties (You Tube Video | Video)

Page properties allow us to change a variety of design aspects about our page, including background and foreground colors, margins, and font styling. Color in web design are often described using Hexidecimal triplets where the first digit represents the red value, the second the green value and the third the blue value. Each digit can range from 0 - 15, but since 10-15 is really two digits, they are represented by letters A(10), B(11), C(12), D(13), E(14), and F(15). The triplet is typically preceded by a '#'. So, the triplet #000 is black, #FFF is white, #F00 is red and so on. Luckily, Dreamweaver provides us with a color picker as well that automatically places the appropriate hex code in the box.
  1. In the menu bar, select Modify -> Page Properties.
  2. Click on the Background Color Box and select any color you choose. Click APPLY and you will see the background of the page change to that color.
  3. Repeat the process, select a white background. Click APPLY to see the change and the OK to approve the change.
  4. Save your page.
Adding/Formatting Text (You Tube Video | Video)

Our index page came pre-populated with text. At this point we are going to add some text to it and give the text a little bit of formatting to make it stand out. Just like in a word processing program, Dreamweaver lets us alter the appearance of text through fonts, colors, sizes, and styles (italic and bold). Most of the formatting will be done using the HTML Properties Panel at the bottom of the environment. If you do not have a Properties panel, click on Window -> Properties. You can drag the panel to the bottom of the screen and it will 'lock' itself there instead of floating over your workspace.

An important distinction in Dreamweaver is the difference between a paragraph break and a line break. A paragraph break, signaled by hitting ENTER, ends a paragraph, leaves a blank line and creates a new paragraph. A line break, signaled by hitting SHIFT-ENTER, just moves the cursor to a new line within the current paragraph.
  1. Place your cursor at the end of the main text after "You won't want to go home.". Hit ENTER for a paragraph break.
  2. Type the following, placing a line break (SHIFT-ENTER) at the end of each line:
    The Striped Umbrella
    25 Beachside Drive
    Ft. Eugene, Florida 33775
    55-594-9458
  3. Highlight the text, and click on the Italic button in the HTML Properties Panel.
Importing Text (You Tube Video | Video)

As a web developer, it is often left to others to create the content for a page. Graphic Designers create the images and color scheme, animators create any animations that may occur and writers develop the copy that serves as the text on the pages. In each of our lectures, practice assignments, and projects, we will be provided with any necessary text through Word documents. Dreamweaver has a special set of tools for Importing the contents of a Word document. Microsoft Word has some special formatting that is needed in Word, but not in Dreamweaver, so after we import content from a word document, we must instruct DW to clean up that text and remove any unnecessary items. In addition, the developer is the last line of defense before a page gets published, so we should always do a final spell check for our content.
  1. Create a new page called spa.html
  2. Go to File -> Import -> Word Document.
  3. Navigate to the attr folder of your site and select the appropriate document (spa.doc). Click OPEN
  4. Go to Commands -> Clean up Word HTML. Click OK.
  5. Go to Commands -> Check Spelling. Make the appropriate choices with the spell checker. Click OK.