Pin Me

Design Your Own Webquest: Tips & Sample Files

written by: Joy Campbell•edited by: Christian Cawley•updated: 5/17/2011

WebQuests are for teachers who want to learn how to turn a course topic into a classroom activity. WebQuests are based on creating higher-level thinking tasks. Example files and a template are included.

  • slide 1 of 18

    What is a WebQuest?

    A WebQuest is simply a task for students to complete using the internet. It involves students using analysis, judgment, creativity or problem-solving skills. What it does not involved is a step-by-step procedure, a research project or having students navigating page-to-page to complete a task.

    An example WebQuest, for teachers to include in a health class, is a task create by Rebecca Fyffe “ A Weekend of Healthy Meals" where students create a healthy menu for the weekend. In order to do this they must first learn what foods are healthy.

    An example for activities in a technology classroom is for students to learn about a subject like web design and then create a web page based on the skills they learned.

    When creating a WebQuests there are five pages to includes; an Introduction, Process, Task, Evaluation, Credits and a Teacher’s page. The teacher’s page is created to share with other teachers. It lets them know what the WebQuest is about.

  • slide 2 of 18


    There are lots of WebQuest templates out that are based on tables, but we will be creating one based on the use of Divs. Using Divs and CSS is better since it allows for the separation of design and content and better access for screen readers. Tables can be unyielding and should be used for tabular information such as rubrics. We have already created a CSS and Div layout in the Syllabus lesson and we will build from there.

    We will build an art history task that will introduce students to the history of Japanese anime and the art history term “style." We will embed short YouTube videos clips and include a writing assignment for students to reinforce and demonstrate the knowledge they have learned.

  • slide 3 of 18

    Getting Started With Your Creation

    Open the syllabus html file in Dreamweaver.

    Change the title section to “Art History WebQuest."

    Change the title of the syllabus. 

  • slide 4 of 18


    Move one row of navigation to the header by selecting and pressing “ctrl + X" on the keyboard. Then paste it underneath the title by pressing “ctrl + P." Delete the second row.

    Delete the second row of links. 

  • slide 5 of 18

    Change Navigation Menu

    Change the navigation menu to: “Introduction" “Process" “Task" “Evaluation" “Credits" and “Teacher." Change the font to white. Save copies of the file as Process, Task, Evaluation, Credits and Teacher. You should now have six html files.

    A WebQuest has six basic pages. 

  • slide 6 of 18

    Link Navigation

    Now we will link our index file’s navigation. Highlight the “Introduction" and link it to the “Index" file. In Dreamweaver you can use the “point to the file" to link.

    Link the navigation to web pages. 

  • slide 7 of 18

    Navigation Code

    Repeat the process for the rest on the navigation links. Your code should look like this:

    <div id="header">

    <h1 align="center"> Art History WebQuest</h1>


    <li> <a href="../webQuest/sample_WebQuest_File/index.html" class="style2" >Introduction</a> </li >

    <li> <a href="../webQuest/sample_WebQuest_File/process.html" class="style2">Process</a> </li >

    <li><a href="../webQuest/sample_WebQuest_File/task.html" class="style2">Task</a></li >

    <li><a href="../webQuest/sample_WebQuest_File/evaluation.html" class="style2">Evaluation</a> </li >

    <li><a href="../webQuest/sample_WebQuest_File/credits.html" class="style2">Credits </a></li >

    <li><a href="../webQuest/sample_WebQuest_File/teacher.html" class="style2">Teacher</a> </li >



  • slide 8 of 18

    Add Introduction Content

    Add an Introduction:

    <p><b><a href="#Description" name="Description">Introduction</a></b> </p> <p align="justify" class="article">Welcome to Art History on Japanese Anime. </p> <p align="justify" class="article">This WebQuest explores the different artistic styles anime has gone through since 1945. You will become familiar with the art history term “style" as you learn about Japanese Anime. </p> <p>The task includes a choice of three writing assignments that will help students reinforce and demonstrate their knowledge about the style and history of Japanese anime. </p>

    Then delete everything underneath. Your file should look like this.

    Introduction Page 

  • slide 9 of 18

    Create a Template

    Create a template by choosing Insert > Template Object > Make Template. Save as "webquest".

    Create editable sections. Highlight the navigation, and then choose Insert> Template Objects > Editable Region. When it asks for a name, enter "navigation".

    Highlight the body, and then choose Insert> Template Objects > Editable Region. When it asks for a name, enter "content".

  • slide 10 of 18

    Apply the Template to Other Pages

    Now apply this template to the pages we already have. Close the template window, and open your "index.html" page. You can do this by opening the Site Files window and double clicking on the file. The Site Files window is located on the left, or by Window > File.

    With the original Web page open, choose Modify > Templates > Apply Template to Page.

    Choose the WebQuest template and assign the Document Body to the Nowhere region and the Document Head to Nowhere region. This will prevent duplications. (Delete the parts of the document that have duplicated, if any.) Repeat the process to the other pages: Process, Task, Evaluation, Credits and Teacher.

    Assign to Nowhere. 

  • slide 11 of 18
    Learn how to create your own WebQuest. Activity includes code and a WebQuest template.
  • slide 12 of 18

    Task Page

    Open the Task page and create another row of navigation by copying and pasting the navigation under the mainContent Div. Add the following links: Disney Style; Osamu Tezuka; Golden Age; 1990-2000. See the code and image below.


    <li><a href="#Disney" >Disney Style</a>

    </li ><li><a href="#Osamu" >Osamu Tezuka </a>

    </li ><li><a href="#Golden" >Golden Age </a> </li >

    <li><a href="#1990" >1990-2000</a> </li >

    <li><a href="#Assignment" >Assignment</a> </li >


    Create a second row of navigation for the task page. 

  • slide 13 of 18


    Download the code for the Art History content. Copy and paste into the task page. Notice how the navigation links to specific sections on the web page by using the name next to “#" sign in the code.

    Add # to link to a specific to area. 

    Sample of # in webpage 

  • slide 14 of 18

    Embed YouTube Videos

    The YouTube videos are embedded so the students will not have to leave the webpage. To embed a YouTube video click on the “Share" link located beneath the video. Then click on “Embed" and choose whether you want to “include related videos" along with the size video you want.

    If you receive a message asking to “Allow blocked content" click to allow, this has to do with allowing the YouTube videos to display.

    Click the share button under the YouTube video. Copy the code to embed the videos. Paste the code in web page. 

  • slide 15 of 18

    Teacher's Page

    Add the information for the teachers and credits.


    <p><b><a href="#Description" name="Description">Standards</a></b> </p>

    <p>This webquest meets Florida Standards for visual arts:</p>


    <p>The student creates and communicates a range of subject matter, symbols, and ideas using knowledge of structures and functions of visual arts. (VA.B.1.2)</p>

    <p>The student understands the visual arts in relation to history and culture. (VA.C.1.2)</p>

    <p>The student assesses, evaluates, and responds to the

    characteristics of works of art. (VA.D.1.2)</p>

    <p>The student makes connections between the visual arts,

    other disciplines, and the real world. (VA.E.1.2) </blockquote>


  • slide 16 of 18

    Credit's Page

    Add credits to the credit page.

    <p><b><a href="#Description" name="Description">Credits</a></b> </p>

    <p>Based in southern Florida, Joy Campbell has been professionally writing since 2009. She is the author &quot;Journal of Ideas: Volume One.&quot; A small book that illustrates the major ideas of Adam Smith and Karl Marx in perspective. Campbell holds a Masters of Education with a concentration in Instructional Technology from the University of South Florida and a BA in Art History.</p>

    Permission is granted for others to use and modify this WebQuest for educational and non-commercial purposes as long as the original authorship is credited.



  • slide 17 of 18

    WebQuest Files and Evaluation

    Download the WebQuest files here. We will be making a rubric to use for the evaluation in the next lesson.

  • slide 18 of 18



    Images created by Joy Campbell

    "A Weekend of Healthy Meals" Fyffe, Rebecca,

Creating an Online Course

Creating an Online Course article series covers the characteristics of a good e-learning site that is based on proven techniques, Lesson include creating a Syllabus, WebQuest and Rubrics. Future articles will cover using usability techniques in Blackboard. Images and an example file are included.
  1. How to Create a Syllabus in Dreamweaver
  2. Design Your Own Webquest: Tips & Sample Files
  3. How to Create a Rubric