Building a Web Site

A little perspective
The invention of the printing press in 1450’s enabled information to be disseminated quickly – changing the concept of knowledge storage and distribution, from a hand written book to more widespread printed material. As recently as the early 1980’s, paper flyers-like those announcing an event, a workshop or even a lost dog- had to be taken to a printing company- The text was supplied with movable typesetting-and together with the picture, a plate had to be made of your page. Then the whole page was run off, one copy at a time-much like newspapers are still done today. In my opinion, desktop publishing was made available to people like us, with the introducing of Macintosh in 1984- which could perform simple publishing tasks at your own fingertips-but my first exposure to a Mac was in 1992. By the way, there were no browsers (as we know them). Netscape was introduced in 1994, Explorer in 1995.
Though the Internet has been around since 1971, in an earlier version called ARPANET, the WWW as you and I know it came into being with the introduction of HTML- Hyper Text Markup Language in the early 1990’s (Tim Burners-Lee, a physics researcher in Switzerland). HTML being a clever language was important enough- but its significance was that it was adopted worldwide, perhaps making it the first common worldwide language. For example, even as video formats are different in Europe and the U.S., HTML is the same everywhere. So that created the potential for EVERYONE to be a publisher to the WORLD-instantaneously.

It could take weeks and months to elaborate on the intricacies of web design and you could be reading many books on it. However, as a future teacher, you need to understand the rudiments of building and managing a web site. So, in a few sessions, the best way to approach this is to: JUST DO IT.

There are many differnt web page editor programs. Adobe makes Go Live, Microsoft makes Frontpage, and Macromedia makes Dreamweaver. You can also build webpages in Netscape, Firefox, and even Microsoft Word. Or you if you really want to get to the heart and soul of web pages you can learn HTML code.

A web site is a group of files that reside on a server- in our case, on a computer somewhere on the SOU campus.
HTML (the language or “source code”) for a web page is a document file that contains the instructions about how the browser will display your text, pictures, sounds, video.
A web browser (Netscape, Explorer, Safari, Firefox) is the translator to provide a easily readable and usable interface.
A web editor (Dreamweaver, Frontpage, Go Live) makes it easy to build a page, allowing us to insert text, images, audio and video easily. A web editor generates the HTML (and other code that the browser will read.

Planning a Web Site
The idea of the Inspiration assignment was to quickly and graphically represent the organization of a web site.

For our purposes, the main considerations to think about when developing a web site:

1. Content
Information
Audience
Words/Images

2. Layout of your page

3. Graphics
Color (Compatibility)
Fonts (Readability)

4. Navigation
Logic and access

Scope of what I'll teach you:

Organizing your files
Defining a site
Creating a new page
Using and formatting text
Inserting an image
Creating a relative link
Creating an absolute link
Inserting an email link
Using clip art or image as a link
Using a basic rollover
Inserting a table
Changing the color/size of a table/cells
Inserting an image in a cell
Perhaps a simple text or image animation?

Organizing your files
More than any other document use, it is important to understand the folder/file structure of your web site. If you move files around AFTER you build your pages, the content will sometimes be missing. Dreamweaver can catch some of these missing links and information, but avoiding this problem from the beginning is best.

Think of building a web page like building a house. Before you build a house, you will need tools and materials. Most likely, you will store those tools and materials in a garage until you need them. So your web folder is like the garage. Here at SOU, your web folder has been created for you already. It is called public_html and everyone has the same name in their OWN account. You can find this folder on your f-drive.

Define a Site

The crucial step in starting up is to define your site and identify your root folder. This is the folder that a browser will search for to find your files.
When you open Dreamweaver, it usually provides you with an new “untitled” document. In the menu bar select New Site

 

1. Click on the file folder to browse for local folder options

2. Locate your f-drive

3. Locate and highlight the folder named public_html

4. Click Open to get the public_html folder in the dialog box and click Select

 

 

When public_html is displayed as your Local Root Folder click OK.

Click OK again (not shown) to establish the initial site cache.
Note: If you are working on your web pages at home- the first time you start on your home computer, create a folder on your hardrive at the first level (probably My Computer level) called public_html. Use that as your local root folder, and leave it there the rest of the year. You will soon be sharing your files to and from home and school. Each location (your computer and the SOU server) will have a public_html folder, and you simple copy your files from one to the other-but they will always have the same root name. They go from one 'garage' to the other-and keeping files in folders that have the exact same names.

Creating a new page

Just for fun-Open a web browser and type in this URL- http://home.sou.edu/~LOG IN ID/ ---That's right-it's your current home page-broadcasting to the world! Want to spruce it up a little?

When you locate the public_html folder, I suggest creating 2 folders, although there are many ways to organize your web folder contents. Name one folder “images”, where you will have a copy of all your picture type files, in .jpg or .gif format. Name the other folder “extras”, where you will keep your buttons, backgrounds, animations etc.
First, move one or more of your images into your “images” folder. It should be already resized to your desired size and saved in .jpg format (Note:.gif format is OK too, depending on the type of image). If this is not done yet-open Photoshop Elements and resize your image(s) and make sure it it saved in a .jpg format, and the title has a .jpg tag.

To edit your index.html page Select File: Open

Navigate to the public folder, then Select and Open index.html

 

The page to the left is similar to what you will find when you go to your home page on the WWW.

You can change or delete anything except the bottom portion of this page (the disclaimer).

Then choose Save, so if you have made changes you will see them on the WWW. Open your internet browser and check. Always keep the as index.html, and there will only be ONE index in your public_html folder. This is the page that the SOU server recognizes by default.

Your home page URL will be:

http://home.sou.edu/~LOG IN ID/

Any new page that you create you should name it immediately and save it-and make sure it goes into the public_html folder. No other page should have the name of index in your public_html folder. When you name a page, I will offer this advice: make the names short, leave no spaces, use only dots or underscores between words, don't use any capitals, and don't use funky symbols of ANY kind like ampersands or even dashes. ALL pages should have the .html tag on them.

Although you can build pages in other programs- even Microsoft Word, try to build all of your pages in one program (ie. your primary web editor) if possible.

 

Getting oriented

Select Design View for most situations.

However, more experience will lead you to check out Code and Design view as well.

The Objects Panel allows a graphic interface. I usually just use the top menus, but it's just a personal preference.

The Selection Properties panel is always used, so keep it open at all times. It will change contents depending on what you are attempting to edit, such as when you select text, or an image, or a table.

 

When you want to insert Images and Tables

 The two main "inserts" we will use.

When you want to modify your main content

Three important areas to know when you want to make changes to your pages. Options under the table arrow will appear when you select the table.

Page Properties

Enter a Title-which is the name of your page when it appears on the WWW (not the saved file name). This title is actually the one that appears in a bookmark of your browser. Consider web safe colors for reliability

From the Menu 'Modify' use Selection Properties for Relative and Absolute Links. First, hightlight the word or click on the image that will be a link. Then Browsr for the file OR Paste in the URL.

 

**You can check your links by checking File>Preview in Browser**

Further Reference

Samples for web design
Principles of Design include in Section 3.1-3.4 of Ed Tech Readings

Web Design

http://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and_Layout/Graphics/
Index of graphics sites on the web.
http://www.lynda.com/resources/inspiration/index.html
a professional’s recommendations on where to look for ideas

http://www.lynda.com/hexh.html
shows web safe colors indexed

http://www.lab.brown.edu/tdl/index.shtml
example of good design-especially web colors

http://www.webstyleguide.com/
Web page style methods

http://fromnowon.org/homesweet.html
Tips for designing school related sites

SOU Graphics
http://www.sou.edu/web/
the place to go for SOU web guidelines, and SOU graphics

http://www.trainingtools.com/online/dreamweaver4/index.htm
Some interesting support tutorials for extending Dreamweaver development.

The Magic Way to Transfer Files

If you are using Dreamweaver at home (and other web editors will be similar) you can transfer your web pages and images directly from within Dreamweaver. Follow directions of class demo.
For most other files-and (including Dreamweaver) files you can also transfer files using a FTP program- WS_FTP Windows) or Fetch (Mac). Use the SOU directions for Remote Access

Remote Access via FTP

Windows: http://www.sou.edu/it/mobile/ftp/ftpwin.shtml

Mac: http://www.sou.edu/it/mobile/ftp/ftpmac.shtml

- This assumes you can log on to the Internet from your home computer. Follow the directions and you will have access to your f-drive files. This is a good way to transfer files to & from home & university. Once you learn this-you'll never need another floppy! Windows users should download WS_FTP and Mac users should download Fetch. Most recent web editors like Dreamweaver (and others) are capable of transferring files from within the application as well.

Go to Page 2 of Building a Web Site

dj Home