HTML Basics:
Icon: FrontPage Save Page

 Title: Jan's Illustrated Computer Literacy 101

FrontPage has some work to do behind the scenes when you save a page. It must figure out what path to write for the SRC of each image. When you save to a new location, this can get tricky, as mentioned on the previous page. Image links may break.

Rules to prevent broken images:

         1. Import/copy each image to the web before inserting on page

         2. Rename/move web files only from inside FrontPage
 

What Happens: Save to Current Web

In the table below, the situations on Color block: green green background work well; everything is inside the web.  The situations on Color block: orange orange background may cause problems when you move or publish the web. Avoid them.

If image is: Path will be:
in web and
in same folder as page		 Filename
src="carla2.jpg"
in web and
in different folder from page		 Relative path

src="../web/carla2.jpg"
not in web but
on same disk as web		 Relative path

src="../../multimedia/house.jpg"

(Whoops! You cannot tell by looking at the path whether the file is in the web!)

This is the case that causes the most broken links!
on Internet site Absolute URL to a web site

src="http://www.jegsworks.com/mail.gif"
on a different hard disk or floppy disk Absolute path

src="file:///A:/my%20docs/web/carla2.jpg"


Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    WYSIWYG
    FrontPage/FPXTo subtopics
    Images in HTML Arrow - Subtopic open
    Icon: FrontPage FrontPage Arrow - Subtopic open OR FPXTo subtopics
    icon-footprintInsert Image
    icon-footprintMore Images
    icon-footprintInline Images
    icon-footprintReplace Image
    icon-footprintImage Link
        Align & Space
    icon-footprintAlign Images
        Image Issues
    icon-footprintSave Page
    icon-footprintEdit/Convert Image
    icon-footprintPictures Bar
    icon-footprintPublish Web
    FormattingTo subtopics
    TablesTo subtopics
    Print
    ConvertTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics

Search 
Glossary  
Appendix

What Happens: Save to Another Location

When you save a page to a folder or web outside the current web, FrontPage has to figure out:

  1. whether to change the path for each image

  2. whether to copy the image to the new location

What makes the difference?

  • the original path to the file
    [filename, relative path, absolute path or URL]
     

  • where you are saving to
    [same web, same disk, or different disk or computer]
     

  • the page is or is not in a FrontPage web;
    saving into a FrontPage web or not
     

  • if the page has unsaved changes

There are far too many combinations of these factors to make a neat chart. I tried! Just remember the rules above - get the images into the web before inserting them on a page and do all your moving and renaming from inside FrontPage (in the Folder List pane).

WarningBy default, FrontPage will offer to save images to the same folder as the web page. Is that what you want? When you save a page, look carefully at the Save Embedded Files dialog to see which images are being copied and what folder they are being copied into.

Tip Save  and  Save As  are not the same commands as  Publish .

Publishing with FrontPage is the best way to keep everything in the new location just like it is in the original. The folder structure will be duplicated and images will be in the same places as before. But even then you can still run into trouble if you did not follow the rules above.

FrontPage and Site Design

Some web designers recommend keeping your images in a separate folder from your HTML files.  This practice likely started in the olden days when images had to be downloaded separately. It was convenient then to have all images in one folder. It's not particularly helpful these days.

FrontPage will offer to put images from outside the web into the same folder as the page, so you might as well plan on that location. The exception is for images that are used on many pages in different folders, like company logos and navigation icons. It may be more convenient to put these in a common folder or in the root folder for the web.

Icon Step-by-Step

Step-by-Step: Save to a New Location

  Icon Step-by-Step
What you will learn: what happens if you save a web page to a different folder
what happens if you save a web page to a different drive or computer

 Start with:  Class disk, hector12.htm, resource files

You will save your web page to a different folder on your Class floppy disk and then to a folder on the hard disk. FrontPage will save your images differently in these two cases.

Note: If you have been saving your work to your hard disk instead of to a floppy disk, you will need to modify the directions. For the section Save to a Different Drive, you must use a physically different hard disk or some kind of removable media disk like a floppy or zip disk.

WarningUsing the Save command is not the same as using the Publish command, which you will learn about later. Publish does a lot more than just copy files.

Create Folder - Same Disk

  1. Folder Tree: a:\my docs\web\hectorClass diskInsert your Class floppy disk into the drive.
     
  2. Open Explorer drive A:.
     
  3. Create a folder two levels up from hector named  family .
     

Create Folder - Different Disk

  1. Folder Tree: C:\My Documents\My ClassOpen Explorer to the folder C:\My Documents.
     
  2. Create a new folder named  My Class . (Your folder tree will probably look different from the illustration.)
     
     

Save to Same Disk - Different Folder

Folder at the same level or higher

You will first save the page to the folder family, which is a folder on the same disk as the original file. 

  1. Switch back to FrontPage, with hector12.htm. opened.
     
  2. From the menu select  File  | Save as...  Navigate to the folder family.
    [Use the button Button: Up one level Up One Level twice and then double-click the folder family.]
     
  3. FrontPage shows hector13.htm in family folderClass diskSave the HTML file as  hector13.htm  to the folder family. FrontPage now shows hector13.htm on the page tab and in the Title bar. But the Folder List still shows the web hector.

     
  4. View the HTML code and see what the paths are now for the images. For example, the code for the photos of Hector's family now shows new paths:

    <p>
    <img border="    0" src="../web/hector/carla2.jpg" alt="Hector and Carla" width="170" height="212">
    <img border="    0" src="../web/hector/ricardo2.jpg" alt="Ricardo" width="170" height="212">
    <img border="    0" src="../web/hector/rosa2.jpg" width="284" height="213"></p>
     

    The paths show that from the folder family that holds the HTML file hector13.htm, the browser must go up one level and then down to the folder web and then down another level to the folder hector to find the image files.

    WarningThe images were not moved. If you move hector13.htm without using FrontPage, perhaps using Explorer, the links will break. Only an advanced program like FrontPage will recalculate the paths for you when you move a page.
     

  5. Close the page hector13.htm.

Subfolder

You will now save the page to a subfolder of hector. The images won't be moved, so the paths will change again.

  1. In FrontPage, open the page hector12.htm. again. ( File  |  2 A:\my docs\web\hector12.htm )
     
  2. From the menu select  File  | Save as... 
  3. Class diskSave the HTML file as hector14.htm to the folder images, which is a subfolder of hector.
     
  4. View the HTML code to see the paths for the images. The photos of Hector's family have different paths now.
     
    <p>
    <img border="    0" src="../carla2.jpg" alt="Hector and Carla" width="170" height="212">
    <img border="    0" src="../ricardo2.jpg" alt="Ricardo" width="170" height="212">
    <img border="    0" src="../rosa2.jpg" width="284" height="213"></p>

    The paths show that the images are one folder up the folder tree from the HTML file.
     

  5. Close the page hector14.htm

Save to a Different Drive

Now you will save the page to the hard disk. This will be a bit different since the new location is on a different disk. FrontPage will offer to copy the images to the same folder. You will accept the offer for all but one of the images, just to see what will happen.

  1. Folder Tree: C:\My Documents\My ClassOpen hector12.htm again.
     
  2. From the menu select  File  |  Save as... 
     
  3. Class diskSave the HTML file as hector15.htm to the folder My Class, which is your new subfolder of My Documents on drive C.

    A dialog will offer to save the images to this folder.
     

  4. Select ricardo2.jpg clicking on it. Click on the Set action button.

    (Normally you would select all of the images to be saved though you might need to change the folder.)
     

  5. Dialog: Set Actio - Don't SaveIn the Set Action dialog, choose Don't Save and click on OK to close the Set Action dialog and then on OK again to close the Save Embedded Files dialog.

    Dialog: Save Embedded Files (images for hector15.htm)
    TipThe Folder column may be too narrow to show the whole folder path. You can widen the column by dragging the divider between columns. If you need the column to be wider than the display area, you can scroll sideways with the scrollbar across the bottom.
     
  6. View the HTML code to see the paths for the image.

    The path for each image is just the filename. The images were copied to the same folder as the HTML file.

    <p>
    <img border="    0" src="carla2.jpg" alt="Hector and Carla" width="170" height="212">
    <img border="    0" src="file:///A:/my%20docs/web/hector/ricardo2.jpg" alt="Ricardo" width="170" height="212">
    <img border="    0" src="../rosa2.jpg" width="284" height="213"></p>

    The path for ricardo2.jpg is quite different!  The Don't Save choice in the dialog said it would "leave the reference in the page as it is." Hmmm.  Not what I expected! How about you??

    Apparently it meant "create a path that points to the current image location" rather than "The code will not change." FrontPage has changed the path for ricardo2.jpg to point to the original location on the floppy disk.

    WarningOverwriting existing files: If there is already an file of in the folder with the same name as one you are trying to copy to the folder, the Save Embedded Files dialog will have Overwrite in the Action column. Be sure you want to overwrite that file. If you need both files, you should rename the file you are about to copy. FrontPage will change all the references to it in the files you are are copying.
     

  7. If you are sharing this computer with others, delete the folder My Class from My Documents on the hard drive.