Class 1

Topics:

• Introductions
• The Role of the Internet in Effective Communications - Lecture
• What makes an Effective Site? - Lecture
• Principles of Good Web Design I - Lecture
• Html Introduction - Lecture
• Editing HTML in Dreamweaver (Chapter 14 - Dreamweaver 4)
• Home Work Exercise 1

Introductions - course goals & objectives, instructor & student introduction etc.

• Introduce the EC106 Web Site http://www.npconsultants.com/ec106
  • Explain how it will assist during the course.
• Instructor Kelvin's profile
• Review course purpose, marking system, expectations.
• Syllabus
• Introduce online resources / PDF files
• Computer Basics

The Role of the Internet in Effective Communications:- Lecture

• How many of you understand the concept of the Internet?
• In what ways have you found the Internet useful?
• Media:
  • Linear Media: having a defined beginning and a linear progression.
    • EG: Books, movies, audio tapes, video
  • Hypermedia: Interactive - it is about choices.
    • EG: CD choose the songs / tape plays them only in the order recorded.
  • Hyperlinks: When applied to text.... you get hyperlinks:
    • EG: Clicking the text transports you to a new location with in the page or to a whole different page.
• What is the Internet?
  • World Wide Web:
    • When pages are linked, with hyperlinks, to different servers, all over the world, you get a spider like system
• Language or code used is called HTML (Hyper Text Markup Language)
• How can the Internet be used?
  • Application in personal, fundraising, business, research, sales, advertising and the list goes on and on.
• Why is the Internet different from any other form of communication?
• World wide audience.
• Ageless and genderless.
• Willing audience: Audience come to your site.
  • It is estimated there are, in the US, 83.3 million internet users.
  • Canada has 8.8 million users.
  • by 2002 it is estimated the US will have 165 million users
• Truth or False?
  • Security - can we trust the Internet?

What Makes an Effective Site?- Class / Small Groups Exersise

In Groups of 3 or more, come up with 5 points that would explain ideas to make an effective web site:

• One that conveys the message.
• Keeps the users interest.
• Logical (in order), common sense approach.
• Is easy to navigate.
• Developed so that it can be view easily by everyone.

Web Site Basic Viewing Standards: - As related to this course

• The following criteria will be followed for anything developed in or for this class:
  • Developed in Dreamweaver 4.0.
  • To be viewed at 800 x 600 pixels.
  • Quick download time on a 28.8kbs Modem.
  • To be viewed on
    1. Internet Explorer
    2. Netscape
• Bandwidth
• the process and speed at which data travels to the user's computer from the server.

• The Five Basic Principles of Good Web Design
• Give your site Containing Structure:
  • A framework, borders, sometimes "nothing but space" to give a framework to the site.
  • Gives users a safe feeling.
  • Keeps user oriented.
  • Easier to navigate.
• Make the site a Unified Whole:
  • A whole, rather than a collection of unrelated pages (visually).
  • Much like a well designed home, moving you from room to room.
  • Offer consistent look with logos, background colour, page layout or simply font type and style.
• Make things Visable:
  • Not having to scoll to find navigation.
  • Topic of interests are paramount.
  • Use words or images that speak to the user.
  • Important info should be at the top of the page.
• Make the site Easy to Navigate:
  • You know the site, a user has never been in the environment.
  • Have more than one option to navigate.
  • Left or right screen navigation that is independant of other information.
  • Text navigation (bottom or in title bar).
  • With buttons, text or image should make navigation simple to understand.
  • Include Alt text for images.
• Build in Redundancy:
  • Don't bury your message, repeat it.
  • Repeat major points of interest.
  • Use key words or images to re-enforce your message.
  • Have more than one option to navigate the site.

HTML Introduction - Lecture

Text Editor Exercise (using Notepad):

• Open Notepad
• In a new document window, type the following text in the following format.
• "HTML"
  (enter, new line)
  "Here we are creating an HTML document."
  (enter, new line)
  "Where should we start (4 extra spaces) ?"
• Save document as html1.html on your A drive.
• Try to view with Internet Explorer (browser).
• When you a view the document, note how the format is not followed as typed.
  • HTML coding in needed to tell the browser to add spaces where needed.
• Now, select the following text with HTML Code below, right mouse click on the selected area choose copy, then go to Notepad. Choose, Edit > Paste to place the HTML code into a new document in Notepad:
  <center><b><font size="4" color="#FF0000">HTML</font><br>Here we are creating an HTML document.<br>Where should we start</b><pre><b> ?</b></pre><b><br>.</b></center>
• You may need to add spaces between the <pre> tag.
• Now, view the page in your browser, as you did before.
• Note how the text has structure.

View Source:

• right mouse click on the web page.
• Select View Source from the popup menu

• Tag: Html code format, consist of:

• Element:
  • Contained with in the "<" and ">".
  • Command the browser to do something. E.G: <Font> sets the browser to create text.
• Attributes:
  • Describe the element's properties.
  • E.G: <font color="......."> color="...." suggest the font should have a color.
  • The words that follow the Element.
• Value:
  • Follows the attribute, within quotation marks.
  • Further clarifying the Attribute. E.G: <font color="red">This font is red</Font>.

Editing HTML in Dreamweaver (Chapter 14 - Dreamweaver 4)

Note:

• Download Dreamweaver 4 Manual. .pdf or zipped file (582 pages) from http://www.npconsultants.com/ec106/downloads.htm

Site for HTML tutorial: http://www.davesite.com/webstation/html/

It is important to do first 8 chapters if you wish to gain the basic knowledge of the HTML Language.

Basics:

• Caps:
  • Always use small case letters while designing the tags in Html.
  • When naming/saving an html document always use small case letters
• Html Extentions:
  • When naming or saving your html documents use one of the following extentions:
    • .html - usually only used for the index page.
    • .htm - a shorter form used for all your pages accept, the index page.
• Index Page:
  • When you are saving the first page of a site or the home page for a site, you need to save is as - index.htm.
  • Any Browser will look for index.html when opening a new site, in all cases.

Structure of an HTML Document:

• What are the basic tags?
  • <html></html>
    • Identified, to the browser, the start of an HTML document.
  • <head></head>
    • Tag/code that effects the documents action and use.
    • It contains the title and any programming script.
    • Sub-tags:
      1. <meta> Provides information for Search Engines.
      2. <script> Where Java or VB Scripts are placed.
      3. <style> Contains information for cascading style sheets
      4. <link> contains information to link to another object/script on the Internet.
      5. <title> Where you can name the document.
  • <title></title>
    • Tag/code to identify the document.
    • Text between the tags will appear in the top title bar of the browser window.
    • This is not the title that appears on the page.
  • <body></body>
    • Tag/code which contains the visible content in a browser.
    • All your text, images, and all the content must be between these tags.
    • HTML Tags:
      • <h1>text</h1>
        • marks text as a heading.
      • <p>paragraph text</p>
        • marks a paragraph.
      • <br>
        • forces a line break, not adding additional space like the paragraph tag.
      • <img src="imagefilename.extention">
        • for placing an image
        • attributes: width, height, border, align and valign.
      • Text formating tags
        • <b></b> - bold face
        • <i></i> - italic face.
    • Inserting Comments: Object Palette > Invisible > Insert Comment
      • <!--Type you comment here-->
      • Comment tags are used by developers/designers to share information about the document that will not be visible to the viewer in a browser.
      • Appear only in the Code view.
• In what order are these tags required in every HTML document?
  • <html>
    <head>
    <title>enter title of document</title>
    </head>
    <body>enter the content of the site<body>
    </html>
    

In-Class Exercises:
Answer these questions:

1. What does Html Stand for?
2. What is an Element?
3. What do the Attributes do for an Element?
4. What characters must the value start with and end with?
5. What are the required tags of a basic HTML document?
6. What content goes between the <title> tags?
7. What content goes between the <body> tag?
8. What content goes between the <head> tag?

Review on your own time:
Explore Dave's Html Site chapters 1 to 8

Open Dreamweaver 4.0

1. New Site:
   • First create the folder on Student Drive (locally) called "class 1"
   • Create a folders inside "class 1" called "images".
   • In Dreamweaver 4 select Window > Site Files
   • Select Site > New Site.
   • The Site Definition of Unnamed Site 1 dialog box appears.
   • Fill in the Site Name text box with 'class 1'
   • Fill in the Local Root Folder by browse (select the yellow file to the right) to find the folder you've created on your A drive. (select the class 1 folder)
   • Select OK.
   • DW4 will create a cache for the files.
   • Note that DW4 has create a new site for you called class 1 where you can see a folder called images. DW4 is referring to the A drive for this information.
2. Opening and saving a New Document:
   • File > New Window
   • Type in the body of the page: "EC106 Class 1. This is my first web page."
   • To save, File > Save.
   • The Save As dialog box appears.
   • In the Save In section, select the drive/folder which you have already defined for class 1.
   • Give the document a proper name (index.html).
   • Note: Site > Site Files. You can now see the html file you have just saved.
   • Double click on index.html to reopen the page.
3. Page Properties:
• Introduction of Page Properties dialog box in DW4.
• Edit the Title of the new document: Modify > Page Properties, fill in the Title box / call it 'Class 1'.
4. Using the Object Palette:
   • Inserting Elements.
   • Editing an Element's Attributes.
   • Removing an Element.
5. Introduction of the Properties Inspector
6. Code View / Split Cod e & Design View / Design View

• Answer these questions:
1. How do you create the title of an HTML doc?
2. What are the basic tag in an HTML doc?
3. If the Properties Inspector is missing, how do you find it?
4. How do you insert objects into the Document Window?
5. How do you change the background colour, the text colour and the link colours in an HTML doc?
6. If the Objects Palette is not on screen, how do you access it?
7. How can you change the screen viewing size right in Dreamweaver?

Home Work Exercise 1:

• Find two (2) web sites of your choice.
• Review them, keeping in mind the comments and topics covered in Class 1.
• Answer the following questions for each of the sites:
1. Does the site effectively communicate the product/service that it is presenting?
2. What are the three (3) main strengths and/or weaknesses of the web site?
3. What type of techniques where used in the site? (Flash, animated GIF's, cascading menus, dynamically generated pages etc.Note: If you don't know "what" was used, not a problem, just describe how it looks, your feeling about the design... go with instinct, gut feeling.)
• Submit your answers via email to instructor by beginning of Class 2