Learning Resources

Home »  » Courses » Technology Education & Skilled Trades » Communications Technology 2104/3104 » Unit 02 » Set 00 ILO 03 » Go to Work

Lesson

Develop Web Version of Brochure

Converting the print brochure is an application of the knowledge and skills you learned in Section 5 of this unit.  You will be using the same content for the web version as for the print version.

You will need to consider the  following

  • The sequencing of information in the panels from the brochure
  • Layout issues such as whether to make each panel a separate web page, have one big page for the entire brochure, put logical parts of the content into each web page, or create an entirely different form of presentation of the information.  It is important that the web version be visually related to the print version.  In other words, if you have already seen one one, you should be able to immediately recognize the other.

As a brief review, you will be

  • Applying visual design to the development of the web
  • Creating a stylesheet for the web
  • Building a structure of folders and files to hold the pages and images
  • Creating navigational elements such as buttons
  • Creating an index.html (perhaps default.htm on some machines) file as the opening page for the web.  Typically the opening page has the same info as the front panel of the brochure.  It also has navigation elements to get to succeeding parts of the web
  • Importing the graphics into the web
  • Importing the text content, placing it and applying HTML tags

Assigned activities

You have developed the print brochure.  It is time to convert it into a web version

You will need to save this file to your computer (right-click on the link and select Save Target As)

Please complete the following

  • Plan the number of web pages required to hold the brochure content
  • Plan the visual look of the content.  You may need to edit the stylesheet to get it.  You can leave that task until later
  • Plan the navigation through the pages
  • Design and make any navigation buttons you need.  It may be easiest to do these in Corel Draw and export as gifs or jpgs.  If you are more inclined to use bitmap programs, this is a good task for Photo Paint or Painter as well.  You will likely need to add text to the buttons.  Here are good sources of buttons
  • Using the appropriate graphics program
    • Make sure each of your images (pictures and illustrations) are in one of the formats gif, jpg, or png, depending on the type of image.
  • Using FrontPage
    • Create a web called brochure
    • Create an index.html file (index.htm, or default.htm on some computers)
    • Import the stylesheet (you can edit it if you wish)
    • Add the following line to the <head> section of the index.html file

      <link rel="StyleSheet" href="projstyle.css" type="text/css">
    • Import the images into the images folder
    • Make all the pages for your web.  Include the stylesheet link information in the <head> section of each page
    • Create the navigation structure in each page

For the following steps you will need to have FrontPage and the desktop publishing program open at the same time

  • Open the brochure in the desktop publishing program.  Copy the text that will go on the opening web page
  • Switch to FrontPage and open the opening page (index)
    • Put the cursor where you want the text to go on the page
    • Click on Edit / Paste Special in the menu and select Normal Paragraphs
    • The text will flow in the page
    • Apply HTML tags to the text from Frontpage's drop down list
  • Continue to copy text from the brochure and paste into the appropriate pages in the web
  • When you have placed and tagged all the text, place the images in the appropriate places
  • Test your web's navigation to make sure it all works

Next you need to get your web to the teacher for assessment.  You can do it several ways.  The easiest way is

  • Make a course portfolio entry, make a zip of the web and import the zip file into your course portfolio
  • Publish your course portfolio to the course portfolio web