ART 003 -- Images for the Web

Syllabus Assignments Help & Tutorials
Image Editing Webpage Editing Cameras, PSU Labs,
& Computer Store
Accounts,
Web Posting/Portal

HOW TO CREATE A WEBPAGE IN DREAMWEAVER

These are basic instructions. For more detailed instruction see Dreaweaver HELP> tutorials along the top menu bar in Dreamweaver.

Below are basic instructions to create a frontpage similar to this example page: "example.html"

1.) Open Dreamweaver.
(If a white page does not automatically open -- under File hit New.)
(If it asks for a page-size, a typical size is 640 pixels wide.
Do not make your pages or tables wider than 640 pixels.)

2.) Under File scroll to Save As
Save your file as "art003.html"
Be sure to save this file in your "art003" folder.
It is a good habit to save pages right away and continue to save often as you work, as you never know when the program may crash.

3.) Across the top is box that says Title:
title your Webpage "Art 003 Frontpage"
(this is not the same as saving. but a title is important as it shows up in bookmarks)

4.) Under Window on the top left of the menu bar, make sure an "Objects or Inserts" window and a "Properties" window is open, these contain common, basic tools.

5.) Under Modify, across the top, open your Page Properties.
clicking and hold and you can change page background colors, text colors and colors for links. Make any changes hit Apply, then OK

6.) In your Insert Common tools window box is a symbol for a Cell Block/Table
or under Insert scroll to Table.
For starters choose a 2 rows / 1 column >OK.
Using tables allows you to control spacing and arranging your page.
Rows and columns can be changed easily as you work by selcting the block, until you see solid black squares inthe corners of the block you are selecting, then rows, columns, colors, spacing, and alignments can be changed in the Properties block.

IF you do not want a border to show you can make the table invisible on the Web by changing the Border to "0" a double dotted line shows the border.
Spaces can be adjusted by changing cell space and cell padding.

7.) By clicking on the background page and the clicking on the cell block you can see the property box change. in the left top of the roperty box are youchoices or aligning. I suggest you align Center for now

8.) Click in the top row of your table (cell block)
Type Your name and Art 003, Images for the Web
In your Properties box you will select alignment and also the type style
(do not leave to default)
Select type style, size and colors. of any text you have highlited.
size 1 is usually too small / size 4 is very large most often text size is 2-3.

Note: if you return space it will be a double space,
if you return while holding shift the key it is a single space

9.) So you don't lose your work so far: SAVE

10.) MAKING LINKS to other pages
Highlight the text or image you would like to make a link from.
First highlight the text "Art 003, Images for the Web"
In the Property box is a white box on the bottom left called Link, here is where you type the web age address (URL) in this case the art 003 page is not in your own portal so you will want to make a link with a full address that incvlides the http, so in the lin box type:
"http://art.net/~mary/art003"
This creates a link to the art003 homepage.

ALL links are CaSe SenStiVe, so must be careful to match what you type in your link box exactly with the name of the page you are linking to..

11.) To create links to your furture assignments:
Crate another table>
under Insert scroll to Table.
make this table have 4 columns and 1 row, to list your furture assignments.
Remember that whatever you type in the link box must match exactly the name of page you wish to link to. (CaSe sENsiTiVe)
Even though we have not created the future assignment pages we can make the links now.
Highlight the assignment 3 text. In the link box type in "assignment3.html"
Highlight the assignment 4 text. In the link box type in "assignment4.html"
Highlight the assignment 5 text. In the link box type in "assignment5.html"
Highlight the assignment 6 text. In the link box type in "assignment6.html"

IN ORDER FOR LINKS TO WORK YOU MUST SAVE THE PAGE
exactly the same way you typed it in the LINK box, no CAPS OR spaces. no strange characters.

Save your page.

12.) Save -- **ALWAYS BE SURE TO SAVE YOUR WEBPAGE BEFORE YOU IMPORT ANY IMAGES!

13. )TO INSERT YOUR IMAGE
click where you want to place your image
Under Insert
click Image
Browse to your image.
(which should be found in your "Art 003" folder only.)
BECAUSE ALL .HTMLS AND .JPGS MUST BE IN THE SAME FOLDER

When you finish be sure to Save this page in your art003 folder!
BECAUSE ALL .HTMLS AND .JPGS MUST BE IN THE SAME FOLDER


Once you have done this and become more confident please feel free to make your pages fancier and more interesting.

Once your pages are saved, see:
How to Post Webpages on Your PSU Webspace