Home

...

Web Design Definitions

Uploading

Graphic Libraries

Web Page Design Details

Uploading Site USM's Server

Assorted Graphics Sites

 

 

.....................................

Student Photo Album

  

 

 Steps for uploading web pages to the student server

 

1) Go to web address: http://www.usm.maine.edu/agreement.html             
2) Scroll down the page and "agree" to the terms and conditions by clicking on the "I Agree" button.
3) Enter same ID as you use for getting on to Blackboard
4) Enter same password as you use for getting on to Blackboard
5) Scroll down the page until you see "Browse"; click here and select the web page document that you want to upload
6) Click on "Upload" to put the file on the student server.
7) You must upload ALL files including graphics and images.  If you change it, upload it again.
8) Check your file transfer by clicking on your web address.

 

 

 

 

 

 

..........................................

 

Web Design Information

 

Local Web Site

Definition: a page or collection of pages on a given topic by one designer.

 

Web Server

The computer that all of the web page files resides on and which "serves" them to the web.

 

The Home Page

Also called the main page, master page, or index page

Name your page index.html (lower case, no spaces)

This tells the server that it is the home page. The word "index" will not appear in the URL on the Internet.

IMPORTANT: you MUST NOT put spaces in your file names. Html pages or images CAN NOT have spaces, or they will not be recognized on the Internet. Every semester, several students forget this and end up with a final project which will not serve on the Web.  

 

SubPages

Name your subpages in a logical, consistent format and always use lower case letters with no spaces. End the name of the pages with .html

Examples:
lessonplan.html

teacherpage.html

 

Links Between Home Page and Subpages

You should organize your home page in such a way as to allow the user to click to links to all of your subpages. You should also have a link back to your home page on every subpage. This can be a text link that says Back or Home Page or something similar to allow for easy navigation. Some designers use button graphics and link those. You are also encouraged to use tables like the one below (these appear to be links but are not linked for purposes of example). These are known as Nagivation Bars or Navigation Tables, and they appear on top, to the left or at the bottom of web pages.

Home
Teacher Sites
Personal Page
Children's Sites

Links

Links are easy to make. Just highlight the text you want to become a clickable link, then choose the LINK tool (or 'insert link" from the menu. Links to other web sites on the Internet are known as external links as opposed to internal links which are links between your own pages. External links ,must be complete and CONTAIN NO SPACES! Here is the model, and be sure you include the http://.

Link to John's Web Site: http://www.johnthurlow.com

 

Images

There are two basic types of images on the Internet, gifs and jpegs. Images you have downloaded or scanned should be named or renamed in a logical way. Let's say you download an image of a child from a web site and the name it Saves As is chrr32.gif. You can rename it in a way that is easier for you to work with, such as girlchild.gif. Just don't change the .gif part, that's important. If you scan images, make sure you learn how to save the image as a gif or jpeg and name it as such with the .gif or .jpeg. Also, images scanned on a flatbed scanner, and images taken with digital cameras can be very large files depending on the "resolution" your devices are set at. Images should be low resolution for the web so they download fast. There are ways to take a large file and reduce its resolution. Resolution does not mean actual picture size: it is the number of pixels which make up the image. A 3 x 5 photo can be very low resolution and take up 20 kilobytes of space, and another 3 x 5 image can be very high resolution and take up 20,000 kilobytes of space!

How do you download an image from a web site? Simple. Just hold you mouse over the image and right-click your mouse (or hold the mouse button down on a Mac) until you see the message Save Image As or Download Image to Disk. Release the mouse and you will be asked to save the image. It will already be named, but you can change it. Save your images in a folder for later use. Remember, no spaces in the names.

Some images are "animated." Watch the comet in the nighttime sky below. These are downloaded like any other image, but may not animate in your web design software (depending on the version). They will animate in "preview" mode or when they are served on the Web. Be careful in your use of animated images as they can be overdone and distracting!

Animated .gifs

Text Into Images

Some software programs or online sites allow you to enter text and have it converted to interesting images. Try www.zy.com or www.flamingtext.com and experiment with how to make cool graphics. You can also use Microsoft PowerPoint or Publisher's WordArt feature and then save the graphic as a jpeg file (Use SAVE AS as change the file type). You can also create banners and other interesting images online and Save them for use on your site.

 

Images as Links

If you want to use an image as a link, you simply click on the image once to highlight (or select) it and choose the link tool, then enter the subpage name (or the URL if you are linking to the Internet).

Images for backgrounds

You can use an image as your background by placing a selected image in your web page folder, then choosing FORMAT menu, PAGE PROPERTIES and choose the tab: COLORS AND BACKGROUND. Look for the PAGE BACKGROUND choice, and click the box for IMAGE. Then browse for the image you want to use. Here are some sample images you can try.

This is a TILE which will repeat itself to give you a full background.

This is a SIDEBAR (also called a border) It has a white background to the right of the blue texture. Click on the blue and you will see the entire image highlight with a border.

This is an image. Be careful how you use images as background because they tile and can make your page very busy.

You can also put images into tables. Look at the Tables Properties menu.

 

E-mail Link

Some people like to include an e-mail link in their page. You do this by typing mailto: before your e-mail address. This will automatically bring up an e-mail window when people click on the link.

mailto:billgates@microsoft.com

 

Storing Your Web Site (on your hard drive, floppy, or a server)

When you store your web site on your hard drive, or a floppy or upload it to a server, the home page, subpages and images must reside in the same folder (also called a directory). If an image is not in the same folder as the page it is linked to, then you will get a broken link.

 

Organizing Your Web Site

The graphic below shows how you can organize a web site with a home page and multiple sub pages. There are two common ways; subpages which are linked to the home page, or subpages linked to each other in a sequence. Much depends on the purpose of your web site. You will notice on this site you are reading that this subpage is linked to the homepage and all subpages are linked to the homepage.

 

Top of Page

 

 

 

 

 

 

 

 

Graphics Libraries

  Google Image Search    
  Flaming Text Caedes Wallpaper (excellent) PicSearch

3-D Text Maker

Free Graphics

Realm Graphics

Pics4Learning

Julianne Textures

Jim's Cool Icons

Free Fotos

Dr. Zeus' Textures

Web Diner

Background City!

Media Link

Sites

Web Page Helpers

New World Creations

Kira's Icon Library

Zy.com

Phyllis's Backgrounds

 

Dr. Ozone

................................................

 

Top of Page