Making Instructions

Project: Make your own tutorial—a web page that tells a reader how to do something on the computer.

Your instructions page must use a particular application and must involve at least five steps.
Example topics could be how to use a particular filter or combination of filters in Photoshop or how to make a motion tween in Flash.
Assume your reader is a beginner and might need help even opening the application.
You must use an external style sheet that holds at least 3 styles.

To make and use an external style sheet

Open a new text document in BBEdit by pressing +N) and type in your style definitions.
These are example style definitions (your values would need to be included):

body{
      background-color:______;
    }
	
  .style2{
      font-family:______;
      font-size:______;
      color:______;
      background-color:______;
      font-variant:______;
      padding:______;
  }
  
   .box{
      border:_____________________;
      font-family:______;
      font-size:______;
      padding:______;
  }

Save document in your web:includes folder with a .css extention.
Create a new XHTML document (In BBEdit press +CTRL+N). This will be your tutorial. Save in your web folder with the .html extention.

In the <head> section after your title include the following line:

<link rel="Stylesheet" href="url_of_style_sheet.css" type="text/css" />

To take a screen grab

Press +SHIFT +3
This will take a picture of your entire screen and save a png on the desktop. The first image is given the the name Picture 1.png
Open Picture 1.png in Photoshop and use the crop tool (C) or the marquee tool (M) to select the area of the screen grab you want to keep.
Save the image for web (+OPTION+SHIFT+S and save as a png in your web:images folder ).

To take a partial screen grab:

Press +SHIFT +4
Your mouse will change to a crosshair. Place it at the top left corner of the area you want to grab, then hold down the mouse and drag to the lower right hand corner. When you release the mouse, the image will be grabbed. The first image is given the the name Picture 1.png
You can open Picture 1.png in Photoshop to modify it. If you do that, save the image for web (+OPTION+SHIFT+S and save as a png in your web:images folder

If you do not need to modify the image, drag it from the desktop to your web:images folder, then click on the name to hilite it and rename the image something that is descriptive and with no spaces.

To create a numbered list

Style options for this kind of list include decimal (default)| lower-alpha | lower-roman | upper-alpha | upper-roman

    <ol>
    	<li>First instruction...<br /><br /><hr /></li>
    	<li style="list-style-type: lower-alpha;">Second instruction...<br /><br /><hr /></li>
    	<li style="list-style-type: lower-roman;">Third instruction...<br /><br /><hr /></li>
    	<li style="list-style-type: upper-alpha;">Fourth instruction...<br /><br /><hr /></li>
    	<li style="list-style-type: upper-roman;">Fifth instruction...<br /><br /><hr /></li>
    </ol>

Produces this:

First instruction...
Second instruction...
Third instruction...
Fourth instruction...
Fifth instruction...

To create an unordered list:

Style options for this kind of list include disc (default), circle and square

    <ul>
    	<li>First instruction...<br /><br /></li>
    	<li style="list-style-type:circle;">Second instruction...<br /><br /></li>
    	<li style="list-style-type:square;">Second instruction...<br /><br /></li>
    </ul>

Produces this:

First instruction...
Second instruction...
Third instruction...

To create a box

    <div style="background-color:#FFF;border:solid 1px #F00;padding:.5em .5em 1em .5em;">
    content
    </div>

Produces this:

content