Integrating Technology in the Second Language Classroom

Jean LeLoup & Bob Ponterio 
SUNY Cortland 
© 2008

HTML Introduction: Making your first WWW page

Adobe Dreamweaver is an excellent web site editor (still my favorite) that, unfortunately is quite expensive for beginners. You can get versions for the Mac or Windows environments. The following information is based on the older Macromedia version.

Step 1

Before you start, you need to read the information contained in a few of the basic 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 examining some of 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:

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.

Step 4

You might want to refer frequently to the following sites as you construct your web page:

For more about Dreamweaver:

Return to Syllabus