pixel.gif (42 bytes)pixel.gif (42 bytes)Home | Instructor | Listserve | Web Discussion Board | Toolkit

PC Webpage Design: home | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | HTML Resources
pixel.gif (42 bytes)
Embellishing Your Simple Webpage
pixel.gif (42 bytes)


We finished the previous activity with a "plain vanilla" webpage. In this activity, we are going to embellish the webpage, adding some graphics that will make it more visually appealing. Let’s get started…

  1. Open the DiDa HTML Editor. (See the specific instructions for your operating system if you need a review of this process.)
  2. When the new blank html screen appears, click on the File menu.
  3. Click on Open. (The Open dialog box will appear.)
  4. Double-Click on the a:\ folder that appears at the top in the Directories or Folders box. (A list of all the directories or folders located on the a: drive will now appear.)
  5. Double-click on the root folder (The test.htm file you created in Activity 1 should appear in the File Name list on the left side of the screen.)
  6. Click on test.htm and click on OK. (The test.htm HTML document should now be in the window.)

We are going to use some of the editing features of the DiDa HTML Editor to change the appearance of the simple page we ended with last time. Hint: You will want to remember these procedures as they can be used to modify future webpages you will be creating.
  1. Click on the Image Button in the toolbar.
  2. Click on the Text and Backgrounds option.
  3. A Body Code Generator dialog box will appear.
  4. On the right side of this dialog box you will note 16 color palettes that will allow you to change the text, background and link colors the web browser will use to display your webpage.
  5. Clicking any of the 16 default colors will change the sample box on the left side of the dialog box, showing you what your webpage will look like using the colors you have selected.
  6. If you need more options, click on the color palette button below the default colors. This will bring up 48 more color options.
  7. If you need even more options, you can use the define custom colors option at the bottom of this dialog box.
  8. When you are satisfied with your choices, click on the OK button.
  9. Note that DiDa added a new set of <BODY COLOR=, BGCOLOR=, LINK=> tags to the top of the webpage. (The numbers and letters are hexadecimal codes that the web browser will use to create the colors that will appear on the screen.)
  10. You can go back and change these colors along the way if you decide you don’t like the way your webpage appears. Just click on the Image button and select Text and Backgrounds and repeat your selection process.
  11. Click on the Preview Screen tab on the lower left hand side to see what your modified page looks like in the full screen mode.
  12. Click on the HTML Document tab to return to the source code.
  13. Position the cursor below the <BODY BGCOLOR... line of tags (you may need to hit Enter to create a blank line.)
  14. Position the cursor on the blank line.
  15. Click on the Image button.
  16. Click on Picture. A dialog box will appear. (Note: The root folder on the a: drive should appear by default since this is where you saved the test.htm file. If it doesn’t, navigate to the root folder on the a: drive).
  17. Select the hr4.gif file from the list on the left side of the dialog box.



  18. Click on OK and a <IMG SRC="hr4.gif"> tag should appear on the webpage. This will cause the browser to display a graphic file that I placed in the root folder to be displayed on your webpage.
  19. Click on the Preview Screen tab to see if it is there.
  20. If it isn’t, go through the above steps again.
  21. Position the cursor between the first <H2> tag and the words This is my first webpage.
  22. Click on the Image button.
  23. Click on the Picture option.
  24. This time, select the new_star.gif file from the root folder on the a: drive and click on OK.
  25. A <IMG SRC="new_star.gif"> set of tags should appear on the webpage. (this will cause the browser to display another graphic image on the webpage.
  26. Click on the Preview Screen tab to see what it looks like. If the image does not appear, go through the above steps again.
  27. Position the cursor after the second </H2> tag near the end of the webpage and hit the Enter key to insert a blank line.
  28. Position the cursor in this blank line and perform steps 15 to 19 from the list above to add another hr4.gif image to the end of the webpage.
  29. Save the changes you made (File/Save).
  30. Your modified webpage should now look something like this:



  31. Click on the Preview Screen tab. Your webpage should appear looking like this:

Note: If you notice a mistake, click on the HTML Document tab. This will take you back to the HTML source code where you can edit the document just as you would in a word processing program. The ability to immediately preview the changes you are making to the source code is one of the best features of the DiDa HTML Editor. You will be using this feature a great deal in the activities that follow.

Checking the Webpage
  1. Log on to the Internet.
  2. Open your web browser.
  3. Click on the File menu.
  4. Click on Open File
  5. Click on the a: drive under Drives.
  6. Double-click on the a:\ folder under Directories/Folders.
  7. Double-Click on the root folder.
  8. Click on test.htm (it will turn blue and appear in the File Name box)
  9. Click on OK.
  10. Your webpage should load with the new background color, the horizontal rule .gif image and the NEW image in place. (If it doesn’t, you may need to click on the Reload button to refresh the browser image… sometimes the browser loads the file from the cache memory instead of the file you asked for…)
  11. Examine the webpage, noting the changes that have been made. The webpage should now like this:



  12. Test the hypertext links to be sure that they are correctly configured and take you to the desired website. When you are satisfied that everything works properly, close the browser and log off the Internet. (File/Exit)

You have now had a crash course in creating and modifying a simple webpage. When you are on-line, you can see what the HTML code behind any webpage looks like by clicking on the View menu and selecting Source. (Click OK when you are finished looking at the source code.) This is a good way to learn the HTML secrets of the pro’s. Countless books and magazine articles have been written about how to create webpages. You might want to check some of these out if you are interested in learning more about creating webpages. The next activity in this series will add some more graphic images that you will capture on-line.

 

 pixel.gif (42 bytes)

website maintained by Bob Jost | bjost@josts.net | last modified June 21, 2005
Copyright © 1997-1999 by Bob Jost All rights reserved