[ Syllabus ][ Lab Assignments ][ Downloadable Resources ][ Back to Home ]
[Summer Session 2000 Watermark] [Computer Lab Assignments]

Exploring[HTML]&[Dreamweaver]

The purpose of this exercise is twofold: first, to introduce students to "simple" HTML document creation; second, to familarize students with the processes involved in "publishing" their page(s) on the World Wide Web [WWW or Web] so others can view them. Before you begin, however, you should read through and understand the University of Hawaii's Interim Policy for Responsible Computing and Network Access or the Student Conduct Code. The University considers the ability to "publish" on ITS web server(s) a "privilege" [not a "right"]. Furthermore, faculty, staff, and students are allowed to create their own personal home pages only so long as they abide by the above policies -- DON'T ABUSE THIS PRIVILEGE!

This week, as an exercise in distributed multimedia, students will perform the following tasks to create their own web presence:

  1. Log-on to the Social Science Mac Lab Computers
  2. Read, understand & follow the directions for Creating Personal Home Pages on Uhunix [essentially, step-1. If you have trouble, then you must do the task(s) manually as instructed]
  3. Familiarize yourself with what HTML is & what HTML isn't
  4. Introduction to Macromedia's Dreamweaver [for HTML Authoring]
  5. CREATE your own Website using Dreamweaver & upload it to your Uhunix account
  6. At your leasure, learn more about Webscaping online
  7. Finally, don't forget to Log-out!

[anamated line]

What[HTML]is

    HTML or Hypertext Markup Language is basically a series of "tags" that are inserted into an otherwise plain text document. HTML tags are a lot like stage directions in a script -- they silently tell the browser what to do, and what props to use. Remember, as a markup language, HTML is not so much concerned with the appearance of a document as it is with the structure of a document.

    In general, HTML tags are almost never case sensitive and are usually containers. What is meant by container is that in most cases there is usually a beginning tag and an ending tag. The HTML command would thus be applied to the text in between the beginning and ending tags. A tag begins with an opening bracket (<) followed by the tag ID, any attributes, then ends with a closing bracket (>). Ending tags are exactly the same except there is a slash (/) between the opening bracket and the tag ID [Oh yes, and you don't include attributes in the closing tag].

    An example of a container command is the heading command:

    <H1>Text between tags</H1>

    There are some "empty" tags, however, that have no enclosed text nor an ending tag. For example, <IMG> indicating image/picture placement, or <HR> which inserts a horizontal rule. In fact, most graphic elements in HTML are handled this way.

    White space -- meaning anything that is not a printable character -- is generally ignored in HTML. Leaving a blank line in your document will not display a blank line in your Web browser's view of the document.

    An HTML Page should contains at least the following tags:

    HTML Structure

    All contents in the page should be located between the <HTML> and </HTML> tag. Inside the HTML tag you should always have a HEAD tag section and a BODY tag section.

    HEAD
    Inside the HEAD tag you supply general information about the document such as the title of the document. This title is displayed in the browsers window title when you view the page. JavaScripts are also usually placed inside the HEAD tag.

    <HEAD>
    <TITLE>    My Home Page!</TITLE>
    </HEAD>

    You should not place any text inside the HEAD section.

    BODY
    Between the opening and closing BODY tags, you enter the contents you would like to display on your HTML page using "plain text" and embedded formatting tags. HTML formatting tags can be divided into two loose categories; those that provide structure to the text of a page, and those that change the style of the text. Into the structure category go headings, paragraphs and lists [e.g., <H1-6>Heading Levels 1-6</H1-6>; Paragraph markers <P>; & <UL> <LI>Unordered List </UL>]. Into the style category go tags for adding emphasis and designating font styles [e.g., <STRONG>bold</STRONG> & <EM>italics</EM>].

What[HTML]Isn't

    With all of its multimedia-enabling capabilities, new page layout features, and the "hot" technologies that give life to HTML documents, the language does have some limitations.

    • HTML is not a word processing tool
    • HTML is not a desktop publishing solution
    • HTML is not a programming language

    Before you can fully appreciate the power [and limitations] of the HTML language and begin creating effective Web documents, you must yield to its one fundamental rule: HTML is designed to structure documents and make their content more accessable over a network for rendering on a variety of display devises, not to format documents for display purposes.

[Dreamweaver Icon][Dreamweaver]

Some Introductory Comments[blank space]

  [Dreamweaver Screen-Shot Image]

    Macromedia's Dreamweaver is a professional Website authoring program with innovative features and comprehensive design capabilities that allow you to create Websites visually, with an "easy-to-use" graphical interface. The good news for HTML "purists" is that the code being generated behind the scenes is consistently clean, concise, and fully editable [if manual HTML coding is your "thing"!]. Likewise, Dreamweaver gives you the ability to test your pages virtually in a number of Web browsers, drop in a variety of multimedia file types at the click of a button, select colors from a "Web-safe" palette, and even FTP files to a remote file server from within the program if you so choose. Some of the more advanced features include support for the latest innovations on the Web including Cascading Style Sheets and Dynamic HTML [which get covered in detail in another course!].

    However, in this class you'll concentrate on the "basics" of Website design using Dreamweaver. To facilitate this, we will spend the next two (2) lab sessions learning how to create HTML pages, format text, insert images and multimedia objects, set links, and work with tables [we'll skip frames, style sheets, and dynamic HTML for now].

    KEEP IN MIND, however, that if you get stuck, Dreamweaver comes with an extensive online Help system, featuring tutorials as well as searchable Help files. Likewise, most of the palettes also feature "ScreenTips" that describe icon functions when you allow the cursor to "linger" over them for a couple of seconds!

[Dreamweaver Icon][Dreamweaver]

Starting with the Basics[blank space]
 

    In today's lab you're going to learn how set up a site, use Dreamweaver's windows and palettes to create a page, add text, do basic text formatting and insert a simple image. You'll also learn how to access the HTML inspector, and how to preview your page in a browser.

    [MacOS Folder Icon] Before launching the program, download [you remember how to use Fetch right?] to your computer the folder called "bookstore" from the "lab_04" subdirectory in the "summer_2000" directory on the "www.soc.hawaii.edu" site. Put it in the "Guest" drive where you can easily find it -- you will be working from "within" this folder to build your Website on your local computer [remember to back-up to your ZIP disk just in case!] and then transfering it to a Webserver.

    [Site Definition Dialog Box] Designating a Local Root Folder

      The first task is to launch Dreamweaver and designate a Local Root folder. With the program open, select Site > New Site... When the Site Definition dialog box opens, make sure you are viewing the "Local Info" category and type "bookstore" into the "Site Name" text box. Next,click on the folder icon button next to the "Local Root Folder:" text box to designate the "bookstore" folder on the "Guest" drive as the Local Root folder for the site you are to build [this will become the "default" folder to which all files for your exercise will be stored]. The remaining category specifications and options accessable from this dialog box can be ignore at this time. Click "OK" to close the dialog box. If a dialog box prompting you to define something or another appears click the "Don't" button and carry-on. Likewise, if a Site Directory window appears, you can close it too [we'll deal with this window later]. What you should be looking at now is the Document window which displays the current document approximately as it will appear in a Web browser.

      [Document Window Explained]

      A blank page typically opens automatically when you launch Dreamweaver. However, you can always load an existing page by selecting File > Open... or create a new blank page by selecting File > New.

    Setting Page Properties

      Looking at a blank Document window can be a bit daunting, "Now what?" probably comes to mind about now! A good idea of where to start is by setting the Page Properties for the page; begin by Control-clicking to open the Page Properties dialog box, or open it by choosing Modify > Page Properties from the menu bar.

      [Page Properties Dialog Box]
      Changes made here affect the entire page.

      Next, type a title in the text box. This is the title that will appear in the browser's Bookmarks or Favorites list [Netscape & Explorer respectively], so it should be descriptive. Let's call this page "Lastname's Bookstore" [of course, replacing "Lastname's" with your lastname!].

      You can also change the background color of the Webpage using this dialog box by clicking on the square next to Background Color. When the color palette appears you can select a color swatch. The best color for this exercise is white, which is also the default. If you wanted to add a background image you would use the Browse button next to Background Image to select a "gif" or "jpg" file to be used as in place of a background color.

      [Close-up View of Text Color Selects]

      Now select the square next to Text Color and choose a dark color for the text. Note that you can choose different colors for Link Color [text that is linked], Visited Links [previously selected by a viewer], and Active Links [the color of the link while it is being selected]. YouÕll learn more about links in the next lesson.

      [Dreamweaver Document Icon] When you have completed the above, click "OK," then save your page by selecting File > Save As... and save your new page as "index.html" -- this will become the "entry page" for the site you are building.

    The Property Inspector

      After you've finished defining the Page Properties [& saving your document!], click on the page and type "Lastname's Bookstore" [again, replace "Lastname's" with your own!]. If the Property Inspector is not already open, select Window > Properties. The Property inspector displays properties for whatever object is selected in your Document window.

      [Property Inspector Window]
      Changes made here affect only the selected text or image.

      Highlight the words you typed, and -- using the menus in the Property Inspector -- change the format and font. Change the Format to "Heading1" and see how the size and style changes. Change the Font Face from default to "Arial." Change the Font Size to "7" and then back to the default. Click on the Align Center icon [in the group on the right side of the top row] to center the text on the page.

      To finish, place the cursor after the headline, hit Return and then type your address [I used the Department of Communication's address]. Highlight the new line, and change the font size to "5." Change the font color by clicking on the gray box below the text size window. Note that color changes made in the Property inspector apply only to the item selected, not the entire page. Leave the Property Inspector window open and visible, but move it out of the way... We'll look at more options later.

    The Object Palette & the Launcher

      [Object Palette: Common Icons] Much of your graphic efforts within Dreamweaver will be via the Object Palette. Select Window > Objects to open the Object Palette if it is not already visible on your desktop. This tool contains buttons for inserting various types of objects, such as images, tables, layers, applets, and other multimedia elements. Holding the cursor over each icon on the palette will open a caption box explaining the function of each button.

      At this point, let's insert a picture between the headline and address. Place the cursor just after the headline and hit Return to open up a space. Click on the top button on the Object Palette to choose an image, and browse to the folder "images" inside the previously defined Local Root folder ["bookstore"]. Click on the jpeg file "books.jpg", and click select then click "OK." The picture should appear just below the headline.

      Now, place the cursor next to the image without selecting it, and click on the Align Right icon in the Property Inspector and it will move to the right side of the page. If you click on the Align Left icon it will move to the left. Select the Align Center icon to move it back to the middle of the page. >

      Click on the picture, and note that the Property Inspector automatically changes to show you the image properties including its dimensions and location. [Note: the Align option here is for aligning a picture next to a block of text, not aligning it on the page. Ignore it for now. We'll cover this in the next lesson.] If you don't like your color combination, change your choices in the Page Properties window or the text Property inspector. Remember to save your changes.

      The Launcher
      [Launcher Tool]

       

      Another important tool is the Launcher, which you can access from Window > Launcher if it is not already visible on your desktop. Launcher has buttons for opening and closing various inspectors and palettes, including the HTML Inspector. The others will be discussed later.

    The HTML Inspector

      Open the HTML Inspector by clicking on the "HTML" button of the Launcher and you see the HTML source code the program has generated for the page you are working on. Source code containing HTML tags lies behind every HTML page, with code elements set off in brackets as in this example, where <H1> is similar to "Heading1" in a word processor.

      <h1 align="center">
      <font face="Arial" color="#9933FF">      Mr. Smiley's Bookstore</font>
      </h1>

      Elements are instructions that tell the browser how to display the page. Note that each set of instructions requires a beginning and ending tag. The align="CENTER" statement is an example of an attribute; it modifies the element to which it was added. All the user actually sees are the words "Mr. Smiley's Bookstore."

      [HTML Inspector Window]
      Changes in the Document Window are automatically reflected here!

      If you are new to HTML, you should spend some time studying the code for the tags you create so you understand them and can edit the code directly when necessary. There are now many good books available to help you learn HTML including the recommended text for this course [also, see the links discussed in the "FYI - Links on Webscaping" section below].

      Dreamweaver allows both the document window and the HTML inspector to be open at the same time so changes can be seen in both views; so, if you highlight text in the document window [to affect a change], it is also highlighted in the HTML inspector [and any change is reflected in the HTML code automatically -- or visa versa!]. Note that you can access the HTML inspector in four different ways: from the Launcher, from the "F-10" hot key, from a button on the bottom of the document window, or from the menu bar [Window > HTML].

    Previewing in a Web Browser

      It's always wise to test your work in a variety of browsers to make sure your Webpages will look good to everyone who sees them. Dreamweaver makes it easy for you to set up preview links to different browsers. ItÕs a preference setting you can access from either the Edit > Preferences menu, or from File > Preview in Browser > Edit Browser List.

      [Preview in Browser Preference Settings]

      First, Choose Edit > Preferences and look over the various Preference topics. You may want to change some of the settings later. Pick Preview in Browser, and click Add if the list is empty.

      Next, type the name of a browser [such as Netscape or Internet Explorer] in the Name text box, then click the Browse button to open the Select Browser dialog box and locate the browser you want to configure.

      Now, double-click on the program file for the browser, and click "Open," then "OK." The browser has now been added to the list in the Preview in Browser options. You can add other browsers in the same way, and designate one of them as your primary browser. [Browser View of Webpage]

      Finally, you can preview your page using Dreamweaver's "F-12" hotkey to instantly open the page in the primary browser. Compare it to the page as it appears in your Document window and the HTML inspector. Dreamweaver can also test your documents in various browsers "virtually" without a visual preview, and give you a report on any problems or deficiencies. You can access this useful feature from File > Check Target Browsers.

    Sharpening Your Skills

    • Look through the various menu options and start getting comfortable with the program. Explore the various palettes and inspectors, and the different ways you can access and use them.

    • Using the skills you've learned in this lab session to create another new page substituting different text and images [or make a copy of the page you just created], and experiment with the color and alignment settings in the Page Properties and Property inspector Windows.

    • With the new page open, open and close the HTML inspector using the "F-10" key and track how the changes made in the document window are reflected in the HTML code. Make changes in the HTML code and see what happens to the document window display.

    • If time permits, explore Dreamweaver's tutorial and Help section that come with the program.

[Hand Icon] Just One More Thing . . .

    After you've completed the above tasks, you will need to use Fetch to UPLOAD your document and all graphics to your public_html directory in your own Uhunix account. Thus, you will need to pay attention to the following particular points:

    1. Open up the Fetch program.

    2. Choose New Connection from the File menu.

    3. Input the following information into the appropriate boxes and click OK.

    4. If you have done everything correctly, you should see public_html in the top of the window. IMPORTANT: if you already have a personal website, create a new subdirectory [name it "com337" if you wish] and upload your web assignment to that subdirectory to avoid accidentally overwriting any important stuff you may already have in your public_html directory.

    5. To upload your file, click on Put File, find your Website's "index.html" [or whatever your document's name is!] document and click on Open.

    6. Make sure that the filename is correct and Text is selected next to format, click OK.

      NOTE: If you are uploading graphics [e.g., files with gif or jpg extensions] or anything besides a text file for that matter, be sure to select Raw Data next to format.

    7. Congratulations! You have just "published" your own web page. To see if it works open up Netscape and type in the following address (URL), using your login name in place of username [the "/com337" is only necessary if you created a seperate subdirectory to protect the integrity of an existing Website or you wished to keep all course Web page assignments in one place]:

        http://www2.hawaii.edu/~username/com337/index.html

    8. Be sure to email the address of your Web page to the Instructor when you are "pau hana" -- especially those of you who use accounts from other servers or ISPs!

[WebMonkey Icon] F.Y.I. -- Links on Webscaping

    Anticipating that only a few students are HTML literate, I have made available for download the following text in pdf format [588 K]. As a primer on "basic" HTML, this document should allow students to gear up quickly and hopefully with a minimum of anxiety.

    • Ogden, Michael R. (1998). Basic Webscaping 2.0: A "Bare Bones" Guide to Writing HTML Documents for the World Wide Web. Honolulu, HI: UHM, Department of Communication.

    Likewise, below are a few other sites of general interest to everyone which might be useful in you quest to build the ulitimate web page!

    For those of you who are already quite familiar with HTML, I suggest you visit the Project Cool website [developed by the authors of our recommended text!] for hints and tips on making really groovy websites!

  [ Syllabus ][ Lab Assignments ][ Downloadable Resources ][ Back to Home ]


 
Copyright © 1999-2000

 
By: M. R. Ogden -- ogden@hawaii.edu   (Rev. 02 June 2000)