Home

Build It Using a Web Editor

Work Locally, Publish Later

While you are working, where will the files you create be stored? Determine this location before you get started. Keeping track of which files are where is half the battle. This working folder may be a folder on your local hard drive, or it may be a folder in your PASS (but not in the "www" folder.)

A First Simple Web Page

Open your web editor application so that it displays a blank page.

Type a single line.

If this is your first save, use the File >>> Save as... command to save this file in your working folder. You have just created a web page.

Setting up an Entire Web Site

FrontPage and Dreamweaver both have 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 Frontpage" or "Getting Started with Dreamweaver" ITS seminar handouts.

Templates

You will find a wide variety of website templates or free layouts if search the web. You may download just the essentials or a whole web site in a compressed (.zip) format . 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). Click on the link and save this compressed folder to your computer. Extract all the files and then open them in a web editor and modify to meet your purpose and target audience.

Filenames

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

What does my page look like in a real browser?

Under File menu >>> Preview in Browser.

OK? Now it is time to make some changes to your webpage...

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......Refresh your Browser

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!

FrontPage Users

Modifying Text

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

Saving your Web Pages
File Save (if you have already saved the file) or File Save As (if it is your first save)

  1. In Page view, click Save As on the File menu.
  2. Navigate to the location in the file system where you want to save the page.
  3. In the File name box, type the name of the file.
  4. Select Change to modify the Page Title. This text will be the text that someone navigating the Internet will see on the Web Browser's Title bar as well as the name
    give to the page when it is book marked.
  5. Click Save.

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 tab in Page view.

DreamWeaver Users

Modifying Text

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

Saving your Web Pages
File Save (if you have already saved the file) or File Save As (if it is your first save)

  1. Click Save As on the File menu.
  2. Navigate to the location in the file system where you want to save the page.
  3. In the File name box, type the name of the file.
  4. Click Save.

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

Frontpage gives you the ability to format text to any of the fonts currently loaded on the machine you are working on. Cool! DreamWeaver, on the other hand, only gives you 5 options of 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 of that 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.

FrontPage Users

  1. Go to Format Background
  2. In the Background box, select a background color.

DreamWeaver Users

  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.

FrontPage Users

  • 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 Line" or "Horizontal Rule" option
  • It's there!

DreamWeaver Users

  • 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
  • It's there!

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.

Links to your own files

FrontPage Users

  • First, type word(s) on the page that you want people to click on.
  • Highlight or select these word(s).
  • Under the "Insert" menu select the "Hyperlink" option
  • Use the dialog box to navigate to and select the file that you want this link to display.
  • Click 'OK'
  • Click back in the page: SAVE then REFRESH your browser and check to make sure the link works.

DreamWeaver Users

  • 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 that is saved in your 'www' folder. This includes 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

FrontPage Users

  • First, type word(s) on the page that you want people to click on.
  • Highlight or select these word(s).
  • Under the "Insert" menu select the "Hyperlink" option
  • Use the dialog box to type in the complete URL or web address for the page you want to link to.
  • Click 'OK'
  • Click back in the page: SAVE then REFRESH your browser and check to make sure the link works.

DreamWeaver Users

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

FrontPage Users

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

DreamWeaver Users

  • 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

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!

Insert Your Image

Use either FrontPage or DreamWeaver – the process is very similar. Here are the steps...

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

Flash Movie

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.

  1. If you have used FrontPage or DreamWeaver to set up a website, you will want to use the program's automatic methods for transferring all of the files you will need.
  2. If not, you could do this manually – connect to your PASS space, then simply copy and paste the files there using Map or SSH, or upload using the PASS Explorer.