Web Creation and Publishing with FrontPage 2003 

(To skip ahead to instructions for setting up your account for web publishing and publishing your files on eclipse for Barnard students) or bc for Barnard faculty/staff  , click Setting up account for web publishing); for cunix click Publishing to your Cunix account)



FrontPage 2003 is a web editing and web management program for computers running 
Windows Operating systems.

Getting Started
If this is the first time you are creating this web site create a folder on your removable disk or 
other disk where you will save your web files. For this example, I have created a folder named
"website" on the hard drive of my computer. If you already have a website, you can edit 
the files you currently have using FrontPage, you will still be able to edit the same files 
using other web editing programs if you wish. FrontPage also allows you to edit HTML, 
click on the HTML tab at the bottom of your page window to switch to the HTML 
screen.

Open FrontPage 2003
When you first open the program it looks very similar to other Microsoft Office 2003
programs, in fact many of the command in the tool and menu bars serve equivalent functions.
By default FrontPage will open in the new page window. However since a website is a collection of files
which are usually related, we want to open a whole folder where we will save our new web files. We will use the
folder that we created at the beginning of this session.

From the Menu

Choose File -> Open Site, browse to and select the folder that you just created, mine is called "website".

 The 
"Add FrontPage Information" window will open. This window displays a message that 
FrontPage needs to add information in order to manage your hyperlinks and other site 
content. Say yes to add this information to your folder.



The Web Site Pane will open up showing your folder and within it two folders _private and images that have
been created by Frontpage. Do not delete the _private file and it has contents that help manage your site.
You can delete the images folder if you like, or use it to store images, that's up to you. If you want to you could
create your own subfolders in your website by choosing File-->New Folder or Right-
Clicking in the Web Site Pane and choosing New Folder.

Start creating your first web page by choosing View-->Page

A blank page opens with the name new_page.htm, Save this first page as index.html, using the
familiar File-->Save As command,
index.html will be your homepage, the page that opens first when someone hits your website online.

Notice that the bottom of your page has four buttons, these allow you to switch to and from several view of your page.
Design allows you to edit your page in wysiwyg mode, Split allows you to view and edit both in wysiwyg and in HTML,
Code allows you do view and edit only the HMTL code. Preview shows you a preview in Frontpage of what the page
would look like, you cannot edit in Preview mode. Remember to really see what your site would look like online you should
the command File-->Preview in Browser and choose browser. Frontpage automatically detects the browsers you have installed,
it even allows you to preview your page at several screen resolutions.

The next thing to do after saving the index.html file is to set the page properties for this page by choosing File-->Properties or Right-
Clicking in your page and choosing Page Properties.

The Page Properties window will open up at the General Tab by default, or you can select it if your default settings are different.

In the General Tab, the Title Text box, type a title for your web page. This title will 
appear at the top of the browser window when your page is opened in a web browser.
My title here is "Welcome to my website". You can also type in a page description and keywords
to help people find your page in a search. In this case if someone types "live jazz" or "cats" this file index.html should
be one of the pages that come up. Of course depending on a number of things like how many other people visit your site
or link to it, it may not be at the very top of the list.

Click on the Formatting tab and select colors for your background, text and links. Don't
leave the colors as "Automatic" because then they will default to whatever settings the person
visiting your page has on her/his computer.

To use a picture for your background, you would need to import this picture into
your website first, read on to find out how to import files into your website.
Once you have imported the image file click on the check box labeled background picture 
and browse to the image file you would like to use for your background. Keep in mind 
that the picture will tile (unless you specify otherwise using special code in the HTML window),
so it would be good to use either a picture that's large enough to fill up your browser window
so that it tiles only once, or to use a subdued image that will not be too distracting if it tiles,
that is, of course unless you intentionally want a busy effect. You may be better off using the
the image as a background in a table or a cell of a table. We'll introduce tables later in this session.

After you have specified the above, close the Page Properties window by clicking on OK.

Next let's set the font and font size for your page, you can change these for individual lines as you 
work too.
Choose Format-->Font from the Menu Bar, this will open the Font window from which 
you can select a font as well as it's style and size. Click on Apply and then OK to close 
this window. You can get the Font Window by Right-Clicking in your page and choosing 
font.



After you have selected your font and chosen your page properties, you can start typing 
in the content of your web page. You can edit the html code as well if you like, clicking 
on the HTML tab switches you to the window in which you can edit your page-using 
HTML. You could also use the Split mode to edit both ways or to observe the code that Frontpage
inserts as you type in the wysiwyg window.

Inserting Pictures

To insert pictures into your web page, you would need to prepare the image files first. For 
example you can scan a photograph and then save it on a disk to be used in your web 
page.

To include Pictures in your web page, you would first need to import the image file into 
your web. 

Importing Files into Your website


Click on the Web Site Tab at the top of window near the File Tab (the file tab shows the filename, here index.html) to go back to the
Web Site pane

If you would like to import the file into a folder then Double Click on the
Folder that you want to import the file into. Since we want to import 
an image, we would double click on the images folder, to place the picture we import in 
this folder (you are not obligated to keep your images in the images folder). Once you are in the folder
into which you want to import your files...

Choose File-->Import…
This will open up the Import window. Note that Click on Add File (note that you can also 
import entire folders by clicking on Add Folder).
The Add File to Import List window opens. Browse to the location where you saved your 
file, select it and Click on Open. This brings you back to the Import window where you 
would simply click OK.

The Import window closes to bring you back to the images folder. Right click in a blank 
area in the window of the images folder, and in the Short-cut Menu that opens, click on 
"Up One Level". This will take you above the images folder, where you can see your 
files and other images. Double click to open the file into which you would like to insert 
your picture or just click on the File Tab.

When you have opened this file, place your cursor where you would like your picture to 
go. Choose Insert-->Picture—From File 



This command opens the picture window, which shows the folder containing your web 
pages. (In this case I named my folder website). 
Browse to where you image file is. In this case our image file is in the images folder. 
When you have browsed to your file, either select it and click OK, or double click on it. 
The Picture window closes up, and your picture is inserted at the point where your cursor 
was placed.

Tables
One of the ways to organize the content of your web page is using tables. This allows you 
to position text and pictures strategically on your page. You would create a table by 
choosing Table-->Insert-->Table



This command opens the Insert Table window where you can choose the number of row 
and columns and other options such as border size, table width, etc.

You can alter these properties as well as add other properties to you table even after 
you've created it. Simply Right-Click on the table and choose Table Properties, this 
opens the table properties window in which you can choose a background color or 
background image for your table, change it's size or alter the properties of the table's 
borders.

Similarly you can edit the properties of individual cells, Right-Click in the cell 
and choose Cell Properties to get to the cell properties window. 
The Right Click Menu is context-sensitive and it changes depending on the object or area 
where you click your mouse. Many of the items on this menu can be found from the 
menu bar. You may find it entertaining to discover where these items are on the menu 
bar.

Creating Hyperlinks

You can create links to other pages from objects in your web, like text and pictures.
Select the object and choose Insert-->Hyperlink. This opens up the Create Hyperlink 
window
 

You can choose to link to a file within your website, by clicking on the file you wish to 
link to which will appear in a list in this window. The name of this file will appear in the 
Address text box. You can also link to a page outside your website by typing it's address in 
the same textbox. Here I am linking jazz vocalist Maxine Sullivan's image to the website
whose address is http://www.swingmusic.net/Sullivan_Maxine.html

For the following exercise, create a second page and save it. You can do this by choosing File -->New
and the choosing Blank Page in the panel on the right or simply save your index.html file under another name.
The latter option will save you time because you would have to re-do the fonts and and page properties.
I have named my second page jazz.html, and decided to delete the picture and table. I still have to change the title
of this page in the Page Properties dialog box (File-->Properties), you can change the keywords and description as well.
 

 
Bookmarks (also called Named Anchors in other Editors)
You may want to link an object on your page to a particular point on another page within 
your web page. This can be useful if you have a particularly long page. Note that it's 
better to have more short pages, rather than one long page, to prevent the ennui of 
scrolling up and down miles upon miles of web pages.

You would create the bookmark in your target page. For example I want to link the name Nina Simone
on in my index.html page her picture which I had placed at the very bottom of the file named jazz.html 
First I will create a bookmark next to Nina Simone's picture in the file jazz.html 
and then go back to index.html and create a link on the words Nina Simone. Here are the steps.

First open the target file, in this case jazz.html.
Scroll down to where the bookmark should appear, in this case next to Nina's Simone's picture. Click to place your cursor in position
and then choose Insert-->Bookmark. The 
Bookmark window opens



Type a name for your bookmark, choose a simple short name all in the same case. Click 
OK and close the file.

Go back to index.html. Select the item you will link from, in this case it's the text Nina Simone,
choose Insert -->Hyperlink. In the Create Hyperlink window, click on your target file, in this case jazz.html.

Click on Bookmark. This opens up a list of the bookmarks that are available on your target page, in this case just one
"ninaphoto"



Click OK and save your file.

Now when the viewer clicks on Nina Simone, in the sentence "We simply adore Nina Simone" in the index.html file,

the target file jazz.html will opens up displaying the location of Nina Simone's picture since
this is where we created the bookmark.
 

Publishing Your Web Pages
Students can publish their web pages to either barnard or cunix account. 
To publish your accounts on your barnard account, you would transfer your web files to 
the public_html directory in your account using a file transfer program like Secure Shell 
File Transfer which is available in the students' computer labs in LCC and in the 
residence halls. Secure Shell Client and Secure Shell FTP are set-up in the lab with 
shortcuts on the toolbar to enable you to log in quickly onto your barnard or cunix 
account.

Setting Up your account for publishing

This information applies to accounts on bc.barnard.columbia.edu and eclipse.barnard.columbia.edu, where bc is for faculty and staff while eclipse is for students. In this example we are connecting to eclipse.
If you have never published to your barnard account before, you would first need to set 
up your account for publishing. Log onto your account using a telnet program you like 
SSH Client provided in the lab. Once you are logged in type web.setup and press enter at 
the $ prompt.



The web.setup command creates a folder called public_html, into which you will transfer 
you files. This command also sets the file permissions which allow the world to view 
your web pages on a browser, all you need to do is transfer your files into the public_html 
folder. 

Transferring your files to the server
After the public_html folder has been created in your account. You will transfer your 
files to your public_html directory using Secure Shell File Transfer. Connect to your 
account by clicking on the appropriate toolbar shortcut and then typing in your username 
and password.

This will open a window displaying files and folders in your barnard or cunix account. 
You want to move your files into the public_html directory. Double click on the 
public_html directory to open it.


Once you are in the public_html folder, copy your web files from your computer to the 
server clicking the upload arrow (up- arrow). Clicking the upload arrow opens a window 
labeled Upload-Selected Files within which you can navigate to and select the files that 
you would like to publish on your website.
 

You're done, so what's the web address?
When you publish to your Barnard Account, your URL depends on the server that you published to as follows...

Publishing to your cunix account
The official guide to publishing webpages at Columbia which is available at http://www.columbia.edu/acis/webdev/

But below is our version - This is a simpler explanation and should work for most people's cunix accounts, if it doesn't work for you, call 47172 for help.

Unfortunately you cannot use SecureShell FTP to publish to cunix, as we did above for bc (some users claim exceptions), instead you would use the program WinSCP to transfer the files to your cunix account. Essentially, publishing your web pages is simply copying your web files to the public_html folder in your cunix account.

(If you use Macintosh, the equivalent program would be Fugu, the principles are the same)

Installing WinSCP onto your computer
If you are publishing your files in the Students' Computer Labs then WinSCP is already installed, just ask the lab consultant to help you find it. If WinSCP is not already installed, you can download it from http://www.columbia.edu/acis/webdev/ftp.html

Click on WinSCP, click on Download WinSCP for Windows. This action will open separate window where you should type in your UNI which is the same as your cunix username and your password for the same. Save the file to a location that you will be able to find later - I know this seems obvious, but your browser may save to a default location that you are unaware of, throwing you into a frustrating cycle of downloading, looking for the file and downloading again, searching and over and over.

Double-click on the file to open and install it. Now pay attention to the screens as you install, and look out for Initial User settings in the window - below is a picture of what I'm talking about. This is where you choose your user interface style, and it is important because it determines how easy your life is going to be after this.

The default interface style is the Norton Commander Interface - Yes, you want this! It allows you to see your local folders as well as the folders in your account on the server (remote directory). Click Next and so on to Finish the Installation.

When you first open the program you will see the login window...

Type in the host name - cunix.columbia.edu, your username and your password. If you want to save this information so that you can quickly login again later, then you could leave out your password for the time being, and click Save. Your settings will be saved as a profile which you can name to make it easier to recognize. If you don't want to save this information then just type your password click Login straightaway. If you choose to save your login information, then the next time you login, the name of this saved profile will be listed. You can click on it and choose Login and then type in your password. In the example below I named my settings cunix.columbia.edu, you can name it anything you like.

Once you've logged in you will see a file transfer window like the one below:

The left side of the window shows the files on your local computer, the right side shows the files on the server. If you don't have this nice two panel window then it just means that you did not choose Norton Commander Interface when you were installing as I suggested that or you have a different version of WinSCP. You can still transfer files, call the HelpDesk if you get stuck. We'll assume that everything went smoothly and you saw all the right screens and now you do have the double paned window. On the right hand side which is the "Remote" side, look for the folder public_html, this folder should be at the same level as your mail folder which is call "mail" if you can see "mail", but you don't see "public_html" then you will have to create it.

To create the public_html folder first make sure that the remote side is selected by clicking where indicated by the red arrow below

Note that unlike the first double paned window, now the side labelled /hmt/skol/u/4/a/ao260 (the path to my account) is highlighted, your window may have a different path name, nevertheless, you want the remote side highlighted. Once you have done this, click on the "Create Directory" button at the bottom of the screen - it's indicated by the red arrow in the picture below:

This action with open the Create Folder Window, type the name of your file as public_html and click OK

Once the public_html folder appears on the right panel, Right-Click on it and choose Properties. This will open the file properties window. For most cunix accounts the properties will have already been set as shown below with R (read) checked for Owner, Group and Others, W(write) checked for Owner only and X (Execute) checked for Owner, Group and Others. If this is the case, then you are in luck, any new folders that you add will have the correct permissions. If they are not checked as shown, it means that you are unique and you will have to check them manually for all folders that you publish to your website - hopefully this won't happen to you, if it does and you need help, call the Help Desk. If permissions are all set as shown below just click cancel to go back to the file transfer window.

To publish your web pages to your cunix account, double click to open the folder "public_html" on the Remote Side on the Right, and then on the local side, browse to where your web files are saved. If you need to, use the move up a level command (folder with up arrow on it) to move to a higher level in your current drive.

In this example, I stored my web files in a folder called web on the C:drive of my computer. Note that on the Remote side, I have opened the folder named public_html, which right now is empty.

On the Local Side, I have moved to the C drive where I can see all the folders in the C drive. I saved my web files to a folder named web, but you do not copy the web folder over to the remote side, instead you will copy the CONTENTS of the web folder over. In other words, double click to open the folder that contains your web files.

Open the folder that contains your web files. In other words, the local side should show you the contents of your web folder, the files themselves and any other subfolders in your website, the Remote side should have the folder public_html open. The next thing you will do is click on the files on the Local (Left side) and Drag them over to the Right side.

In other words the contents of your web folder on you local computer should be the same as the contents of your public_html folder. If you copy your web files elsewhere then your website will not be visible, as usual, call the Help Desk if you get stuck here. Look at the picture below - the contents of my public_html folder and the contents of the folder where I saved the webpages I made are exactly the same - I copied everything that was in my web folder on my desktop computer to my account on the server.

If you were able to copy your web files over to the public_html folder, then that's it. You  can now view your website in a browser using the address

http://www.columbia.edu/~youraccountname

In this example my accountname is ao260

Good luck and have fun with webpublishing.

There are many other resources and tools available on the web for instance

Some great sites for references/learning:

http://www.lissaexplains.com/ - This website was started by Lissa when she was just 11 years old. It's just as good now as it was then - clear, straightforward explanations.

http://webmonkey.wired.com/webmonkey/

http://www.w3schools.com/

---------------------------------------------------------------------------------
FrontPage 2003 is installed on all computers in the Lehman Computer Center (LCC), and in the computer labs in the
residence halls. Scanners and image editing software are available in the Lehman Computer Center (LCC).
LCC consultants will be able to help you in the lab and answer your questions.