Basic Web Design

Overview:

In this lab you will be creating a basic page that contains both formatted text and images. We have provided information below on two technologies for building web pages: Google Page Creator and Weebly. Your task during this lab is to experiment with each technology and and to produce something with each.

Objectives:
  1. Be able to compare and contrast different web development applications in order to understand which tools might be most appropriate in particular contexts, for particular tasks, and for particular types of users
  2. Create basic web pages that contain formatted text and images
  3. Demonstrate control over placement and format of basic content elements
  4. Integrate different web development technologies into a coherent project
The More You Know:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Before we start exploring let’s talk terminology for a minute. There are various types of content that you can add to a web page and some of the differences may not be immediately obvious. For this lab it will be important to recognize the distinction between paragraph text and heading text. The text you are reading right now is paragraph text, while the title above it that reads, “The More You Know” is formatted as heading text, and they are classified that way in the HTML code behind the scenes. Examples of all 6 heading types are listed to the right. If your web page has a heading that serves to break up a body of text and start a new topic, it is considered a best practice to format that text as “heading” text in your web page editor (rather than increasing the size of paragraph text and/or making it bold). Some tools (like Weebly below) will do this automatically–others won’t. This will make more sense when we start exploring.

Begin by experimenting with Google Sites

Google Sites editing interface

Sites is a tool in the Google suite that allows you to quickly create web sites and their component web pages. In each Google page you have “elements” such as headers, columns and a main content area that can be edited in WYSIWYG style. WYSIWYG, or “What You See Is What You Get”, is a style of content creation that hides the HTML (or other) code so you can edit your content in a more user-friendly style.

Note that Google Sites, like many feature-rich sites, is in “beta” development which means it is the first version of the software to be released to the public and is primarily for bug testing and gathering feedback from users. This is something to get used to! Web technologies are advancing so rapidly and these websites are adding features so frequently that they are in an almost perpetual state of “beta”.


  1. You will need to have a Google account before you can access Google Sites. If you don’t have one you’ll need to create an account here.
  2. If you are completely new to Google Sites then you will want to watch this video overview of the app.
  3. Enter Google Sites and create a new page. Remember: if you get stuck at any point then visit the Google Sites help center.
  4. Experiment with the editing interface and change or add a block of text,
    • Add some text to your page and try altering the format (font style, etc.)
    • Insert an image, either from your computer or from a location on the web,
    • Change your Layout to “two-column”,
    • Choose a “theme” other than the default (hint: look under “More Actions > Manage Site”)

Be sure to complete your Google page before moving on to Weebly.

Next take a look at Weebly

Weebly’s editing interface

Weebly is a web site & page editor similar to GPC, however it is a bit more polished and allows you to add more media types without needing to edit or paste in HTML. To get started:


  1. Watch this short overview of Weebly
  2. Go to Weebly and register for an account. You will need to enter a unique username, as well as a password and your email address.
  3. Create a new site by clicking the “Create a Site” button
  4. To get started, simply follow the on-screen pop-up help
  5. After following the on-screen help, experiment with adding various content types listed across the top of the screen
  6. Try changing the properties of a block of text
  7. Add an image and experiment with resizing and positioning it
  8. Alter the “Design” of your site and find one that looks good to you
  9. Try adding a two-column element to your page
  10. Finally, publish your site and see what you think

Take a minute to consider the differences so far between GPC and Weebly.

  • What do you see as the strengths of each program so far?
  • How do they differ in the way you add and edit content?
  • Do you have a preference for one over the other? Why?

    Your Performance Tasks:

    As we have seen, some of the important skills required for creating basic web pages include:

    • Creating and saving pages
    • Creating headings
    • Creating paragraph text
    • Adding and positioning images
    • Linking to internal and external web pages
    • Embedding images, slideshows, and video
    • Publishing your pages, or making them “live”

    Therefore your task for this lab is to create and publish two web pages with each of the applications above (for a total of four pages). Each page can contain as much content as you like, but must have at least the following elements:

    • Heading text (can be any heading type, from 1 to 6)
    • Two “paragraphs”
    • Two images–one positioned on the right side of a paragraph, and on positioned on the left side of another paragraph
    • One link to an external website
    • At least one embedded picture, one embedded slide show, and 1 embedded video

    In addition, each page must link to the other three. You will only need to turn in the URL for one of the pages–since you’re linking them all together we will be able to see the other two.