Associate Professor Thomas Sakoulas
State University of New York at Oneonta : Art Department		 [ Contact ]

Introduction to Computer Art

Assignment: Web Design

Print this page for reference. Read everything carefully before you proceed.

Create a small web site with one "home" page and at least two other pages. Creating more pages could be beneficial.
One page should contain a small portfolio of images created in this class (3-5 images), and another page should contain a short bio and/or your resume.

As you work, keep everything (images and files) in one folder named "www". This folder will reside in your local hard drive, and will be mirrored on the web server.

Use Dreamweaver to put together your HTML pages, and Photoshop to manipulate your images.

 

What you will learn:
The basic principles of web site creation.

To create your web site follow this important steps:

1: Create a folder named www (You must save everything in this folder, images and files)

2: Set up Dreamweaver for FTP

Dreamweaver has it own FTP client. Set it up to connect to your server this way:
a. Site > New Site (or Edit Site if you already have one created)
b. Click "Remote Info" and set it up like this (replace "maasjr23" with your own user name)

3: Create the home page:
Open Dreamweaver and create a new page. Save it as "index.html" in your www folder

4: Create a new page and save it as "portfolio". Save it in your www folder

5: Create a page and save it in the www folder as resume

NOTE: when saving web pages do not use capital letters, spaces, or special characters. Always include the .html extension after each file name (i.e.. portfolio.html). Once you save the pages, do not rename them and do not move them to different folders.

6: Choose five images from the previous assignments and open them in photoshop (they will be your portfolio). Adjust each image's size to be no larger than 500 pixels in any direction, at 72 dpi (use the Image/Image Size menu item to do this.)

7: Save each image as a "jpg" file. To do this go to the File menu and choose "Save for the web". Save each image in your www folder

NOTE:
If you have photoshop images, open them in Photoshop and save them as jpg files (File/Save for the Web).
If you have Illustrator images, open them in illustrator and go to File/Export and export them as either gif or jpg images ("File/Save for the Web" on Illustrator 9).
If you have Maya files, render a view and select File/Save Image.
If you have inDesign files it may be best to export them as pdf (File/Export) and link to them from your web page. If you have inDesign files, go to File>Export, and export them as .pdf files.

8: Still in Photoshop, create a new file. Type your name and/or the title of your web page and manipulate it to your heart's content. This will be your logo on the top of your home page. Once satisfied that it is worthy of your home page, save it as a jpg file (go to File/Save a Copy) in your www folder.

9: Create a nice graphic or manipulate a photograph to place on your home page to make it more inviting. Choose a photo that is representative of you and your personality. Do NOT download images from other web sites for use on yours. Use your own art. It should be no larger than 500 pixels in any direction.

10: Optional: create 2 nice buttons in photoshop to act as links to your two other pages.

11: Back to Dreamweaver. Open your home page (index.html) Place there the images you created in Photoshop (your name on top, your graphic below, and the two graphic buttons) by using the Insert/Image command. Highlight the button to act as a link to the portfolio page and link it. Do the same for the "resume" button.

12: Work on your portfolio page (Create a banner in Photoshop or illustrator if you want). Create a table and place there your portfolio images. Write a little explanation for each underneath or next to it.

13: Type a short bio or a resume on your "resume" page. Include a photo if you want, but do not include address, or phone numbers. Use your e-mail address only.

14: Make sure you include your e-mail address on the home page, link back to the home page in every page you create.

Congratulations! you just created your first web site.

Most commonly asked questions:

How do I change image size? Do NOT do it in Dreamweaver. Open your image in Photoshop and manipulate it there (Photoshop>Image>Image Size.).

When do I save a jpg, and when should I save a gif file? Photoshop and Image Ready and Fireworks allow you to be able to see many versions of the same image so you can decide what file format you should be using for each image. As a rule of thumb, if the image contains many gradations (like photographs) you should be saving it as jpg. If the image requires transparency, you must save as gif. If your image contains only solid colors without much blending, you may best save as gif.

Can I choose more fonts other than the ones Dreamweaver offers: Stick to the ones that Dreamweaver gives you. They are "Web safe" and will almost certainly work in every browser.

The %*^%$@ thing keeps double spacing every time I hit "Enter" ("Return" on Mac). How can I single space?
Hit SHIFT+ENTER (Return) together.

How do I create a "rollover" image? There are many ways but using the rollover capabilities of Dreamweaver is the simplest for this assignment. You will need 2 images that you should create in photoshop. One will be the "up" image (the image that appears with the page), and one will act as the "over" (the image that will appear on a mouse over event). Be careful to make them the same size and resolution so the effect is seamless. Once you create your images, go to Dreamweaver, place the cursor where you want the images to appear and click the button. Select the "up" image, the "over" image, and select the page to link to.

How do I change the page background color? Use Modify/Page Properties

Can I use a large image for the page background? You can, but you should not.

Can I use a pattern as a background on my page? Yes. Keep in mind that any image on the background will "tile" (will repeat itself infinitely). Many pages use this to their advantage. Experiment if you have the time, but be careful not to create a background that interferes with you text.

How do I change the text color?
Use the palette next to the font properties.

How do I change the link color? you can change the link color for an entire page in the Modify/Page Properties menu item.

How do I create transparent images? There are many ways, but here is an easy one: Use photoshop. Select the image you want to keep and delete the part of the image that you want to remain transparent (you might have to create a new layer, copy your image there, and delete the background layer). Go to File/Save for the Web, save as a GIF file and make sure the "Transparency" box is checked (alternately, you can use the Help/Export Transparent Image and follow the steps to save a gif file in your www directory.) Creating transparent gifs can be time consuming sometimes, so do it only if you are sure it will enhance your site and that you have enough time to troubleshoot.

I have too many pages and images in my www folder, can I organize them into folders? DO NOT! (or do it only if you know what you are doing) all your links will stop working if you do it incorrectly. Save such activity for when you gain more experience.

How do I create Thumbnails for my images? Create small versions (thumbnails) of the images in Photoshop by reducing their size (Image/Image Size). Place the thumbnail on the web page in Dreamweaver and link it to the larger version. Make sure that both thumbnail and larger image are saved in your www folder and that they are both uploaded to the server.

I want better image quality on my pages. Can I save my images at a higher than 72 dpi? No.

Can I create animated GIFs for this assignment? If you know what you are doing, and you can do it within the deadlines, yes.

Can I use Macromedia Flash for this assignment? NO!

My uncle is paying me to do a web site for his shoe store. Can I use this site for the assignment? NO!

I already have a web site and I know everything about web design. Can I go home? No! Create a new site. Remember that you are graded on original work. If you already know about web design you should breeze through this assignment.

 

Using Dreamweaver

Here is a list of common problems and the easy way to solve them:

How to create a page:
Select File/New

How to place an image on a web page:
Click on and select the image you want. It must be a jpg, gif, or png image. All images must be in your www folder before you can place them on a page.

Image Guidelines: All images must be 72dpi (check in Photoshop in Image/Image size). Keep them small - no larger than 500 pixels in any direction.

How to organize a web page:
Web pages act almost like word processor pages with text and images taking their place one after the other on a paragraph. This means that you can not very easily place items on the right side of the page. The best way to do it is by using "Tables". Alternately you may use "Layers" but save that for a later date.

How to use Tables:
to create a table click on and select the number of rows and columns you want. Border defines the size of the table border. A border size of "0" makes a table that is invisible to the viewers (although you see it in Dreamweaver). Cell Padding defines how far the text is to stay from the border (5 is a good number). Cell Spacing defines how far apart the cells are spaced.

How to manipulate text, paragraphs, and tables: Highlight the text and use the properties window.

How to create links to other pages within your web site:
Highlight the item you want to act as the link (it can be text or an image). In the properties window. click the next to the "Link" form field. Choose the page you want to link to, and click "Select".

How to create links to other pages on the Internet:
Type the URL directly into the "Link" field.

 

Resources

Important WWW concepts:

A web page does not travel to the viewer's computer as one entity. It arrives at each computer as a pile of information (text, images, and instructions) and each viewer's browser constructs it on the viewer's end. So your page may change appearance from computer to computer.

Uploading the web to a server:
In order for your pages to be seen by the world you must place them on a "Server". In general, you create your pages in your computer and when you are done, you "upload" them on a server through a process called FTP.

Set-up Dreamweaver for FTP

Dreamweaver has it own FTP client. Set it up to connect to your server this way:

1 . Site > New Site (or Edit Site if you already have one created)

2 . Click "Remote Info" and set it up like this (replace "maasjr23" with your own user name)

Other ways to FTP

FTP on Windows with WSFTP


SUNY Oneonta offers free web server space to all the active students. You should upload your pages to your directory at students.oneonta.edu/username
If you need help call the help desk.

If you do not want to upload your page to the school server, you may upload your pages to a free web server. Search the internet for free web hosting, and choose the one you like.

You must always watch closely the size of your pages. You must keep them lean. Many believe that good web pages must be kept below 10k total size, but this might be unrealistic for a computer artist who use many images. Keep the number of images to a minimum, and use images at 72dpi and no larger than 500 pixels wide. Try to keep each page below 100k.

 

Visit the Visual Thinking Web Log, the Web Design,and the Web Development pages of XPLANE (and mesmerize yourself at the home page)

Download Screen Ruler. It is a indispensable tool for web design. Just save it in your folder and is should work fine.

On your web quest, be sure to Ask Dr. Web for answers to your questions. Travel the long road of our web resources, and other Lessons and Tutorials.
When you are done, you will truly be wiser.

You should not be venturing far into the web jungle without the guidance of the Webmonkey


Take a look at our Computer Art resources for an extra jolt of knowledge.

 

TOP ISSUES that pop up:

During this assignment you might encounter the following strange things:

Problem: You insert images in the Dreamweaver page but they show up as broken.
Possible reasons: The image is not saved as a legal format (jpg, or gif). The image is not in the www directory.
Solutions: Open the image in Photoshop and resave it as a jpg or gif file using the save for web command (simply adding the extension on the image name does not change the image format). Save it in the www directory and re-insert the image on the page.

Problem: You insert images and they look fine in Dreamweaver but they appear broken when you preview the page in Internet Explorer.
Possible Reasons: Internet Explorer previews a previous page. Or the images have been moved or renamed after they were inserted in the page.
Solutions: Click "Refresh" on Internet Explorer. If this does not work, preview the page in Netscape Navigator. If the images appear, your page is fine and no need for further action is needed (Explorer is just too aggressive in the use of cashed pages in a networked lab). If the images do not appear in Netscape either, go back to dreamweaver, delete them from the page and re-insert them. Make sure you save the page before you review it.