Memorandum

To:           My Trusted Employee

CC:          Staff

From:     Allen Greenthumb – Owner of Valley Nursery

Date:      Fall 2000

Re:          Our Company Web Site

Thank you for volunteering

I was glad to hear that you volunteered to build the web site for the Nursery.   You have been a great employee in sales, and I have often heard discussion of your in-depth computer knowledge.  Along with this memo I have provided the information you requested to complete the project. 

Here is what I have attached to the memo:

 

1. An outline of the pages I would like and a brief description.
2. A storyboard for the site.
3. A floppy disk with our company logo and pictures for product examples (this is in a folder on your desktop).
4. An instruction booklet for the program we decided to use (Net Objects)

 

Please get started on the site right away and jump into the program using the booklet.  Thank you for doing this.  A web site will help us better communicate with our present clients and bring in new clients from the web.  This also increases your value to our business J

 

Allen

 

Confidential

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Memo Attachment #1 --

 

 

What our Nursery web site needs (as we discussed in last Monday’s Meeting)

 

  1. The main page needs
    1. Our company tagline:

      Growing and shipping great plants for America's gardens.

                                            

    1. A description of our work:

Grown in pots, or as roots right in the ground, each plant is grown by the best method to encourage its optimal development. This assures that you will receive the highest quality plants available.

 

    1. The company logo (on the disk)

 

 

  1. Other pages in the site include:
    1. Products Page – description and photos of each product (photos are on the disk)

                                                               i.      Persian Bells

                                                             ii.      Painted Daisy

                                                            iii.      Baby’s Breath

 

    1. Newsletter page – including information about our free seminars and upcoming sales (copy this from the disk).

                                                               i.      Owner statement

                                                             ii.      Seminars

 

    1. Services page – a page that describes our services and projects. (copy this from the disk)

                                                               i.      Lattices

                                                             ii.      Ponds

 

    1. Contacts Page – A page that provides business contact and an email. (use the business card on the disk)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Memo Attachment #2 --

 

Storyboard:

 

A storyboard outlines the navigation of your page and allows you to determine what content you would like on the page as well as how to distribute the content.  It is important to consider what you will title your pages, page titles show up in search engines and represent the pages in a browser.  Always include your company name in a title.  Keep your titles short (two words).  A storyboard is also an excellent way to review the layout of the site with a supervisor or co-worker without actually building the pages.

 

Activity:  Use the information from this storyboard to begin this site.

 

 

 

 

 

 

 

 

 Instructions for Building a Business Website using Net Objects Fusion.

 

To get started:

  1. Open Net Objects Fusion by clicking on the start button, then programs, then Net Objects, then Net Objects Fusion 4.0. 
  2. Once the program loads it will ask you what kind of new site you want to create – be sure to click blank site and then click ok.  
  3. Net Objects then asks you what you would like to name you site – type Nursery and then click save.
  4. You are now ready to begin building your navigation structure.

 

 

Your Navigation Structure:

This is your first view of a Net Objects editing window.  The small page that says home represents the first page in your web.  The window on the right side of your page represents the properties of whatever you have presently selected.  This is universal in Net Objects.  Any time you want the properties for an object – click on it and look at the properties window.

 

  1. Click on the home page to ensure it is selected.  Now to change the name of the page type Nursery where home is written in the properties window.
  2. Now click on the custom names button underneath the name field.
  3. This should open a window that allows you to define how the world recognizes your page.  The title and the banner should be similar, but the button should only be one word.

 

  1. Now create 4 pages below the Nursery page:
    1. Point to the Nursery page
    2. Right click and Select new page.
    3. Point to the Nursery Page again
    4. Right click and Select new page.
    5. Repeat until you have four new pages.

 

 

  1. Now change the name, title button, and banner on each of these pages.
    1. Click on the page
    2. Change the name in the properties window.
    3. Click on the custom names button
    4. Change the fields accordingly.

 

  1. You have successfully created your navigation structure, now to choose a style.
    1. In the blue area at the top of the page- click on style.
    2. On the left side of the screen, scroll through the style selections until you find “Shimmer Lake”- click on this title and it should show up in the right window.
    3. Now, next to sites (at the top of the page) you should see a page button – click on this button.
    4. Click “yes” that you do want to set the site style to the selected style.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Now you are ready to jump into editing the pages in the Net Objects great GUI (graphical user interface).

  1. Click on the Page Button on the top of your screen
  2. please read the user interface description in the following section.

 

The Page design Interface for Net Objects:

 

Net Objects Fusion uses graphical interface similar to publishing software.  You can place an object or text wherever you please and Net Objects will figure out the HTML for you.  You have already built your navigation structure, so those links and banners should already be on your page.  To ensure that you are on the home page:

  1. Please click on the site button and select the top page (it should turn blue).
  2. Now click on the Page button and you should be on the first page and ready to edit. 

 

 

Two very important notes for page editing -- (please check that you have read these when you finish)

 

[]……  check when you have read below.

 

The Master border is the top and left

section where your banner and links sit.  If you change anything in the Master Border, then your change is universal – Every page will show that change in its master border.  Do not put images or text in the Master Border unless you want them on every page.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[]……  check when you have read below.

 

The Layout section is the place for specific content on your page.  It is where text and images should go if they pertain only to the page you are editing.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Let’s Begin:

 

To add the main logo to the Master Border:

  1. Now click on the insert picture button---------------------à
  2. Click in the Master Border to the left of your banner.
  3. A window should open asking where the image is located
  4. Find the folder that contains your contents.
  5. Click on the drop arrow beside :look in  your image folder (on the desktop).
  6. double click on the file named mainlogo
  7. Now use your left button to drag the image into position.
  8. Notice that the image changed the layout of your master border.  To fix this:
    1. At the top of the screen click object
    2. Then click on Size Master Border to objects

 

  1. Your image should be inserted and your borders arranged correctly.
  2. You may need to arrange images a little more, just make sure that none of your images overlap.

 

 

 

 

 

 

 

 

 

 

 

Now add text to your home page:

  1. Click on the text button
  2. Click on the spot (in the layout portion) where you want the text to appear.
  3. Enlarge the text box by dragging the bottom right square to the right.      à
  4. Type the company tagline (on the memo attachment 1).
  5. Make sure the box is large enough for the text.
  6. To move the text you have to click on a space outside of the text box – you can then drag the text where you would like.
  7. To edit the text once you have moved it – you just need to double click on the text.

 

Now add an image underneath the text in the layout area (look above if the instructions are too general):

1.        Click on the image button.

  1. Click underneath the text.
  2. Choose the folder with your images.
  3. double click on the image named vine.

 

Great – now you know how to add text and images -- please do the following:

  1. Add the “description of our work” below the vine. (on the memo attachment)
  2. Insert the picture named water underneath “description of our work.”

 

 

 

Text and graphics are the main components of a web page, but you are still missing links. Here are the steps to add a link:

  1. Below the watering pot on your page, add the text “ Member of the American Nursery and Landscape Association.”
    1. Click on the text box
    2. Click below the watering pot
    3. Enlarge the text box
    4. Type the text

 

  1. Highlight the text (click at the beginning of the text –hold the button down – drag across the text)
  2. Click on the link button in the properties window:

 

  1. Once you have clicked the link button, a link window will appear.
  2. Click the External link tab,  type in the address “www.anla.org”, then click on the link button in the window (see below).

 


6.     You have created a link!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Now that you have experienced adding text, images, and links – Let’s move to another page:

  1. Please click on the site button and select the Newsletter page (it should turn blue)
  2. Now click on the Page button and you should be on the Newsletter page and ready to edit. 

 

 

Luckily your staff support typed the newsletter for you and put it on your floppy disk.  All you need to do is open the document and copy and paste it into Net Objects.  Here are the steps:

  1. Do not close Net Objects Fusion
  2. Open Microsoft Word:
    1. Click on Start (bottom left)
    2. Programs
    3. Microsoft Word

3.        Open your document on the floppy disk.

    1. Click on file – open
    2. A window will pop up - Change the drop down window beside “look in” the folder with your images.
    3. Double click on the file named Newsletter.
  1. Now copy the text.
    1. Click on edit – select all  ----------------------------------------------------à
    2. If everything is highlighted, then click on edit – copy
    3. Now exit word (file – exit) and do not save changes.

 

 

You should now be back on Net Objects and ready to paste the Information:

  1. Point your arrow next to the Layout square
  2. Right click and select paste
  3. The newsletter should “magically” appear.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Well, the Newsletter was easy – Let’s move to another page:

  1. Please click on the site button and select the products page (it should turn blue)
  2. Now click on the Page button and you should be on the products page and ready to edit.

 

Creating the products page uses skills you have already covered – Text and Images:

  1. Insert the three product pictures from the assets folder and arrange them on the right
    1. Click on the picture button
    2. Click where you want the picture (in the layout section)
    3. Find the image in the assets folder  (babysbreath) and double-click
    4. Arrange the picture on the right.
    5. Repeat “a” through “d” with persianbells and painteddaisy
    6. Make sure none of the images overlap.

2.        Insert three text boxes and write a quick line for each product (be creative)

    1. Click  on the text button
    2. Click where you want the text and resize the text window
    3. Type a line (ie.  Painted Daisies are in season!)

I do hope things are going smoothly – Let’s move to another page:

  1. Please click on the site button and select the Services page (it should turn blue)
  2. Now click on the Page button and you should be on the Services page and ready to edit.

 

 

The Services page is very much like the products page:

1.        Insert the three service pictures from the assets folder and arrange them on the right.

a.        Insert “landscaping”

b.       Insert “lattice”

c.        Insert “ponds”

d.       Arrange the images so they do not overlap and on the right.

2.        Insert one text box and write something like “We provide excellent landscaping services “

 

Moving right along – Let’s create the last page:

  1. Please click on the site button and select the Contacts page (it should turn blue)
  2. Now click on the Page button and you should be on the Contacts page and ready to edit.

 

 

 

For the Contacts page the wonderful staff support also scanned a business card for you, so all you need to do is insert the card and create an e-mail link at the bottom of the page:

 

1.        At the top of the page insert the picture “businesscard.”

  1. Below the business card create a text box, resize, and write “info@vnusery.com”  and press enter.
  2. Net Objects  automatically recognized the @ symbol and made an e-mail link.
  3. Great Job.

 

So the first Draft of your site is finished – time to publish.

 

In order to publish you need information from your web host:

 

Your server’s publishing address:  ______________________________________

 

Your base directory __________________________________________________

 

Your Username_________________________

 

And Password _________________________

 

 

Once you have this information --- To Publish:

 

  1. Click on the publish button at the top –

 

 

 

  1. Then click on the setup button –

 

 

 

  1. A window will open called publish setup.
  2. Click the server locations tab.
  3. Click Add.

 

 

  1. A new window will open for the information.
  2. Beside server name write what you want the location to be named.
  3. Beside remote host write the actual address of the server.
  4. The base directory will be provided by your web host.
  5. Once you have the name and password entered, then you can click “ok.”
  6. Once you click ok you will see that your server is highlighted in the setup window.  Click ok once more and you are ready to publish.
  7. To send the stuff to the web – click on the moving publish button on the right.

 

 

 

  1. You can also preview your site by clicking on the preview button. 

 

 

 

 

 

Those are the basic steps of creating a web site

Navigation

Text

Images

Links

Content

Publishing

 

 

Congratulations and keep practicing.

 

Image editing:

 

So now you have put together a simple website using the Nursery model.  The skills you have learned will help you to build your own business site, but one part of the website was already together for you…. The images.  To build a successful website you need to understand the basics of Image editing.  Some web editors allow you to resize imgaes and crop, but they are not built to edit images and a serious web developer should use a graphics program to edit images.  On your floppy disk we have provided you with a free, simple graphics program that you can use to edit and create images.

 

Some notes:

1. Image names – follow these rules when naming an image for the web

   a. Use short names with NO SPACES

   b. Do not use symbols

2. Image extensions

   a. For the web the most common file types are gif and jpeg (or jpg)

   b. When saving images to use for the web – save them as a jpeg or a gif  -- often other types will not work.

 

Simple Image Editing with IrfanView (a powerful free little editor I found on the web)

 

Lets change some images that are on the website.

 

CROP – This is a good way to cut out only part of an image that you want.

1. Open IrfanView (double click the icon on the desktop)

2. Choose file – open – and point to the folder that holds your images.

3. Choose businesscard.gif and click open.

4. Use the cursor to draw a square around the vines and Valley Nursery at the bottom of the Businesscard

5. Now that you have the selection that you want – choose edit – crop – at the top of your page

6. Your image should be cropped

8. click file – save as – (a window will open) in file name type titlevines and choose gif as the file type.

 

9. Insert this image into your products page somewhere.

 

RESIZE – This changes the size of your image both visually and in data (unlike web editors that on