Step by Step Web Pages - Short Version

Step by Step Web Pages

Linda West
Fall 2000

Getting Started

USING DREAMWEAVER
To use an existing file:
Use a file from your A drive or your class disk:
Go to File
Open
Use the drop down box
then select 3 1/2 Floppy (A:)
highlight your file
double click or click OK
To start a new page by opening Dreamweaver

With Dreamweaver on the screen, look at the tool bar at the bottom:

The toolbar changes based on the kind of action the program thinks you need.

Titles

Type a new title at the top of the page. We'll change the way it looks later.
Save the file by going to File > Save as. Give it a name you will remember or name it index.htm for use as your homepage on Arapaho.
You can preview your page by going to File > Preview in Browser. If you do this as you edit, you can check your changes and links.

Creating Internet Links

Go back to your page in Dreamweaver
Type Northeastern State University
on its own line.
With your cursor, highlight the the line you just typed
Use the bottom toolbar
On the Link: line, type:
http://www.nsuok.edu
Save and Preview your file.
Try the link that says Northeastern State University.
Does it work?
TIP: Note that some systems are case sensitive. You must enter the address correctly.
Make a Relative link another file you have made by:
/directory/filename Type only the filename of the directory and filename instead of the complete WWW address.

Adding Graphics or Images

Add a graphic to the page by clicking on the tree icon.
Browse to find a graphic file and select it. You may only use .gif or .jpg files for webpages.

You can select where the graphic will fit on the page and other attributes.
The illustration shows the Left Alignment Button which aligns the text to the right of the image.
The Align box sets the image on the page in relation to the text.
Save and Preview your page. Change the alignment, if you want to see a different view.
TIPS: Images do not reside on pages, they are called up by browsers and displayed on pages. Two types of images may be displayed: gifs - usually line art, can be made transparent jpg - usually photographs, cannot be made transparent - usually square or rectangle.

TIP: Alt text. Use the alternative text to tell a user of with no graphics, like lynx or the blind, what the image is. alt="dogs and cats"
Another tip: To make an image a link, type the address in the Link box, make the Border zero if you do not want a blue line around the image.

Email Links

Type in your name or email address on the page.
Highlight what you just typed with your cursor.
Click on the button for a "Link"
Select the email tool from the objects bar. It looks like an envelope.
On the Email: line, type:
youremailaddress
Save the preview you page.
Test the link, it should bring up a email blank message box.

FONT SIZE AND COLOR

To change the size or color of letters, words, or sentences,
highlight what you want to change
Click on the color button and pick a color,
or click on the Format to change to a Title or other heading type or Change the Default Font or use the box to change the size of the font. The bigger the number the bigger the size. 12 is the default size.
Save your file and preview it.

BACKGROUNDS and PAGE OR DOCUMENT PROPERTIES

To set properties for your page (document), you need to go to:
Modify -> Page Properties
You can set the background color, or use an image for a background.
You can also set the default color for normal text, links, followed links and active links.
TIPS:
text= text color -- default black
link= link color -- default blue
vlink= visited link color -- default magenta
alink= active link color (changes for a few seconds as clicked) -- default red
*You may have only one link color per page

TABLES

To add a Table to your document, use the table button.
You can have any number of rows and columns. The outside lines may be visible or invisible. You can also set background colors.

Publishing

Define sites and set up FTP information before publishing. Use the branching diagram at the bottom to publish

Getting Started
	USING DREAMWEAVER To use an existing file: Use a file from your A drive or your class disk: Go to File Open Use the drop down box then select 3 1/2 Floppy (A:) highlight your file double click or click OK To start a new page by opening Dreamweaver With Dreamweaver on the screen, look at the tool bar at the bottom: The toolbar changes based on the kind of action the program thinks you need.
Titles
	Type a new title at the top of the page. We'll change the way it looks later. Save the file by going to File > Save as. Give it a name you will remember or name it index.htm for use as your homepage on Arapaho. You can preview your page by going to File > Preview in Browser. If you do this as you edit, you can check your changes and links.
Creating Internet Links
	Go back to your page in Dreamweaver Type Northeastern State University on its own line. With your cursor, highlight the the line you just typed Use the bottom toolbar On the Link: line, type: http://www.nsuok.edu Save and Preview your file. Try the link that says Northeastern State University. *Does it work?* *TIP:* Note that some systems are case sensitive. You must enter the address correctly. Make a Relative link another file you have made by: /directory/filename Type only the filename of the directory and filename instead of the complete WWW address.
Adding Graphics or Images
	Add a graphic to the page by clicking on the tree icon. Browse to find a graphic file and select it. You may only use .gif or .jpg files for webpages. You can select where the graphic will fit on the page and other attributes. The illustration shows the Left Alignment Button which aligns the text to the right of the image. The Align box sets the image on the page in relation to the text. Save and Preview your page. Change the alignment, if you want to see a different view. *TIPS:* Images do not reside on pages, they are called up by browsers and displayed on pages. Two types of images may be displayed: gifs - usually line art, can be made transparent jpg - usually photographs, cannot be made transparent - usually square or rectangle. *TIP:* Alt text. Use the alternative text to tell a user of with no graphics, like lynx or the blind, what the image is. alt="dogs and cats" Another tip: To make an image a link, type the address in the Link box, make the Border zero if you do not want a blue line around the image.
Email Links
	Type in your name or email address on the page. Highlight what you just typed with your cursor. Click on the button for a "Link" Select the email tool from the objects bar. It looks like an envelope. On the Email: line, type: youremailaddress Save the preview you page. Test the link, it should bring up a email blank message box.
FONT SIZE AND COLOR
	To change the size or color of letters, words, or sentences, highlight what you want to change Click on the color button and pick a color, or click on the Format to change to a Title or other heading type or Change the Default Font or use the box to change the size of the font. The bigger the number the bigger the size. 12 is the default size. Save your file and preview it.
BACKGROUNDS and PAGE OR DOCUMENT PROPERTIES
	To set properties for your page (document), you need to go to: Modify -> Page Properties You can set the background color, or use an image for a background. You can also set the default color for normal text, links, followed links and active links. TIPS: text= text color -- default black link= link color -- default blue vlink= visited link color -- default magenta alink= active link color (changes for a few seconds as clicked) -- default red *You may have only one link color per page
TABLES
	To add a Table to your document, use the table button. You can have any number of rows and columns. The outside lines may be visible or invisible. You can also set background colors.
Publishing
	Define sites and set up FTP information before publishing. Use the branching diagram at the bottom to publish