Common Tools & Connect implies that there are two steps to this process:

1. Use common web publishing tools (DreamWeaver, iWeb, Weebly, GoogleSites, Nvu, Word, Powerpoint are just a few examples) to CREATE files or web pages.
2. Then, connect to your PASS space and upload these digital files into either the 'www' or your 'www_protected' folder to SHARE them.

Start from Scratch or Modify a Template?

Depending on your skills with web design starting from scratch will give you complete control for the 'look and feel' of what you produce. While something satisfying is not always difficult to achieve, it is usually time consuming. Taking advantage of templates will jump-start this process. Rather than starting from scratch you are simply modifying what has already been developed.

Setting up an Entire Web Site from Scratch

Students have been creating Web pages and sites from scratch for many years now and there are plenty of resources for helping you learn along the way. Dreamweaver provides tools for efficiently setting up and maintaining entire web sites. Web sites created using these tools make it easy to include features such as navigation structures and styles. To learn more on this topic review the"Getting Started with Dreamweaver" ITS seminar handouts.

More recently, however, the availability or templates (i.e., FreeLayouts.com, iWeb on the Mac) or website creation services (i.e., Weebly or Google Sites) bypass much of the design labor involved and allow you to concentrate on the content of your site.

The bottom line here is: Create something, then once you have all the files ready, upload all of these files into your PASS space.

Templates

You can find a wide variety of website templates or free layouts when you search the web. You may download just the essentials or a whole web site in a compressed (.zip) format . Once you have downloaded the .zip file extract these files from their compressed state so that you can open them up and modify them using a web editor.

Here is a link to a sample 'Penn State e-Portfolio' web site, (screen shot, right). Clicking on the link will allow you to save this compressed folder to your computer. Extract all the files and then open them in a web editor and modify them to meet your purpose and target audience.

The directions that follow refer to the files that are included in this sample set of files.

Home Page

"index.html" or "index.htm" are filenames used for home pages. If web servers find a file by this name within a folder it will be displayed automatically. In general, choose a filename that helps to describe what is in the file. Try to eliminate the use of spaces in your file names.

Modifying Text

Modifying the text that you have typed on your page is very similar to the way you would do this in any word processor.

Revise your page......Save the changes.

This is pretty much the routine. Make your changes to the content. Save these changes and then preview to see what your webpage looks like. And so on.... until your are happy with the results and the page is ready to share!

In DreamWeaver

Modifying Text

1. Highlight your text before making any formatting changes.
2. Change SIZE, font, style, and color using the Property Inspector.

Previewing a Page in a Web browser
If you have installed Microsoft Internet Explorer on your computer, you can quickly preview the current page by clicking the Preview button or press F12.

A Word about Fonts

DreamWeaver only gives you the option of the 5 fonts that are most commonly found on any computer today.

RULE OF THUMB: Use only those common fonts you know your audience will be able to see. When a distant computer does not have the font you have requested it reverts to the default font for their computer. This might not be what you want.

Now it is time to make some changes to the appearance of the page...

Formatting Pages

Changing the look and feel of a web page is easy to do. Here are two commonly used options that can help present and organize your message.

Changing Background Color

Make sure the there is enough contrast between the color of the text and the color of the background so that your text can be easily read.

In DreamWeaver

1. In the Property Inspector, click the Page Properties... button
2. In the Appearance dialog box, select a background color.

Adding Horizontal Lines

People add horizontal lines to their web pages to organize information or to separate one part of the web page from another. This can be very effective and is easy to do.

In DreamWeaver

• Place your cursor on the page where you think you would like the line to go.
• Locate and select the "Insert" menu item
• Locate and select the "Horizontal Rule" option

Adding Links

Most e-portfolios have more than one page. In fact page links make the web what it is. There are basically two different sets of web pages you can link to:

1. links to files saved by you in your "www" folder, and
2. links to web pages other than your own.

Modify or Create Links to your own files

In DreamWeaver

• First, type word(s) on the page that you want people to click on.
• Highlight or select these word(s).
• Locate the "Properties" window (see below)
• Use the little yellow folder icon to navigate to and select the file that you want this link to display.
• Click back in the page: SAVE then REFRESH your browser and check to make sure the link works.

NOTE: You can link to any type of electonic file. Make sure you place a copy of this file online in the same relative location. You might link to powerpoint presentations, excel files, .pdf files or whatever format your evidence is saved in. If your browser has the appropriate plug-in installed, the file will be displayed within the browser window. Otherwise the browser will give your user a dialog box that will ask the user what they want to do with the file – open it with an application, save it, etc.

RULE OF THUMB: Only link to files that you are sure your users have the software they need to view your evidence!

Links to other Web Pages

In DreamWeaver

• First, type word(s) on the page that you want people to click on.
• Highlight or select these word(s).
• Locate the "Properties" window (see above)
• Type in the complete URL or web address for the page you want to link to into the Link text area..
• Click back in the page: SAVE then check the page in your browser and check to make sure the link works.

Adding Tables

Simple tables – simple layouts. Most people think of using tables to help layout data into columns and rows so that it can be read easily. Web pages use simple tables to help you place your information closer to where you want it on your page.

Consider this typical page layout on the right. How did they get the links to stay on the left side of the page? Why don't we see the table?

The example web page contains a table with 1 row and 2 columns.

• left column for links
• right column for narrative
• border of the table is set to zero width (border=0)
• cells of the table have been padded 4 pixels to spread things out a bit (cellspacing=4)

OK, let's make this happen...

In DreamWeaver

• Place your cursor on the page where you want to insert the table.
• Locate and select the "Insert" menu item.
• Locate and select the "Insert Table" option.
• Select the number of rows and columns.
• It's there!

Adding Images

In order to insert images into your web page you first need to have a copy of the image file itself.

Let's get some images...

PLEASE NOTE: Respecting copyright laws is your responsibility. You can be prosecuted for anything that is published in your 'www' folder that violates copyright laws!

Below is a link where you can get Penn State images. Since you are a Penn State student publishing on a Penn State web server, the use of these images in this instance does not violate copyright guidelines.

Penn State Web Image Collection or Penn State Marks

The browser "Save as..." procedure

Any image that is displayed in your web browser can be easily saved as an individual file. Here's how:

PC Users

• In your browser place the cursor over the image that you would like to save.
• Right click and select the option "Save Image ...." or "Save Picture As". This will provide you with a Save dialog box.
• Navigate to the directory to which you would like to save the image and save.
• This image is already a .gif or a .jpeg because it was being displayed on the web, so it is already web-ready!

Mac Users

• In your place the cursor over the image that you would like to save.
• Hold the mouse button down. After a short time an option box will appear.
• Select the option "Save Image ...." or "Save Picture As". This will provide you with a Save dialog box.
• Navigate to the directory to which you would like to save the image and save.
• This image is already a .gif or a .jpeg because it was being displayed on the web, so it is already web-ready!

Inserting Images

In DreamWeaver

• Place your cursor on the page where you think you would like the image to go.
• Locate and select the "Insert" menu item
• Locate and select the "Picture > From File" or "Image" option
• Navigate to and choose the image that you have recently saved.
• Click 'OK'

Once the picture is inserted into your web page you can pretty much drag it around to the location that makes sense. Remember, this is a web page and layout is not as sophisticated as Word where you can place a picture anywhere there is blank space.

Images from digital cameras or scanners can be easily integrated into your e-portfolio. There are three skills that come in handy when working with these images, cropping, resizing and optimizing.

VIEW - Cropping, Resizing and Optimizing - MOVIE

Time to Publish?

Thus far everything that you have created has been saved in a local folder that is not online. As you know, only the files located within your "www" folder are the ones that are visible to the rest of the world. So, you need to transfer a copy of your files to this folder. To do this essentially all you need to do is to copy and paste all of the pieces of your web page(s) into your "www" folder. There are two ways to make this happen.

You can do this manually – connect to your PASS space using either SSH or Mapping your PASS space, then simply copy and paste the files for your website into your 'www' or 'www_protected' folder.

Here is an example of publishing the website that I created using the Weebly.com service into my own Penn State Personal Web Space.

Publishing A Weebly Website into My PASS Space