Integrating Technology in the Second Language Classroom

Step 1

Before you start, you need to read the information contained in several of the links on the  Beginning WWW page. Just get a feel for what they are talking about in a few of these sites. If you have not done this, STOP! Do not pass go, do not collect $200, you are in BIG trouble. Go back and do your homework by reading those pages; then return here.

Step 2

Before you begin construction, you also need to have a general idea of what you want your page to look like, what it is intended to do, how someone will get around inside it, and, consequently, how you will organize it.  Below are some basic things to consider when planning your first web page/site:

• What's the purpose of the page? Are you providing a service, a product, information, entertainment?
• Who is your intended audience? What do they know? Why are they looking at your site? Knowing your readers helps you shape the information content and pick a consistent voice to address them.
• How do you intend to structure the information? For multiple page projects or sites, it is common to see at least two levels of hierarchy: a top level index and second-level pages. Put clear, quickly grasped content toward the top of a page so that the reader immediately knows what's going on. This way, even the casual reader can quickly grasp the sort of information you're presenting, and that may be just the hook to keep the person interested.  For your first page, this will not be such an issue, but the principle still holds.

Step 3

Time to roll up our sleeves. Open Macromedia Dreamweaver. Go to File/New/Basic Page (HTML). From the variety of options available, you can see that Dreamweaver is a very powerful program, and you'll probably never need more than 5% of what it can do so we'll only look at things we really need for now. Voilà, the bare bones of your first WWW page! You are now in Dreamweaver's user-friendly and HTML editor. 

Across the top, you see the Menu Bar (File, Edit, View, Insert, Modify, Text, Commands, Site, Window, Help). As in your favorite word processor, File is mostly for opening and saving your work. Edit has a useful Undo command and commands for copy and paste, find and replace. Under View, you will see two very different views of a page: Code and Design are both very useful. Insert is important for inserting Images, Tables, and various other HTML objects. Modify is mostly for editing various objects, including those images and tables. Text has several text formatting tools as well as spell checking.

In addition to the pull-down menus across the top, which function just like regular computer menus, the Toolbar provides icon shortcuts to the more useful composition commands for your page. You can find out more about items in the toolbar by looking at the pop-up text that appears when you move your mouse over each icon. There are several different groups of icons. The one you see and also the one you will most often use is the Common Toolbar with the icons:

Hyperlink: Inserts a link to a another file or page. This can be a relative link to a file name within the same web site or an absolute link (full http://... address) to a page on a different server.

Email Link: Sets up a link to your email address so people can easily send you email. This may not be a good idea because of SPAM.

Named Anchor: Allows you to jump not only to a page, but to a particular spot on that page.

Table: Create a table. Tables are a good way to control the placement of items on your page.

Images: Insert various kinds of images (a drop-down menu lets you choose among these).

Media: inserts various kinds of media such as Flash, applets, ActiveX controls, so this is not important for now.

Date: Should be self-explanatory.

Comment: These are notes to yourself that won't appear to others, it helps you remember how something is set up on your page when you come back to edit it in five years.

Templates: A great time saver if you often make pages following a certain format. You can really use any page you make as a template for a similar new page.

Tag chooser: Allows you to insert HTML tags in the code view. But you'll probably prefer to use the design view.

 Document Window

Each web page that you open in Dreamweaver will have its own Document Window. The windows are tabbed, so you can see along the top which pages are open, and you can jump around among them by clicking on those tabs. In the example above, there are three windows open, first-www.html, ms-syl.html, and Untitled-1 (the one we are looking at). The icons in the document window toolbar allow us to view the document in Code View, Design View, or split between both. Most of the time, the design view will be all that you need. Splitting the view between code and design view can be a good way to learn how the codes work together to make you web page appear the way it does. For instance, here is a design view image and associated code:

= <img src="first-www-04.jpg" width="28" height="28" align="absbottom">

Dreamweaver does a good job of giving you access to the properties of the objects that you put on your web page without having to edit the codes. In fact, if you edit something in the code view, you might introduce errors that could prevent your page from displaying properly. It is MUCH safer to edit an object's properties in the properties window.

Moving across the web page toolbar options:

  Title: Always give your web page a title. The title appears in the blue bar at the top of your browser window. Don't confuse the page title with the file name. They are two completely different things.

  Errors: A great tool that checks your page for HTML errors and shows you where they are.

  File management: Don't worry about this for now.

Preview/Debug in Browser: Opens your page in your web browser so you can see the results.

Refresh: Refreshes the design view after you change something in the code view. Clicking anywhere in the design view area automatically refreshes, so you don't really need this button.

View Options: Adjust various aspects of your view of the page as an aid in editing.

Use Dreamweaver Help and the sites below for additional information.

• Begin construction of your web page.  This page is about YOU.  Convey some basic information about yourself to the reader:  e.g., name, hometown, major, interests, email address. (If you prefer, you may use some other topic that you know as much about, but keep it simple ;-)

• You will need a photo of yourself (or you may use some other image if you prefer).

• If you want to place your picture on the page and have a description or introduction beside it, insert a Table to place these items on the page.  Click here for an example.  Notice the email address is an active link.  This is easily accomplished by highlighting your email address, choosing "insert hyperlink" from one of the toolbars or pull-down menus, and typing mailto:your-email-address-here (example: mailto:santaclause@cortland.edu) in the dialog box where it asks for the link address.

• If you want to see the "man behind the curtain" aka the HTML source code, which are all the tags that make your page look the way you want it to look, click on Code or Split.  When you become more acquainted with these source codes and wish to edit codes on your page. This will allow you to edit the tags and, indeed, be the "man behind the curtain" yourself!  **:-)

Generally, you are better off using the Properties Window for any object to make changes. Just click on an object in design view to see and edit its properties.


Notice here that for any text you can change the font, the size, the color, the bold or italic style, centering, indentation, list properties and even the hyperlink.

• The Barebones Guide to HTML  has an extensive listing of basic HTML tags, which you may need to work with eventually.

• The Visibone Webmaster's Color Lab has everything you always wanted to know but were afraid to ask about various colors in HTML.
  
• The Interior Design Elements: All About Color is another excellent color reference site.

For more about Dreamweaver:

• DMX 2004 From Scratch from It's a Web Thang
• Site Owners Introduction to Dreamweaver MX
• About.com - Introduction to Dreamweaver
• Mount Holyoke College Introduction to Dreamweaver