ART 003 -- Images for the Web -- Summer 2004

Syllabus Assignments Contacts Image File Size Help & Tutorials

 

HOW TO CREATE A WEBPAGE IN DREAMWEAVER


(Directions for Beginners)

HOW TO CREATE A PAGE in Dreamweaver that will be a variation of this "art003" frontpage:
Example of art003 frontpage

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)

2.) Under File scroll to Save As
Save your file as "art003.html"
Be sure to save this file in your "Art 003" 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 3-5 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.


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.) 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.

9.) Click in the top row of your table (cell block)
Type 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.

10.) In the next box below "Art 003" type your Name
Again, in your Properties box you can change alignment, type style, size and colors. of any text you have highlited.continue typing in your email, a place tolink to Photos and the Final Project.

(Reminder) So you don't lose your work so far: SAVE

11.) MAKING LINKS to email
We will create a link to our Email address.
Highlight your Email address.
In the Property box is a white box on the bottom left called Link:
With your Email address highlighted, type "mailto:youremail" in the link box.
(mine looks like this: mailto:mcv2@psu.edu )

12.) MAKING LINKS to other pages
We will make a link to our Photos page.
Type photos and Highlight Photos.
In the Property box is a white box on the bottom left called Link:
With Photos highlighted, type "photos.html" in the link box.
This creates a link to a page called "photos.html"
Whatever you type in the link box must match exactly the page you wish to link to.
(We have not created the photos page yet, but we will remember that when we do we need to save it as "photos.html" )
(capitals and spaces and everything must be EXACTLY the same)

14.) Save

19.) when you finish be sure to Save this page as "
art003.html"

Your page will be a variation on this Assignment 1 page:
Example of Assignment 2 page


TO INSERT IMAGES
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


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