Basics Getting Ready First Page Tutorial Finished First Page Second Page Tutorial

Finished Second Page

Creating the first page (index.html)

 

OPENING DREAMWEAVER - THE SITE MANAGER!

    1. Open Dreamweaver. Choose Site > New Site...
    2. In the 'Site Name' window give your site a unique name (i.e., Dusti's Awesome BurpQuest). Click on the blue folder icon to the far right of the 'Local Root Folder' window. Navigate to your burpquest folder. Don't open the folder. Click once on your folder, and select Choose, then OK.
    3. Every time you open Dreamweaver on this computer, open this site by going to Site > Open Site > and then choose your site from the list.

SAVING, NAMING AND TITLING DOCUMENTS

    1. Open your first page by going to File > New. Now save it immediately by going to file > save as.
    2. Navigate to your burpquest folder.
    3. In the name window, type index.html in lower case. Press Save. [NOTE: THE FIRST PAGE OF YOUR WEBQUEST MUST BE NAMED index.html.]
    4. In the title box on the toolbar, select the text Untitled Document and type Burp WebQuest. These titles are critical because they are displayed on the title bar of a browser, and are the key identifying link labels used by search engines and bookmarks/favorites.
    5. Press Command (PC: Control) + S to save.

TYPING AND FORMATTING TEXT

    1. Click on the top left corner of the page and type Welcome to my BurpQuest.
    2. Highlight the text and then format it by using the properties tool palette. If you don't see this tool palette, go to Window > Properties. Change Default Font to the Vedana, Arial, ... font family. Click the arrow button to the right of "Size" and select 7 from the drop down list. Click on the color box right next to the Size button and select a red color. Click on B to bold it and the center align button to align the title in the center.
    3. Place the cursor to the right of BurpQuest and hit Return/Enter twice. Type For thousands of years, health professionals have long puzzled over what causes someone to burp. Finally the mystery has been solved. You may never want to burp again after you uncover the clues to this gross and life threatening problem.
    4. Highlight the text and select Default Font, size 5, make it black, select italics and left justify it.
    5. Return/Enter three times.

ADDING HORIZONTAL RULES

    1. Now a horizontal rule will be added to be used as a spacer.
    2. Select Insert > Horizontal Rule on menu bar at the top of the screen.
    3. The Properties Tool Palette is context sensitive. It just changed options to allow for the formatting of the Horizontal Rule because that is what is selected. Click on one of the words above this bar and notice how the Properties Tool Palette changes to offer text formatting options. Now select the Horizontal Rule. In the Properties Palette, change the W (width) to 640 and make sure it says pixels next to it. Change the Height to 15, and change the align window to Left. Click on the webpage.
    4. Make another horizontal rule the same size. You can copy and paste the horizontal rule. The fastest way to do this is to hold the option (PC: control) key, then click on the horizontal rule and drag it up slowly until you see the cursor above the selected bar. Release the mouse button. This should copy the horizontal rule and paste a copy of it where you placed the cursor.
    5. Create a navigation bar between the horizontal rules by typing the main sections of the BurpQuest web site. Place the cursor between the horizontal rules. If there is no space between the horizontal rules, click at the end of the top rule and then Return/Enter. Now type the following words and brackets: [Roles] [Task] [Process] [Evaluation] [Resources] [Teacher Tips]. Highlight this text and choose the Verdana, Arial family, change the size to None, bold, and left justified.
    6. Dreamweaver only allows one space between items. To add more spaces, hold down the option key (PC: Control + Shift keys) while pressing the space bar. Use this to create two more spaces between each of the navigational items. First, place the cursor between Introduction and Task. Then press the option + space bar to add spaces. Continue doing this between each of the words in the navigational bar.
    7. Press Command (PC: Control) + S to save.

TYPING AND FORMATING A FOOTER (legal status and creation information).

    1. Place a copyright and creation footer at the bottom of this page. Place the cursor in the bottom left corner of the screen. Press enter a few times if you want this information farther down the page.
    2. Make sure it is left aligned.
    3. Type All rights reserved. Copyright "Year" by "Your Name." Hold Shift and press Return/Enter.
    4. Type Comments or Questions? Please email (then hit the space bar once).
    5. Go to Insert > E-Mail Link.
    6. Type your name and email address and click OK.
    7. Highlight the text and change the size to None which is the same as the default Size 3. Take the Bold off.
    8. Press Command (PC: Control) + S to save.

INSERT A TABLE AND AN IMAGE

    1. Click just above the "All Rights...".
    2. Go to Insert > Table and change the number of Rows to 1, Columns to 2, Width 750 pixels, and Border 0. Click OK.
    3. Click in the left column of the table and go to Insert > Image. Locate and double click on your picture in burpquest/images to insert it in the left column.
    4. Select the image and resize it by dragging the bottom right corner while holding down the shift key. This forces proportional resizing. Be careful, as resizing can distort an image and/or significantly change its resolution.
    5. Highlight the "copyright and comments" text below the table and drag and drop it in the right column of the table. Change the horizontal alignment (Horz) to left and the vertical (Vert) to bottom.
    6. Reposition the column divider as desired. Move the column divider by placing your cursor directly over it and dragging it after it turns into a two headed arrow.

CHANGE THE TEXT, BACKGROUND AND LINK COLORS

    1. Go to Modify > Page Properties.
    2. Click in the small color box next to Background. Select a light green color. Write down the color number that appears next to the color. I choose #CCFFCC. Select Apply.
    3. Click in the small color box next to Text and select a dark purple color. Select Apply. Continue selecting colors until you feel you have reached a good thematic color combination for the BurpQuest. Click OK. Notice the Red title did not change. That is because we selected it and specifically changed it in the Properties Palette.
    4. Change the link colors by returning to Modify > Page Properties. Click in the color box next to Links and select a blue color. Click in the color box next to Visited Links and select a green color. Click in the color box next to Active Links and select a light blue color. An active link is a link that you are clicking on. When you click on the link, it will turn light blue. Click OK

ADDING A FLASH TEXT BUTTON

    1. Place the cursor at the end of the second horizontal rule. Press Return/Enter twice.
    2. Make sure your cursor is left aligned.
    3. Go to Insert > Interactive Images > Flash Button.
    4. Select the Blip Arrow style. Choose Apply, then OK.
    5. Hold the shift key down while you select the bottom right corner and stretch the button so that it is 3 to 4 times bigger.
    6. Double click on the button to open the Flash Button dialog box again. In the Button Text window type Begin. Change the font size to 16. In the link window type begin.html. Next to Bg Color type CCFFCC. Select Apply, then OK.
    7. Press Command (PC: Control) + S to save.

VIEW SOURCE CODE

    1. Select the Code view window in the far left corner of the Dreamweaver window to observe the code for the index page. Sometimes the only way to fix a problem on a webpage is to roll up your sleeves and fix it in the code view. Many students and designer prefer to design in this view.
    2. Choose the third button to return to the design view.

VIEW IT ON A WEB BROWSER

    1. Choose F12 on your keyboard or the globe icon and a preview option. This creates a temporary file of the index page and displays it as it would look when placed on the world wide web.
    2. Quit out of the browser (Netscape or Internet Explorer) by holding down the Command key and pressing Q. Click on any Dreamweaver page to return to Dreamweaver.