Creating a Simple Webpage With Netscape Composer (4.7x)

Duty Area 4 – Exploring the Technological Aspects of Web-Based Electronic Commerce

Task 8 – Identify the tools and steps necessary for designing a web site.

 

Content	Methods/Notes
Introduction Explain why this is important to learn Check for prior knowledge  State the PO Check for Understanding	Motivate and Explain Basic skill necessary for course completion Ask – Who has experience building websites? With which programs? (Note these students as  potential team leaders) Using a computer with a 4.x version of Netscape Composer, create a simple webpage.The webpage should include at least one image, a horizontal line, a background color, an internal link, an external link, and text.
Body   Show a simple webpage using in-focus projector       1.Formatting Text a) Type a line of text. b) Use the Formatting Toolbar to format the text as  desired. 2.Adding an Image –  a) Place cursor where you want the image to appear.b) Click Insert on the Menu Bar and select Image. c) Click on Choose File and direct Composer to the  image file (NOTE:the image should reside on  the drive/disk with the website) 3.Adding a Horizontal Line a) Place cursor where you want the horizontal line  to appear. b) Click Insert on the Menu Bar and select Horizontal Line. 4.Changing Background Color a) Choose Format on the Menu Bar and select Page  Colors and Properties. b) Select the Colors and Background Tab and click  on the box to the left ofBackground. c) Choose a color and click Apply to view change. d) Click Close. 5.Adding an Internal Link a) Put the cursor at the very top of the page. b) Select Insert from the Menu Bar and choose  Target.Give this Target the name Top. c) Starting just under the horizontal line, hit Enter enough times to scroll the line off the top of the  page. d) Type the words back to top. e) Using the left mouse button, highlight back to  top. f) Choose Insert from the Menu Bar and select Link. g) Select the name of the target that was just created  by left clicking on Top (found in the lower  white box)  h) Click on the Save button on the tool bar.  Remember the page should reside on the same  disk as the image. i) Click on the Preview button on the tool bar. j) Test the internal link by scrolling to the bottom of  the page and left click on the link called Back to  Top.Cursor should return to the top of the page. 6.Adding an External Link a) Choose a spot in the middle of the page and type  www.geocities.com/hhsmick. Using the left  mouse button, highlight the text. b) Choose Insert from the Menu Bar and select Link c) In the Link to a page box type in the full web address to which you want to link. d) Select Apply and Close. e) Click on Save and Preview to test the external   link.	Point out each element Explain each requirement. Ask students to explain the PO and restate the  requirements.     Have students logon to computers and open a blank  page in Composer. Pass out handout with step-by-step directions  Have individual students read each step aloud. Perform each step on the overhead. Stop to allow students to perform each step before moving on.   Allow time for students to experiment with formatting text.         Check to make sure every one has inserted an   image.         Ask if everyone has inserted a horizontal line. Move around the room and see that each student has  changed the background color. Ask:Can anyone see his or her horizontal line? Explain that the preview button allows user to view  the page using the browser (to be seen as if it has  been uploaded). Have students close Navigator window by clicking  on the X in the upper right-hand corner. Remind students to include http:// in the web  address Ask: Does everyone’s external link work?
Check for comprehension
ACTIVITY     Evaluation	Students create their own simple website and save it  to disk. Student sites should contain each of the required  elements according to evaluation form.Sites can  be more elaborate if possible in allotted time.
Conclusion – Link to next class.	Explain that in the next class we will discuss basic  design principles:alignment; proximity;  repetition; contrast.
Notes	Equipment - Ideally, class should be held in a computer laboratory equipped with an in-focus projector and a networked computer for each student.Each computer should have Netscape Communicator Version 4.7x installed. If necessary, two students could share one computer. Instructional Aids –  Handouts for each student. 3 ½” disk for each student, if possible.

Ashley Phillips
Hickory High School
Chesapeake Virginia