Creating the WebQuest Navigation Bar Using a Table

TEAM 2-7b – Developing the WebQuest Web Pages

Step-by-Step Procedures

Monmouth University, Information Management Support, 10/05/11 2

Table of Contents

1. Setting Up/Editing the WebQuest Website _______________________ 3

2. Creating the WebQuest Navigation Bar Using a Table ______________ 5

3. Re-sizing and Inserting a Graphic Image into a WebQuest Webpage ___ 7

4. Aligning Text with a Graphic Image on a Webpage _______________ 11

5. Zipping the WebQuest Website to Upload into the eCampus Dropbox _ 14 & Posting the WebQuest URL into an eCampus Discussion Topic

6. Zipping the WebQuest Website to Upload into Foliotek ____________ 19

7. Accessing Your Student M:\ Drive from Off Campus _______________ 20


Editing Your WebQuest Pages in KompoZer You have six individual WebQuest web pages (e.g., Index (Home), Introduction, Task, Process, Evaluation, Conclusion, and Teacher Page) ready for you to apply basic formatting and content. The WebQuest web pages will be edited using Kompozer. If you’d like to work on your Webquest from off campus, Kompozer can be downloaded for free at http://kompozer.net/

Step-By-Step Procedures Editing the Index (Home) Page

1. Locate and open KompoZer. You should see the screen below. By default, KompoZer opens a new document. To close the document, click the red X to the right of the screen.

2. Click the Open icon on the toolbar and browse to the index.html page in your public_html folder

on zorak. Click Open.

http://kompozer.net/


1. You are now working on your index.html page. To set the colors of your webpage background, text

and links, click anywhere on the page, then go up to Format > Page Colors and Background. Select the “Use Custom Colors” option and select your colors.

2. Add text on your web page for your WebQuest heading.


Creating the WebQuest Navigation Bar Using a Table

1. Select the Table icon at the top of the screen.

2. In the next window, go to the Precisely tab, set up a 1x7 table, and click OK.

3. In each cell, type the name of your WebQuest pages in the order you’d like them to be viewed.

Use the Tab key to move from cell to cell. You can drag the vertical grey bars above the table to adjust the width of the different cells.


Creating the Hyperlinks in the Navigation Bar

1. Select the text in the first cell of your table, “Home”. Click the Link icon at the top of the screen. Click the Choose File icon to the right of the box for link location. Locate the index.html file from the Webquest folder and click Open. Select the box that says “URL is relative to page location”. Click OK.

2. Do this for the other 6 items in your navigation bar. 3. Save your page. 4. Select the entire table and Copy. 5. Open each of your additional pages, one at a time, and paste your navigation table into the same

locations. Save the files. Creating Hyperlinks to external sites

1. Select the text that you want to link. Click the Link icon at the top of the screen. In the box for link location, type in the complete web address (ex. http://www.monmouth.edu) and click OK. Note: When creating links to external sites, DO NOT check the box for “URL in relative to page location”


Re-sizing and Inserting a Graphic Image into a WebQuest Webpage

Step-By-Step Procedures Images (clipart, photographs) for your WebQuest can be obtained through outside sites that offer free clipart and photographs for educational use. One such site is Pics4Learning (http://www.pics4learning.com/).

1. Go the website (e.g., Pics4Learning) and select a graphic image that relates to the content on your

WebQuest webpage. Double-click on the image and then right-click on the image and select the Save Image As (Save Target As, Save Picture As) option as shown in the example below.

2. In the Save Image dialog box, locate the images folder under the webquest folder and re-name the

image, as needed to identify the image, and then click the Save button as shown in the example below.

http://www.pics4learning.com/

http://www.pics4learning.com/


Note: Select the appropriate image Type. For example, for photographs, select the JPEG Image (.jpg extension); for clipart, select the GIF Image (.gif extension).

3. If the image is too large for optimal placement on the webpage (or too small for viewing), you can re-

size the picture before inserting the image into the WebQuest page (skip to Step 8 if you don’t need to resize the picture). A program that is available on all Monmouth University computers and can be used to re-size graphic images is Paint. To access the Paint program, minimize SharePoint Designer on the taskbar, and from your desktop, locate and open the Paint program, as shown in the example below.

All Programs -> Accessories -> Paint)


4. Locate and open the graphic image in the Paint program. Select File -> Open on the Paint menu bar, search for the image in the images folder under “webquest” folder where you stored it, and click the Open button.

5. Re-size the image. Select Image -> Stretch/Skew from the Paint menu bar.


6. In the Stretch area of the dialog box, decrease the percentage both horizontally and vertically (if the image is too large) or increase the percentage both horizontally and vertically (if the image is too small; however increasing the image size substantially may distort the overall picture) and click OK.

Partial picture at 100% size

7. Save the re-sized picture in the images folder under the webquest folder (File -> Save to replace the original picture or File -> Save As if you are keeping the original picture and give the re-sized picture a new name).

8. In Kompozer, select the Image icon then browse to the file in your images folder you wish to include on your page.

9. Click Open. 10. You will be prompted to include alternate text (which describes the image for people using screen-

readers – e.g., penguins) and click OK.

Be sure to “cite” the source underneath the image, including the date retrieved, name of site, and the URL address. Example: Retrieved on [date] from [name of site], [http://].

11. Save the webpage to save the new image on the page.


Aligning Text with a Graphic Image on a Webpage

Aligning text with a graphic image will create an aesthetically pleasing layout on your WebQuest webpage. There are two approaches that you can use to align the text with the graphic image: 1) adjusting the graphic image’s Picture Properties, or 2) creating a Table that will contain both the graphic image and the text.

Note: Adjusting the Picture Properties (approach 1) is the easiest to do; however, learning how to use Tables (approach 2) will give you the most flexibility and control over the page layout.

Step-By-Step Procedures Aligning Text with a Graphic Image by Adjusting Picture Properties

1. Open Kompozer and the WebQuest webpage in which you would like to align the text with a graphic image.

2. Insert the graphic image on the WebQuest webpage (be sure you have already saved the graphic

image in the images folder and that you have re-sized the image, if needed, prior to inserting the image on the page). Below the graphic image, type the text (e.g., paragraph), as shown in the example below.

3. To begin aligning the text with the graphic, right-click your mouse on the image and select Image Properties from the drop-down menu.

4. On the Image Properties window, with the Appearance tab selected, select the option you wish to

use from the Align Text to Image dropdown menu and then click the OK button as shown in the example below.


Note: There are other options that you may want to experiment with to adjust the layout. Aligning Text with a Graphic Image by Using a Table

1. Open Kompozer and the WebQuest webpage in which you would like to align the text with a graphic image.

2. Click the Table icon at the top of the page. 3. On the Insert Table window, select 1 for Rows and 2 for Columns in the Size section and

change the Borders Size to 0 (no border), which will create an invisible (or borderless) table effect, and then click the OK button as shown in the example below.

Note: There are many other table options available that you may want to experiment with to adjust the layout.

4. A table “grid” now displays on your page (you can see the table grid;; however, students won’t see

the grid because you removed the border option.

5. Cut and Paste the “graphic image” into one of the table cells;; cut and paste the “text” into the other table cell. Adjust the width of the cells, if needed, by hovering between the two cells until


your cursor turns into 2 arrows. You can then drag to the left or right to change the width, as shown in the example below.

6. Save the webpage and then click the Preview tab at the bottom of the page to see how it will

look on the web. Edit, if needed, and re-save the page.


Zipping the WebQuest Website to Upload into the eCampus Dropbox & Posting the WebQuest URL into an eCampus Discussion

Follow the procedures below for “zipping” the contents of the webquest folder and uploading the zipped file into a Dropbox folder in eCampus.

Before you can zip and upload your WebQuest website into the eCampus Dropbox, your instructor will first need to create a Dropbox folder for students. Please check with your instructor as to whether he/she wants you to upload your zipped WebQuest into the Dropbox, and whether the Dropbox folder has been created.

The zipping procedure requires the use of compression software. A compression program is installed on all computers in Monmouth University computer labs.

This section also includes procedures for posting the WebQuest URL into an eCampus Discussion Topic so that your instructor and classmates can view your WebQuest.

Step-By-Step Procedures Zipping the WebQuest Website to Upload into the eCampus Dropbox 1. Using Windows Explorer, navigate to your webquest folder on the "M" drive on the Zorak server

under the “published” public_html folder and open it to display all of the web pages (e.g., .htm files) and saved graphic images (e.g., .jpg, .gif), as well as any subfolders that were created.

Important! Make sure that the webquest folder includes the index.htm file (Title page), which will allow the WebQuest to function as a website.


2. Select/highlight all files under your webquest folder (.htm files) including the images folder

(and related folders) by either clicking and dragging over all of them with the mouse, or by selecting the first file/folder, holding down the "shift" key, and clicking the last file/folder (this should select/highlight all the files).

Notice the images folder is selected and will include all images to be zipped. If the graphic images are omitted, the WebQuest pages will display without the images

3. Right-click your mouse on the group of selected files and select the compression program from the drop-down menu (e.g., Add to IZArc or 7-zip).

Note: Computers at Monmouth University include a “compression” program to make a “zipped” file;; however, the compression programs may vary. Be aware that your computer at home may not have a compression program installed on it. Monmouth University computers may display the following compression programs from the drop-down menu: IZArc or 7-zip. You may need to select an “Add to archive” option or you may be able to click on the program and it will automatically create the zip file for you.


4. If you selected “Add to Archive,” be sure to browse to save the zipped file in your “webquest”

folder and select ZIP as the archive format, as needed, and then click the Add button.

5. The zipped file will now display inside/under the webquest folder, along with the other WebQuest files, images, etc., as shown in the example below.

xxwebquest.zip OR

Note: Rename the new zipped file with your initials (xxwebquest) by right-clicking your mouse and selecting the rename option, as needed. Also, store the zipped webquest in the webquest folder, if it is not already there.


6. Access the eCampus course, and upload the zipped file into the WebQuest Dropbox folder.

Posting the WebQuest URL into an eCampus Discussion Topic An easy way for both the instructor and students to view your WebQuest is to post the WebQuest URL link on Zorak in an eCampus Discussion Board Topic. The instructor and students will be able to view each other’s WebQuests and leave comments and feedback.

Before you post your WebQuest URL web address into a eCampus Discussion topic, your instructor will first need to create a Discussion Topic for students. Please check with your instructor as to whether he/she wants you to post the WebQuest URL into an eCampus Discussion, and whether the Discussion Topic has been created.

1. In the WebQuest Discussion Topic in eCampus, click the Compose button.

2. Click the Insert Quicklink icon and type the URL following the correct format.


3. Select “Url” for the Category field, type your WebQuest url in the Link Details field, type your WebQuest Title in the Link Caption field, and choose the “New Window” option for “Open In”

4. Click the Insert button

URL path and format: http://zorak.monmouth.edu/~[studentID]/[folder]/[file].htm Example: http://zorak.monmouth.edu/~s1234567/webquest/index.htm IMPORTANT! If your WebQuest is saved under a different folder name other than “webquest,” be sure to use the correct folder name that you have designated in the URL, for example, http://zorak.monmouth.edu/~s1234567/webquest2/

5. Click the Post button to add your message to the Discussion topic.


School of Education - WebQuest Project and Foliotek: Students who took their first education course in Fall 05 or later are required to upload Core Assessments into their Foliotek accounts. You can tell what your Core Assessments are by opening your Foliotek account, clicking on Required Assessments in the left margin, and reading the list of assessments. The School of Ed MAT Elementary program, for example, includes ED575’s WebQuest and Content Literacy Theme Project as Core Assessments. Note: if you are in more than one School of Ed program, each one will be listed on your Foliotek screen. Click on the Required Assessments for each program to see all items that need to be uploaded to Foliotek. This is how to upload your Webquest to Foliotek:

Navigate to your webquest folder on the "M" drive Open the folder that contains all the files of the webquest project (if this is done successfully, you

should see a listing of all your .htm files and saved images, as well as any subfolders that were created.)

Make sure that there is an index.htm file (Title page), which will allow the WebQuest to function as a website.

You are going to “zip” the contents of this folder. (Zipped files are also called “compressed” or “archives”.)

Select all of the files in your webquest folder by either clicking and dragging over them all with the mouse, or by selecting the first file/folder, holding down the "shift" key and clicking the last file in the directory (this should select all the files, meaning they are all highlighted)

Next, right click on the grouping of selected files and choose the "sent to - compressed (zipped) folder" option from the popup menu

Follow the instructions to zip the file contents – your original webquest folder will remain unchanged and a new zipped folder (with an icon that looks like a vice) will appear

Rename this new zipped folder with your initials and the word webquest xxwebquest.zip <- It will look something like this Save it to a location on your computer WHERE YOU CAN FIND IT (very important) Once the file is saved, login to Foliotek and click on the "Files" at the top of the screen Click on "Add File" and choose the third option "Upload new zipped website" Browse to where the file is stored and upload it to Foliotek.

You will ALSO upload the 2 forms that accompany this project: Learner form and Candidate form. If these are hand-written, scan them and then upload them. If they are saved electronically as Word documents, upload them individually as you do for Drop Box.

Email [email protected] with your name, student id # for information on how to open a Foliotek account.

Contact Foliotek (888-365-4639) if need assistance with the account you already have.

Check with your instructor if you have questions about what to upload to your Foliotek account.

https://monmouth.desire2learn.com/d2l/tools/dropbox/viewFiles/viewDropBoxFile.asp?ou=19801&fi=134046&db=93572&ui=17679&u=16136

mailto:[email protected]


Accessing Your Student M:\ Drive from Off Campus

To access your student M:\ Drive on the Zorak server from home so you can work on your WebQuest project, you will need to have KompoZer installed on your computer and also an Internet browser (e.g., Internet Explorer) installed on your computer.

If you have a different HTML editor installed on your computer other than SharePoint Designer, be aware that the step-by-step procedures outlined in this document are for the SharePoint Designer HTML editor. If you find it difficult following the procedures using a different HTML editor, another option is to work on your WebQuest project on campus in one of the Computer Labs, where SharePoint Designer is installed on the computers. Or, you can transfer WebQuest files to-and-from Zorak to the local drive on your home computer using a flash drive or CD, and then transfer new or revised web pages back to Zorak using the flash drive or CD when you return to campus.

Step-By-Step Procedures

1. Open the Windows Explorer on your computer.

2. Type the URL address: ftp://zorak.hawkdom2.monmouth.edu and a login prompt will appear,

as shown below. Note: Be sure to begin the URL address with “ftp” not “http”.

3. At the login prompt, enter your Hawkmail username and password:

a. In the Username field enter: hawkdom2\s0123456 (your student ID)

b. In the Password field enter: your Hawkmail password Note: If you are not sure of your password, please call the MU password activation line at 732-923-4600.

ftp://zorak.hawkdom2.monmouth.edu/


4. All folders and files that you have stored on your Student M:\ drive on Zorak displays, as shown in the example below.

5. In the “ftp” window, locate your webquest folder (Zorak -> public_html - webquest).

6. Open a second Windows Explorer window. With the FTP (Zorak drive) and Windows Explorer (local hard drive) windows open, drag your webquest folder (from the FTP/zorak side) into a folder on your computer. Your webquest folder (with your WebQuest web pages and images folder) should copy over onto your computer’s hard drive.

Drag with your

mouse

Local Computer/Hard Drive FTP/M:\Drive on Zorak


Note: When you are finished copying the webquest folder over to your hard drive (local drive), keep both of these windows open (minimized) on your taskbar (bottom).

7. Open KompoZer on your computer.

8. Create new web pages in your WebQuest and/or revise existing pages in your WebQuest.

Also remember to save and store any new images under the images folder, which was copied over into your webquest folder. Save all pages in the webquest folder on your computer’s local drive.

9. When you have completed working in KompoZer, re-open/maximize the FTP window (zorak) and the Windows Explorer window (hard drive).

Note: If you accidentally closed these windows, go back and repeat steps 1-6 to re-open them (ignore any instructions for creating new folders because you have already done this).

10. With the FTP and Windows Explorer windows opened side-by-side, drag the webquest folder from the Windows Explorer side (your computer’s hard drive) over to the FTP side (MU zorak drive). You will be prompted as to whether you want to replace the files on the Zorak with the files on your computer (Windows Explorer); answer yes at the prompt. The Zorak WebQuest files at Monmouth University should now be updated with the files you created/revised at home, including any images in the Images folder.

Note: Be sure to verify/confirm that all files in the WebQuest folder transferred over to the Zorak server, including the images folder under the webquest folder.

Drag with your

mouse

Local Computer/Hard Drive FTP/M:\Drive on Zorak

Documents

Creating the WebQuest Navigation Bar Using a Table